/* ==========================================================================
   GABOLI STUDIO — Système de design « Précision de chantier »
   Structure limpide, atmosphère holographique.
   --------------------------------------------------------------------------
   01. Jetons (variables)      06. Boutons
   02. Réinitialisation        07. Composants
   03. Typographie             08. Sections spécifiques
   04. Mise en page            09. Formulaires
   05. Effets HUD / holo       10. Réactivité et accessibilité
   ========================================================================== */

/* ==========================================================================
   01. JETONS
   ========================================================================== */
:root {
  /* — Couleurs de marque — */
  --mauve:        #5424C9;
  --mauve-clair:  #9B7DFF;
  --mauve-fonce:  #3C1791;
  --noir-marque:  #231F20;
  --blanc:        #FFFFFF;

  /* — Surfaces — */
  --encre:        #121011;
  --encre-2:      #1A1618;
  --encre-3:      #241F21;
  --beton:        #F5F3F2;
  --beton-2:      #EAE7E5;

  /* — Texte — */
  --txt-clair:    #F7F5F6;
  --txt-clair-2:  #B9B2B6;
  --txt-fonce:    #231F20;
  --txt-fonce-2:  #5E5559;
  --acier:        #8A8589;

  /* — Signal — */
  --ambre:        #E8B341;
  --cyan:         #4DE1FF;
  --succes:       #2FBF71;
  --erreur:       #E5484D;

  /* — Traits et lueurs — */
  --trait-clair:  rgba(255,255,255,.10);
  --trait-fonce:  rgba(35,31,32,.12);
  --lueur:        rgba(155,125,255,.28);
  --lueur-forte:  rgba(155,125,255,.55);

  /* — Typographie — */
  --ff-titre: 'Archivo', 'Archivo Expanded', 'Helvetica Neue', Arial, sans-serif;
  --ff-texte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ff-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-display: clamp(2.5rem, 5.4vw, 4.55rem);
  --fs-h1:      clamp(2.15rem, 5.2vw, 4.05rem);
  --fs-h2:      clamp(1.8rem, 3.6vw, 2.95rem);
  --fs-h3:      clamp(1.25rem, 1.9vw, 1.7rem);
  --fs-h4:      clamp(1.08rem, 1.2vw, 1.25rem);
  --fs-body:    clamp(1rem, .28vw + .94rem, 1.075rem);
  --fs-sm:      .9375rem;
  --fs-xs:      .8125rem;
  --fs-mono:    .75rem;

  /* — Rythme — */
  --s-1:  .25rem;  --s-2:  .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5:  1.5rem;  --s-6:  2rem;    --s-7: 2.5rem;  --s-8: 3rem;
  --s-9:  4rem;    --s-10: 5rem;    --s-11: 7rem;   --s-12: 9rem;
  --section-y: clamp(4.5rem, 9vw, 8.5rem);
  --gouttiere: clamp(1.25rem, 4vw, 3rem);
  --largeur:   1280px;
  --largeur-txt: 68ch;

  /* — Géométrie signature : le biseau — */
  --biseau: 16px;
  --biseau-sm: 10px;

  /* — Mouvement — */
  --e-out: cubic-bezier(.16, 1, .3, 1);
  --e-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-rapide: 180ms;
  --t-moyen: 340ms;
  --t-lent: 620ms;

  --entete-h: 74px;
}

/* Biseau appliqué en coin supérieur droit (le chevron du logo) */
.biseau {
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
}
.biseau-bd {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--biseau)), calc(100% - var(--biseau)) 100%, 0 100%);
}
.biseau-double {
  clip-path: polygon(var(--biseau) 0, 100% 0, 100% calc(100% - var(--biseau)), calc(100% - var(--biseau)) 100%, 0 100%, 0 var(--biseau));
}

/* ==========================================================================
   02. RÉINITIALISATION
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--entete-h) + 1.5rem);
}
body {
  font-family: var(--ff-texte);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--txt-clair);
  background: var(--encre);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: 'ss01', 'cv05';
}
img, svg, video { display: block; max-width: 100%; height: auto; }

/* LE CANVAS EST À PART, ET C'EST IMPORTANT.
   Avec « height: auto », la hauteur AFFICHÉE d'un canevas est déduite de son
   tampon de dessin. Or les scripts calculent ce tampon à partir de la hauteur
   affichée : la boucle est bouclée, et la zone grandit un peu plus à chaque
   redimensionnement — c'est le bogue de la section « deux trajectoires » sur
   téléphone. Une hauteur explicite, jamais « auto », ferme la boucle. */
canvas { display: block; max-width: 100%; height: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Les éléments biseautés découpent l'outline : anneau intérieur à la place */
.biseau:focus-visible, .biseau-bd:focus-visible, .biseau-double:focus-visible,
.btn:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--cyan), 0 0 0 1px var(--cyan);
}
::selection { background: var(--mauve); color: #fff; }

/* Lien d'évitement — accessibilité clavier */
.evitement {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--mauve); color: #fff; padding: .85rem 1.4rem;
  font-family: var(--ff-mono); font-size: var(--fs-xs);
  letter-spacing: .08em; text-transform: uppercase;
}
.evitement:focus { left: 1rem; top: 1rem; }

/* ==========================================================================
   03. TYPOGRAPHIE
   ========================================================================== */
h1, h2, h3, h4, h5 {
  font-family: var(--ff-titre);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.028em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
h4 { font-size: var(--fs-h4); font-weight: 700; letter-spacing: -.01em; }

.display { font-size: var(--fs-display); line-height: .98; letter-spacing: -.035em; }

p { text-wrap: pretty; }
.plomb { font-size: clamp(1.08rem, 1.5vw, 1.32rem); line-height: 1.5; color: var(--txt-clair-2); }
.mesure { max-width: var(--largeur-txt); }
strong, b { font-weight: 650; color: var(--blanc); }

/* Étiquette monospace — signature « poste de commande » */
.kicker {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--ff-mono); font-size: var(--fs-mono); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--mauve-clair);
}
.kicker::before {
  content: ''; width: 22px; height: 1px; background: currentColor; opacity: .6;
}
.kicker--simple::before { display: none; }

.mauve { color: var(--mauve-clair); }
.acier { color: var(--acier); }
.mono { font-family: var(--ff-mono); }

/* Texte biffé du contenu clair */
.sur-clair, .sur-clair h1, .sur-clair h2, .sur-clair h3, .sur-clair h4 { color: var(--txt-fonce); }
.sur-clair .plomb { color: var(--txt-fonce-2); }
.sur-clair .kicker { color: var(--mauve); }
.sur-clair strong { color: var(--noir-marque); }
.sur-clair .acier { color: var(--txt-fonce-2); }

/* Lien texte souligné animé */
.lien {
  color: var(--mauve-clair); font-weight: 500;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size var(--t-moyen) var(--e-out);
  padding-bottom: 2px;
}
.lien:hover, .lien:focus-visible { background-size: 100% 1px; }
.sur-clair .lien { color: var(--mauve); }

/* ==========================================================================
   04. MISE EN PAGE
   ========================================================================== */
.conteneur {
  width: 100%; max-width: var(--largeur);
  margin-inline: auto; padding-inline: var(--gouttiere);
}
.conteneur--large { max-width: 1480px; }
.conteneur--etroit { max-width: 880px; }

.section { padding-block: var(--section-y); position: relative; }
.section--clair { background: var(--beton); color: var(--txt-fonce); }
.section--encre2 { background: var(--encre-2); }
.section--serre { padding-block: clamp(3rem, 6vw, 5rem); }

.grille { display: grid; gap: var(--s-5); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.g-12 { grid-template-columns: repeat(12, 1fr); }

.pile { display: flex; flex-direction: column; }
.rangee { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-4); }
.entre { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }

.mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); }
.mt-8 { margin-top: var(--s-8); } .mt-9 { margin-top: var(--s-9); }

/* En-tête de section : étiquette + titre + intro */
.tete-section { max-width: 780px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.tete-section h2 { margin-top: var(--s-4); }
.tete-section p { margin-top: var(--s-4); }
.tete-section--centre { margin-inline: auto; text-align: center; }
.tete-section--centre .kicker::before { display: none; }

/* ==========================================================================
   05. EFFETS HUD / HOLOGRAPHIQUES
   ========================================================================== */

/* Maillage de fond — le « poste de commande » */
.hud-grille { position: relative; isolation: isolate; }
.hud-grille::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(155,125,255,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(155,125,255,.055) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 100%);
}
.sur-clair .hud-grille::before,
.section--clair .hud-grille::before {
  background-image:
    linear-gradient(to right, rgba(84,36,201,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(84,36,201,.07) 1px, transparent 1px);
}

/* Halo mauve diffus */
.halo { position: relative; }
.halo::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  width: min(760px, 90vw); aspect-ratio: 1;
  left: 50%; top: 0; transform: translate(-50%, -35%);
  background: radial-gradient(circle, rgba(84,36,201,.42) 0%, rgba(84,36,201,.10) 42%, transparent 68%);
  filter: blur(20px);
}

/* Crochets d'angle — le marqueur de visée */
.crochets { position: relative; }
.crochets::before, .crochets::after {
  content: ''; position: absolute; width: 16px; height: 16px; pointer-events: none;
  border-color: var(--cyan); opacity: .55;
  transition: opacity var(--t-moyen) var(--e-out), width var(--t-moyen) var(--e-out), height var(--t-moyen) var(--e-out);
}
.crochets::before { top: 0; left: 0; border-top: 1px solid; border-left: 1px solid; }
.crochets::after { bottom: 0; right: 0; border-bottom: 1px solid; border-right: 1px solid; }
.crochets:hover::before, .crochets:hover::after { opacity: 1; width: 26px; height: 26px; }

/* Séparateur biseauté avec balayage de lumière */
.separateur {
  position: relative; height: 1px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--trait-clair) 20%, var(--trait-clair) 80%, transparent);
  overflow: visible;
}
.separateur::after {
  content: ''; position: absolute; top: 0; left: 0; height: 1px; width: 22%;
  background: linear-gradient(90deg, transparent, var(--mauve-clair), transparent);
  opacity: 0;
}
.separateur.vu::after { animation: balayage 1.5s var(--e-out) forwards; }
@keyframes balayage {
  0%   { opacity: 0; transform: translateX(0); }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(355%); }
}

/* Marqueur de section en marge */
.marqueur {
  font-family: var(--ff-mono); font-size: var(--fs-mono);
  letter-spacing: .18em; text-transform: uppercase; color: var(--acier);
  display: flex; align-items: center; gap: .55rem;
}
.marqueur i { width: 5px; height: 5px; background: var(--cyan); display: block; }

/* Révélation au défilement */
.rev { opacity: 0; transform: translateY(18px); }
.rev.vu {
  opacity: 1; transform: none;
  transition: opacity var(--t-lent) var(--e-out), transform var(--t-lent) var(--e-out);
}
.rev-d1.vu { transition-delay: 80ms; }
.rev-d2.vu { transition-delay: 160ms; }
.rev-d3.vu { transition-delay: 240ms; }
.rev-d4.vu { transition-delay: 320ms; }
.rev-d5.vu { transition-delay: 400ms; }

/* Le mot qui se dévoile ligne par ligne */
.masque-ligne { display: block; overflow: hidden; }
.masque-ligne > span {
  display: block; transform: translateY(102%);
  transition: transform 900ms var(--e-out);
}
.vu .masque-ligne > span { transform: none; }
.vu .masque-ligne:nth-child(2) > span { transition-delay: 90ms; }
.vu .masque-ligne:nth-child(3) > span { transition-delay: 180ms; }

/* ==========================================================================
   06. BOUTONS
   ========================================================================== */
.btn {
  --biseau: 13px;
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: .7rem; padding: 1.02rem 1.9rem; min-height: 52px;
  font-family: var(--ff-texte); font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: -.005em; text-align: center; white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
  transition: background-color var(--t-rapide) var(--e-out), color var(--t-rapide) var(--e-out),
              transform var(--t-rapide) var(--e-out);
  overflow: hidden; isolation: isolate;
}
.btn svg { flex: none; transition: transform var(--t-moyen) var(--e-out); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }

/* Balayage lumineux au survol */
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.22) 50%, transparent 80%);
  transform: translateX(-110%);
  transition: transform 620ms var(--e-out);
}
.btn:hover::before { transform: translateX(110%); }

.btn--primaire { background: var(--mauve); color: #fff; }
.btn--primaire:hover { background: #6231e0; }

.btn--fantome {
  background: transparent; color: var(--txt-clair);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}
.btn--fantome:hover { background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px var(--mauve-clair); }
.sur-clair .btn--fantome, .section--clair .btn--fantome {
  color: var(--txt-fonce); box-shadow: inset 0 0 0 1px rgba(35,31,32,.22);
}
.sur-clair .btn--fantome:hover, .section--clair .btn--fantome:hover {
  background: rgba(35,31,32,.05); box-shadow: inset 0 0 0 1px var(--mauve);
}

.btn--sombre { background: var(--noir-marque); color: #fff; }
.btn--sombre:hover { background: #000; }

.btn--bloc { width: 100%; }
.btn--sm { padding: .72rem 1.25rem; min-height: 44px; font-size: var(--fs-xs); --biseau: 10px; }
.btn--lg { padding: 1.2rem 2.3rem; min-height: 60px; font-size: 1.0625rem; --biseau: 16px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* ==========================================================================
   07. COMPOSANTS
   ========================================================================== */

/* — Carte holographique : elle s'avance vers l'utilisateur — */
.carte {
  --biseau: 18px;
  position: relative; padding: clamp(1.6rem, 2.6vw, 2.2rem);
  background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  box-shadow: inset 0 0 0 1px var(--trait-clair);
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
  transition: transform var(--t-moyen) var(--e-out), background-color var(--t-moyen) var(--e-out),
              box-shadow var(--t-moyen) var(--e-out);
  transform-style: preserve-3d;
  will-change: transform;
}
.carte h3 { margin-bottom: var(--s-3); }
.carte p { color: var(--txt-clair-2); }
.carte--holo:hover {
  box-shadow: inset 0 0 0 1px rgba(155,125,255,.45), 0 22px 60px -24px rgba(84,36,201,.75);
}
.section--clair .carte, .sur-clair .carte {
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(35,31,32,.10), 0 1px 2px rgba(35,31,32,.04);
}
.section--clair .carte p, .sur-clair .carte p { color: var(--txt-fonce-2); }
.section--clair .carte--holo:hover, .sur-clair .carte--holo:hover {
  box-shadow: inset 0 0 0 1px rgba(84,36,201,.35), 0 24px 60px -26px rgba(84,36,201,.45);
}

/* Numéro d'index en filigrane */
.carte__num {
  font-family: var(--ff-mono); font-size: var(--fs-mono); letter-spacing: .16em;
  color: var(--acier); margin-bottom: var(--s-5); display: block;
}

/* Icône encadrée */
.icone-cadre {
  width: 48px; height: 48px; display: grid; place-items: center;
  margin-bottom: var(--s-5); color: var(--mauve-clair);
  background: rgba(84,36,201,.16);
  box-shadow: inset 0 0 0 1px rgba(155,125,255,.30);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
}
.section--clair .icone-cadre, .sur-clair .icone-cadre {
  color: var(--mauve); background: rgba(84,36,201,.09);
  box-shadow: inset 0 0 0 1px rgba(84,36,201,.20);
}

/* — Étiquette / pastille — */
.pastille {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .34rem .7rem; font-family: var(--ff-mono); font-size: var(--fs-mono);
  letter-spacing: .12em; text-transform: uppercase;
  background: rgba(155,125,255,.14); color: var(--mauve-clair);
  box-shadow: inset 0 0 0 1px rgba(155,125,255,.28);
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
}
.pastille--ambre { background: rgba(232,179,65,.16); color: var(--ambre); box-shadow: inset 0 0 0 1px rgba(232,179,65,.34); }
.pastille--vert  { background: rgba(47,191,113,.14); color: var(--succes); box-shadow: inset 0 0 0 1px rgba(47,191,113,.32); }
.sur-clair .pastille, .section--clair .pastille { background: rgba(84,36,201,.10); color: var(--mauve); box-shadow: inset 0 0 0 1px rgba(84,36,201,.22); }

/* — Liste de vérifications — */
.liste-check li {
  position: relative; padding-left: 1.9rem; margin-bottom: .72rem;
  color: var(--txt-clair-2); font-size: var(--fs-sm);
}
.liste-check li::before {
  content: ''; position: absolute; left: 0; top: .48em;
  width: 11px; height: 6px; border-left: 1.8px solid var(--mauve-clair);
  border-bottom: 1.8px solid var(--mauve-clair); transform: rotate(-45deg);
}
.liste-check li.non { color: var(--acier); }
.liste-check li.non::before {
  width: 10px; height: 10px; border: 0; transform: none; top: .55em;
  background: linear-gradient(45deg, transparent 44%, var(--acier) 44%, var(--acier) 56%, transparent 56%),
              linear-gradient(-45deg, transparent 44%, var(--acier) 44%, var(--acier) 56%, transparent 56%);
}
.section--clair .liste-check li, .sur-clair .liste-check li { color: var(--txt-fonce-2); }
.section--clair .liste-check li::before, .sur-clair .liste-check li::before { border-color: var(--mauve); }

/* — Statistique — */
.stat__n {
  font-family: var(--ff-titre); font-weight: 800;
  font-size: clamp(2.4rem, 4.4vw, 3.6rem); line-height: 1;
  letter-spacing: -.04em; color: var(--blanc);
}
.stat__l {
  margin-top: .6rem; font-family: var(--ff-mono); font-size: var(--fs-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--acier);
}
.sur-clair .stat__n, .section--clair .stat__n { color: var(--noir-marque); }

/* — Bandeau défilant des secteurs — */
.bandeau {
  overflow: hidden; padding-block: 1.4rem;
  border-block: 1px solid var(--trait-clair);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.bandeau__piste { display: flex; width: max-content; animation: defile 46s linear infinite; }
.bandeau:hover .bandeau__piste { animation-play-state: paused; }
.bandeau__piste span {
  display: inline-flex; align-items: center; gap: 1.6rem; padding-inline: 1.6rem;
  font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: .16em;
  text-transform: uppercase; color: var(--acier); white-space: nowrap;
}
.bandeau__piste span::after { content: ''; width: 4px; height: 4px; background: var(--mauve); }
@keyframes defile { to { transform: translateX(-50%); } }

/* — FAQ — */
.faq { border-top: 1px solid var(--trait-clair); }
.faq__item { border-bottom: 1px solid var(--trait-clair); }
.faq__q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-5); padding: 1.5rem 0; text-align: left;
  font-family: var(--ff-titre); font-size: clamp(1.02rem, 1.5vw, 1.22rem);
  font-weight: 700; letter-spacing: -.015em; color: var(--txt-clair);
  transition: color var(--t-rapide) var(--e-out);
}
.faq__q:hover { color: var(--mauve-clair); }
.faq__signe { position: relative; flex: none; width: 15px; height: 15px; margin-top: .42rem; }
.faq__signe::before, .faq__signe::after {
  content: ''; position: absolute; background: var(--mauve-clair);
  transition: transform var(--t-moyen) var(--e-out);
}
.faq__signe::before { top: 7px; left: 0; width: 15px; height: 1.5px; }
.faq__signe::after  { left: 7px; top: 0; width: 1.5px; height: 15px; }
.faq__item.ouvert .faq__signe::after { transform: rotate(90deg) scaleX(0); }
.faq__r { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-moyen) var(--e-in-out); }
.faq__item.ouvert .faq__r { grid-template-rows: 1fr; }
.faq__r > div { overflow: hidden; }
.faq__r p { padding-bottom: 1.5rem; color: var(--txt-clair-2); max-width: 62ch; }
.section--clair .faq, .sur-clair .faq { border-color: var(--trait-fonce); }
.section--clair .faq__item, .sur-clair .faq__item { border-color: var(--trait-fonce); }
.section--clair .faq__q, .sur-clair .faq__q { color: var(--txt-fonce); }
.section--clair .faq__q:hover, .sur-clair .faq__q:hover { color: var(--mauve); }
.section--clair .faq__signe::before, .section--clair .faq__signe::after,
.sur-clair .faq__signe::before, .sur-clair .faq__signe::after { background: var(--mauve); }
.section--clair .faq__r p, .sur-clair .faq__r p { color: var(--txt-fonce-2); }

/* ==========================================================================
   08. EN-TÊTE, MENU HOLO, PIED DE PAGE
   ========================================================================== */
.entete {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--entete-h);
  display: flex; align-items: center;
  transition: background-color var(--t-moyen) var(--e-out), box-shadow var(--t-moyen) var(--e-out);
}
.entete.colle {
  background: rgba(18,16,17,.82);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 var(--trait-clair);
}
.entete__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); width: 100%; }
.logo { display: flex; align-items: center; flex: none; }
.logo img { height: 30px; width: auto; }

.nav { display: flex; align-items: center; gap: clamp(.6rem, 1.6vw, 1.7rem); }
.nav a {
  position: relative; font-size: var(--fs-sm); font-weight: 500; color: var(--txt-clair-2);
  padding: .5rem 0; transition: color var(--t-rapide) var(--e-out);
}
.nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--mauve-clair); transition: width var(--t-moyen) var(--e-out);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--blanc); }
.nav a:hover::after, .nav a[aria-current="page"]::after { width: 100%; }

.entete__actions { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.tel-entete {
  font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: .06em;
  color: var(--txt-clair-2); transition: color var(--t-rapide) var(--e-out);
}
.tel-entete:hover { color: var(--mauve-clair); }

/* — Bouton du menu — */
.bascule {
  display: block; width: 46px; height: 46px; position: relative; flex: none;
  box-shadow: inset 0 0 0 1px var(--trait-clair);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
}
.bascule i {
  position: absolute; left: 13px; width: 20px; height: 1.5px; background: var(--txt-clair);
  transition: transform var(--t-moyen) var(--e-out), opacity var(--t-rapide) linear;
}
.bascule i:nth-child(1) { top: 17px; }
.bascule i:nth-child(2) { top: 23px; }
.bascule i:nth-child(3) { top: 29px; width: 12px; }
.menu-ouvert .bascule i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-ouvert .bascule i:nth-child(2) { opacity: 0; }
.menu-ouvert .bascule i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); width: 20px; }

/* — LE MENU HOLOGRAPHIQUE — les panneaux arrivent vers l'utilisateur — */
.holo {
  position: fixed; inset: 0; z-index: 99; display: grid; align-content: center;
  padding: calc(var(--entete-h) + 2rem) var(--gouttiere) 3rem;
  background: rgba(11,9,10,.94);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  perspective: 1100px; perspective-origin: 50% 42%;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t-moyen) var(--e-out), visibility 0s linear var(--t-moyen);
  overflow-y: auto;
}
.menu-ouvert .holo {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity var(--t-moyen) var(--e-out), visibility 0s;
}
.holo::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(155,125,255,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(155,125,255,.07) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000, transparent 78%);
}
.holo__in { position: relative; width: 100%; max-width: var(--largeur); margin-inline: auto; }
.holo__grille { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }

.holo__liens li {
  transform: translateZ(-320px) translateY(26px); opacity: 0;
  transition: transform 620ms var(--e-out), opacity 420ms var(--e-out);
}
.menu-ouvert .holo__liens li { transform: none; opacity: 1; }
.menu-ouvert .holo__liens li:nth-child(1) { transition-delay: 40ms; }
.menu-ouvert .holo__liens li:nth-child(2) { transition-delay: 100ms; }
.menu-ouvert .holo__liens li:nth-child(3) { transition-delay: 160ms; }
.menu-ouvert .holo__liens li:nth-child(4) { transition-delay: 220ms; }
.menu-ouvert .holo__liens li:nth-child(5) { transition-delay: 280ms; }
.menu-ouvert .holo__liens li:nth-child(6) { transition-delay: 340ms; }
.menu-ouvert .holo__liens li:nth-child(7) { transition-delay: 400ms; }
.menu-ouvert .holo__liens li:nth-child(8) { transition-delay: 460ms; }

/* Les numéros 01-09 ont été retirés : purement décoratifs, aucune valeur SEO.
   Le repère cyan qui apparaît au survol garde le côté « instrument » sans les chiffres. */
.holo__lien {
  position: relative; display: flex; align-items: baseline; padding: .42rem 0;
  font-family: var(--ff-titre); font-weight: 800;
  font-size: clamp(1.75rem, 4.6vw, 3.1rem); line-height: 1.1; letter-spacing: -.035em;
  color: var(--txt-clair); transition: color var(--t-rapide) var(--e-out), transform var(--t-moyen) var(--e-out);
}
.holo__lien::before {
  content: ''; position: absolute; left: -.85em; top: 50%;
  width: .5em; height: 2px; background: var(--cyan);
  transform: translateY(-50%) scaleX(0); transform-origin: left center;
  opacity: 0; transition: transform var(--t-moyen) var(--e-out), opacity var(--t-rapide) var(--e-out);
}
.holo__lien:hover, .holo__lien:focus-visible { color: var(--mauve-clair); transform: translateX(10px); }
.holo__lien:hover::before, .holo__lien:focus-visible::before { transform: translateY(-50%) scaleX(1); opacity: 1; }

.holo__carte {
  transform: translateZ(-260px); opacity: 0;
  transition: transform 720ms var(--e-out) 240ms, opacity 520ms var(--e-out) 240ms;
}
.menu-ouvert .holo__carte { transform: none; opacity: 1; }

/* — Barre d'action fixe sur mobile — */
.barre-mobile {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none;
  gap: 1px; background: var(--trait-clair);
  box-shadow: 0 -1px 0 var(--trait-clair), 0 -18px 40px -20px rgba(0,0,0,.9);
  transform: translateY(100%); transition: transform var(--t-moyen) var(--e-out);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.barre-mobile.visible { transform: none; }
.barre-mobile a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .55rem;
  padding: 1.05rem .6rem; font-size: var(--fs-sm); font-weight: 600;
  background: var(--encre-2); color: var(--txt-clair);
}
.barre-mobile a.primaire { background: var(--mauve); color: #fff; }

/* — Pied de page — */
.pied { background: var(--encre-2); padding-top: clamp(3.5rem, 7vw, 5.5rem); }
/* Trois colonnes maintenant : les métiers ont leur propre bande au-dessus. */
/* ---------- Le sélecteur de langue ---------- */
.langue {
  --biseau: 8px;
  display: inline-block; padding: .34rem .6rem;
  font-family: var(--ff-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--txt-clair-2); text-decoration: none; white-space: nowrap;
  background: rgba(155,125,255,.06);
  box-shadow: inset 0 0 0 1px rgba(155,125,255,.22);
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
  transition: color var(--t-rapide) var(--e-out), background-color var(--t-rapide) var(--e-out),
              box-shadow var(--t-rapide) var(--e-out);
}
.langue:hover, .langue:focus-visible {
  color: var(--txt-clair);
  background: rgba(84,36,201,.28);
  box-shadow: inset 0 0 0 1px rgba(155,125,255,.55);
}
.holo__langue { font-family: var(--ff-mono); font-size: var(--fs-mono); letter-spacing: .14em; text-transform: uppercase; }

.pied__haut { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--s-7); }

/* ---------- La bande « par métier », sur toute la largeur ---------- */
.pied__metiers {
  padding-bottom: clamp(2rem, 4vw, 3rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid rgba(155,125,255,.14);
}
.pied__metiers-liste {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin: var(--s-4) 0 0; padding: 0; list-style: none;
}
.pied__metiers-liste a {
  --biseau: 10px;
  display: inline-block; padding: .5rem .85rem;
  font-size: var(--fs-sm); line-height: 1.2; color: var(--txt-clair-2);
  text-decoration: none;
  background: rgba(155,125,255,.05);
  box-shadow: inset 0 0 0 1px rgba(155,125,255,.16);
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
  transition: color var(--t-rapide) var(--e-out), background-color var(--t-rapide) var(--e-out),
              box-shadow var(--t-rapide) var(--e-out);
}
.pied__metiers-liste a:hover, .pied__metiers-liste a:focus-visible {
  color: var(--txt-clair);
  background: rgba(84,36,201,.20);
  box-shadow: inset 0 0 0 1px rgba(155,125,255,.42);
}
.pied h4, .pied__titre {
  font-family: var(--ff-mono); font-size: var(--fs-mono); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--acier);
  margin-bottom: var(--s-4);
}
.pied li { margin-bottom: .68rem; }
.pied li a { font-size: var(--fs-sm); color: var(--txt-clair-2); transition: color var(--t-rapide) var(--e-out); }
.pied li a:hover { color: var(--mauve-clair); }
.pied__bas {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-block: 1.6rem;
  border-top: 1px solid var(--trait-clair);
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between;
  font-size: var(--fs-xs); color: var(--acier);
}
.pied__bas a:hover { color: var(--mauve-clair); }
.pied__logo { height: 34px; width: auto; margin-bottom: var(--s-4); }

/* ==========================================================================
   09. BLOCS DE PAGE
   ========================================================================== */

/* — Héros — */
.heros {
  position: relative; padding-top: calc(var(--entete-h) + clamp(3.5rem, 8vw, 7rem));
  padding-bottom: clamp(3.5rem, 7vw, 6rem); overflow: hidden;
}
.heros__grille { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.heros__note {
  display: flex; gap: .9rem; align-items: flex-start; font-size: var(--fs-sm);
  color: var(--txt-clair-2); max-width: 46ch;
}

/* Panneau de prix flottant du héros */
.panneau {
  --biseau: 22px; position: relative; padding: clamp(1.6rem, 2.5vw, 2.1rem);
  background: linear-gradient(155deg, rgba(84,36,201,.20), rgba(255,255,255,.03) 60%);
  box-shadow: inset 0 0 0 1px rgba(155,125,255,.30), 0 34px 80px -34px rgba(84,36,201,.85);
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
}
.panneau__prix {
  font-family: var(--ff-titre); font-weight: 800; letter-spacing: -.04em;
  font-size: clamp(2.6rem, 5vw, 3.5rem); line-height: 1; color: #fff;
}
.panneau__prix sup { font-size: .42em; vertical-align: .9em; margin-left: .1em; font-weight: 700; }
.panneau__prix small { font-size: .28em; font-family: var(--ff-texte); font-weight: 500; color: var(--txt-clair-2); letter-spacing: 0; margin-left: .3em; }

/* — Grille de forfaits — */
.forfaits { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); align-items: stretch; }
.forfait {
  --biseau: 20px; position: relative; display: flex; flex-direction: column;
  padding: clamp(1.7rem, 2.6vw, 2.3rem);
  background: linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  box-shadow: inset 0 0 0 1px var(--trait-clair);
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
  transition: transform var(--t-moyen) var(--e-out), box-shadow var(--t-moyen) var(--e-out);
  transform-style: preserve-3d;
}
.forfait--vedette {
  background: linear-gradient(165deg, rgba(84,36,201,.26), rgba(255,255,255,.02) 62%);
  box-shadow: inset 0 0 0 1px rgba(155,125,255,.42), 0 30px 70px -34px rgba(84,36,201,.8);
}
.forfait__nom {
  font-family: var(--ff-titre); font-weight: 800; font-size: 1.05rem;
  letter-spacing: .12em; text-transform: uppercase; color: #fff;
}
.forfait__pour { font-size: var(--fs-sm); color: var(--txt-clair-2); margin-top: .5rem; min-height: 3.1em; }
.forfait__prix {
  font-family: var(--ff-titre); font-weight: 800; letter-spacing: -.04em;
  font-size: clamp(2.5rem, 4.4vw, 3.2rem); line-height: 1; color: #fff;
  margin-top: var(--s-5);
}
.forfait__prix sup { font-size: .4em; vertical-align: .95em; font-weight: 700; }
.forfait__prix small { font-size: .27em; font-family: var(--ff-texte); font-weight: 500; letter-spacing: 0; color: var(--txt-clair-2); }
.forfait__comptant { font-family: var(--ff-mono); font-size: var(--fs-mono); color: var(--acier); margin-top: .7rem; letter-spacing: .04em; }
.forfait__sep { height: 1px; background: var(--trait-clair); margin-block: var(--s-5); }
.forfait .liste-check { flex: 1; }
.forfait .btn { margin-top: var(--s-6); }
.forfait__ruban {
  position: absolute; top: 0; right: 0; z-index: 2;
  padding: .38rem .8rem; font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase;
  background: var(--ambre); color: #241f00; font-weight: 500;
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%);
}

/* Bascule mensuel / comptant */
.bascule-prix {
  display: inline-flex; padding: 4px; gap: 2px; background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px var(--trait-clair);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.bascule-prix button {
  padding: .6rem 1.1rem; font-size: var(--fs-xs); font-weight: 600;
  color: var(--txt-clair-2); transition: background-color var(--t-rapide), color var(--t-rapide);
}
.bascule-prix button[aria-pressed="true"] { background: var(--mauve); color: #fff; }
.section--clair .bascule-prix, .sur-clair .bascule-prix { background: rgba(35,31,32,.05); box-shadow: inset 0 0 0 1px var(--trait-fonce); }
.section--clair .bascule-prix button, .sur-clair .bascule-prix button { color: var(--txt-fonce-2); }
.section--clair .bascule-prix button[aria-pressed="true"], .sur-clair .bascule-prix button[aria-pressed="true"] { color: #fff; }

/* — Étapes du processus — */
.etape {
  display: grid; grid-template-columns: 90px 1fr; gap: var(--s-6);
  padding-block: clamp(1.8rem, 3vw, 2.6rem); border-top: 1px solid var(--trait-clair);
}
.etape__n {
  font-family: var(--ff-titre); font-weight: 800; font-size: clamp(2rem, 3.4vw, 2.9rem);
  line-height: 1; letter-spacing: -.05em; color: transparent;
  -webkit-text-stroke: 1px var(--mauve-clair);
}
.etape__d { font-family: var(--ff-mono); font-size: var(--fs-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); margin-bottom: .7rem; }
.section--clair .etape, .sur-clair .etape { border-color: var(--trait-fonce); }
.section--clair .etape__n, .sur-clair .etape__n { -webkit-text-stroke-color: var(--mauve); }
.section--clair .etape__d, .sur-clair .etape__d { color: var(--mauve); }

/* — Vignette projet / article — */
.vignette { display: flex; flex-direction: column; position: relative; height: 100%; }
.vignette > .kicker { margin-top: auto; padding-top: var(--s-4); }
.vignette__img {
  --biseau: 20px; position: relative; overflow: hidden; aspect-ratio: 16 / 11;
  background: var(--encre-3);
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
}
.vignette__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--e-out); }
.vignette:hover .vignette__img img { transform: scale(1.05); }
.vignette__meta { margin-top: var(--s-4); display: flex; gap: .8rem; align-items: center; font-family: var(--ff-mono); font-size: var(--fs-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--acier); }
.vignette h3 { margin-top: .7rem; transition: color var(--t-rapide) var(--e-out); }
.vignette:hover h3 { color: var(--mauve-clair); }
.section--clair .vignette:hover h3, .sur-clair .vignette:hover h3 { color: var(--mauve); }

/* Emplacement réservé de projet — cadre holo vide */
.reserve {
  --biseau: 20px; position: relative; aspect-ratio: 16 / 11; display: grid; place-items: center;
  background:
    repeating-linear-gradient(135deg, rgba(155,125,255,.05) 0 10px, transparent 10px 20px),
    rgba(255,255,255,.02);
  box-shadow: inset 0 0 0 1px rgba(155,125,255,.20);
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
}
.reserve__txt { font-family: var(--ff-mono); font-size: var(--fs-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--acier); text-align: center; }
.reserve__pulse { width: 8px; height: 8px; background: var(--cyan); margin: 0 auto .9rem; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: .25; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } }

/* — Appel à l'action final — */
.cta-final { position: relative; overflow: hidden; background: var(--encre-2); }
.cta-final::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 100% at 50% 120%, rgba(84,36,201,.42), transparent 70%);
}

/* — Tableau comparatif — */
.tableau-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tableau { min-width: 720px; font-size: var(--fs-sm); }
.tableau th, .tableau td { padding: 1rem 1.1rem; text-align: left; border-bottom: 1px solid var(--trait-clair); }
.tableau thead th { font-family: var(--ff-mono); font-size: var(--fs-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--acier); font-weight: 500; }
.tableau tbody th { font-weight: 500; color: var(--txt-clair-2); }
.tableau td { text-align: center; }
.tableau td.oui { color: var(--mauve-clair); }
.tableau td.non { color: var(--acier); }
.tableau .col-vedette { background: rgba(84,36,201,.12); }
.section--clair .tableau th, .section--clair .tableau td, .sur-clair .tableau th, .sur-clair .tableau td { border-color: var(--trait-fonce); }
.section--clair .tableau tbody th, .sur-clair .tableau tbody th { color: var(--txt-fonce-2); }
.section--clair .tableau td.oui, .sur-clair .tableau td.oui { color: var(--mauve); }

/* — Article — */
.prose { max-width: 72ch; }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-top: var(--s-8); margin-bottom: var(--s-4); }
.prose h3 { margin-top: var(--s-7); margin-bottom: var(--s-3); }
.prose p { margin-bottom: var(--s-4); color: var(--txt-clair-2); }
.prose ul { margin-bottom: var(--s-5); }
.prose ul li { position: relative; padding-left: 1.5rem; margin-bottom: .6rem; color: var(--txt-clair-2); }
.prose ul li::before { content: ''; position: absolute; left: 0; top: .68em; width: 7px; height: 7px; background: var(--mauve); }
.prose blockquote {
  margin: var(--s-7) 0; padding: var(--s-5) var(--s-6);
  border-left: 2px solid var(--mauve); background: rgba(84,36,201,.09);
  font-size: 1.1rem; color: var(--txt-clair);
}
.section--clair .prose p, .sur-clair .prose p, .section--clair .prose li, .sur-clair .prose li { color: var(--txt-fonce-2); }

/* ==========================================================================
   10. FORMULAIRES
   ========================================================================== */
.champ { margin-bottom: var(--s-5); }
.champ label {
  display: block; margin-bottom: .55rem;
  font-family: var(--ff-mono); font-size: var(--fs-mono);
  letter-spacing: .13em; text-transform: uppercase; color: var(--acier);
}
.champ .requis { color: var(--mauve-clair); margin-left: .25rem; }
.champ input, .champ textarea, .champ select {
  width: 100%; padding: .95rem 1.05rem; min-height: 52px;
  background: rgba(255,255,255,.04); color: var(--txt-clair);
  border: 0; box-shadow: inset 0 0 0 1px var(--trait-clair);
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
  transition: box-shadow var(--t-rapide) var(--e-out), background-color var(--t-rapide) var(--e-out);
  font-size: 16px; /* évite le zoom automatique sur iOS */
}
.champ textarea { min-height: 148px; resize: vertical; line-height: 1.6; }
.champ select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--acier) 50%), linear-gradient(135deg, var(--acier) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.champ input::placeholder, .champ textarea::placeholder { color: #6d666a; }
.champ input:focus, .champ textarea:focus, .champ select:focus {
  outline: none; background: rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 1px var(--mauve-clair), 0 0 0 3px rgba(155,125,255,.16);
}
.champ input[aria-invalid="true"], .champ textarea[aria-invalid="true"], .champ select[aria-invalid="true"] {
  box-shadow: inset 0 0 0 1px var(--erreur);
}
.champ__err { display: none; margin-top: .5rem; font-size: var(--fs-xs); color: #ff8a8d; }
.champ__err.actif { display: block; }
.champ__aide { margin-top: .5rem; font-size: var(--fs-xs); color: var(--acier); }

.section--clair .champ input, .section--clair .champ textarea, .section--clair .champ select,
.sur-clair .champ input, .sur-clair .champ textarea, .sur-clair .champ select {
  background: #fff; color: var(--txt-fonce); box-shadow: inset 0 0 0 1px rgba(35,31,32,.16);
}
.section--clair .champ label, .sur-clair .champ label { color: var(--txt-fonce-2); }
.section--clair .champ input:focus, .sur-clair .champ input:focus,
.section--clair .champ textarea:focus, .sur-clair .champ textarea:focus,
.section--clair .champ select:focus, .sur-clair .champ select:focus {
  box-shadow: inset 0 0 0 1px var(--mauve), 0 0 0 3px rgba(84,36,201,.14);
}

/* Cases à cocher / radios stylisées */
.choix { display: grid; gap: .7rem; }
.choix label {
  display: flex; align-items: flex-start; gap: .85rem; padding: 1rem 1.15rem; cursor: pointer;
  font-family: var(--ff-texte); font-size: var(--fs-sm); text-transform: none; letter-spacing: 0;
  color: var(--txt-clair-2); margin: 0;
  box-shadow: inset 0 0 0 1px var(--trait-clair);
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
  transition: box-shadow var(--t-rapide), background-color var(--t-rapide), color var(--t-rapide);
}
.choix label:hover { background: rgba(255,255,255,.04); }
.choix input { position: absolute; opacity: 0; width: 0; height: 0; }
.choix .case {
  flex: none; width: 18px; height: 18px; margin-top: 2px; position: relative;
  box-shadow: inset 0 0 0 1px var(--acier); transition: all var(--t-rapide);
}
.choix input:checked ~ .case { background: var(--mauve); box-shadow: inset 0 0 0 1px var(--mauve); }
.choix .case::after {
  content: ''; position: absolute; left: 5px; top: 4px; width: 6px; height: 10px;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(45deg) scale(0); transition: transform var(--t-rapide) var(--e-out);
}
.choix input:checked ~ .case::after { transform: rotate(45deg) scale(1); }
.choix input:checked ~ span:last-child { color: var(--blanc); }
.choix label:has(input:checked) { box-shadow: inset 0 0 0 1px var(--mauve-clair); background: rgba(84,36,201,.12); }
.choix input:focus-visible ~ .case { box-shadow: inset 0 0 0 1px var(--cyan), 0 0 0 3px rgba(77,225,255,.3); }
.section--clair .choix label, .sur-clair .choix label { color: var(--txt-fonce-2); box-shadow: inset 0 0 0 1px rgba(35,31,32,.14); }
.section--clair .choix label:has(input:checked), .sur-clair .choix label:has(input:checked) { box-shadow: inset 0 0 0 1px var(--mauve); background: rgba(84,36,201,.07); }
.section--clair .choix input:checked ~ span:last-child, .sur-clair .choix input:checked ~ span:last-child { color: var(--noir-marque); }

/* Pot de miel — invisible pour l'humain, visible pour le robot */
.pot-de-miel {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden; opacity: 0;
}

/* États du formulaire */
.form-etat { display: none; margin-top: var(--s-5); padding: 1.1rem 1.3rem; font-size: var(--fs-sm);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.form-etat.actif { display: flex; gap: .8rem; align-items: flex-start; }
.form-etat--ok { background: rgba(47,191,113,.14); color: #7fe3ab; box-shadow: inset 0 0 0 1px rgba(47,191,113,.32); }
.form-etat--err { background: rgba(229,72,77,.13); color: #ff9a9d; box-shadow: inset 0 0 0 1px rgba(229,72,77,.34); }
.section--clair .form-etat--ok, .sur-clair .form-etat--ok { color: #14663c; }
.section--clair .form-etat--err, .sur-clair .form-etat--err { color: #9c1f23; }

/* Bouton en chargement */
.btn.charge { pointer-events: none; color: transparent !important; }
.btn.charge::after {
  content: ''; position: absolute; width: 19px; height: 19px;
  border: 2px solid rgba(255,255,255,.28); border-top-color: #fff; border-radius: 50%;
  animation: tourne .7s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }

/* Progression multi-étapes */
.progression { display: flex; gap: 2px; margin-bottom: var(--s-7); }
.progression div { flex: 1; height: 3px; background: rgba(255,255,255,.10); transition: background-color var(--t-moyen) var(--e-out); }
.progression div.fait { background: var(--mauve); }
.etape-form { display: none; }
.etape-form.actif { display: block; animation: entre 420ms var(--e-out); }
@keyframes entre { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Récapitulatif de commande */
.recap { --biseau: 16px; position: sticky; top: calc(var(--entete-h) + 1.5rem);
  padding: var(--s-6); background: linear-gradient(160deg, rgba(84,36,201,.18), rgba(255,255,255,.02));
  box-shadow: inset 0 0 0 1px rgba(155,125,255,.28);
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%); }
.recap__ligne { display: flex; justify-content: space-between; gap: 1rem; padding-block: .6rem; font-size: var(--fs-sm); color: var(--txt-clair-2); }
.recap__ligne strong { color: #fff; }
.recap__total { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--trait-clair);
  display: flex; justify-content: space-between; align-items: baseline; }
.recap__total b { font-family: var(--ff-titre); font-size: 1.9rem; letter-spacing: -.03em; color: #fff; }

/* ==========================================================================
   11. RÉACTIVITÉ
   ========================================================================== */
@media (max-width: 1080px) {
  .heros__grille { grid-template-columns: 1fr; }
  .pied__haut { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .pied__metiers-liste a { font-size: .82rem; padding: .45rem .7rem; }
  .pied__metiers-liste { gap: .45rem; }
  .forfaits { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .holo__grille { grid-template-columns: 1fr; }
  .holo__carte { display: none; }
}
@media (max-width: 900px) {
  .nav, .tel-entete { display: none; }
  .entete__actions .btn { display: none; }
  .g-3, .g-4 { grid-template-columns: repeat(2, 1fr); }
  .barre-mobile { display: flex; }
  body { padding-bottom: 0; }
}
@media (max-width: 640px) {
  :root { --entete-h: 66px; --biseau: 12px; }
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .pied__haut { grid-template-columns: 1fr; }
  .etape { grid-template-columns: 1fr; gap: var(--s-3); }
  .etape__n { font-size: 2rem; }
  .pied__bas { flex-direction: column; gap: .8rem; }
  .logo img { height: 26px; }
  .langue { padding: .3rem .48rem; letter-spacing: .08em; }
  .heros { padding-top: calc(var(--entete-h) + 2.5rem); }
}

/* Affichage conditionnel */
.mobile-seul { display: none; }
@media (max-width: 900px) { .mobile-seul { display: block; } .bureau-seul { display: none; } }

/* ==========================================================================
   12. ACCESSIBILITÉ ET PRÉFÉRENCES
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .rev, .holo__liens li, .holo__carte, .masque-ligne > span { opacity: 1 !important; transform: none !important; }
  .bandeau__piste { animation: none; }
}
@media (prefers-contrast: more) {
  :root { --txt-clair-2: #E4E0E2; --acier: #ADA6AA; --trait-clair: rgba(255,255,255,.24); }
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
@media print {
  .entete, .barre-mobile, .holo, .cta-final { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   13. GABARITS DE COLONNES (remplacent les styles en ligne, réactifs)
   ========================================================================== */
.g-texte-faq   { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.g-form-aside  { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:clamp(2rem,5vw,4rem); align-items:start; }
.g-form-aside2 { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.g-projet      { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:clamp(2rem,5vw,4.5rem); align-items:start; }

@media (max-width: 980px) {
  .g-texte-faq, .g-form-aside, .g-form-aside2, .g-projet { grid-template-columns:1fr; }
  .recap { position:static; }
  .g-projet aside { position:static !important; }
}

/* Les tableaux larges défilent dans leur propre boîte, jamais la page */
.tableau-wrap { max-width:100%; }
.grille > *, .g-2 > *, .g-3 > *, .g-4 > * { min-width:0; }

/* Sécurité anti-débordement : rien ne dépasse la page horizontalement */
html, body { max-width:100%; overflow-x:clip; }
@supports not (overflow-x: clip) { html, body { overflow-x:hidden; } }

/* ==========================================================================
   14. AJUSTEMENTS FINS (issus de la vérification sur appareils réels)
   ========================================================================== */

/* Le menu holographique garde son appel à l'action sur mobile */
@media (max-width: 1080px) {
  .holo__carte { display: block; transform: none; opacity: 1; }
  .holo__carte .carte { padding: 1.4rem 1.5rem; }
  .holo__carte h3 { font-size: 1.15rem; }
  .holo__carte .separateur { display: none; }
  .holo__grille { gap: 2.2rem; }
  .holo { align-content: start; padding-top: calc(var(--entete-h) + 1.5rem); }
}

/* Boutons pleine largeur dans les blocs d'appel à l'action sur petit écran */
@media (max-width: 640px) {
  .heros .rangee > .btn,
  .cta-final .rangee > .btn,
  .tete-section + .rangee > .btn { width: 100%; }
  .heros .rangee, .cta-final .rangee { gap: .75rem; }
  .kicker { letter-spacing: .11em; font-size: .6875rem; }
  .kicker::before { width: 14px; }
  .stat__n { font-size: 2.1rem; }
}

/* Les cartes de forfaits gardent leurs boutons alignés */
.forfait { height: 100%; }

/* Les vignettes d'une même rangée ont la même hauteur */
.grille.g-3 > .vignette, .grille.g-2 > .vignette { height: 100%; }

/* Titre visuel sans niveau sémantique (évite les sauts de hiérarchie) */
.comme-h3 {
  font-family: var(--ff-titre); font-size: var(--fs-h3); font-weight: 700;
  line-height: 1.15; letter-spacing: -.02em; color: var(--txt-clair);
}
.section--clair .comme-h3, .sur-clair .comme-h3 { color: var(--txt-fonce); }
.carte .comme-h3 { margin-bottom: var(--s-3); }

/* ==========================================================================
   15. TRAIT DU BISEAU
   Un contour dessiné avec box-shadow ne suit pas la découpe en diagonale :
   les deux bords ne se rejoignent pas. On trace la diagonale manquante
   avec un dégradé placé exactement dans le coin biseauté.
   ========================================================================== */
.trait-biseau,
.btn--fantome,
.bascule,
.champ input,
.champ textarea,
.choix label {
  background-image:
    linear-gradient(45deg,
      transparent calc(50% - .7px),
      var(--trait-b, rgba(255,255,255,.22)) calc(50% - .7px),
      var(--trait-b, rgba(255,255,255,.22)) calc(50% + .7px),
      transparent calc(50% + .7px));
  background-size: var(--biseau) var(--biseau);
  background-position: right top;
  background-repeat: no-repeat;
}
.champ select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--acier) 50%),
    linear-gradient(135deg, var(--acier) 50%, transparent 50%),
    linear-gradient(45deg,
      transparent calc(50% - .7px), var(--trait-b, rgba(255,255,255,.22)) calc(50% - .7px),
      var(--trait-b, rgba(255,255,255,.22)) calc(50% + .7px), transparent calc(50% + .7px));
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px), right top;
  background-size: 5px 5px, 5px 5px, 11px 11px;
  background-repeat: no-repeat;
}
.btn--fantome { --biseau: 13px; --trait-b: rgba(255,255,255,.24); }
.btn--fantome:hover { --trait-b: var(--mauve-clair); }
.champ input, .champ textarea, .choix label { --biseau: 11px; --trait-b: rgba(255,255,255,.12); }
.champ input:focus, .champ textarea:focus, .champ select:focus { --trait-b: var(--mauve-clair); }
.choix label:has(input:checked) { --trait-b: var(--mauve-clair); }
.bascule { --biseau: 9px; --trait-b: rgba(255,255,255,.14); }

/* Contextes clairs */
.section--clair .btn--fantome, .sur-clair .btn--fantome { --trait-b: rgba(35,31,32,.24); }
.section--clair .btn--fantome:hover, .sur-clair .btn--fantome:hover { --trait-b: var(--mauve); }
.section--clair .champ input, .section--clair .champ textarea, .section--clair .choix label,
.sur-clair .champ input, .sur-clair .champ textarea, .sur-clair .choix label { --trait-b: rgba(35,31,32,.16); }
.section--clair .champ select, .sur-clair .champ select { --trait-b: rgba(35,31,32,.16); }

/* Les champs conservent leur fond : le dégradé du trait se superpose */
.champ input, .champ textarea { background-color: rgba(255,255,255,.04); }
.section--clair .champ input, .section--clair .champ textarea,
.sur-clair .champ input, .sur-clair .champ textarea { background-color: #fff; }

/* Le bouton contour reçoit aussi un fond très léger : la forme se lit mieux */
.btn--fantome { background-color: rgba(255,255,255,.05); }
.btn--fantome:hover { background-color: rgba(155,125,255,.14); }
.section--clair .btn--fantome, .sur-clair .btn--fantome { background-color: rgba(35,31,32,.035); }
.section--clair .btn--fantome:hover, .sur-clair .btn--fantome:hover { background-color: rgba(84,36,201,.08); }

/* ==========================================================================
   16. SPHÈRE DE VISIBILITÉ — les recherches qui gravitent
   ========================================================================== */
.orbite-section { position: relative; overflow: hidden; }

.orbite {
  position: relative;
  height: clamp(560px, 88vh, 860px);
  margin-inline: auto;
  max-width: 1180px;
  /* pan-y et pas none : au doigt, le glissement vertical appartient à la
     page (sinon on reste pris dans l'animation), l'horizontal fait tourner. */
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}
.orbite--attrape { cursor: grabbing; }
.orbite:focus-visible { outline: 2px solid var(--cyan); outline-offset: 6px; }

.orbite__champ {
  position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.orbite canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none;
}

/* Halo derrière la sphère */
.orbite::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(900px, 94%); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(84,36,201,.40) 0%, rgba(84,36,201,.14) 40%, transparent 70%);
  filter: blur(14px);
}

/* Message central posé par-dessus la sphère */
.orbite__centre {
  position: absolute; z-index: 60; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, 84%); text-align: center; pointer-events: none;
}
.orbite__centre::before {
  content: ''; position: absolute; z-index: -1;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 128%; height: 152%;
  background: radial-gradient(ellipse at center, rgba(18,16,17,.82) 0%, rgba(18,16,17,.50) 48%, transparent 76%);
}
.orbite__centre h2 { margin-top: var(--s-4); text-shadow: 0 2px 30px rgba(18,16,17,.95), 0 0 12px rgba(18,16,17,.9); }
.orbite__centre p { margin-top: var(--s-4); color: var(--txt-clair-2); text-shadow: 0 2px 18px rgba(18,16,17,.95); }
.orbite__centre .btn, .orbite__centre a { pointer-events: auto; }

/* Les cartes en orbite : la liste HTML devient un champ 3D */
.orbite--actif [data-orbite-liste] {
  position: absolute; inset: 0; z-index: 20;
  margin: 0; padding: 0; list-style: none; pointer-events: none;
}
.orbite--actif [data-orbite-liste] > li {
  position: absolute; left: 50%; top: 50%;
  width: max-content; max-width: min(248px, 40vw);
  will-change: transform, opacity;
}

.recherche {
  --biseau: 10px;
  display: block; padding: .7rem .95rem;
  background: linear-gradient(155deg, rgba(255,255,255,.075), rgba(255,255,255,.028));
  box-shadow: inset 0 0 0 1px rgba(155,125,255,.22), 0 14px 34px -20px rgba(0,0,0,.9);
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
  background-image:
    linear-gradient(45deg, transparent calc(50% - .7px), rgba(155,125,255,.22) calc(50% - .7px),
                    rgba(155,125,255,.22) calc(50% + .7px), transparent calc(50% + .7px));
  background-size: var(--biseau) var(--biseau);
  background-position: right top; background-repeat: no-repeat;
}
.recherche__src {
  display: block; white-space: nowrap; font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--cyan);
  opacity: .85; margin-bottom: .3rem;
}
.recherche__q {
  display: block; font-size: .875rem; line-height: 1.35; color: var(--txt-clair);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.recherche--demande { box-shadow: inset 0 0 0 1px rgba(232,179,65,.30), 0 14px 34px -20px rgba(0,0,0,.9); }
.recherche--demande .recherche__src { color: var(--ambre); }

/* Affordance « faites-la tourner » */
.orbite__aide {
  position: absolute; z-index: 70; right: 4px; bottom: 4px;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .5rem .8rem; background: rgba(18,16,17,.72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
  font-family: var(--ff-mono); font-size: var(--fs-mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--acier); pointer-events: none;
}
.orbite__aide svg { animation: bascule-main 2.6s ease-in-out infinite; }
@keyframes bascule-main {
  0%, 100% { transform: translateX(-3px); }
  50%      { transform: translateX(3px); }
}

/* Repli sans JavaScript ou en mouvement réduit : une grille lisible */
.orbite--statique, .orbite:not(.orbite--actif) { height: auto; cursor: default; padding-block: var(--s-6); }
.orbite:not(.orbite--actif) canvas { display: none; }
.orbite:not(.orbite--actif) .orbite__aide { display: none; }
.orbite:not(.orbite--actif) .orbite__centre { position: static; transform: none; width: auto; margin-inline: auto; }
.orbite:not(.orbite--actif) [data-orbite-liste] {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--s-3); margin-top: var(--s-8); list-style: none; padding: 0;
}

@media (max-width: 720px) {
  .orbite { height: clamp(520px, 76vh, 640px); }
  .orbite__centre { width: 90%; }
  .recherche { padding: .55rem .75rem; }
  .recherche__q { font-size: .76rem; max-width: 36vw; }
  .orbite--actif [data-orbite-liste] > li { max-width: min(210px, 40vw); }
  .orbite__aide { font-size: 10px; letter-spacing: .1em; }
  .recherche__src { font-size: 9px; }
}

/* Sur téléphone : le message d'abord, la sphère ensuite — jamais superposés */
@media (max-width: 720px) {
  .orbite { height: auto; display: block; padding-bottom: 0; }
  .orbite::before { top: auto; bottom: 26%; width: min(560px, 108%); }
  .orbite__centre {
    position: static; transform: none; width: 100%;
    text-align: center; pointer-events: auto;
  }
  .orbite__centre::before { display: none; }
  .orbite__centre h2, .orbite__centre p { text-shadow: none; }
  .orbite__champ {
    position: relative; inset: auto;
    height: 385px; margin-top: var(--s-7); overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  }
  .orbite__aide {
    position: static; transform: none; display: flex;
    justify-content: center; margin: var(--s-4) auto 0; width: max-content;
  }
  .orbite--actif [data-orbite-liste] > li { max-width: 128px; }
  .recherche { padding: .45rem .6rem; }
  .recherche__q { font-size: .68rem; max-width: 104px; }
  .recherche__src { font-size: 8px; letter-spacing: .08em; }
}

/* ==========================================================================
   17. CIEL DE CODE — fond d'étoiles binaires
   ========================================================================== */
.ciel-code {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 100% 85% at 50% 45%, #000 35%, rgba(0,0,0,.35) 78%, transparent 100%);
  mask-image: radial-gradient(ellipse 100% 85% at 50% 45%, #000 35%, rgba(0,0,0,.35) 78%, transparent 100%);
}
/* Le contenu passe toujours au-dessus du ciel */
.heros > .conteneur, .cta-final > .conteneur, .orbite-section > .conteneur,
.section--encre2 > .conteneur { position: relative; z-index: 2; }
.section--clair .ciel-code { display: none; }

/* Dépôt de mise en place, sous le prix du forfait */
.forfait__depot {
  margin-top: .45rem; font-family: var(--ff-mono); font-size: var(--fs-mono);
  letter-spacing: .04em; color: var(--ambre); opacity: .92;
}

/* ==========================================================================
   18. RÉVISION — couche d'étoiles globale, hiérarchie, espacements
   ========================================================================== */

/* --- Le ciel de code devient une couche unique, fixe, derrière tout --- */
.ciel-code {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 130% 110% at 50% 38%, #000 42%, rgba(0,0,0,.55) 84%, transparent 100%);
  mask-image: radial-gradient(ellipse 130% 110% at 50% 38%, #000 42%, rgba(0,0,0,.55) 84%, transparent 100%);
}
body { background: var(--encre); }
main { position: relative; z-index: 1; }
.pied { position: relative; z-index: 1; background: rgba(26,22,24,.90); }
.section--encre2 { background: rgba(26,22,24,.68); }
.cta-final { background: rgba(26,22,24,.62); }
.section--clair { position: relative; z-index: 1; }
/* on annule les anciennes règles par section */
.heros > .conteneur, .cta-final > .conteneur, .orbite-section > .conteneur,
.section--encre2 > .conteneur { position: relative; z-index: 2; }

/* La grille HUD devient beaucoup plus discrète : elle ne doit jamais
   entrer en concurrence avec le ciel de code. */
.hud-grille::before { opacity: .45; }
.section--clair .hud-grille::before { opacity: 1; }

/* --- Le logo respire : on doit lire « STUDIO » --- */
:root { --entete-h: 88px; }
/* Le mot STUDIO a été agrandi de 38 % dans le SVG lui-même, et le logo
   monte d'un cran ici : deux personnes de suite ont dit mal le voir. */
.logo img { height: 50px; }
.pied__logo { height: 56px; }
@media (max-width: 900px) { :root { --entete-h: 84px; } .logo img { height: 44px; } }
@media (max-width: 640px) { :root { --entete-h: 76px; } .logo img { height: 38px; } }

/* --- Menus déroulants lisibles sur fond foncé --- */
.champ select { color-scheme: dark; }
.champ select option { background: #1A1618; color: #F7F5F6; padding: .6rem; }
.section--clair .champ select, .sur-clair .champ select { color-scheme: light; }
.section--clair .champ select option, .sur-clair .champ select option { background: #fff; color: #231F20; }

/* --- Le dépôt se dévoile au survol, au toucher et au clavier --- */
.depot {
  --biseau: 9px;
  display: inline-flex; align-items: center; gap: .45rem; margin-top: .6rem;
  width: max-content; max-width: 100%; white-space: nowrap; text-align: left;
  padding: .42rem .7rem; cursor: pointer;
  font-family: var(--ff-mono); font-size: var(--fs-mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--acier);
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
  transition: color var(--t-rapide), background-color var(--t-rapide), box-shadow var(--t-rapide);
}
.depot::after {
  content: '+'; font-size: 13px; line-height: 1; margin-left: .1rem;
  transition: transform var(--t-moyen) var(--e-out);
}
.depot__valeur { display: none; }
.depot[aria-expanded="true"] {
  color: var(--ambre); background: rgba(232,179,65,.10);
  box-shadow: inset 0 0 0 1px rgba(232,179,65,.32);
}
.depot[aria-expanded="true"] .depot__etiquette { display: none; }
.depot[aria-expanded="true"] .depot__valeur { display: inline; }
.depot[aria-expanded="true"]::after { content: ''; }
.forfait__argument {
  margin-top: .9rem; font-size: var(--fs-sm); line-height: 1.45;
  color: var(--mauve-clair);
}

/* --- Le bandeau des secteurs : plus large, plus présent --- */
.bandeau {
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
  border-block: 0;
  background: rgba(26,22,24,.55);
  position: relative; z-index: 1;
}
.bandeau::before, .bandeau::after {
  content: ''; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(155,125,255,.28) 25%, rgba(155,125,255,.28) 75%, transparent);
}
.bandeau::before { top: 0; } .bandeau::after { bottom: 0; }
.bandeau__piste span {
  font-size: var(--fs-sm); letter-spacing: .22em; padding-inline: 2.2rem; gap: 2.2rem;
  color: #9a9297;
}
.bandeau__piste span::after { width: 5px; height: 5px; }

/* --- Espacements : les boutons se rapprochent de leur texte --- */
.tete-section { margin-bottom: clamp(2rem, 3.4vw, 2.9rem); }
.tete-section h2 { margin-top: var(--s-3); }
.tete-section p { margin-top: var(--s-3); }
.heros .rangee { margin-top: var(--s-6) !important; }
.heros__note { margin-top: var(--s-5) !important; }
.cta-final .rangee { margin-top: var(--s-6) !important; }
.section .rangee.mt-8 { margin-top: var(--s-6); }
.carte .btn, .carte .lien { margin-top: var(--s-5); }
.forfait .btn { margin-top: var(--s-5); }
.prose + .rangee { margin-top: var(--s-6); }

/* ==========================================================================
   19. CHRONOLOGIE HOLOGRAPHIQUE — le processus, style poste de commande
   ========================================================================== */
.chrono { position: relative; }
.chrono::before {
  content: ''; position: absolute; left: 47px; top: 26px; bottom: 26px; width: 1px;
  background: linear-gradient(180deg, transparent, var(--mauve) 6%, var(--mauve-clair) 50%, var(--mauve) 94%, transparent);
  opacity: .5;
}
.chrono__item {
  position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem); align-items: start; margin-bottom: var(--s-5);
}
.chrono__noeud {
  position: relative; width: 96px; height: 96px; display: grid; place-items: center; flex: none;
}
.chrono__noeud::before {
  content: ''; position: absolute; inset: 14px;
  border: 1px solid rgba(155,125,255,.34);
  transform: rotate(45deg);
  transition: transform 700ms var(--e-out), border-color var(--t-moyen);
}
.chrono__noeud::after {
  content: ''; position: absolute; inset: 26px;
  background: radial-gradient(circle, rgba(84,36,201,.55), transparent 70%);
}
.chrono__item:hover .chrono__noeud::before { transform: rotate(135deg); border-color: var(--cyan); }
.chrono__n {
  position: relative; z-index: 1;
  font-family: var(--ff-titre); font-weight: 800; font-size: 1.5rem;
  letter-spacing: -.03em; color: var(--blanc);
  text-shadow: 0 0 18px rgba(155,125,255,.85);
}

.chrono__panneau {
  --biseau: 18px; position: relative; overflow: hidden;
  padding: clamp(1.3rem, 2.2vw, 1.9rem) clamp(1.4rem, 2.4vw, 2.1rem);
  background: linear-gradient(150deg, rgba(84,36,201,.16), rgba(255,255,255,.022) 62%);
  box-shadow: inset 0 0 0 1px rgba(155,125,255,.20);
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
  background-image:
    linear-gradient(45deg, transparent calc(50% - .7px), rgba(155,125,255,.20) calc(50% - .7px),
                    rgba(155,125,255,.20) calc(50% + .7px), transparent calc(50% + .7px)),
    linear-gradient(150deg, rgba(84,36,201,.16), rgba(255,255,255,.022) 62%);
  background-size: var(--biseau) var(--biseau), auto;
  background-position: right top, 0 0;
  background-repeat: no-repeat, no-repeat;
  transition: box-shadow var(--t-moyen) var(--e-out), transform var(--t-moyen) var(--e-out);
}
.chrono__item:hover .chrono__panneau {
  box-shadow: inset 0 0 0 1px rgba(155,125,255,.44), 0 18px 48px -26px rgba(84,36,201,.9);
  transform: translateX(4px);
}
/* Lignes de balayage, très fines — le grain « écran d'ordinateur » */
.chrono__panneau::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(180deg, rgba(155,125,255,.055) 0 1px, transparent 1px 4px);
}
/* Trait lumineux qui traverse le panneau à son apparition */
.chrono__panneau::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 34%; left: -40%;
  background: linear-gradient(90deg, transparent, rgba(155,125,255,.16), transparent);
  pointer-events: none;
}
.chrono__item.vu .chrono__panneau::after { animation: balayage-panneau 1.5s var(--e-out) .2s forwards; }
@keyframes balayage-panneau { to { left: 110%; } }

.chrono__d {
  font-family: var(--ff-mono); font-size: var(--fs-mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--cyan); display: flex; align-items: center; gap: .55rem;
}
.chrono__d::before { content: ''; width: 6px; height: 6px; background: var(--cyan); flex: none; }
.chrono__panneau h3 { margin-top: .7rem; }
.chrono__panneau p { margin-top: .7rem; color: var(--txt-clair-2); max-width: 62ch; }
.chrono__role {
  margin-top: 1.1rem; padding-top: .9rem;
  border-top: 1px solid rgba(155,125,255,.16);
  font-size: var(--fs-sm); color: var(--txt-clair-2);
}
.chrono__role b { color: var(--mauve-clair); font-weight: 600; }

@media (max-width: 720px) {
  .chrono::before { left: 27px; }
  .chrono__item { grid-template-columns: 56px minmax(0, 1fr); gap: .9rem; }
  .chrono__noeud { width: 56px; height: 56px; }
  .chrono__noeud::before { inset: 6px; }
  .chrono__noeud::after { inset: 14px; }
  .chrono__n { font-size: 1.05rem; }
}

/* Le focus programmatique d'un titre d'étape ne doit pas dessiner d'anneau */
.etape-form h2[tabindex="-1"]:focus, .etape-form h3[tabindex="-1"]:focus { outline: none; }

/* La question de FAQ ne doit pas être étirée par la mise en page flex */
.faq__q > span:not(.faq__signe) { flex: 0 1 auto; }
.faq__q { gap: var(--s-4); }
.faq__q .faq__texte { flex: 1 1 auto; }

/* ==========================================================================
   20. AJUSTEMENTS FINAUX
   ========================================================================== */

/* Les trois cartes de forfaits restent alignées ligne par ligne */
.forfait__argument { min-height: 3.2em; margin-top: .9rem; }
.forfait__argument:empty { min-height: 3.2em; }
.forfait__prix { margin-top: var(--s-5); }
.forfait__comptant { min-height: 1.2em; }
@media (max-width: 1080px) { .forfait__argument { min-height: 0; } .forfait__argument:empty { display: none; } }

/* Les articles en orbite deviennent cliquables */
.recherche--lien { text-decoration: none; pointer-events: auto; cursor: pointer; transition: box-shadow var(--t-rapide) var(--e-out); }
.recherche--lien:hover { box-shadow: inset 0 0 0 1px var(--mauve-clair), 0 0 30px -8px rgba(155,125,255,.7); }
.orbite--compacte { height: clamp(480px, 62vh, 620px); }
.orbite--compacte .orbite__centre { width: min(340px, 70%); }
.orbite--actif [data-orbite-liste] > li { pointer-events: auto; }
@media (max-width: 720px) { .orbite--compacte { height: auto; } }

/* ==========================================================================
   21. LA BIBLIOTHÈQUE — cerveau quantique et fiches
   ========================================================================== */
.lexique {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(1.5rem, 3vw, 3rem); align-items: start;
}

/* ---------- Le cerveau ---------- */
.cerveau {
  position: relative; height: clamp(520px, 74vh, 760px);
  /* Même règle que la sphère : le doigt doit pouvoir descendre la page. */
  touch-action: pan-y; cursor: grab; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.cerveau--attrape { cursor: grabbing; }
.cerveau canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

.cerveau__noeuds { position: absolute; inset: 0; z-index: 20; margin: 0; padding: 0; list-style: none; }
.cerveau__noeuds > li { position: absolute; left: 50%; top: 50%; will-change: transform, opacity; }

.noeud {
  --biseau: 8px;
  display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
  padding: .42rem .7rem; cursor: pointer;
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--txt-clair);
  background: rgba(18,16,17,.72);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fam) 40%, transparent);
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
  transition: box-shadow var(--t-rapide) var(--e-out), background-color var(--t-rapide) var(--e-out), color var(--t-rapide);
}
.noeud__pt { width: 6px; height: 6px; background: var(--fam); flex: none; }
.noeud:hover, .noeud:focus-visible {
  background: rgba(30,24,40,.92);
  box-shadow: inset 0 0 0 1px var(--fam), 0 0 24px -6px var(--fam);
  outline: none;
}
.noeud--actif {
  color: #fff; background: color-mix(in srgb, var(--fam) 22%, rgba(18,16,17,.9));
  box-shadow: inset 0 0 0 1px var(--fam), 0 0 30px -6px var(--fam);
}
/* Repli si color-mix n'est pas géré */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .noeud { box-shadow: inset 0 0 0 1px rgba(155,125,255,.4); }
  .noeud--actif { background: rgba(84,36,201,.30); }
}

/* Montée en régime pendant l'analyse */
.cerveau--charge::after {
  content: 'ANALYSE EN COURS';
  position: absolute; z-index: 40; left: 50%; bottom: 8%; transform: translateX(-50%);
  font-family: var(--ff-mono); font-size: var(--fs-mono); letter-spacing: .22em;
  color: var(--cyan); animation: clignote .38s steps(2) infinite;
}
@keyframes clignote { 50% { opacity: .25; } }

.cerveau__aide {
  position: absolute; z-index: 30; left: 50%; bottom: 4px; transform: translateX(-50%);
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .8rem;
  font-family: var(--ff-mono); font-size: var(--fs-mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--acier); pointer-events: none;
  background: rgba(18,16,17,.6);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}
.cerveau--charge .cerveau__aide { opacity: 0; }

/* ---------- Le panneau des fiches ---------- */
.lexique-panneau { position: sticky; top: calc(var(--entete-h) + 1.25rem); min-height: 420px; }
.lexique-vide {
  --biseau: 20px; padding: clamp(1.6rem, 2.6vw, 2.2rem);
  background: linear-gradient(155deg, rgba(84,36,201,.12), rgba(255,255,255,.02) 62%);
  box-shadow: inset 0 0 0 1px rgba(155,125,255,.20);
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
}
.lexique-panneau--ouvert ~ .lexique-vide, .lexique-panneau--ouvert + .lexique-vide { display: none; }

.fiche {
  --biseau: 22px; position: relative; overflow: hidden;
  padding: clamp(1.5rem, 2.4vw, 2.1rem);
  background: linear-gradient(155deg, rgba(84,36,201,.20), rgba(20,17,24,.96) 58%);
  box-shadow: inset 0 0 0 1px rgba(155,125,255,.34), 0 30px 70px -34px rgba(84,36,201,.9);
  clip-path: polygon(0 0, calc(100% - var(--biseau)) 0, 100% var(--biseau), 100% 100%, 0 100%);
  max-height: min(72vh, 760px); overflow-y: auto; overscroll-behavior: contain;
}
.fiche:focus { outline: none; }
.fiche::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .45;
  background: repeating-linear-gradient(180deg, rgba(155,125,255,.05) 0 1px, transparent 1px 4px);
}
.fiche--entre { animation: fiche-entre 520ms var(--e-out); }
@keyframes fiche-entre {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.fiche__barre { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.fiche__fam {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--fam); padding: .3rem .6rem;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fam) 38%, transparent);
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
}
.fiche__fermer {
  width: 32px; height: 32px; display: grid; place-items: center; color: var(--acier);
  box-shadow: inset 0 0 0 1px var(--trait-clair); flex: none;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
  transition: color var(--t-rapide), box-shadow var(--t-rapide);
}
.fiche__fermer:hover { color: #fff; box-shadow: inset 0 0 0 1px var(--mauve-clair); }
.fiche__titre { margin-top: var(--s-4); font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.fiche__resume { margin-top: .7rem; color: var(--mauve-clair); font-size: var(--fs-sm); line-height: 1.5; }
.fiche__corps { margin-top: var(--s-5); }
.fiche__corps h4 {
  margin-top: var(--s-5); margin-bottom: .5rem; font-size: 1rem;
  color: var(--txt-clair); letter-spacing: -.01em;
}
.fiche__corps p, .fiche__corps li { font-size: var(--fs-sm); }
.fiche__piege {
  margin-top: var(--s-5); padding: 1rem 1.2rem;
  background: rgba(232,179,65,.09);
  box-shadow: inset 0 0 0 1px rgba(232,179,65,.28);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.fiche__piege-t {
  display: block; font-family: var(--ff-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ambre); margin-bottom: .45rem;
}
.fiche__piege p { font-size: var(--fs-sm); color: #e8dcc4; margin: 0; }
.fiche__pied { margin-top: var(--s-6); }

/* Sans JavaScript ou en mouvement réduit : une liste lisible */
.cerveau--statique { height: auto; padding-block: var(--s-6); }
.cerveau--statique canvas { display: none; }
.cerveau--statique .cerveau__noeuds { position: static; display: flex; flex-wrap: wrap; gap: .5rem; }
.cerveau--statique .cerveau__noeuds > li { position: static; transform: none !important; opacity: 1 !important; filter: none !important; }
.cerveau:not(.cerveau--actif) .cerveau__aide { display: none; }

@media (max-width: 1080px) {
  .lexique { grid-template-columns: 1fr; }
  .lexique-panneau { position: static; min-height: 0; }
  .cerveau { height: clamp(440px, 60vh, 560px); }
  .fiche { max-height: none; }
}
/* Sur téléphone : le cerveau garde sa boîte à lui (hauteur DÉFINIE, jamais
   « auto » — c'est ce qui empêche le canvas de grandir sans fin), et les
   notions passent en liste juste en dessous. */
@media (max-width: 700px) {
  /* Deux classes dans le sélecteur, et c'est volontaire : une règle plus bas
     dans le fichier imposait « height: 420px » au même poids et reprenait le
     dessus. La liste débordait alors de la boîte et se posait par-dessus le
     texte suivant. */
  .cerveau.cerveau--noeuds-liste { height: auto; -webkit-mask-image: none; mask-image: none; }
  .cerveau--noeuds-liste canvas { position: relative; width: 100%; height: 330px; }
  .cerveau--noeuds-liste .cerveau__noeuds {
    position: static; display: flex; flex-wrap: wrap; justify-content: center;
    gap: .45rem; margin-top: var(--s-5);
  }
  .cerveau--noeuds-liste .cerveau__noeuds > li {
    position: static;
    transform: none !important; opacity: 1 !important; filter: none !important;
    z-index: auto !important;
  }
  .cerveau--noeuds-liste .noeud { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .cerveau--noeuds-liste .cerveau__aide { position: static; transform: none; margin: var(--s-4) auto 0; width: max-content; }
}
@media (max-width: 640px) {
  .cerveau:not(.cerveau--noeuds-liste) { height: 420px; }
  .noeud { font-size: 10px; padding: .35rem .55rem; letter-spacing: .06em; }
}

/* ==========================================================================
   22. LES DEUX TRAJECTOIRES
   ========================================================================== */
.univers-section { position: relative; }
.univers { position: relative; height: clamp(300px, 34vw, 400px); margin-top: clamp(1.5rem, 3vw, 2.5rem); }
/* La scène : la seule boîte que le script mesure. Hauteur toujours définie. */
.univers__scene { position: absolute; inset: 0; }
.univers canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.univers__legende {
  position: absolute; right: 0; width: min(300px, 33%); z-index: 2;
  text-align: right;
}
.univers__legende p {
  margin-top: .6rem; font-size: var(--fs-sm); line-height: 1.5; color: var(--txt-clair-2);
}
.univers__legende--haut { top: 0; }
.univers__legende--bas  { bottom: 0; }
.univers__legende--bas p { color: var(--acier); }

@media (max-width: 760px) {
  /* Sur téléphone : la scène garde une hauteur fixe et les deux légendes
     passent dessous, dans le flux. Le conteneur peut alors être « auto »
     sans jamais influencer la taille du canvas. */
  .univers { height: auto; }
  .univers__scene { position: relative; height: 230px; }
  .univers__legende {
    position: static; width: 100%; text-align: left; margin-top: var(--s-5);
  }
}
}