/* ================================================================================================
   MIMETO — la feuille du site. Deux pages : le produit, le contact.
   La DA vient des supports Mimeto : la nuit, des plaques de verre sombre, un trait de neon.
   L'ambre-orange = ce que fait Mimeto ; le bleu glace = ce que fait l'humain.
   Une seule identite, sombre par choix : pas de theme clair.
   ================================================================================================ */

:root {
  color-scheme: dark;
  --nuit: #04060A;
  --noir: #07090E;
  --noir2: #10131A;
  --blanc: #F2F6FB;
  --texte: #D5DDE8;
  --gris: #8FA0B8;
  --gris2: #5A6B82;
  --trait: rgba(242, 246, 251, 0.09);
  --trait-fort: rgba(242, 246, 251, 0.16);
  --ambre: #FFAE01;
  --orange: #FF7A2F;
  --rouge: #FF3D2E;
  --glace: #8EC5FF;
  --neon: linear-gradient(90deg, #FFD23F 0%, #FFAE01 28%, #FF7A2F 62%, #FF3D2E 100%);
  --neon-diag: linear-gradient(135deg, #FFD84A 0%, #FFAE01 38%, #FF7A2F 72%, #FF3D2E 100%);

  --f-texte: "Onest", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --f-hud: "Barlow Semi Condensed", Bahnschrift, "DIN Alternate", "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", Consolas, "Cascadia Mono", monospace;

  --t-hero: clamp(2.7rem, 1.6rem + 4.8vw, 5.6rem);
  --t-h2: clamp(2rem, 1.35rem + 2.4vw, 3.3rem);
  --t-h3: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
  --t-lead: clamp(1.1rem, 1rem + 0.45vw, 1.32rem);

  --r-plaque: 18px;
  --gouttiere: clamp(18px, 4vw, 40px);
  --largeur: 1160px;
  --entete: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--entete); }
body { margin: 0; background: var(--nuit); color: var(--texte); font: 400 1.0625rem/1.65 var(--f-texte); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration-color: rgba(255, 174, 1, 0.5); text-underline-offset: 3px; }
a:hover { color: var(--blanc); }
:focus-visible { outline: 2px solid var(--ambre); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(255, 122, 47, 0.35); color: var(--blanc); }
h1, h2, h3 { color: var(--blanc); margin: 0; font-weight: 650; letter-spacing: -0.03em; line-height: 1.08; text-wrap: balance; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.015em; line-height: 1.25; }
p, ul, ol { margin: 0; padding: 0; }
.saut { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--ambre); color: var(--noir); padding: 8px 14px; border-radius: 8px; font-weight: 600; }
.saut:focus { top: 12px; }

.conteneur { width: 100%; max-width: calc(var(--largeur) + 2 * var(--gouttiere)); margin-inline: auto; padding-inline: var(--gouttiere); }
.section { padding-block: clamp(80px, 11vw, 150px); }
.tete { display: grid; gap: 18px; max-width: 760px; margin-bottom: clamp(40px, 6vw, 64px); }

.eyebrow { font: 600 0.8rem/1 var(--f-hud); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ambre); display: inline-flex; align-items: center; gap: 10px; }
.lead { font-size: var(--t-lead); line-height: 1.55; max-width: 60ch; }
.neon-texte { background: var(--neon); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ambre { color: var(--ambre); font-weight: 600; }
.glace { color: var(--glace); }
.muet { color: var(--gris); }
.hud { font: 600 0.78rem/1.2 var(--f-hud); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gris); }

/* ---------------------------------------------------------------- boutons */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: 999px;
  font: 600 1rem/1 var(--f-texte); text-decoration: none; white-space: nowrap; border: 1px solid var(--trait-fort); color: var(--blanc);
  background: rgba(12, 16, 24, 0.6); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.bouton:hover { border-color: rgba(255, 174, 1, 0.55); box-shadow: 0 0 24px rgba(255, 174, 1, 0.18); transform: translateY(-1px); }
.bouton--neon { background: var(--neon); color: #150A02; border-color: transparent; box-shadow: 0 6px 20px rgba(255, 122, 47, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.bouton--neon:hover { color: #150A02; border-color: transparent; box-shadow: 0 8px 28px rgba(255, 122, 47, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.bouton--petit { min-height: 40px; padding: 0 18px; font-size: 0.92rem; }
.boutons { display: flex; flex-wrap: wrap; gap: 14px; }
.hero .boutons { column-gap: 48px; }   /* le second bouton hors du halo du bouton neon */

/* ---------------------------------------------------------------- le verre */
.plaque { position: relative; border-radius: var(--r-plaque); border: 1px solid var(--trait);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.01) 45%, rgba(255, 255, 255, 0) 100%), rgba(10, 13, 20, 0.8);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.07); }
.plaque--neon { border-color: rgba(255, 174, 1, 0.32); box-shadow: 0 0 40px rgba(255, 122, 47, 0.12), 0 30px 60px -30px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.plaque--glace { border-color: rgba(142, 197, 255, 0.3); box-shadow: 0 0 40px rgba(142, 197, 255, 0.08), 0 30px 60px -30px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.1); }

/* ---------------------------------------------------------------- le logo, et l'empreinte en tuile */
.logo-m { width: var(--t); height: var(--t); flex-shrink: 0; position: relative; display: inline-block; border-radius: calc(var(--t) * 0.333);
  background: radial-gradient(120% 90% at 50% 0%, #1B1F29 0%, var(--noir) 62%);
  box-shadow: 0 calc(var(--t) * 0.06) calc(var(--t) * 0.18) rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.logo-m svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.logo-m__halo { opacity: 0.55; }
.js .logo-m--anime .logo-m__trait { stroke-dasharray: 1.05 1.05; stroke-dashoffset: 1.05; animation: m-trace 1.2s cubic-bezier(.5, 0, .3, 1) 0.25s forwards, m-eteint 0.5s ease 2.3s forwards; }
.js .logo-m--anime .logo-m__plein { opacity: 0; animation: m-scintille 1s steps(1) 1.35s forwards; }
.js .logo-m--anime .logo-m__halo { opacity: 0; animation: m-halo 1.4s ease 1.9s forwards; }
@keyframes m-trace { to { stroke-dashoffset: 0; } }
@keyframes m-eteint { to { opacity: 0.1; } }
@keyframes m-scintille { 0% { opacity: 0.35; } 12% { opacity: 0.1; } 22% { opacity: 0.6; } 36% { opacity: 0.12; } 48% { opacity: 0.85; } 58% { opacity: 0.2; } 70%, 100% { opacity: 1; } }
@keyframes m-halo { to { opacity: 0.6; } }
.marque { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--blanc); }
/* le logo : MIMETO en traces, l'empreinte au-dessus du I, qui luit un peu */
.marque__logo { display: block; height: var(--h); width: auto; overflow: visible; }
.marque__empreinte { filter: drop-shadow(0 0 2px rgba(255, 140, 30, 0.35)); }

/* ---------------------------------------------------------------- entete */
.entete { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; border-bottom: 1px solid transparent; transition: background 0.3s ease, border-color 0.3s ease; }
.entete.est-colle { background: rgba(4, 6, 10, 0.74); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border-bottom-color: var(--trait); }
.entete__barre { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: var(--entete); max-width: calc(var(--largeur) + 2 * var(--gouttiere)); margin-inline: auto; padding-inline: var(--gouttiere); }
.entete__actions { display: flex; align-items: center; gap: 12px; }
/* le menu (01/10) : quatre liens sobres, la page courante soulignee de neon ; sur telephone, un tiroir */
.entete__nav { display: flex; align-items: center; gap: 26px; margin-left: auto; margin-right: 8px; }
.entete__nav a:not(.langue) { color: var(--texte); text-decoration: none; font: 500 0.95rem/1 var(--f-texte); padding-block: 8px; }
.entete__nav a:not(.langue):hover { color: var(--blanc); }
.entete__nav a[aria-current="page"] { color: var(--blanc); box-shadow: inset 0 -2px 0 var(--ambre); }
.entete__connexion { color: var(--gris) !important; }
.entete__menu { display: none; font: 600 0.9rem/1 var(--f-texte); color: var(--blanc); background: transparent; border: 1px solid var(--trait-fort); border-radius: 999px; min-height: 40px; padding: 0 16px; cursor: pointer; }
.langue { font: 600 0.8rem/1 var(--f-hud); letter-spacing: 0.16em; text-decoration: none; color: var(--gris); border: 1px solid var(--trait-fort); border-radius: 8px; padding: 8px 10px 7px; }
.langue:hover { color: var(--blanc); }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; margin-top: calc(-1 * var(--entete)); padding-top: calc(var(--entete) + clamp(56px, 9vw, 120px)); padding-bottom: clamp(72px, 10vw, 140px); overflow: hidden; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(ellipse 45% 55% at 78% 45%, rgba(255, 122, 47, 0.11) 0%, rgba(255, 122, 47, 0) 70%),
  radial-gradient(ellipse 40% 45% at 12% 90%, rgba(142, 197, 255, 0.04) 0%, rgba(142, 197, 255, 0) 70%),
  linear-gradient(180deg, var(--noir) 0%, var(--nuit) 100%); }
.hero__grille { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { font-size: var(--t-hero); line-height: 0.98; letter-spacing: -0.045em; font-weight: 700; margin: 24px 0 28px; }
.hero .lead { margin-bottom: 36px; }
.hero__marques { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 40px; }
.hero__marques span { font: 600 0.78rem/1 var(--f-hud); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gris); display: inline-flex; align-items: center; gap: 10px; }
.hero__marques span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ambre); box-shadow: 0 0 10px var(--ambre); }
.hero__m { justify-self: center; }
.hero__m .logo-m { border-radius: 30%; }

/* ---------------------------------------------------------------- deux sortes de regles */
.deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.carte { padding: clamp(26px, 3.5vw, 40px); display: grid; gap: 16px; align-content: start; }
.carte h3 { font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.7rem); }
.carte p { color: var(--gris); }
.valeurs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.valeurs span { font: 500 0.86rem/1 var(--f-mono); padding: 9px 12px; border-radius: 8px; color: var(--blanc); background: rgba(255, 174, 1, 0.1); border: 1px solid rgba(255, 174, 1, 0.45); box-shadow: 0 0 16px rgba(255, 174, 1, 0.12); }
.regles { display: grid; gap: 10px; margin-top: 6px; }
.regle { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 11px 16px; border-radius: 12px;
  font: 400 0.86rem/1.35 var(--f-mono); color: var(--blanc); border: 1px solid rgba(142, 197, 255, 0.34); background: rgba(142, 197, 255, 0.06); }
.regle__num, .regle__alors, .regle__fleche { color: var(--glace); }
.regle__num { font-weight: 500; }

/* ---------------------------------------------------------------- les mots forts */
/* 15/10 : la couleur reste sur les mots importants des petits textes (Romain : « ça fait ressortir les informations ») ;
   les grands titres, eux, restent blancs */
.fort { color: var(--ambre); font-weight: 600; text-shadow: 0 0 22px rgba(255, 174, 1, 0.22); }
.fort--glace { color: var(--glace); text-shadow: 0 0 22px rgba(142, 197, 255, 0.22); }

/* ---------------------------------------------------------------- le cycle (« Comment il fonctionne »)
   Entre l'anneau et la piste du deck : le cercle au centre avec le M, les etapes 01-03 a droite,
   04-06 a gauche. Sur grand ecran la section reste a l'ecran pendant qu'on defile (`est-active`) :
   le neon fait le tour, chaque etape s'allume quand il l'atteint, puis un point tourne et la page
   repart. Sur petit ecran : une ligne verticale qui se remplit. Sans script : tout est allume. */
.cycle { position: relative; }
.js .cycle.est-active { height: var(--hauteur, 320vh); }
.cycle__ecran { padding-block: clamp(80px, 11vw, 150px); }
.js .cycle.est-active .cycle__ecran { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; padding-block: 0; padding-top: var(--entete); display: grid; align-items: center; }
.cycle__contenu { display: grid; gap: clamp(24px, 4vh, 48px); }
.cycle .tete { margin-bottom: 0; }
.cycle__schema { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: auto auto auto; row-gap: clamp(14px, 2.2vh, 26px); }
.cycle__piste { grid-column: 1 / -1; grid-row: 2; position: relative; width: 100%; max-width: calc(46vh * 1000 / 240); justify-self: center; }
.cycle__piste svg { width: 100%; height: auto; overflow: visible; }
.cycle__fleche { fill: none; stroke: var(--gris2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cycle__base { fill: none; stroke: var(--trait-fort); stroke-width: 1.4; }
.cycle__arc { fill: none; stroke: url(#cycle-neon); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(255, 122, 47, 0.4)); }
.cycle__noeud { fill: var(--nuit); stroke: var(--trait-fort); stroke-width: 2; transition: fill 0.4s ease, stroke 0.4s ease; }
.cycle__noeud.est-actif { fill: var(--ambre); stroke: #FFD23F; filter: drop-shadow(0 0 8px rgba(255, 174, 1, 0.95)); }
.cycle__point { fill: #FFF6DC; filter: drop-shadow(0 0 6px #FFAE01) drop-shadow(0 0 14px #FF7A2F); opacity: 0; transition: opacity 0.8s ease; }
.cycle.est-complet .cycle__point, html:not(.js) .cycle__point { opacity: 1; }
.cycle__centre { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.cycle__centre .logo-m { transition: box-shadow 0.8s ease; animation: pouls 2.6s ease-in-out infinite; }
@keyframes pouls {
  0%, 100% { transform: scale(1); box-shadow: 0 0 18px rgba(255, 122, 47, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
  50% { transform: scale(1.07); box-shadow: 0 0 36px rgba(255, 122, 47, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
}
.cycle.est-complet .cycle__centre .logo-m { box-shadow: 0 0 32px rgba(255, 122, 47, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
/* l'empreinte sans sa tuile (15/10 : « sans le cadre, juste le logo ») : le pouls ne garde que l'echelle */
.logo-m--nu, .cycle.est-complet .cycle__centre .logo-m--nu { background: none; box-shadow: none; border-radius: 0; }
.cycle__centre .logo-m--nu { animation-name: pouls-nu; }
@keyframes pouls-nu { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.cycle__etape { grid-column: var(--c); grid-row: var(--r); display: grid; gap: 6px; justify-items: center; text-align: center; padding-inline: 16px; transition: opacity 0.5s ease, transform 0.6s cubic-bezier(.2, .7, .2, 1); }
.cycle__etape[style*="--r:1"] { align-self: end; }
.cycle__etape[style*="--r:3"] { align-self: start; }
.cycle__etape h3 { font-size: 1.2rem; }
.cycle__etape p { color: var(--gris); font-size: 0.96rem; line-height: 1.55; max-width: 34ch; }
.cycle__num { font: 500 0.8rem/1 var(--f-mono); color: var(--ambre); }
.js .cycle .cycle__etape:not(.est-actif) { opacity: 0.18; transform: translateY(10px); }
.cycle__jauge { justify-self: center; width: min(260px, 50%); height: 3px; border-radius: 2px; background: var(--trait); overflow: hidden; }
.cycle__jauge i { display: block; height: 100%; width: calc(var(--p, 1) * 100%); background: var(--neon); box-shadow: 0 0 10px rgba(255, 174, 1, 0.7); }
.cycle:not(.est-active) .cycle__jauge { display: none; }

/* ---------------------------------------------------------------- la demo */
.demo { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.demo__texte { display: grid; gap: 18px; align-content: center; }
.legende { display: grid; gap: 10px; font-size: 0.95rem; color: var(--gris); margin-top: 6px; }
.legende span { display: inline-flex; align-items: center; gap: 10px; }
.legende i { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--ambre); box-shadow: 0 0 8px rgba(255, 174, 1, 0.5); flex-shrink: 0; }
.ecran { overflow: hidden; }
.ecran__barre { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--trait); font: 600 0.78rem/1 var(--f-hud); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris); }
.ecran__barre i { width: 9px; height: 9px; border-radius: 50%; background: var(--gris2); opacity: 0.6; }
.ecran__barre span { margin-left: 8px; }
.formulaire-demo { padding: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.champ-demo { display: grid; gap: 6px; }
.champ-demo label { font-size: 0.78rem; color: var(--gris); }
.champ-demo__boite { position: relative; min-height: 40px; border-radius: 9px; border: 1px solid var(--trait-fort); background: rgba(4, 6, 10, 0.7); padding: 9px 12px; font: 400 0.9rem/1.35 var(--f-mono); color: var(--blanc); display: flex; align-items: center; transition: border-color 0.35s ease, box-shadow 0.35s ease; }
.champ-demo__valeur { opacity: 0; transition: opacity 0.3s ease; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.champ-demo__source { position: absolute; right: 8px; top: -9px; font: 600 0.62rem/1 var(--f-hud); letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 7px; border-radius: 6px; background: var(--noir2); border: 1px solid rgba(255, 174, 1, 0.4); color: var(--ambre); opacity: 0; transform: translateY(4px); transition: opacity 0.3s ease, transform 0.3s ease; }
.champ-demo.est-rempli .champ-demo__boite { border-color: rgba(255, 174, 1, 0.7); box-shadow: 0 0 0 1px rgba(255, 174, 1, 0.2), 0 0 18px rgba(255, 122, 47, 0.25); }
.champ-demo.est-rempli .champ-demo__valeur, .champ-demo.est-rempli .champ-demo__source { opacity: 1; transform: none; }
.file-demo { border-top: 1px solid var(--trait); padding: 12px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: rgba(4, 6, 10, 0.5); }
.file-demo__ligne { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 10px; border: 1px solid rgba(255, 174, 1, 0.45); background: rgba(255, 174, 1, 0.07); color: var(--blanc); font: 500 0.85rem/1.2 var(--f-texte); cursor: pointer; }
.file-demo__ligne .point { width: 8px; height: 8px; border-radius: 50%; background: var(--ambre); box-shadow: 0 0 8px var(--ambre); animation: pulse 1.6s ease infinite; }
.file-demo__ligne.est-pris { opacity: 0.5; }
.file-demo__ligne.est-pris .point { animation: none; }
@keyframes pulse { 50% { opacity: 0.35; } }

/* ---------------------------------------------------------------- les apports */
.apports { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.apport { grid-column: span 2; padding: 30px; display: grid; gap: 12px; align-content: start; }
.apport:nth-child(4), .apport:nth-child(5) { grid-column: span 3; }
.apport__icone { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; border: 1px solid rgba(255, 174, 1, 0.3); background: rgba(255, 174, 1, 0.06); color: var(--ambre); }
.apport__icone svg { width: 22px; height: 22px; }
.apport--glace .apport__icone { border-color: rgba(142, 197, 255, 0.3); background: rgba(142, 197, 255, 0.06); color: var(--glace); }
.apport p { color: var(--gris); }

/* ---------------------------------------------------------------- les deux slides du deck (classes deck-solution et deck-echelle)
   « Une solution SaaS » : quatre points en deux colonnes, puis la bande degradee (hebergement,
   conformite). « Concue pour passer a l'echelle » : six points et la carte orange a droite. */
.specs--deux .spec:nth-child(-n+2) { border-top: 0; padding-top: 0; }
.specs.specs--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.specs--trois .spec { border-top: 0; padding-top: 0; }
.deck-solution .spec__nom, .deck-echelle .spec__nom, .deck-solution .spec__nom + p, .deck-echelle .spec__nom + p { max-width: 46ch; }
.deck-solution .spec .spec__nom, .deck-echelle .spec .spec__nom { font-size: 1.12rem; letter-spacing: 0.2em; color: var(--blanc); font-weight: 600; }
/* la carte « Toujours en apprentissage », au format du slide : un rectangle net, le degrade
   horizontal ambre -> rouge-orange, l'intitule en blanc espace, le titre et le texte en noir */
.deck-echelle .carte-neon { border-radius: 0; background: linear-gradient(90deg, #FFAE01 0%, #FF8E24 45%, #FF5A3D 100%); box-shadow: none;
  padding: clamp(28px, 3vw, 36px); align-content: center; gap: 18px; }
.deck-echelle .carte-neon__hud { color: #FFFFFF; font-size: 1.15rem; letter-spacing: 0.22em; }
.deck-echelle .carte-neon__titre { color: #0B0B0B; font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.8rem); line-height: 1.2; letter-spacing: -0.015em; }
.deck-echelle .carte-neon p:last-child { color: #111111; font-size: 0.98rem; line-height: 1.7; margin-top: 12px; }
.deck-echelle .carte-neon strong { color: #000000; }
.deck-echelle { overflow-x: clip; }   /* la lueur ne doit pas elargir la page sur mobile */
.deck-echelle .echelle { position: relative; }
.deck-echelle .echelle::before { content: ""; position: absolute; width: 420px; height: 420px; right: -120px; top: -220px; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 174, 1, 0.22) 0%, rgba(255, 174, 1, 0) 65%); }
.deck-solution .spec, .deck-echelle .spec { gap: 10px; padding-block: 26px; }
.deck-solution .spec p:not(.spec__nom), .deck-echelle .spec p:not(.spec__nom) { font-size: 1.04rem; }
.bande-neon { margin-top: clamp(28px, 4vw, 44px); border-radius: var(--r-plaque); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden;
  border: 1px solid var(--trait-fort);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.01) 45%, rgba(255, 255, 255, 0) 100%), #10131A;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.07); }
.bande-neon > div + div { border-left: 1px solid var(--trait); }
.bande-neon > div { padding: clamp(26px, 3.5vw, 40px); display: grid; gap: 10px; justify-items: center; align-content: center; text-align: center; }
.bande-neon__nom { font: 700 0.95rem/1.2 var(--f-hud); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ambre); display: flex; align-items: center; gap: 12px; }
.bande-neon p:not(.bande-neon__nom) { color: var(--texte); font-size: 1.05rem; }
.etiquette--blanche { border-color: #fff; background: #fff; color: #E0442C; border-radius: 999px; padding: 6px 12px; }
.echelle { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.8fr); gap: clamp(24px, 4vw, 56px); align-items: stretch; }

/* ---------------------------------------------------------------- l'offre */
.offre { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.9fr); gap: clamp(24px, 4vw, 48px); align-items: stretch; }
.specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 56px); }
.spec { padding: 22px 0; border-top: 1px solid var(--trait); display: grid; gap: 8px; align-content: start; }
.spec__nom { font: 600 0.9rem/1.2 var(--f-hud); letter-spacing: 0.18em; text-transform: uppercase; color: var(--blanc); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spec p { color: var(--gris); }
.etiquette { font: 600 0.66rem/1 var(--f-hud); letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 8px; border-radius: 6px; border: 1px solid rgba(142, 197, 255, 0.45); color: var(--glace); }
.carte-neon { border-radius: var(--r-plaque); padding: clamp(26px, 3vw, 38px); color: #150A02; display: grid; gap: 14px; align-content: center;
  background: linear-gradient(160deg, #FFB000 0%, #FF8A2A 55%, #FF5A3A 100%); box-shadow: 0 20px 60px -20px rgba(255, 122, 47, 0.45); }
.carte-neon__hud { font: 700 0.78rem/1 var(--f-hud); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(21, 10, 2, 0.72); }
.carte-neon__titre { font: 700 clamp(1.5rem, 1.15rem + 1.2vw, 2.2rem)/1.1 var(--f-texte); letter-spacing: -0.03em; color: #150A02; text-wrap: balance; }
.carte-neon p { color: rgba(21, 10, 2, 0.85); }
.pour-qui { margin-top: clamp(40px, 6vw, 64px); display: grid; gap: 16px; }
.puces { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.puces li { font-size: 0.95rem; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--trait-fort); color: var(--texte); background: rgba(255, 255, 255, 0.02); }

/* ---------------------------------------------------------------- appel final */
.appel { padding-bottom: clamp(64px, 9vw, 120px); }
.appel__plaque { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: clamp(30px, 5vw, 60px); overflow: hidden; }
.appel__plaque::before { content: ""; position: absolute; width: 520px; height: 520px; right: -140px; top: -260px; background: radial-gradient(circle, rgba(255, 122, 47, 0.12), rgba(255, 122, 47, 0) 65%); pointer-events: none; }
.appel__titre { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); margin-bottom: 12px; }
.appel__texte { color: var(--gris); max-width: 52ch; }

/* ---------------------------------------------------------------- contact */
.intro { padding-top: clamp(56px, 8vw, 110px); padding-bottom: clamp(36px, 5vw, 64px); }
.intro h1 { font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.4rem); letter-spacing: -0.04em; margin: 20px 0 22px; }
.contact { display: grid; grid-template-columns: minmax(0, 820px); justify-content: center; gap: 22px; align-items: start; padding-bottom: clamp(64px, 9vw, 120px); }
.formulaire .boutons { justify-content: flex-end; }
.page-contact .intro { text-align: center; }
.page-contact .intro .lead { margin-inline: auto; }
.formulaire { padding: clamp(24px, 3.5vw, 40px); display: grid; gap: 18px; }
.formulaire__ligne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.champ { display: grid; gap: 8px; }
.champ label { font: 600 0.78rem/1 var(--f-hud); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris); }
.champ input, .champ textarea { width: 100%; min-height: 50px; padding: 13px 15px; border-radius: 12px; border: 1px solid var(--trait-fort); background: rgba(4, 6, 10, 0.7); color: var(--blanc); font: 400 1rem/1.4 var(--f-texte); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.champ textarea { min-height: 150px; resize: vertical; }
.champ input:focus, .champ textarea:focus { outline: none; border-color: rgba(255, 174, 1, 0.7); box-shadow: 0 0 0 3px rgba(255, 174, 1, 0.15); }
.champ [aria-invalid="true"] { border-color: var(--rouge); }
.champ__erreur { font-size: 0.85rem; color: #FF8A7E; }
.consentement { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 0.9rem; color: var(--gris); }
.consentement input { width: 20px; height: 20px; accent-color: var(--ambre); margin-top: 2px; }
.formulaire__etat { font-size: 0.95rem; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--trait-fort); }
.formulaire__etat--ok { border-color: rgba(255, 174, 1, 0.5); color: var(--blanc); background: rgba(255, 174, 1, 0.06); }
.formulaire__etat--ko { border-color: rgba(255, 61, 46, 0.5); color: #FFB3AB; background: rgba(255, 61, 46, 0.06); }
.contact__cote { padding: clamp(24px, 3vw, 34px); display: grid; gap: 20px; align-content: start; }
.suite { list-style: none; display: grid; gap: 16px; counter-reset: suite; }
.suite li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; counter-increment: suite; }
.suite li::before { content: counter(suite); font: 500 0.82rem/1.9 var(--f-mono); color: var(--glace); }

/* ---------------------------------------------------------------- mentions */
.texte-legal { display: grid; gap: 28px; max-width: 72ch; padding-bottom: clamp(64px, 9vw, 120px); }
.texte-legal h2 { font-size: 1.35rem; margin-bottom: 8px; }
.a-completer { color: var(--ambre); font-family: var(--f-mono); font-size: 0.92em; }

/* ---------------------------------------------------------------- pied */
.pied { border-top: 1px solid var(--trait); padding-block: 32px; }
.pied__barre { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.pied__baseline { color: var(--blanc); font-weight: 650; letter-spacing: -0.02em; margin-right: auto; }
.pied__liens { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 0.88rem; color: var(--gris2); }
.pied__liens a { color: var(--gris); text-decoration: none; }
.pied__liens a:hover { color: var(--blanc); }

/* ---------------------------------------------------------------- apparitions au defilement */
.js .revele { opacity: 0; transform: translateY(28px); transition: opacity 0.9s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 90ms); }
.js .revele.est-vu { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- tailles d'ecran */
@media (max-width: 980px) {
  .apports { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apport, .apport:nth-child(4), .apport:nth-child(5) { grid-column: span 1; }
  .apport:nth-child(5) { grid-column: span 2; }
}
/* le cycle devient une ligne verticale qui se remplit au defilement */
@media (max-width: 860px) {
  .cycle__schema { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 28px; padding-left: 46px; position: relative; }
  .cycle__schema::before, .cycle__schema::after { content: ""; position: absolute; left: 15px; top: 10px; width: 2px; border-radius: 2px; }
  .cycle__schema::before { bottom: 10px; background: var(--trait-fort); }
  .cycle__schema::after { height: calc((100% - 20px) * var(--p, 1)); background: linear-gradient(180deg, #FFD23F, #FF7A2F, #FF3D2E); box-shadow: 0 0 10px rgba(255, 122, 47, 0.7); }
  .cycle__piste { display: none; }
  .cycle__etape { grid-column: 1; grid-row: auto; text-align: left; justify-items: start; position: relative; padding-inline: 0; }
  .cycle__etape::before { content: ""; position: absolute; left: -39px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--nuit); border: 2px solid var(--trait-fort); transition: background 0.4s ease, border-color 0.4s ease; z-index: 1; }
  .cycle__etape.est-actif::before, html:not(.js) .cycle__etape::before { background: var(--ambre); border-color: #FFD23F; box-shadow: 0 0 10px var(--ambre); }
}
@media (max-width: 860px) {
  .hero__grille, .deux, .demo, .offre, .contact, .echelle { grid-template-columns: minmax(0, 1fr); }
  .hero__m { order: -1; justify-self: start; }
  .hero__m .logo-m { --t: 96px !important; }
  .appel__plaque { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  body { font-size: 1rem; }
  .apports, .specs, .formulaire-demo, .formulaire__ligne, .bande-neon { grid-template-columns: minmax(0, 1fr); }
  .specs--deux .spec:nth-child(2) { border-top: 1px solid var(--trait); padding-top: 22px; }
  .specs.specs--trois { grid-template-columns: minmax(0, 1fr); }
  .specs--trois .spec:nth-child(n+2) { border-top: 1px solid var(--trait); padding-top: 22px; }
  .apport:nth-child(5) { grid-column: span 1; }
  .regle { grid-template-columns: auto minmax(0, 1fr); }
  .regle__fleche { display: none; }
  .regle__alors { grid-column: 2; }
  .entete__actions .bouton { padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .js .revele { opacity: 1; transform: none; }
  .js .logo-m--anime .logo-m__plein, .js .logo-m--anime .logo-m__halo { opacity: 1; }
}

/* ---------------------------------------------------------------- refonte du 28/09/2026 : la valeur mesuree, le film */
.film__cadre { padding: clamp(6px, 1vw, 12px); margin-inline: auto; }
.film__cadre { max-width: 1000px; }
.film__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: calc(var(--r-plaque) - 8px); background: var(--noir); }

.tdb { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 18px); }
.tdb__carte { grid-column: span 2; padding: clamp(18px, 2vw, 24px); display: grid; gap: 12px; align-content: start; }
.tdb__carte--large { grid-column: span 4; }
.tdb__carte--pleine { grid-column: 1 / -1; }
.tdb__haut { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.tdb__t { font: 600 0.78rem/1.25 var(--f-hud); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gris); }
.tdb__exemple { font: 700 0.7rem/1 var(--f-hud); letter-spacing: 0.16em; text-transform: uppercase; color: #150A02; background: var(--neon); padding: 5px 10px; border-radius: 999px; }
.tdb__flux { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.tdb__etape { position: relative; display: grid; gap: 4px; padding: 14px; border-radius: 12px; background: var(--noir2); border: 1px solid var(--trait-fort); }
.tdb__etape b { color: var(--blanc); font-weight: 600; font-size: 0.95rem; }
.tdb__etape span { color: var(--gris); font: 400 0.8rem/1.3 var(--f-mono); }
.tdb__etape:not(:last-child)::after { content: ""; position: absolute; right: -14px; top: 50%; width: 14px; height: 2px; background: var(--neon); }
.tdb__etape--mimeto { border-color: rgba(255, 174, 1, 0.6); background: rgba(255, 174, 1, 0.08); box-shadow: 0 0 24px rgba(255, 140, 30, 0.12); }
.tdb__etape--mimeto span { color: var(--ambre); }
.tdb__variante { font: 400 0.8rem/1.3 var(--f-mono); color: var(--gris2); }
.tdb__calcul { font-size: 0.88rem; line-height: 1.45; color: var(--gris); font-style: italic; }
.tdb__carte--moitie { grid-column: span 3; }
.tdb__val { font: 700 2.2rem/1 var(--f-texte); letter-spacing: -0.03em; color: var(--blanc); font-variant-numeric: tabular-nums; }
.tdb__val small { font: 500 0.9rem/1 var(--f-texte); color: var(--gris); letter-spacing: 0; margin-left: 6px; }
.tdb__val--2 { font-size: 1.5rem; }
.tdb__barres { display: grid; gap: 10px; }
.tdb__barre { display: grid; grid-template-columns: 96px 1fr 64px; gap: 10px; align-items: center; font-size: 0.85rem; color: var(--gris); }
.tdb__barre i { display: block; height: 10px; width: var(--l); border-radius: 6px; background: var(--gris2); }
.tdb__barre--mimeto i { background: var(--neon); }
.tdb__barre em { font: 400 0.8rem/1 var(--f-mono); font-style: normal; text-align: right; color: var(--texte); }
.tdb__anneau { display: flex; align-items: center; gap: 16px; }
.tdb__anneau svg { width: 84px; height: 84px; flex: none; }
.tdb__courbe { display: block; width: 100%; height: auto; }
.tdb .regle { grid-template-columns: auto minmax(0, 1fr); row-gap: 4px; }
.tdb .regle__fleche { display: none; }
.tdb .regle__alors { grid-column: 2; }
.tdb .regle__alors::before { content: "→ "; }


@media (max-width: 900px) {
  .tdb__carte, .tdb__carte--large, .tdb__carte--moitie { grid-column: 1 / -1; }
  .tdb__flux { grid-template-columns: 1fr; }
  .tdb__etape:not(:last-child)::after { right: auto; left: 50%; top: auto; bottom: -14px; width: 2px; height: 14px; }
}
@media (max-width: 600px) {
  .tdb__axe-y { display: none; }
  .tdb__axe-x { font-size: 19px; }
}

/* le dernier point du deploiement (29/09) : seul sur sa ligne, centre sous les deux colonnes */
.specs .spec--centre { grid-column: 1 / -1; justify-self: center; justify-items: center; text-align: center; max-width: 60%; }
@media (max-width: 600px) { .specs .spec--centre { max-width: 100%; text-align: left; justify-self: stretch; justify-items: start; } }
/* tous les processus et leur taux de completion */
.tdb__processus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; }
.tdb__ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 10px; gap: 8px 10px; align-items: center; font-size: 0.9rem; color: var(--texte); }
.tdb__ligne i { grid-column: 1 / -1; grid-row: 2; display: block; height: 10px; border-radius: 6px; background: linear-gradient(90deg, #FFAE01, #FF7A2F) 0 0 / var(--l) 100% no-repeat, var(--noir2); }
.tdb__ligne em { font: 400 0.85rem/1 var(--f-mono); font-style: normal; color: var(--ambre); }
@media (max-width: 600px) { .tdb__processus { grid-template-columns: minmax(0, 1fr); } }

/* l'en-tete de l'accueil (01/10) : le logo arrive en grand, puis retrecit jusqu'a sa place en haut a gauche quand on
   defile ; --grand va de 1 (haut de page) a 0 (apres 160 px), regle par site.js. Pas sur telephone : il toucherait
   les boutons de droite. */
@media (min-width: 700px) {
  .entete .marque__logo { transform-origin: left center; transform: translateY(calc(var(--grand, 0) * var(--descente, 0px))) scale(calc(1 + var(--grand, 0) * 1.3)); }
}
@media (max-width: 600px) { .bande-neon > div + div { border-left: 0; border-top: 1px solid var(--trait); } }
/* le bouton « Retour » de la page Contact (01/10) */
.retour { display: flex; width: fit-content; align-items: center; gap: 8px; margin-bottom: 22px; font: 500 0.95rem/1 var(--f-texte); color: var(--gris); text-decoration: none; }
.retour:hover { color: var(--blanc); }

/* ---------------------------------------------------------------- site v2 (01/10/2026) */
/* le menu sur telephone : un bouton « Menu » ecrit en toutes lettres, qui ouvre un tiroir sous l'en-tete */
@media (max-width: 960px) {
  .entete__menu { display: inline-flex; align-items: center; }
  .entete__nav { display: none; position: absolute; left: 0; right: 0; top: 100%; margin: 0; flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gouttiere) 18px; background: rgba(4, 6, 10, 0.97); border-bottom: 1px solid var(--trait); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
  .entete__nav.est-ouvert { display: flex; }
  .entete__nav a:not(.langue) { padding: 14px 2px; border-bottom: 1px solid var(--trait); font-size: 1.02rem; }
  .entete__nav a[aria-current="page"] { box-shadow: none; color: var(--ambre); }
  .entete__nav .langue { align-self: flex-start; margin-top: 14px; }
  .entete__barre { position: relative; }
}
@media (max-width: 420px) { .entete__actions .bouton--petit { padding: 0 12px; font-size: 0.85rem; } }

/* le cycle n'est plus epingle (01/10) : il se trace une fois quand il arrive a l'ecran, et chaque etape mene a sa
   partie de la page Fonctionnement */
a.cycle__etape { text-decoration: none; color: inherit; border-radius: 12px; transition: opacity 0.5s ease, transform 0.6s cubic-bezier(.2, .7, .2, 1), background 0.25s ease; }
a.cycle__etape:hover { background: rgba(255, 174, 1, 0.05); }
a.cycle__etape:hover h3 { color: var(--ambre); }
.cycle__lien { justify-self: center; color: var(--ambre); text-decoration: none; font-weight: 600; }
.cycle__lien:hover { color: var(--blanc); }

/* « Pour qui » : les metiers */
.metiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.metier { padding: clamp(20px, 2.4vw, 28px); display: grid; gap: 10px; align-content: start; text-decoration: none; color: inherit; }
.metier h3 { font-size: 1.2rem; }
.metier p { color: var(--gris); }
.metier .suite-lien { color: var(--ambre); font-weight: 600; margin-top: 6px; }
a.metier:hover { border-color: rgba(255, 174, 1, 0.45); }
.definition { font-size: var(--t-lead); line-height: 1.55; max-width: 64ch; color: var(--texte); }
/* les equipes : quatre plans du film sous la definition (15/10) */
.equipes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; list-style: none; }
.equipes figure { margin: 0; display: grid; gap: 10px; }
.equipes img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; border: 1px solid var(--trait); }
.equipes figcaption { font-size: 0.95rem; color: var(--gris); }
@media (max-width: 760px) { .equipes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* le film : la transcription, depliable */
.transcription { margin-top: 18px; max-width: 760px; }
.transcription summary { cursor: pointer; color: var(--ambre); font-weight: 600; list-style: none; }
.transcription summary::-webkit-details-marker { display: none; }
.transcription summary::before { content: "+ "; }
.transcription[open] summary::before { content: "− "; }
.transcription dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 14px 0 0; }
.transcription dt { font: 600 0.78rem/1.6 var(--f-hud); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris); }
.transcription dd { margin: 0; color: var(--texte); }
.film__legende { color: var(--gris); margin-top: 14px; }

/* les pages internes : un haut de page court, un sommaire, des parties numerotees quand l'ordre compte */
.haut-page { padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(32px, 4vw, 56px); }
.haut-page h1 { font-size: clamp(2.3rem, 1.5rem + 3.2vw, 4rem); letter-spacing: -0.04em; margin: 18px 0 20px; }
.fil { font-size: 0.86rem; color: var(--gris2); }
.fil a { color: var(--gris); text-decoration: none; }
.ancres { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.ancres a { font-size: 0.9rem; color: var(--texte); text-decoration: none; border: 1px solid var(--trait-fort); border-radius: 999px; padding: 7px 14px; }
.ancres a:hover { border-color: rgba(255, 174, 1, 0.5); color: var(--blanc); }
.partie { padding-block: clamp(48px, 6vw, 80px); border-top: 1px solid var(--trait); scroll-margin-top: calc(var(--entete) + 12px); }
.partie__grille { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.partie__num { font: 500 0.85rem/1 var(--f-mono); color: var(--ambre); }
.partie h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); margin: 12px 0 16px; }
.texte { display: grid; gap: 14px; max-width: 64ch; }
.texte p { color: var(--texte); }
.texte h3 { font-size: 1.1rem; margin-top: 10px; }
.liste { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.liste li::marker { color: var(--ambre); }
.liste--non li::marker { color: var(--gris2); }
/* les questions (21/10) : fermees par defaut, une fleche pour les ouvrir, la reponse arrive dessous */
/* la partie Questions prend toute la largeur : le titre au-dessus, les questions dessous */
#questions .partie__grille { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.questions { display: grid; gap: 12px; width: 100%; max-width: 920px; }
.question { border: 1px solid var(--trait-fort); border-radius: 14px; background: rgba(255, 255, 255, 0.02); transition: border-color 0.2s, background 0.2s; }
.question:hover { border-color: rgba(255, 174, 1, 0.35); }
.question[open] { border-color: rgba(255, 174, 1, 0.5); background: rgba(255, 174, 1, 0.04); }
.question summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 26px; border-radius: 14px; }
.question summary::-webkit-details-marker { display: none; }
.question summary h3 { margin: 0; font-size: 1.15rem; }
.question summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-top: -5px; border-right: 2px solid var(--ambre); border-bottom: 2px solid var(--ambre); transform: rotate(45deg); transition: transform 0.25s ease, margin 0.25s ease; }
.question[open] summary::after { transform: rotate(-135deg); margin-top: 5px; }
.question summary:focus-visible { outline: 2px solid var(--ambre); outline-offset: 3px; }
.question__reponse { padding: 0 26px 24px; }
.question__reponse p { margin: 0; color: var(--texte); max-width: 70ch; }
/* l'ouverture en douceur, la ou le navigateur sait animer une hauteur « auto » */
@supports (interpolate-size: allow-keywords) {
  .questions { interpolate-size: allow-keywords; }
  .question::details-content { block-size: 0; overflow: hidden; transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete; }
  .question[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .question, .question summary::after, .question::details-content { transition: none; }
}

/* la saisie d'exemple : chaque champ dit d'ou vient sa valeur */
.saisie { padding: 20px; display: grid; gap: 10px; }
.saisie__tete { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
.saisie__champ { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--trait-fort); background: rgba(4, 6, 10, 0.6); }
.saisie__champ.est-rempli { border-color: rgba(255, 174, 1, 0.6); box-shadow: 0 0 16px rgba(255, 122, 47, 0.14); }
.saisie__champ span { font-size: 0.86rem; color: var(--gris); }
.saisie__champ b { font: 500 0.92rem/1.3 var(--f-mono); color: var(--blanc); overflow-wrap: anywhere; }
.saisie__champ em { font: 600 0.68rem/1 var(--f-hud); letter-spacing: 0.12em; text-transform: uppercase; font-style: normal; color: var(--ambre); white-space: nowrap; }
.saisie__champ em.doc { color: var(--glace); }
.saisie__champ em.vide { color: var(--gris2); }
.question-carte { margin-top: 6px; padding: 16px; border-radius: 12px; border: 1px solid rgba(255, 174, 1, 0.45); background: rgba(255, 174, 1, 0.05); display: grid; gap: 10px; }
.question-carte .choix { display: flex; gap: 8px; flex-wrap: wrap; }
.question-carte .choix span { border: 1px solid var(--trait-fort); border-radius: 8px; padding: 6px 12px; font-size: 0.88rem; color: var(--blanc); }

/* le pilote : avant, pendant, apres */
.frise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: f; }
.frise > div { padding: clamp(20px, 2.4vw, 28px); display: grid; gap: 10px; align-content: start; }
.frise h3 { font-size: 1.2rem; }
.frise .quand { font: 600 0.78rem/1 var(--f-hud); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ambre); }

/* la securite : ce qu'il observe, ce qu'il ne capte pas */
.colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.colonnes > div { padding: clamp(20px, 2.4vw, 28px); display: grid; gap: 12px; align-content: start; }
.colonnes h3 { font-size: 1.15rem; }

/* la connexion : l'espace client, prepare pour le SSO */
.connexion { min-height: 60vh; display: grid; place-items: center; padding-block: clamp(48px, 8vw, 110px); }
.connexion__carte { width: min(460px, 100%); padding: clamp(26px, 4vw, 38px); display: grid; gap: 16px; }
.connexion__carte h1 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.2rem); letter-spacing: -0.03em; }
.connexion__carte .logo-m { justify-self: start; }
.sso { display: grid; gap: 10px; }
.sso button, .connexion__carte input { width: 100%; min-height: 50px; border-radius: 12px; border: 1px solid var(--trait-fort); background: rgba(4, 6, 10, 0.6); color: var(--blanc); font: 500 0.98rem/1 var(--f-texte); padding: 0 16px; }
.sso button { display: flex; align-items: center; gap: 12px; justify-content: flex-start; cursor: not-allowed; }
.sso button[disabled], .connexion__carte input[disabled], .connexion__carte .bouton[aria-disabled="true"] { opacity: 0.55; }
.sso button svg { width: 18px; height: 18px; flex: none; color: var(--ambre); }
.separateur { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; color: var(--gris2); font-size: 0.85rem; }
.separateur::before, .separateur::after { content: ""; height: 1px; background: var(--trait); }
.connexion__note { padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(255, 174, 1, 0.35); background: rgba(255, 174, 1, 0.06); color: var(--texte); font-size: 0.93rem; }
/* l'espace de chaque entreprise (02/10) : la console de la DSI, le Studio des sachants */
.espaces { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.espaces > div { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--trait-fort); background: rgba(4, 6, 10, 0.45); }
.espaces b { color: var(--blanc); font-weight: 600; }
.espaces span { color: var(--gris); font-size: 0.86rem; line-height: 1.35; }
.adresse-espace { display: flex; align-items: center; border: 1px solid var(--trait-fort); border-radius: 12px; background: rgba(4, 6, 10, 0.6); }
.adresse-espace:focus-within { border-color: var(--ambre); }
.connexion__carte .adresse-espace input { border: 0; background: transparent; min-width: 0; flex: 1; }
.connexion__carte .adresse-espace input:focus-visible { outline: none; }
.adresse-espace span { padding-right: 16px; color: var(--gris); font: 500 0.98rem/1 var(--f-texte); }
.connexion__erreur { color: var(--orange); font-size: 0.9rem; margin: -6px 0 0; }
.connexion__carte .bouton { width: 100%; justify-content: center; }
@media (max-width: 420px) { .espaces { grid-template-columns: 1fr; } }

@media (max-width: 900px) {
  .metiers, .frise, .colonnes, .partie__grille { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .saisie__champ { grid-template-columns: minmax(0, 1fr) auto; }
  .saisie__champ span { grid-column: 1 / -1; }
  .transcription dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .transcription dd { margin-bottom: 8px; }
}
.tdb__exemple--petit { font-size: 0.6rem; padding: 4px 8px; opacity: 0.85; }
/* le film a droite du titre (02/10, Romain : « remets la video sur la droite ») */
.hero__grille--film { grid-template-columns: minmax(0, 1fr); }
.hero__film { min-width: 0; max-width: 760px; scroll-margin-top: calc(var(--entete) + 24px); }
.hero__film .film__cadre { max-width: none; }
/* deux colonnes seulement quand le titre tient en deux lignes a cote de la video */
@media (min-width: 1120px) {
  .hero__grille--film { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero__film { max-width: none; }
  .hero__grille--film h1 { font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.6rem); }
}

/* ================================================================================================
   LE MOUVEMENT (05/10, Romain : « je préfère ce qu'on a », puis « les 3 » animations proposées).
   1. la saisie de la page Fonctionnement se tape, champ par champ, a vitesse humaine ;
   2. sur les plaques de verre, le neon de la bordure s'allume la ou passe la souris ;
   3. les traits de neon se dessinent : celui de l'en-tete suit le defilement, ceux du tableau de bord
      se tracent quand leur carte arrive a l'ecran.
   Sans JavaScript, ou avec « moins de mouvement » : tout est a sa place finale, rien ne bouge.
   ================================================================================================ */

/* 1. la saisie qui se tape (site.js, saisieTapee) */
.saisie__champ { transition: border-color 0.4s ease, box-shadow 0.4s ease; }
.saisie__champ b { min-height: 1.3em; }
.saisie__champ em, .saisie .question-carte { transition: opacity 0.5s ease, transform 0.5s ease; }
.saisie.est-en-attente .saisie__champ:not(.est-tape) em, .saisie.est-en-attente .question-carte { opacity: 0; }
.saisie.est-en-attente .question-carte { transform: translateY(8px); }
.saisie__champ b.est-curseur::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -0.15em; background: var(--ambre); animation: curseur 0.9s steps(1) infinite; }
@keyframes curseur { 50% { opacity: 0; } }

/* 2. le reflet : la bordure s'allume sous la souris (::after, un anneau masque), le verre s'eclaire un peu
   (::before, sous le contenu grace a isolation). L'appel garde son propre ::before (son halo fixe). */
.plaque, .bande-neon { --mx: 50%; --my: 50%; }
.plaque, .bande-neon { isolation: isolate; }
.bande-neon { position: relative; }
.plaque::after, .bande-neon::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(255, 216, 74, 0.95), rgba(255, 122, 47, 0.6) 35%, rgba(255, 122, 47, 0) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity 0.45s ease; }
.plaque:not(.appel__plaque)::before, .bande-neon::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 174, 1, 0.075), rgba(255, 174, 1, 0) 62%);
  opacity: 0; transition: opacity 0.45s ease; }
.est-eclairee::after, .est-eclairee:not(.appel__plaque)::before { opacity: 1; }

/* 3. les traits de neon qui se dessinent */
.entete::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--neon); transform-origin: left center;
  transform: scaleX(var(--defile, 0)); box-shadow: 0 0 10px rgba(255, 140, 30, 0.55); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.entete.est-colle::after { opacity: 1; }
.tdb__etape:nth-child(2) { --k: 1; }
.tdb__etape:nth-child(3) { --k: 2; }
.tdb__etape:nth-child(4) { --k: 3; }
.js .tdb__carte.revele .tdb__etape:not(:last-child)::after { transform: scaleX(0); transform-origin: left center;
  transition: transform 0.45s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(0.6s + var(--k, 0) * 0.28s); }
.js .tdb__carte.revele .tdb__barre i { transform: scaleX(0); transform-origin: left center; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1) 0.4s; }
.js .tdb__carte.revele .tdb__barre--mimeto i { transition-delay: 0.7s; }
.js .tdb__carte.revele .tdb__ligne i { background-size: 0 100%, auto; transition: background-size 1.3s cubic-bezier(.2, .7, .2, 1) 0.4s; }
.js .tdb__carte.revele .tdb__ligne:nth-child(2) i { transition-delay: 0.55s; }
.js .tdb__carte.revele .tdb__ligne:nth-child(3) i { transition-delay: 0.7s; }
.js .tdb__carte.revele .tdb__ligne:nth-child(4) i { transition-delay: 0.85s; }
.js .tdb__carte.revele .tdb__anneau-val { stroke-dasharray: 0 100; transition: stroke-dasharray 1.4s cubic-bezier(.2, .7, .2, 1) 0.4s; }
.js .tdb__carte.revele .tdb__trace { stroke-dasharray: 1 2; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s cubic-bezier(.4, 0, .2, 1) 0.4s; }
.js .tdb__carte.revele .tdb__aire, .js .tdb__carte.revele .tdb__projection, .js .tdb__carte.revele .tdb__point { opacity: 0; transition: opacity 0.8s ease 1.9s; }
.js .tdb__carte.revele.est-vu .tdb__etape:not(:last-child)::after, .js .tdb__carte.revele.est-vu .tdb__barre i { transform: none; }
.js .tdb__carte.revele.est-vu .tdb__ligne i { background-size: var(--l) 100%, auto; }
.js .tdb__carte.revele.est-vu .tdb__anneau-val { stroke-dasharray: var(--taux) 100; }
.js .tdb__carte.revele.est-vu .tdb__trace { stroke-dashoffset: 0; }
.js .tdb__carte.revele.est-vu .tdb__aire, .js .tdb__carte.revele.est-vu .tdb__point { opacity: 1; }
.js .tdb__carte.revele.est-vu .tdb__projection { opacity: 0.7; }
@media (max-width: 900px) {
  .js .tdb__carte.revele .tdb__etape:not(:last-child)::after { transform: scaleY(0); transform-origin: center top; }
}