/* ==========================================================================
   600ml - Cas d'usage (V2)
   Reprend les tokens de style.css, mais pose un décor différent : fond clair
   et uni, surfaces opaques, et le dégradé de marque réservé à trois endroits
   (la bande d'appel à l'action, l'étape active du parcours, le filtre actif).
   Aucune dépendance, aucun build.
   ========================================================================== */

/* ---------- 1. Décor de page ----------
   Le fond animé du site (orbes floutées, voile, grain) n'est pas repris ici :
   sur des pages longues et denses, il ajoutait de la couleur partout et
   écrasait la hiérarchie. Fond blanc, une seule bande neutre pour rythmer. */
body.cu-light{background:#fff}

:root{
  --line:rgba(20,16,31,.09);
  --line-2:rgba(20,16,31,.055);
  --surface:#fff;
  --surface-2:#f7f7fa;
  --shadow-card:0 1px 2px rgba(20,16,31,.04), 0 10px 26px -14px rgba(20,16,31,.16);
  --shadow-card-h:0 2px 4px rgba(20,16,31,.05), 0 22px 44px -20px rgba(20,16,31,.22);
}

/* Sur fond blanc, une barre trop transparente laisse deviner le dégradé du
   bouton qui passe dessous. On l'opacifie et on garde un filet net. */
.cu-light #nav .bar{
  background:rgba(255,255,255,.95);
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(20,16,31,.04), 0 10px 30px -18px rgba(20,16,31,.3);
}

/* Carte : opaque, un filet net, une ombre discrète. Pas de verre : sur fond
   blanc il n'y a rien à laisser transparaître, et le flou coûtait cher. */
.cu-card,.cu-block,.cu-flow,.cu-demo,.cu-aud,.cu-head-card,.cu-rel{
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow-card);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}

/* ---------- 2. Communs ---------- */
.cu-page{padding-top:clamp(122px,15vh,168px)}
.cu-section{padding-block:clamp(48px,7vh,92px)}
.cu-section-head{max-width:64ch;display:flex;flex-direction:column;gap:.9rem;margin-bottom:clamp(26px,4vh,44px)}

/* Bande neutre : sépare la liste du reste sans ajouter de couleur. */
.cu-band{background:var(--surface-2);border-block:1px solid var(--line-2)}

.cu-breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  font-size:.86rem;color:var(--ink-3);margin-bottom:1.4rem;
}
.cu-breadcrumb a{transition:color .2s}
.cu-breadcrumb a:hover{color:var(--violet)}
.cu-breadcrumb svg{width:13px;height:13px;stroke-width:2.4;opacity:.45;flex:none}
.cu-breadcrumb [aria-current]{color:var(--ink-2);font-weight:500}

/* Illustration 3D : recolorée à la charte, posée sur un disque très pâle qui
   l'ancre sans créer un deuxième aplat coloré. */
.cu-art{
  position:relative;flex:none;display:grid;place-items:center;
  width:var(--art,72px);height:var(--art,72px);
}
.cu-art::before{
  content:"";position:absolute;inset:6%;border-radius:50%;
  background:radial-gradient(circle at 50% 55%,rgba(127,12,242,.10),rgba(127,12,242,0) 70%);
}
.cu-art img{position:relative;width:100%;height:100%;object-fit:contain}

.cu-kicker{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.4rem .9rem .4rem .45rem;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);
  font-family:var(--font-d);font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.cu-kicker .cu-art{--art:26px}
.cu-kicker .cu-art::before{display:none}

/* ---------- 3. Hub : en-tête ---------- */
.cu-hub-head{max-width:70ch}
.cu-hub-head h1{max-width:17ch}
.cu-hub-head .lead{max-width:52ch}
.cu-hub-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.8rem}

/* ---------- 4. Hub : filtres ---------- */
.cu-filters{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:clamp(22px,3vh,34px)}
.cu-chip{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.54rem 1rem;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);
  font-size:.88rem;font-weight:600;color:var(--ink-2);
  transition:border-color .2s,color .2s,background .2s,box-shadow .2s;
}
.cu-chip:hover{color:var(--violet);border-color:rgba(127,12,242,.35)}
.cu-chip em{font-style:normal;font-size:.76rem;font-weight:700;color:var(--ink-4)}
.cu-chip[aria-pressed="true"]{
  background:var(--grad);color:#fff;border-color:transparent;
  box-shadow:0 6px 18px -8px rgba(127,12,242,.6);
}
.cu-chip[aria-pressed="true"] em{color:rgba(255,255,255,.7)}
.cu-count{font-size:.85rem;color:var(--ink-3);margin-left:auto}

/* ---------- 5. Hub : grille ---------- */
.cu-grid{display:grid;gap:clamp(14px,1.6vw,20px);grid-template-columns:repeat(3,1fr)}
.cu-card{
  display:flex;flex-direction:column;gap:.9rem;
  padding:clamp(22px,2.1vw,28px);border-radius:var(--r-l);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.cu-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-h);border-color:rgba(127,12,242,.22)}
.cu-card:hover .cu-art img{transform:translateY(-5px) rotate(-3deg)}
.cu-card .cu-art img{transition:transform .45s var(--ease-out)}
.cu-card-top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.cu-theme{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);text-align:right}
.cu-card h3{letter-spacing:-.025em}
/* Le lien couvre la carte : tout le bloc devient cliquable sans imbriquer
   d'éléments interactifs les uns dans les autres. */
.cu-card h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.cu-card p{font-size:.95rem;line-height:1.55;color:var(--ink-2)}
.cu-card-hook{
  font-style:italic;color:var(--ink-3)!important;font-size:.92rem!important;
  padding-left:.9rem;border-left:2px solid rgba(127,12,242,.28);flex:1;
}
.cu-card-go{display:inline-flex;align-items:center;gap:.45rem;font-size:.88rem;font-weight:600;color:var(--violet)}
.cu-card-go svg{width:14px;height:14px;stroke-width:2.4;transition:transform .25s var(--ease)}
.cu-card:hover .cu-card-go svg{transform:translateX(4px)}
.cu-card[hidden]{display:none}

/* ---------- 6. Fiche : en-tête ---------- */
.cu-head{display:grid;gap:clamp(26px,3.5vw,52px);grid-template-columns:1.3fr .7fr;align-items:start}
.cu-head h1{font-size:clamp(2.05rem,4.4vw,3.4rem);margin:1rem 0 1.1rem}
/* L'illustration et la citation partagent la première ligne : empilées, la
   carte dépassait la colonne de texte et laissait un vide sous le chapô. */
.cu-head-card{
  padding:clamp(22px,2.2vw,30px);border-radius:var(--r-l);
  display:flex;flex-wrap:wrap;gap:1.15rem;align-items:center;
}
.cu-head-card .cu-art{--art:96px}
.cu-head-card .cu-hook{flex:1;min-width:11rem}
.cu-hook{
  font-family:var(--font-d);font-weight:500;
  font-size:clamp(1.12rem,1.9vw,1.42rem);line-height:1.32;letter-spacing:-.025em;color:var(--ink);
}
.cu-hook::before{content:"« "}
.cu-hook::after{content:" »"}
.cu-head-card .btn{width:100%}

.cu-alias{width:100%;padding-top:1.1rem;border-top:1px solid var(--line-2)}
.cu-alias b{
  display:block;font-family:var(--font-d);font-size:.66rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);margin-bottom:.65rem;
}
.cu-alias ul{display:flex;flex-wrap:wrap;gap:.38rem}
.cu-alias li{
  padding:.32rem .68rem;border-radius:999px;font-size:.78rem;
  background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line-2);
}

/* ---------- 7. Fiche : blocs ---------- */
.cu-block{padding:clamp(24px,2.6vw,40px);border-radius:var(--r-l)}
.cu-block h2,.cu-flow h2,.cu-demo-head h2{font-size:clamp(1.4rem,2.3vw,1.95rem)}
.cu-block h2{margin-bottom:1rem}
.cu-block p{font-size:1rem;line-height:1.7;margin-bottom:.85rem}
.cu-block p:last-child{margin-bottom:0}
.cu-block .muted{margin-top:-.5rem;margin-bottom:1.3rem;font-size:.95rem}
.cu-stack{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,22px)}

/* Le besoin : un filet vertical plein, pas un aplat dégradé. */
.cu-need{
  margin-top:1.4rem;padding:.2rem 0 .2rem 1.4rem;
  border-left:3px solid var(--violet);
}
.cu-need b{
  display:block;font-family:var(--font-d);font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--violet);margin-bottom:.45rem;
}
.cu-need p{margin:0;font-size:1.02rem;line-height:1.65;color:var(--ink)}

/* Signal révélateur : bande encrée plutôt qu'un second dégradé. Le noir
   rappelle la bulle IA de l'accueil et tranche nettement sur le fond blanc. */
.cu-signal{
  display:flex;gap:1.1rem;align-items:flex-start;
  padding:clamp(20px,2.2vw,28px);border-radius:var(--r-l);
  background:var(--ink);color:#fff;
}
.cu-signal > svg{width:22px;height:22px;stroke-width:2;flex:none;margin-top:3px;color:var(--pink)}
.cu-signal b{
  display:block;font-family:var(--font-d);font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--pink);margin-bottom:.4rem;
}
.cu-signal p{margin:0;color:rgba(255,255,255,.92);font-size:1.04rem;line-height:1.55}

/* ---------- 8. Fiche : pour qui ---------- */
.cu-audience{display:grid;gap:clamp(12px,1.4vw,16px);grid-template-columns:repeat(3,1fr)}
.cu-aud{padding:clamp(20px,2vw,26px);border-radius:var(--r-m)}
.cu-aud b{
  display:flex;align-items:center;gap:.55rem;margin-bottom:.65rem;
  font-family:var(--font-d);font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--violet);
}
.cu-aud b svg{width:15px;height:15px;stroke-width:2.2}
.cu-aud p{font-size:.94rem;line-height:1.6;margin:0}

/* ---------- 9. Fiche : parcours interactif ---------- */
.cu-flow{padding:clamp(24px,2.6vw,40px);border-radius:var(--r-l)}
.cu-flow h2{margin-bottom:.4rem}
.cu-flow > .muted{font-size:.95rem}
.cu-rail{position:relative;margin:1.7rem 0 1.5rem}
.cu-rail-line{position:absolute;left:0;right:0;top:19px;height:2px;border-radius:2px;background:var(--line)}
.cu-rail-line > i{display:block;height:100%;border-radius:2px;background:var(--grad);width:var(--p,0%);transition:width .5s var(--ease-out)}
.cu-steps{position:relative;display:flex;justify-content:space-between;gap:.4rem}
.cu-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:.55rem;text-align:center;min-width:0}
.cu-dot{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-family:var(--font-d);font-weight:700;font-size:.95rem;
  background:#fff;color:var(--ink-4);border:1.5px solid var(--line);
  transition:transform .28s var(--ease),background .28s,color .28s,border-color .28s,box-shadow .28s;
}
.cu-step-lab{font-size:.76rem;line-height:1.3;font-weight:600;color:var(--ink-4);transition:color .25s}
.cu-step:hover .cu-dot{transform:translateY(-3px);border-color:rgba(127,12,242,.4);color:var(--violet)}
.cu-step[aria-selected="true"] .cu-dot{
  background:var(--grad);color:#fff;border-color:transparent;
  transform:scale(1.1);box-shadow:0 8px 20px -8px rgba(127,12,242,.7);
}
.cu-step[aria-selected="true"] .cu-step-lab{color:var(--ink)}
.cu-step.is-done .cu-dot{border-color:rgba(127,12,242,.35);color:var(--violet)}

.cu-panel{
  padding:clamp(20px,2.2vw,28px);border-radius:var(--r-m);
  background:var(--surface-2);border:1px solid var(--line-2);min-height:116px;
}
.cu-panel[hidden]{display:none}
.cu-panel{animation:cu-panel-in .3s var(--ease-out) both}
@keyframes cu-panel-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cu-panel-step{
  display:flex;align-items:center;gap:.6rem;margin-bottom:.55rem;
  font-family:var(--font-d);font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--violet);
}
.cu-panel h3{margin-bottom:.5rem}
.cu-panel p{margin:0;font-size:1rem;line-height:1.65}

.cu-flow-nav{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1rem}
.cu-arrow{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);color:var(--ink-2);
  transition:transform .2s var(--ease),color .2s,border-color .2s;
}
.cu-arrow svg{width:15px;height:15px;stroke-width:2.4}
.cu-arrow:hover:not(:disabled){transform:translateY(-2px);color:var(--violet);border-color:rgba(127,12,242,.4)}
.cu-arrow:disabled{opacity:.32;cursor:not-allowed}
.cu-flow-note{margin-top:1.3rem;font-size:.92rem;line-height:1.6;color:var(--ink-3)}

/* Repli sans JavaScript : le bloc vit dans <noscript>, donc il n'est rendu que
   si les scripts sont coupés. La CSP interdit les scripts en ligne mais
   autorise les styles en ligne : c'est <noscript> qui masque le rail. */
.cu-flow-fallback{display:flex;margin-top:1.4rem;flex-direction:column;gap:.9rem}
.cu-flow-fallback li{display:flex;gap:.9rem;align-items:flex-start}
.cu-flow-fallback .n{
  width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--grad);color:#fff;font-family:var(--font-d);font-weight:700;font-size:.82rem;
}

/* ---------- 10. Fiche : démonstration ---------- */
.cu-demo{padding:clamp(24px,2.6vw,40px);border-radius:var(--r-l)}
.cu-demo-head{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin-bottom:1.2rem}
.cu-demo-head h2{margin:0}
.cu-tag{
  padding:.3rem .7rem;border-radius:999px;font-size:.68rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  background:#fdf1e3;color:#a8530c;border:1px solid rgba(242,127,27,.2);
}
.cu-demo-intro{font-size:.98rem;color:var(--ink-2);margin-bottom:1.2rem}
.cu-demo-blocks{display:flex;flex-direction:column;gap:1rem}

/* La démonstration se joue dans l'ordre : l'entrée d'abord, la transformation
   ensuite. C'est ce qui la rend lisible d'un coup d'œil. */
/* L'état masqué est posé par le script (.cu-anim). Sans JavaScript, la
   démonstration reste donc entièrement visible. */
.cu-demo.cu-anim .cu-demo-blocks > *{opacity:0;transform:translateY(10px)}
.cu-demo.cu-anim.is-playing .cu-demo-blocks > *{
  animation:cu-step-in .5s var(--ease-out) both;
  animation-delay:calc(var(--d,0) * 280ms);
}
@keyframes cu-step-in{to{opacity:1;transform:none}}

.cu-chat{display:flex;flex-direction:column;gap:.75rem}
.cu-bubble{max-width:min(92%,560px);padding:.95rem 1.15rem;border-radius:var(--r-m)}
.cu-bubble b{display:block;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.35rem;opacity:.7}
.cu-bubble p{margin:0;font-size:.98rem;line-height:1.55}
.cu-bubble.is-user{align-self:flex-start;background:var(--surface-2);border:1px solid var(--line);border-bottom-left-radius:6px}
.cu-bubble.is-ai{
  align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:6px;
}
.cu-bubble.is-ai b{color:var(--pink);opacity:1}
.cu-bubble.is-ai p{color:rgba(255,255,255,.93)}

.cu-note{
  padding:1.05rem 1.2rem;border-radius:var(--r-s);
  background:var(--surface-2);border:1px dashed rgba(127,12,242,.3);
}
.cu-note b{display:block;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);margin-bottom:.4rem}
.cu-note p{margin:0;font-size:.98rem;line-height:1.55;color:var(--ink-2);font-style:italic}

.cu-arrow-down{display:grid;place-items:center;color:var(--violet);opacity:.5}
.cu-arrow-down svg{width:20px;height:20px;stroke-width:2.2}

.cu-rows{border-radius:var(--r-s);overflow:hidden;border:1px solid var(--line)}
.cu-rows-head,.cu-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:1rem}
.cu-rows-head{
  padding:.68rem 1.1rem;background:var(--surface-2);border-bottom:1px solid var(--line);
  font-family:var(--font-d);font-size:.68rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--violet);
}
.cu-row{padding:.8rem 1.1rem;background:#fff;border-top:1px solid var(--line-2);font-size:.95rem}
.cu-row:first-of-type{border-top:0}
.cu-row span:first-child{color:var(--ink-3)}
.cu-row span:last-child{color:var(--ink);font-weight:500}
.cu-row.is-total{background:var(--ink)}
.cu-row.is-total span{color:#fff;font-weight:700}

.cu-lines{display:flex;flex-direction:column;gap:.6rem}
.cu-line{
  display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);gap:1rem;
  padding:.85rem 1.1rem;border-radius:var(--r-s);
  background:#fff;border:1px solid var(--line);font-size:.95rem;line-height:1.55;
}
.cu-line b{font-family:var(--font-d);font-weight:700;font-size:.82rem;letter-spacing:-.01em;color:var(--violet)}

.cu-sources{display:flex;gap:.6rem;align-items:flex-start;font-size:.86rem;line-height:1.5;color:var(--ink-3)}
.cu-sources svg{width:15px;height:15px;stroke-width:2.2;flex:none;margin-top:3px;color:var(--violet)}
.cu-demo-after{margin-top:1.2rem;font-size:.95rem;line-height:1.65;color:var(--ink-2)}

/* ---------- 11. Fiche : le même principe ailleurs ---------- */
.cu-variants{display:flex;flex-direction:column;gap:.6rem}
.cu-variant{
  display:flex;gap:.85rem;align-items:flex-start;
  padding:.95rem 1.15rem;border-radius:var(--r-s);
  background:var(--surface-2);border:1px solid var(--line-2);
  font-size:.97rem;line-height:1.6;color:var(--ink-2);
}
.cu-variant-i{width:16px;height:16px;stroke-width:2.4;flex:none;margin-top:5px;color:var(--violet)}

/* ---------- 12. Fiche : valeur et indicateurs ---------- */
.cu-two{display:grid;gap:clamp(14px,1.8vw,22px);grid-template-columns:1fr 1fr;align-items:start}
.cu-kpis{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.2rem}
.cu-kpi{padding:.42rem .82rem;border-radius:999px;font-size:.82rem;font-weight:500;background:var(--surface-2);border:1px solid var(--line-2);color:var(--ink-2)}

/* ---------- 13. Appel à l'action ---------- */
.cu-cta{
  padding:clamp(30px,4vw,54px);border-radius:var(--r-xl);
  background:var(--grad);color:#fff;
  box-shadow:0 24px 60px -30px rgba(127,12,242,.7);
  display:grid;grid-template-columns:1fr auto;gap:clamp(20px,3vw,44px);align-items:center;
}
.cu-cta-copy{display:flex;flex-direction:column;gap:.9rem}
.cu-cta b{
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--font-d);font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;opacity:.85;
}
.cu-cta b svg{width:16px;height:16px;stroke-width:2}
/* Ce n'est pas une citation : ni balise <q>, ni guillemets. */
.cu-cta-titre{
  margin:0;color:#fff;
  font-family:var(--font-d);font-weight:700;
  font-size:clamp(1.65rem,3.3vw,2.85rem);line-height:1.12;letter-spacing:-.035em;
  max-width:22ch;text-wrap:balance;
}
.cu-cta p{margin:0;color:rgba(255,255,255,.88);font-size:.98rem;line-height:1.6;max-width:52ch}
.cu-cta .btn-ghost{background:#fff;border-color:#fff;flex:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.cu-cta .btn-ghost:hover{color:var(--violet)}

/* ---------- 14. Cas d'usage liés ---------- */
.cu-rels{display:grid;gap:clamp(12px,1.5vw,18px);grid-template-columns:repeat(3,1fr)}
.cu-rel{
  display:flex;flex-direction:column;gap:.9rem;
  padding:clamp(20px,2vw,26px);border-radius:var(--r-m);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s;
}
.cu-rel:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-h);border-color:rgba(127,12,242,.22)}
.cu-rel .cu-art{--art:54px}
.cu-rel strong{font-family:var(--font-d);font-size:1.02rem;font-weight:600;line-height:1.25;letter-spacing:-.022em;color:var(--ink);flex:1}
.cu-rel-go{display:inline-flex;align-items:center;gap:.45rem;font-size:.85rem;font-weight:600;color:var(--violet)}
.cu-rel-go svg{width:13px;height:13px;stroke-width:2.4;transition:transform .25s var(--ease)}
.cu-rel:hover .cu-rel-go svg{transform:translateX(4px)}

/* ---------- 15. FAQ (reprend le composant de l'accueil) ---------- */
.cu-light .faq-item{background:var(--surface);border:1px solid var(--line);-webkit-backdrop-filter:none;backdrop-filter:none}
.cu-light .faq-item[open]{background:var(--surface);box-shadow:var(--shadow-card)}

/* ---------- 16. Responsive ---------- */
@media (max-width:1080px){
  .cu-grid,.cu-rels{grid-template-columns:repeat(2,1fr)}
  .cu-head{grid-template-columns:1fr}
  .cu-head-card .cu-art{--art:104px}
  .cu-head-card .btn{width:auto}
  .cu-cta{grid-template-columns:1fr;align-items:flex-start}
}
@media (max-width:860px){
  .cu-audience{grid-template-columns:1fr}
  .cu-two{grid-template-columns:1fr}
  /* Le rail horizontal devient une colonne : les libellés restent lisibles. */
  .cu-rail-line{display:none}
  .cu-steps{flex-direction:column;gap:.4rem}
  .cu-step{flex-direction:row;align-items:center;gap:.8rem;text-align:left;width:100%;
    padding:.45rem .6rem;border-radius:999px;transition:background .2s}
  .cu-step[aria-selected="true"]{background:var(--surface-2)}
  .cu-step[aria-selected="true"] .cu-dot{transform:none}
  .cu-step-lab{font-size:.9rem}
  .cu-dot{width:34px;height:34px;font-size:.86rem}
}
@media (max-width:640px){
  .cu-grid,.cu-rels{grid-template-columns:1fr}
  .cu-rows-head,.cu-row,.cu-line{grid-template-columns:1fr;gap:.25rem}
  .cu-rows-head span:last-child{display:none}
  .cu-count{width:100%;margin-left:0}
  .cu-cta .btn,.cu-hub-cta .btn{width:100%}
  .cu-head-card .cu-art{--art:88px}
}

/* ---------- 17. Préférences utilisateur ---------- */
@media (prefers-reduced-motion:reduce){
  .cu-rail-line > i{transition:none}
  .cu-panel{animation:none}
  .cu-demo.cu-anim .cu-demo-blocks > *{opacity:1;transform:none}
  .cu-demo.cu-anim.is-playing .cu-demo-blocks > *{animation:none}
  .cu-card:hover .cu-art img{transform:none}
}
@media (prefers-contrast:more){
  :root{--line:rgba(20,16,31,.22);--line-2:rgba(20,16,31,.14)}
}
@media print{
  .cu-filters,.cu-flow-nav,.cu-rels{display:none}
  .cu-card[hidden]{display:flex!important}
  /* À l'impression, tout le parcours doit apparaître, pas seulement l'étape
     sélectionnée. */
  .cu-panel[hidden]{display:block}
  .cu-panel{animation:none;margin-bottom:10px}
  .cu-demo.cu-anim .cu-demo-blocks > *{opacity:1;transform:none}
}

/* ==========================================================================
   18. Hub : mise en page magazine
   Une rangée pleine largeur par cas, en quinconce, sur des bandes teintées
   alternées. Le rythme vient de l'échelle et de l'alternance, pas d'un
   empilement de cartes identiques.
   ========================================================================== */

/* Index compact sous le chapô : onze liens, une ligne. Il évite de faire
   défiler onze pleines pages pour trouver le bon cas, et densifie le
   maillage interne. */
.cu-index{
  display:flex;flex-wrap:wrap;gap:.45rem;
  padding-block:clamp(22px,3vh,34px);
}
.cu-index a{
  padding:.46rem .9rem;border-radius:999px;font-size:.84rem;font-weight:500;
  background:#fff;border:1px solid var(--line);color:var(--ink-2);
  transition:color .2s,border-color .2s,transform .2s var(--ease);
}
.cu-index a:hover{color:var(--violet);border-color:rgba(127,12,242,.35);transform:translateY(-2px)}

.cu-case{padding-block:clamp(52px,8vh,104px);scroll-margin-top:96px}
.cu-case:nth-of-type(4n+2){background:rgba(127,12,242,.045)}
.cu-case:nth-of-type(4n+4){background:rgba(242,127,27,.05)}
.cu-case-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center}
.cu-case:nth-of-type(even) .cu-case-media{order:2}

.cu-case-media{position:relative;display:grid;place-items:center;min-height:clamp(220px,28vw,340px)}
/* Le numéro dépasse volontairement l'illustration : même recouvert en son
   centre, son contour reste lisible tout autour. */
.cu-case-num{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-52%);z-index:0;
  font-family:var(--font-d);font-weight:700;
  font-size:clamp(13rem,27vw,23rem);line-height:.78;letter-spacing:-.07em;
  -webkit-text-stroke:3px rgba(127,12,242,.22);color:transparent;
  pointer-events:none;user-select:none;white-space:nowrap;
}
.cu-case:nth-of-type(4n+4) .cu-case-num{-webkit-text-stroke-color:rgba(242,127,27,.3)}
.cu-case-media .cu-art{--art:clamp(150px,19vw,238px);position:relative;z-index:1}
.cu-case-media .cu-art img{transition:transform .5s var(--ease-out)}
.cu-case:hover .cu-case-media .cu-art img{transform:translateY(-6px)}

.cu-case-body{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.cu-case-theme{
  display:inline-block;padding:.36rem .85rem;border-radius:999px;
  font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  background:var(--ink);color:#fff;
}
.cu-case-body h2{font-size:clamp(1.75rem,3.4vw,2.9rem);max-width:17ch;letter-spacing:-.035em}
.cu-case-body h2 a{transition:color .2s}
.cu-case-body h2 a:hover{color:var(--violet)}
.cu-case-body .lead{font-size:clamp(1rem,1.2vw,1.12rem);max-width:46ch}
.cu-case-hook{
  font-family:var(--font-d);font-weight:500;
  font-size:clamp(1.05rem,1.45vw,1.28rem);line-height:1.35;letter-spacing:-.022em;
  color:var(--ink);padding-left:1.1rem;border-left:3px solid var(--violet);max-width:26ch;
}
.cu-case:nth-of-type(4n+4) .cu-case-hook{border-left-color:var(--orange)}
.cu-case-hook::before{content:"« "}
.cu-case-hook::after{content:" »"}

@media (max-width:860px){
  .cu-case-inner{grid-template-columns:1fr;gap:20px}
  .cu-case:nth-of-type(even) .cu-case-media{order:0}
  .cu-case-media{min-height:0;padding-block:8px}
  .cu-case-media .cu-art{--art:132px}
  .cu-case-num{font-size:11rem;-webkit-text-stroke-width:2.5px}
}
@media (prefers-reduced-motion:reduce){
  .cu-case:hover .cu-case-media .cu-art img{transform:none}
}

/* ==========================================================================
   19. Fiche : bandes alternées
   Les sections respirent et alternent blanc / teinté, comme le hub. Le but
   est qu'on repère d'un coup d'œil où l'on en est dans la page.
   ========================================================================== */
.cu-sec{padding-block:clamp(50px,7.5vh,96px)}
.cu-sec.is-tint{background:var(--surface-2);border-block:1px solid var(--line-2)}
.cu-sec.is-violet{background:rgba(127,12,242,.045)}
.cu-sec > .shell > h2,.cu-sec .cu-sec-head h2{font-size:clamp(1.55rem,2.7vw,2.25rem)}
.cu-sec-head{max-width:62ch;display:flex;flex-direction:column;gap:.75rem;margin-bottom:clamp(24px,3.5vh,40px)}
.cu-split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,3.5vw,56px);align-items:start}
.cu-plain p{font-size:1.05rem;line-height:1.75;margin-bottom:1rem;max-width:64ch}
.cu-plain p:last-child{margin-bottom:0}

/* ==========================================================================
   20. Fiche : simulation
   Le cœur de la page. Deux scénarios, les étapes qui arrivent dans l'ordre,
   les sources qu'on peut ouvrir. Sans JavaScript, tout reste affiché.
   ========================================================================== */
.cu-sim{max-width:860px;margin-inline:auto}
.cu-sim-head{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin-bottom:.8rem}
.cu-sim-head h2{margin:0}
.cu-sim-intro{font-size:1rem;line-height:1.65;color:var(--ink-2);margin-bottom:1.5rem;max-width:62ch}

.cu-sim-tabs{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1rem}
.cu-sim-tab{
  padding:.55rem 1.05rem;border-radius:999px;
  background:#fff;border:1px solid var(--line);
  font-size:.88rem;font-weight:600;color:var(--ink-2);
  transition:color .2s,border-color .2s,background .2s,box-shadow .2s;
}
.cu-sim-tab:hover{color:var(--violet);border-color:rgba(127,12,242,.35)}
.cu-sim-tab[aria-selected="true"]{
  background:var(--grad);color:#fff;border-color:transparent;
  box-shadow:0 6px 18px -8px rgba(127,12,242,.6);
}

.cu-sim-stage{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:var(--shadow-card);padding:clamp(18px,2.2vw,28px);
}
.cu-sim-stage[hidden]{display:none}
.cu-sim-context{
  display:flex;gap:.6rem;align-items:flex-start;
  padding-bottom:1rem;margin-bottom:1.1rem;border-bottom:1px solid var(--line-2);
  font-size:.88rem;line-height:1.5;color:var(--ink-3);
}
.cu-sim-context b{
  flex:none;font-family:var(--font-d);font-size:.66rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);padding-top:2px;
}
.cu-sim-steps{display:flex;flex-direction:column;gap:.85rem}

/* L'état masqué est posé par le script : sans JavaScript, tout est visible. */
.cu-sim.cu-anim .cu-sim-step{opacity:0;transform:translateY(8px)}
.cu-sim.cu-anim .cu-sim-step.is-on{animation:cu-sim-in .42s var(--ease-out) both}
@keyframes cu-sim-in{to{opacity:1;transform:none}}

/* Bulles */
.cu-msg{max-width:min(94%,600px);padding:.9rem 1.1rem;border-radius:var(--r-m)}
.cu-msg b{display:block;font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.35rem;opacity:.7}
.cu-msg p{margin:0;font-size:.98rem;line-height:1.55}
.cu-msg.is-user{margin-right:auto;background:var(--surface-2);border:1px solid var(--line);border-bottom-left-radius:6px}
.cu-msg.is-ai{margin-left:auto;background:var(--ink);color:#fff;border-bottom-right-radius:6px}
.cu-msg.is-ai b{color:var(--pink);opacity:1}
.cu-msg.is-ai p{color:rgba(255,255,255,.93)}

/* Ligne de travail : trois points qui respirent pendant le calcul. */
.cu-work{display:flex;align-items:center;gap:.6rem;padding-left:.2rem;font-size:.86rem;color:var(--ink-3);font-style:italic}
.cu-work i{display:flex;gap:3px;flex:none}
.cu-work i span{width:5px;height:5px;border-radius:50%;background:var(--violet);animation:cu-blink 1.1s infinite}
.cu-work i span:nth-child(2){animation-delay:.16s}
.cu-work i span:nth-child(3){animation-delay:.32s}
@keyframes cu-blink{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* Sources : dépliables, pour montrer d'où vient la réponse. */
.cu-srcs{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem}
.cu-src{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.34rem .72rem;border-radius:999px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);
  font-size:.76rem;font-weight:500;color:#fff;
  transition:background .2s,border-color .2s;
}
.cu-src:hover{background:rgba(255,255,255,.24)}
.cu-src svg{width:12px;height:12px;stroke-width:2.4;transition:transform .25s var(--ease)}
.cu-src[aria-expanded="true"] svg{transform:rotate(90deg)}
.cu-excerpt{
  margin-top:.6rem;padding:.8rem 1rem;border-radius:var(--r-s);
  background:rgba(255,255,255,.1);border-left:2px solid var(--pink);
  font-size:.86rem;line-height:1.6;color:rgba(255,255,255,.88);
}
.cu-excerpt[hidden]{display:none}
.cu-excerpt b{display:block;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--pink);opacity:1;margin-bottom:.3rem}

/* Champs et contrôles produits par la solution */
.cu-out{border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden}
.cu-out > b{
  display:block;padding:.6rem 1rem;background:var(--surface-2);
  border-bottom:1px solid var(--line);
  font-family:var(--font-d);font-size:.66rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--violet);
}
.cu-out-row{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:.9rem;
  padding:.68rem 1rem;border-top:1px solid var(--line-2);font-size:.93rem;line-height:1.5;
}
.cu-out-row:first-of-type{border-top:0}
.cu-out-row > span:first-child{color:var(--ink-3)}
.cu-out-row > span:last-child{color:var(--ink);font-weight:500}
.cu-out-row.is-ko > span:last-child{color:#b0186f}
.cu-out-row.is-warn > span:last-child{color:#a8530c}
.cu-out-row .dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  margin-right:.5rem;vertical-align:middle;background:var(--violet);
}
.cu-out-row.is-warn .dot{background:var(--orange)}
.cu-out-row.is-ko .dot{background:var(--pink)}
/* Les lignes d'un même bloc arrivent l'une après l'autre. */
.cu-sim.cu-anim .cu-sim-step.is-on .cu-out-row{animation:cu-sim-in .35s var(--ease-out) both;animation-delay:calc(var(--r,0) * 140ms)}

.cu-done{
  display:flex;gap:.65rem;align-items:flex-start;
  padding:.9rem 1.05rem;border-radius:var(--r-s);
  background:var(--grad-soft);border:1px solid rgba(127,12,242,.14);
  font-size:.95rem;line-height:1.6;color:var(--ink);
}
.cu-done svg{width:16px;height:16px;stroke-width:2.6;flex:none;margin-top:4px;color:var(--violet)}

.cu-sim-foot{display:flex;justify-content:flex-end;margin-top:1.1rem}
.cu-replay{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem 1rem;border-radius:999px;
  background:#fff;border:1px solid var(--line);
  font-size:.84rem;font-weight:600;color:var(--ink-2);
  transition:color .2s,border-color .2s;
}
.cu-replay:hover{color:var(--violet);border-color:rgba(127,12,242,.35)}
.cu-replay svg{width:14px;height:14px;stroke-width:2.4}

@media (max-width:860px){
  .cu-split{grid-template-columns:1fr}
  .cu-out-row{grid-template-columns:1fr;gap:.2rem}
  .cu-msg{max-width:100%}
}
@media (prefers-reduced-motion:reduce){
  .cu-sim.cu-anim .cu-sim-step{opacity:1;transform:none;animation:none}
  .cu-sim.cu-anim .cu-sim-step.is-on .cu-out-row{animation:none}
  .cu-work i span{animation:none;opacity:.6}
}
@media print{
  .cu-sim-tabs,.cu-sim-foot{display:none}
  .cu-sim-stage[hidden]{display:block}
  .cu-sim.cu-anim .cu-sim-step{opacity:1;transform:none;animation:none}
  .cu-excerpt[hidden]{display:block}
}

/* ---------- 21. Ajustements de l'en-tête de fiche ---------- */
.cu-head{grid-template-columns:1fr .82fr}
.cu-head .cu-case-media{min-height:clamp(230px,26vw,330px)}
.cu-head .cu-hook{margin-bottom:.9rem}
.cu-head .cu-alias{margin-top:1.4rem;border-top:1px solid var(--line-2);padding-top:1.1rem}
/* Les transpositions passent en trois colonnes : trois phrases courtes se
   lisent mieux côte à côte qu'empilées. */
.cu-variants.is-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,16px)}
.cu-variants.is-cols .cu-variant{background:#fff;border-color:var(--line);align-items:flex-start}
@media (max-width:980px){
  .cu-head{grid-template-columns:1fr}
  .cu-variants.is-cols{grid-template-columns:1fr}
}

/* ---------- 22. Simulation : entrée document et note vocale ---------- */
/* Une pièce qui arrive n'est pas un message : elle ne prend pas la forme
   d'une bulle, pour qu'on ne confonde pas ces cas avec un chatbot. */
.cu-in{
  padding:1rem 1.15rem;border-radius:var(--r-s);
  background:var(--surface-2);border:1px dashed rgba(127,12,242,.3);
}
.cu-in b{
  display:flex;align-items:center;gap:.5rem;margin-bottom:.45rem;
  font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);
}
.cu-in b svg{width:14px;height:14px;stroke-width:2;color:var(--violet)}
.cu-in p{margin:0;font-size:.98rem;line-height:1.55;color:var(--ink-2);font-style:italic}

/* Note vocale : on montre que la personne a parlé, elle n'a rien tapé. */
.cu-msg.is-voice b{display:flex;align-items:center;gap:.45rem}
.cu-msg.is-voice b svg{width:13px;height:13px;stroke-width:2;color:var(--violet)}
.cu-wave{display:flex;align-items:center;gap:2px;height:26px;margin-bottom:.6rem}
.cu-wave i{
  display:block;width:3px;border-radius:2px;flex:none;
  height:var(--h,50%);background:rgba(127,12,242,.4);
}
.cu-wave em{
  margin-left:.6rem;font-style:normal;font-size:.72rem;font-weight:600;
  color:var(--ink-4);font-variant-numeric:tabular-nums;
}
.cu-msg.is-voice p{font-style:italic}

/* ==========================================================================
   23. Respirations
   Reprise systématique des marges : aucun élément ne doit toucher le bord de
   sa section, ni le bloc suivant.
   ========================================================================== */

/* L'en-tête de fiche se terminait sur le bouton, collé au bord de la bande
   teintée qui suit. */
.cu-head{padding-bottom:clamp(48px,7vh,92px)}
.cu-head > div > p:last-child{margin-top:1.8rem}
.cu-head .cu-kicker{margin-bottom:.3rem}

/* Le hub : même règle sous l'index. */
.cu-index{padding-bottom:clamp(30px,4.5vh,52px)}

/* Dans l'en-tête, le numéro reste plus petit que sur le hub : la colonne est
   moins large et il déborderait sur la navigation. */
.cu-head .cu-case-num{font-size:clamp(12rem,24vw,21rem)}

/* Le bloc « Aussi appelé » ne doit pas coller au chapô ni au bouton. */
.cu-alias{margin-block:1.6rem 0}

/* Les cartes en grille ont toutes la même gouttière minimale. */
.cu-audience,.cu-rels,.cu-variants.is-cols{margin-top:.2rem}

/* Une ancre au-dessus de chaque section : le titre ne passe pas sous la
   barre de navigation fixe quand on arrive par un lien. */
.cu-sec,.cu-case{scroll-margin-top:100px}

/* La bande d'appel à l'action est déjà dans une section : pas de marge
   supplémentaire qui créerait un double intervalle. */
.cu-sec > .shell > .cu-cta{margin-block:0}

/* Sur mobile, les boutons pleine largeur ont besoin d'air au-dessus. */
@media (max-width:640px){
  .cu-head{padding-bottom:clamp(36px,6vh,64px)}
  .cu-head > div > p:last-child{margin-top:1.4rem}
  .cu-head .cu-case-num{font-size:9.5rem}
}

/* ==========================================================================
   24. Hub : grappe d'illustrations
   La colonne de droite de l'en-tête était vide. Cinq visuels déjà recolorisés
   y flottent, à des tailles et des hauteurs différentes : la page annonce sa
   matière avant même la première rangée.
   ========================================================================== */
/* La colonne de texte et la grappe ne se touchent pas : une gouttiere large,
   et un retrait interieur pour qu'aucun visuel ne vienne mordre le bord. */
.cu-hub-top{
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(32px,4.5vw,72px);align-items:center;
}
.cu-hub-top .cu-hub-head{margin-bottom:0;max-width:none}
/* Dans cette colonne, aucun plafond de mesure : c'est la grille qui decide,
   sinon le texte se tasse et un couloir vide se creuse a sa droite. */
.cu-hub-top h1,.cu-hub-top .lead{max-width:none}
/* En deux colonnes, le titre dispose de moitie moins de largeur qu'en pleine
   page : garder l'echelle pleine page le hachait en cinq lignes. */
.cu-hub-top h1{font-size:clamp(2.2rem,4vw,3.6rem)}

.cu-cluster{
  position:relative;aspect-ratio:1/.9;
  min-height:clamp(280px,30vw,400px);
  padding:9%;
}
.cu-cluster::before{
  content:"";position:absolute;inset:10%;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(215,5,242,.13),rgba(242,127,27,.06) 50%,transparent 74%);
}
.cu-cluster img{
  position:absolute;left:var(--x);top:var(--y);
  width:calc(var(--s) * 38%);height:auto;
  transform:translate(-50%,-50%);
  animation:cu-float 7s var(--ease-out) infinite;
  animation-delay:var(--d);
  filter:drop-shadow(0 16px 24px rgba(80,40,160,.16));
}
/* La fiole occupe le centre et donne l'echelle ; les cas d'usage gravitent. */
.cu-cluster .cu-fiole{
  left:50%;top:50%;width:64%;
  animation:cu-float 9s var(--ease-out) infinite;
  filter:drop-shadow(0 26px 38px rgba(80,40,160,.22));
}
@keyframes cu-float{
  0%,100%{transform:translate(-50%,-50%)}
  50%{transform:translate(-50%,calc(-50% - 14px))}
}

@media (max-width:980px){
  .cu-hub-top{grid-template-columns:1fr;gap:clamp(20px,4vh,40px)}
  .cu-hub-top .cu-hub-head{max-width:none}
  .cu-cluster{min-height:250px;max-width:400px;margin-inline:auto;padding:7%}
}
@media (prefers-reduced-motion:reduce){
  .cu-cluster img{animation:none}
}

/* ---------- 25. La valeur, accompagnee de la fusee ---------- */
.cu-valeur{grid-template-columns:1.25fr .75fr;align-items:center;gap:clamp(28px,4vw,72px)}
.cu-valeur-visuel{display:grid;place-items:center;position:relative}
.cu-valeur-visuel::before{
  content:"";position:absolute;inset:8%;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(215,5,242,.14),rgba(242,127,27,.07) 48%,transparent 72%);
}
.cu-valeur-visuel img{
  position:relative;width:min(100%,300px);height:auto;
  filter:drop-shadow(0 22px 32px rgba(80,40,160,.2));
  /* Animation propre : celle de la grappe contient translate(-50%,-50%),
     destine a un element positionne en absolu. */
  animation:cu-flotte 8s var(--ease-out) infinite;
}
@keyframes cu-flotte{0%,100%{transform:none}50%{transform:translateY(-14px)}}
@media (max-width:860px){
  .cu-valeur{grid-template-columns:1fr}
  .cu-valeur-visuel img{width:min(70%,220px)}
}
@media (prefers-reduced-motion:reduce){
  .cu-valeur-visuel img{animation:none}
}

/* ---------- 26. Respirations du hub ----------
   Le titre et le chapo se calaient contre le bord gauche de leur colonne.
   Un retrait interieur les detache, et la ligne de mesure evite les veuves. */
.cu-hub-top{padding-block:clamp(8px,2vh,28px)}
.cu-hub-head h1{text-wrap:balance}
.cu-hub-head .lead{text-wrap:pretty}
.cu-case-body h2,.cu-sec-head h2{text-wrap:balance}
.cu-case-hook,.cu-hook{text-wrap:pretty}
.cu-signal p,.cu-need p,.cu-plain p{text-wrap:pretty}

/* ==========================================================================
   27. Tactile et petits ecrans
   Au doigt, une cible sous 44 px se rate. Les commandes du parcours, du
   simulateur et du fil d'Ariane sont remontees a cette taille, sans changer
   leur dessin au pointeur.
   ========================================================================== */
@media (hover:none){
  .cu-arrow{width:44px;height:44px}
  .cu-replay{padding:.66rem 1.1rem}
  .cu-src{padding:.62rem .9rem;font-size:.8rem;min-height:44px}
  .cu-sim-tab,.cu-chip{padding:.7rem 1.1rem}
  .cu-breadcrumb a,.cu-breadcrumb [aria-current]{padding-block:.75rem}
  .brand{padding-block:.7rem}
  .cu-index a{padding:.66rem 1rem}
  .cu-alias li{padding:.44rem .8rem}
  .cu-kpi{padding:.52rem .9rem}
  .faq-item summary{padding-block:1.25rem}
  .footer-col a,.nav-links a{padding-block:.65rem}
}

@media (max-width:640px){
  /* Les sections s'enchainent plus vite : sur telephone, une respiration
     calee sur la hauteur d'ecran fait defiler dans le vide. */
  .cu-sec{padding-block:clamp(38px,6vh,58px)}
  .cu-page{padding-top:clamp(96px,13vh,124px)}

  /* L'en-tete : le visuel passe sous le texte et reste mesure. */
  .cu-head{gap:8px}
  .cu-head .cu-case-media{min-height:0;padding-block:6px}
  .cu-head .cu-case-media .cu-art{--art:150px}
  .cu-head .cu-case-num{font-size:8rem;-webkit-text-stroke-width:2px}
  .cu-head-card .btn,.cu-head > div > p:last-child .btn{width:100%}

  /* La simulation : les bulles prennent toute la largeur disponible. */
  .cu-sim-stage{padding:14px}
  .cu-msg,.cu-in,.cu-out,.cu-done{max-width:100%}
  .cu-sim-tabs{gap:.4rem}
  .cu-sim-tab{flex:1 1 auto;text-align:center}
  .cu-wave{height:22px}
  .cu-wave i{width:2.5px}

  /* Le parcours : le rail vertical laisse la place au texte de l'etape. */
  .cu-panel{padding:16px}
  .cu-flow,.cu-demo,.cu-block{padding:20px}

  /* L'appel a l'action reste lisible sans devenir un mur. */
  .cu-cta{padding:26px 22px;gap:18px}
  .cu-cta-titre{font-size:clamp(1.45rem,7vw,1.9rem);max-width:none}
  .cu-cta p{font-size:.94rem}

  /* Le hub : titre et chapo prennent toute la largeur du telephone. */
  .cu-hub-top{gap:14px}
  .cu-hub-top h1{font-size:clamp(2rem,8.5vw,2.6rem)}
  .cu-cluster{min-height:210px;padding:5%}
  .cu-case{padding-block:clamp(40px,6.5vh,64px)}
  .cu-case-body h2{font-size:clamp(1.55rem,7vw,2rem)}
  .cu-index{gap:.4rem;padding-bottom:clamp(22px,3.5vh,34px)}
}

@media (max-width:400px){
  .cu-head .cu-case-num{font-size:6.5rem}
  .cu-alias ul{gap:.3rem}
  .cu-alias li{font-size:.74rem}
}

/* ==========================================================================
   28. Simulation : les formes propres a chaque metier
   Une conversation ne represente pas une planification, et un tableau ne
   represente pas un controle visuel. Chaque cas recoit la forme qui montre
   reellement son mecanisme : un planning qui se recompose, une vue camera
   qu'on balaye, des sources qui convergent, des ecarts signes. Tout est
   anime en CSS, declenche par la classe `is-on` posee par le lecteur.
   ========================================================================== */

/* ---------- Alerte poussee par l'outil ----------
   Personne ne l'a demandee : la forme doit se distinguer nettement d'une
   question d'utilisateur, sinon on relit la scene comme un chatbot. */
.cu-alert{
  padding:1rem 1.15rem;border-radius:var(--r-s);
  background:linear-gradient(135deg,rgba(242,127,27,.12),rgba(127,12,242,.07));
  border:1px solid rgba(242,127,27,.34);border-left:3px solid var(--orange);
}
.cu-alert b{
  display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem;
  font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#a8530c;
}
.cu-alert b svg{width:14px;height:14px;stroke-width:2.2;flex:none}
.cu-alert b em{
  margin-left:auto;font-style:normal;font-weight:600;font-size:.72rem;
  letter-spacing:.03em;text-transform:none;color:var(--ink-4);
}
.cu-alert p{margin:0;font-size:.98rem;line-height:1.55;color:var(--ink)}
.cu-sim.cu-anim .cu-sim-step.is-on .cu-alert b svg{animation:cu-ring 1.5s var(--ease) 2}
@keyframes cu-ring{0%,100%{transform:none}12%{transform:rotate(-16deg)}26%{transform:rotate(13deg)}40%{transform:rotate(-7deg)}54%{transform:none}}

/* ---------- Planning : les blocs glissent sur la grille ----------
   Le fantome garde la trace du creneau d'origine : sans lui, on voit un
   planning different, pas un planning deplace. */
.cu-gantt{border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden;background:#fff}
.cu-gantt-t{
  display:flex;align-items:center;gap:.5rem;padding:.6rem 1rem;
  background:var(--surface-2);border-bottom:1px solid var(--line);
  font-family:var(--font-d);font-size:.66rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--violet);
}
.cu-gantt-t svg{width:14px;height:14px;stroke-width:2;flex:none}
.cu-gantt-row{
  display:grid;grid-template-columns:clamp(82px,20%,136px) minmax(0,1fr);
  align-items:center;gap:.6rem;padding:.4rem 1rem;border-top:1px solid var(--line-2);
}
.cu-gantt-row.is-head{border-top:0;padding-block:.45rem .2rem}
.cu-gantt-lab{font-size:.77rem;font-weight:600;line-height:1.25;color:var(--ink-3)}
.cu-gantt-cols,.cu-gantt-track{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.cu-gantt-cols span{font-size:.67rem;color:var(--ink-4);font-variant-numeric:tabular-nums}
.cu-gantt-track{
  position:relative;min-height:32px;align-items:center;
  background:repeating-linear-gradient(to right,
    var(--line-2) 0 1px,transparent 1px calc(100% / var(--n)));
}
.cu-gb,.cu-gb-ghost{grid-row:1;grid-column:calc(var(--c) + 1) / span var(--l);margin-inline:2px;border-radius:7px}
.cu-gb{
  display:flex;align-items:center;min-height:27px;padding:.2rem .5rem;
  background:var(--grad-soft);border:1px solid rgba(127,12,242,.25);
  font-size:.72rem;font-weight:600;color:var(--ink);
  overflow:hidden;white-space:nowrap;
}
.cu-gb span{overflow:hidden;text-overflow:ellipsis}
.cu-gb.is-move{background:linear-gradient(120deg,rgba(242,127,27,.2),rgba(242,68,181,.16));border-color:rgba(242,127,27,.45)}
.cu-gb.is-new{background:linear-gradient(120deg,rgba(127,12,242,.2),rgba(242,68,181,.16));border-color:rgba(127,12,242,.45)}
.cu-gb.is-ko{
  color:#b0186f;border-color:rgba(242,68,181,.5);
  background:repeating-linear-gradient(135deg,rgba(242,68,181,.16) 0 6px,rgba(242,68,181,.05) 6px 12px);
}
.cu-gb-ghost{min-height:27px;border:1px dashed var(--line);opacity:0}
.cu-gantt-leg{display:flex;flex-wrap:wrap;gap:.9rem;margin:0;padding:.6rem 1rem .7rem;border-top:1px solid var(--line-2)}
.cu-gl{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;color:var(--ink-3)}
.cu-gl::before{content:"";width:12px;height:12px;border-radius:4px;flex:none;background:var(--grad-soft);border:1px solid rgba(127,12,242,.3)}
.cu-gl.is-move::before{background:linear-gradient(120deg,rgba(242,127,27,.35),rgba(242,68,181,.3));border-color:rgba(242,127,27,.5)}
.cu-gl.is-ko::before{background:repeating-linear-gradient(135deg,rgba(242,68,181,.3) 0 4px,rgba(242,68,181,.08) 4px 8px);border-color:rgba(242,68,181,.5)}

.cu-sim.cu-anim .cu-sim-step.is-on .cu-gantt-row{
  animation:cu-sim-in .34s var(--ease-out) both;animation-delay:calc(var(--r,0) * 90ms + 120ms);
}
.cu-sim.cu-anim .cu-sim-step.is-on .cu-gb-ghost{
  animation:cu-ghost-in .3s var(--ease-out) both;animation-delay:calc(var(--r,0) * 90ms + 420ms);
}
.cu-sim.cu-anim .cu-sim-step.is-on .cu-gb.is-move{
  animation:cu-gb-slide .85s var(--ease-out) both;animation-delay:calc(var(--r,0) * 90ms + 640ms);
}
@keyframes cu-ghost-in{to{opacity:1}}
@keyframes cu-gb-slide{from{transform:translateX(var(--dx,0));opacity:.45}to{transform:none;opacity:1}}

/* ---------- Vue camera : on balaye, puis on entoure ---------- */
.cu-vision{border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden;background:#fff}
.cu-vision-t{
  display:flex;align-items:center;gap:.5rem;padding:.6rem 1rem;
  background:var(--surface-2);border-bottom:1px solid var(--line);
  font-family:var(--font-d);font-size:.66rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--violet);
}
.cu-vision-t svg{width:14px;height:14px;stroke-width:2;flex:none}
.cu-vframe{position:relative;background:#141219;line-height:0;overflow:hidden}
.cu-vimg{display:block;width:100%;height:auto}
.cu-vscan{
  position:absolute;left:0;right:0;top:-3px;height:3px;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(242,68,181,.95) 20%,rgba(215,5,242,.95) 80%,transparent);
  box-shadow:0 0 22px rgba(215,5,242,.85);
}
.cu-vz{
  position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);
  border:2px solid var(--orange);border-radius:5px;opacity:0;
  box-shadow:0 0 0 1px rgba(0,0,0,.45), 0 0 26px rgba(242,127,27,.45);
}
.cu-vz span{
  position:absolute;left:-2px;bottom:calc(100% + 5px);white-space:nowrap;
  padding:.18rem .48rem;border-radius:5px;background:var(--orange);color:#fff;
  font-size:.66rem;font-weight:700;line-height:1.35;letter-spacing:.01em;
}
/* Une zone collee au bord haut n'a pas la place d'afficher son etiquette
   au-dessus : elle passe dessous. */
.cu-vz.is-under span{bottom:auto;top:calc(100% + 5px)}
/* Deux zones voisines : l'une garde son etiquette dehors, l'autre la
   range a l'interieur du cadre pour qu'elles ne se recouvrent pas. */
.cu-vz.is-in span{bottom:4px;left:4px}
.cu-vz.is-ko{border-color:var(--pink)}
.cu-vz.is-ko span{background:var(--pink)}
.cu-vz.is-ok{border-color:#2fb37a;box-shadow:0 0 0 1px rgba(0,0,0,.45),0 0 26px rgba(47,179,122,.4)}
.cu-vz.is-ok span{background:#2fb37a}
.cu-vmeta{padding:.2rem 0}
.cu-vm-row{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:.9rem;
  padding:.62rem 1rem;border-top:1px solid var(--line-2);font-size:.9rem;line-height:1.5;
}
.cu-vm-row > span:first-child{color:var(--ink-3)}
.cu-vm-row > span:last-child{color:var(--ink);font-weight:500}

.cu-sim.cu-anim .cu-sim-step.is-on .cu-vscan{animation:cu-scan 1.15s var(--ease) .2s both}
.cu-sim.cu-anim .cu-sim-step.is-on .cu-vz{
  animation:cu-vz-in .42s var(--ease-out) both;animation-delay:calc(1.45s + var(--z,0) * 280ms);
}
@keyframes cu-scan{0%{opacity:0;top:-3px}10%{opacity:1}90%{opacity:1}100%{opacity:0;top:100%}}
@keyframes cu-vz-in{from{opacity:0;transform:scale(1.22)}to{opacity:1;transform:none}}

/* ---------- Sources croisees : plusieurs entrees, une sortie ---------- */
.cu-signals{border:1px solid var(--line);border-radius:var(--r-s);background:#fff;padding:1rem}
.cu-signals-t,.cu-bars-t{
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--font-d);font-size:.66rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--violet);
}
.cu-bars-t svg{width:14px;height:14px;stroke-width:2;flex:none}
.cu-sig-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:.6rem;margin-top:.75rem}
.cu-sig{border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface-2);padding:.7rem .8rem}
.cu-sig b{
  display:flex;align-items:center;gap:.4rem;margin-bottom:.35rem;
  font-size:.63rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);
}
.cu-sig b svg{width:14px;height:14px;stroke-width:2;flex:none;color:var(--violet)}
.cu-sig p{margin:0;font-size:.84rem;line-height:1.45;color:var(--ink)}
.cu-sig em{display:block;margin-top:.5rem;font-style:normal;font-size:.72rem;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.cu-sig.is-baisse em{color:#b0186f}
.cu-sig.is-hausse em{color:#1b7d57}
.cu-sig.is-neutre em{color:var(--ink-4)}
.cu-sig-out{
  display:flex;align-items:center;gap:.5rem;margin:.9rem 0 0;padding-top:.85rem;
  border-top:1px dashed var(--line);font-size:.9rem;font-weight:600;color:var(--violet);
}
.cu-sig-out svg{width:15px;height:15px;stroke-width:2.4;flex:none}
.cu-sim.cu-anim .cu-sim-step.is-on .cu-sig{
  animation:cu-sim-in .38s var(--ease-out) both;animation-delay:calc(var(--s,0) * 240ms + 150ms);
}
.cu-sim.cu-anim .cu-sim-step.is-on .cu-sig-out{
  animation:cu-sim-in .4s var(--ease-out) both;animation-delay:calc(var(--n-sig,4) * 240ms + 350ms);
}

/* ---------- Ecarts signes : la barre part du centre ---------- */
.cu-bars{border:1px solid var(--line);border-radius:var(--r-s);background:#fff;padding:1rem}
.cu-bar{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(110px,1.15fr) 62px;
  align-items:center;gap:.7rem;padding:.32rem 0;
}
.cu-bar:first-of-type{margin-top:.7rem}
.cu-bar-l{font-size:.84rem;line-height:1.35;color:var(--ink-2)}
.cu-bar-t{position:relative;height:16px;border-radius:5px;background:var(--surface-2)}
.cu-bar-t::before{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--line)}
.cu-bar-t i{
  position:absolute;top:2px;bottom:2px;left:50%;width:var(--w);border-radius:4px;
  background:linear-gradient(90deg,var(--violet),var(--pink));
}
.cu-bar.is-neg .cu-bar-t i{
  left:auto;right:50%;background:linear-gradient(90deg,#e0567d,var(--orange));
}
.cu-bar-v{font-size:.82rem;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;color:#1b7d57}
.cu-bar.is-neg .cu-bar-v{color:#b0186f}
.cu-bar.is-nul .cu-bar-v{color:var(--ink-4)}
.cu-bar.is-nul .cu-bar-t i{display:none}
.cu-bars-u{margin:.9rem 0 0;padding-top:.8rem;border-top:1px solid var(--line-2);font-size:.8rem;color:var(--ink-4)}
.cu-sim.cu-anim .cu-sim-step.is-on .cu-bar-t i{
  animation:cu-bar-in .55s var(--ease-out) both;animation-delay:calc(var(--r,0) * 200ms + 200ms);
}
@keyframes cu-bar-in{from{width:0}to{width:var(--w)}}

@media (max-width:640px){
  .cu-gantt-row{grid-template-columns:72px minmax(0,1fr);gap:.45rem;padding-inline:.7rem}
  .cu-gantt-lab{font-size:.7rem}
  .cu-gantt-cols span{font-size:.6rem}
  .cu-gb{font-size:.66rem;padding-inline:.35rem}
  .cu-gantt-t,.cu-vision-t{padding-inline:.7rem}
  .cu-vm-row{grid-template-columns:1fr;gap:.15rem;padding-inline:.7rem}
  .cu-sig-grid{grid-template-columns:1fr 1fr}
  .cu-bar{grid-template-columns:minmax(0,1fr) 56px;gap:.5rem}
  .cu-bar-t{grid-column:1 / -1;order:3;margin-bottom:.3rem}
  .cu-vz span{font-size:.6rem;padding:.14rem .36rem}
}
@media (max-width:400px){
  .cu-sig-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .cu-sim.cu-anim .cu-sim-step.is-on .cu-gantt-row,
  .cu-sim.cu-anim .cu-sim-step.is-on .cu-gb.is-move,
  .cu-sim.cu-anim .cu-sim-step.is-on .cu-vz,
  .cu-sim.cu-anim .cu-sim-step.is-on .cu-sig,
  .cu-sim.cu-anim .cu-sim-step.is-on .cu-sig-out,
  .cu-sim.cu-anim .cu-sim-step.is-on .cu-alert b svg{animation:none}
  .cu-gb-ghost{opacity:1}
  .cu-vz{opacity:1}
  .cu-vscan{display:none}
  .cu-sim.cu-anim .cu-sim-step.is-on .cu-bar-t i{animation:none}
}
@media print{
  .cu-gb-ghost,.cu-vz{opacity:1}
  .cu-vscan{display:none}
}