/* Lexia · site de présentation · une seule feuille */

:root {
  --nuit: #0E1A15;
  --nuit-2: #13261F;
  --nuit-3: #1A3129;
  --verre: rgba(255, 255, 255, 0.06);
  --verre-bord: rgba(255, 255, 255, 0.12);
  --verre-bord-fort: rgba(255, 255, 255, 0.22);
  --papier: #EFF2EF;
  --papier-2: #D9E1DB;
  --papier-3: #A9B8AF;
  --encre: #15201C;
  --vert: #1E5E44;
  --vert-clair: #5CC498;
  --vert-vif: #3FA37A;
  --vert-fond: rgba(92, 196, 152, 0.14);
  --ambre: #E0B45A;
  --brique: #D9705F;
  --ombre: 0 24px 60px -20px rgba(0, 0, 0, 0.65), 0 8px 20px -10px rgba(0, 0, 0, 0.5);
  --titre: "Spectral", Georgia, "Times New Roman", serif;
  --texte: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", "SF Mono", Menlo, monospace;
  --sortie: cubic-bezier(0.16, 1, 0.3, 1);
  --largeur: 1200px;
  --gouttiere: clamp(16px, 4vw, 40px);
  --rayon: 8px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--nuit);
  color: var(--papier);
  font-family: var(--texte);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--vert-clair); color: var(--nuit); }
:focus-visible { outline: 2px solid var(--vert-clair); outline-offset: 3px; border-radius: 4px; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p a, .pied a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--titre); font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; margin: 0; }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); line-height: 1.15; }
h3 { font-size: 1.35rem; line-height: 1.25; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.cadre { width: min(var(--largeur), 100% - 2 * var(--gouttiere)); margin-inline: auto; }
.saut { position: absolute; left: -999px; top: 8px; background: var(--vert-clair); color: var(--nuit); padding: 8px 12px; border-radius: 6px; z-index: 100; }
.saut:focus { left: 8px; }

/* ─── Boutons ─── */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; font-weight: 500; font-size: 0.96rem;
  border: 1px solid transparent; transition: transform 0.5s var(--sortie), background 0.3s, border-color 0.3s, box-shadow 0.5s var(--sortie);
  will-change: transform;
}
.bouton:hover { transform: translateY(-2px); }
.bouton:active { transform: translateY(0); transition-duration: 0.1s; }
.bouton-plein { background: var(--vert-clair); color: var(--nuit); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.7); }
.bouton-plein:hover { background: #79D5AE; box-shadow: 0 16px 30px -14px rgba(0, 0, 0, 0.75); }
.bouton-verre { background: var(--verre); border-color: var(--verre-bord-fort); color: var(--papier); backdrop-filter: blur(8px); }
.bouton-verre:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.35); }
.bouton-grand { padding: 16px 30px; font-size: 1.08rem; }
.lien-sobre { color: var(--papier-2); font-size: 0.96rem; transition: color 0.3s; }
.lien-sobre:hover { color: #fff; }

/* ─── En-tête ─── */
.entete {
  position: sticky; top: 0; z-index: 50;
  transition: background 0.4s, box-shadow 0.4s, border-color 0.4s;
  border-bottom: 1px solid transparent;
}
.entete.est-collee { background: rgba(14, 26, 21, 0.78); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-color: var(--verre-bord); }
.entete-ligne { display: flex; align-items: center; gap: 32px; height: 72px; }
.marque { font-family: var(--titre); font-weight: 600; font-size: 1.55rem; letter-spacing: -0.01em; color: #fff; line-height: 1; }
.marque span { color: var(--vert-clair); }
.menu { display: flex; gap: 26px; margin-left: 8px; }
.menu a { position: relative; color: var(--papier-2); font-size: 0.96rem; padding: 6px 0; transition: color 0.3s; }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--vert-clair); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--sortie); }
.menu a:hover, .menu a.est-actif { color: #fff; }
.menu a:hover::after, .menu a.est-actif::after { transform: scaleX(1); }
.entete-actions { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.burger { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 8px; position: relative; }
.burger span { position: absolute; left: 12px; right: 12px; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.4s var(--sortie), top 0.4s var(--sortie); top: 17px; }
.burger span:last-child { top: 25px; }
.burger[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }
.menu-mobile { display: none; flex-direction: column; padding: 8px var(--gouttiere) 20px; background: rgba(14, 26, 21, 0.96); border-bottom: 1px solid var(--verre-bord); }
.menu-mobile a { padding: 12px 0; border-bottom: 1px solid var(--verre-bord); font-size: 1.05rem; }
.menu-mobile a:last-child { border: 0; color: var(--vert-clair); }

/* ─── Accueil ─── */
.accueil { position: relative; padding: clamp(40px, 6vw, 80px) 0 40px; overflow: hidden; min-height: calc(100svh - 72px); display: flex; flex-direction: column; justify-content: center; }
.halo {
  position: absolute; inset: -20% -10% auto -10%; height: 90%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(60% 55% at 72% 40%, rgba(92, 196, 152, 0.16), transparent 70%),
    radial-gradient(45% 45% at 18% 20%, rgba(30, 94, 68, 0.35), transparent 70%);
  filter: blur(20px);
}
.accueil-grille { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.accueil-texte h1 { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.1rem); line-height: 1.06; color: #fff; }
.accueil-defile { margin: 22px 0 0; font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem); display: flex; flex-wrap: wrap; gap: 0 0.4em; color: var(--papier-2); font-family: var(--titre); font-weight: 400; font-style: italic; }
.defile { position: relative; display: inline-grid; height: 1.45em; overflow: hidden; color: var(--vert-clair); font-style: normal; font-weight: 500; vertical-align: bottom; }
.defile-mot { grid-area: 1 / 1; white-space: nowrap; transform: translateY(110%); opacity: 0; transition: transform 0.7s var(--sortie), opacity 0.5s; }
.defile-mot.est-actif { transform: translateY(0); opacity: 1; }
.defile-mot.est-sorti { transform: translateY(-110%); opacity: 0; transition-timing-function: cubic-bezier(0.5, 0, 0.75, 0); }
.accueil-sous { margin: 22px 0 0; max-width: 46ch; color: var(--papier-2); font-size: 1.05rem; }
.accueil-boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.accueil-note { margin: 22px 0 0; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.02em; color: var(--papier-3); }

.indice { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); width: 26px; height: 42px; border: 1.5px solid var(--verre-bord-fort); border-radius: 14px; z-index: 1; }
.indice span { position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 3px; background: var(--vert-clair); animation: indice 1.8s var(--sortie) infinite; }
@keyframes indice { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }

/* ─── Repères ─── */
.reperes { padding: 18px 0 0; }
.reperes-ligne { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--verre-bord); border-bottom: 1px solid var(--verre-bord); }
.repere { padding: 26px 24px; display: flex; align-items: baseline; gap: 16px; border-left: 1px solid var(--verre-bord); }
.repere:first-child { border-left: 0; }
.repere strong { font-family: var(--mono); font-weight: 500; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); color: var(--vert-clair); font-variant-numeric: tabular-nums; line-height: 1; min-width: 3.3ch; }
.repere span { color: var(--papier-2); font-size: 0.95rem; max-width: 26ch; line-height: 1.4; }

/* ─── Apparitions ─── */
.js .apparait { opacity: 0; transform: translateY(22px); filter: blur(4px); transition: opacity 0.9s var(--sortie), transform 1s var(--sortie), filter 0.9s var(--sortie); transition-delay: var(--d, 0ms); }
.js .apparait.est-visible { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) { .js .apparait { opacity: 1; transform: none; filter: none; transition: none; } }

/* ─── Le constat ─── */
.constat { padding: clamp(72px, 10vw, 140px) 0 clamp(56px, 8vw, 110px); }
.constat h2 { color: #fff; max-width: 26ch; }
.constat-fin { margin: 18px 0 0; font-family: var(--titre); font-style: italic; font-size: 1.25rem; color: var(--papier-2); max-width: 56ch; }
.constat-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.aujourdhui { border: 1px solid var(--verre-bord); border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, 0.02); }
.aujourdhui-tete span { display: block; padding: 14px 22px; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--papier-3); background: rgba(255, 255, 255, 0.03); border-bottom: 1px solid var(--verre-bord); }
.aujourdhui-ligne span { display: block; position: relative; padding: 16px 22px 16px 42px; border-bottom: 1px solid var(--verre-bord); color: var(--papier-2); font-size: 1rem; }
.aujourdhui-ligne span::before { content: ""; position: absolute; left: 22px; top: 23px; width: 10px; height: 1px; background: rgba(217, 112, 95, 0.75); }
.aujourdhui-ligne:last-child span { border-bottom: 0; }

/* ─── La frise ─── */
.frise { padding: clamp(56px, 8vw, 110px) 0; background: linear-gradient(180deg, var(--nuit) 0%, var(--nuit-2) 30%, var(--nuit-2) 70%, var(--nuit) 100%); }
.frise h2 { color: #fff; max-width: 22ch; }
.frise-schema { --n: 6; margin-top: clamp(40px, 5vw, 64px); position: relative; }
.frise-entrees { display: grid; grid-template-columns: repeat(var(--n), 1fr); margin-bottom: 26px; }
.frise-entree { grid-column: var(--col); position: relative; padding-bottom: 26px; }
.frise-entree b, .frise-sortie b { display: block; font-family: var(--titre); font-weight: 600; font-size: 1.1rem; color: #fff; }
.frise-entree span, .frise-sortie span { display: block; font-size: 0.86rem; color: var(--papier-3); line-height: 1.35; margin-top: 2px; }
.frise-entree i { position: absolute; left: 14px; bottom: -26px; width: 1px; height: 30px; background: linear-gradient(var(--papier-3), var(--vert-clair)); }
.frise-accolade { position: relative; height: 26px; margin: 0 14px 12px; border: 1px solid var(--vert-clair); border-bottom: 0; border-radius: 12px 12px 0 0; opacity: 0.9; }
.frise-accolade span { position: absolute; left: 50%; top: -13px; transform: translateX(-50%); padding: 2px 12px; background: var(--nuit-2); color: var(--vert-clair); font-family: var(--titre); font-weight: 600; font-size: 1.05rem; }
.frise-etapes { display: grid; grid-template-columns: repeat(var(--n), 1fr); position: relative; gap: 8px; }
.frise-etapes::before { content: ""; position: absolute; left: 14px; right: 14px; top: 14px; height: 2px; background: var(--verre-bord-fort); border-radius: 2px; }
.frise-etapes::after { content: ""; position: absolute; left: 14px; top: 14px; height: 2px; width: calc((100% - 28px) * var(--trace, 0)); background: var(--vert-clair); border-radius: 2px; transition: width 0.15s linear; }
.frise-etapes li { position: relative; padding: 42px 8px 0 0; }
.frise-etapes li::before { content: ""; position: absolute; left: 6px; top: 6px; width: 18px; height: 18px; border-radius: 50%; background: var(--nuit-2); border: 2px solid var(--verre-bord-fort); z-index: 1; transition: border-color 0.4s, background 0.4s, transform 0.6s var(--sortie); }
.frise-etapes li.est-atteinte::before { border-color: var(--vert-clair); background: var(--vert-clair); box-shadow: 0 0 0 5px rgba(92, 196, 152, 0.18); transform: scale(1.1); }
.frise-etapes li b { display: block; font-weight: 500; font-size: 0.98rem; color: var(--papier-2); line-height: 1.3; max-width: 12ch; transition: color 0.4s; }
.frise-etapes li.est-atteinte b { color: #fff; }
.frise-sorties { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; padding-top: 28px; border-top: 1px dashed var(--verre-bord-fort); }
.frise-sortie { padding-left: 16px; border-left: 1px solid var(--vert-clair); }

/* ─── La démo ─── */
.demo { padding: clamp(64px, 9vw, 130px) 0; }
.demo-tete { max-width: 62ch; }
.demo-tete h2 { color: #fff; }
.demo-tete p { margin: 14px 0 0; color: var(--papier-2); }
.demo-corps { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: clamp(32px, 4vw, 52px); }
.demo-rail { display: grid; gap: 6px; position: sticky; top: 96px; }
.demo-rail button {
  position: relative; width: 100%; text-align: left; padding: 14px 16px 16px 44px; border-radius: 10px;
  border: 1px solid transparent; transition: background 0.3s, border-color 0.3s; overflow: hidden;
}
.demo-rail button::before { content: counter(etape); counter-increment: etape; position: absolute; left: 14px; top: 15px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--verre-bord-fort); color: var(--papier-3); font-family: var(--mono); font-size: 0.7rem; display: grid; place-items: center; transition: all 0.3s; }
.demo-rail { counter-reset: etape; }
.demo-rail button b { display: block; font-weight: 600; font-size: 1.02rem; color: var(--papier-2); transition: color 0.3s; }
.demo-rail button span { display: none; margin-top: 6px; font-size: 0.9rem; color: var(--papier-2); line-height: 1.45; }
.demo-rail button:hover { background: var(--verre); }
.demo-rail button.est-actif { background: var(--verre); border-color: var(--verre-bord); }
.demo-rail button.est-actif b { color: #fff; }
.demo-rail button.est-actif span { display: block; color: var(--papier); animation: deplie 0.6s var(--sortie); }
.demo-rail button.est-actif::before { background: var(--vert-clair); border-color: var(--vert-clair); color: var(--nuit); font-weight: 500; }
.demo-rail button.est-faite::before { border-color: var(--vert-clair); color: var(--vert-clair); }
.barre { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--vert-clair); transform: scaleX(0); transform-origin: left; }
.demo-rail button.est-faite .barre { transform: scaleX(1); }
@keyframes deplie { from { opacity: 0; transform: translateY(-4px); } }

.demo-scene { min-width: 0; position: relative; }
.demo-commandes { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.demo-commandes button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--verre-bord-fort); color: var(--papier); display: grid; place-items: center; transition: background 0.3s, border-color 0.3s; }
.demo-commandes button:hover { background: var(--verre); border-color: rgba(255, 255, 255, 0.4); }
.demo-compteur { font-family: var(--mono); font-size: 0.82rem; color: var(--papier-3); font-variant-numeric: tabular-nums; min-width: 4ch; text-align: center; }
.demo-pause { width: auto !important; padding: 0 16px; border-radius: 999px !important; margin-left: auto; font-size: 0.9rem; }
.demo-pause[aria-pressed="true"] { background: var(--vert-fond); border-color: var(--vert-clair) !important; color: var(--vert-clair); }

/* ─── La trace ─── */
.trace { padding: clamp(56px, 8vw, 110px) 0; background: linear-gradient(180deg, var(--nuit), var(--nuit-2)); }
.trace-grille { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.trace h2 { color: #fff; }
.trace-texte p { color: var(--papier-2); margin: 18px 0 0; max-width: 46ch; }

/* ─── Fonctionnalités ─── */
.fonctions { padding: clamp(64px, 9vw, 130px) 0; background: var(--nuit-2); }
.bandeau { display: inline-block; margin: 0 0 18px; padding: 8px 14px; border-radius: 999px; background: var(--vert-fond); border: 1px solid rgba(92, 196, 152, 0.35); color: var(--vert-clair); font-weight: 500; font-size: 0.9rem; }
.fonctions h2 { color: #fff; max-width: 20ch; }
.fonctions-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(32px, 4vw, 48px); }
.fonction {
  padding: 26px 26px 28px; border-radius: 12px; background: var(--verre); border: 1px solid var(--verre-bord);
  transition: transform 0.6s var(--sortie), border-color 0.4s, background 0.4s; position: relative; overflow: hidden;
}
.fonction::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 0% 0%, rgba(92, 196, 152, 0.14), transparent 70%); opacity: 0; transition: opacity 0.5s; }
.fonction:hover { transform: translateY(-4px); border-color: var(--verre-bord-fort); background: rgba(255, 255, 255, 0.08); }
.fonction:hover::before { opacity: 1; }
.fonction h3 { color: #fff; position: relative; }
.fonction ul { margin-top: 14px; display: grid; gap: 10px; position: relative; }
.fonction li { padding-left: 24px; position: relative; color: var(--papier-2); font-size: 0.98rem; line-height: 1.4; }
.fonction li::before { content: ""; position: absolute; left: 0; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: var(--vert-fond); border: 1px solid rgba(92, 196, 152, 0.5); }
.fonction li::after { content: ""; position: absolute; left: 4px; top: 8px; width: 6px; height: 4px; border-left: 1.5px solid var(--vert-clair); border-bottom: 1.5px solid var(--vert-clair); transform: rotate(-45deg); }

/* ─── Avant / après ─── */
.comparaison { margin-top: clamp(28px, 4vw, 44px); border: 1px solid var(--verre-bord); border-radius: 12px; overflow: hidden; }
.comparaison-tete, .comparaison-ligne { display: grid; grid-template-columns: 1fr 1fr; }
.comparaison-tete span { padding: 14px 24px; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--papier-3); background: rgba(255, 255, 255, 0.03); border-bottom: 1px solid var(--verre-bord); }
.comparaison-tete span:last-child { color: var(--vert-clair); background: var(--vert-fond); }
.comparaison-ligne span { padding: 20px 24px; border-bottom: 1px solid var(--verre-bord); font-size: 1.02rem; }
.comparaison-ligne:last-child span { border-bottom: 0; }
.comparaison-ligne span:first-child { color: var(--papier-3); text-decoration: line-through; text-decoration-color: rgba(217, 112, 95, 0.55); text-decoration-thickness: 1px; }
.comparaison-ligne span:last-child { color: #fff; background: rgba(92, 196, 152, 0.06); border-left: 1px solid var(--verre-bord); font-weight: 500; position: relative; }
.js .comparaison-ligne span:last-child { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--sortie) 0.25s; }
.js .comparaison-ligne.est-visible span:last-child { clip-path: inset(0 0 0 0); }

/* ─── Ce qui rassure ─── */
.rassure { padding: 0 0 clamp(64px, 9vw, 130px); }
.rassure-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--verre-bord); border-bottom: 1px solid var(--verre-bord); }
.rassure-item { padding: 34px 28px; border-left: 1px solid var(--verre-bord); }
.rassure-item:first-child { border-left: 0; padding-left: 0; }
.rassure-item h3 { color: #fff; font-size: 1.25rem; }
.rassure-item p { margin: 10px 0 0; color: var(--papier-2); font-size: 0.98rem; max-width: 34ch; }

/* ─── Contact ─── */
.contact { padding: clamp(40px, 6vw, 80px) 0 clamp(80px, 10vw, 140px); }
.contact-grille {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 32px; align-items: center;
  padding: clamp(32px, 5vw, 64px); border-radius: 20px; overflow: hidden;
  background: linear-gradient(135deg, #1B4A38 0%, var(--vert) 45%, #17442F 100%);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.contact-grille::before { content: ""; position: absolute; inset: auto -10% -60% auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(92, 196, 152, 0.45), transparent 65%); pointer-events: none; }
.contact h2 { color: #fff; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); }
.contact-texte p { margin: 16px 0 0; color: #EEF6F1; font-size: 1.1rem; max-width: 40ch; }
.contact-actions { display: grid; justify-items: start; gap: 14px; position: relative; }
.contact .bouton-plein { background: #fff; color: var(--vert); box-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.5); }
.contact .bouton-plein:hover { background: #F2F7F4; }
.contact-courriel { font-family: var(--mono); font-size: 0.95rem; color: #EEF6F1; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, 0.4); }
.contact-courriel:hover { color: #fff; }

/* ─── Pied ─── */
.pied { border-top: 1px solid var(--verre-bord); padding: 56px 0 28px; background: var(--nuit); }
.pied-grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.pied p { color: var(--papier-3); max-width: 34ch; margin: 14px 0 0; font-size: 0.95rem; }
.pied nav { display: grid; gap: 10px; align-content: start; }
.pied nav b { font-family: var(--mono); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--papier-3); margin-bottom: 4px; }
.pied nav a { color: var(--papier-2); font-size: 0.95rem; transition: color 0.3s; }
.pied nav a:hover { color: #fff; }
.pied-bas { display: flex; justify-content: space-between; gap: 16px; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--verre-bord); color: var(--papier-3); font-size: 0.82rem; font-family: var(--mono); }

/* ─── Petits écrans ─── */
@media (max-width: 1040px) {
  .demo-corps { grid-template-columns: 1fr; }
  .demo-rail { position: static; grid-template-columns: repeat(3, 1fr); }
  .demo-rail button span { display: none !important; }
  .fonctions-grille { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .menu, .entete-actions { display: none; }
  .burger { display: block; }
  .menu-mobile.est-ouvert { display: flex; }
  .accueil { min-height: 0; padding-top: 28px; }
  .accueil-grille { grid-template-columns: 1fr; }
  .accueil-scene { perspective: 1200px; padding: 10px 0 30px; }
  .fiche { width: 52%; right: -2%; }
  .indice { display: none; }
  .reperes-ligne { grid-template-columns: 1fr; }
  .repere { border-left: 0; border-top: 1px solid var(--verre-bord); padding: 18px 0; }
  .repere:first-child { border-top: 0; }
  .constat-grille, .trace-grille, .contact-grille { grid-template-columns: 1fr; }
  .trace-grille { gap: 28px; }
  .frise-schema { --n: 3; }
  .frise-entrees { grid-template-columns: 1fr 1fr; }
  .frise-entree { grid-column: auto; }
  .frise-etapes { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
  .frise-etapes::before, .frise-etapes::after { display: none; }
  .frise-etapes li { padding-top: 0; padding-left: 32px; }
  .frise-etapes li::before { top: 2px; left: 0; }
  .frise-etapes li b { max-width: none; }
  .frise-accolade { display: none; }
  .frise-sorties { grid-template-columns: 1fr; gap: 16px; }
  .demo-rail { grid-template-columns: repeat(2, 1fr); }
  .constat-grille { grid-template-columns: 1fr; }
  .rassure-grille { grid-template-columns: 1fr; }
  .rassure-item { border-left: 0; border-top: 1px solid var(--verre-bord); padding: 24px 0; }
  .rassure-item:first-child { border-top: 0; }
  .contact-actions { justify-items: stretch; }
  .contact .bouton { width: 100%; }
  .pied-grille { grid-template-columns: 1fr; gap: 28px; }
  .bulle { position: static; max-width: none; margin-top: 12px; font-size: 0.92rem; padding: 12px 14px; }
  .frise-entree i { display: none; }
  .frise-entree { padding-bottom: 10px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .fonctions-grille { grid-template-columns: 1fr; }
  .demo-rail { grid-template-columns: 1fr; }
  .demo-rail button { padding: 12px 14px 14px 44px; }
  .comparaison-tete, .comparaison-ligne { grid-template-columns: 1fr; }
  .comparaison-tete span:first-child { display: none; }
  .comparaison-ligne span:first-child { padding-bottom: 6px; border-bottom: 0; font-size: 0.92rem; }
  .comparaison-ligne span:last-child { border-left: 0; padding-top: 6px; }
  .comparaison-ligne span:last-child::before { content: "→ "; color: var(--vert-clair); }
  .frise-etapes { grid-template-columns: 1fr; row-gap: 14px; }
  .accueil-boutons .bouton { width: 100%; }
  .pied-bas { flex-direction: column; gap: 6px; }
}

/* ═══════════════ Scènes dessinées, sans capture ═══════════════ */
/* Le tableau, dans le Mac */
.tableau { width: 100%; aspect-ratio: 1440 / 900; background: var(--papier); border-radius: 4px; padding: 3.2% 3.5%; display: flex; flex-direction: column; gap: 4%; overflow: hidden; }
.tableau-tete { display: flex; align-items: center; gap: 2.2%; }
.marque-mini { width: 4.2%; aspect-ratio: 1; border-radius: 22%; background: var(--vert); color: #fff; font: 600 0.62vw/1 var(--texte); display: grid; place-items: center; flex-shrink: 0; }
.titre-mini { width: 17%; height: 1.4vw; max-height: 18px; border-radius: 4px; background: #B9C5BD; }
.chip-mini { width: 8%; height: 1.05vw; max-height: 14px; border-radius: 999px; background: #E3E3DD; }
.chip-mini.vert { background: #CFE3DA; } .chip-mini.ambre { background: #F1DDBF; } .chip-mini.brique { background: #F0C8C3; }
.nl .qui, .rl .qui { width: 16px; height: 16px; border-radius: 50%; background: #0E6B5A; }
.nl .orig, .rl .orig { height: 10px; border-radius: 999px; }
.orig.v { background: #CFE3DA; } .orig.g { background: #E3E3DD; } .orig.a { background: #F1DDBF; }
.nl .date, .rl .date { height: 6px; border-radius: 3px; background: #C9CCD1; }
@keyframes rang { to { opacity: 1; transform: none; } }
@keyframes nl { to { opacity: 1; transform: none; } }
/* Le registre de la section trace */
.registre { background: #fff; border-radius: 12px; padding: 18px 20px 20px; box-shadow: var(--ombre), 0 0 0 1px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; gap: 14px; color: var(--encre); }
.registre-tete { display: grid; grid-template-columns: 2.2fr 1.4fr 0.7fr 0.9fr 0.8fr; gap: 12px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: #8A9098; padding-bottom: 10px; border-bottom: 1px solid #EFEFEA; }
.rl { display: grid; grid-template-columns: 2.2fr 1.4fr 0.7fr 0.9fr 0.8fr; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid #EFEFEA; opacity: 0; transform: translateY(8px); transition: opacity 0.7s var(--sortie), transform 0.8s var(--sortie); transition-delay: var(--d); }
.registre.est-visible .rl { opacity: 1; transform: none; }
.rl b { display: block; height: 8px; border-radius: 4px; background: #B9C5BD; }
.rl em { display: block; height: 9px; border-radius: 4px; background: #8A968F; }
.rl .qui { width: 22px; height: 22px; } .rl .qui.q1 { background: #8E44AD; } .rl .qui.q2 { background: #3B5BDB; }
.rl .orig { height: 12px; } .rl .date { height: 7px; }

/* La scène du parcours */
.scene { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(160deg, var(--nuit-3), var(--nuit-2)); border-radius: 14px; box-shadow: var(--ombre), inset 0 0 0 1px var(--verre-bord); overflow: hidden; }
.scene::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 0%, rgba(92, 196, 152, 0.10), transparent 70%); pointer-events: none; }
.vignette { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; padding: 90px 40px 50px; opacity: 0; visibility: hidden; transform: scale(0.98); transition: opacity 0.5s var(--sortie), transform 0.7s var(--sortie), visibility 0s 0.5s; }
.vignette.est-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.scene-etapes { position: absolute; left: 16px; right: 16px; top: 14px; display: flex; gap: 6px; z-index: 6; }
.scene-etapes li { flex: 1; min-width: 0; }
.scene-etapes button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; color: var(--papier-3); font-size: 0.8rem; font-weight: 500; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background 0.3s, color 0.3s, border-color 0.3s; }
.scene-etapes button i { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--verre-bord-fort); font: 500 0.68rem var(--mono); display: grid; place-items: center; font-style: normal; transition: all 0.3s; }
.scene-etapes button:hover { background: var(--verre); color: var(--papier); }
.scene-etapes button.est-actif { background: var(--verre); border-color: var(--verre-bord); color: #fff; }
.scene-etapes button.est-actif i { background: var(--vert-clair); border-color: var(--vert-clair); color: var(--nuit); }
.scene-etapes button.est-faite i { border-color: var(--vert-clair); color: var(--vert-clair); }
.scene-bulle { position: absolute; z-index: 7; margin: 0; max-width: min(380px, 70%); padding: 12px 16px; border-radius: 12px; background: #fff; color: var(--encre); font-size: 0.95rem; line-height: 1.45; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.7); pointer-events: none; opacity: 0; transform: translateY(6px); transition: opacity 0.35s, transform 0.6s var(--sortie), left 0.6s var(--sortie), top 0.6s var(--sortie); }
.scene-bulle.est-visible { opacity: 1; transform: none; }
.scene-bulle::before { content: ""; position: absolute; width: 12px; height: 12px; background: #fff; left: var(--fx, 24px); transform: translateX(-50%) rotate(45deg); }
.scene-bulle.bas::before { top: -6px; }
.scene-bulle.haut::before { bottom: -6px; }
.scene-bulle.apres { background: var(--vert); color: #fff; } .scene-bulle.apres::before { background: var(--vert); }
.geste { position: relative; padding: 11px 20px; border-radius: 999px; background: var(--vert-clair); color: var(--nuit); font-weight: 600; font-size: 0.95rem; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.7); transition: transform 0.4s var(--sortie), opacity 0.3s, background 0.3s; }
.geste::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 2px solid var(--vert-clair); animation: pulse 1.6s var(--sortie) infinite; pointer-events: none; }
.geste:hover { transform: translateY(-2px); background: #79D5AE; }
.vignette.est-faite .geste { opacity: 0; pointer-events: none; transform: translateY(6px); }
.geste.petit { padding: 7px 14px; font-size: 0.82rem; }
.curseur-scene { position: absolute; width: 22px; height: 22px; z-index: 5; pointer-events: none; opacity: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 8.5-6.2 1.6L9.5 20z' fill='%23fff' stroke='%2315201C' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); transition: left 0.9s cubic-bezier(0.3, 0.7, 0.2, 1), top 0.9s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.3s; }
.curseur-scene.clic { animation: clic 0.25s; }
@keyframes clic { 50% { transform: scale(0.8); } }
/* pièces communes des vignettes */
.ligne { display: block; height: 9px; border-radius: 4px; background: #B9C5BD; }
.vignette .coche, .coche-champ { width: 22px; height: 22px; border-radius: 50%; background: var(--vert); position: relative; display: inline-block; transform: scale(0); transition: transform 0.5s var(--sortie); }
.vignette .coche::after, .coche-champ::after { content: ""; position: absolute; left: 6px; top: 5px; width: 7px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.est-faite .coche, .est-faite .coche-champ { transform: scale(1); }
/* V1 · ajout d'une société */
.v1 .carte-soc { position: relative; width: min(380px, 100%); background: #fff; color: var(--encre); border-radius: 12px; padding: 18px 20px 20px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7); display: flex; flex-direction: column; gap: 14px; transition: transform 0.9s var(--sortie); }
.v1 .cs-tete { display: flex; align-items: center; gap: 10px; }
.v1 .l1 { width: 46%; background: #8A968F; height: 11px; }
.badge-forme { margin-left: auto; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 999px; background: #F0F0EC; color: #5B6068; }
.cs-champ { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid #EFEFEA; opacity: 0; transform: translateY(6px); }
.est-active .cs-champ { animation: rang 0.6s var(--sortie) forwards; animation-delay: var(--d); }
.cs-champ small { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: #8A9098; }
.cs-champ .ligne { transform-origin: left; transform: scaleX(0); }
.est-active .cs-champ .ligne { animation: ecrit 0.8s var(--sortie) forwards; animation-delay: calc(var(--d) + 0.2s); }
@keyframes ecrit { to { transform: scaleX(1); } }
.v1 .l2 { width: 78%; } .v1 .l3 { width: 34%; background: #D6DED8; }
.avatars i { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; }
.avatars .a1 { background: #0E6B5A; } .avatars .a2 { background: #8E44AD; margin-left: -8px; }
.v1 .coche { position: absolute; right: -8px; top: -8px; box-shadow: 0 0 0 3px var(--nuit-2); }
.v1 .pile { position: absolute; left: 50%; top: 50%; width: min(380px, 100%); height: 150px; transform: translate(-50%, -62%); pointer-events: none; }
.v1 .pile i { position: absolute; inset: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.10); border: 1px solid var(--verre-bord); transform: translateY(-14px) scale(0.94); }
.v1 .pile i + i { transform: translateY(-28px) scale(0.88); background: rgba(255, 255, 255, 0.06); }
.v1.est-faite .carte-soc { transform: translateY(-10px) scale(0.98); }
/* V2 · ouverture de l'exercice */
.frise-ex { position: relative; width: min(520px, 100%); height: 110px; }
.frise-ex .axe { position: absolute; left: 4%; right: 4%; top: 50%; height: 2px; background: var(--verre-bord-fort); }
.frise-ex .axe::after { content: ""; position: absolute; inset: 0; background: var(--vert-clair); transform-origin: left; transform: scaleX(0); transition: transform 1.6s var(--sortie) 0.3s; }
.est-active .frise-ex .axe::after { transform: scaleX(1); }
.jalon { position: absolute; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0; transition: opacity 0.5s var(--sortie); }
.jalon i { width: 14px; height: 14px; border-radius: 50%; background: var(--nuit-2); border: 2px solid var(--vert-clair); }
.jalon small { position: absolute; top: 26px; font-size: 0.8rem; color: var(--papier); white-space: nowrap; }
.jalon em { position: absolute; bottom: 24px; font-style: normal; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vert-clair); white-space: nowrap; }
.jalon.j0 { left: 4%; } .jalon.j1 { left: 34%; } .jalon.j2 { left: 64%; } .jalon.j3 { left: 96%; }
.est-active .j0 { opacity: 1; } .est-active .j0 i { background: var(--vert-clair); }
.est-active .j1 { opacity: 1; transition-delay: 0.7s; } .est-active .j2 { opacity: 1; transition-delay: 1.1s; } .est-active .j3 { opacity: 1; transition-delay: 1.5s; }
.etapes-ex { display: flex; gap: 8px; width: min(520px, 100%); }
.etapes-ex i { flex: 1; height: 46px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--verre-bord); transform: scaleY(0); transform-origin: bottom; transition: transform 0.6s var(--sortie), background 0.4s, border-color 0.4s; transition-delay: calc(var(--i, 0) * 60ms); }
.v2.est-faite .etapes-ex i { transform: none; }
.v2.est-faite .etapes-ex i:first-child { background: var(--vert-fond); border-color: var(--vert-clair); }
/* V3 · réponse sans saisie */
.v3 { display: grid; grid-template-columns: auto auto auto; justify-content: center; align-items: center; column-gap: 36px; row-gap: 28px; }
.doc-source { position: relative; width: 170px; padding: 20px 16px 26px; background: #fff; border-radius: 8px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7); display: flex; flex-direction: column; gap: 10px; }
.doc-source b { display: block; height: 7px; border-radius: 4px; background: #D6DED8; }
.doc-source b:nth-child(2) { width: 70%; }
.doc-source .valeur { height: auto; background: var(--vert-pale); border: 1px solid #CFE3DA; border-radius: 6px; padding: 5px 8px; font-family: var(--mono); font-size: 0.82rem; color: var(--vert); font-weight: 500; position: relative; }
.doc-source .valeur span { display: inline-block; transition: transform 1s var(--sortie), opacity 0.6s; }
.doc-source small { position: absolute; bottom: 8px; left: 16px; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; color: #8A9098; }
.v3 .fleche { width: 60px; height: 2px; background: var(--verre-bord-fort); position: relative; }
.v3 .fleche::after { content: ""; position: absolute; right: -2px; top: -5px; width: 8px; height: 8px; border-top: 2px solid var(--verre-bord-fort); border-right: 2px solid var(--verre-bord-fort); transform: rotate(45deg); }
.champ-cible { display: flex; flex-direction: column; gap: 8px; width: 220px; }
.champ-cible small { font-size: 0.8rem; color: var(--papier-2); }
.champ-cible .champ { height: 46px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px #D5D5CF; display: flex; align-items: center; padding: 0 12px; gap: 10px; font-family: var(--mono); color: var(--encre); font-weight: 500; transition: box-shadow 0.4s; }
.champ .val { opacity: 0; transform: translateX(-30px); transition: opacity 0.4s 0.5s, transform 0.7s var(--sortie) 0.5s; }
.champ .coche-champ { margin-left: auto; transition-delay: 0.9s; }
.origine { font-style: normal; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vert-clair); opacity: 0; transition: opacity 0.4s 1.2s; }
.v3.est-faite .doc-source .valeur span { transform: translateX(140px); opacity: 0; }
.v3.est-faite .champ .val { opacity: 1; transform: none; }
.v3.est-faite .champ { box-shadow: 0 0 0 1.5px var(--vert); }
.v3.est-faite .origine { opacity: 1; }
.v3 .geste { grid-column: 1 / -1; justify-self: center; }
/* V4 · contrôle */
.deux-docs { display: flex; align-items: center; gap: 22px; }
.doc-ctl { width: 190px; padding: 16px; background: #fff; border-radius: 10px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; transition: opacity 0.5s, transform 0.6s var(--sortie), box-shadow 0.4s; }
.doc-ctl small { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: #8A9098; }
.doc-ctl .montant { font-family: var(--mono); font-size: 1.25rem; color: var(--encre); font-weight: 500; }
.ecart { display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ambre); }
.ecart i { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ambre); position: relative; animation: pulse-ambre 1.6s var(--sortie) infinite; }
.ecart i::after { content: "≠"; position: absolute; inset: 0; display: grid; place-items: center; font: 600 1rem var(--texte); color: var(--ambre); }
@keyframes pulse-ambre { 0% { box-shadow: 0 0 0 0 rgba(224, 180, 90, 0.5); } 100% { box-shadow: 0 0 0 14px rgba(224, 180, 90, 0); } }
.v4.est-faite .ecart i { animation: none; border-color: var(--vert-clair); } .v4.est-faite .ecart i::after { content: "="; color: var(--vert-clair); } .v4.est-faite .ecart { color: var(--vert-clair); }
.v4.est-faite .doc-ctl:not(.est-choisi) { opacity: 0.35; transform: scale(0.94); }
.v4.est-faite .doc-ctl.est-choisi { box-shadow: 0 0 0 2px var(--vert), 0 30px 60px -30px rgba(0, 0, 0, 0.7); }
.v4 .geste.petit::after { display: none; }
.trace-ctl { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vert-clair); opacity: 0; transform: translateY(6px); transition: opacity 0.5s 0.5s, transform 0.6s var(--sortie) 0.5s; }
.trace-ctl i { width: 8px; height: 8px; border-radius: 50%; background: var(--vert-clair); }
.v4.est-faite .trace-ctl { opacity: 1; transform: none; }
/* V5 · équipe */
.equipe { position: relative; width: 400px; height: 220px; isolation: isolate; }
.pers { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 4px; transform: translate(-50%, -50%); }
.pers i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 600 1rem var(--titre); color: #fff; box-shadow: 0 0 0 3px var(--nuit-2); }
.p1 { left: 80px; top: 60px; } .p1 i { background: #0E6B5A; }
.p2 { left: 320px; top: 60px; } .p2 i { background: #8E44AD; }
.p3 { left: 200px; top: 190px; } .p3 i { background: #3B5BDB; }
.pers small { font-size: 0.72rem; color: var(--papier-2); }
.tache { font-style: normal; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--verre-bord); color: var(--papier); white-space: nowrap; transition: background 0.4s, border-color 0.4s, color 0.4s; }
.liens { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.lien { fill: none; stroke: var(--verre-bord-fort); stroke-width: 1.5; stroke-dasharray: 4 6; }
.pulse { fill: var(--vert-clair); offset-path: path("M80 60 L320 60 L200 190 Z"); animation: pulse-chemin 5s linear infinite; }
@keyframes pulse-chemin { to { offset-distance: 100%; } }
.enveloppe { position: absolute; left: 200px; top: 190px; width: 26px; height: 18px; border-radius: 4px; background: var(--vert-clair); transform: translate(-50%, -50%) scale(0); opacity: 0; }
.enveloppe::after { content: ""; position: absolute; left: 4px; right: 4px; top: 4px; height: 6px; border-left: 1.5px solid var(--nuit); border-right: 1.5px solid var(--nuit); border-bottom: 1.5px solid var(--nuit); transform: perspective(20px) rotateX(30deg); }
.v5.est-faite .enveloppe { animation: envoi 1.4s var(--sortie) forwards; }
@keyframes envoi { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0; } 20% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(calc(-50% + 120px), calc(-50% - 130px)) scale(0.6); opacity: 0; } }
.v5.est-faite .p2 .tache { background: var(--vert-fond); border-color: var(--vert-clair); color: var(--vert-clair); transition-delay: 1.2s; }
.v5.est-faite .p2 .tache::before { content: "relancé · "; }
/* V6 · modèles */
.page-word { position: relative; width: 300px; background: #fff; border-radius: 6px; padding: 18px 22px 40px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7); display: flex; flex-direction: column; gap: 12px; }
.entete-cab { height: 42px; border: 1px dashed #B9C5BD; border-radius: 6px; display: grid; place-items: center; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: #8A9098; background: repeating-linear-gradient(135deg, transparent 0 6px, #F6F8F6 6px 12px); }
.page-word p { margin: 0; display: flex; gap: 5px; }
.page-word p b { display: block; height: 7px; border-radius: 3px; background: #D6DED8; flex: 1; }
.page-word p .ch { flex: 0.7; background: #D6DED8; transition: background 0.4s, box-shadow 0.4s; transition-delay: var(--d, 0s); }
.v6.est-faite .page-word .ch { background: var(--vert-clair); box-shadow: 0 0 0 2px var(--vert-pale); }
.compte-champs { position: absolute; right: 14px; bottom: 12px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vert); }
.compte-champs i { font-style: normal; font-weight: 600; }
/* V7 · liasse */
.feuilles { display: grid; grid-template-columns: repeat(4, 64px); gap: 12px; position: relative; }
.feuilles i { height: 80px; background: #fff; border-radius: 6px; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.8); position: relative; }
.feuilles i::before { content: ""; position: absolute; left: 10px; right: 10px; top: 12px; height: 4px; border-radius: 2px; background: #D6DED8; box-shadow: 0 10px 0 #D6DED8, 0 20px 0 #D6DED8, 0 30px 0 #EFEFEA; }
.feuilles i::after { content: ""; position: absolute; right: 6px; bottom: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--vert); transform: scale(0); transition: transform 0.4s var(--sortie); transition-delay: calc(var(--i) * 120ms + 0.2s); }
.v7.est-faite .feuilles i::after { transform: scale(1); }
.feuilles i { transition: transform 0.9s var(--sortie) calc(1.5s + var(--i) * 50ms), background 0.4s, opacity 0.6s; }
.v7.est-faite .feuilles i { transform: translate(calc((1.5 - var(--c)) * 76px), calc((0.5 - var(--r)) * 92px)) rotate(calc((var(--i) - 3.5) * 2.2deg)); }
.liasse-prete { height: 30px; display: grid; place-items: center; }
.ruban { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vert-clair); padding: 6px 14px; border-radius: 999px; border: 1px solid var(--vert-clair); background: var(--vert-fond); opacity: 0; transform: translateY(8px); transition: opacity 0.5s 2.6s, transform 0.6s var(--sortie) 2.6s; }
.v7.est-faite .ruban { opacity: 1; transform: none; }
@media (max-width: 860px) {
  .vignette { padding: 24px 18px 78px; gap: 18px; }
  .equipe { transform: scale(0.8); }
  .feuilles { grid-template-columns: repeat(4, 52px); }
  .v7.est-faite .feuilles i { transform: translate(calc((1.5 - var(--c)) * 64px), calc((0.5 - var(--r)) * 92px)) rotate(calc((var(--i) - 3.5) * 2.2deg)); }
  .deux-docs { gap: 12px; } .doc-ctl { width: 150px; }
  .registre { padding: 14px; } .registre-tete { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rang, .pt, .rang .avance b, .nl, .cs-champ, .cs-champ .ligne { animation: none !important; opacity: 1; transform: none; }
  .geste::after, .ecart i, .pulse { animation: none; }
}

/* ═══════════════ L'ordinateur qui s'ouvre ═══════════════ */
.accueil-scene { position: relative; --p: 0; }
.ordi-scene { position: relative; width: min(100%, 640px); margin-inline: auto; aspect-ratio: 1 / 0.72; perspective: 1500px; perspective-origin: 50% 40%; display: flex; align-items: center; }
.ordi { position: relative; width: 100%; aspect-ratio: 100 / 64; transform-style: preserve-3d; transform-origin: 50% 100%; transform: rotateX(calc(-58deg + var(--p) * 46deg)); will-change: transform; }
.couvercle { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 50% 100%; transform: rotateX(calc(-90deg + var(--p) * 98deg)); will-change: transform; z-index: 2; }
.face, .dos { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 3.2% 3.2% 1.2% 1.2% / 5% 5% 1.8% 1.8%; }
.face { background: #0B0F0D; padding: 3.2% 3.2% 4.2%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 0 2px #C9CDCB; }
.face .tableau { filter: brightness(calc(0.25 + var(--p) * 0.75)); transition: filter 0.2s; height: 100%; aspect-ratio: auto; }
.encoche { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 14%; height: 3%; background: #0B0F0D; border-radius: 0 0 8px 8px; z-index: 3; }
.reflet { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, rgba(255, 255, 255, calc(0.14 - var(--p) * 0.08)), transparent 45%, transparent 70%, rgba(255, 255, 255, 0.04)); pointer-events: none; z-index: 2; }
.dos { transform: rotateY(180deg); background: linear-gradient(160deg, #EEF0EE 0%, #D3D7D5 45%, #B9BEBC 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), inset 0 -60px 90px -50px rgba(0, 0, 0, 0.25), 0 30px 60px -30px rgba(0, 0, 0, 0.7); display: grid; place-items: center; }
.dos-marque { font-family: var(--titre); font-weight: 600; font-size: clamp(1.4rem, 3vw, 2.2rem); color: #6B7A72; letter-spacing: -0.01em; transform: rotate(180deg); }
.dos-marque b { font-weight: 600; color: var(--vert); }
.socle { position: absolute; left: -1.5%; right: -1.5%; top: 100%; height: 66%; transform-origin: 50% 0; transform: translateY(2.2%) rotateX(90deg); background: linear-gradient(180deg, #DDE0DE 0%, #CDD1CF 60%, #C0C5C3 100%); border-radius: 0 0 5% 5% / 0 0 8% 8%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.7); }
.clavier { position: absolute; left: 9%; right: 9%; top: 8%; height: 46%; border-radius: 4px; background: repeating-linear-gradient(0deg, #8F9794 0 16%, transparent 16% 20%); -webkit-mask: repeating-linear-gradient(90deg, #000 0 5.6%, transparent 5.6% 6.4%); mask: repeating-linear-gradient(90deg, #000 0 5.6%, transparent 5.6% 6.4%); opacity: 0.85; }
.pave { position: absolute; left: 34%; right: 34%; top: 60%; height: 30%; border-radius: 6px; background: rgba(255, 255, 255, 0.28); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.tranche { position: absolute; left: -1.5%; right: -1.5%; top: 100%; height: 2.2%; background: linear-gradient(#E4E7E5, #B4B9B7); border-radius: 0 0 4px 4px; }
.ombre-sol { position: absolute; left: 6%; right: 6%; bottom: -6%; height: 12%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), transparent 70%); filter: blur(10px); transform: scaleX(calc(0.7 + var(--p) * 0.3)); opacity: calc(0.6 + var(--p) * 0.4); }
@media (max-width: 860px) { .ordi-scene { perspective: 1100px; } }
/* ═══════════════ Démarrage ═══════════════ */
.demarrer { padding: clamp(64px, 9vw, 130px) 0; background: var(--nuit-2); }
.demarrer h2 { color: #fff; max-width: 24ch; }
.demarrer-sous { margin: 16px 0 0; color: var(--papier-2); max-width: 60ch; font-size: 1.05rem; }
.demarrer-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(32px, 4vw, 48px); }
.depart { padding: 22px 24px 26px; border-radius: 14px; background: var(--verre); border: 1px solid var(--verre-bord); display: flex; flex-direction: column; gap: 14px; transition: transform 0.6s var(--sortie), border-color 0.4s; }
.depart:hover { transform: translateY(-4px); border-color: var(--verre-bord-fort); }
.depart h3 { color: #fff; font-size: 1.25rem; }
.depart p { margin: 0; color: var(--papier-2); font-size: 0.96rem; line-height: 1.5; }
.depart-scene { position: relative; height: 170px; border-radius: 10px; background: linear-gradient(160deg, var(--nuit-3), var(--nuit)); border: 1px solid var(--verre-bord); display: flex; align-items: center; justify-content: center; gap: 16px; overflow: hidden; }
.feuille-calc { width: 92px; height: 112px; background: #fff; border-radius: 6px; padding: 12px 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-content: start; box-shadow: 0 20px 30px -20px rgba(0, 0, 0, 0.8); }
.feuille-calc i { height: 8px; border-radius: 2px; background: #D6DED8; }
.feuille-calc i:nth-child(odd) { background: #CFE3DA; }
.depart-fleche { width: 34px; height: 2px; background: var(--verre-bord-fort); position: relative; }
.depart-fleche::after { content: ""; position: absolute; right: -1px; top: -4px; width: 7px; height: 7px; border-top: 2px solid var(--verre-bord-fort); border-right: 2px solid var(--verre-bord-fort); transform: rotate(45deg); }
.liste-soc { width: 120px; display: flex; flex-direction: column; gap: 8px; }
.liste-soc b { display: block; height: 16px; border-radius: 4px; background: #fff; opacity: 0; transform: translateX(-8px); box-shadow: inset 4px 0 0 var(--vert); }
.est-visible .liste-soc b { animation: nl 0.6s var(--sortie) forwards; animation-delay: calc(var(--d) + 0.4s); }
.page-word.mini { width: 150px; padding: 10px 12px 14px; gap: 7px; transform: rotate(-3deg); }
.page-word.mini .entete-cab { height: 22px; font-size: 0.5rem; }
.page-word.mini p b { height: 5px; }
.est-visible .page-word.mini .ch { background: var(--vert-clair); box-shadow: 0 0 0 2px var(--vert-pale); transition-delay: 0.6s; }
.etiquette-verte { position: absolute; left: 12px; bottom: 12px; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vert-clair); padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(92, 196, 152, 0.45); background: var(--vert-fond); }
.invites { display: flex; gap: 22px; }
.inv { display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0; transform: translateY(10px); }
.est-visible .inv { animation: rang 0.7s var(--sortie) forwards; }
.est-visible .i1 { animation-delay: 0.3s; } .est-visible .i2 { animation-delay: 0.5s; } .est-visible .i3 { animation-delay: 0.7s; }
.inv i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 600 1rem var(--titre); color: #fff; font-style: normal; box-shadow: 0 0 0 3px var(--nuit-2); }
.i1 i { background: #0E6B5A; } .i2 i { background: #8E44AD; } .i3 i { background: #3B5BDB; }
.inv em { width: 40px; height: 6px; border-radius: 3px; background: var(--verre-bord-fort); }
@media (min-width: 1040px) { .vignette > *:not(.geste):not(.scene-bulle) { zoom: 1.28; } .vignette { gap: 36px; } }
@media (max-width: 860px) { .v3 { grid-template-columns: 1fr; justify-items: center; row-gap: 18px; } .v3 .fleche { width: 2px; height: 30px; } .v3 .fleche::after { right: -3px; top: auto; bottom: -1px; transform: rotate(135deg); } .doc-source { width: 150px; padding: 14px 12px 22px; } .demarrer-grille { grid-template-columns: 1fr; } .scene-etapes { flex-wrap: wrap; } .scene-etapes li { flex: 1 1 30%; } .scene-etapes button { font-size: 0.72rem; padding: 6px 8px; } .scene { aspect-ratio: auto; min-height: 560px; } .vignette { padding: 120px 16px 40px; } .scene-bulle { max-width: 86%; font-size: 0.88rem; } }
@media (prefers-reduced-motion: reduce) { .accueil-scene { --p: 1 !important; } .liste-soc b, .inv { animation: none !important; opacity: 1; transform: none; } }

/* ═══════════════ La liasse qui s'assemble, dans l'écran ═══════════════ */
.liasse-scene { flex: 1; min-height: 0; display: grid; grid-template-rows: 1fr auto; gap: 6%; }
.actes { position: relative; }
.acte { position: absolute; width: 15%; aspect-ratio: 3 / 4; background: #fff; border-radius: 5px; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.45), 0 0 0 1px #E6E6E1; padding: 9% 6% 0; display: flex; flex-direction: column; gap: 9%; opacity: 0; top: 18%; will-change: transform, left, top, opacity; }
.acte i { display: block; width: 100%; height: 4%; min-height: 3px; border-radius: 2px; background: #D6DED8; align-self: flex-start; }
.acte i:nth-child(2) { width: 70%; } .acte i:nth-child(3) { width: 85%; background: #CFE3DA; }
.acte small { position: absolute; left: 0; right: 0; top: 108%; text-align: center; font-family: var(--mono); font-size: 0.55vw; letter-spacing: 0.06em; text-transform: uppercase; color: #5C6B64; white-space: nowrap; }
.sceau { position: absolute; left: 50%; top: 84%; transform: translate(-50%, -50%) scale(0.6); display: inline-flex; align-items: center; gap: 0.5vw; padding: 0.45vw 0.9vw; border-radius: 999px; background: var(--vert); color: #fff; font-family: var(--mono); font-size: 0.62vw; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0; white-space: nowrap; box-shadow: 0 10px 24px -12px rgba(30, 94, 68, 0.9); }
.sceau b { width: 0.7vw; height: 0.7vw; border-radius: 50%; background: #fff; position: relative; }
.sceau b::after { content: ""; position: absolute; left: 22%; top: 18%; width: 30%; height: 18%; border-left: 1.5px solid var(--vert); border-bottom: 1.5px solid var(--vert); transform: rotate(-45deg); }
.ligne-ex { position: relative; height: 14%; min-height: 26px; margin: 0 4% 6%; }
.ligne-ex .rail, .ligne-ex .rempli { position: absolute; left: 0; right: 0; top: 30%; height: 2px; border-radius: 2px; background: #D6DED8; }
.ligne-ex .rempli { background: var(--vert); transform-origin: left; transform: scaleX(0); }
.jal { position: absolute; top: 30%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 0.5vw; }
.jal b { width: 0.8vw; height: 0.8vw; min-width: 8px; min-height: 8px; border-radius: 50%; background: #fff; border: 2px solid #C9CCD1; box-sizing: border-box; }
.jal small { font-family: var(--mono); font-size: 0.55vw; letter-spacing: 0.08em; text-transform: uppercase; color: #8A968F; white-space: nowrap; }
.jal.j1 { left: 0; } .jal.j2 { left: 33.3%; } .jal.j3 { left: 66.6%; } .jal.j4 { left: 100%; }
.ligne-ex .rempli { animation: rempli 9.0s cubic-bezier(0.3, 0, 0.2, 1) infinite; }
@keyframes rempli { 0%, 5% { transform: scaleX(0); opacity: 1; } 60%, 91% { transform: scaleX(1); opacity: 1; } 97%, 100% { transform: scaleX(1); opacity: 0; } }
.jal.j1 b { animation: jal1 9.0s linear infinite; }
@keyframes jal1 { 0%, 4.5% { background: #fff; border-color: #C9CCD1; } 6.0%, 91% { background: var(--vert); border-color: var(--vert); } 97%, 100% { background: #fff; border-color: #C9CCD1; } }
.jal.j2 b { animation: jal2 9.0s linear infinite; }
@keyframes jal2 { 0%, 23.5% { background: #fff; border-color: #C9CCD1; } 25.0%, 91% { background: var(--vert); border-color: var(--vert); } 97%, 100% { background: #fff; border-color: #C9CCD1; } }
.jal.j3 b { animation: jal3 9.0s linear infinite; }
@keyframes jal3 { 0%, 41.5% { background: #fff; border-color: #C9CCD1; } 43.0%, 91% { background: var(--vert); border-color: var(--vert); } 97%, 100% { background: #fff; border-color: #C9CCD1; } }
.jal.j4 b { animation: jal4 9.0s linear infinite; }
@keyframes jal4 { 0%, 59.5% { background: #fff; border-color: #C9CCD1; } 61.0%, 91% { background: var(--vert); border-color: var(--vert); } 97%, 100% { background: #fff; border-color: #C9CCD1; } }
.a1 { left: 3.0%; animation: acte1 9.0s cubic-bezier(0.2, 0.8, 0.2, 1) infinite; }
@keyframes acte1 { 0%, 16.0% { opacity: 0; left: 3.0%; top: 18%; transform: translateY(14px) scale(0.85); } 20.0%, 64% { opacity: 1; left: 3.0%; top: 18%; transform: none; } 72.0%, 91% { opacity: 1; left: 42.5%; top: 12%; transform: rotate(-6deg); } 97%, 100% { opacity: 0; left: 42.5%; top: 12%; transform: rotate(-6deg) translateY(10px); } }
.a2 { left: 22.5%; animation: acte2 9.0s cubic-bezier(0.2, 0.8, 0.2, 1) infinite; }
@keyframes acte2 { 0%, 25.0% { opacity: 0; left: 22.5%; top: 18%; transform: translateY(14px) scale(0.85); } 29.0%, 64% { opacity: 1; left: 22.5%; top: 18%; transform: none; } 73.2%, 91% { opacity: 1; left: 42.5%; top: 12%; transform: rotate(-3deg); } 97%, 100% { opacity: 0; left: 42.5%; top: 12%; transform: rotate(-3deg) translateY(10px); } }
.a3 { left: 42.0%; animation: acte3 9.0s cubic-bezier(0.2, 0.8, 0.2, 1) infinite; }
@keyframes acte3 { 0%, 34.0% { opacity: 0; left: 42.0%; top: 18%; transform: translateY(14px) scale(0.85); } 38.0%, 64% { opacity: 1; left: 42.0%; top: 18%; transform: none; } 74.4%, 91% { opacity: 1; left: 42.5%; top: 12%; transform: rotate(0deg); } 97%, 100% { opacity: 0; left: 42.5%; top: 12%; transform: rotate(0deg) translateY(10px); } }
.a4 { left: 61.5%; animation: acte4 9.0s cubic-bezier(0.2, 0.8, 0.2, 1) infinite; }
@keyframes acte4 { 0%, 43.0% { opacity: 0; left: 61.5%; top: 18%; transform: translateY(14px) scale(0.85); } 47.0%, 64% { opacity: 1; left: 61.5%; top: 18%; transform: none; } 75.6%, 91% { opacity: 1; left: 42.5%; top: 12%; transform: rotate(3deg); } 97%, 100% { opacity: 0; left: 42.5%; top: 12%; transform: rotate(3deg) translateY(10px); } }
.a5 { left: 81.0%; animation: acte5 9.0s cubic-bezier(0.2, 0.8, 0.2, 1) infinite; }
@keyframes acte5 { 0%, 52.0% { opacity: 0; left: 81.0%; top: 18%; transform: translateY(14px) scale(0.85); } 56.0%, 64% { opacity: 1; left: 81.0%; top: 18%; transform: none; } 76.8%, 91% { opacity: 1; left: 42.5%; top: 12%; transform: rotate(6deg); } 97%, 100% { opacity: 0; left: 42.5%; top: 12%; transform: rotate(6deg) translateY(10px); } }
.sceau { animation: sceau 9.0s cubic-bezier(0.2, 0.8, 0.2, 1) infinite; }
@keyframes sceau { 0%, 76% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } 80%, 91% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 97%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } }
.a1 small, .a2 small, .a3 small, .a4 small, .a5 small { transition: opacity 0.3s; }
@keyframes etiquette { 0%, 58% { opacity: 1; } 63%, 100% { opacity: 0; } }
.acte small { animation: etiquette 9s linear infinite; }
@media (prefers-reduced-motion: reduce) { .ligne-ex .rempli, .jal b, .acte, .sceau, .acte small { animation: none !important; } .ligne-ex .rempli { transform: scaleX(1); } .jal b { background: var(--vert); border-color: var(--vert); } .acte { opacity: 1; transform: none; } .sceau { opacity: 1; transform: translate(-50%, -50%); } }

/* ═══════════════ Deux idées fortes ═══════════════ */
.idee { padding: clamp(56px, 8vw, 110px) 0; }
.idee-ia { background: linear-gradient(180deg, var(--nuit) 0%, var(--nuit-2) 100%); }
.idee-modeles { background: var(--nuit-2); }
.idee-grille { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.idee h2 { color: #fff; }
.idee-texte p { color: var(--papier-2); margin: 18px 0 0; max-width: 50ch; font-size: 1.05rem; }
.idee-fin { font-family: var(--titre); font-style: italic; font-size: 1.3rem; color: var(--vert-clair) !important; margin-top: 22px !important; }
.idee-scene { position: relative; min-height: 340px; border-radius: 16px; background: linear-gradient(160deg, var(--nuit-3), var(--nuit)); border: 1px solid var(--verre-bord); display: flex; align-items: center; justify-content: center; padding: 32px; overflow: hidden; }
.idee-scene::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 50% at 50% 0%, rgba(92, 196, 152, 0.10), transparent 70%); pointer-events: none; }
/* la lecture par l'IA */
.lecture { display: flex; align-items: center; gap: 28px; }
.doc-lu { position: relative; width: 190px; padding: 22px 18px 30px; background: #fff; border-radius: 8px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7); display: flex; flex-direction: column; gap: 11px; }
.doc-lu b { display: block; height: 7px; border-radius: 4px; background: #D6DED8; }
.doc-lu b:nth-child(3) { width: 72%; } .doc-lu b:nth-child(7) { width: 60%; }
.doc-lu b.lu { background: #D6DED8; position: relative; overflow: hidden; }
.doc-lu b.lu::after { content: ""; position: absolute; inset: 0; background: var(--vert-clair); transform: scaleX(0); transform-origin: left; }
.est-visible .doc-lu b.lu::after { animation: ecrit 0.8s var(--sortie) forwards; animation-delay: var(--d); }
.doc-lu small { position: absolute; left: 18px; right: 18px; bottom: 9px; font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.06em; text-transform: uppercase; color: #8A9098; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prises { display: flex; flex-direction: column; gap: 10px; }
.prise { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 10px; background: #fff; color: var(--encre); min-width: 210px; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.7); opacity: 0; transform: translateX(-18px); }
.est-visible .prise { animation: prise 0.7s var(--sortie) forwards; animation-delay: calc(var(--d) + 0.3s); }
@keyframes prise { to { opacity: 1; transform: none; } }
.prise small { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: #8A9098; }
.prise b { font-family: var(--mono); font-size: 0.95rem; font-weight: 500; }
.prise.alerte { background: #FBEEDD; color: #7A3A08; } .prise.alerte small { color: #B4530A; }
/* la lettre du cabinet */
.lettre { position: relative; width: 360px; height: 300px; }
.page-word.grand { position: absolute; left: 0; top: 0; width: 260px; padding: 18px 20px 30px; gap: 11px; }
.page-word.grand .entete-cab { height: 38px; font-size: 0.56rem; }
.page-word.grand p b { height: 6px; }
.page-word.grand.double { left: 84px; top: 26px; transform: rotate(3deg); }
.page-word.grand:not(.double) { transform: rotate(-3deg); z-index: 1; }
.est-visible .page-word.grand .ch { background: var(--vert-clair); box-shadow: 0 0 0 2px var(--vert-pale); transition-delay: 0.5s; }
.etiquette-verte.fixe { left: auto; right: -6px; bottom: 8px; z-index: 2; }
@media (max-width: 860px) {
  .idee-grille, .idee-grille.inverse { grid-template-columns: 1fr; }
  .idee-grille.inverse .idee-scene { order: 2; }
  .idee-scene { min-height: 0; padding: 24px 16px; }
  .lecture { flex-direction: column; gap: 16px; }
  .prise { min-width: 0; width: 220px; }
  .lettre { width: 100%; max-width: 320px; height: 280px; }
  .page-word.grand { width: 220px; } .page-word.grand.double { left: 70px; }
}

/* ─── Le schéma : ce qui entre, ce que Lexia prépare, ce qui sort ─── */
.schema { padding: clamp(64px, 9vw, 130px) 0; background: linear-gradient(180deg, var(--nuit) 0%, var(--nuit-2) 100%); position: relative; overflow: hidden; }
.schema::before { content: ""; position: absolute; left: 50%; top: 58%; width: min(900px, 90vw); aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(92, 196, 152, 0.10), transparent 62%); pointer-events: none; }
.schema h2 { color: #fff; max-width: 24ch; }
.schema-sous { margin: 16px 0 0; font-family: var(--titre); font-style: italic; font-size: 1.2rem; color: var(--papier-2); max-width: 56ch; }
.schema-plan {
  position: relative; margin: clamp(36px, 5vw, 60px) 0 0; padding: clamp(22px, 3vw, 36px);
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(56px, 7vw, 100px) minmax(0, 0.9fr) clamp(56px, 7vw, 100px) minmax(0, 1fr);
  grid-template-rows: auto 1fr; column-gap: 0; row-gap: 14px;
  border: 1px solid var(--verre-bord); border-radius: 16px; background: rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(6px);
}
.schema-titre { margin: 0; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--papier-3); }
.st-entrees { grid-column: 1; grid-row: 1; }
.st-coeur { grid-column: 3; grid-row: 1; text-align: center; color: var(--vert-clair); }
.st-sorties { grid-column: 5; grid-row: 1; }
.schema-col { display: grid; grid-template-rows: repeat(3, 1fr); min-height: 330px; }
.schema-entrees { grid-column: 1; grid-row: 2; }
.schema-sorties { grid-column: 5; grid-row: 2; }
.schema-carte {
  align-self: center; margin: 7px 0; display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 12px; background: var(--verre); border: 1px solid var(--verre-bord);
  transition: border-color 0.3s, background 0.3s, transform 0.4s var(--sortie);
}
.schema-carte:hover { border-color: var(--verre-bord-fort); background: rgba(255, 255, 255, 0.08); transform: translateY(-2px); }
.schema-carte svg { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 10px; background: var(--vert-fond); border: 1px solid rgba(92, 196, 152, 0.35); fill: none; stroke: var(--vert-clair); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.schema-sorties .schema-carte svg { background: rgba(224, 180, 90, 0.12); border-color: rgba(224, 180, 90, 0.35); stroke: var(--ambre); }
.schema-carte p { margin: 0; display: grid; gap: 2px; min-width: 0; }
.schema-carte b { color: #fff; font-weight: 600; font-size: 1rem; line-height: 1.25; }
.schema-carte small { color: var(--papier-3); font-size: 0.86rem; line-height: 1.35; }

.schema-flux { grid-row: 2; position: relative; }
.flux-entree { grid-column: 2; }
.flux-sortie { grid-column: 4; }
.flux-trace { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flux-trace path { fill: none; vector-effect: non-scaling-stroke; }
.flux-fond path { stroke: rgba(92, 196, 152, 0.28); stroke-width: 1.5; }
.flux-anime path { stroke: var(--vert-clair); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 22; animation: flux 1.6s linear infinite; }
.flux-sortie .flux-fond path { stroke: rgba(224, 180, 90, 0.28); }
.flux-sortie .flux-anime path { stroke: var(--ambre); }
.flux-anime path:nth-child(2) { animation-delay: -0.5s; }
.flux-anime path:nth-child(3) { animation-delay: -1s; }
@keyframes flux { to { stroke-dashoffset: -22; } }

.schema-coeur { grid-column: 3; grid-row: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 8px 0; }
.coeur-anneau {
  position: relative; width: clamp(120px, 12vw, 150px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #1F4A3A, var(--nuit-2) 70%);
  border: 1px solid rgba(92, 196, 152, 0.55);
  box-shadow: 0 0 0 8px rgba(92, 196, 152, 0.06), 0 20px 50px -18px rgba(92, 196, 152, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.coeur-anneau .marque { font-size: clamp(1.6rem, 1.2rem + 1vw, 2rem); position: relative; z-index: 1; }
.coeur-onde { position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(92, 196, 152, 0.5); animation: onde 3.2s var(--sortie) infinite; }
.coeur-onde.o2 { animation-delay: 1.6s; }
@keyframes onde { from { transform: scale(1); opacity: 0.8; } to { transform: scale(1.55); opacity: 0; } }
.coeur-etapes { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; counter-reset: etape; }
.coeur-etapes li { counter-increment: etape; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; background: var(--verre); border: 1px solid var(--verre-bord); color: var(--papier); font-size: 0.86rem; white-space: nowrap; }
.coeur-etapes li::before { content: counter(etape); font-family: var(--mono); font-size: 0.72rem; color: var(--vert-clair); }
.coeur-porte { margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; background: var(--vert); color: #fff; font-size: 0.86rem; font-weight: 500; box-shadow: 0 10px 24px -12px rgba(30, 94, 68, 0.9); }
.coeur-porte b { position: relative; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.coeur-porte b::after { content: ""; position: absolute; left: 3.5px; top: 3.5px; width: 6px; height: 3px; border-left: 1.5px solid var(--vert); border-bottom: 1.5px solid var(--vert); transform: rotate(-45deg); }

.schema-actes { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.schema-actes p { margin: 0; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--papier-3); }
.schema-actes ul { display: flex; flex-wrap: wrap; gap: 8px; }
.schema-actes li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--verre-bord); color: var(--papier-2); font-size: 0.88rem; }

@media (max-width: 1040px) {
  .schema-carte { flex-direction: column; align-items: flex-start; gap: 10px; }
  .coeur-etapes { flex-direction: column; align-items: center; }
}
@media (max-width: 860px) {
  .schema-plan { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 10px; }
  .schema-plan > * { grid-column: 1 !important; grid-row: auto !important; }
  .schema-titre, .st-coeur { text-align: left; }
  .schema-col { grid-template-rows: none; min-height: 0; gap: 10px; }
  .schema-carte { margin: 0; flex-direction: row; align-items: center; }
  .schema-flux { height: 44px; }
  .flux-trace { display: none; }
  .schema-flux::before { content: ""; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 0; border-left: 2px dotted var(--vert-clair); opacity: 0.7; }
  .flux-sortie::before { border-color: var(--ambre); }
  .schema-flux::after { content: ""; position: absolute; left: calc(50% - 5px); bottom: 2px; width: 8px; height: 8px; border-right: 2px solid var(--vert-clair); border-bottom: 2px solid var(--vert-clair); transform: rotate(45deg); }
  .flux-sortie::after { border-color: var(--ambre); }
  .schema-coeur { padding: 18px 0; }
  .coeur-etapes { flex-direction: row; }
}
@media (prefers-reduced-motion: reduce) { .flux-anime, .coeur-onde { display: none; } }
/* le cœur se tient au point où les lignes convergent, les étapes pendent dessous */
.schema-col { min-height: 360px; }
.schema-coeur { position: relative; justify-content: center; padding: 0; }
.schema-coeur::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; transform: translateY(-50%); background: linear-gradient(90deg, rgba(92, 196, 152, 0.55), rgba(92, 196, 152, 0.15) 45%, rgba(224, 180, 90, 0.15) 55%, rgba(224, 180, 90, 0.55)); }
.coeur-anneau { width: clamp(110px, 10.5vw, 140px); z-index: 1; }
.coeur-pied { position: absolute; left: 0; right: 0; top: calc(50% + clamp(55px, 5.25vw, 70px) + 16px); display: flex; flex-direction: column; align-items: center; gap: 12px; }
@media (max-width: 1040px) { .coeur-etapes { flex-direction: row; } }
@media (max-width: 860px) {
  .schema-coeur::before { display: none; }
  .coeur-pied { position: static; margin-top: 16px; }
  .schema-col { min-height: 0; }
  .schema-coeur { padding: 18px 0; }
}