/* ============================================================
   DIRECTION 03 — ÉCLATS
   Diagonal energy. Angled section cuts, parallelogram shard
   cards with overlap, a faint triangle-shatter watermark.
   Text stays upright & readable. Highest intensity.
   Type: oversized Spectral italic display.
   ============================================================ */

/* repeating triangle field behind every rubrique (per request) */
[data-direction="3"] body {
  background-color: var(--paper);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='800' viewBox='0 0 1200 800'><g fill='none' stroke='%23a09680' stroke-width='1.1' stroke-opacity='0.54' stroke-linecap='round'><polyline points='0,70 180,140 160,0'/><line x1='180' y1='140' x2='0' y2='240'/><line x1='180' y1='140' x2='460' y2='290'/><line x1='180' y1='140' x2='290' y2='560'/><line x1='460' y1='290' x2='400' y2='0'/><line x1='460' y1='290' x2='0' y2='440'/><line x1='460' y1='290' x2='740' y2='150'/><line x1='460' y1='290' x2='290' y2='560'/><line x1='460' y1='290' x2='620' y2='510'/><line x1='460' y1='290' x2='950' y2='590'/><line x1='740' y1='150' x2='660' y2='0'/><line x1='740' y1='150' x2='820' y2='0'/><line x1='740' y1='150' x2='1080' y2='300'/><line x1='1080' y1='300' x2='1080' y2='0'/><line x1='1080' y1='300' x2='1200' y2='220'/><line x1='1080' y1='300' x2='1200' y2='420'/><line x1='1080' y1='300' x2='950' y2='590'/><line x1='290' y1='560' x2='0' y2='620'/><line x1='290' y1='560' x2='180' y2='800'/><line x1='290' y1='560' x2='440' y2='800'/><line x1='290' y1='560' x2='620' y2='510'/><line x1='620' y1='510' x2='580' y2='800'/><line x1='620' y1='510' x2='780' y2='800'/><line x1='620' y1='510' x2='950' y2='590'/><line x1='950' y1='590' x2='980' y2='800'/><line x1='950' y1='590' x2='1200' y2='640'/><line x1='1160' y1='0' x2='1200' y2='90'/><line x1='0' y1='760' x2='120' y2='800'/></g></svg>");
  background-repeat: repeat;
  background-size: 1200px 800px;
  background-attachment: fixed;
}
[data-direction="3"] .shell { position: relative; }
[data-direction="3"] .shell > * { position: relative; z-index: 1; }

/* rubrique surfaces let the triangle field show through */
[data-direction="3"] .method,
[data-direction="3"] .affaire,
[data-direction="3"] .synthese { background-color: rgba(250,248,243,.86); }
[data-direction="3"] .subcard { background-color: rgba(243,240,232,.82); }

/* ---- TYPE: oversized italic Spectral ---- */
[data-direction="3"] .hero h1 {
  font-style: italic;
  font-weight: 600;
  font-size: clamp(34px, 7vw, 74px);
  line-height: 1.0;
  letter-spacing: -.02em;
}
[data-direction="3"] .section-head h2,
[data-direction="3"] .synthese > h2 { font-style: italic; }
[data-direction="3"] .affaire h2 { font-style: italic; }
[data-direction="3"] .faille h3 { font-style: italic; font-weight: 600; }

/* a diagonal accent slash under the hero */
[data-direction="3"] .hero { position: relative; padding-bottom: 8px; }
[data-direction="3"] .hero__lede {
  border-left: 3px solid var(--accent);
  padding-left: 18px;
  max-width: 52ch;
}

/* ---- ANGLED SECTION CUTS ---- */
[data-direction="3"] .method {
  clip-path: polygon(0 18px, 100% 0, 100% 100%, 0 calc(100% - 18px));
  padding-top: 30px; padding-bottom: 30px;
}
[data-direction="3"] .affaire {
  clip-path: polygon(0 0, 100% 26px, 100% 100%, 0 calc(100% - 26px));
  padding-top: 40px; padding-bottom: 40px;
}
[data-direction="3"] .synthese {
  clip-path: polygon(0 26px, 100% 0, 100% calc(100% - 26px), 0 100%);
  padding-top: 46px; padding-bottom: 46px;
}

/* separators become steep diagonals */
[data-direction="3"] .decal--sep { display: block; color: var(--accent); margin: 18px 0 30px; height: 30px; }
[data-direction="3"] .decal--sep svg { height: 30px; }

/* ---- FAILLES: parallelogram shards, overlapping ---- */
[data-direction="3"] .failles { gap: 0; }
[data-direction="3"] .faille {
  background: rgba(250,248,243,.84);
  border: 1px solid var(--line-2);
  border-left: 4px solid var(--ink);
  padding: 30px clamp(20px, 3vw, 34px);
  max-width: 860px;
  position: relative;
}
[data-direction="3"] .faille:nth-child(odd) {
  clip-path: polygon(0 0, 100% 20px, 100% 100%, 0 calc(100% - 20px));
  margin-right: auto;
  margin-left: clamp(0px, 5vw, 80px);
}
[data-direction="3"] .faille:nth-child(even) {
  clip-path: polygon(0 20px, 100% 0, 100% calc(100% - 20px), 0 100%);
  margin-left: auto;
  border-left: 0;
  border-right: 4px solid var(--accent);
  padding-right: clamp(24px, 3vw, 40px);
}
[data-direction="3"] .faille + .faille { margin-top: -16px; }
[data-direction="3"] .faille:hover { z-index: 5; }

/* a diagonal accent eclat in a corner of each shard */
[data-direction="3"] .faille::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 46px; height: 46px;
  background: var(--accent);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  opacity: .9;
}
[data-direction="3"] .faille:nth-child(even)::after {
  right: auto; left: 0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  background: var(--ink);
}

[data-direction="3"] .faille__lhyanna { background: var(--accent-wash); padding: 11px 14px; }

@media (max-width: 760px) {
  [data-direction="3"] .faille:nth-child(odd),
  [data-direction="3"] .faille:nth-child(even) { margin-left: 0; margin-right: 0; max-width: 100%; }
  [data-direction="3"] .hero__lede { margin-left: 0; }
  [data-direction="3"] .shell::before { opacity: .08; }
}