/* speciale.io — Consultant IA · design system
   Charte figée : fond off-white chaud, encre bleu nuit, accent terracotta, jaune de soutien,
   typographie Public Sans. Pas de gradient, pas d'effet, aucun sélecteur de thème. */

/* ---------- 0. La police, servie par le site ----------
   Public Sans est installée ici, dans assets/fonts/, et non chargée depuis Google : c'était
   un sous-traitant hors UE de plus, l'adresse IP du visiteur partait chez Google, et deux
   résolutions DNS s'ajoutaient sur le chemin critique de rendu. La police est variable : un
   seul fichier couvre toute la plage 100-900. Seul le sous-ensemble « latin » sert au
   français (26 Ko) ; « latin-ext » n'est téléchargé que si un caractère l'exige.
   Pour la réinstaller ou la mettre à jour : node outils/installer-police.mjs */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/public-sans-latin-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/public-sans-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/public-sans-latin-ext-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Public Sans';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/public-sans-latin-ext-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 1. Tokens ---------- */
:root{
  --paper:rgb(255 250 240);          /* floralwhite */
  --paper-2:rgb(255 239 227);        /* off-white chaud, légèrement rosé */
  --ink:rgb(14 28 45);               /* gray-900 */
  --ink-soft:rgb(104 111 118);       /* gray-600 */
  --line:rgb(232 221 208);           /* filets chauds */
  --line-strong:rgb(44 56 69);       /* gray-800 */
  --acid:rgb(219 90 49);             /* terracotta */
  --acid-ink:rgb(255 250 240);
  /* Texte posé sur l'aplat terracotta : un noir chaud, lisible, jamais le gris secondaire. */
  --on-acid:#241811;
  --accent:rgb(245 207 69);          /* jaune de soutien */
  --orange:rgb(14 28 45);            /* signal : l'encre */
  --radius:2px;
  --sans:"Public Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --head:var(--sans);
  --serif:var(--sans);
  --mono:var(--sans);
  --pad:clamp(1.1rem,4vw,2.6rem);
  --maxw:1240px;
  --sp:clamp(3.6rem,8vw,7.5rem);
  --haut:74px;                 /* hauteur de l'en-tête : le menu mobile s'y accroche */
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:clamp(1rem,0.55vw + 0.9rem,1.075rem);
  line-height:1.58;font-weight:400;letter-spacing:-0.004em;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--head);font-weight:750;letter-spacing:-0.025em;line-height:1.05;margin:0;text-wrap:balance}
h1{font-size:clamp(2.35rem,6.4vw,4.7rem);letter-spacing:-0.035em;font-weight:800}
h2{font-size:clamp(1.9rem,4.6vw,3.15rem);letter-spacing:-0.03em;font-weight:800}
h3{font-size:clamp(1.3rem,2.4vw,1.8rem)}
h4{font-family:var(--sans);font-size:1.02rem;font-weight:680;letter-spacing:-0.008em;line-height:1.32}
p{margin:0}
em{font-style:italic}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.skip{position:absolute;left:-9999px}

/* ---------- 3. Header ---------- */
.top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(9px);border-bottom:1px solid var(--line)}
.top__in{display:flex;align-items:center;gap:1.2rem;min-height:var(--haut)}
.logo{font-family:var(--head);font-weight:800;font-size:1.42rem;letter-spacing:-0.04em;white-space:nowrap}
.logo i{font-style:normal;color:var(--orange)}
.nav{display:flex;gap:.35rem;margin-left:auto;align-items:center}
.nav a{padding:.5rem .7rem;font-size:.9rem;color:var(--ink-soft);border-radius:var(--radius)}
.nav a:hover{color:var(--ink);background:var(--paper-2)}
.nav a[aria-current="page"]{color:var(--ink);font-weight:600}
/* Le bouton posé dans le menu : ses règles de couleur doivent primer sur le gris des liens
   de navigation (.nav a). Même spécificité, déclarées après — donc aucun !important. */
.nav .btn--acid{color:var(--acid-ink)}
.nav .btn--acid:hover{color:var(--acid-ink);background:var(--acid)}
.nav .btn--ghost{color:var(--ink)}
.nav .btn--ghost:hover{color:var(--ink);background:var(--paper-2)}
.burger{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--line-strong);background:transparent;border-radius:var(--radius);cursor:pointer}
.burger span{display:block;width:18px;height:1.6px;background:var(--ink);margin:3.5px auto}
/* menu replié dès 900 px : entre 861 et 900 px, le logo agrandi et six liens ne tenaient
   plus qu'à quelques pixels près */
@media(max-width:900px){
  .nav{position:fixed;inset:var(--haut) 0 auto;flex-direction:column;gap:0;background:var(--paper);border-bottom:1px solid var(--line-strong);padding:.6rem var(--pad) 1.4rem;display:none}
  .nav[data-open]{display:flex}
  .nav a{padding:.85rem 0;font-size:1.12rem;font-family:var(--head);font-weight:680;border-bottom:1px solid var(--line);width:100%}
  .nav .btn{margin-top:1rem;width:100%;font-family:var(--sans);font-size:1rem;border:0;justify-content:center}
  .burger{display:block}
}

/* ---------- 3b. Logo ----------
   Modèle retenu, d'après le logo fourni : mot en bas de casse très gras, et la paire « ia »
   posée sur un pavé jaune plein — la lettre reste en encre, elle n'est pas colorée.
   Le pavé descend jusqu'à la ligne de base et monte jusqu'au haut des hampes : il englobe
   le « i », son point et le « a ».
   Sur fond sombre, le pavé passe au terracotta : le jaune y remplacerait la couleur du texte. */
.mk{
  display:inline-flex;align-items:baseline;white-space:nowrap;
  font-family:var(--head);font-weight:800;letter-spacing:-0.045em;
  line-height:1;color:var(--ink);text-decoration:none;
  text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased
}
.mk__ia{
  position:relative;z-index:0;display:inline-block;
  padding:0 .06em;margin:0 .012em
}
.mk__ia::before{
  content:"";position:absolute;z-index:-1;
  /* Le pavé doit avoir la hauteur du « l » ET contenir le point du « i ». Les deux cotes ne
     peuvent pas être exactes en même temps : dans Public Sans, le point du « i » monte à
     0,759 em et la hampe du « l » à 0,729 em, soit 4 % plus bas (hauteur d'x : 0,52 em).
     Réglage retenu, calé sur la demande : 0,88 em de haut, 0,02 em sous la ligne de base,
     donc un sommet à 0,86 em. Le point du « i » baigne dans le cadre au lieu d'affleurer
     le bord, et le pavé dépasse la cote du « l » de 0,13 em — environ 3 px sur un logo de
     26 px. C'est volontairement plus haut que le « l » : un cadre qui affleure se lit comme
     un défaut de calage, un cadre franchement plus haut se lit comme un choix. */
  left:0;right:0;bottom:-.02em;height:.88em;
  background:var(--accent)
}
.mk--sm{font-size:1.15rem}
/* Le logo demandé 15 % plus grand : 1,6 rem → 1,84 rem, et les paliers suivent la même
   proportion (1,45 → 1,67 · 1,35 → 1,55 · 1,25 → 1,44). Les paliers ne sont pas décoratifs :
   à la taille de base, le logo occupe 134 px dans l'en-tête, et c'est ce qui fait replier le
   menu à 900 px. Un contrôle vérifie que le rapport de 1,15 est tenu sur les quatre valeurs. */
.mk--md{font-size:1.84rem}
.mk--lg{font-size:clamp(2rem,4.6vw,3.2rem);letter-spacing:-0.05em}
.mk--xl{font-size:clamp(2.6rem,7vw,4.6rem);letter-spacing:-0.055em}
.mk--inverse{color:var(--paper)}
.mk--inverse .mk__ia::before{background:var(--acid)}
.mk--mute{color:var(--ink-soft)}

/* signature empilée : le mot, puis la fonction en petites capitales espacées */
.mk-bloc{display:inline-flex;flex-direction:column;gap:.4rem}
.mk-bloc__sub{
  font-family:var(--mono);font-size:.62rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.16em;color:var(--ink-soft)
}
/* réduire le logo sans perdre la marque : sous 20 px on ne garde que le pavé seul */
.mk-pave{
  display:inline-block;width:1.7rem;height:1.7rem;background:var(--ink);
  position:relative;vertical-align:middle
}
.mk-pave::after{
  content:"";position:absolute;left:50%;top:50%;width:.74rem;height:.74rem;
  margin:-.37rem 0 0 -.37rem;background:var(--accent)
}

/* page de travail du logo : les quatre déclinaisons côte à côte */
.palette-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line)
}
.pcard{
  background:var(--paper);padding:clamp(1.1rem,2.2vw,1.6rem);
  display:flex;flex-direction:column;align-items:flex-start
}
.pcard .mk{max-width:100%}
/* le logo des déclinaisons est calé sur la largeur d'une carte, pas sur celle de l'écran :
   « speciale.io » ne se coupe pas, une taille liée au viewport déborderait de la grille */
.pcard .mk--lg{font-size:clamp(1.5rem,2.6vw,2.3rem)}
.pcard .mk-bloc{margin:0}
/* le logo descend par paliers : à 1,84 rem il occupe 154 px, et le menu se replie à 900 px */
@media(max-width:1100px){
  .mk--md{font-size:1.67rem}
}
@media(max-width:900px){
  .mk--md{font-size:1.55rem}
}
@media(max-width:640px){
  .mk--md{font-size:1.44rem}
  .mk-bloc__sub{font-size:.58rem;letter-spacing:.13em}
}
/* ---------- 4. Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;justify-content:center;
  font-family:var(--sans);font-size:.94rem;font-weight:620;letter-spacing:-0.01em;
  padding:.82rem 1.25rem;border:1px solid var(--ink);border-radius:var(--radius);
  background:var(--ink);color:var(--paper);cursor:pointer;
  transition:transform .12s ease,background .15s ease,color .15s ease;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--ink)}
.btn--acid{background:var(--acid);color:var(--acid-ink);border-color:color-mix(in srgb,var(--ink) 25%,var(--acid))}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--paper-2)}
/* Verrouillage des états. Les navigateurs classent :link et :visited avant :hover et :focus ;
   on remet donc chaque couleur en fin de feuille, sur tous les états, pour qu'un texte gris
   ne puisse jamais se retrouver sur un fond terracotta ou encre. */
.btn--acid { background:var(--acid); color:var(--acid-ink) }
.btn--acid:hover, .btn--acid:focus, .btn--acid:focus-visible, .btn--acid:active { color:var(--acid-ink) }
.btn--ghost, .btn--ghost:hover, .btn--ghost:focus, .btn--ghost:focus-visible, .btn--ghost:active { color:var(--ink) }
.btn--lg{font-size:1.05rem;padding:1.05rem 1.6rem}
.btn--full{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn small{font-weight:420;opacity:.75}

/* ---------- 5. Grammaire de section ---------- */
section{padding-block:var(--sp)}
.rule{border-top:1px solid var(--line-strong)}
.tag{
  font-family:var(--mono);font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.11em;
  color:var(--ink-soft);display:flex;align-items:center;gap:.6rem;margin-bottom:1.4rem
}
.tag b{color:var(--ink);font-weight:700}
.lead{font-size:clamp(1.05rem,1.5vw,1.28rem);color:var(--ink-soft);max-width:60ch;margin-top:1.1rem}
.lead strong{color:var(--ink);font-weight:600}
.muted{color:var(--ink-soft)}
.small{font-size:.86rem}
.head{display:grid;grid-template-columns:1fr;gap:.4rem}

/* ---------- 6. Hero ---------- */
.hero{padding-block:clamp(2.2rem,5vw,4.2rem) var(--sp);position:relative;overflow:hidden}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:clamp(1.5rem,4vw,3.4rem);align-items:end}
.hero h1 span{display:block}
.hero h1 .u{background:linear-gradient(transparent 60%,var(--accent) 60%)}
.hero__sub{margin-top:1.6rem;font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:56ch;color:var(--ink-soft)}
/* Attribution sous le titre : le site cite une formule qui n'est pas de lui, il le dit.
   Discrète, mais lisible — c'est une information, pas une mention légale enterrée. */
.hero__source{margin-top:1rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.05em;color:var(--ink-soft);max-width:56ch}
.hero__source strong{color:var(--ink);font-weight:600}
.cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}
.cta__note{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.11em;color:var(--ink-soft);margin-top:1.1rem}
.hero__side{border-left:1px solid var(--line-strong);padding-left:clamp(1rem,2vw,1.8rem)}
.hero__side dl{margin:0;display:grid;gap:1.15rem}
.hero__side dt{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-soft)}
.hero__side dd{margin:.25rem 0 0;font-size:.98rem}

/* Le pictogramme « serveur + IA locale » de la page IA locale. C'est un dessin, pas une
   photographie : les mêmes encres que le reste du site, et le bloc jaune décalé derrière la
   machine — le procédé du « ia » du logo. Un serveur, pas un écran : baies, module, voyants,
   pieds. Aucun dégradé, aucune ombre floue (l'ombre est un aplat décalé, comme les boutons),
   aucune couleur en dur dans le SVG. */
.picto-pc{margin:0}
.picto-pc svg{display:block;width:100%;max-width:300px;height:auto;margin-inline:auto}
.picto-pc__ombre{fill:var(--accent)}
.picto-pc__cadre{fill:var(--ink)}
.picto-pc__panneau{fill:var(--paper)}
.picto-pc__baie{fill:none;stroke:var(--ink-soft);stroke-width:5}
.picto-pc__prise{fill:var(--ink-soft)}
.picto-pc__bouton{fill:var(--acid)}
.picto-pc__grille{fill:none;stroke:var(--ink-soft);stroke-width:5}
.picto-pc__broche{fill:none;stroke:var(--ink);stroke-width:3}
.picto-pc__puce{fill:var(--acid)}
.picto-pc__coeur{fill:var(--accent)}
.picto-pc__patte{fill:var(--ink)}
.picto-pc__legende{margin-top:1.1rem;font-size:.95rem;color:var(--ink-soft)}
.picto-pc__legende strong{color:var(--ink)}
@media(max-width:900px){
  .hero__grid{grid-template-columns:1fr;align-items:start}
  .hero__side{border-left:0;border-top:1px solid var(--line-strong);padding-left:0;padding-top:1.4rem}
  .hero h1{font-size:clamp(2.2rem,8.4vw,3.2rem)}
}
/* téléphone : hero resserré, titres sans coupure forcée, CTA pleine largeur */
@media(max-width:640px){
  .hero{padding-block:1.2rem 2.2rem}
  .hero h1{font-size:clamp(2rem,8.6vw,2.6rem);line-height:1.06}
  .hero h1 br{display:none}
  .hero__sub{font-size:1.02rem;margin-top:1.1rem}
  .cta{gap:.5rem;margin-top:1.5rem}
  .cta .btn{width:100%}
  .cta__note{font-size:.68rem;letter-spacing:.09em}
  .hero__side dl{gap:.9rem}
  section{padding-block:clamp(2.4rem,9vw,3.4rem)}
  h2{font-size:clamp(1.6rem,6.6vw,2.1rem)}
  h2 br{display:none}
  .lead{font-size:1.02rem}
  .fig__n{font-size:clamp(2rem,9vw,2.6rem)}
  .card{padding:1.15rem}
  .case__t{font-size:1.4rem}
  .result__body{padding:1.1rem;gap:1.2rem}
  .result__score{gap:.8rem}
  .btn--lg{padding:.85rem 1.1rem;font-size:.98rem}
  .sticky-cta{padding:.5rem .8rem calc(.5rem + env(safe-area-inset-bottom))}
  .sticky-cta .btn{padding:.7rem .8rem;font-size:.92rem}
}

/* ---------- 7. Chiffres (preuves) ---------- */
.figs{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line-strong)}
.fig{padding:clamp(1.3rem,3vw,2.2rem);border-right:1px solid var(--line-strong);display:flex;flex-direction:column;gap:.5rem;min-height:11rem;justify-content:space-between}
.fig:last-child{border-right:0}
.fig__n{font-family:var(--head);font-weight:800;font-size:clamp(2.2rem,5vw,3.5rem);line-height:1;letter-spacing:-0.035em;font-variant-numeric:tabular-nums}
.fig__n .arr{color:var(--orange);font-style:normal}
.fig__t{font-size:.95rem;font-weight:560}
.fig__s{font-family:var(--mono);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-soft)}
.fig:hover{background:var(--paper-2)}
@media(max-width:760px){
  .figs{grid-template-columns:1fr}
  .fig{border-right:0;border-bottom:1px solid var(--line-strong);min-height:0;gap:.35rem}
  .fig:last-child{border-bottom:0}
}

/* ---------- 9. Cartes services ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-strong);border:1px solid var(--line-strong);margin-top:2.6rem}
.card{background:var(--paper);padding:clamp(1.4rem,2.5vw,2.1rem);display:flex;flex-direction:column;gap:1rem}
.card__k{font-family:var(--mono);font-weight:600;font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft)}
.card h3{font-size:clamp(1.5rem,2.6vw,2.05rem)}
.card__p{color:var(--ink-soft);font-size:.98rem}
.card ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
/* Certaines listes empruntent la classe .card pour hériter du tiret, puis la neutralisent
   (border:0;padding:0;background:transparent) : elles ne sont donc pas concernées par
   « .card ul » et gardaient le marqueur du navigateur, d'où deux puces. On le retire ici. */
.card{list-style:none}
.card li{position:relative;padding-left:1.15rem;font-size:.93rem}
.card li::before{content:"";position:absolute;left:0;top:.55em;width:.5rem;height:1px;background:var(--ink)}
.card .btn{margin-top:auto;align-self:flex-start}
.card:hover{background:color-mix(in srgb,var(--paper) 55%,#fff)}
@media(max-width:900px){.cards{grid-template-columns:1fr}}

/* ---------- 10. Cas d'usage ---------- */
.case{border-top:1px solid var(--line-strong);padding-block:clamp(2rem,4vw,3rem)}
/* Les numéros de cas (01, 02, …) ont été retirés : la grille qui leur réservait une colonne de
   3,2 rem est supprimée avec eux, et le titre part de la marge. Une colonne vide se lit comme
   un défaut de calage. */
.case__t{font-size:clamp(1.6rem,3.4vw,2.4rem)}
.case__q{margin-top:.6rem;color:var(--ink-soft);font-size:1.02rem;max-width:58ch}
.case__b{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:1.6rem}
.case__col{background:var(--paper);padding:clamp(1rem,2vw,1.5rem)}
.case__col h4{margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem}
.case__col h4 i{font-style:normal;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;padding:.15rem .4rem;border:1px solid var(--line-strong);color:var(--ink-soft)}
.case__col--after h4 i{background:var(--acid);color:var(--ink);border-color:var(--ink)}
.case__col p{font-size:.95rem;color:var(--ink-soft)}
.case__col p+p{margin-top:.6rem}
.case__gain{margin-top:1.1rem;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.pill{font-family:var(--mono);font-weight:600;font-size:.73rem;letter-spacing:.06em;border:1px solid var(--line-strong);border-radius:100px;padding:.32rem .7rem;background:var(--paper)}
.pill--acid{background:var(--acid)}
.pill--soft{border-color:var(--line);color:var(--ink-soft)}
.pill--ex{border-style:dashed;color:var(--ink-soft)}
@media(max-width:760px){
  .case__b{grid-template-columns:1fr}
}
.filters{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.6rem}
.filters button{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;padding:.45rem .75rem;border:1px solid var(--line);background:transparent;border-radius:100px;cursor:pointer;color:var(--ink-soft)}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.is-hidden{display:none !important}
.cases__count{font-family:var(--mono);font-size:.72rem;color:var(--ink-soft);margin-top:1.2rem}

/* ---------- 13. Bandeau audit ---------- */
.audit-band{background:var(--ink);color:var(--paper);padding-block:var(--sp)}
.audit-band h2{color:var(--paper)}
.audit-band .lead{color:color-mix(in srgb,var(--paper) 62%,var(--ink))}
.audit-band .lead strong{color:var(--paper)}
.audit-band .tag{color:color-mix(in srgb,var(--paper) 48%,var(--ink))}
.audit-band .tag b{color:var(--paper)}
.audit-band .btn{background:var(--acid);color:var(--ink);border-color:var(--acid)}
.audit-band .btn:hover{box-shadow:3px 3px 0 var(--acid)}
.audit-band .btn--ghost{background:transparent;color:var(--paper);border-color:color-mix(in srgb,var(--paper) 28%,var(--ink))}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:color-mix(in srgb,var(--paper) 18%,var(--ink));border:1px solid color-mix(in srgb,var(--paper) 18%,var(--ink));margin-top:2.4rem}
.step{background:var(--ink);padding:1.4rem}
.step b{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;color:var(--acid);text-transform:uppercase}
.step h4{margin:.6rem 0 .4rem;color:var(--paper)}
.step p{color:color-mix(in srgb,var(--paper) 62%,var(--ink));font-size:.92rem}
@media(max-width:760px){.steps{grid-template-columns:1fr}}

/* ---------- 14. Formulaires / quiz ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.1rem;margin-top:2rem}
/* Le formulaire de demande vit dans une colonne du résultat : une seule colonne, sinon les
   champs seraient écrasés. */
.result__body .form{grid-template-columns:1fr;margin-top:1.4rem}
/* Le formulaire arrive après la liste : un filet et une amorce le posent comme l'étape
   suivante, sans cadre lourd qui concurrencerait le résultat. */
.form__tete{grid-column:1/-1;border-top:1px solid var(--line-strong);padding-top:1rem;margin:0}
.form__tete b{display:block;font-family:var(--head);font-weight:700;font-size:1.08rem;letter-spacing:-0.02em}
.form__tete span{display:block;color:var(--ink-soft);font-size:.92rem;margin-top:.25rem;max-width:46ch}
.field{display:flex;flex-direction:column;gap:.35rem}
.field--full{grid-column:1/-1}
.field label{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft);transition:color .12s}
.field:focus-within label{color:var(--ink)}
/* Ce que le visiteur tape s'écrit dans la police des titres, en graisse forte et serrée :
   les champs font partie du discours du site, pas d'un formulaire administratif rapporté. */
.field input,.field textarea,.field select{
  font-family:var(--head);font-weight:600;font-size:1.06rem;letter-spacing:-0.015em;line-height:1.35;
  color:var(--ink);padding:.8rem .9rem;background:#fff;
  border:1px solid var(--line-strong);border-radius:var(--radius);
  transition:border-color .12s,box-shadow .12s
}
.field input::placeholder,.field textarea::placeholder{
  color:color-mix(in srgb,var(--ink-soft) 74%,#fff);font-weight:500;letter-spacing:0
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:2px solid var(--acid);outline-offset:2px;border-color:var(--ink);
  box-shadow:3px 3px 0 color-mix(in srgb,var(--ink) 14%,transparent)
}
.req{color:var(--acid)}
/* Retour d'envoi : une seule classe, deux états, plutôt qu'un style posé par le script. */
.formmsg{grid-column:1/-1;margin:0;padding:.85rem 1rem;border:1px solid var(--line-strong);font-size:.94rem;font-weight:500;border-radius:var(--radius)}
.formmsg--ok{background:var(--accent);color:var(--ink)}
.formmsg--ko{background:color-mix(in srgb,var(--acid) 14%,#fff);border-color:var(--acid)}
@media(max-width:640px){.form{grid-template-columns:1fr}}

.result{border:1px solid var(--line-strong);background:color-mix(in srgb,var(--paper) 45%,#fff);margin-top:2.4rem}
.result__top{padding:clamp(1.3rem,3vw,2.2rem);border-bottom:1px solid var(--line-strong)}
.result__score{display:flex;gap:1.2rem;align-items:baseline;flex-wrap:wrap}
.result__score b{font-family:var(--head);font-weight:800;font-size:clamp(2.4rem,6.4vw,3.9rem);line-height:1;font-variant-numeric:tabular-nums}
.result__body{padding:clamp(1.3rem,3vw,2.2rem);display:grid;gap:1.6rem}
.result ul{margin:0;padding-left:1.1rem;display:grid;gap:.35rem}
.result li{font-size:.96rem}
.rlist{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.rlist > div{background:color-mix(in srgb,var(--paper) 45%,#fff);padding:1rem}
.rlist b{display:block;font-size:1rem;margin-bottom:.2rem}
.rlist span{color:var(--ink-soft);font-size:.92rem}
/* L'exemple de tâche du listing « Usage métier de l'IA » : sur sa propre ligne, pour qu'il se
   lise comme une illustration et non comme la suite du compteur. */
.rlist__ex{display:block;margin-top:.4rem;font-size:.86rem;color:var(--ink-soft)}

/* ---------- 14b. Audit approfondi : cartes à balayer ---------- */
.swipe{max-width:620px;margin-inline:auto}
.swipe__top{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-family:var(--mono);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft)}
.swipe__bar{height:6px;background:var(--paper-2);border:1px solid var(--line);margin:.8rem 0 1.6rem}
.swipe__fill{height:100%;width:0;background:var(--acid);transition:width .3s ease}
.deck{position:relative;height:clamp(292px,44vh,400px)}
.card-sw{
  position:absolute;inset:0;background:#fff;border:1px solid var(--line-strong);border-radius:4px;
  padding:clamp(1.1rem,3vw,2rem);display:flex;flex-direction:column;justify-content:space-between;gap:.9rem;
  box-shadow:6px 6px 0 color-mix(in srgb,var(--ink) 12%,transparent);
  cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
  transition:transform .25s ease,opacity .25s ease
}
.card-sw > div:first-child{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;overflow-y:auto}
.card-sw--next{transform:translateY(-12px) scale(.97);opacity:.5;pointer-events:none;box-shadow:none}
.card-sw--far{transform:translateY(-22px) scale(.94);opacity:.25;pointer-events:none;box-shadow:none}
.card-sw--dragging{transition:none;cursor:grabbing}
.card-sw--out{opacity:0}
.card-sw__theme{font-family:var(--mono);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-soft)}
.card-sw__q{font-family:var(--head);font-weight:750;font-size:clamp(1.4rem,3.4vw,2.05rem);line-height:1.15;letter-spacing:-0.02em;margin:.7rem 0}
/* le temps de réponse : l'argument qui parle le plus vite à un dirigeant */
.card-sw__duree{display:inline-block;align-self:flex-start;font-family:var(--mono);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;background:var(--accent);color:var(--ink);padding:.25rem .55rem;margin-bottom:.8rem}
.card-sw__hint{font-size:.92rem;color:var(--ink-soft)}
/* la justification : ce que le projet demande et qu'une conversation ne permet pas.
   L'étiquette qui introduisait cette phrase a été retirée : la règle qui la stylait aussi. */
.card-sw__why{font-size:.86rem;line-height:1.45;color:var(--ink-soft);border-left:2px solid var(--acid);padding-left:.7rem;margin-top:.8rem}
.card-sw__note{display:inline-block;font-family:var(--mono);font-size:.64rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;border:1px solid var(--line-strong);padding:.22rem .5rem;margin-top:.7rem;color:var(--ink)}
.card-sw__who{display:flex;align-items:center;justify-content:space-between;gap:.6rem;border-top:1px solid var(--line);padding-top:.8rem}
.card-sw__who span{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-soft)}
.card-sw__who span:last-child{text-align:right}
.card-sw__stamp{
  position:absolute;top:.9rem;font-family:var(--head);font-weight:800;font-size:1.05rem;letter-spacing:.05em;
  text-transform:uppercase;padding:.3rem .6rem;border:2px solid currentColor;border-radius:3px;opacity:0;transition:opacity .12s ease
}
.card-sw__stamp--oui{right:.9rem;color:var(--acid);transform:rotate(8deg)}
.card-sw__stamp--non{left:.9rem;color:var(--ink-soft);transform:rotate(-8deg)}
.card-sw__stamp--nsp{bottom:.9rem;left:50%;transform:translateX(-50%);color:var(--ink);font-size:.9rem;letter-spacing:.04em}
.deck__actions{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:1.3rem}
.deck__actions--deux{grid-template-columns:1fr 1.5fr}
.deck__actions .btn{padding-inline:.6rem;font-size:.9rem;min-width:0}
.swipe__nav{text-align:center;margin-top:.6rem}
.swipe__nav .btn{font-size:.78rem;padding:.4rem .7rem;color:var(--ink-soft)}
.lbl-court{display:none}
.swipe__key{text-align:center;font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);margin-top:.9rem}
.swipe__reponses{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.3rem;text-align:left}
.swipe__reponses li{display:flex;gap:.6rem;align-items:baseline;font-size:.92rem;border-bottom:1px solid var(--line);padding:.45rem 0}
.swipe__reponses b{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);min-width:4.2rem}
.swipe__reponses i{font-style:normal;font-weight:700;color:var(--acid)}
.swipe__top{flex-wrap:wrap;gap:.4rem 1rem}

/* --- pourcentage d'impact : le seul chiffre mis en avant, et il vient des réponses --- */
.impact{font-family:var(--head);font-weight:800;font-size:clamp(2.4rem,7vw,3.6rem);line-height:1;letter-spacing:-0.03em;color:var(--ink)}
.impact__bar{height:10px;background:var(--paper-2);border:1px solid var(--line-strong);margin:.9rem 0 .7rem}
.impact__fill{height:100%;width:0;background:var(--acid);transition:width .5s ease}
.levier{display:flex;gap:.7rem;align-items:flex-start}
.levier__n{font-family:var(--mono);font-size:.7rem;font-weight:700;color:var(--acid);border:1px solid var(--acid);border-radius:100px;min-width:1.6rem;height:1.6rem;display:flex;align-items:center;justify-content:center;flex:0 0 auto;margin-top:.15rem}

/* --- mobile : le deck tient dans l'écran, les trois réponses sur une seule ligne --- */
@media(max-width:640px){
  .deck{height:clamp(276px,42vh,380px)}
  .card-sw{padding:1.05rem;gap:.7rem;border-radius:3px}
  .card-sw__theme{font-size:.64rem;letter-spacing:.1em}
  .card-sw__q{font-size:clamp(1.25rem,5.6vw,1.6rem);margin:.5rem 0 .4rem;line-height:1.18}
  .card-sw__hint{font-size:.84rem;line-height:1.35}
  .card-sw__duree{font-size:.6rem;padding:.2rem .45rem;margin-bottom:.6rem}
  .card-sw__why{font-size:.78rem;line-height:1.35;padding-left:.55rem;margin-top:.6rem}
  .card-sw__note{font-size:.58rem;padding:.18rem .4rem;margin-top:.5rem}
  .card-sw__who{padding-top:.65rem}
  .card-sw__who span{font-size:.6rem;letter-spacing:.07em}
  .card-sw__stamp{font-size:.88rem;padding:.24rem .5rem;top:.7rem}
  .card-sw__stamp--oui{right:.7rem}
  .card-sw__stamp--non{left:.7rem}
  .card-sw__stamp--nsp{bottom:.7rem;font-size:.78rem}
  .deck__actions{gap:.4rem;margin-top:1rem}
  .deck__actions .btn{padding:.72rem .35rem;font-size:.8rem;letter-spacing:-0.015em;gap:.3rem}
  .deck__actions--deux .btn{font-size:.86rem}
  .lbl-long{display:none}
  .lbl-court{display:inline}
  .swipe__key{margin-top:.7rem;font-size:.62rem;letter-spacing:.06em}
  .swipe__top{font-size:.66rem}
  .swipe__bar{margin:.6rem 0 1.1rem}
}
@media(max-width:400px){
  .deck{height:clamp(266px,40vh,340px)}
  .deck__actions .btn{padding:.68rem .25rem;font-size:.74rem}
  .card-sw__q{font-size:1.2rem}
}
@media(prefers-reduced-motion:reduce){ .card-sw{transition:none} }

/* ---------- 14c. Arbre de décision (page Services) ----------
   Nœud de question, autocomplétion, branches, familles de tâches, cartes à cocher,
   et le panneau d'analyse qui donne à voir la machine au travail. */
.arbre{max-width:900px}
.arbre__noeud{border:1px solid var(--line-strong);background:#fff;padding:clamp(1.2rem,3vw,2rem)}
.arbre__noeud--actif{border-left:4px solid var(--acid)}
.arbre__q{font-family:var(--head);font-weight:750;font-size:clamp(1.25rem,2.6vw,1.7rem);letter-spacing:-0.02em;margin:0 0 .4rem}
.arbre__aide{color:var(--ink-soft);font-size:.95rem;margin:0 0 1.2rem}
.arbre__form{display:grid;grid-template-columns:1fr auto;gap:.7rem;align-items:end}
.arbre__form .field{margin:0}
.arbre__barre{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:1rem 0 1.1rem}

/* autocomplétion : liste posée sous le champ, parcourable au clavier */
.arbre__champ{position:relative}
.arbre__liste{
  position:absolute;left:0;right:0;top:calc(100% + .35rem);z-index:30;
  background:#fff;border:1px solid var(--line-strong);box-shadow:6px 6px 0 color-mix(in srgb,var(--ink) 12%,transparent);
  max-height:19rem;overflow-y:auto
}
.arbre__liste-tete{
  font-family:var(--mono);font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.11em;
  color:var(--ink-soft);padding:.6rem .8rem .35rem;margin:0
}
.arbre__liste-vide{margin:0;padding:.7rem .8rem;font-size:.85rem;color:var(--ink-soft);border-left:3px solid var(--acid)}
.arbre__option{display:flex;gap:.7rem;align-items:baseline;padding:.55rem .8rem;cursor:pointer;border-top:1px solid var(--line)}
.arbre__option:first-child{border-top:0}
.arbre__option--active,.arbre__option:hover{background:var(--paper-2)}
.arbre__option--active{box-shadow:inset 3px 0 0 var(--acid)}
.arbre__option-code{font-family:var(--mono);font-size:.72rem;font-weight:600;color:var(--ink-soft);flex:0 0 auto;min-width:3.9rem}
.arbre__option-nom{font-size:.95rem}

/* le groupe de tâches : la liste et son en-tête, sans blanc résiduel.
   `align-content:start` est important : sans lui, si un parent donne une hauteur définie à
   la grille, l'espace libre se répartit entre les rangées et se retrouve sous la dernière
   carte, à l'intérieur du groupe — bordure de gauche et fond compris. C'est ce qui se voyait
   sous la liste. `:empty` évite qu'un conteneur vide réserve de la place quand l'analyse n'a
   rien rendu. */
#liste-taches:empty{display:none}
.arbre__famille{margin-top:1.1rem;padding-left:1.1rem;border-left:2px solid var(--line)}
.arbre__famille-tete{display:flex;align-items:baseline;gap:.8rem;margin-bottom:.7rem;position:relative}
.arbre__branche{position:absolute;left:-1.1rem;top:.7em;width:.9rem;height:2px;background:var(--line)}
.arbre__famille-tete h3{font-size:clamp(1.05rem,2vw,1.3rem);margin:0}
.arbre__grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.75rem;align-content:start}
/* la barre d'actions suit la liste de près : le vide sous les cartes ne doit pas s'ajouter
   à la marge des boutons */
#taches .cta{margin-top:1.2rem}

/* le groupe venu de l'analyse : un peu à part, sans crier */
.arbre__famille--ia{border-left-color:var(--acid);background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 9%,transparent),transparent 62%)}
.arbre__famille--ia .arbre__branche{background:var(--acid);width:1.4rem}
.arbre__famille--ia .arbre__famille-tete h3{color:var(--ink)}

.arbre__carte{display:flex;gap:.7rem;align-items:flex-start;border:1px solid var(--line);background:#fff;padding:1rem;cursor:pointer;transition:border-color .12s,background .12s,transform .12s}
.arbre__carte:hover{border-color:var(--ink)}
.arbre__carte:focus-within{border-color:var(--ink);box-shadow:3px 3px 0 color-mix(in srgb,var(--ink) 14%,transparent)}
.arbre__carte--choisie{border-color:var(--acid);background:color-mix(in srgb,var(--accent) 18%,#fff)}
.arbre__carte input{width:1.15rem;height:1.15rem;margin:.2rem 0 0;accent-color:var(--acid);flex:0 0 auto}
.arbre__carte-corps{display:block}
.arbre__carte b{display:block;font-weight:650;font-size:.98rem;line-height:1.3}
/* Les pages « IA par secteur » montrent les mêmes cartes, mais en lecture seule : il n'y a
   rien à cocher. Sans cette variante, la carte garderait le curseur main et la bordure qui
   réagit au survol — une promesse de clic que rien ne tient. */
.arbre__carte--fixe{cursor:default}
.arbre__carte--fixe:hover{border-color:var(--line)}
.arbre__detail{display:block;color:var(--ink-soft);font-size:.88rem;margin-top:.25rem}
/* Ce qui manque à une conversation : la phrase reste, l'étiquette « Pourquoi pas dans un chat »
   a été retirée sur demande — elle se répétait sur chaque carte. La règle qui stylait cette
   étiquette est supprimée avec elle : aucune règle morte ne reste. */
.arbre__pourquoi{display:block;font-size:.8rem;color:var(--ink-soft);margin-top:.5rem;padding-left:.6rem;border-left:2px solid var(--acid)}

/* Arrivée des cartes : chacune se pose après la précédente, comme si elle était écrite.
   Le décalage est posé en style inline par le script (130 ms par carte, plafonné à 1,7 s).
   L'animation part d'un peu plus bas, légèrement plus petite et floue : l'œil voit la carte
   se construire plutôt que d'apparaître d'un coup. Le flou est faible et bref — au-delà, le
   texte devient sale au lieu d'être vivant. */
@keyframes arbre-pose{
  from{opacity:0;transform:translateY(16px) scale(.97);filter:blur(3px)}
  60%{filter:blur(0)}
  to{opacity:1;transform:none;filter:blur(0)}
}
.arbre__carte--pose{animation:arbre-pose .58s cubic-bezier(.2,.7,.25,1) both}

/* squelettes : la zone se remplit pendant que le serveur travaille */
.arbre__squelette{display:flex;gap:.7rem;align-items:flex-start;border:1px solid var(--line);background:#fff;padding:1rem}
.arbre__squelette span{display:block;height:.72rem;border-radius:2px;background:var(--paper-2);position:relative;overflow:hidden}
.arbre__squelette span::after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,#fff 85%,var(--accent)),transparent);
  animation:arbre-balayage 1.25s ease-in-out infinite
}
@keyframes arbre-balayage{to{transform:translateX(100%)}}
.arbre__squelette-l{flex:0 0 auto;width:1.15rem;height:1.15rem;margin-top:.2rem}
.arbre__squelette-c{flex:1;display:grid;gap:.45rem}
.arbre__squelette .arbre__squelette-1{width:78%}
.arbre__squelette .arbre__squelette-2{width:52%}

/* ---------- 14d. Panneau d'analyse (démonstration du hero + analyse en direct) ----------
   Même objet aux deux endroits : dans le hero il tourne seul, dans le parcours il suit
   l'appel au serveur. Le visiteur voit donc la même machine avant et pendant. */
.ia-panneau{
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  box-shadow:10px 10px 0 color-mix(in srgb,var(--ink) 16%,transparent);
  font-family:var(--mono);overflow:hidden
}
.ia-panneau--demo{position:relative}
.ia-panneau__barre{
  display:flex;align-items:center;gap:.6rem;
  padding:.55rem .8rem;border-bottom:1px solid color-mix(in srgb,var(--paper) 22%,var(--ink));
  background:color-mix(in srgb,var(--paper) 7%,var(--ink))
}
.ia-panneau__points{display:flex;gap:.26rem}
.ia-panneau__points i{width:.5rem;height:.5rem;background:color-mix(in srgb,var(--paper) 32%,var(--ink));display:block}
.ia-panneau__points i:first-child{background:var(--acid)}
.ia-panneau__titre{flex:1;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.11em;color:color-mix(in srgb,var(--paper) 82%,var(--ink))}
.ia-panneau__badge{
  font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  padding:.18rem .42rem;border:1px solid color-mix(in srgb,var(--paper) 34%,var(--ink));
  color:color-mix(in srgb,var(--paper) 72%,var(--ink));white-space:nowrap
}
.ia-panneau__corps{padding:clamp(.9rem,2.2vw,1.3rem)}

/* Curseur qui clignote : il marque l'endroit où la machine écrit. Il reste ensuite, comme
   dans un terminal — c'est lui qui dit que la machine est vivante, même entre deux étapes. */
.ia-curseur{
  display:inline-block;width:.46em;height:1em;margin-left:.18em;
  background:var(--accent);vertical-align:-.12em;
  animation:ia-clignote 1.05s steps(2,start) infinite
}
@keyframes ia-clignote{50%{opacity:0}}

/* ---------- 14e. Le flux d'automatisation (démonstration du hero) ----------
   Les étapes d'une chaîne arrivent par le bas et remontent hors du cadre. Le conteneur a une
   hauteur fixe et aligne son contenu en bas : quand une étape de plus arrive, les anciennes
   sortent d'elles-mêmes par le haut. Aucune mesure, aucun calcul de position — c'est le
   navigateur qui fait défiler. Le masque adoucit la sortie haute, qui serait sinon coupée net. */
.ia-flux{
  display:flex;flex-direction:column;justify-content:flex-end;gap:.3rem;
  height:clamp(158px,23vh,196px);overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%);
  mask-image:linear-gradient(to bottom,transparent,#000 22%)
}
.ia-flux__etape{
  display:flex;gap:.55rem;align-items:baseline;font-size:.82rem;
  color:color-mix(in srgb,var(--paper) 62%,var(--ink));
  animation:flux-entree .42s cubic-bezier(.2,.7,.25,1) both
}
.ia-flux__etape:last-child{color:var(--paper)}
.ia-flux__puce{
  flex:0 0 auto;width:.46rem;height:.46rem;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--paper) 42%,var(--ink));
  transform:translateY(-.05em)
}
.ia-flux__etape:last-child .ia-flux__puce{background:var(--accent);border-color:var(--accent)}
.ia-flux__etape.est-faite{color:color-mix(in srgb,var(--paper) 78%,var(--ink))}
.ia-flux__etape.est-faite .ia-flux__puce{background:color-mix(in srgb,var(--accent) 55%,var(--ink));border-color:transparent}
.ia-flux__txt{min-width:0}
@keyframes flux-entree{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media(max-width:640px){
  .arbre__form{grid-template-columns:1fr}
  .arbre__form .btn{width:100%}
  .arbre__famille{padding-left:.8rem}
  .arbre__branche{left:-.8rem;width:.6rem}
  .arbre__grille{grid-template-columns:1fr}
  .ia-panneau{box-shadow:6px 6px 0 color-mix(in srgb,var(--ink) 16%,transparent)}
  .ia-flux{height:clamp(140px,24vh,172px)}
  .ia-flux__etape{font-size:.76rem}
}
/* mouvement réduit : plus rien ne bouge, tout est visible immédiatement */
@media(prefers-reduced-motion:reduce){
  .arbre__carte--pose{animation:none}
  .arbre__squelette span::after{animation:none}
  .ia-flux__etape{animation:none}
  .ia-curseur{animation:none}
}

/* ---------- 15. Footer ---------- */
.foot{border-top:1px solid var(--line-strong);padding-block:clamp(2.4rem,5vw,3.6rem) 1.6rem}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
.foot h4{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-soft);margin-bottom:.7rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.foot a{font-size:.94rem;color:var(--ink-soft)}
.foot a:hover{color:var(--ink);text-decoration:underline}
.foot__bottom{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;border-top:1px solid var(--line);margin-top:2.4rem;padding-top:1.2rem;font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-soft)}
@media(max-width:760px){.foot__grid{grid-template-columns:1fr;gap:1.6rem}}

/* ---------- 16. Mobile CTA collant ---------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;gap:.5rem;
  padding:.6rem var(--pad) calc(.6rem + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--paper) 94%,transparent);border-top:1px solid var(--line-strong);backdrop-filter:blur(8px)
}
.sticky-cta .btn{flex:1}
@media(max-width:860px){.sticky-cta{display:flex}body{padding-bottom:74px}}

/* ---------- 17. Révélation douce ---------- */
.rv{opacity:0;transform:translateY(14px)}
.rv.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}
::selection{background:var(--accent);color:var(--ink)}

/* ---------- 18. Utilitaire de grille éditoriale ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,4vw,3rem)}
.two--wide{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
@media(max-width:860px){.two,.two--wide{grid-template-columns:1fr}}
.mt{margin-top:2rem}.mt-s{margin-top:1rem}

/* ---------- 19. Texte sur l'aplat d'accent ----------
   RÈGLE À CONNAÎTRE : tout élément qui passe sur l'aplat terracotta doit poser lui-même la
   couleur de son texte. Le gris secondaire y tombe à 1,34:1 — illisible — et une couleur
   héritée ne se voit pas à la relecture. Les jetons prévus sont `--on-acid` (4,55:1) et
   `--acid-ink` (3,66:1, sous le seuil AA) : les ratios se vérifient avec
   `node outils/contraste.mjs`.
   Une règle protégeait ici la liste des problèmes et les réponses du questionnaire ; les deux
   composants ont disparu avec leurs pages, et la règle est partie avec eux.
   `node outils/classes-mortes.mjs` signalerait son retour. */
/* champs de saisie : au clavier, le contour passe en accent — le texte reste en encre */
:is(input:focus-visible, textarea:focus-visible, select:focus-visible) { color:var(--ink) }
:is(.nav a:hover) { color:var(--ink) }

/* filtre actif : fond sombre, texte clair — la règle ci-dessus ne doit pas s'y appliquer */
.filters button:hover { background:var(--paper-2); border-color:var(--ink); color:var(--ink) }
.filters button[aria-pressed="true"],
.filters button[aria-pressed="true"]:hover { background:var(--ink); color:var(--paper); border-color:var(--ink) }

/* ---------- 20. Impression ---------- */
@media print{
  .top,.sticky-cta,.filters{display:none !important}
  body::before{display:none}
  .result{display:block}
}