/* Inceptioncode — Business OS. Styles de la page d'accueil et de L'Enquête. */

/* POLICES — Inter et JetBrains Mono seulement, alphabet latin. Recopiées de fonts/fonts.css
   (qui déclare aussi Fraunces et d'autres alphabets, inutiles ici) pour économiser un fichier
   bloquant de 23 Ko. Si une police change là-bas, la changer ici aussi. */
@font-face {font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face {font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face {font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face {font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face {font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face {font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face {font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face {font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face {font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face {font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face {font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwgknk-6nFg.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face {font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwgknk-4.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face {font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwgknk-6nFg.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face {font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwgknk-4.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face {font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwgknk-6nFg.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face {font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwgknk-4.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root {
  --bg:#050508; --bg-2:#0B0B10; --bg-3:#12121A;
  --line:#22222E; --line-strong:#34343F;
  --text:#E8E6E0; --text-soft:#A8A59E; --text-ghost:#8A867C;
  --accent:#9B8FF5; --accent-strong:#C5BDFF; --accent-deep:#534AB7; --accent-dim:#3A3280;
  --accent-2:#4ADDE8; --accent-green:#00D97E;
  --danger:#D96B5C;
  --ink:#07060D; --paper:#ECE9E1;
  --sans:'Inter', system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, 'Courier New', monospace;
  --maxw:1360px;
  --gutter:48px;
}
@media (max-width: 1000px) { :root { --gutter:32px; } }
@media (max-width: 720px) { :root { --gutter:20px; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--bg); scroll-padding-top: 80px; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* clip et non hidden : hidden casserait les scènes en position sticky */
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--sans); font-weight: 700; letter-spacing: -.02em; line-height: 1.08; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--accent); color: var(--bg); padding: 10px 16px; font-family: var(--mono); font-size: 12px; }
.skip:focus { left: 12px; top: 12px; }

/* Ce qui glisse depuis un bord ne doit jamais élargir la page. (Le réglage posé sur
   body ne suffit pas : le navigateur le reporte sur la fenêtre et body redevient visible.) */
main { overflow-x: clip; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* NAV */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(5,5,8,.82); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
/* Avancement de la lecture : un filet violet sous le menu. */
.nav { --sp: 0; }
.nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--accent); transform-origin: left; transform: scaleX(var(--sp, 0)); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px var(--gutter); max-width: var(--maxw); margin: 0 auto; }
.logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.logo-svg { width: 38px; height: 38px; color: var(--text); transition: color .3s; }
.logo:hover .logo-svg { color: var(--accent); }
.logo-text { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }
.logo-text .dot { color: var(--accent); }
.nav-links { display: flex; gap: 30px; }
.nav-links a { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .18em; color: var(--text-soft); transition: color .2s; white-space: nowrap; }
.nav-links a:hover { color: var(--accent); }
.nav-cta { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .18em; padding: 9px 16px; border: 1px solid var(--accent); color: var(--accent); transition: background .2s, color .2s; white-space: nowrap; }
.nav-cta:hover { background: var(--accent); color: var(--bg); }
.menu-btn { display: none; }
.menu-panel { display: none; }
@media (max-width: 960px) {
  .nav-links, .nav-cta { display: none; }
  .nav-inner { padding-top: 8px; padding-bottom: 8px; }
  .menu-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; background: none; border: 1px solid var(--accent); color: var(--accent); font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
  .menu-btn i { width: 16px; height: 8px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; transition: transform .3s, height .3s; }
  .menu-btn[aria-expanded="true"] i { height: 0; border-bottom: none; transform: rotate(45deg); }
  .menu-panel { position: fixed; inset: 61px 0 0 0; z-index: 49; background: rgba(5,5,8,.97); backdrop-filter: blur(18px); padding: 28px var(--gutter) 40px; overflow-y: auto; flex-direction: column; }
  .menu-panel.open { display: flex; }
  .menu-panel a { display: flex; align-items: baseline; gap: 16px; min-height: 44px; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: clamp(30px, 9vw, 52px); font-weight: 800; letter-spacing: -.035em; line-height: 1; color: var(--accent-strong); opacity: 0; transform: translateY(18px); animation: menu-in .5s cubic-bezier(.2,.9,.2,1) forwards; animation-delay: calc(var(--i) * 60ms); }
  .menu-panel a small { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .15em; color: var(--text-ghost); }
  .menu-panel a.cta { margin-top: 28px; border: none; background: var(--accent); color: var(--bg); justify-content: center; font-size: 20px; letter-spacing: -.01em; }
}
@keyframes menu-in { to { opacity: 1; transform: none; } }

/* INDICATEUR DE CHAPITRE — cinq traits sur le bord droit, celui du chapitre en cours
   s'allonge et affiche son nom. « difference » le garde lisible sur tous les fonds. */
.chapters { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 45; display: grid; gap: 16px; mix-blend-mode: difference; }
.chapters a { display: flex; align-items: center; justify-content: flex-end; gap: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #fff; opacity: .5; transition: opacity .35s; }
.chapters a::after { content: ""; width: 16px; height: 2px; background: #fff; transition: width .45s cubic-bezier(.2,.9,.2,1); }
.chapters a span { opacity: 0; transform: translateX(8px); transition: opacity .35s, transform .45s cubic-bezier(.2,.9,.2,1); }
.chapters a:hover, .chapters a.on { opacity: 1; }
/* Le nom du chapitre en cours ne s'affiche en permanence que si l'écran laisse une vraie marge
   à droite du contenu ; sinon il passait par-dessus le texte. Au survol, il s'affiche toujours. */
.chapters a:hover span { opacity: 1; transform: none; }
@media (min-width: 1700px) { .chapters a.on span { opacity: 1; transform: none; } }
.chapters a.on::after { width: 44px; }
@media (max-width: 1180px) { .chapters { display: none; } }

/* OUVERTURE DE CHAPITRE — un grand numéro au trait qui se remplit, un filet qui se tire. */
.chapter-mark { background: var(--bg); border-top: 1px solid var(--line); padding: 84px 0 44px; overflow: clip; }
.chapter-mark .wrap { display: flex; align-items: flex-end; gap: clamp(20px, 4vw, 64px); position: relative; padding-bottom: 28px; }
.chapter-mark .wrap::after { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; height: 2px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--q)); }
.cm-num { font-size: clamp(110px, 19vw, 300px); font-weight: 800; line-height: .78; letter-spacing: -.06em; color: rgba(155,143,245, calc(var(--q) * var(--q))); -webkit-text-stroke: 1.5px var(--accent); transform: translateX(calc(var(--u) * -12vw)); }
.cm-text { display: grid; gap: 6px; padding-bottom: 6px; transform: translateY(calc(var(--u) * 40px)); opacity: var(--q); }
.cm-of { font-family: var(--mono); font-size: 12px; letter-spacing: .25em; text-transform: uppercase; color: var(--text-ghost); }
.cm-name { font-size: clamp(30px, 4.6vw, 72px); font-weight: 800; letter-spacing: -.035em; line-height: 1; color: var(--accent-strong); }
.cm-line { font-size: 17px; color: var(--text-soft); }
@media (max-width: 640px) { .chapter-mark { padding: 56px 0 28px; } .chapter-mark .wrap { align-items: center; } }

/* ARRIVÉE DEPUIS LE FOND — sur grand écran, chaque section entre comme si elle venait de
   derrière (plus petite, plus pâle, puis à sa taille), et celle qu'on quitte passe
   devant la caméra (elle grossit un peu et s'efface). Le défilement reste celui du
   navigateur ; seuls la taille et l'opacité changent, le texte est toujours dans la page.
   --d : entrée (0 → 1) ; --o : sortie (0 → 1). Posés par le script. */
@media (min-width: 1001px) {
  [data-depth] { --d: 1; --o: 0; transform-origin: 50% 0; transform: scale(calc(.86 + var(--d) * .14 + var(--o) * .06)); opacity: calc((.12 + var(--d) * .88) * (1 - var(--o) * .8)); }
}

/* LE CUBE QUI VOYAGE — sorti du hero, il vient se loger à la place du logo dans le menu,
   tourne à mesure qu'on avance, puis descend se poser sur le coin de la carte de contact.
   Sa position (--gx, --gy), sa taille (--gs) et son angle (--gr) viennent du script. */
.guide { position: fixed; left: 0; top: 0; z-index: 60; width: 34px; height: 34px; pointer-events: none; opacity: 0; perspective: 400px;
  transform: translate(calc(var(--gx, 0) * 1px), calc(var(--gy, 0) * 1px)) scale(var(--gs, 1)); transform-origin: 0 0; }
.guide.on { opacity: 1; }
.guide.moving { transition: transform .9s cubic-bezier(.2,.9,.2,1), opacity .4s; }
.gcube { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(-24deg) rotateY(calc(var(--gr, 0) * 1deg)); }
.gcube i { position: absolute; inset: 0; border: 1.5px solid var(--accent-strong); background: rgba(155,143,245,.14); box-shadow: 0 0 10px rgba(155,143,245,.5); }
.gcube i:nth-child(1) { transform: translateZ(17px); }
.gcube i:nth-child(2) { transform: rotateY(90deg) translateZ(17px); }
.gcube i:nth-child(3) { transform: rotateY(180deg) translateZ(17px); }
.gcube i:nth-child(4) { transform: rotateY(270deg) translateZ(17px); }
.gcube i:nth-child(5) { transform: rotateX(90deg) translateZ(17px); }
.gcube i:nth-child(6) { transform: rotateX(-90deg) translateZ(17px); }
/* tant que le cube occupe sa place, le logo fixe du menu s'efface */
.logo-svg { transition: color .3s, opacity .4s; }
.guided .nav .logo-svg { opacity: 0; }

/* LABEL */
.label {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .22em; color: var(--accent);
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 28px;
}
.label::before { content: "//"; color: var(--text-ghost); letter-spacing: 0; }

/* BOUTONS */
.btn {
  font-family: var(--mono); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .18em;
  padding: 18px 30px; display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  border: 1px solid var(--accent); color: var(--bg);
  /* au survol, une couche plus claire monte depuis le bas du bouton */
  background: linear-gradient(var(--accent-strong), var(--accent-strong)) no-repeat 50% 100% / 100% 0, var(--accent);
  transition: background-size .38s cubic-bezier(.2,.9,.2,1), box-shadow .3s, transform .18s ease-out;
  /* --bx / --by : le bouton principal est attiré par la souris quand elle approche */
  transform: translate(calc(var(--bx, 0) * 1px), calc(var(--by, 0) * 1px));
}
.btn:hover { background-size: 100% 100%, auto; box-shadow: 0 0 36px rgba(155,143,245,.45); }
.btn:active { transform: translate(calc(var(--bx, 0) * 1px), calc(var(--by, 0) * 1px)) scale(.97); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-soft); padding-left: 0; padding-right: 0; }
.btn-ghost::after { content: "→"; transition: transform .2s; }
.btn-ghost:hover { background: transparent; color: var(--accent); box-shadow: none; }
.btn-ghost { transform: none; }
.btn-ghost:hover::after { transform: translateX(5px); }
.cta-row { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }

/* TITRES DE SECTION — une phrase par ligne (.l), la dernière en italique. */
.l { display: block; }
/* Coupes de ligne maîtrisées : .nb ne se coupe jamais (« faut-il ») ; .g est un groupe
   de sens qui reste entier dès qu'il y a la place (tablette et plus). */
.nb { white-space: nowrap; }
.g { white-space: nowrap; }
/* Chaque ligne de titre monte derrière un cache (le script l'enveloppe dans .li). */
.l:has(> .li) { overflow: clip; padding-bottom: .14em; margin-bottom: -.14em; }
.li { display: block; transition: transform 1.05s cubic-bezier(.2,.9,.2,1) calc(var(--n, 0) * 120ms); }
.js .section-title.reveal, .js .band .reveal { opacity: 1; transform: none; }
.js .reveal:not(.in) .li { transform: translateY(112%); transition: none; }
.section-title { text-wrap: balance; font-size: clamp(34px, 5.2vw, 80px); font-weight: 800; color: var(--accent-strong); letter-spacing: -.03em; line-height: 1.03; margin-bottom: 56px; }
.hero h1 em, .section-title em {
  font-style: normal; font-weight: 400; color: var(--accent); letter-spacing: -.035em;
}
.section-title em { margin-top: .1em; }
.lead { font-size: 20px; color: var(--text-soft); max-width: 640px; line-height: 1.6; }
.lead strong { color: var(--text); font-weight: 600; }

/* HERO */
.hero { position: relative; padding: 72px 0 88px; overflow: clip; }
.hero-glow { position: absolute; top: 10%; left: 4%; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(83,74,183,.2) 0%, rgba(83,74,183,.06) 40%, transparent 70%); filter: blur(40px); pointer-events: none; }
.rain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); }
.hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.hero h1 { font-size: clamp(36px, 4.5vw, 70px); font-weight: 800; line-height: 1.03; letter-spacing: -.03em; color: var(--accent-strong); margin-bottom: 32px; }
.hero h1 em { display: block; margin-top: .12em; }
.hero-sub { font-family: var(--mono); font-size: 14px; color: var(--text-soft); line-height: 1.8; margin-bottom: 40px; max-width: 560px; }
.hero-sub strong { display: block; color: var(--text); font-weight: 500; margin-top: 6px; }
.hero-sig { margin-top: 36px; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-ghost); }
@media (max-width: 1000px) { .hero-inner { grid-template-columns: 1fr; gap: 20px; } .hero { padding-top: 20px; } .hero .scene { order: -1; max-width: 250px; } }

/* ── SCÈNE DU HERO ─────────────────────────────────────────────
   Des fenêtres d'outils flottent autour d'un petit cube. Au premier défilement
   elles sont aspirées, et trois cubes emboîtés se déploient l'un dans l'autre :
   des systèmes dans des systèmes. Le script ne pose que des nombres :
     --p  avancement global (0 dispersé → 1 assemblé), sur .scene
     --k  ce qu'il reste de dispersion pour un outil (1 → 0), sur chaque .tool
     --mx / --my  position de la souris (-1 → 1), sur .scene
   Sans script ni animation, tout vaut l'état dispersé, lisible tel quel. */
.scene {
  --p: 0; --mx: 0; --my: 0;
  container-type: inline-size; position: relative; aspect-ratio: 1 / 1;
  width: 100%; max-width: 680px; margin: 0 auto; perspective: 1100px;
}
.scene-nest {
  position: absolute; inset: 0; transform-style: preserve-3d;
  /* --z : la caméra avance dans les cubes à mesure qu'on défile (voir la plongée, plus bas) */
  transform: translateZ(calc(var(--z, 0) * 1045px)) rotateX(calc(var(--my) * -14deg)) rotateY(calc(var(--mx) * 16deg));
  /* une fois la paroi traversée, le cube n'est plus là */
  /* il s'efface tôt (de 50 % à 76 % de la plongée) pour ne pas rester posé sur la suite */
  opacity: calc(1 - clamp(0, calc((var(--z, 0) - .5) * 3.9), 1));
}
/* Halo derrière les cubes : il grossit avec l'assemblage. */
.scene-nest::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle, rgba(155,143,245,.55), rgba(83,74,183,.18) 45%, transparent 70%); filter: blur(30px); opacity: calc(.35 + var(--p) * .65); transform: translateZ(-60px) scale(calc(.55 + var(--p) * .7)); }
.cube {
  position: absolute; left: 50%; top: 50%; width: var(--sz); height: var(--sz);
  margin: calc(var(--sz) / -2) 0 0 calc(var(--sz) / -2);
  transform-style: preserve-3d;
  scale: calc(var(--from) + (1 - var(--from)) * var(--p));
  animation: spin var(--dur) linear infinite;
}
.cube i { position: absolute; inset: 0; border: 1px solid rgba(197,189,255,.85); background: rgba(83,74,183,.07); box-shadow: inset 0 0 50px rgba(155,143,245,.18), 0 0 18px rgba(155,143,245,.25); }
.cube i:nth-child(1) { transform: translateZ(calc(var(--sz) / 2)); }
.cube i:nth-child(2) { transform: rotateY(90deg) translateZ(calc(var(--sz) / 2)); }
.cube i:nth-child(3) { transform: rotateY(180deg) translateZ(calc(var(--sz) / 2)); }
.cube i:nth-child(4) { transform: rotateY(270deg) translateZ(calc(var(--sz) / 2)); }
.cube i:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--sz) / 2)); }
.cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--sz) / 2)); }
.c1 { --sz: 46cqw; --from: .2; --dur: 34s; opacity: var(--p); }
.c2 { --sz: 30cqw; --from: .35; --dur: 22s; animation-direction: reverse; opacity: calc(.25 + var(--p) * .75); }
.c3 { --sz: 16cqw; --from: 1; --dur: 14s; }
.c3 i { background: rgba(155,143,245,.16); border-color: #fff; }
@keyframes spin { from { transform: rotateX(-26deg) rotateY(0deg); } to { transform: rotateX(-26deg) rotateY(360deg); } }
.scene-logo { position: absolute; left: 50%; top: 50%; width: 15cqw; height: auto; margin: -4.2cqw 0 0 -7.5cqw; color: #fff; filter: drop-shadow(0 0 14px rgba(197,189,255,.9)); transform: translateZ(40px); }
/* L'onde de choc, une seule fois, au moment où l'assemblage tient. */
.wave { position: absolute; inset: 30%; border: 2px solid var(--accent-strong); border-radius: 50%; opacity: 0; }
.scene.assembled .wave { animation: wave 1s cubic-bezier(.1,.7,.2,1) 1; }
@keyframes wave { 0% { opacity: .95; scale: .3; } 100% { opacity: 0; scale: 3.4; border-width: 0; } }
.scene-label { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-family: var(--mono); text-transform: uppercase; color: var(--accent-strong); }
.scene-label b { display: block; font-family: var(--sans); font-weight: 800; font-size: clamp(26px, 8cqw, 54px); line-height: 1; letter-spacing: .34em; text-indent: .34em; color: #fff; text-shadow: 0 0 30px rgba(155,143,245,.95), 0 0 80px rgba(155,143,245,.6); }
.scene-label small { display: block; margin-top: 8px; font-size: clamp(8px, 1.9cqw, 12px); letter-spacing: .3em; text-indent: .3em; white-space: nowrap; }

/* Les outils : de petites fenêtres d'application, chacune avec sa barre et ses lignes. */
.tool {
  --k: 1; --depth: 14; --d: 0;
  position: absolute; left: 50%; top: 50%; min-width: 150px; padding: 11px 14px 13px;
  background: rgba(11,11,16,.92); border: 1px solid var(--line-strong); box-shadow: 0 14px 40px rgba(0,0,0,.6);
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text); text-align: left;
  opacity: min(1, calc(var(--k) * 3.2));
  transform:
    translate(-50%, -50%)
    translate(calc(var(--x) * var(--k) + var(--mx) * var(--depth) * var(--k) * 2px), calc(var(--y) * var(--k) + var(--my) * var(--depth) * var(--k) * 2px))
    rotate(calc(var(--r) * var(--k)))
    scale(calc(.25 + .75 * var(--k)));
}
.tool::before { content: ""; display: block; height: 7px; width: 34px; margin: -2px 0 10px; background: radial-gradient(circle at 3.5px 3.5px, var(--accent) 3px, transparent 3.5px) 0 0 / 12px 7px repeat-x; }
.tool::after { content: ""; display: block; height: 30px; margin-top: 10px; background: linear-gradient(var(--line-strong), var(--line-strong)) 0 0 / 100% 4px no-repeat, linear-gradient(var(--line), var(--line)) 0 13px / 72% 4px no-repeat, linear-gradient(var(--accent-dim), var(--accent-dim)) 0 26px / 46% 4px no-repeat; }
.tool:nth-child(3n) { min-width: 176px; }
.tool:nth-child(4n+1) { border-color: var(--accent-dim); }
@media (max-width: 720px) { .tool { min-width: 0; padding: 7px 9px 8px; font-size: 9px; letter-spacing: .08em; } .tool:nth-child(3n) { min-width: 0; } .tool::after { height: 13px; margin-top: 6px; } .tool::before { margin-bottom: 6px; } .scene { max-width: 360px; } }

/* Flottement au repos (il s'éteint à mesure que l'outil est aspiré) et entrée
   en scène : chaque fenêtre arrive de loin, l'une après l'autre. */
.scene.live .tool { animation: drift 7s ease-in-out infinite, tool-in 1.1s cubic-bezier(.2,.9,.2,1) calc(.5s + var(--d) * 2.2s) backwards; will-change: transform, opacity; }
.scene.live .tool:nth-child(2n) { animation-duration: 9s, 1.1s; animation-delay: -3s, calc(.5s + var(--d) * 2.2s); }
.scene.live .tool:nth-child(3n) { animation-duration: 11s, 1.1s; animation-delay: -6s, calc(.5s + var(--d) * 2.2s); }
.scene.live.paused .tool, .scene.paused .cube { animation-play-state: paused; }
@keyframes drift {
  0%, 100% { translate: 0 0; }
  33% { translate: 10px -14px; }
  66% { translate: -9px 9px; }
}
.scene.live.tire .tool { animation-play-state: paused; }
@keyframes tool-in { from { opacity: 0; scale: 1.7; } }
/* Le nom n'apparaît que lorsque l'assemblage tient. */
.scene.live .scene-label { opacity: 0; transition: opacity .25s; }
.scene.live.assembled .scene-label { opacity: calc(1 - var(--z, 0) * 4); animation: flicker .5s steps(1) 1; }
@keyframes flicker { 0% { opacity: 0; } 20% { opacity: 1; } 35% { opacity: .2; } 55% { opacity: 1; } 70% { opacity: .5; } 100% { opacity: 1; } }

/* LA PLONGÉE — une fois l'assemblage joué, continuer à défiler fait avancer la caméra
   dans les cubes : ils glissent vers le centre de l'écran et grossissent tout de suite,
   le texte s'efface, et LA SUITE APPARAÎT DERRIÈRE EUX, venue du fond, avant qu'on ait
   traversé la paroi. Jamais d'écran vide. --z : avancement de la plongée (0 → 1).
   --cx : écart horizontal entre la scène et le centre de l'écran, mesuré par le script. */
.hero { --z: 0; }
.hero-inner > div:first-child { opacity: calc(1 - var(--z) * 3); transform: translateX(calc(var(--z) * -9vw)); }
.hero .scene { translate: calc(min(1, var(--z) * 1.8) * var(--cx, 0) * -1px) 0; }
.rain, .hero-glow { opacity: calc(1 - var(--z) * 1.6); }
.rain { opacity: calc(.44 * (1 - var(--z) * 1.6)); }
@media (min-width: 1001px) and (min-height: 760px) {
  /* le hero recouvre le début de la suite : c'est ce qui permet de la voir à travers les cubes */
  .hero-pin.live { position: relative; z-index: 3; margin-bottom: calc(-100vh + 67px); }
  .hero-pin.live.dived { pointer-events: none; }
  .hero-pin.live + .arrival {
    position: relative; z-index: 1; transform-origin: 50% 38%;
    opacity: clamp(0, calc((var(--z, 0) - .22) * 2.4), 1);
    transform: scale(calc(.42 + var(--z, 0) * .58));
  }
}

/* Entrée en scène du texte, au chargement. */
.js .hero h1:not(.in) .li { transform: translateY(112%); transition: none; }
.js .hero .label, .js .hero-sub, .js .hero .cta-row, .js .hero-sig { transition: opacity .8s ease, transform .9s cubic-bezier(.2,.9,.2,1); }
.js .hero-sub { transition-delay: .45s; } .js .hero .cta-row { transition-delay: .6s; } .js .hero-sig { transition-delay: .75s; }
.js .hero-inner:not(.in) .label, .js .hero-inner:not(.in) .hero-sub, .js .hero-inner:not(.in) .cta-row, .js .hero-inner:not(.in) .hero-sig { opacity: 0; transform: translateY(24px); transition: none; }

/* Sur grand écran, le hero reste en place le temps de l'assemblage (position
   sticky : la molette garde la main, rien n'est détourné). */
@media (min-width: 1001px) and (min-height: 760px) {
  .hero-pin.live { height: calc(100vh + 50vh); }
  .hero-pin.live .hero { position: sticky; top: 67px; min-height: calc(100vh - 67px); display: flex; align-items: center; padding: 40px 0; }
  .hero-pin.live .hero-inner { width: 100%; }
}

/* Repère de défilement : il dit qu'il y a une suite, et s'efface dès qu'on bouge. */
.hero-hint { display: none; }
.hero-pin.live .hero-hint {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--text-soft);
  transition: opacity .3s;
}
.hero-hint i { font-style: normal; font-size: 16px; color: var(--accent); animation: nudge 1.6s ease-in-out infinite; }
.hero-pin.scrolled .hero-hint { opacity: 0; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
@media (max-width: 1000px), (max-height: 759px) { .hero-pin.live .hero-hint { display: none; } }

/* PREUVES RAPIDES — trois grands chiffres sur toute la largeur */
.proof { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); }
.proof-inner { display: grid; grid-template-columns: repeat(3, 1fr); max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.proof-item { padding: 40px 32px; border-left: 1px solid var(--line); }
.proof-item:first-child { border-left: none; padding-left: 0; }
.proof-num { display: block; font-size: clamp(40px, 5.4vw, 76px); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--accent-strong); }
.proof-desc { display: block; margin-top: 12px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .2em; color: var(--text-soft); }
@media (max-width: 640px) { .proof-item { padding: 24px 12px; } .proof-desc { font-size: 11px; letter-spacing: .06em; } }

/* SECTIONS ET LEURS TROIS HABILLAGES
   Sombre par défaut. « violet » et « papier » inversent le rapport fond / texte :
   ce sont eux qui donnent le rythme et le contraste d'une section à l'autre. */
section.block { padding: 150px 0; position: relative; }
@media (max-width: 720px) { section.block { padding: 88px 0; } }
.skin-panel { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.skin-violet { background: var(--accent); color: var(--ink); }
.skin-paper { background: var(--paper); color: var(--ink); }
.skin-violet .label, .skin-paper .label { color: var(--ink); }
.skin-violet .label::before, .skin-paper .label::before { color: rgba(7,6,13,.5); }
.skin-violet .section-title, .skin-paper .section-title { color: var(--ink); }
.skin-violet .section-title em { color: #2A2170; }
.skin-paper .section-title em { color: var(--accent-deep); }
.skin-violet :focus-visible, .skin-paper :focus-visible { outline-color: var(--ink); }

/* BANDEAU DE RUPTURE — une seule phrase, pleine largeur, très grande */
.band { padding: 120px 0; }
@media (max-width: 720px) { .band { padding: 72px 0; } }
.band p { text-wrap: balance; font-size: clamp(34px, 6.2vw, 104px); font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.band em { display: block; margin-top: .14em; font-style: normal; font-weight: 400; letter-spacing: -.04em; }
.skin-violet.band em { color: #2A2170; }
.skin-paper.band em { color: var(--accent-deep); }

.profile[data-drift] .fx { transform: translateY(calc(var(--s, 0) * 46px)) scale(1.12); }

/* CASCADE — les enfants d'un bloc arrivent l'un après l'autre (--i posé par le script). */
.js .stagger.reveal { opacity: 1; transform: none; }
.js .stagger > * { transition: opacity .7s ease calc(var(--i, 0) * 90ms), transform .95s cubic-bezier(.2,.9,.2,1) calc(var(--i, 0) * 90ms), clip-path 1s cubic-bezier(.2,.9,.2,1) calc(var(--i, 0) * 90ms); }
.js .stagger:not(.in) > * { opacity: 0; transform: translateY(38px); transition: none; }
/* DEUX COLONNES — titre d'un côté, matière de l'autre */
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.split.even { grid-template-columns: 1fr 1fr; }
.split .section-title { margin-bottom: 0; font-size: clamp(32px, 4.1vw, 62px); }
.split.wide-left { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
@media (max-width: 1000px) { .split, .split.even, .split.wide-left { grid-template-columns: 1fr; gap: 44px; } }
.sticky-col { position: sticky; top: 120px; }
@media (max-width: 1000px) { .sticky-col { position: static; } }

/* PATCHWORK — les outils en vrac, de travers */
.mess { display: flex; flex-wrap: wrap; gap: 14px 12px; padding-top: 12px; }
.mess li { font-family: var(--mono); font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--text); padding: 18px 26px; border: 1px dashed var(--line-strong); background: var(--bg-2); transform: rotate(var(--r, 0deg)) translateY(var(--y, 0)); }
.mess li { animation: drift-chip 8s ease-in-out infinite 1.4s; }
.mess li:nth-child(2n) { animation-duration: 10s; animation-delay: 1.8s; }
.mess li:nth-child(3n) { animation-duration: 12s; animation-direction: reverse; }
@keyframes drift-chip { 0%, 100% { translate: 0 0; } 50% { translate: 5px -8px; } }
.mess li:nth-child(4n+1) { --r: -4deg; --y: 6px; }
.mess li:nth-child(4n+2) { --r: 3deg; --y: -4px; }
.mess li:nth-child(4n+3) { --r: -1.5deg; --y: 10px; border-color: var(--accent-dim); }
.mess li:nth-child(4n) { --r: 5deg; }
.note { margin-top: 48px; font-size: 19px; color: var(--text-soft); line-height: 1.6; max-width: 560px; padding-left: 20px; border-left: 1px solid var(--accent); }
.skin-violet .note, .skin-paper .note { color: var(--ink); border-left-color: var(--ink); }

/* LA PROMESSE, MONTRÉE — quatre tuiles : la commande est payée, et les trois autres
   réagissent l'une après l'autre le long du fil. --on : 0 éteinte, 1 allumée. */
.flow { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 64px; }
.flow-line { position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; background: var(--line-strong); }
.flow-line::before { content: ""; position: absolute; inset: 0; background: var(--accent); box-shadow: 0 0 14px var(--accent); transform-origin: 0 50%; transform: scaleX(clamp(0, calc((var(--p) - .18) * 1.6), 1)); }
.flow-line::after { content: ""; position: absolute; top: -5px; left: calc(clamp(0, calc((var(--p) - .18) * 1.6), 1) * 100%); width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 18px 4px var(--accent); opacity: calc(1 - clamp(0, calc((var(--p) - .8) * 8), 1)); }
.tile { --on: clamp(0, calc((var(--p) - .16 - var(--n) * .19) * 9), 1); position: relative; z-index: 1; padding: 22px 22px 20px; background: var(--bg-2); border: 1px solid color-mix(in srgb, var(--accent) calc(var(--on) * 100%), var(--line-strong)); box-shadow: 0 0 calc(var(--on) * 44px) rgba(155,143,245, calc(var(--on) * .35)); transform: translateY(calc((1 - var(--on)) * 10px)) scale(calc(.97 + var(--on) * .03)); }
.tk { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-ghost); margin-bottom: 10px; }
.tile b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.015em; margin-bottom: 14px; }
.ts { position: relative; display: block; height: 28px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.ts i { position: absolute; left: 0; top: 0; font-style: normal; padding: 4px 10px; border: 1px solid var(--line-strong); color: var(--text-soft); }
.ts i:first-child { opacity: calc(1 - var(--on)); }
.ts i:last-child { opacity: var(--on); border-color: rgba(0,217,126,.5); background: rgba(0,217,126,.12); color: var(--accent-green); }
.ts i:last-child::before { content: "✓ "; }
@media (max-width: 900px) { .flow { grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 40px; } .flow-line { display: none; } .tile { padding: 16px; } .tile b { font-size: 17px; } }

/* COUCHES — six plaques concentriques. Vues de dessus (--e à 0), ce sont des
   boîtes l'une dans l'autre ; le script les soulève (--e à 1) en une pile. */
.layers-stage { --e: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; margin-top: 72px; }
@media (max-width: 1000px) { .layers-stage { grid-template-columns: 1fr; gap: 40px; margin-top: 48px; } }
.stack { position: sticky; top: 110px; align-self: start; aspect-ratio: 1 / 1; width: 100%; max-width: 640px; margin: 0 auto; perspective: 1600px; }
.stack-tilt {
  position: absolute; inset: 0; transform-style: preserve-3d;
  /* la pile tourne lentement sur elle-même pendant qu'on défile (--s) */
  transform: translateY(calc(var(--e) * 14%)) rotateX(calc(var(--e) * 60deg)) rotateZ(calc(var(--e) * (-45deg + var(--s, 0) * 46deg))) scale(calc(1 - var(--e) * .24));
}
.plate {
  position: absolute; inset: calc(var(--i) * 7.6%);
  border: 1px solid rgba(155,143,245,.6);
  background:
    linear-gradient(rgba(155,143,245,.14) 1px, transparent 1px) 0 0 / 100% 22px,
    linear-gradient(90deg, rgba(155,143,245,.14) 1px, transparent 1px) 0 0 / 22px 100%,
    rgba(26,22,58,.9);
  box-shadow: 0 0 30px rgba(83,74,183,.25);
  transform: translateZ(calc(var(--e) * (var(--i) * 62px + var(--lift, 0px))));
  transition: border-color .4s, background-color .4s, box-shadow .4s, transform .6s cubic-bezier(.2,.9,.2,1);
}
.plate.is-active { --lift: 34px; border-color: #fff; background-color: rgba(120,108,240,.95); box-shadow: 0 0 90px rgba(155,143,245,.85), inset 0 0 40px rgba(255,255,255,.18); }
.plate.is-active span { color: #fff; }
/* l'axe lumineux qui traverse les six plaques */
.axis { position: absolute; left: 50%; top: 50%; width: 2px; height: calc(var(--e) * 420px); margin-left: -1px; transform-origin: 50% 0; transform: rotateX(-90deg); background: linear-gradient(180deg, var(--accent-strong), transparent); box-shadow: 0 0 18px var(--accent); opacity: var(--e); }
.plate span { opacity: calc(1 - var(--e) * 1.6); position: absolute; left: 10px; top: 7px; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-ghost); transition: color .4s; }
/* Sur petit écran, la pile reste collée en haut pendant qu'on lit la légende :
   c'est la lecture qui choisit la plaque allumée. */
@media (max-width: 1000px) {
  .stack { position: sticky; top: 57px; z-index: 2; max-width: none; aspect-ratio: auto; height: 240px; }
  .axis { height: calc(var(--e) * 150px); }
  .stack::before { content: ""; position: absolute; inset: -10px calc(-1 * var(--gutter)); background: var(--bg); border-bottom: 1px solid var(--line); z-index: -1; }
  .stack-tilt { inset: auto; top: 0; left: 50%; width: 250px; height: 250px; margin-left: -125px; }
  .legend li { opacity: .6; }
}
.legend { display: grid; }
.legend li { border-top: 1px solid var(--line); opacity: .5; transition: opacity .4s; }
.legend li:last-child { border-bottom: 1px solid var(--line); }
.legend li.is-active { opacity: 1; }
.legend button { display: flex; align-items: baseline; gap: 16px; width: 100%; padding: 18px 0 4px; background: none; border: none; cursor: pointer; text-align: left; }
.legend-num { font-family: var(--mono); font-size: 12px; letter-spacing: .15em; color: var(--accent); }
.legend-name { font-size: 22px; font-weight: 700; letter-spacing: -.015em; }
.legend li.is-active .legend-name { color: var(--accent-strong); }
.legend p { font-size: 16px; color: var(--text-soft); line-height: 1.55; padding: 0 0 18px 42px; max-width: 520px; }

/* USAGES — cinq colonnes sur papier */
.cols5 { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 2px solid var(--ink); }
.cols5 > div { padding: 28px 24px 8px 0; border-right: 1px solid rgba(7,6,13,.2); margin-right: 24px; }
.cols5 > div:last-child { border-right: none; margin-right: 0; }
.cols5 .num { font-family: var(--mono); font-size: 11px; letter-spacing: .15em; color: var(--accent-deep); }
.cols5 h3 { font-size: 26px; margin: 14px 0 12px; letter-spacing: -.02em; }
.cols5 p { font-size: 15px; line-height: 1.55; color: rgba(7,6,13,.75); }
@media (max-width: 1100px) { .cols5 { grid-template-columns: repeat(2, 1fr); } .cols5 > div { border-right: none; margin-right: 0; border-bottom: 1px solid rgba(7,6,13,.2); padding-bottom: 28px; } }
@media (max-width: 560px) { .cols5 { grid-template-columns: 1fr; } }

/* LISTE À GRANDES LIGNES */
.rows li { font-size: clamp(20px, 2.1vw, 30px); font-weight: 600; letter-spacing: -.015em; line-height: 1.25; padding: 22px 0; border-top: 1px solid var(--line); display: flex; gap: 20px; }
.rows li:last-child { border-bottom: 1px solid var(--line); }
.rows li::before { content: "→"; color: var(--accent); font-family: var(--mono); font-weight: 400; }

/* DUO — plein écran, deux moitiés qui ne se ressemblent pas */
.duo { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; } }
.profile { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 130px) clamp(20px, 6vw, 96px); --tone: var(--accent); }
.profile > :not(.fx) { position: relative; z-index: 1; }
.profile.divergence { background: linear-gradient(160deg, #1A1440 0%, #0A0818 70%); }
.profile.architecture { --tone: var(--accent-2); background: linear-gradient(200deg, #06262B 0%, #050B0D 70%); border-left: 1px solid var(--line); }
.profile-side { font-family: var(--mono); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--tone); margin-bottom: 36px; }
.profile-side::before { content: "// "; opacity: .6; }
.profile h3 { font-size: clamp(38px, 5vw, 80px); font-weight: 800; letter-spacing: -.035em; line-height: .98; margin-bottom: 20px; }
.profile-role { font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--tone); line-height: 1.7; margin-bottom: 44px; }
.profile-line { font-weight: 500; font-size: clamp(22px, 2.3vw, 34px); line-height: 1.22; letter-spacing: -.025em; margin-bottom: 36px; max-width: 520px; }
.profile-words { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.profile-words li { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; padding: 6px 11px; border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent); color: var(--text); }
.profile-quote { font-size: 17px; color: var(--text-soft); line-height: 1.65; padding-left: 18px; border-left: 1px solid var(--tone); max-width: 480px; }
.duo-final { padding: 110px var(--gutter); text-align: center; text-wrap: balance; font-size: clamp(28px, 4.3vw, 72px); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; color: var(--accent-strong); }
.duo-final span { display: block; color: var(--accent-2); margin-top: .1em; }
@media (max-width: 720px) { .duo-final { padding: 64px var(--gutter); } }

/* ── SCÈNE DU DUO ──────────────────────────────────────────────
   Deux dessins de fond qui se tracent quand la moitié arrive à l'écran (.in).
   Côté Franck : des chemins partent d'un même point et bifurquent.
   Côté Vincent : des traits en désordre se rangent en grille, puis se relient.
   L'état final est l'état par défaut : sans script, tout est déjà en place. */
.fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; color: var(--tone); opacity: .6; -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 42%, #000 74%); mask-image: linear-gradient(90deg, transparent 0, transparent 42%, #000 74%); }
.fx path, .fx line { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.fx circle { fill: currentColor; }

.fx-div path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.5s cubic-bezier(.3,.7,.2,1) calc(var(--n) * 90ms); }
.fx-div circle { transition: opacity .4s calc(1.1s + var(--n) * 90ms); }
.js .profile:not(.in) .fx-div path { stroke-dashoffset: 1; transition: none; }
.js .profile:not(.in) .fx-div circle { opacity: 0; transition: none; }

.fx-arc line { transform-box: fill-box; transform-origin: center; transition: transform 1.1s cubic-bezier(.2,.9,.2,1) calc(var(--n) * 70ms), opacity .5s calc(var(--n) * 70ms); }
.fx-arc circle { transition: opacity .35s calc(1.2s + var(--n) * 45ms); }
.js .profile:not(.in) .fx-arc line { transform: translate(var(--dx), var(--dy)) rotate(var(--dr)); opacity: .5; transition: none; }
.js .profile:not(.in) .fx-arc circle { opacity: 0; transition: none; }

/* Les mots-clés : ceux de Franck sortent du rang et y restent un peu de travers ;
   ceux de Vincent arrivent en vrac et se rangent au cordeau. */
.profile-words li { transition: transform .9s cubic-bezier(.2,.9,.2,1) calc(.5s + var(--n, 0) * 80ms); }
.divergence .profile-words li { transform: rotate(var(--r, 0deg)) translateY(var(--y, 0)); }
.divergence .profile-words li:nth-child(3n+1) { --r: -4deg; --y: 3px; }
.divergence .profile-words li:nth-child(3n+2) { --r: 3deg; --y: -5px; }
.divergence .profile-words li:nth-child(3n) { --r: -1.5deg; --y: 6px; }
.js .divergence:not(.in) .profile-words li { transform: none; transition: none; }
.architecture .profile-words li:nth-child(odd) { --r: 7deg; --y: -12px; }
.architecture .profile-words li:nth-child(even) { --r: -6deg; --y: 10px; }
.js .architecture:not(.in) .profile-words li { transform: rotate(var(--r)) translateY(var(--y)); transition: none; }
.profile-words li:nth-child(2) { --n: 1; } .profile-words li:nth-child(3) { --n: 2; } .profile-words li:nth-child(4) { --n: 3; } .profile-words li:nth-child(5) { --n: 4; } .profile-words li:nth-child(6) { --n: 5; }

/* MÉTHODE — quatre colonnes, grands numéros au trait */
.steps4 { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-strong); }
.steps4 > div { padding: 36px 32px 0 0; }
.steps4 .big { display: block; font-size: clamp(64px, 8vw, 128px); font-weight: 800; line-height: .9; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px var(--accent); margin-bottom: 28px; }
.steps4 h3 { font-size: 26px; letter-spacing: -.02em; margin-bottom: 12px; }
.steps4 p { font-size: 16px; color: var(--text-soft); line-height: 1.6; }
@media (max-width: 1000px) { .steps4 { grid-template-columns: 1fr 1fr; row-gap: 20px; } }
@media (max-width: 560px) { .steps4 { grid-template-columns: 1fr; } .steps4 > div { padding-right: 0; } }

/* PREUVES */
.case-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 28px; }
.case-name { font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -.025em; line-height: 1.15; }
.status { font-family: var(--mono); font-size: 11px; padding: 3px 10px; letter-spacing: .15em; text-transform: uppercase; white-space: nowrap; background: rgba(0,217,126,.1); color: var(--accent-green); border: 1px solid rgba(0,217,126,.3); }

/* POUR QUI — quatre mots, très gros, sur violet */
.who { display: grid; }
.who li { font-size: clamp(34px, 6.8vw, 116px); font-weight: 800; letter-spacing: -.04em; line-height: 1; padding: 26px 0; border-top: 2px solid var(--ink); display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.who li small { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; line-height: 1.6; }

/* COMPARAISON — sur papier, notre colonne en noir */
.versus { border-top: 2px solid var(--ink); }
.versus-row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid rgba(7,6,13,.25); }
.versus-row > div { padding: 28px 32px 28px 0; font-size: clamp(18px, 1.9vw, 26px); font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.versus-row > div:first-child { color: #5A5750; font-weight: 500; text-decoration: line-through; text-decoration-thickness: .07em; text-decoration-color: rgba(7,6,13, calc(var(--g, 1) * .5)); }
.versus-row > div:last-child { background: var(--ink); color: var(--paper); padding-left: 32px; }
.versus-who { display: inline-block; width: 100%; font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 8px; }
.versus-row > div:last-child .versus-who { color: var(--accent); }
@media (max-width: 640px) { .versus-row { grid-template-columns: 1fr; } .versus-row > div:first-child { padding-bottom: 14px; } .versus-row > div:last-child { padding: 22px 20px; } }

/* ENCADRÉS */
.frame { background: var(--bg-2); border: 1px solid var(--accent); padding: 56px 52px; position: relative; box-shadow: 0 0 60px rgba(155,143,245,.06); }
@media (max-width: 720px) { .frame { padding: 32px 22px; } }
.frame-title { font-size: clamp(24px, 3.2vw, 44px); color: var(--accent-strong); line-height: 1.12; letter-spacing: -.025em; margin-bottom: 20px; }
.frame p { font-size: 18px; color: var(--text-soft); max-width: 720px; line-height: 1.65; }
.frame-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-top: 36px; margin-top: 40px; border-top: 1px solid var(--line); }
.frame-meta div { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .15em; color: var(--text-soft); }
.frame-meta strong { font-size: clamp(36px, 5vw, 72px); font-weight: 800; line-height: 1; color: var(--accent); display: block; margin-bottom: 10px; letter-spacing: -.03em; text-transform: none; }
@media (max-width: 560px) { .frame-meta { grid-template-columns: 1fr; } }

.frame.paper { background: var(--paper); border-color: var(--paper); color: var(--ink); box-shadow: none; }
.frame.violet { background: var(--accent); border-color: var(--accent); color: var(--ink); box-shadow: 0 0 80px rgba(155,143,245,.3); }
.frame.paper .label, .frame.violet .label, .frame.paper .frame-title, .frame.violet .frame-title, .frame.violet .frame-meta strong { color: var(--ink); }
.frame.paper .label::before, .frame.violet .label::before { color: rgba(7,6,13,.5); }
.frame.paper p, .frame.violet p, .frame.violet .frame-meta div { color: rgba(7,6,13,.82); }
.frame.violet .frame-meta { border-top-color: rgba(7,6,13,.3); }

/* Le nom déplié de BOSS : les quatre initiales en très gras et en violet, le reste en fin. */
/* Toujours sur UNE ligne : la taille du texte suit la largeur de la carte (cqw). */
.frame p.boss { container-type: inline-size; font-weight: 400; letter-spacing: -.02em; line-height: 1.15; color: var(--ink); margin: 4px 0 22px; padding: 16px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid rgba(7,6,13,.25); max-width: none; }
.boss > span { display: block; white-space: nowrap; font-size: 5.5cqw; }
.boss b { font-weight: 800; font-size: 1.5em; color: var(--accent-deep); letter-spacing: -.04em; }

/* QUESTIONS FRÉQUENTES — volontairement sans effet : c'est le texte que lisent les
   moteurs de recherche et de réponse. Question à gauche, réponse à droite. */
.faq { border-top: 1px solid var(--line-strong); }
.faq > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 20px 64px; padding: 34px 0; border-bottom: 1px solid var(--line); }
.faq h3 { font-size: clamp(20px, 1.9vw, 27px); font-weight: 700; letter-spacing: -.02em; line-height: 1.22; color: var(--accent-strong); text-wrap: balance; }
.faq p { font-size: 17px; line-height: 1.7; color: var(--text); max-width: 640px; }
@media (max-width: 800px) { .faq > div { grid-template-columns: 1fr; padding: 26px 0; } }

/* Porte d'entrée de l'enquête : un bloc cerné de violet, entre deux chapitres */
.enquete-porte { padding: 96px 0; border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent); background: radial-gradient(ellipse 60% 90% at 80% 50%, rgba(83,74,183,.3), transparent 70%), var(--bg-2); }

/* FINAL ET FORMULAIRE */
.final .section-title { font-size: clamp(32px, 4.2vw, 64px); margin-bottom: 28px; }
.final .lead { color: var(--ink); }
.next { margin-top: 44px; display: grid; gap: 0; max-width: 520px; }
.next li { display: flex; gap: 18px; align-items: baseline; padding: 16px 0; border-top: 1px solid rgba(7,6,13,.3); font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.next span { font-family: var(--mono); font-size: 12px; font-weight: 400; }
/* La carte de contact : noire sur le violet, impossible à confondre avec un paragraphe. */
.contact-card { background: var(--ink); color: var(--text); padding: 40px; box-shadow: 0 30px 80px rgba(7,6,13,.45); }
@media (max-width: 720px) { .contact-card { padding: 24px 18px; } }
.contact-head { margin-bottom: 28px; }
.contact-head h3 { font-size: clamp(30px, 3.2vw, 46px); font-weight: 800; letter-spacing: -.03em; color: var(--accent-strong); margin-bottom: 10px; }
.contact-head p { font-size: 16px; color: var(--text-soft); }
.contact-head a { color: var(--accent); border-bottom: 1px solid currentColor; }
.contact-card :focus-visible { outline-color: var(--accent-strong); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 560px) { .form { grid-template-columns: 1fr; } }
.form .full { grid-column: 1 / -1; }
.field { padding: 22px 26px; background: var(--bg); }
.field label { display: block; font-size: 14px; font-weight: 600; color: var(--accent-strong); margin-bottom: 12px; }
.field label small { font-weight: 400; color: var(--text-ghost); font-size: 12px; }
.field input, .field textarea {
  width: 100%; border: none; border-bottom: 1px solid var(--line-strong);
  padding: 10px 0; font-family: var(--sans); font-size: 16px; color: var(--text);
  /* au focus, un trait clair se tire depuis la gauche (pas de bordure qui épaissit et décale) */
  background: linear-gradient(var(--accent-strong), var(--accent-strong)) no-repeat 0 100% / 0 2px transparent;
  transition: background-size .45s cubic-bezier(.2,.9,.2,1);
}
.field input:focus-visible, .field textarea:focus-visible { outline: none; background-size: 100% 2px; }
.field textarea { resize: vertical; min-height: 96px; line-height: 1.55; }
.honeypot { position: absolute; left: -9999px; top: -9999px; }
.form-submit { display: flex; align-items: center; gap: 18px; padding: 28px 26px; flex-wrap: wrap; background: var(--bg); }
.form-status { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .15em; }
.form-status.ok { color: var(--accent-green); }
/* envoi réussi : l'onde du hero repart du bouton */
.form-submit { position: relative; }
.form-submit.sent::after { content: ""; position: absolute; left: 40px; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 0; border: 2px solid var(--accent-green); border-radius: 50%; animation: wave 1s cubic-bezier(.1,.7,.2,1) 1 forwards; pointer-events: none; }
.form-status.err { color: var(--danger); }
.form-note { font-family: var(--mono); font-size: 11px; color: var(--text-ghost); letter-spacing: .18em; text-transform: uppercase; margin-top: 28px; }

/* PIED DE PAGE */
footer { border-top: 1px solid var(--line); padding: 44px 0; font-family: var(--mono); font-size: 12px; color: var(--text-soft); text-transform: uppercase; letter-spacing: .15em; }
.foot-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
.foot-inner a { color: var(--text-soft); transition: color .2s; }
.foot-inner a:hover { color: var(--accent); }
.foot-sig { display: flex; align-items: center; gap: 10px; }
.foot-sig svg { width: 22px; height: 22px; color: var(--accent); opacity: .6; }
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 24px; }

/* ══ UN EFFET PAR SECTION ═════════════════════════════════════
   Le script pose --p sur chaque bloc marqué data-fx : 0 quand le bloc entre
   par le bas de la fenêtre, 1 quand son centre atteint le centre de l'écran.
   --q va un peu plus vite (tout est en place avant le centre) ; --u est ce
   qu'il reste à parcourir. Sans script, --p vaut 1 : tout est à sa place. */
/* --p : 0 quand le haut du bloc entre à 92 % de la fenêtre, 1 quand il atteint 42 % :
   l'effet se joue à hauteur des yeux, pas en bas d'écran. --t : la traversée complète
   (0 à l'entrée par le bas, 1 à la sortie par le haut), pour les sorties et seconds actes. */
[data-fx] { --p: 1; --t: .5; --q: var(--p); --u: calc(1 - var(--q)); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.w { display: inline-block; white-space: nowrap; }
.ch { display: inline-block; }

/* 1. « Digitaliser le chaos » — les lettres arrivent en vrac et se rangent ;
      la seconde ligne, elle, tombe d'un bloc, parfaitement droite. */
.band[data-fx] { --x: clamp(0, calc((var(--t) - .62) * 2.7), 1); }
/* sortie du chaos : le désordre pâlit, le système prend la place */
.fx-chaos .l:first-child { opacity: calc(1 - var(--x) * .72); }
.fx-chaos .l { overflow: visible; }
.fx-chaos .ch { transform: translate(calc(var(--cx) * var(--u) * 1px), calc(var(--cy) * var(--u) * 1px)) rotate(calc(var(--cr) * var(--u) * 1deg)) scale(calc(1 + var(--u) * var(--cs))); }
.fx-chaos em.l { opacity: clamp(0, calc((var(--p) - .62) * 9), 1); transform: translateY(calc((1 - clamp(0, calc((var(--p) - .62) * 6), 1)) * -60px)); letter-spacing: calc(-.04em + (1 - clamp(0, calc((var(--p) - .62) * 5), 1)) * .5em); transform-origin: 0 50%; scale: calc(1 + var(--x) * .07); }

/* 2. « Onze abonnements » — les onze outils arrivent de partout et s'entassent. */
#patchwork .mess li { translate: calc(var(--fx, 0) * var(--u) * 1vw) calc(var(--fy, 0) * var(--u) * 1vh); rotate: calc(var(--fr, 0) * var(--u) * 1deg); opacity: clamp(0, calc(var(--q) * 2.2 - var(--fo, 0)), 1); animation: none; }
#patchwork .mess li { transform: rotate(var(--r, 0deg)) translateY(var(--y, 0)) scale(calc(1 + var(--u) * .8)); }
#patchwork { overflow: clip; }
#patchwork .split > div:first-child { position: relative; z-index: 2; }
#patchwork .note { opacity: clamp(0, calc((var(--p) - .7) * 6), 1); }

/* 4. « Arrêtez d'empiler » — les cinq colonnes sont d'abord une pile de cartes
      de travers, qui se distribue en rang. */
@media (min-width: 1101px) {
  .cols5 { border-top-color: rgba(7,6,13, calc(var(--q) * var(--q))); }
  .cols5 > div {
    background: var(--paper); position: relative; z-index: calc(5 - var(--i));
    box-shadow: 0 18px 44px rgba(7,6,13, calc(var(--u) * .35)); outline: 1px solid rgba(7,6,13, calc(var(--u) * .5));
    padding-left: calc(var(--u) * 22px);
    transform: translateX(calc((2 - var(--i)) * 104% * var(--u))) translateY(calc((var(--i) - 2) * -16px * var(--u))) rotate(calc((var(--i) - 2) * 6deg * var(--u)));
  }
}
@media (max-width: 1100px) { .cols5 > div { opacity: clamp(0, calc((var(--p) - var(--i) * .1) * 4), 1); transform: rotate(calc((var(--i) - 2) * 3deg * var(--u))); } }

/* 5. « L'IA » — deux pistes au départ, dix à l'arrivée ; les lignes de la liste
      s'allument l'une après l'autre. */
#ia { overflow: clip; }
#ia .wrap { position: relative; z-index: 1; }
.fan { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .62; -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 47%, #000 60%); mask-image: linear-gradient(90deg, transparent 0, transparent 47%, #000 60%); }
@media (max-width: 1000px) { .fan { opacity: .32; -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 52%, #000 66%); mask-image: linear-gradient(180deg, transparent 0, transparent 52%, #000 66%); } }
.fan path { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, calc((var(--p) - .12 - var(--k) * .12) * 3.2), 1)); }
/* second acte : neuf pistes s'éteignent, une seule s'épaissit et s'illumine */
.fan path { --end: clamp(0, calc((var(--t) - .5) * 5), 1); opacity: calc(1 - var(--end) * .88); }
.fan path.keep { opacity: 1; stroke: var(--accent-strong); stroke-width: calc(1.5px + var(--end) * 2.5px); filter: drop-shadow(0 0 calc(var(--end) * 8px) var(--accent)); }
#ia .rows li { opacity: clamp(.22, calc((var(--p) - .3 - var(--i) * .1) * 7), 1); transform: translateX(calc((1 - clamp(0, calc((var(--p) - .3 - var(--i) * .1) * 5), 1)) * 70px)); border-top-color: color-mix(in srgb, var(--accent) calc(clamp(0, calc((var(--p) - .3 - var(--i) * .1) * 5), 1) * 100%), var(--line)); }

/* 6. « Aller plus vite » — les deux lignes traversent l'écran à toute allure,
      penchées par la vitesse, et freinent pile en place. */
.fx-speed .l { overflow: visible; }
/* sortie de la vitesse : les deux lignes repartent, chacune de son côté */
.fx-speed .l { transform: translateX(calc(var(--u) * 95vw - var(--x) * var(--x) * 70vw)) skewX(calc(var(--u) * -34deg - var(--x) * 18deg)); filter: blur(calc(var(--u) * 7px)); }
.fx-speed em.l { transform: translateX(calc(var(--u) * -95vw + var(--x) * var(--x) * 70vw)) skewX(calc(var(--u) * 34deg + var(--x) * 18deg)); }

/* 7. Les deux moitiés du duo arrivent chacune de son côté ; les lettres de
      Franck partent dans tous les sens, celles de Vincent se dressent une à une. */
.duo { overflow: clip; --slide: calc(1 - clamp(0, calc(var(--p) * 2), 1)); }
.duo .profile[data-fx] { --slide: calc(1 - clamp(0, calc(var(--p) * 1.6), 1)); }
.js .duo .profile.reveal { opacity: 1; }
.js .duo .divergence.reveal { transform: translateX(calc(var(--slide) * -100%)); transition: none; }
.js .duo .architecture.reveal { transform: translateX(calc(var(--slide) * 100%)); transition: none; }
.profile h3 .ch { transition: transform .8s cubic-bezier(.2,.9,.2,1) calc(var(--n) * 35ms), opacity .5s calc(var(--n) * 35ms); }
.js .divergence:not(.in) h3 .ch { transform: translate(calc(var(--cx) * 2px), calc(var(--cy) * 2px)) rotate(calc(var(--cr) * 1.5deg)); opacity: 0; transition: none; }
/* Une fois posées, les lettres de Franck flottent un peu, chacune à son rythme : le nom
   reste lisible. Elles ne s'écartent que là où la souris passe (--px / --py / --pr,
   posés par le script selon la distance), et reviennent dès qu'elle s'éloigne. */
.divergence.in h3 .ch { animation: letter-float var(--fd, 5s) ease-in-out var(--fl, 0s) infinite; }
@keyframes letter-float {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  33% { translate: calc(var(--cx) * .024px) calc(var(--cy) * -.042px); rotate: calc(var(--cr) * .045deg); }
  66% { translate: calc(var(--cx) * -.02px) calc(var(--cy) * .034px); rotate: calc(var(--cr) * -.035deg); }
}
.divergence h3.free .ch { transform: translate(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px)) rotate(calc(var(--pr, 0) * 1deg)); transition: transform .4s cubic-bezier(.2,.9,.2,1); }
/* Vincent : même désordre au départ, mais chaque lettre claque à sa place, sèchement,
   l'une après l'autre de gauche à droite (après un temps d'arrêt pour qu'on voie le désordre). */
.architecture h3 .ch { transition: transform .26s cubic-bezier(.85,0,.1,1) calc(.75s + var(--n) * 55ms), opacity .2s calc(.1s + var(--n) * 12ms), color .3s calc(.75s + var(--n) * 55ms); }
.js .architecture:not(.in) h3 .ch { transform: translate(calc(var(--cx) * .5px), calc(var(--cy) * .55px)) rotate(calc(var(--cr) * 1deg)); opacity: 0; color: var(--accent-2); transition: none; }
.fx-div circle { animation: pulse 3.2s ease-in-out infinite calc(var(--n, 0) * 260ms); transform-box: fill-box; transform-origin: center; }
.fx-arc circle { animation: blink-node 4s ease-in-out infinite calc(var(--n, 0) * 160ms); }
@keyframes pulse { 0%, 100% { scale: 1; } 50% { scale: 2.6; } }
@keyframes blink-node { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* 8. « Franck ouvre des portes » — deux battants cachent la phrase et s'ouvrent. */
.doors { position: relative; perspective: 1500px; overflow: clip; --open: clamp(0, calc((var(--p) - .28) * 2.6), 1); }
.door { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 2; backface-visibility: hidden; border: 1px solid rgba(255,255,255,.14); }
.door::after { content: ""; position: absolute; top: 50%; width: 6px; height: 64px; margin-top: -32px; background: rgba(255,255,255,.7); }
.dl { left: 0; transform-origin: 0 50%; transform: rotateY(calc(var(--open) * -104deg)); background: linear-gradient(120deg, #2A2170, #534AB7); }
.dl::after { right: 26px; }
.dr { right: 0; transform-origin: 100% 50%; transform: rotateY(calc(var(--open) * 104deg)); background: linear-gradient(240deg, #0B4750, #16808B); }
.dr::after { left: 26px; }
.duo-final b, .duo-final span { display: block; font-weight: 800; }
.duo-final { transform: scale(calc(.82 + var(--open) * .18)); }
.duo-final svg { display: block; width: clamp(90px, 9vw, 150px); height: auto; margin: 0 auto 28px; color: var(--accent-strong); filter: drop-shadow(0 0 30px rgba(155,143,245,.6)); }

/* 9. « Quatre temps » — un trait avance sur la frise et allume chaque temps. */
.steps4 { position: relative; }
.steps4::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 3px; background: var(--accent); box-shadow: 0 0 18px var(--accent); transform-origin: 0 50%; transform: scaleX(clamp(0, calc((var(--p) - .12) * 1.5), 1)); }
.steps4 > div { --on: clamp(0, calc((var(--p) - .14 - var(--i) * .165) * 7), 1); opacity: calc(.2 + var(--on) * .8); transform: translateY(calc((1 - var(--on)) * 30px)); }
.steps4 .big { color: rgba(155,143,245, calc(var(--on) * .95)); -webkit-text-stroke-color: color-mix(in srgb, var(--accent) 100%, transparent); transform-origin: 0 100%; transform: scale(calc(.8 + var(--on) * .2)); }

/* 10. « Ce qui existe déjà » — la première phrase se fait barrer, la seconde
       se construit de gauche à droite derrière un curseur. */
/* sortie : la phrase barrée se tasse, celle qu'on a construite reste */
.fx-build .l:first-child { transform-origin: 0 100%; transform: scale(calc(1 - var(--x) * .38)); }
.fx-build .l { overflow: visible; }
.fx-build .strike { background: linear-gradient(currentColor, currentColor) no-repeat 0 56% / calc(clamp(0, calc((var(--p) - .3) * 3.2), 1) * 100%) .09em; opacity: calc(1 - clamp(0, calc((var(--p) - .5) * 3), 1) * .55); }
.fx-build em.l { --b: clamp(0, calc((var(--p) - .58) * 3.4), 1); position: relative; width: fit-content; clip-path: inset(-10% calc((1 - var(--b)) * 100%) -10% 0); }
.fx-build em.l::after { content: ""; position: absolute; top: 8%; bottom: 8%; left: calc(var(--b) * 100%); width: .5em; margin-left: -.5em; background: currentColor; opacity: calc(1 - clamp(0, calc((var(--b) - .96) * 25), 1)); }

/* 11. « Des systèmes en service » — un voyant qui bat ; chaque fiche se dévoile derrière
       une ligne de balayage, ses rubriques arrivent dans l'ordre, un clic agrandit la capture. */
.voyant { display: inline-block; width: .22em; height: .22em; margin-left: .22em; border-radius: 50%; background: var(--accent-green); box-shadow: 0 0 0 0 rgba(0,217,126,.7); animation: beat 1.6s ease-out infinite; vertical-align: .35em; }
@keyframes beat { 0% { box-shadow: 0 0 0 0 rgba(0,217,126,.7); } 100% { box-shadow: 0 0 0 .5em rgba(0,217,126,0); } }
/* Une fiche par système : la capture dans un cadre de fenêtre, le texte à côté.
   La fiche s'appelle .sys (« .proof » est déjà le bandeau des trois chiffres). */
.sys-list { display: grid; gap: clamp(64px, 9vw, 130px); }
.sys { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
/* une fiche sur deux : l'image passe à droite, et la colonne large la suit */
.sys:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr); }
.sys:nth-child(even) .sys-shot { order: 2; }
.sys-shot { perspective: 1500px; }
/* la fenêtre se dévoile derrière une ligne de balayage, et pivote très légèrement au défilement */
.win { position: relative; border: 1px solid var(--line-strong); background: var(--bg-2); box-shadow: 0 40px 90px rgba(0,0,0,.65), 0 0 70px rgba(155,143,245,.14);
  clip-path: inset(0 calc(var(--u) * 100%) 0 0); }
.sys:nth-child(even) .win { clip-path: inset(0 0 0 calc(var(--u) * 100%)); }
.win::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--q) * 100%); width: 2px; margin-left: -2px; background: var(--accent-green); box-shadow: 0 0 18px 2px rgba(0,217,126,.7); opacity: calc(1 - clamp(0, calc((var(--q) - .96) * 25), 1)); }
.sys:nth-child(even) .win::after { left: calc((1 - var(--q)) * 100%); }
.win-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--line-strong); background: var(--bg-3); }
.win-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.win-bar i:first-child { background: var(--accent); }
.win-bar span { margin-left: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--text-ghost); }
.win img { display: block; width: 100%; height: auto; }
/* l'image est un bouton : un clic l'ouvre en grand */
.zoom { display: block; position: relative; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.zoom-hint { position: absolute; right: 12px; bottom: 12px; padding: 7px 12px; background: rgba(5,5,8,.85); border: 1px solid var(--accent); color: var(--accent-strong); font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; }
.zoom:hover .zoom-hint, .zoom:focus-visible .zoom-hint { opacity: 1; transform: none; }
@media (hover: none) { .zoom-hint { opacity: 1; transform: none; } }
dialog.grand { width: min(96vw, 1500px); max-width: none; padding: 0; border: 1px solid var(--accent); background: var(--bg); color: var(--text); }
dialog.grand::backdrop { background: rgba(5,5,8,.88); backdrop-filter: blur(6px); }
dialog.grand img { display: block; width: 100%; height: auto; }
dialog.grand form { position: absolute; top: 10px; right: 10px; }
dialog.grand button { min-height: 44px; padding: 0 16px; background: var(--bg); border: 1px solid var(--accent); color: var(--accent-strong); font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
dialog.grand[open] { animation: grand-in .3s cubic-bezier(.2,.9,.2,1); }
@keyframes grand-in { from { opacity: 0; transform: scale(.96); } }
.sys-text .case-head { margin-bottom: 22px; }
.sys-text dl { display: grid; gap: 18px; }
.sys-text dt { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.sys-text dd { font-size: 16px; color: var(--text-soft); line-height: 1.6; }
.sys-text dl > div { opacity: clamp(0, calc((var(--q) - .35 - var(--n, 0) * .16) * 6), 1); transform: translateY(calc((1 - clamp(0, calc((var(--q) - .35 - var(--n, 0) * .16) * 6), 1)) * 18px)); }
.sys-text dl > div:nth-child(2) { --n: 1; } .sys-text dl > div:nth-child(3) { --n: 2; }
@media (max-width: 900px) { .sys, .sys:nth-child(even) { grid-template-columns: 1fr; } .sys:nth-child(even) .sys-shot { order: 0; } }

/* 12. « Pour qui » — quatre mots au trait, qui se remplissent d'encre de gauche
       à droite l'un après l'autre. */
.who li { --f: clamp(0, calc((var(--p) - .3 - var(--i) * .13) * 5), 1); color: transparent; -webkit-text-stroke: 1.5px var(--ink);
  background: linear-gradient(90deg, var(--ink) calc(var(--f) * 100%), transparent calc(var(--f) * 100%)); -webkit-background-clip: text; background-clip: text;
  transform: translateX(calc((1 - var(--f)) * -18px)); }
@media (max-width: 720px) { .who li { transform: none; } }
.who li small { color: var(--ink); -webkit-text-stroke: 0; opacity: var(--f); }

/* 13. « Vous cherchez une agence web ? » — la question se tape au clavier, puis
       notre colonne noire se déroule ligne après ligne au défilement. */
.typing .ch.cur { box-shadow: .09em 0 0 currentColor; }
.typing .ch.off { opacity: 0; }
.js #anti-agence .section-title.will-type .l:first-child .li { transform: none; }
.js #anti-agence .section-title.will-type:not(.typed) .l:not(:first-child) .li { transform: translateY(112%); transition: none; }
@keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
.versus-row { --g: clamp(0, calc((var(--p) - .22 - var(--i) * .15) * 6), 1); }
.versus-row > div:last-child { clip-path: inset(0 calc((1 - var(--g)) * 100%) 0 0); }
.versus-row > div:first-child { transform: translateX(calc(var(--g) * -10px)); }

/* 14. Licence et diagnostic — deux cartes qui pivotent chacune de son côté
       et viennent se poser à plat. */
.cards3d { perspective: 1600px; align-items: stretch; }
.cards3d .frame { display: flex; flex-direction: column; }
.cards3d .frame-meta { margin-top: auto; }
.eur { margin-left: .14em; }
.cards3d .frame { transform-origin: 50% 50%; }
.cards3d .frame.paper { transform: translateX(calc(var(--u) * -14vw)) rotateY(calc(var(--u) * 62deg)) rotateZ(calc(var(--u) * -5deg)); }
.cards3d .frame.violet { transform: translateX(calc(var(--u) * 14vw)) rotateY(calc(var(--u) * -62deg)) rotateZ(calc(var(--u) * 5deg)); }

/* Sur téléphone, les grandes phrases rapetissent juste assez pour que chaque groupe
   de sens tienne entier sur sa ligne (taille liée à la largeur de l'écran).
   À garder APRÈS les règles de base de .band p et .hero h1. */
@media (max-width: 699px) {
  .band p { font-size: 7.6vw; }
  .hero h1 { font-size: 8.4vw; }
}
/* Sur grand écran le titre du hero vit dans une colonne étroite : ses groupes peuvent
   se couper (les petits mots restent collés par des espaces insécables). */
@media (min-width: 700px) { .hero h1 .g { white-space: normal; } }

/* APPARITION AU DÉFILEMENT — seulement si le script a démarré (classe .js sur <html>),
   pour que le contenu reste lisible sans JavaScript. */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: .12s; }
.js .reveal.d2 { transition-delay: .24s; }
.js .reveal.d3 { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  /* tout ce qui attend d'entrer en scène est affiché d'emblée, à sa place finale */
  .js .stagger:not(.in) > * { opacity: 1; transform: none; }
  .js .reveal:not(.in) .li, .js .hero h1:not(.in) .li { transform: none; }
  .js .hero-inner:not(.in) .label, .js .hero-inner:not(.in) .hero-sub, .js .hero-inner:not(.in) .cta-row, .js .hero-inner:not(.in) .hero-sig { opacity: 1; transform: none; }
  .js .profile:not(.in) .fx-div path { stroke-dashoffset: 0; }
  .js .profile:not(.in) .fx-div circle, .js .profile:not(.in) .fx-arc circle, .js .profile:not(.in) .fx-arc line { opacity: 1; transform: none; }
  * { animation: none !important; transition: none !important; }
}