/* Pages cas client. Le socle (tokens, barre, boutons, carte éclairée, pied de page) vit dans ../styles.css.
   Ici, seulement ce qui n'existe que sur ces pages : l'en-tête, les projets, le schéma, les trois blocs, les extras, la fin. */

/* en-tête sur champ de points */
.cas-tete{position:relative;isolation:isolate;overflow:hidden;min-height:min(66vh,660px);display:grid;align-content:end;padding:128px 0 clamp(36px,6vh,64px)}
.cas-tete__fond{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.cas-tete__in{position:relative;z-index:1}
.cas-tete__logo{height:34px;width:auto;margin:0 0 28px;opacity:.92}
.cas-tete__logo--carre{height:64px}
.cas-tete__logo--haut{height:48px}
.cas-tete__logo--inv{filter:brightness(0) invert(1)}
.cas-tete .mono{display:block;margin:0}
.cas-tete h1{font-size:clamp(50px,9vw,150px);margin:14px 0 20px}
.cas-tete__benef{font-size:clamp(18px,1.5vw,21px);line-height:1.45;color:var(--sc-ink-soft);max-width:40ch;margin:0}

/* plusieurs projets chez un même client : chacun a son en-tête (« Projet 1 » + titre court),
   son schéma ou son lien, puis ses trois blocs. Le filet pleine largeur marque le passage au suivant. */
.projet{padding-top:clamp(24px,5vh,56px)}
.projet__tete{border-top:1px solid var(--filet);padding-top:24px}
.projet__tete .mono{display:block;margin:0}
.projet__tete h2{font-size:clamp(36px,5vw,72px);margin:12px 0 0}
.projet__ligne{color:var(--sc-ink-soft);font-size:17px;line-height:1.6;max-width:58ch;margin:18px 0 0}
.projet__lien{margin:10px 0 0}
.projet__lien .lien{display:inline-block;padding:14px 0}   /* cible tactile 44 px, sans toucher au socle */
.projet .cas-schema{padding-top:clamp(32px,6vh,64px)}
.projet .cas-texte{padding-top:clamp(44px,8vh,96px)}

/* le schéma : construit par schema.js, à l'échelle 1:1 */
.cas-schema{padding:clamp(40px,8vh,96px) 0 clamp(16px,3vh,32px)}
.schema{max-width:1040px;margin-inline:auto;min-height:120px}
.schema svg{width:100%;height:auto;display:block;overflow:visible}
.schema__lien{fill:none;stroke:var(--filet-clair);stroke-width:1}
.schema__corps{transform-box:fill-box;transform-origin:center;transition:transform .6s var(--ease)}
.schema__noeud rect{fill:var(--sc-surface);stroke:var(--filet-clair);stroke-width:1;transition:stroke .7s var(--ease),fill .7s var(--ease)}
.schema__noeud text{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;fill:var(--sc-ink)}
.schema__noeud text.schema__sous{font-size:10px;letter-spacing:.18em;fill:var(--sc-ink-soft)}
.schema__noeud.is-hit rect{stroke:var(--sc-ink-soft);transition-duration:.1s}
.schema__noeud--agent rect{fill:var(--sc-accent);stroke:var(--sc-accent)}
.schema__noeud--agent text{fill:var(--sc-accent-ink)}
.schema__noeud--agent.is-hit .schema__corps{transform:scale(1.045);transition-duration:.12s}
.schema__noeud--agent.is-hit rect{fill:#f7bfdd;stroke:#f7bfdd}
.schema__groupe{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;fill:var(--mute)}
.schema__pt{fill:rgb(var(--dot))}
.schema__pt--sortie{fill:var(--sc-accent)}

/* trois blocs, mise en page asymétrique */
.cas-texte{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;row-gap:clamp(40px,7vh,80px);padding:clamp(56px,10vh,120px) 0 clamp(40px,8vh,96px)}
.bloc{border-top:1px solid var(--filet);padding-top:20px}
.bloc--1{grid-column:1/7}
.bloc--2{grid-column:7/13;margin-top:clamp(48px,10vh,140px)}
.bloc--3{grid-column:3/9}
.bloc h2,.bloc h3{font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--sc-ink-soft);line-height:1.5;margin:0 0 14px}
.bloc p{font-size:17px;line-height:1.6;max-width:58ch;margin:0}

/* extras : vidéos (Happy Hours) */
.cas-plus{padding:0 0 clamp(48px,9vh,110px)}
.cas-plus h2{font-size:clamp(28px,3.4vw,48px);margin:0 0 12px}
.cas-plus__ligne{color:var(--sc-ink-soft);font-size:17px;line-height:1.6;max-width:58ch;margin:0 0 28px}
.cas-plus > p:last-child{margin:0}
.cas-videos{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cas-videos figure{margin:0}
.cas-videos video{width:100%;aspect-ratio:16/9;display:block;background:var(--sc-surface);border:1px solid var(--filet);object-fit:cover}
.cas-videos figcaption{margin-top:12px}

/* la fin : carte éclairée, puis les autres cas */
.cas-fin{padding:0 0 clamp(56px,10vh,120px)}
.cas-fin .spot{max-width:640px}
.cas-fin .spot .mono{display:block}
.cas-fin .spot h2{font-size:clamp(40px,5vw,72px);margin:12px 0 14px}
.cas-fin .spot p{color:var(--sc-ink-soft);font-size:17px;line-height:1.6;max-width:52ch;margin:0 0 26px}
.cas-fin__autres{margin:28px 0 0}
.cas-plus .lien,.cas-fin__autres .lien{display:inline-block;padding:14px 0}   /* cible tactile 44 px, sans toucher au socle */
body > .foot{border-top:1px solid var(--filet)}

@media (max-width:760px){
  .bloc--1,.bloc--2,.bloc--3{grid-column:1/-1;margin-top:0}
  .cas-videos{grid-template-columns:1fr}
}
@media (max-width:480px){
  .cas-tete{padding-top:112px}
  .cas-fin .btn{white-space:normal;text-align:center;line-height:1.4;padding:16px 22px}
}