/* =========================================================
   Cas d'étude — École Georges Désir
   Étend le design system de styles.css (tokens, .wrap, .label-tech,
   .display-*, .reveal, .btn-primary, .btn-outline, .link-arrow...).
   Fichier autonome, aucune dépendance croisée avec les autres pages.
   ========================================================= */

/* ---------- breadcrumb ---------- */
.cs-breadcrumb { padding-top: 6.5rem; }
@media (min-width: 768px) { .cs-breadcrumb { padding-top: 8rem; } }
.cs-breadcrumb nav { display: flex; align-items: center; gap: 0.625rem; color: var(--muted-foreground); }
.cs-breadcrumb .sep { opacity: 0.5; }
.cs-breadcrumb .current { color: var(--ink-soft); }

/* ---------- hero ---------- */
#cs-hero { border-bottom: 1px solid var(--rule); }
.cs-hero-media { position: relative; margin-top: 2.5rem; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-dim); }
@media (min-width: 768px) { .cs-hero-media { aspect-ratio: 16 / 9; } }
.cs-hero-media img { height: 100%; width: 100%; object-fit: cover; }
.cs-hero-text { margin-top: 2.5rem; max-width: 42rem; }
.cs-hero-text h1 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; font-size: clamp(2.25rem, 5.5vw, 4.5rem); text-wrap: balance; }
.cs-hero-text .cs-h1-sub { display: block; margin-top: 1.25rem; font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--ink-soft); }
.cs-hero-text p.lede { margin-top: 1.5rem; font-size: 1.0625rem; line-height: 1.65; color: var(--ink-soft); max-width: 36rem; }
.cs-hero-meta { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }

/* ---------- résultat immédiat (juste après le hero) ---------- */
#cs-glance { border-bottom: 1px solid var(--rule); background: var(--paper-dim); padding: 4.5rem 0; }
@media (min-width: 768px) { #cs-glance { padding: 6rem 0; } }
.cs-glance-row { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: end; text-align: center; }
@media (min-width: 640px) { .cs-glance-row { grid-template-columns: 1fr auto 1fr; text-align: left; } }
.cs-glance-figure { }
.cs-glance-figure .num { display: block; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-size: clamp(2.75rem, 7vw, 4.5rem); }
.cs-glance-figure.is-measured .num { color: var(--del-red); }
.cs-glance-figure .cap { display: block; margin-top: 0.75rem; }
.cs-glance-sep { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 3vw, 2rem); color: var(--muted-foreground); justify-self: center; }
.cs-glance-verdict { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--rule); text-align: center; }
.cs-glance-verdict p.main { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; font-size: clamp(1.25rem, 2.4vw, 1.75rem); }
.cs-glance-verdict p.fine { margin-top: 0.875rem; font-size: 0.9375rem; color: var(--ink-soft); }

/* ---------- explication simple ---------- */
#cs-explain { border-bottom: 1px solid var(--rule); background: var(--paper); padding: 5rem 0; }
@media (min-width: 768px) { #cs-explain { padding: 7rem 0; } }
.cs-explain-body { margin-top: 1.5rem; max-width: 42rem; font-size: 1.0625rem; line-height: 1.7; color: var(--ink-soft); }
.cs-explain-body p + p { margin-top: 1.125rem; }
.cs-explain-body strong { color: var(--ink); font-weight: 600; }
.cs-explain-note { margin-top: 1.5rem; font-size: 0.875rem; color: var(--muted-foreground); }

/* ---------- besoin ---------- */
#cs-need { border-bottom: 1px solid var(--rule); background: var(--paper-dim); padding: 5rem 0; }
@media (min-width: 768px) { #cs-need { padding: 7rem 0; } }
.cs-need-lede { margin-top: 1.25rem; max-width: 36rem; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.125rem, 1.8vw, 1.375rem); letter-spacing: -0.01em; line-height: 1.4; color: var(--ink); }
.cs-need-body { margin-top: 1.5rem; max-width: 42rem; font-size: 1.0625rem; line-height: 1.7; color: var(--ink-soft); }
.cs-need-body p + p { margin-top: 1.125rem; }

/* ---------- photo éditoriale (rupture) ---------- */
#cs-photo { border-bottom: 1px solid var(--rule); background: var(--paper); padding: 2.5rem 0; }
@media (min-width: 768px) { #cs-photo { padding: 4rem 0; } }
.cs-photo-frame { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-dim); }
@media (min-width: 1024px) { .cs-photo-frame { margin-left: 8%; width: 92%; } }
.cs-photo-frame img { height: 100%; width: 100%; object-fit: cover; }
.cs-photo-caption { margin-top: 1rem; font-size: 0.8125rem; color: var(--muted-foreground); }
@media (min-width: 1024px) { .cs-photo-caption { margin-left: 8%; } }

/* ---------- intervention (grille de données) ---------- */
#cs-intervention { border-bottom: 1px solid var(--rule); background: var(--paper-dim); padding: 5rem 0; }
@media (min-width: 768px) { #cs-intervention { padding: 7rem 0; } }
.cs-intervention-intro { margin-top: 1.5rem; max-width: 40rem; font-size: 1.0625rem; line-height: 1.65; color: var(--ink-soft); }
.cs-data-grid { margin-top: 3rem; display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 640px) { .cs-data-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cs-data-grid { grid-template-columns: repeat(3, 1fr); } }
.cs-data-item { background: var(--paper); padding: 1.5rem; }
.cs-data-item dt { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-foreground); }
.cs-data-item dd { margin-top: 0.625rem; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.4; }

/* ---------- comment ça fonctionne (étapes) ---------- */
#cs-how { border-bottom: 1px solid var(--rule); background: var(--paper); padding: 5rem 0; }
@media (min-width: 768px) { #cs-how { padding: 7rem 0; } }
.cs-how-intro { margin-top: 1.5rem; max-width: 40rem; font-size: 1.0625rem; line-height: 1.65; color: var(--ink-soft); }
.cs-steps { margin-top: 3rem; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--rule); }
@media (min-width: 768px) { .cs-steps { grid-template-columns: repeat(4, 1fr); } }
.cs-step { border-bottom: 1px solid var(--rule); padding: 1.75rem 0; }
@media (min-width: 768px) {
  .cs-step { border-right: 1px solid var(--rule); padding: 1.75rem 1.5rem 0 0; }
  .cs-step:last-child { border-right: none; }
  .cs-step:not(:first-child) { padding-left: 1.5rem; }
}
.cs-step .cs-step-n { color: var(--muted-foreground); }
.cs-step h3 { margin-top: 0.875rem; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.015em; }
.cs-step p { margin-top: 0.625rem; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-soft); }

/* ---------- résultat : section principale ---------- */
#cs-result { border-bottom: 1px solid var(--rule); background: var(--ink); color: var(--paper); padding: 6rem 0; }
@media (min-width: 768px) { #cs-result { padding: 9rem 0; } }
#cs-result .label-tech { color: color-mix(in oklab, var(--paper) 55%, transparent); }
#cs-result h2 { color: var(--paper); }
.cs-result-figures { margin-top: 4rem; display: grid; grid-template-columns: 1fr; gap: 3rem; text-align: center; }
@media (min-width: 640px) { .cs-result-figures { grid-template-columns: 1fr 1fr; } }
.cs-result-figure .num { display: block; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-size: clamp(3.5rem, 9vw, 7rem); }
.cs-result-figure.is-measured .num { color: var(--thermal-yellow); }
.cs-result-figure .cap { display: block; margin-top: 1rem; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in oklab, var(--paper) 60%, transparent); }

.cs-compare { margin-top: 3.5rem; text-align: center; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; font-size: clamp(1.75rem, 4vw, 2.75rem); }
.cs-compare .lt { color: var(--thermal-yellow); margin: 0 0.5rem; }

.cs-gauge { margin: 3rem auto 0; max-width: 32rem; }
.cs-gauge-track { position: relative; height: 2px; background: color-mix(in oklab, var(--paper) 20%, transparent); }
.cs-gauge-fill { position: absolute; inset: 0 auto 0 0; width: 81.6%; background: var(--thermal-yellow); }
.cs-gauge-dot { position: absolute; top: 50%; left: 81.6%; width: 11px; height: 11px; border-radius: 50%; background: var(--thermal-yellow); transform: translate(-50%, -50%); }
.cs-gauge-labels { margin-top: 1rem; display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; color: color-mix(in oklab, var(--paper) 65%, transparent); }

.cs-result-meaning { margin-top: 3rem; text-align: center; max-width: 36rem; margin-left: auto; margin-right: auto; }
.cs-result-meaning-title { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in oklab, var(--paper) 55%, transparent); }
.cs-result-sentence { margin-top: 0.875rem; font-size: 1.0625rem; line-height: 1.65; color: color-mix(in oklab, var(--paper) 85%, transparent); }

/* ---------- pour aller plus loin ---------- */
#cs-detail { border-bottom: 1px solid var(--rule); background: var(--paper); padding: 5rem 0; }
@media (min-width: 768px) { #cs-detail { padding: 7rem 0; } }
.cs-detail-grid { margin-top: 2.5rem; display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 640px) { .cs-detail-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .cs-detail-grid { grid-template-columns: repeat(5, 1fr); } }
.cs-detail-item { background: var(--paper-dim); padding: 1.25rem; }
.cs-detail-item dt { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }
.cs-detail-item dd { margin-top: 0.5rem; font-family: var(--font-display); font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.02em; }

/* ---------- conclusion ---------- */
#cs-conclusion { border-bottom: 1px solid var(--rule); background: var(--paper-dim); padding: 5rem 0; }
@media (min-width: 768px) { #cs-conclusion { padding: 7rem 0; } }
.cs-conclusion-body { margin-top: 1.5rem; max-width: 40rem; font-size: 1.0625rem; line-height: 1.7; color: var(--ink-soft); }
.cs-conclusion-body p + p { margin-top: 1.125rem; }
.cs-conclusion-body strong { color: var(--ink); font-weight: 600; }

/* ---------- preuve & documentation ---------- */
#cs-proof { border-bottom: 1px solid var(--rule); background: var(--paper); padding: 4.5rem 0; }
@media (min-width: 768px) { #cs-proof { padding: 6rem 0; } }
.cs-proof-body { margin-top: 1.25rem; max-width: 38rem; font-size: 1rem; line-height: 1.65; color: var(--ink-soft); }
.cs-proof-body p + p { margin-top: 0.75rem; }

.cs-projection { margin-bottom: 3rem; max-width: 32rem; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.25rem, 2.2vw, 1.625rem); letter-spacing: -0.015em; line-height: 1.4; color: var(--ink); }

/* ---------- navigation ---------- */
#cs-pagenav { padding: 3rem 0; }
.cs-pagenav-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; border-top: 1px solid var(--rule); padding-top: 2rem; }