/* ==================================================================
   cas.css — la mise en page des etudes de cas illustrees.

   Ecrite dans les jetons de la home : aucune taille de titre en dur,
   aucune couleur hors palette. Un seul jeton propre, --cx-g, la
   gouttiere, parce que la grille en a besoin a plusieurs endroits.

   `scene.css` porte la grammaire des scenes, livree par le skill et
   autonome. Ce fichier-ci porte ce qui est propre a la page : la grille
   un tiers / deux tiers, l'alternance, la bascule de largeur qui donne
   le rythme, et les blocs de texte du recit.
   ================================================================== */

:root{
  /* L'encre des ombres : la couleur du mur poussee au noir, jamais un noir pur. */
  --encre:#02060D;
  --trait:rgba(242,235,219,.17);
  /* La gouttiere de la grille large. */
  --cx-g:clamp(20px,4vw,44px);

  /* ── L'ECHELLE DE RESPIRATION ──────────────────────────────────────
     Une seule echelle pour toute la page, cinq crans, et chaque cran
     vaut exactement le double du precedent, a ses trois bornes. Un cran
     = un role, jamais deux. Aucun espacement de cette feuille n'est
     ecrit ailleurs que dans ces cinq jetons : si une valeur manque,
     c'est le role qui est mal nomme, pas l'echelle qui est trop courte.

       air-1  dans un bloc      une puce a la suivante, une etiquette a son corps
       air-2  entre deux blocs  le titre, la liste, la cloture, la source
       air-3  texte / image     la gouttiere entre les deux colonnes d'une rangee
       air-4  entre deux rangees
       air-5  entre deux sections
  */
  --cx-air-1:clamp(6px,   .65vw,  9px);
  --cx-air-2:clamp(12px, 1.30vw, 18px);
  --cx-air-3:clamp(24px, 2.60vw, 36px);
  --cx-air-4:clamp(48px, 5.20vw, 72px);
  --cx-air-5:clamp(96px,10.40vw,144px);

  /* Le filet de coupure. `--border` (.08) disparait sur le mur sombre :
     il soulignait sans separer. Ce jeton-ci se voit dans les deux themes. */
  --cx-filet:rgba(242,235,219,.16);
  --cx-marque:56px;
}
html.theme-light{
  --encre:#8A7A63;
  --trait:rgba(10,18,32,.14);
  --cx-filet:rgba(10,18,32,.14);
}

/* ── LA GRILLE LARGE ─────────────────────────────────────────────── */
.cx-wrap{ max-width:1520px; margin:0 auto; padding:0 var(--cx-g); }

/* ── LE HEROS ────────────────────────────────────────────────────────
   Un tiers de texte, deux tiers d'illustration. La figure occupe toute la
   rangee et son contenu se cale au milieu de la hauteur, plutot que de
   coller en haut. Sous 980px, l'illustration passe au-dessus du texte. */
.cx-hero{ padding:calc(var(--cx-air-5) * .85) 0 var(--cx-air-3); }
.cx-hero__in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:var(--cx-air-3); align-items:center; }
.cx-hero__txt{ min-width:0; }
.cx-hero__txt .bx-summary{ max-width:44ch; color:var(--text-secondary); }
.cx-hero__fig{ margin:0 calc(-1 * var(--cx-g)) 0 0; width:calc(100% + var(--cx-g));
  align-self:stretch; display:flex; align-items:center; justify-content:center; }
.cx-hero__fig > .sc{ width:100%; }
@media (max-width: 980px) {
  .cx-hero{ padding-top:clamp(76px,16vw,104px); }
  .cx-hero__in{ grid-template-columns:1fr; gap:var(--cx-air-3); }
  .cx-hero__txt{ order:2; }
  .cx-hero__fig{ order:1; margin-right:0; width:100%; }
}
p.cx-actions{ margin:var(--cx-air-3) 0 0; max-width:none; }

/* ── LES RANGEES ILLUSTREES ──────────────────────────────────────────
   Un tiers de texte, deux tiers d'illustration, dans les deux sens : la
   colonne large est toujours celle de l'illustration. L'alternance donne
   le rythme, la fuite vers le bord donne l'echelle. */
.cx-rows{ display:flex; flex-direction:column; gap:var(--cx-air-5); margin:0; }
/* Quand la section a une tete, les rangees s'en detachent d'un cran. */
.cx-sec + .cx-rows{ margin-top:var(--cx-air-4); }
/* Le texte donne la ligne haute de la rangee : sa premiere ligne tombe
   toujours au meme endroit sous l'ouverture, quelle que soit la hauteur
   de la figure. La figure, elle, se centre dans la rangee. Sans cette
   dissymetrie, la premiere ligne d'une section arrivait entre 12 et
   72 px sous le filet selon la figure posee a cote : le lecteur voyait
   dix rythmes differents la ou il n'aurait du en voir qu'un. */
.cx-row{ display:grid; align-items:start; grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:var(--cx-air-3); }
.cx-row > .cx-vis{ align-self:center; }
/* Une rangee qui n'ouvre pas sa section n'a pas de sur-titre a caler sous
   le filet : ses deux colonnes partagent donc un centre. Une rangee qui
   ouvre sa section garde son texte en haut — sinon le rang flotte a une
   hauteur differente d'une section a l'autre, et le rythme boite. */
.cx-sec + .cx-rows .cx-row{ align-items:center; }
.cx-row--droite{ grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
.cx-row--droite .cx-txt{ order:2; }
.cx-row--droite .cx-vis{ order:1; }
@media (max-width: 980px) {
  .cx-row,.cx-row--droite{ grid-template-columns:1fr; gap:var(--cx-air-3); }
  .cx-row--droite .cx-txt,.cx-row--droite .cx-vis{ order:initial; }
}
.cx-txt{ display:flex; flex-direction:column; gap:var(--cx-air-2); min-width:0; }
.cx-vis{ margin:0; min-width:0; }

/* ── LE TEXTE DES RANGEES ────────────────────────────────────────────*/
h3.cx-pb{ margin:0; font-family:var(--display); font-weight:var(--fw-medium);
  font-size:var(--fs-xl); line-height:var(--lh-snug); letter-spacing:-.012em;
  color:var(--text-primary); text-wrap:balance; }
p.cx-pbp{ margin:0; font-size:var(--fs-sm); line-height:var(--lh-relaxed);
  color:var(--text-secondary); max-width:46ch; }
.cx-sol{ margin:0; padding-left:17px; border-left:2px solid var(--hl);
  display:flex; flex-direction:column; gap:var(--cx-air-1); }
p.cx-wow{ margin:0; font-family:var(--display); font-weight:var(--fw-semibold);
  font-size:var(--fs-lg); line-height:var(--lh-snug); letter-spacing:-.012em;
  color:var(--text-primary); text-wrap:balance; max-width:none;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:11px; }
.cx-num{ font-family:var(--sans); font-size:var(--fs-2xs); font-weight:var(--fw-semibold);
  letter-spacing:.06em; color:var(--hl); border:1px solid var(--hl); border-radius:4px;
  padding:6px 9px; font-variant-numeric:tabular-nums; white-space:nowrap; }
p.cx-solp{ margin:0; font-size:var(--fs-sm); line-height:var(--lh-relaxed);
  color:var(--text-secondary); max-width:46ch; }
p.cx-src{ margin:0; font-size:var(--fs-sm); line-height:var(--lh-normal);
  color:var(--text-muted); max-width:56ch; }
.cx-row--vide .cx-sol{ border-left-style:dashed; }
.cx-row--vide p.cx-wow{ color:var(--text-muted); }

/* ── L'OUVERTURE DE SECTION ──────────────────────────────────────────
   Chaque section s'ouvre de la meme facon : le rang, le sur-titre, et un
   filet sur toute la largeur. C'est le seul filet de la page, et il
   marque un debut, jamais une fin.

   Sans lui, une section dont le texte est pose a droite s'ouvrait dans le
   vide a gauche : la figure de la section precedente et le titre de la
   suivante se retrouvaient l'une sous l'autre dans la meme colonne, et le
   lecteur ne savait plus ou une etape commencait. L'ouverture rend cette
   frontiere lisible quel que soit le cote choisi pour le texte. */
/* Le rang et le sur-titre annoncent un titre : ils lui sont colles, dans
   sa colonne, et suivent donc le cote ou le texte a ete pose. C'est le
   filet, en haut de section, qui separe deux etapes. */
.cx-tete{ display:flex; align-items:baseline; gap:var(--cx-air-3); margin:0 0 var(--cx-air-1); }
/* Dans une colonne de texte, l'espacement vient du `gap` du conteneur :
   on le rattrape pour que le sur-titre reste colle a son titre. */
.cx-txt > .cx-tete{ margin-bottom:calc(var(--cx-air-1) - var(--cx-air-2)); }
.cx-tete__n{ font-family:var(--display); font-weight:var(--fw-bold);
  font-size:var(--fs-xl); line-height:1; color:var(--hl);
  font-variant-numeric:tabular-nums; }
.cx-tete__k{ font-family:var(--sans); font-size:var(--fs-xs);
  font-weight:var(--fw-semibold); letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-muted); }
/* ── LA COUPURE DE SECTION ───────────────────────────────────────────
   Un filet colle sous le bloc precedent ne le separe pas : il le
   souligne. Loi de proximite — pour qu'un trait coupe, il doit se tenir
   a egale distance des deux blocs. Le vide est donc partage : un cran
   au-dessus du filet, un cran en dessous, et la coupure se lit.
   Une marque cuivre courte, a l'aplomb du numero, la signe : c'est un
   debut de chapitre, pas une bordure de tableau. */
body.case main > section.bx-deep,
body.case main > section.cx-band{
  position:relative;
  margin-top:var(--cx-air-5);
  border-top:1px solid var(--cx-filet); }
body.case main > section.bx-deep::before,
body.case main > section.cx-band::before{
  content:''; position:absolute; top:-1px; height:2px; width:var(--cx-marque);
  left:max(var(--cx-g), calc((100% - 1520px) / 2 + var(--cx-g)));
  background:var(--hl); }
/* La bande herite du gabarit generique une double marge de 110px qui,
   ajoutee au cran de coupure, ouvrait un trou de 290px sous le heros.
   Elle porte son air dans `__in`, et rien d'autre. */
body.case .cx-preuves{ padding:0; border-bottom:1px solid var(--cx-filet); }
body.case main > .cx-preuves + section.bx-deep{ margin-top:0; border-top:0; }
body.case main > .cx-preuves + section.bx-deep::before{ display:none; }

/* ── LES TETES DE SECTION ────────────────────────────────────────────*/
.cx-kick{ font-family:var(--sans); font-size:var(--fs-xs); font-weight:var(--fw-semibold);
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); }
h2.cx-h2{ margin:0; font-family:var(--display); font-weight:var(--fw-semibold);
  font-size:var(--font-case-h2); line-height:var(--lh-tight); letter-spacing:-.01em;
  color:var(--text-primary); text-wrap:balance; max-width:24ch; }
h3.cx-h3{ margin:0; font-family:var(--display); font-weight:var(--fw-semibold);
  font-size:var(--fs-2xl); line-height:var(--lh-snug); letter-spacing:-.01em;
  color:var(--text-primary); }
p.cx-lead{ margin:0; font-size:var(--fs-lg); line-height:var(--lh-relaxed);
  color:var(--text-primary); max-width:var(--measure-body); }

/* ── LES BLOCS ETIQUETES ─────────────────────────────────────────────
   Pourquoi · comment · quoi, les directions ecartees, le niveau
   d'adequation, les reserves : meme dispositif, une etiquette et un corps. */
.cx-blocs{ display:flex; flex-direction:column; gap:var(--cx-air-2); }
.cx-blocs--3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--cx-air-3); }
@media (max-width: 820px) { .cx-blocs--3{ grid-template-columns:1fr; } }
.cx-bloc{ padding:var(--space-2) 0 var(--space-2) var(--space-5);
  border-left:1px solid var(--border); }
p.cx-bloc__lbl{ margin:0 0 var(--cx-air-1); font-family:var(--sans); font-size:var(--fs-2xs);
  font-weight:var(--fw-semibold); letter-spacing:.16em; text-transform:uppercase;
  color:var(--hl); line-height:var(--lh-normal); }
p.cx-bloc__t{ margin:0; font-size:var(--fs-base); line-height:var(--lh-relaxed);
  color:var(--text-primary); max-width:var(--measure-body); }
p.cx-bloc__t + p.cx-bloc__t{ margin-top:var(--cx-air-2); }

/* ── LA STORY ────────────────────────────────────────────────────────
   Une phrase de format, pas une parole : elle se compose en italique et
   ne prend jamais les guillemets d'une citation. */
p.cx-story{ margin:0; font-style:italic; font-size:var(--fs-sm);
  line-height:var(--lh-relaxed); color:var(--text-secondary);
  max-width:var(--measure-body); }

/* ── UNE FONCTIONNALITE ──────────────────────────────────────────────*/
.cx-feats{ display:flex; flex-direction:column; gap:var(--bx-s6); }
.cx-feat{ display:flex; flex-direction:column; gap:var(--space-5); }

/* ── L'AD-LIB ────────────────────────────────────────────────────────
   Six segments composes separement. Le gabarit reste en gris derriere :
   ce qui a ete rempli passe en encre pleine, le reste s'efface. */
.cx-adlib{ display:flex; flex-direction:column; gap:var(--cx-air-2);
  padding-left:var(--cx-air-3); border-left:2px solid var(--hl); }
.cx-adlib__seg{ display:grid; grid-template-columns:minmax(0,160px) minmax(0,1fr);
  gap:var(--cx-air-1) var(--cx-air-3); align-items:baseline; }
@media (max-width: 700px) { .cx-adlib__seg{ grid-template-columns:1fr; } }
p.cx-adlib__lbl{ margin:0; font-family:var(--sans); font-size:var(--fs-2xs);
  font-weight:var(--fw-semibold); letter-spacing:.16em; text-transform:uppercase;
  color:var(--hl); line-height:var(--lh-normal); }
p.cx-adlib__txt{ margin:0; font-family:var(--display); font-weight:var(--fw-normal);
  font-size:var(--fs-xl); line-height:var(--lh-snug); color:var(--text-muted);
  max-width:46ch; }
p.cx-adlib__txt strong{ font-weight:var(--fw-semibold); color:var(--text-primary); }

/* ── L'AD-LIB SE COMPOSE, PHRASE PAR PHRASE · CVE 2026-08-31 ─────────────
   Les six segments entrent l'un après l'autre, avec le geste du reste du site :
   la courbe, la durée et la distance viennent de mouvement.css. Seul l'écart
   leur est propre, parce qu'on lit chaque phrase avant la suivante.

   Une première version tapait les caractères un à un. Christophe : « fais moins
   type-writer, un truc animé phrase par phrase, pas un truc sec, qui respecte
   le style général ». Il avait raison : un effet emprunté ailleurs se voit.

   ⚠️ Le sélecteur porte `.cx-adlib.mv` et pas `.cx-adlib` seul : la règle
   générale `.mv[data-anim] > *` de scene.css vise les mêmes éléments avec la
   même spécificité, et seul l'ordre des feuilles les départageait. Un jour où
   cas.css passerait avant scene.css, l'ad-lib reprendrait la cadence courte
   sans que personne comprenne pourquoi. */
.cx-adlib.mv[data-anim] > .cx-adlib__seg{
  opacity:0;
  transform:translateY(calc(12px * var(--mv-amp)));
  transition:
    opacity   var(--mv-duree) var(--mv-doux),
    transform var(--mv-duree) var(--mv-entree);
}
.cx-adlib.mv[data-anim] > :nth-child(2){ transition-delay:calc(1 * var(--mv-phrase)); }
.cx-adlib.mv[data-anim] > :nth-child(3){ transition-delay:calc(2 * var(--mv-phrase)); }
.cx-adlib.mv[data-anim] > :nth-child(4){ transition-delay:calc(3 * var(--mv-phrase)); }
.cx-adlib.mv[data-anim] > :nth-child(5){ transition-delay:calc(4 * var(--mv-phrase)); }
.cx-adlib.mv[data-anim] > :nth-child(6){ transition-delay:calc(5 * var(--mv-phrase)); }
.cx-adlib.mv[data-anim][data-vu="true"] > .cx-adlib__seg{ opacity:1; transform:none; }

/* L'armement ne s'anime jamais : voir .sc-arme dans scene.css. */
.sc-arme .cx-adlib > .cx-adlib__seg{ transition:none !important; }
}

/* ── LE BANDEAU ──────────────────────────────────────────────────────
   Il avait ses filets et son air propre, hérités d'une page ou les
   sections n'etaient pas encore sur la meme colonne. Depuis, ces filets
   se lisent comme une coupure entre deux etapes qui s'enchainent, et
   l'air se cumulait avec celui de la section : deux crans au lieu d'un.
   Le bandeau ne porte donc plus rien de son cote ; c'est `.cx-sec` qui
   tient le rythme, comme partout ailleurs. */
.cx-band{ border:0; padding:0; margin:0; }

/* ── LE RYTHME VERTICAL ──────────────────────────────────────────────
   `.bx-step p` (0,1,1) prime l'owl `.bx-step > * + *` (0,1,0) : sans ces
   regles, un paragraphe pose en enfant direct colle a son titre. On
   reecrit donc le flux explicitement, au meme vocabulaire de rythme. */
.bx-step > p{ margin:0; }
.bx-step > * + p{ margin-top:var(--flow-block); }
.bx-step > .bx-step__kicker + *{ margin-top:var(--flow-tight); }
.bx-step > h2.cx-h2 + p,
.bx-step > h3.cx-h3 + p{ margin-top:var(--space-5); }

/* ── LE FLUX D'UNE SECTION LARGE ─────────────────────────────────────*/
/* L'air entre deux sections appartient a la section, pas a son contenu :
   sans quoi une section a tete respire deux fois plus qu'une section
   faite d'une seule rangee, et le rythme boite. */
body.case main > section.bx-deep,
body.case main > section.cx-band{ padding-top:var(--cx-air-5); }
/* Le heros ouvre la page : rien a couper au-dessus de lui. */
body.case main > section.cx-preuves{ border-top:1px solid var(--cx-filet); }
.cx-sec{ padding:0; }
.cx-sec > * + *{ margin-top:var(--cx-air-2); }
.cx-sec > .bx-step__kicker + *{ margin-top:var(--cx-air-1); }
.cx-sec > * + .cx-adlib,
.cx-sec > * + .cx-blocs{ margin-top:var(--cx-air-3); }

/* Au-dela de 1200px, le folio sort le numero d'etape du flux et le cale dans
   la marge gauche d'un `.bx-wrap` (style.css, rang 10). La grille large n'a
   pas cette marge : dans une section large, le numero reprend sa place dans
   le flux, au-dessus du sur-titre. */
.cx-sec .bx-step__num{ position:static; }

/* Le numero de section sort du flux a gauche, cale sur la marge d'un
   .bx-wrap. Les rangees larges n'ont pas cette marge : sans cette regle
   il part hors de l'ecran. */
.cx-wrap .bx-step__num,
.cx-rows .bx-step__num,
.cx-band .bx-step__num{ position:static; margin-bottom:var(--cx-air-1); }

/* ── LA RANGEE DE RECHERCHE ──────────────────────────────────────────
   Meme grammaire que la rangee de frein, mais le texte y est une liste
   de faits, pas un recit. Le titre de section vit dans la colonne de
   texte : le sur-titre, le titre et les faits forment un seul bloc en
   face de la figure. */
.cx-row .bx-step__kicker{ margin:0; }
.cx-row h2.cx-h2{ margin:0; }
ul.cx-list{ margin:0; padding:0; list-style:none; display:flex;
  flex-direction:column; gap:var(--cx-air-1); }
ul.cx-list li{ position:relative; padding-left:18px;
  font-size:var(--fs-sm); line-height:var(--lh-relaxed); color:var(--text-secondary); }
ul.cx-list li::before{ content:""; position:absolute; left:0; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--hl); opacity:.85; }
ul.cx-list li strong{ color:var(--text-primary); font-weight:var(--fw-semibold); }
p.cx-clo{ margin:0; padding-left:17px; border-left:2px solid var(--hl);
  font-family:var(--display); font-weight:var(--fw-medium);
  font-size:var(--fs-lg); line-height:var(--lh-snug); color:var(--text-primary); }

/* Une figure posee pleine largeur, entre deux rangees : elle casse la
   cadence une fois, pas trois. */
.cx-planche{ margin:var(--cx-air-4) 0 0; }
.cx-planche .cx-vis{ max-width:1180px; margin:0 auto; }

/* ── LA BANDE DE PREUVES ─────────────────────────────────────────────
   Quatre nombres sous le heros. Elle ne raconte rien : elle donne le
   resultat avant l'histoire, pour qui ne lira que le haut de la page. */
.cx-preuves{ border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  margin:var(--cx-air-4) 0 0; }
.cx-preuves__in{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--cx-air-3); padding:var(--cx-air-3) 0; }
/* Le nombre et sa legende se centrent dans leur cellule : le filet de
   separation fait la colonne, le contenu n'a pas a s'aligner dessus. */
.ei-preuve{ display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:var(--cx-air-1); padding:0 var(--cx-air-2);
  border-left:1px solid var(--cx-filet); }
.ei-preuve:first-child{ border-left:0; }
.ei-preuve__n{ font-family:var(--display); font-weight:var(--fw-bold);
  font-size:clamp(26px,3vw,40px); line-height:1; color:var(--hl);
  font-variant-numeric:tabular-nums; }
.ei-preuve__l{ font-family:var(--sans); font-size:var(--fs-sm);
  line-height:var(--lh-normal); color:var(--text-muted); max-width:22ch; }
@media (max-width: 760px) {
  .cx-preuves__in{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--cx-air-3); }
  .ei-preuve{ padding:0; border-left:0; }
}

/* La cloture de page (contact, cas suivant) partage la colonne du cas :
   sans cette regle elle repart sur la grille etroite du folio et decale. */
body.case .bx-cta .bx-wrap,
body.case .bx-next .bx-wrap{ max-width:1520px; padding:0 var(--cx-g); }
body.case .bx-cta .bx-wrap > *,
body.case .bx-next .bx-wrap > *{ max-width:var(--measure-wide); }

/* ── LES FIGURES SUR PETIT ECRAN ─────────────────────────────────────
   Une figure dense ne se lit pas a 350 px : reduite a la colonne, son
   texte tombe sous 5 px. On lui laisse donc sa largeur minimale et on
   la fait glisser sous le doigt, plutot que de la rendre illisible. */
@media (max-width: 760px) {
  /* Sous 760px la figure reprend la moitie des gouttieres : assez pour
     gagner du dessin, pas assez pour donner l'impression d'etre coupee
     au bord de l'ecran. */
  .cx-vis{ margin-left:calc(-.5 * var(--cx-g)); margin-right:calc(-.5 * var(--cx-g));
    width:calc(100% + var(--cx-g)); }
}

/* Filet de securite : une piece qui fuit vers le bord ne doit jamais
   pouvoir faire glisser la page entiere. `clip` coupe sans creer de
   conteneur de defilement, contrairement a `hidden`. */
body.case section,
body.case header.cx-hero{ overflow-x:clip; }