/* =====================================================================
   Etudes de cas : seulement ce qui leur est propre. Le gabarit vient du
   patron Figma ASTRA-RESURRECTION (Modele 6:2) : en-tete et tags,
   video de presentation, fiche et chiffres juste dessous, recit en quatre
   rangees qui se deplient, les 13 rangees de visuels, projets, appel. Il
   est construit avec le design system (design-system/tokens.css et
   astra.css) ; les visuels animes viennent de case-studies/js/ (un module
   par visuel, monte sur chaque [data-visual]).
   ===================================================================== */

/* ---- les cases des etudes de cas prennent la teinte des cases du site (--cell),
   et les sections le rythme de l'accueil : 164 au-dessus des 1000 px (Elio, 17/10/2026) */
.cs-facts,.cs-stat,.cs-more-card{background-color:var(--cell)}
@media (min-width:1000px){
  main>.sec-cells+.sec-cells{padding-top:164px}
  .cs-stat span{white-space:nowrap}
}

/* ---- en-tete : le client et son lien, le titre en deux voix, les tags ---- */
.cs-head{padding-bottom:var(--s-24)}
.cs-tags{display:flex;flex-wrap:wrap;gap:var(--s-8);padding:0 0 var(--s-24) var(--s-32)}
.box.cs-tag{display:inline-flex;align-items:center;gap:var(--s-8);min-height:var(--s-32);padding:var(--s-8) var(--s-12);
  font-size:var(--t-small);line-height:1;letter-spacing:var(--tr-ui);
  color:var(--tag-ink,var(--ink-2));background-color:var(--tag-bg,var(--cell));border-color:var(--tag-line,var(--line))}
/* le carre de couleur, plein, devant le libelle */
.box.cs-tag::before{content:"";flex:none;width:var(--s-8);height:var(--s-8);background:var(--tag-dot,currentColor)}
/* Tags : une teinte par famille (cs_gen.py, TAG_HUE), la meme dans toutes les
   etudes. navy = technologie et infrastructure, teal = paiements et
   stablecoins, brick = DeFi et rendement, ochre = chaines et actifs,
   green = metiers et clienteles, plum = grand public et communautes. */
.cs-tag[data-hue="navy"]{--tag-ink:#1f3a5f;--tag-bg:#e2e7f0;--tag-line:rgba(31,58,95,.26);--tag-dot:#1f3a5f}
.cs-tag[data-hue="teal"]{--tag-ink:#18575c;--tag-bg:#dcebeb;--tag-line:rgba(24,87,92,.26);--tag-dot:#1f7076}
.cs-tag[data-hue="brick"]{--tag-ink:#8a3a22;--tag-bg:#f3e1da;--tag-line:rgba(138,58,34,.24);--tag-dot:#c2532f}
.cs-tag[data-hue="ochre"]{--tag-ink:#76510f;--tag-bg:#f1e6d1;--tag-line:rgba(118,81,15,.24);--tag-dot:#b07a19}
.cs-tag[data-hue="green"]{--tag-ink:#2b5a3f;--tag-bg:#dfeae2;--tag-line:rgba(43,90,63,.24);--tag-dot:#3d7a56}
.cs-tag[data-hue="plum"]{--tag-ink:#5b3769;--tag-bg:#ebe1ee;--tag-line:rgba(91,55,105,.24);--tag-dot:#7d4f90}
:root[data-theme="night"] .cs-tag[data-hue="navy"]{--tag-ink:#b4c6e2;--tag-bg:#1a2231;--tag-line:rgba(180,198,226,.22);--tag-dot:#7f9fd0}
:root[data-theme="night"] .cs-tag[data-hue="teal"]{--tag-ink:#a2d2d4;--tag-bg:#142426;--tag-line:rgba(162,210,212,.2);--tag-dot:#5fb3b8}
:root[data-theme="night"] .cs-tag[data-hue="brick"]{--tag-ink:#ebb39f;--tag-bg:#2a1a15;--tag-line:rgba(235,179,159,.2);--tag-dot:#e0805f}
:root[data-theme="night"] .cs-tag[data-hue="ochre"]{--tag-ink:#e2c487;--tag-bg:#272013;--tag-line:rgba(226,196,135,.2);--tag-dot:#d2a24a}
:root[data-theme="night"] .cs-tag[data-hue="green"]{--tag-ink:#a8d0b7;--tag-bg:#16231b;--tag-line:rgba(168,208,183,.2);--tag-dot:#6fb08a}
:root[data-theme="night"] .cs-tag[data-hue="plum"]{--tag-ink:#d6b9e1;--tag-bg:#241b28;--tag-line:rgba(214,185,225,.2);--tag-dot:#b086c4}
.cs-site{gap:var(--s-8)}

/* ---- couverture : la video du projet, aux proportions du Figma ---------- */
.cs-cover{min-height:0}
.cs-cover img,.cs-cover video{width:100%;height:100%;object-fit:cover}

/* ---- fiche et chiffres -------------------------------------------------------- */
.cs-facts{margin-top:var(--s-8);padding:var(--s-12) var(--s-32)}
.cs-cover+.cs-facts{margin-top:var(--s-8)}
.rows.cs-kv{border-bottom:0}
.rows.cs-kv li{display:flex;justify-content:space-between;gap:var(--s-24)}
.rows.cs-kv li:first-child{border-top:0}
.rows.cs-kv li span:last-child{color:var(--ink-2);text-align:right}
/* sur ordinateur, la fiche se lit en trois colonnes : le libelle au-dessus de
   sa valeur, plutot qu'a 1000 px d'elle */
@media (min-width:1000px){
  .cs-facts{padding:var(--s-24) var(--s-32)}
  .rows.cs-kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-32)}
  .rows.cs-kv li{flex-direction:column;justify-content:flex-start;gap:var(--s-2);padding:0;border-top:0}
  .rows.cs-kv li span:last-child{text-align:left}
}
.cs-stats{margin-top:var(--s-8)}
/* le chiffre et sa legende ensemble, la legende sur une ligne (Elio, 17/10/2026) */
.cs-stat{justify-content:flex-start;gap:var(--s-8)}
.cs-stat b{font-weight:400;font-size:var(--t-stat-l);line-height:1.1;letter-spacing:var(--tr-display);color:var(--ink-2)}
.cs-stat span{font-size:var(--t-body);line-height:1.4;letter-spacing:var(--tr-ui);color:var(--quote)}

/* ---- visuels : une rangee large, puis deux carres ------------------------------
   Chaque visuel est une case image (.box, papier --cell) a ses proportions
   Figma (1080 x 597, 1080 x 536 ou 536 x 536) ; dedans, la scene animee
   (.vx, case-studies/js/visuals.css) ou une image, une video. */
.cs-run{display:grid;gap:var(--s-8);margin-top:var(--s-8)}
.cs-row{display:grid;gap:var(--s-8);grid-template-columns:minmax(0,1fr)}
.cs-row.is-pair{grid-template-columns:repeat(2,minmax(0,1fr))}
.box.cs-vx{overflow:hidden;background-color:var(--cell)}
.cs-vx>img,.cs-vx>video{display:block;width:100%;height:100%;object-fit:cover}
/* l'affiche d'une video, posee dans le HTML : ce qu'on voit sans script */
.cs-vx-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cs-cover>.cs-vx-host{width:100%;height:100%}
/* la scene d'un visuel anime : dessinee a sa taille Figma, mise a
   l'echelle de la case par le moteur. Ses polices et sa couleur sont celles
   du client (contenu), pas des roles du site. */
.vx{position:relative;width:100%;overflow:hidden;isolation:isolate;contain:layout paint;
  --f-brand:"Geist", var(--f);--f-mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;--f-ui:"Inter", var(--f)}
.vx-stage{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;font-family:var(--f-brand);color:#1a1714;-webkit-font-smoothing:antialiased}
.vx-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---- projets : les autres etudes, une case image chacune ------------------------- */
.cs-more-card{justify-content:flex-start;height:100%;padding:var(--s-16)}
.cs-more-card .do-img{aspect-ratio:1788/1269}
.cs-more-card .do-text{padding:0 var(--s-16) var(--s-16)}
.cs-more-card small{font-size:var(--t-body);line-height:1.4;letter-spacing:var(--tr-ui);color:var(--quote)}
.do-img{display:block;position:relative;overflow:hidden;border:var(--bw) solid var(--line);background:var(--cell)}
.do-img img,.do-img video{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-media)}
.do-img video{position:absolute;inset:0;opacity:0;transition:opacity .4s var(--ease),transform .5s var(--ease-media)}
.do-img.is-playing video{opacity:1}
.do-text{display:flex;flex-direction:column;gap:var(--s-8)}
@media (hover:hover){.cs-more-card:hover .do-img img,.cs-more-card:hover .do-img video{transform:scale(1.03)}}

/* ---- sous 1000 px ---------------------------------------------------------------- */
@media (max-width:999px){
  .cs-tags{padding:0 0 var(--s-20)}
  .cs-facts{padding:var(--s-8) var(--s-20)}
  .cs-stat{min-height:0}
  .cs-more-card{padding:var(--s-8)}
  .cs-more-card .do-text{padding:0 var(--s-12) var(--s-12)}
}
@media (max-width:599px){
  .cs-row.is-pair{grid-template-columns:minmax(0,1fr)}
  .box.cs-tag{padding:var(--s-8)}
  .rows.cs-kv li{flex-direction:column;gap:var(--s-2)}
  .rows.cs-kv li span:last-child{text-align:left}
}

@media (prefers-reduced-motion:reduce){
  .do-img img{transition:none}
  .do-img video{display:none}
}