/* use-cases.css : pages des cas clients (/use-cases/), nouveau style du 21 octobre 2026 : cas-pyxo.html, cas-parazar.html, cas-la-moisson.html,
   cas-generali.html, cas-la-poste.html, cas-enedis.html. Le titre et les chiffres sur la scène, le contexte en fenêtres, les
   réalisations en cartes numérotées, les résultats, le témoignage sur la scène, les autres cas, puis l'appel de fin.
   Textes repris tels quels des pages d'avant. Un cas client est une preuve : chiffres, résultats et témoignage sont des zones
   qui rassurent, sans aucun rouge (règle du rouge du 16/10/2026) ; seule la bande de l'appel de fin reste rouge, elle signe.
   S'ajoute à tokens.css, onglets.css et boutons-surlignage.css ; toutes les valeurs viennent de tokens.css. */

/* ---------- Premier écran ---------- */
.page-cas .hero-grille{gap:var(--e-6);padding-bottom:var(--e-2)}
.page-cas .hero h1{font-size:var(--t-hero-long)}
.cas-retour{margin-bottom:var(--e-4);font-size:var(--t-sm)}
.cas-client{margin:calc(var(--e-2) * -1) 0 var(--e-5);color:var(--sur-scene-doux)}
@media(min-width:1024px){
  .page-cas .hero-grille{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--e-8);min-height:0;max-height:none;padding-block:var(--e-9) var(--e-8);align-items:center}
  .page-cas .hero-texte{padding:0}
}

/* Les chiffres du cas : une fenêtre posée sur la scène, chiffres au calme */
.cas-chiffres{position:relative;z-index:2;color:var(--encre)}
.chiffres{gap:0}
.chiffres li{display:grid;gap:var(--e-1);padding:var(--e-4) 0;border-top:1px solid var(--filet)}
.chiffres li:first-child{border-top:0;padding-top:0}
.chiffres li:last-child{padding-bottom:0}
.chiffre{font-size:var(--t-xl);line-height:1;font-weight:800;letter-spacing:-.03em;font-variation-settings:"opsz" 96;color:var(--calme)}
.chiffre-libelle{font-size:var(--t-sm);line-height:1.45;color:var(--encre-douce)}

/* Bande au calme : un cas client est une preuve (même règle que page-legale.css). Sur la scène : lilas et texte de scène en clair
   (10,30:1), aubergine et lilas en sombre (8,91:1) ; sur la page : lilas et aubergine sombre en clair, aubergine et lilas en sombre. */
.bande--calme{background:var(--calme-scene);color:var(--scene)}

/* Titres longs : la bande passe sur plusieurs lignes, sans rotation (comme outil-page.css) */
.page-cas h2 .bande{display:inline;white-space:normal;transform:none;padding:0 .12em;-webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:1.18}
.page-cas .section-tete h2{font-size:var(--t-xl)}
@media(min-width:768px){.page-cas .section-tete h2{font-size:var(--t-2xl)}}

/* ---------- Contexte : une fenêtre par bloc ---------- */
.cas-contexte{display:grid;gap:var(--e-5)}
@media(min-width:900px){.cas-contexte{grid-template-columns:1fr 1fr;gap:var(--e-6)}}
.cas-contexte .fenetre-corps{gap:var(--e-4);padding:var(--e-5)}
@media(min-width:768px){.cas-contexte .fenetre-corps{padding:var(--e-6)}}
.cas-contexte h2{font-size:var(--t-lg);line-height:1.15;letter-spacing:-.02em}
.cas-contexte p{line-height:1.6;color:var(--encre-douce)}
.cas-contexte strong,.cas-contexte em{color:var(--encre)}
.clients{display:flex;flex-wrap:wrap;gap:var(--e-2)}
.clients li{padding:var(--e-1) var(--e-3);border-radius:var(--pilule);background:var(--fond-2);box-shadow:inset 0 0 0 1px var(--filet);font-family:var(--police-fichier);font-size:var(--t-xs);color:var(--encre)}

/* Le récit long (La Poste, InData Jones) : la fenêtre du récit prend toute la largeur */
.cas-contexte--recit{grid-template-columns:1fr;align-items:start}
@media(min-width:900px){.cas-contexte--recit{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.recit-etapes{display:grid;gap:var(--e-3);counter-reset:etape}
.recit-etapes li{position:relative;padding:var(--e-3) var(--e-4) var(--e-3) calc(var(--e-4) + 2.2em);border-radius:var(--rayon-onglet);background:var(--fond-2);line-height:1.55;color:var(--encre-douce);counter-increment:etape}
.recit-etapes li::before{content:counter(etape,decimal-leading-zero);position:absolute;left:var(--e-4);top:var(--e-3);font-family:var(--police-fichier);font-size:var(--t-xs);font-weight:700;line-height:2.1;color:var(--calme)}
.recit-photos{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-4)}
.recit-photos figure{display:grid;gap:var(--e-2);align-content:start}
.recit-photos img{width:100%;border-radius:var(--rayon-onglet);box-shadow:inset 0 0 0 1px var(--filet)}
.recit-photos figcaption{font-size:var(--t-sm);line-height:1.45;color:var(--encre-douce)}
.recit-sous-titre{margin-top:var(--e-3);font-size:var(--t-md);line-height:1.25;letter-spacing:-.015em}
.cas-contexte .recit-maxime{font-weight:700;color:var(--encre)}

/* ---------- Réalisations : cartes numérotées ---------- */
.section--fond{background:var(--fond-2)}
.realisations{display:grid;gap:var(--e-5);counter-reset:realisation}
@media(min-width:768px){.realisations{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.realisations--trois{grid-template-columns:repeat(3,minmax(0,1fr))}}
.realisations--une{max-width:760px}
@media(min-width:768px){.realisations--une{grid-template-columns:1fr}}
.realisation{display:grid;grid-template-columns:auto 1fr;gap:var(--e-2) var(--e-4);align-content:start;padding:var(--e-5);border-radius:var(--rayon-fenetre);background:var(--fenetre);box-shadow:var(--ombre-fenetre),inset 0 0 0 1px var(--filet);counter-increment:realisation}
.realisation::before{content:counter(realisation,decimal-leading-zero);grid-row:span 2;font-family:var(--police-fichier);font-size:var(--t-xs);font-weight:700;line-height:2.1;color:var(--calme)}
.realisation-icone{grid-column:2;width:28px;height:28px;color:var(--calme)}
.realisation-icone svg{width:100%;height:100%}
.realisation h3{grid-column:2;font-size:var(--t-md);line-height:1.25;letter-spacing:-.015em}
.realisation p{grid-column:2;font-size:var(--t-sm);line-height:1.6;color:var(--encre-douce)}
/* La réalisation clé : un trait au calme en haut de la carte */
.realisation--cle{box-shadow:var(--ombre-fenetre),inset 0 3px 0 var(--calme),inset 0 0 0 1px var(--filet)}

/* ---------- Résultats : zone qui rassure, chiffres au calme ---------- */
.resultats{display:grid;gap:var(--e-5)}
@media(min-width:768px){.resultats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.resultats--quatre{grid-template-columns:repeat(4,minmax(0,1fr))}.resultats--trois{grid-template-columns:repeat(3,minmax(0,1fr))}}
.resultat{display:grid;gap:var(--e-3);align-content:start;padding:var(--e-5);border-radius:var(--rayon-fenetre);background:var(--fenetre);box-shadow:var(--ombre-fenetre),inset 0 0 0 1px var(--filet)}
.resultat-chiffre{font-size:var(--t-2xl);line-height:1;font-weight:800;letter-spacing:-.035em;font-variation-settings:"opsz" 96;color:var(--calme)}
.resultat p{font-size:var(--t-sm);line-height:1.55;color:var(--encre-douce)}

/* ---------- Témoignage, sur la scène ---------- */
.cas-temoin{max-width:880px;margin:0 auto;padding:var(--e-6)}
@media(min-width:768px){.cas-temoin{padding:var(--e-7)}}
.cas-temoin blockquote{font-size:var(--t-lg);line-height:1.4}
@media(min-width:768px){.cas-temoin blockquote{font-size:var(--t-xl);line-height:1.3;letter-spacing:-.02em}}
.cas-temoin figcaption{display:grid;gap:var(--e-1)}

/* ---------- Autres cas ---------- */
.autres{display:grid;gap:var(--e-3)}
.autres ul{display:flex;flex-wrap:wrap;gap:0 var(--e-6)}

/* ---------- Appel de fin ---------- */
.page-cas .contact h2 .bande{line-height:1.25}
.contact-texte .btn{margin-top:var(--e-6)}
.contact-note{margin-top:var(--e-3);font-size:var(--t-sm);color:var(--sur-scene-doux)}
.cas-visuel{max-width:420px;justify-self:center}
.cas-visuel img{border-radius:var(--rayon-fenetre);transform:rotate(-2deg);box-shadow:var(--ombre-onglet)}
@media(prefers-reduced-motion:reduce){.cas-visuel img{transform:none}}