/* Page « Études de cas » (/etudes-de-cas/) — styles propres au corps de page.
   Conçue via /impeccable sur le système visuel pro déjà audité (mêmes tokens
   OKLCH sapin/bourgogne que deleguer.css / travaillons.css, Schibsted Grotesk +
   Source Sans auto-hébergées). Le CHROME (en-tête, menu, pied, panneau-preuve)
   vient du thème (chrome.css) : absent ici.

   Toutes les classes sont préfixées « ec- » → zéro collision site-wide
   (notamment avec .bridge / .rise déjà pris dans content.css). */
:root{
  --spruce-900:oklch(0.22 0.026 182);
  --spruce-800:oklch(0.28 0.03 180);
  --spruce-700:oklch(0.36 0.03 178);
  --bourgogne: oklch(0.42 0.16 26);
  --bourgogne-vif: oklch(0.50 0.18 28);
  --bourgogne-900:oklch(0.32 0.12 27);
  --sauge:     oklch(0.72 0.025 160);

  --bg:      oklch(0.985 0.003 100);
  --surface: oklch(0.965 0.005 95);
  --surface-2:oklch(0.94 0.008 90); /* barre de fenêtre des captures */
  --ink:     oklch(0.20 0.012 55);
  --ink-soft:oklch(0.42 0.012 50);
  --ink-body:oklch(0.35 0.014 50);
  --line:    oklch(0.90 0.006 90);
  --line-strong: oklch(0.82 0.01 70);
  --on-dark: oklch(0.94 0.012 90);
  --on-dark-soft: oklch(0.78 0.02 130);

  --step-0:  clamp(1.08rem, 1.02rem + 0.32vw, 1.22rem);
  --step-1:  clamp(1.3rem, 1.15rem + 0.7vw, 1.7rem);
  --step-2:  clamp(1.7rem, 1.4rem + 1.4vw, 2.5rem);
  --step-3:  clamp(2.4rem, 1.8rem + 3vw, 4rem);

  --grotesk:"Schibsted Grotesk",system-ui,sans-serif;
  --sans:"Source Sans 3",system-ui,sans-serif;
  --ease:cubic-bezier(0.16,1,0.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:var(--step-0);line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}img,svg{max-width:100%;display:block}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--bourgogne);outline-offset:2px;border-radius:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html{scroll-behavior:smooth}

.ec-wrap{max-width:1120px;margin:0 auto;padding:0 clamp(1.2rem,4vw,2.5rem)}

/* ============================================================
   HERO — sapin sombre, sobre. Collines silhouette (système
   « Sapinière ») plutôt qu'aurore : la page parle de terrain,
   de preuves posées, pas d'effet.
   ============================================================ */
.ec-hero{position:relative;overflow:hidden;isolation:isolate;background:
  radial-gradient(130% 80% at 88% -12%, oklch(0.30 0.035 178) 0%, transparent 54%),
  var(--spruce-900);color:var(--on-dark)}
.ec-hero .ec-grain{position:absolute;inset:0;z-index:0;opacity:.04;pointer-events:none;
  background-image:radial-gradient(oklch(1 0 0) .5px, transparent .5px);background-size:4px 4px}
.ec-hills{position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(90px,14vw,170px);z-index:0;opacity:.5}
.ec-hero-wrap{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:clamp(3.6rem,8vw,6rem) clamp(1.2rem,4vw,2.5rem) clamp(5rem,10vw,8rem)}
.ec-kicker{font-family:var(--grotesk);font-weight:600;font-size:.9rem;color:var(--sauge);display:inline-flex;align-items:center;gap:.55rem;margin-bottom:1.3rem}
.ec-kicker::before{content:"";width:26px;height:1.5px;background:var(--sauge);display:inline-block}
.ec-hero h1{font-family:var(--grotesk);font-weight:800;font-size:var(--step-3);line-height:1.04;letter-spacing:-.035em;max-width:18ch;text-wrap:balance;color:var(--on-dark)}
.ec-hero .ec-dek{font-size:var(--step-1);line-height:1.5;color:var(--on-dark-soft);max-width:60ch;margin-top:1.4rem;font-weight:400}
.ec-hero .ec-dek b{color:var(--on-dark);font-weight:600}

/* ============================================================
   GALERIE — un cas = une rangée. Alternance capture ⇄ texte
   pour le rythme vertical. Séparateur fin entre les rangées.
   ============================================================ */
.ec-gallery{padding-block:clamp(2.4rem,5vw,4rem)}
.ec-case{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(1.8rem,4vw,3.4rem);align-items:center;padding-block:clamp(2.6rem,5vw,4.4rem)}
.ec-case + .ec-case{border-top:1px solid var(--line)}
/* rangées paires : capture à droite, texte à gauche */
.ec-case:nth-child(even) .ec-shot{grid-column:2;grid-row:1}
.ec-case:nth-child(even) .ec-text{grid-column:1;grid-row:1}

/* --- capture encadrée « fenêtre de navigateur » --- */
.ec-shot{border-radius:14px;overflow:hidden;border:1px solid var(--line-strong);background:var(--surface);box-shadow:0 20px 48px -22px oklch(0.2 0.03 182 / .4);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.ec-shot:hover{transform:translateY(-4px);box-shadow:0 30px 64px -26px oklch(0.2 0.03 182 / .5)}
.ec-chrome{display:flex;align-items:center;gap:.5rem;padding:.6rem .85rem;background:var(--surface-2);border-bottom:1px solid var(--line)}
.ec-chrome i{width:9px;height:9px;border-radius:50%;background:var(--line-strong);flex-shrink:0}
.ec-chrome i:nth-child(1){background:oklch(0.74 0.13 30)}
.ec-chrome i:nth-child(2){background:oklch(0.82 0.11 85)}
.ec-chrome i:nth-child(3){background:oklch(0.72 0.1 150)}
.ec-chrome span{font-family:var(--sans);font-size:.82rem;color:var(--ink-soft);margin-left:.4rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ec-shot img{width:100%;height:auto;display:block}

/* --- texte du cas : résultat chiffré en tête, puis titre + récit --- */
.ec-result{font-family:var(--grotesk);font-weight:800;font-size:clamp(1.9rem,1.2rem + 2.4vw,2.9rem);line-height:1.02;letter-spacing:-.035em;color:var(--bourgogne);font-variant-numeric:tabular-nums;text-wrap:balance}
.ec-result .ec-unit{display:block;font-family:var(--sans);font-weight:600;font-size:.34em;letter-spacing:0;color:var(--ink-body);margin-top:.5rem}
.ec-text h2{font-family:var(--grotesk);font-weight:800;font-size:var(--step-1);line-height:1.14;letter-spacing:-.02em;color:var(--ink);margin-top:1.1rem;text-wrap:balance}
.ec-text p{font-size:var(--step-0);line-height:1.65;color:var(--ink-body);margin-top:.85rem;max-width:52ch}

.ec-note{max-width:1120px;margin:clamp(1rem,3vw,2.4rem) auto 0;padding:0 clamp(1.2rem,4vw,2.5rem);font-size:var(--step-0);line-height:1.6;color:var(--ink-soft)}

@media(max-width:760px){
  .ec-case{grid-template-columns:1fr;gap:1.5rem;padding-block:clamp(2.4rem,7vw,3.2rem)}
  .ec-case:nth-child(even) .ec-shot,
  .ec-case:nth-child(even) .ec-text{grid-column:1;grid-row:auto}
}

/* ============================================================
   CTA final (bourgogne profond) — même famille que les autres
   pages pro.
   ============================================================ */
.ec-cta{background:var(--bourgogne-900);color:var(--on-dark);position:relative;overflow:hidden;margin-top:clamp(2rem,4vw,3.2rem)}
.ec-cta::after{content:"";position:absolute;right:-10%;top:-40%;width:50%;height:180%;background:radial-gradient(ellipse at center,oklch(0.55 0.16 30 / .5),transparent 68%);pointer-events:none}
.ec-cta-wrap{max-width:1120px;margin:0 auto;padding:clamp(3.4rem,7vw,5.4rem) clamp(1.5rem,5vw,3.5rem);position:relative;z-index:1;display:grid;grid-template-columns:1.5fr auto;gap:clamp(1.8rem,4vw,3.5rem);align-items:center}
.ec-cta h2{font-family:var(--grotesk);font-weight:800;font-size:var(--step-2);letter-spacing:-.03em;line-height:1.06;color:var(--on-dark);text-wrap:balance;max-width:30ch}
.ec-cta p{font-size:var(--step-0);line-height:1.6;color:oklch(0.9 0.02 40);margin-top:1.1rem;max-width:52ch}
.ec-cta .ec-cta-col{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem}
.ec-cta .ec-btn{font-family:var(--grotesk);font-weight:700;font-size:1.08rem;background:var(--bg);color:var(--ink);padding:1rem 1.8rem;border-radius:10px;text-decoration:none;transition:transform .2s,box-shadow .2s;display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap}
.ec-cta .ec-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px oklch(0.15 0.05 30 / .35)}
.ec-cta .ec-fine{font-family:var(--sans);font-size:.95rem;color:oklch(0.86 0.03 40)}
@media(max-width:720px){.ec-cta-wrap{grid-template-columns:1fr;gap:1.7rem}}

/* ---------- motion (entrée du hero au chargement) ---------- */
@keyframes ec-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.ec-rise{animation:ec-rise .7s var(--ease) both}
.ec-rise.d1{animation-delay:.08s}.ec-rise.d2{animation-delay:.16s}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{scroll-behavior:auto!important}
  .ec-rise{animation:none}
  .ec-shot{transition:none!important}
}