/* ═══════════════════════════════════════════════════════════════════════
   SCROLER — Page « Intelligence artificielle »
   ───────────────────────────────────────────────────────────────────────
   Suppose base.css puis page.css chargés avant.

   Même pièce que les autres pages : sol nocturne, lumière orange, verre.
   Le vocabulaire propre à cette page est celui de l'atelier : le nœud,
   le fil, le flux, l'établi. L'automatisation se voit — des fils qui
   transportent quelque chose entre des boîtes qui font un travail.

   Aucune animation ne porte d'information : le flux est doublé par une
   liste ordonnée d'étapes, lisible sans JavaScript et sans mouvement.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --ia-fil-dir: 90deg;            /* sens des fils : bascule à 180° en colonne */
  --ia-vert: #3CCF8E;             /* le vert ne sert qu'aux états « ça tourne » */
}

/* ═══════════════════════════════════════════════════════════════════════
   1. HERO — la console
   ═══════════════════════════════════════════════════════════════════════ */
.ia-hero {
  position: relative;
  min-height: calc(100svh - 66px);
  display: flex;
  align-items: center;
  padding-block: clamp(52px, 6.5vw, 88px);
  overflow: hidden;
}
.ia-torche {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(520px circle at var(--tx, 50%) var(--ty, 40%),
    rgba(233,78,26,.24) 0%, rgba(233,78,26,.08) 38%, transparent 72%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .6s ease;
}
.ia-hero:hover .ia-torche { opacity: 1; }

/* Trame de fond : une grille d'atelier, très discrète. */
.ia-grille {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(233,78,26,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233,78,26,.055) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 42%, #000 20%, transparent 78%);
          mask-image: radial-gradient(ellipse 80% 65% at 50% 42%, #000 20%, transparent 78%);
}

.ia-hero .scr-wrap { max-width: 1320px; }
.ia-hero__inner { position: relative; z-index: 2; width: 100%; }

.ia-hero h1 {
  margin: 0 0 26px;
  font-size: clamp(26px, 5vw, 72px);
  font-weight: 200;
  line-height: 1.04;
  letter-spacing: -.032em;
  color: var(--scr-on-night);
}
.ia-hero h1 .ia-l { display: block; overflow: hidden; }
.ia-hero h1 .ia-l > span { display: block; }
.js .ia-hero h1 .ia-l > span {
  transform: translateY(108%);
  animation: iaMonte 1.05s var(--scr-ease) forwards;
}
.js .ia-hero h1 .ia-l:nth-child(2) > span { animation-delay: .13s; }
@keyframes iaMonte { to { transform: translateY(0); } }

.ia-hero h1 em {
  font-style: normal;
  color: var(--scr-orange);
  text-shadow: 0 0 38px rgba(233,78,26,.55), 0 0 90px rgba(233,78,26,.25);
}

.js .ia-hero .scr-lede,
.js .ia-hero__actions { opacity: 0; animation: iaApparait .9s ease .45s forwards; }
.js .ia-hero__actions { animation-delay: .58s; }
@keyframes iaApparait { to { opacity: 1; } }

.ia-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.ia-descendre {
  position: absolute;
  left: 50%; bottom: 26px;
  z-index: 2;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  font-family: var(--scr-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  /* .55 = 5,6:1 sur la nuit — meme valeur que communication.css.
     .44 ne donnait que 3,97:1 pour du mono 10 px.                    */
  color: var(--scr-on-night-faint);
  pointer-events: none;
}
.ia-descendre i {
  display: block;
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, transparent, var(--scr-orange));
}
.js .ia-descendre i { animation: iaDesc 2.1s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes iaDesc { 0%,100% { transform: scaleY(.35); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }
@media (max-height: 820px), (max-width: 860px) { .ia-descendre { display: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   2. RELANCES
   ═══════════════════════════════════════════════════════════════════════ */
.ia-relance {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 30px;
  margin-top: clamp(40px, 5vw, 66px);
  padding: 30px 34px;
  border: 1px solid var(--scr-bord);
  border-left: 2px solid var(--scr-orange);
  border-radius: 4px 20px 20px 4px;
  background: var(--scr-verre-1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ia-relance p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--scr-on-night-soft); }
.ia-relance p b { font-weight: 400; color: var(--scr-on-night); }
/* flex-shrink 1 : sur un écran très étroit, le libellé passe à la
   ligne au lieu de déborder du gabarit (1 px suffit à créer un
   défilement horizontal).                                              */
.ia-relance .scr-btn { flex: 0 1 auto; min-width: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   3. CE QUE L'IA CHANGE — quatre rôles
   ═══════════════════════════════════════════════════════════════════════ */
.ia-roles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--scr-bord);
  border-radius: 20px;
  overflow: hidden;
}
@media (min-width: 720px)  { .ia-roles { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1040px) { .ia-roles { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.ia-role {
  position: relative;
  padding: clamp(26px, 2.8vw, 38px);
  background: #1B1512;
  transition: background-color .35s ease;
}
.ia-role:hover { background: #221A15; }
.ia-role h3 { margin: 0 0 10px; font-size: 19px; font-weight: 300; color: var(--scr-on-night); }
.ia-role p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--scr-on-night-soft); }
.ia-role::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--scr-orange);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform .7s var(--scr-ease);
}
.ia-role.is-in::before { transform: scaleY(1); }
.ia-role.is-in:nth-child(2)::before { transition-delay: .1s; }
.ia-role.is-in:nth-child(3)::before { transition-delay: .2s; }
.ia-role.is-in:nth-child(4)::before { transition-delay: .3s; }

/* ═══════════════════════════════════════════════════════════════════════
   4. L'ATELIER — le flux qui tourne
   ───────────────────────────────────────────────────────────────────────
   La chaîne est faite d'éléments HTML, pas d'un SVG : elle se replie donc
   toute seule en colonne sur petit écran, et chaque nœud reste du texte
   sélectionnable. Les fils sont des dégradés répétés dont la position
   s'anime — c'est ce qui donne le sentiment que quelque chose circule,
   pour trois lignes de CSS et zéro JavaScript.

   La liste ordonnée `.ia-etapes` porte la même information en clair :
   c'est elle que lit un lecteur d'écran, la chaîne est décorative.
   ═══════════════════════════════════════════════════════════════════════ */
.ia-scenarios { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(26px, 3vw, 38px); }
.ia-scenario {
  min-height: 44px;
  padding: 11px 20px;
  border: 1px solid var(--scr-bord);
  border-radius: 999px;
  background: transparent;
  color: var(--scr-on-night-soft);
  font-family: var(--scr-mono);
  font-size: 11.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .3s var(--scr-ease), border-color .3s ease, color .3s ease, background-color .3s ease;
}
.ia-scenario:hover { transform: translateY(-2px); border-color: var(--scr-orange); color: var(--scr-on-night); }
.ia-scenario[aria-selected="true"] {
  background: var(--scr-orange-d);
  border-color: var(--scr-orange-d);
  color: #fff;
}

.ia-flux[hidden] { display: none; }
.js .ia-flux.is-swap { animation: iaBascule .5s var(--scr-ease); transform-origin: 0 50%; }
@keyframes iaBascule {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: none; }
}

.ia-etabli {
  position: relative;
  padding: clamp(24px, 3vw, 42px) clamp(18px, 2.6vw, 38px);
  border: 1px solid var(--scr-bord);
  border-radius: 24px;
  background: linear-gradient(170deg, var(--scr-verre-2), rgba(var(--scr-matiere-rgb),.65));
  overflow: hidden;
}
.ia-etabli::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(var(--scr-encre-rgb),.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--scr-encre-rgb),.028) 1px, transparent 1px);
  background-size: 26px 26px;
}
.ia-etabli > * { position: relative; }

.ia-etabli__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  margin-bottom: 26px;
  font-family: var(--scr-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--scr-on-night-faint);
}
.ia-etabli__tete b { color: var(--scr-on-night); font-weight: 500; }
.ia-etabli__tete .ia-vivant { display: inline-flex; align-items: center; gap: 8px; color: var(--ia-vert); }
.ia-etabli__tete .ia-vivant::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}
.js .ia-etabli__tete .ia-vivant::before { animation: iaBattement 1.8s ease-in-out infinite; }
@keyframes iaBattement { 50% { opacity: .25; box-shadow: none; } }

/* ─── La chaîne ───────────────────────────────────────────────────────── */
.ia-chaine {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  gap: 0;
}
@media (max-width: 900px) {
  :root { --ia-fil-dir: 180deg; }
  .ia-chaine { flex-direction: column; }
}

.ia-noeud {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 16px;
  border: 1px solid var(--scr-bord);
  border-radius: 16px;
  background: rgba(var(--scr-matiere-rgb),.72);
  transition: border-color .5s ease, box-shadow .5s ease, transform .5s var(--scr-ease);
}
.ia-noeud:hover {
  border-color: var(--scr-bord-vif);
  transform: translateY(-3px);
  box-shadow: 0 22px 50px -32px rgba(233,78,26,.7);
}
.ia-noeud__type {
  font-family: var(--scr-mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--scr-orange);
}
.ia-noeud__ic {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 1px solid rgba(233,78,26,.4);
  border-radius: 10px;
  color: var(--scr-orange);
}
.ia-noeud__ic svg { width: 17px; height: 17px; }
.ia-noeud h4 {
  margin: 0;
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--scr-on-night);
}
.ia-noeud p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--scr-on-night-mute); }
.ia-noeud p.ia-noeud__outil {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(var(--scr-encre-rgb),.08);
  font-family: var(--scr-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--scr-on-night-faint);
}

/* Le nœud « IA » se distingue : c'est le seul qui décide de quelque chose */
.ia-noeud--ia { border-color: rgba(233,78,26,.45); background: rgba(233,78,26,.06); }
.ia-noeud--ia .ia-noeud__ic { background: rgba(233,78,26,.14); }
/* Sur ce fond teinté d'orange, le vif #E94E1A retombe à 3,9:1 : le
   libellé passe au #FF7A4D déjà présent dans la page (5,7:1).         */
.ia-noeud--ia .ia-noeud__type { color: #FF7A4D; }

/* ─── Le fil ──────────────────────────────────────────────────────────── */
.ia-fil {
  flex: 0 0 auto;
  align-self: center;
  width: 46px; height: 2px;
  margin: 0 -1px;
  background-image: repeating-linear-gradient(var(--ia-fil-dir),
    var(--scr-orange) 0 7px, rgba(233,78,26,.12) 7px 17px);
  background-size: 17px 17px;
}
@media (max-width: 900px) {
  .ia-fil { width: 2px; height: 34px; margin: -1px 0; }
}
.js .ia-fil { animation: iaFlux 1.1s linear infinite; }
@keyframes iaFlux { to { background-position: 17px 17px; } }

/* ─── Les étapes en clair ─────────────────────────────────────────────── */
.ia-etapes {
  margin: clamp(24px, 3vw, 36px) 0 0;
  padding: 0 0 0 22px;
  display: grid;
  gap: 12px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--scr-on-night-soft);
}
.ia-etapes li::marker { color: var(--scr-orange); font-family: var(--scr-mono); font-size: 12px; }
.ia-etapes b { font-weight: 400; color: var(--scr-on-night); }

.ia-gain {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--scr-bord);
  font-family: var(--scr-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--scr-on-night-faint);
}
.ia-gain b { color: var(--scr-orange); font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════════════
   5. LA PILE — les outils, et ce qu'ils valent
   ═══════════════════════════════════════════════════════════════════════ */
.ia-pile {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--scr-bord);
  border: 1px solid var(--scr-bord);
  border-radius: 20px;
  overflow: hidden;
}
@media (min-width: 700px)  { .ia-pile { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1080px) { .ia-pile { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.ia-outil {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 2.6vw, 34px);
  background: #1B1512;
  transition: background-color .35s ease;
}
.ia-outil:hover { background: #221A15; }
.ia-outil__haut { display: flex; align-items: center; gap: 13px; }
.ia-outil__marque {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border: 1px solid rgba(var(--scr-encre-rgb),.18);
  border-radius: 11px;
  color: var(--scr-orange);
}
.ia-outil__marque svg { width: 19px; height: 19px; }
.ia-outil h3 { margin: 0; font-size: 19px; font-weight: 300; color: var(--scr-on-night); }
.ia-outil__role {
  font-family: var(--scr-mono);
  font-size: 9.5px;
  letter-spacing: .1em;      /* .14em faisait passer le role sur deux lignes */
  text-transform: uppercase;
  color: var(--scr-on-night-faint);
}
.ia-outil p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--scr-on-night-soft); }
.ia-outil p.ia-outil__limite {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(var(--scr-encre-rgb),.08);
  font-size: 15px;
  color: var(--scr-on-night-mute);
}
.ia-outil__limite b { font-weight: 400; color: var(--scr-on-night); }

.ia-souverain {
  margin-top: clamp(26px, 3vw, 40px);
  padding: 22px 26px;
  border: 1px solid var(--scr-bord);
  border-left: 2px solid var(--ia-vert);
  border-radius: 4px 18px 18px 4px;
  background: rgba(60,207,142,.05);
  font-size: 16px;
  line-height: 1.62;
  color: var(--scr-on-night-soft);
}
.ia-souverain b { font-weight: 400; color: var(--scr-on-night); }

/* ═══════════════════════════════════════════════════════════════════════
   6. LES MODULES — le catalogue
   ═══════════════════════════════════════════════════════════════════════ */
.ia-modules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .ia-modules { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1040px) { .ia-modules { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.ia-module {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 2.2vw, 30px);
  border: 1px solid var(--scr-bord);
  border-radius: 20px;
  background: linear-gradient(160deg, var(--scr-verre-2), rgba(var(--scr-matiere-rgb),.5));
  overflow: hidden;
  transition: border-color .35s ease, transform .5s var(--scr-ease), box-shadow .5s ease;
}
.ia-module:hover {
  border-color: var(--scr-bord-vif);
  transform: translateY(-4px);
  box-shadow: 0 26px 60px -34px rgba(233,78,26,.6);
}
/* Reflet spéculaire : une lumière holographique suit le pointeur sur la
   carte — --mx/--my sont posées par inclinaison(), aucun écouteur en
   plus. Sans JS ni survol, le reflet n'existe pas.                     */
.ia-module::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s ease;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
    rgba(233,78,26,.16), rgba(255,154,60,.05) 45%, transparent 70%);
  mix-blend-mode: screen;
}
.ia-module:hover::after { opacity: 1; }
.ia-module__num {
  font-family: var(--scr-mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  color: rgba(var(--scr-encre-rgb),.45);
}
.ia-module h3 { margin: 0; font-size: 19px; font-weight: 300; color: var(--scr-on-night); }
.ia-module p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--scr-on-night-soft); }
.ia-module p.ia-module__pour {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(var(--scr-encre-rgb),.08);
  font-family: var(--scr-mono);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--scr-orange);
}

/* ═══════════════════════════════════════════════════════════════════════
   7. LE CALCUL DE TEMPS
   ───────────────────────────────────────────────────────────────────────
   Un outil, pas une promesse : ce sont les chiffres du visiteur, saisis
   par lui, multipliés entre eux. Rien n'est extrapolé, rien n'est
   comparé à une moyenne du marché.
   ═══════════════════════════════════════════════════════════════════════ */
/* Le testeur vit dans le hero, déjà posé sur la dalle de verre : il n'a
   donc aucun cadre à lui. Deux cadres imbriqués feraient exactement la
   boîte-dans-la-boîte qu'on nous a reprochée.

   Il était jusqu'ici en deux colonnes : trois champs bas à gauche, une
   carte de résultat haute de 360 px à droite, et autant de vide sous
   les champs. Il se lit désormais de gauche à droite, comme l'opération
   qu'il fait, puis le bilan et l'action tiennent sur une seule ligne. */
.ia-calc { display: grid; gap: 14px; }

/* ─── L'équation ─────────────────────────────────────────────────────
   Toutes les cellules s'alignent par le BAS : les étiquettes peuvent
   passer sur deux lignes sans décaler les valeurs, qui restent sur une
   même ligne de base. Hauteur commune des valeurs : --ia-calc-h.     */
.ia-calc__equation {
  --ia-calc-h: 52px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 16px 12px;
}
.ia-calc__equation .ia-resultat { grid-column: 1 / -1; }
.ia-calc__op { display: none; }

/* De 700 à 1179 px : les quatre facteurs sur une ligne, le résultat
   dessous. En dessous de 1180 px, « 153 heures par an » n'a plus la
   place de tenir à côté et passerait sous son propre chiffre.       */
@media (min-width: 700px) {
  .ia-calc__equation {
    grid-template-columns:
      minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, .82fr);
    gap: 16px 12px;
  }
  .ia-calc__op {
    display: block;
    align-self: end;
    height: var(--ia-calc-h);
    font-size: 22px;
    font-weight: 200;
    line-height: var(--ia-calc-h);
    color: var(--scr-orange);
  }
  .ia-calc__op:nth-last-child(2) { display: none; }   /* le « = » */
}
@media (min-width: 1180px) {
  .ia-calc__equation {
    grid-template-columns:
      minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto
      minmax(0, .82fr) auto minmax(0, 1.3fr);
    gap: 0 12px;
  }
  .ia-calc__op:nth-last-child(2) { display: block; }
  .ia-calc__equation .ia-resultat { grid-column: auto; }
}

.ia-calc__champ { display: grid; gap: 7px; margin: 0; }
.ia-calc__champ label,
.ia-calc__etiquette,
.ia-resultat__label {
  margin: 0;
  font-family: var(--scr-mono);
  font-size: 10.5px;
  line-height: 1.35;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--scr-on-night-mute);
}
.ia-calc__champ input {
  width: 100%;
  min-height: var(--ia-calc-h);
  padding: 10px 14px;
  border: 1px solid rgba(var(--scr-encre-rgb),.16);
  border-radius: 12px;
  background: rgba(var(--scr-matiere-rgb),.55);
  color: var(--scr-on-night);
  font-family: var(--scr-mono);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.ia-calc__champ input:focus { box-shadow: 0 0 0 4px rgba(233,78,26,.16); }

/* La constante : même gabarit qu'un champ, mais un trait pointillé et
   pas de fond. Elle se lit comme une valeur donnée, pas à saisir.   */
.ia-calc__fixe {
  display: flex;
  align-items: center;
  min-height: var(--ia-calc-h);
  padding: 10px 14px;
  border: 1px dashed rgba(var(--scr-encre-rgb),.24);
  border-radius: 12px;
  font-family: var(--scr-mono);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  color: var(--scr-on-night-soft);
}

.ia-resultat { display: grid; gap: 7px; }
.ia-resultat__valeur {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  min-height: var(--ia-calc-h);
  margin: 0;
}
.ia-resultat__nombre {
  font-size: clamp(44px, 4.3vw, 60px);
  font-weight: 200;
  line-height: var(--ia-calc-h);
  letter-spacing: -.03em;
  color: var(--scr-orange);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 44px rgba(233,78,26,.45);
  transition: text-shadow .6s ease;
}
.ia-resultat__unite {
  font-family: var(--scr-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--scr-on-night-mute);
}

.ia-calc__aide {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--scr-on-night-mute);
}

/* ─── Le bilan : la phrase, les journées, l'action ──────────────────── */
.ia-calc__bilan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
  padding-top: 14px;
  border-top: 1px solid rgba(233,78,26,.28);
}
.ia-calc__jours { flex: 1 1 320px; min-width: 0; }
.ia-resultat__equiv {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--scr-on-night-soft);
}
.ia-resultat__equiv b { font-weight: 400; color: var(--scr-on-night); }
.ia-calc__bilan .scr-btn { flex: 0 0 auto; padding: 11px 22px; }

.ia-calc__note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--scr-on-night-mute);
}

/* ═══════════════════════════════════════════════════════════════════════
   8. SERVICE CLIENT — la conversation encadrée
   ═══════════════════════════════════════════════════════════════════════ */
.ia-sav { display: grid; gap: clamp(28px, 4vw, 60px); align-items: center; }
@media (min-width: 940px) { .ia-sav { grid-template-columns: 1fr 380px; } }

.ia-fenetre {
  border: 1px solid var(--scr-bord);
  border-radius: 20px;
  background: rgba(var(--scr-matiere-rgb),.8);
  overflow: hidden;
  box-shadow: 0 40px 90px -50px rgba(233,78,26,.6);
}
.ia-fenetre__barre {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--scr-bord);
  background: rgba(var(--scr-encre-rgb),.04);
  font-family: var(--scr-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--scr-on-night-faint);
}
.ia-fenetre__barre i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(var(--scr-encre-rgb),.22);
}
.ia-fenetre__barre i:first-child { background: var(--scr-orange); }
.ia-fenetre__corps { display: grid; gap: 12px; padding: 20px; }

.ia-bulle {
  max-width: 84%;
  padding: 13px 17px;
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.6;
}
.ia-bulle--client {
  justify-self: start;
  border-bottom-left-radius: 5px;
  background: rgba(var(--scr-encre-rgb),.07);
  color: var(--scr-on-night-soft);
}
.ia-bulle--robot {
  justify-self: end;
  border-bottom-right-radius: 5px;
  background: rgba(233,78,26,.13);
  border: 1px solid rgba(233,78,26,.3);
  color: var(--scr-on-night);
}
.ia-bulle--passage {
  justify-self: stretch;
  max-width: none;
  border: 1px dashed rgba(60,207,142,.5);
  background: rgba(60,207,142,.06);
  font-family: var(--scr-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ia-vert);
  text-align: center;
}
.js .ia-bulle { opacity: 0; transform: translateY(10px); }
.js .ia-fenetre.is-in .ia-bulle {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease, transform .6s var(--scr-ease);
}
.js .ia-fenetre.is-in .ia-bulle:nth-child(2) { transition-delay: .35s; }
.js .ia-fenetre.is-in .ia-bulle:nth-child(3) { transition-delay: .7s; }
.js .ia-fenetre.is-in .ia-bulle:nth-child(4) { transition-delay: 1.05s; }
.js .ia-fenetre.is-in .ia-bulle:nth-child(5) { transition-delay: 1.4s; }

.ia-sav__liste { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 11px; }
.ia-sav__liste li {
  position: relative;
  padding-left: 26px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--scr-on-night-soft);
}
.ia-sav__liste li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 11px; height: 1px;
  background: var(--scr-orange);
}

/* ═══════════════════════════════════════════════════════════════════════
   9. LA MÉTHODE — l'accompagnement
   ═══════════════════════════════════════════════════════════════════════ */
.ia-methode { list-style: none; margin: 0; padding: 0; position: relative; }
.ia-methode::before {
  content: "";
  position: absolute;
  left: 17px; top: 8px; bottom: 8px;
  width: 1px;
  background: linear-gradient(to bottom, var(--scr-orange), rgba(233,78,26,.08));
}
.ia-etape { position: relative; padding: 0 0 clamp(34px, 4vw, 58px) 58px; }
.ia-etape:last-child { padding-bottom: 0; }
.ia-etape__n {
  position: absolute;
  left: 0; top: 0;
  display: grid;
  place-items: center;
  width: 35px; height: 35px;
  border: 1px solid var(--scr-bord);
  border-radius: 50%;
  background: var(--scr-sol);
  font-family: var(--scr-mono);
  font-size: 12px;
  color: var(--scr-on-night-faint);
  transition: border-color .5s ease, color .5s ease, box-shadow .5s ease;
}
.ia-etape.is-in .ia-etape__n {
  border-color: var(--scr-orange);
  color: var(--scr-orange);
  box-shadow: 0 0 22px rgba(233,78,26,.4);
}
.ia-etape h3 { margin: 4px 0 8px; font-size: 21px; font-weight: 300; color: var(--scr-on-night); }
.ia-etape p { margin: 0; font-size: 16.5px; line-height: 1.66; color: var(--scr-on-night-soft); }
.ia-etape p.ia-etape__meta {
  margin: 0 0 8px;
  font-family: var(--scr-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--scr-orange);
}

/* ═══════════════════════════════════════════════════════════════════════
   10. LES GARDE-FOUS
   ───────────────────────────────────────────────────────────────────────
   La section la plus importante de la page. Elle dit ce que nous ne
   ferons pas. C'est elle qui rend crédible tout le reste.
   ═══════════════════════════════════════════════════════════════════════ */
.ia-gardefous {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
}
@media (min-width: 780px) { .ia-gardefous { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.ia-gardefou {
  display: flex;
  gap: 16px;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--scr-bord);
  border-radius: 18px;
  background: rgba(var(--scr-matiere-rgb),.5);
}
.ia-gardefou__ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(var(--scr-encre-rgb),.2);
  border-radius: 11px;
  color: var(--scr-on-night-mute);
}
.ia-gardefou__ic svg { width: 18px; height: 18px; }
.ia-gardefou h3 { margin: 0 0 6px; font-size: 17.5px; font-weight: 300; color: var(--scr-on-night); }
.ia-gardefou p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--scr-on-night-soft); }

.ia-avertissement {
  margin-top: clamp(26px, 3vw, 40px);
  padding: 18px 22px;
  border-left: 2px solid rgba(var(--scr-encre-rgb),.28);
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--scr-on-night-mute);
}

/* ═══════════════════════════════════════════════════════════════════════
   11. LE COÛT — la structure, pas le montant
   ═══════════════════════════════════════════════════════════════════════ */
.ia-couts {
  margin: 0;
  display: grid;
  gap: 1px;
  background: var(--scr-bord);
  border: 1px solid var(--scr-bord);
  border-radius: 20px;
  overflow: hidden;
}
.ia-cout {
  display: grid;
  gap: 8px 26px;
  padding: clamp(20px, 2.2vw, 28px) clamp(22px, 2.4vw, 32px);
  background: #1B1512;
  transition: background-color .3s ease;
}
@media (min-width: 780px) { .ia-cout { grid-template-columns: 250px 1fr; align-items: baseline; } }
.ia-cout:hover { background: #221A15; }
.ia-cout dt {
  font-family: var(--scr-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--scr-orange);
}
.ia-cout dd { margin: 0; font-size: 15.5px; line-height: 1.62; color: var(--scr-on-night-soft); }
.ia-cout dd b { display: block; margin-bottom: 4px; font-weight: 400; color: var(--scr-on-night); }

/* ═══════════════════════════════════════════════════════════════════════
   12. LE DEVIS — le formulaire commun aux quatre pages
   ───────────────────────────────────────────────────────────────────────
   Même objet que .ct-devis (contact), .sw-devis (site web) et .cm-devis
   (communication) : un visiteur qui passe d'une page à l'autre retrouve
   les mêmes champs, dans le même ordre ; seul le questionnaire replié
   change — ici, le TYPE DE BESOIN.

   Au premier regard : trois tuiles de pôle cumulables, le message, le
   nom, l'e-mail, l'accord. Le reste attend dans un <details> natif.
   Le type de besoin est un vrai groupe de boutons radio, sans choix
   d'avance. Sans JavaScript, :has() n'affiche que le panneau du choix
   coché (fin de section) ; sans :has(), tous s'affichent.

   Préfixes : .ia-devis, .ia-mention, .ia-poles/.ia-pole, .ia-plus,
   .ia-besoins/.ia-besoin, .ia-panneau, .ia-champs/.ia-champ,
   .ia-cases/.ia-case, .ia-consentement, .ia-miel, .ia-envoi,
   .ia-bilan, .ia-oblig, .ia-erreur.
   ═══════════════════════════════════════════════════════════════════════ */
.ia-devis__cadre {
  position: relative;
  padding: clamp(26px, 3.6vw, 54px);
  border: 1px solid var(--scr-bord);
  border-radius: 24px;
  background: linear-gradient(170deg, var(--scr-verre-2), rgba(var(--scr-matiere-rgb),.72));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
}
.ia-devis__cadre::before {
  content: "";
  position: absolute;
  left: 50%; top: -180px;
  width: 620px; height: 420px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(233,78,26,.20), transparent 68%);
  pointer-events: none;
}
.ia-devis__cadre > * { position: relative; }

/* Les fieldsets du formulaire perdent le cadre natif : seuls les
   panneaux de besoin en gardent un, le leur. `:where` ramène la règle
   à une spécificité nulle, pour que .ia-panneau reprenne la main.
   `min-width: 0` : sans lui, un fieldset s'élargit à son contenu et
   pousse la page de côté sur mobile.                                */
:where(.ia-form fieldset) { margin: 0; padding: 0; border: 0; min-width: 0; }

/* « * = obligatoire », dit une fois, en tête : le chemin le plus court
   (nom, e-mail, accord) se voit avant le premier champ.             */
.ia-mention { margin: 0 0 20px; font-size: 14px; line-height: 1.5; color: var(--scr-on-night-mute); }
.ia-mention .ia-oblig { color: var(--scr-orange); }

.ia-champs { display: grid; gap: 18px; }
@media (min-width: 720px) { .ia-champs--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.ia-champs--espace { margin-top: 20px; }

/* `align-content: start` : dans une grille à deux colonnes, un champ
   qui porte une ligne d'aide étirerait la ligne et décalerait le
   contrôle voisin vers le bas. Les deux colonnes restent alignées. */
.ia-champ { display: grid; align-content: start; gap: 7px; }
/* Les questions se lisent comme des questions : police de texte, casse
   normale. La capitale mono reste aux étiquettes (surtitre, pastille). */
.ia-champ > label {
  font-family: var(--scr-font);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--scr-on-night);
}
.ia-oblig { color: var(--scr-orange); }
.ia-champ input,
.ia-champ select,
.ia-champ textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  border: 1px solid rgba(var(--scr-encre-rgb),.16);
  border-radius: 12px;
  background: rgba(var(--scr-matiere-rgb),.55);
  color: var(--scr-on-night);
  font-family: var(--scr-font);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.ia-champ textarea { min-height: 138px; resize: vertical; }
.ia-champ select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, rgba(var(--scr-encre-rgb),.6) 50%),
                    linear-gradient(135deg, rgba(var(--scr-encre-rgb),.6) 50%, transparent 50%);
  background-position: calc(100% - 22px) 22px, calc(100% - 16px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
/* Le menu déroulant natif emprunte les couleurs du système : sans cette
   ligne, du texte clair sur fond clair sur certains navigateurs. Le
   jeton matière suit seul le thème clair ; les intitulés de groupe du
   budget (optgroup) prennent le même fond, sans l'italique natif.   */
.ia-champ optgroup,
.ia-champ option { background: rgb(var(--scr-matiere-rgb)); color: var(--scr-on-night); font-style: normal; }
/* .48 = 4,5:1 sur la nuit, comme communication.css — .32 tombait a 2,65:1. */
.ia-champ input::placeholder,
.ia-champ textarea::placeholder { color: rgba(var(--scr-encre-rgb),.48); }
.ia-champ input:hover,
.ia-champ select:hover,
.ia-champ textarea:hover { border-color: rgba(var(--scr-encre-rgb),.3); }
.ia-champ input:focus,
.ia-champ select:focus,
.ia-champ textarea:focus { background: rgba(var(--scr-matiere-rgb),.8); box-shadow: 0 0 0 4px rgba(233,78,26,.16); }
.ia-champ__aide { font-size: 13.5px; line-height: 1.55; color: var(--scr-on-night-mute); }

.ia-champ input[aria-invalid="true"],
.ia-champ select[aria-invalid="true"],
.ia-champ textarea[aria-invalid="true"],
.ia-consentement input[aria-invalid="true"]::before { border-color: #FF7A4D; }
.ia-erreur {
  display: none;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  color: #FFA98B;
}
.ia-erreur::before { content: "▲"; font-size: 9px; }
.ia-champ.is-erreur .ia-erreur { display: flex; }

/* ─── Les pôles — trois tuiles cumulables ───────────────────────────
   Le dessin des tuiles de .ct-poles (contact), avec un repère CARRÉ :
   ce sont des cases à cocher, plusieurs choix restent possibles.    */
.ia-poles { margin: 0 0 26px; }
.ia-poles > legend {
  padding: 0;
  margin-bottom: 14px;
  font-family: var(--scr-font);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--scr-on-night);
}
.ia-poles__aide { margin: -6px 0 12px; font-size: 14px; color: var(--scr-on-night-mute); }
.ia-poles__liste { display: grid; gap: 10px; }
@media (min-width: 760px) { .ia-poles__liste { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.ia-pole { position: relative; }
/* L'input reste dans le flux mais invisible : le focus clavier se voit
   sur le label grâce à `:focus-visible + label`.                      */
.ia-pole input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
}
.ia-pole label {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 58px;
  height: 100%;
  padding: 14px 22px;
  border: 1px solid var(--scr-bord);
  border-radius: 16px;
  background: rgba(var(--scr-matiere-rgb),.35);
  font-family: var(--scr-font);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--scr-on-night-soft);
  cursor: pointer;
  transition: transform .3s var(--scr-ease), border-color .3s ease, color .3s ease, background-color .3s ease;
}
.ia-pole label::before {
  content: "";
  flex: 0 0 auto;
  width: 11px; height: 11px;
  border-radius: 3px;
  border: 1px solid currentColor;
  transition: background-color .3s ease;
}
.ia-pole label:hover { transform: translateY(-2px); border-color: var(--scr-orange); color: var(--scr-on-night); }
.ia-pole input:checked + label {
  border-color: var(--scr-orange);
  background: color-mix(in srgb, var(--scr-orange) 16%, transparent);
  color: var(--scr-on-night);
}
.ia-pole input:checked + label::before { background: var(--scr-orange); }
.ia-pole input:focus-visible + label { outline: 3px solid var(--scr-orange); outline-offset: 3px; }

/* ─── Le repli — « Ajouter des précisions » ─────────────────────────
   Un <details> natif : il s'ouvre au clavier sans script. Le triangle
   du navigateur cède la place au chevron de la FAQ, en ::after.     */
.ia-plus { margin: 26px 0 0; border-top: 1px solid var(--scr-bord); border-bottom: 1px solid var(--scr-bord); }
.ia-plus > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 14px 4px;
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--scr-on-night);
  transition: color .3s ease;
}
.ia-plus > summary::-webkit-details-marker { display: none; }
.ia-plus > summary:hover { color: var(--scr-orange); }
.ia-plus > summary:focus-visible { outline: 3px solid var(--scr-orange); outline-offset: 2px; border-radius: 6px; }
.ia-plus > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 10px; height: 10px;
  border-right: 1.5px solid var(--scr-orange);
  border-bottom: 1.5px solid var(--scr-orange);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .35s var(--scr-ease);
}
.ia-plus[open] > summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.ia-plus__quoi { display: block; margin-top: 3px; font-size: 14px; color: var(--scr-on-night-mute); }
.ia-plus__corps { padding: 6px 0 24px; }
/* Le questionnaire propre à la page, sous le bloc commun. */
.ia-plus__detail { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--scr-bord); }

/* ─── Le type de besoin ─────────────────────────────────────────────── */
.ia-besoins { margin: 0 0 30px; padding: 0; border: 0; }
.ia-besoins > legend {
  padding: 0;
  margin-bottom: 14px;
  font-family: var(--scr-font);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--scr-on-night);
}
.ia-besoins__liste { display: flex; flex-wrap: wrap; gap: 9px; }
.ia-besoin { position: relative; }
.ia-besoin input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
}
.ia-besoin label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 11px 20px;
  border: 1px solid var(--scr-bord);
  border-radius: 999px;
  font-family: var(--scr-font);
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--scr-on-night-soft);
  cursor: pointer;
  transition: transform .3s var(--scr-ease), border-color .3s ease, color .3s ease, background-color .3s ease;
}
.ia-besoin label::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1px solid currentColor;
  transition: background-color .3s ease, box-shadow .3s ease;
}
.ia-besoin label:hover { transform: translateY(-2px); border-color: var(--scr-orange); color: var(--scr-on-night); }
.ia-besoin input:checked + label {
  border-color: var(--scr-orange);
  background: rgba(233,78,26,.14);
  color: var(--scr-on-night);
}
.ia-besoin input:checked + label::before { background: var(--scr-orange); box-shadow: 0 0 10px rgba(233,78,26,.9); }
.ia-besoin input:focus-visible + label { outline: 3px solid var(--scr-orange); outline-offset: 3px; }

.ia-panneau {
  margin: 0 0 26px;
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--scr-bord);
  border-left: 2px solid var(--scr-orange);
  border-radius: 4px 18px 18px 4px;
  background: rgba(var(--scr-matiere-rgb),.45);
}
.ia-panneau[hidden] { display: none; }
.js .ia-panneau.is-swap { animation: iaBascule .5s var(--scr-ease); transform-origin: 0 50%; }
.ia-panneau > legend {
  margin: 0 0 6px;
  padding: 0;
  font-family: var(--scr-font);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--scr-orange);
}
.ia-panneau__phrase { margin: 0 0 18px; font-size: 15.5px; line-height: 1.6; color: var(--scr-on-night-soft); }

.ia-cases { display: flex; flex-wrap: wrap; gap: 9px; }
.ia-case { position: relative; }
.ia-case input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
}
.ia-case label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 17px;
  border: 1px solid rgba(var(--scr-encre-rgb),.16);
  border-radius: 12px;
  font-size: 14.5px;
  color: var(--scr-on-night-soft);
  cursor: pointer;
  transition: border-color .3s ease, color .3s ease, background-color .3s ease;
}
.ia-case label::before {
  content: "";
  width: 15px; height: 15px;
  border: 1px solid rgba(var(--scr-encre-rgb),.4);
  border-radius: 4px;
  transition: background-color .25s ease, border-color .25s ease;
}
.ia-case label:hover { border-color: rgba(233,78,26,.55); color: var(--scr-on-night); }
.ia-case input:checked + label {
  border-color: var(--scr-orange);
  background: rgba(233,78,26,.12);
  color: var(--scr-on-night);
}
.ia-case input:checked + label::before {
  background: var(--scr-orange);
  border-color: var(--scr-orange);
  box-shadow: inset 0 0 0 2px rgba(var(--scr-matiere-rgb),.8);
}
.ia-case input:focus-visible + label { outline: 3px solid var(--scr-orange); outline-offset: 3px; }

.ia-consentement {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 4px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--scr-on-night-soft);
}
/* La case est enveloppée dans un .ia-champ : sans ces remises à zéro,
   elle hériterait du gabarit des champs de saisie (50 px de haut,
   13 px de renfoncement, fond, halo au focus) et se décalerait sous
   la première ligne de son libellé.

   Le DESSIN garde 20 px, mais la CIBLE fait 44 px : les marges
   négatives font déborder la zone sensible dans la marge du cadre
   sans déplacer d'un pixel ce que l'œil voit. Un contrôle natif ne
   sait pas avoir de cible plus grande que son dessin, d'où le
   `appearance: none` et la case redessinée en ::before — même idiome
   que .ia-case plus haut. Le mode couleurs forcées rend la main au
   contrôle natif (Préférences système).                           */
.ia-consentement input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  display: grid;
  place-content: center;
  box-sizing: border-box;
  width: 44px; height: 44px;
  min-height: 0;
  margin: -10px -12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  cursor: pointer;
}
.ia-consentement input::before {
  content: "";
  width: 20px; height: 20px;
  border: 1px solid rgba(var(--scr-encre-rgb),.4);
  border-radius: 5px;
  transition: background-color .25s ease, border-color .25s ease;
}
.ia-consentement input:hover::before { border-color: color-mix(in srgb, var(--scr-orange) 55%, transparent); }
.ia-consentement input:checked::before {
  background: var(--scr-orange);
  border-color: var(--scr-orange);
  box-shadow: inset 0 0 0 3px rgba(var(--scr-matiere-rgb),.85);
}
/* Le champ de saisie s'éclaire au focus ; la case, elle, n'a pas de
   fond à éclairer — sans ces deux remises à zéro, la règle commune
   peindrait un rectangle de 44 px et son halo autour du dessin.   */
.ia-consentement input:focus { background-color: transparent; box-shadow: none; }
.ia-consentement input:focus-visible { outline: 3px solid var(--scr-orange); outline-offset: -8px; }
.ia-consentement a { color: var(--scr-orange); }

.ia-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ia-envoi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 26px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--scr-bord);
}
.ia-envoi__rassure {
  margin: 0;
  font-family: var(--scr-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--scr-on-night-faint);
}

.ia-bilan {
  margin: 0 0 22px;
  padding: 16px 20px;
  border: 1px solid rgba(255,122,77,.5);
  border-radius: 12px;
  background: rgba(255,122,77,.08);
  font-size: 15px;
  line-height: 1.6;
  color: #FFC3AC;
}
.ia-bilan[hidden] { display: none; }
.ia-bilan ul { margin: 8px 0 0; padding-left: 20px; }
.ia-bilan a { color: inherit; }

/* ─── Sans JavaScript ───────────────────────────────────────────────
   <html> garde sa classe `no-js` tant que le script en ligne du <head>
   ne l'a pas remplacée par `js`. Le CSS fait alors la bascule seul :
   aucun panneau sans choix, puis celui du besoin coché. Un navigateur
   sans :has() ignore le bloc entier et montre les cinq panneaux —
   c'est sans risque, chaque champ porte un nom qui lui est propre. */
@supports selector(:has(*)) {
  .no-js .ia-panneau[data-besoin] { display: none; }
  .no-js .ia-form:has(#bes-auto:checked) .ia-panneau[data-besoin="auto"],
  .no-js .ia-form:has(#bes-assistant:checked) .ia-panneau[data-besoin="assistant"],
  .no-js .ia-form:has(#bes-docs:checked) .ia-panneau[data-besoin="docs"],
  .no-js .ia-form:has(#bes-metier:checked) .ia-panneau[data-besoin="metier"],
  .no-js .ia-form:has(#bes-flou:checked) .ia-panneau[data-besoin="flou"] { display: block; }
}

/* ═══════════════════════════════════════════════════════════════════════
   13. FAQ, APPEL FINAL, BARRE COLLANTE
   ═══════════════════════════════════════════════════════════════════════ */
.ia-faq { border-top: 1px solid var(--scr-bord); }
.ia-faq details { border-bottom: 1px solid var(--scr-bord); }
.ia-faq summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 46px 24px 0;
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 300;
  color: var(--scr-on-night);
  cursor: pointer;
  list-style: none;
  transition: color .3s ease;
}
.ia-faq summary::-webkit-details-marker { display: none; }
.ia-faq summary:hover { color: var(--scr-orange); }
.ia-faq summary:focus-visible { outline: 3px solid var(--scr-orange); outline-offset: -3px; border-radius: 6px; }
.ia-faq summary::after {
  content: "";
  position: absolute;
  right: 6px; top: 50%;
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--scr-orange);
  border-bottom: 1.5px solid var(--scr-orange);
  transform: rotate(45deg) translateY(-50%);
  transform-origin: 50% 0;
  transition: transform .35s var(--scr-ease);
}
.ia-faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.ia-faq__rep {
  margin: 0;
  padding: 0 46px 24px 0;
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--scr-on-night-soft);
}
.ia-faq__rep + .ia-faq__rep { padding-top: 0; margin-top: -12px; }

.ia-cta { text-align: center; }
.ia-cta h2 { max-width: 900px; margin-inline: auto; font-size: clamp(26px, 3.6vw, 50px); }
.ia-cta .scr-lede { max-width: 78ch; margin-inline: auto; text-align: center; }
.ia-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 38px; }

/* Le sélecteur est doublé (.ia-page) pour l'emporter sur la règle
   .scr-nuit > *:not(.scr-salle) de page.css (spécificité 0-2-0), qui
   sinon ramène la barre en position: relative dans le flux.            */
.ia-page .ia-barre {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 55;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px clamp(14px, 4vw, 24px);
  background: rgba(var(--scr-matiere-rgb),.92);
  border-top: 1px solid var(--scr-bord);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform .45s var(--scr-ease), visibility 0s linear .45s;
}
.ia-page .ia-barre.is-la { transform: none; visibility: visible; transition-delay: 0s, 0s; }
.ia-barre p {
  margin: 0;
  font-family: var(--scr-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--scr-on-night-faint);
}
.ia-barre .scr-btn { padding: 11px 20px; min-height: 44px; }
/* Ouverte partout dès que le script a la main : la logique existante
   (visible entre le hero et #devis) reste la seule à la piloter.       */
.js .ia-barre { display: flex; }
/* Cachée, elle ne doit intercepter aucun clic ni aucun focus. */
.ia-page .ia-barre { pointer-events: none; }
.ia-page .ia-barre.is-la { pointer-events: auto; }

/* Au bureau : une pastille compacte ancrée en bas à droite, au lieu du
   bandeau pleine largeur — elle ne couvre jamais la lecture.           */
@media (min-width: 861px) {
  .ia-page .ia-barre {
    left: auto;
    right: 24px;
    bottom: 24px;
    width: auto;
    border: 1px solid var(--scr-bord);
    border-radius: 999px;
    padding: 10px 12px 10px 24px;
    gap: 18px;
    transform: translateY(12px);
    opacity: 0;
    transition: transform .45s var(--scr-ease), opacity .45s ease,
                visibility 0s linear .45s;
  }
  .ia-page .ia-barre.is-la { transform: none; opacity: 1; transition-delay: 0s, 0s, 0s; }
}

/* ═══════════════════════════════════════════════════════════════════════
   14. CONSTELLATION — la scène WebGL du hero
   ───────────────────────────────────────────────────────────────────────
   Construite par intelligence-artificielle-constellation.js entre la
   grille (z 0) et le contenu (z 2). Sans JS ou sans WebGL : vide.
   ═══════════════════════════════════════════════════════════════════════ */
.ia-constellation {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.ia-constellation canvas { width: 100%; height: 100%; }

/* ═══════════════════════════════════════════════════════════════════════
   15. LE CÂBLAGE DE L'ATELIER — courbes et impulsions
   ───────────────────────────────────────────────────────────────────────
   Le canvas remplace visuellement les fils pointillés ; les .ia-fil
   restent dans le DOM (repli sans canvas + squelette de mise en page),
   simplement rendus invisibles quand le câblage est en place.
   ═══════════════════════════════════════════════════════════════════════ */
.ia-etabli .ia-cablage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.js .ia-chaine--cable .ia-fil { opacity: 0; animation: none; }

/* Le nœud s'illumine au passage de l'impulsion. */
.ia-noeud.is-pulse {
  border-color: var(--scr-bord-vif);
  box-shadow: 0 0 34px -10px rgba(233,78,26,.8);
}
.is-pulse .ia-noeud__ic { background: rgba(233,78,26,.22); }

/* ═══════════════════════════════════════════════════════════════════════
   16. CALCULATEUR — halo et empilement des journées
   ───────────────────────────────────────────────────────────────────────
   Les barrettes ne visualisent QUE le N déjà énoncé dans la phrase
   « Soit environ N journées » : aucune donnée nouvelle.
   ═══════════════════════════════════════════════════════════════════════ */
.ia-journees {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 4px;
  margin-top: 10px;
}
.ia-journees i {
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: var(--scr-orange);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform .5s var(--scr-ease);
}
.ia-journees.is-la i { transform: none; }
.ia-journees span {
  align-self: center;
  margin-left: 6px;
  font-family: var(--scr-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--scr-on-night-faint);
}

/* La valeur monte : le chiffre chauffe 600 ms, puis se calme. */
.ia-resultat.is-chaud .ia-resultat__nombre { text-shadow: 0 0 34px rgba(233,78,26,.95); }

/* ═══════════════════════════════════════════════════════════════════════
   17. FENÊTRE SAV — la frappe simulée
   ───────────────────────────────────────────────────────────────────────
   Sous .ia-fenetre--joue, c'est le script qui révèle chaque bulle : les
   délais en cascade du mode simple ne s'appliquent plus. Le texte
   intégral reste dans un span .scr-sr, lu immédiatement.
   ═══════════════════════════════════════════════════════════════════════ */
.ia-bulle__tape { white-space: pre-wrap; }

.ia-curseur {
  display: inline-block;
  width: 2px;
  height: 14px;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--scr-orange);
  animation: iaClignote 1s steps(1, end) infinite;
}
@keyframes iaClignote { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.js .ia-fenetre.ia-fenetre--joue .ia-bulle {
  opacity: 0;
  transform: translateY(10px);
  transition: none;
}
.js .ia-fenetre.ia-fenetre--joue .ia-bulle.is-vue {
  opacity: 1;
  transform: none;
  transition: opacity .45s ease, transform .5s var(--scr-ease);
}

/* ═══════════════════════════════════════════════════════════════════════
   18. LA PASTILLE DE DEVIS ET LE FOCUS
   ═══════════════════════════════════════════════════════════════════════ */
/* La pastille de devis ne doit jamais recouvrir un champ focalisé. */
html { scroll-padding-bottom: 80px; }

/* ═══════════════════════════════════════════════════════════════════════
   19. FAISCEAUX DE SECTION — le trait d'eyebrow se dessine
   ───────────────────────────────────────────────────────────────────────
   Surcharges locales du ::before de page.css, portée limitée à cette
   page via .ia-page posé sur <body>. Sans JS, .is-in n'existe pas :
   l'état replié est donc préfixé .js — le dessin reste, plein.
   ═══════════════════════════════════════════════════════════════════════ */
.js .ia-page .scr-section__head .scr-eyebrow::before {
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .9s var(--scr-ease);
}
.js .ia-page .scr-section__head.is-in .scr-eyebrow::before { transform: scaleX(1); }

/* ─── LE CADRE DU TITRE ───────────────────────────────────
   La constellation n'existe QUE dans le hero : c'est le seul endroit ou
   des fils passaient dans les mots. Encadrer aussi les titres de section
   empilait des boites dans des boites sur toute la page. Ils gardent
   donc leur seul accent : le trait vif de l'eyebrow.                 */
.ia-page .scr-section__head { position: relative; }

.ia-page .scr-section__head::after {
  content: "";
  position: absolute;
  left: -18px;
  top: 30px;
  width: 2px;
  height: 46px;
  border-radius: 2px;
  background: linear-gradient(to bottom, var(--scr-orange), transparent);
}
.js .ia-page .scr-section__head::after {
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform .8s var(--scr-ease) .2s;
}
.js .ia-page .scr-section__head.is-in::after { transform: none; }
@media (max-width: 1240px) { .ia-page .scr-section__head::after { display: none; } }

/* Le hero : même dalle, autour du bloc de texte. C'est là que la
   constellation gênait le plus.                                      */
/* TOUT enfant du hero passe devant la dalle de verre, pas seulement une
   liste nominative : le jour où on ajoute un bloc — le testeur de temps,
   par exemple — il disparaissait derrière le verre sans un mot. */
.ia-hero__inner > * { position: relative; z-index: 1; }

.ia-hero__inner::before {
  content: "";
  position: absolute;
  inset: clamp(-22px, -2.4vw, -34px) clamp(-20px, -2.6vw, -40px);
  z-index: 0;
  border: 1px solid var(--scr-bord);
  border-radius: 26px;
  background: linear-gradient(158deg, rgba(31,24,20,.86), rgba(20,16,13,.93));
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  box-shadow: 0 34px 90px -54px rgba(0,0,0,.95);
  pointer-events: none;
}
.js .ia-hero__inner::before {
  opacity: 0;
  animation: iaCadre 1s var(--scr-ease) .28s forwards;
}
@keyframes iaCadre { from { opacity: 0; transform: scale(.99); } to { opacity: 1; transform: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   Préférences système
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .js .ia-hero h1 .ia-l > span { transform: none; animation: none; }
  .js .ia-hero .scr-lede, .js .ia-hero__actions { opacity: 1; animation: none; }
  .js .ia-descendre i, .js .ia-etabli__tete .ia-vivant::before { animation: none; }
  .ia-torche { display: none; }
  /* Le fil garde ses pointillés : c'est le MOUVEMENT qu'on retire, pas
     le dessin. On voit toujours qu'il y a un fil entre deux nœuds.  */
  .js .ia-fil { animation: none; }
  .ia-module::after { display: none; }
  .ia-module:hover, .ia-noeud:hover { transform: none; }
  .js .ia-panneau.is-swap, .js .ia-flux.is-swap { animation: none; }
  .js .ia-bulle { opacity: 1; transform: none; }
  .js .ia-fenetre.is-in .ia-bulle { transition: none; }
  .ia-page .ia-barre { transition: none; }
  /* Si le mode s'active en cours de frappe, le script montre tout ;
     ces règles garantissent le même état côté dessin.               */
  .js .ia-fenetre.ia-fenetre--joue .ia-bulle { opacity: 1; transform: none; transition: none; }
  .ia-curseur { animation: none; }
  .ia-journees i { transform: none; transition: none; }
  .ia-resultat__nombre { transition: none; }
  /* Le formulaire : les tuiles et les pastilles ne décollent plus au
     survol, le chevron du repli bascule sans tourner.               */
  .ia-pole label:hover, .ia-besoin label:hover { transform: none; }
  .ia-pole label, .ia-besoin label, .ia-case label,
  .ia-consentement input::before, .ia-plus > summary::after { transition: none; }
  .js .ia-page .scr-section__head .scr-eyebrow::before { transform: none; transition: none; }
  .js .ia-page .scr-section__head::after { transform: none; transition: none; }
  .js .ia-hero__inner::before { opacity: 1; animation: none; }
}

@media (forced-colors: active) {
  .ia-torche, .ia-grille, .ia-etabli::before, .ia-devis__cadre::before,
  .ia-constellation, .ia-cablage, .ia-journees, .ia-curseur,
  .ia-page .scr-section__head::after { display: none; }
  .js .ia-chaine--cable .ia-fil { opacity: 1; }
  .ia-fil { background: ButtonText; }
  .ia-pole input:checked + label,
  .ia-besoin input:checked + label,
  .ia-case input:checked + label,
  .ia-scenario[aria-selected="true"] { border: 3px solid ButtonText; }
  /* La case de consentement redevient un contrôle natif : un dessin
     maison en ::before ne serait plus visible ici. La cible retombe
     à 20 px, mais son libellé reste cliquable sur toute la ligne. */
  .ia-consentement input {
    appearance: auto;
    -webkit-appearance: auto;
    width: 20px; height: 20px;
    margin: 2px 0 0;
  }
  .ia-consentement input::before { display: none; }
}

@media print {
  .ia-hero { min-height: 0; }
  .ia-torche, .ia-grille, .ia-descendre, .ia-page .ia-barre, .ia-scenarios,
  .ia-constellation, .ia-cablage, .ia-journees, .ia-curseur,
  .ia-page .scr-section__head::after { display: none; }
  .js .ia-chaine--cable .ia-fil { opacity: 1; }
  .ia-chaine { flex-direction: column; }
  .ia-fil { display: none; }
  .ia-etabli, .ia-module, .ia-noeud, .ia-calc, .ia-devis__cadre { background: #fff; color: #000; border-color: #999; }
  .ia-module h3, .ia-noeud h4, .ia-etape h3, .ia-outil h3 { color: #000; }
  .ia-module p, .ia-noeud p, .ia-etape p, .ia-role p, .ia-outil p { color: #222; }
  .ia-resultat__nombre { color: #000; text-shadow: none; }
  .ia-plus > summary::after { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   20. LES SUITES DE LA RÉUNION DU 24/08
   ───────────────────────────────────────────────────────────────────────
   Trois éléments neufs : le gimmick qui annonce le testeur de temps
   remonté dans le hero, la mention « Sky is the limit » de l'atelier, et
   la liste des applications connectables du service client.
   ═══════════════════════════════════════════════════════════════════════ */

/* Le gimmick — la question qui amène le testeur. Il parle au visiteur
   avant que le testeur ne lui demande ses chiffres. */
.ia-gimmick {
  margin: clamp(34px, 4.5vw, 54px) 0 18px;
  font-size: clamp(19px, 2.1vw, 27px);
  font-weight: 200;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--scr-on-night);
}
.ia-gimmick em {
  font-style: normal;
  color: var(--scr-orange);
  text-shadow: 0 0 32px rgba(233,78,26,.45);
}

/* Le hero porte plus de contenu qu'avant : il respire un cran de moins. */
.ia-page .ia-hero { padding-block: clamp(30px, 3.4vw, 52px); }
.ia-page .ia-hero h1 { margin-bottom: 18px; font-size: clamp(25px, 4.1vw, 56px); }
.ia-page .ia-hero .scr-lede { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; }
.ia-page .ia-hero__actions { margin-top: 22px; }
.ia-gimmick { margin: clamp(22px, 2.6vw, 34px) 0 14px; }

/* « Sky is the limit » — la promesse de sur-mesure de l'atelier. */
.ia-sky {
  display: inline-block;
  padding: 2px 12px 3px;
  border: 1px solid rgba(233,78,26,.5);
  border-radius: 999px;
  background: rgba(233,78,26,.10);
  font-family: var(--scr-mono);
  font-weight: 500;
  font-size: .78em;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--scr-on-night);
  white-space: nowrap;
}

/* L'appel à l'action seul, quand la phrase qui l'accompagnait a sauté :
   il doit porter tout le poids, donc il grossit. */
.ia-relance--seule { justify-content: center; border-left-color: transparent; }
.ia-cta-gros {
  padding: 18px 40px;
  font-size: 15px;
  letter-spacing: .14em;
}

/* Les applications connectables. Des NOMS, jamais des logos : ce sont
   des marques déposées, rien ne nous autorise à les reproduire. */
.ia-connect {
  margin-top: clamp(26px, 3vw, 40px);
  padding-top: 24px;
  border-top: 1px solid var(--scr-bord);
}
.ia-connect__titre {
  margin: 0 0 14px;
  font-family: var(--scr-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--scr-orange);
}
.ia-connect__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ia-connect__liste li {
  padding: 8px 15px;
  border: 1px solid var(--scr-bord);
  border-radius: 999px;
  background: var(--scr-verre-1);
  font-size: 13.5px;
  color: var(--scr-on-night-soft);
  transition: border-color .3s ease, color .3s ease;
}
.ia-connect__liste li:hover { border-color: var(--scr-bord-vif); color: var(--scr-on-night); }
.ia-connect__liste li.ia-connect__plus {
  border-style: dashed;
  color: var(--scr-on-night-mute);
  font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
  .ia-connect__liste li { transition: none; }
}
@media (forced-colors: active) {
  .ia-sky, .ia-connect__liste li { border: 1px solid CanvasText; background: Canvas; }
}
@media print {
  .ia-connect, .ia-gimmick { color: #000; }
  .ia-sky { border-color: #666; background: none; color: #000; }
}

/* ═══════════════════════════════════════════════════════════════════════
   THÈME CLAIR — l'atelier de jour
   ───────────────────────────────────────────────────────────────────────
   Les jetons de base.css et page.css font l'essentiel : le sol devient
   papier, les dalles de verre deviennent des feuilles, le texte passe à
   l'encre. Restent ici ce que les jetons ne savent pas dire.

   La règle de fond : sur le papier, la lumière devient de l'encre. Les
   halos orange et les text-shadow étaient les lampes de la salle de
   nuit ; sur du clair, ils ne font que flouter les lettres. On les
   retire, sauf là où ils portent un état (l'impulsion qui arrive sur un
   nœud, l'étape atteinte) — ils y restent, en plus doux. Les ombres
   deviennent des ombres portées chaudes, jamais du noir sur le papier.
   ═══════════════════════════════════════════════════════════════════════ */
/* Le vert « ça tourne » #3CCF8E ne tient que 1,9:1 sur le papier : il
   descend au vert bouteille (5,2:1), qui garde le même sens.          */
:root[data-theme="light"] { --ia-vert: #1B7247; }

/* ─── Hero ────────────────────────────────────────────────────────────
   La dalle : une feuille un peu plus blanche que le sol, posée sur une
   ombre chaude. Le flou de fond reste : la constellation passe dessous
   comme un calque de dessin.                                           */
:root[data-theme="light"] .ia-hero__inner::before {
  background: linear-gradient(158deg, rgba(255,255,255,.82), rgba(var(--scr-matiere-rgb),.92));
  box-shadow: 0 34px 90px -54px rgba(60,35,20,.42);
}
/* La torche en « screen » n'éclaire rien sur du blanc : en
   multiplication, elle devient un lavis orange qui suit la souris.    */
:root[data-theme="light"] .ia-torche {
  background: radial-gradient(520px circle at var(--tx, 50%) var(--ty, 40%),
    rgba(233,78,26,.13) 0%, rgba(233,78,26,.04) 38%, transparent 72%);
  mix-blend-mode: multiply;
}
:root[data-theme="light"] .ia-hero h1 em,
:root[data-theme="light"] .ia-gimmick em,
:root[data-theme="light"] .ia-resultat__nombre { text-shadow: none; }
/* Le chiffre qui monte chauffe encore, mais d'un souffle. */
:root[data-theme="light"] .ia-resultat.is-chaud .ia-resultat__nombre { text-shadow: 0 0 26px rgba(233,78,26,.2); }

/* ─── L'atelier ───────────────────────────────────────────────────── */
:root[data-theme="light"] .ia-etabli,
:root[data-theme="light"] .ia-devis__cadre,
:root[data-theme="light"] .ia-fenetre { box-shadow: 0 24px 60px -36px rgba(60,35,20,.3); }
:root[data-theme="light"] .ia-noeud { box-shadow: 0 10px 26px -20px rgba(60,35,20,.3); }
:root[data-theme="light"] .ia-noeud:hover { box-shadow: 0 22px 50px -30px rgba(120,50,20,.38); }
:root[data-theme="light"] .ia-noeud.is-pulse { box-shadow: 0 0 30px -12px rgba(233,78,26,.5); }
/* #FF7A4D sur le papier : 2,5:1. L'orange sombre tient 5,8:1 sur la
   teinte orangée du nœud IA.                                          */
:root[data-theme="light"] .ia-noeud--ia .ia-noeud__type { color: var(--scr-orange-d); }
/* La pastille « en fonctionnement » : un anneau au lieu d'une lueur. */
:root[data-theme="light"] .ia-etabli__tete .ia-vivant::before { box-shadow: 0 0 0 3px rgba(27,114,71,.16); }

/* ─── Création sur mesure : les cartes ─────────────────────────────── */
:root[data-theme="light"] .ia-module__num { color: var(--scr-on-night-faint); }
:root[data-theme="light"] .ia-module:hover { box-shadow: 0 26px 60px -34px rgba(120,50,20,.34); }
/* Le reflet spéculaire : même tache qui suit le pointeur, en lavis. */
:root[data-theme="light"] .ia-module::after { mix-blend-mode: multiply; }

/* ─── Service client ───────────────────────────────────────────────── */
:root[data-theme="light"] .ia-bulle--passage { border-color: rgba(27,114,71,.45); background: rgba(27,114,71,.06); }

/* ─── La méthode ───────────────────────────────────────────────────── */
:root[data-theme="light"] .ia-etape.is-in .ia-etape__n { box-shadow: 0 0 18px rgba(233,78,26,.2); }

/* ─── Le devis ─────────────────────────────────────────────────────────
   Le halo du cadre passe de lampe à lavis ; le repère #FFA98B, choisi
   pour tenir sous ce halo la nuit, descend à l'orange sombre (5,8:1
   et plus sur la feuille). Les tuiles, le repli et la case d'accord
   n'emploient que des jetons : ils suivent seuls.                     */
:root[data-theme="light"] .ia-devis__cadre::before {
  background: radial-gradient(ellipse at center, rgba(233,78,26,.1), transparent 68%);
}
:root[data-theme="light"] .ia-erreur { color: var(--scr-orange-d); }
:root[data-theme="light"] .ia-besoin input:checked + label::before { box-shadow: none; }
:root[data-theme="light"] .ia-champ input::placeholder,
:root[data-theme="light"] .ia-champ textarea::placeholder { color: var(--scr-on-night-faint); }
:root[data-theme="light"] .ia-champ input[aria-invalid="true"],
:root[data-theme="light"] .ia-champ select[aria-invalid="true"],
:root[data-theme="light"] .ia-champ textarea[aria-invalid="true"],
:root[data-theme="light"] .ia-consentement input[aria-invalid="true"]::before { border-color: var(--scr-orange); }
:root[data-theme="light"] .ia-bilan {
  border-color: rgba(193,61,18,.45);
  background: rgba(233,78,26,.06);
  color: #7A2B10;               /* 8,7:1 sur la feuille */
}

/* ─── La pastille de devis ─────────────────────────────────────────── */
:root[data-theme="light"] .ia-page .ia-barre { box-shadow: 0 18px 44px -24px rgba(60,35,20,.36); }

/* Blocs retirés de la page mais gardés dans la feuille (rôles, pile
   d'outils, coûts) : leurs aplats sombres suivent, pour qu'aucun ne
   revienne en dalle noire sur le papier.                              */
:root[data-theme="light"] .ia-role,
:root[data-theme="light"] .ia-outil,
:root[data-theme="light"] .ia-cout { background: rgba(var(--scr-matiere-rgb),.94); }
:root[data-theme="light"] .ia-role:hover,
:root[data-theme="light"] .ia-outil:hover,
:root[data-theme="light"] .ia-cout:hover { background: #FFFFFF; }