/* ==========================================================================
   eTeamsys — Formation IA
   Charte du site eteamsys.com : crème, nuit, violet et lilas ; Space Grotesk
   pour les titres, Manrope pour le texte, DM Mono pour les repères ; angles
   droits partout, seuls les boutons de marque sont des pilules.
   Polices auto-hébergées : aucun appel à un serveur tiers.
   ========================================================================== */

@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/formation/fonts/space-grotesk-latin-ext-V8mDoQDj.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: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/formation/fonts/space-grotesk-latin-V8mDoQDj.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: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/formation/fonts/manrope-latin-ext-xn7gYHE4.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: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/formation/fonts/manrope-latin-xn7gYHE4.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: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/formation/fonts/dm-mono-latin-ext-aFTU7PB1.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: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/formation/fonts/dm-mono-latin-aFTU7PB1.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: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/formation/fonts/dm-mono-latin-ext-aFTR7PB1.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: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/formation/fonts/dm-mono-latin-aFTR7PB1.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; }

/* ---------- Palette et jetons ---------- */

:root {
  color-scheme: light;
  /* Palette de marque (immersive.css du site eteamsys.com) */
  --cream: #F9F5EC;
  --night: #090A13;
  --night-2: #111119;
  --violet: #5B2CE8;
  --violet-deep: #4620C6;
  --lilac: #BDB3FF;
  --mist: #EAE5F5;
  --sand: #E6E0D5;
  --display: "Space Grotesk", system-ui, sans-serif;
  --body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.2, .75, .2, 1);
  --gutter: clamp(20px, 2.8vw, 56px);
  --max: 2400px;
  --ease-io: cubic-bezier(.7, 0, .2, 1);
  /* Rythme vertical du site : section courante. */
  --section: clamp(80px, 11vw, 160px);

  /* Page (crème) */
  --bg: var(--cream);
  --alt: var(--mist);
  --surface: #fff;
  --ink: #15151D;
  --muted: #65646B;
  --line: #DAD7D0;
  --rule: #15151D;
  --field: #fff;
  --field-line: rgba(21, 21, 29, .24);
  --accent: var(--violet);
  --accent-hover: var(--violet-deep);
  --on-accent: #fff;
  --accent-soft: var(--mist);
  --sample: var(--sand);
  --dots: rgba(91, 44, 232, .22);
  --err: #B3261E;
  --logo: none;
  /* Bandeaux sombres (accroche, billet, pied de page) */
  --band: var(--night);
  /* Carte du formulaire posée sur le bandeau sombre */
  --card-bg: var(--cream);
  --card-ink: #15151D;
  --card-muted: #65646B;
  --card-line: #DAD7D0;
  --card-field: #fff;
  --card-field-line: rgba(21, 21, 29, .24);
  --card-accent: var(--violet);
  --card-accent-hover: var(--violet-deep);
  --card-on-accent: #fff;
  --card-err: #B3261E;
  --card-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315151D' stroke-width='1.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--night);
    --alt: #0E0F18;
    --surface: var(--night-2);
    --ink: var(--cream);
    --muted: #AAA9B4;
    --line: rgba(249, 245, 236, .14);
    --rule: rgba(249, 245, 236, .5);
    --field: rgba(249, 245, 236, .04);
    --field-line: rgba(249, 245, 236, .28);
    --accent: var(--lilac);
    --accent-hover: var(--cream);
    --on-accent: var(--night);
    --accent-soft: rgba(189, 179, 255, .1);
    --sample: #161724;
    --dots: rgba(189, 179, 255, .2);
    --err: #FFB8AD;
    --logo: invert(1);
    --band: var(--night-2);
    --card-bg: #181823;
    --card-ink: var(--cream);
    --card-muted: #AAA9B4;
    --card-line: rgba(249, 245, 236, .14);
    --card-field: rgba(249, 245, 236, .04);
    --card-field-line: rgba(249, 245, 236, .28);
    --card-accent: var(--lilac);
    --card-accent-hover: var(--cream);
    --card-on-accent: var(--night);
    --card-err: #FFB8AD;
    --card-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F9F5EC' stroke-width='1.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--night);
  --alt: #0E0F18;
  --surface: var(--night-2);
  --ink: var(--cream);
  --muted: #AAA9B4;
  --line: rgba(249, 245, 236, .14);
  --rule: rgba(249, 245, 236, .5);
  --field: rgba(249, 245, 236, .04);
  --field-line: rgba(249, 245, 236, .28);
  --accent: var(--lilac);
  --accent-hover: var(--cream);
  --on-accent: var(--night);
  --accent-soft: rgba(189, 179, 255, .1);
  --sample: #161724;
  --dots: rgba(189, 179, 255, .2);
  --err: #FFB8AD;
  --logo: invert(1);
  --band: var(--night-2);
  --card-bg: #181823;
  --card-ink: var(--cream);
  --card-muted: #AAA9B4;
  --card-line: rgba(249, 245, 236, .14);
  --card-field: rgba(249, 245, 236, .04);
  --card-field-line: rgba(249, 245, 236, .28);
  --card-accent: var(--lilac);
  --card-accent-hover: var(--cream);
  --card-on-accent: var(--night);
  --card-err: #FFB8AD;
  --card-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F9F5EC' stroke-width='1.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Bandeaux toujours sombres, quel que soit le thème : nuit tramée de points, accents lilas. */
.hero, .foot, .pass {
  --ink: var(--cream);
  --muted: #AAA9B4;
  --line: rgba(249, 245, 236, .14);
  --rule: rgba(249, 245, 236, .5);
  --accent: var(--lilac);
  --accent-hover: var(--cream);
  --on-accent: var(--night);
  --accent-soft: rgba(189, 179, 255, .1);
  --err: #FFB8AD;
  --logo: invert(1);
  background-color: var(--band);
  background-image: radial-gradient(rgba(249, 245, 236, .06) 1px, transparent 1.4px);
  background-size: 14px 14px;
  color: var(--ink);
}

/* La carte du formulaire reprend la surface crème en thème clair. */
.card {
  --ink: var(--card-ink);
  --muted: var(--card-muted);
  --line: var(--card-line);
  --field: var(--card-field);
  --field-line: var(--card-field-line);
  --accent: var(--card-accent);
  --accent-hover: var(--card-accent-hover);
  --on-accent: var(--card-on-accent);
  --err: var(--card-err);
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }
/* Le header collant ne recouvre jamais un champ ou une ancre atteints au clavier. */
html { min-height: 100%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html:has(body.landing) { scroll-padding-top: 96px; }
#programme { scroll-margin-top: -96px; }
body { min-height: 100vh; margin: 0; overflow-x: clip; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
a { color: inherit; }
button, input, select { font: inherit; }
/* Focus en deux tons, comme sur le site : visible sur crème comme sur nuit. */
:focus-visible { outline: 3px solid #382967; outline-offset: 3px; box-shadow: 0 0 0 6px var(--cream); }
.wrap { width: calc(100% - 2 * var(--gutter)); max-width: var(--max); margin-inline: auto; }

/* Repère en mono entre crochets (ix-kicker du site). */
.eyebrow { display: inline-block; color: var(--accent); font: 500 11px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.eyebrow::before { content: "["; margin-right: .5em; opacity: .55; }
.eyebrow::after { content: "]"; margin-left: .5em; opacity: .55; }
.sr-only, .ix-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 12px 18px; background: var(--night); color: #fff; text-decoration: none; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
main:focus { outline: none; box-shadow: none; }

/* Lune : le glyphe de la marque (MoonGlyph). */
.ix-moon { display: block; flex: none; width: 1em; height: 1em; overflow: visible; }
.ix-moon-disc { fill: var(--moon-disc, color-mix(in srgb, currentColor 10%, transparent)); }
.ix-moon-lit { fill: var(--moon-lit, currentColor); }
.ix-moon-ring { fill: none; stroke: var(--moon-ring, currentColor); stroke-width: var(--moon-stroke, 1.4); vector-effect: non-scaling-stroke; }

/* ---------- Échelle typographique (immersive.css) ---------- */

.ix-title { margin: 0; font: 600 clamp(44px, 7vw, 124px)/.88 var(--display); letter-spacing: -.062em; }
.ix-heading { margin: 0; font: 500 clamp(32px, 4.2vw, 68px)/.96 var(--display); letter-spacing: -.055em; }
.ix-lede { margin: 0; font: 400 clamp(25px, 3.2vw, 52px)/1.08 var(--display); letter-spacing: -.042em; }
:is(.ix-split, .ix-title, .ix-heading, .ix-lede) em { font-style: normal; color: var(--accent); }

/* Titres ligne à ligne (SplitLines) : chaque ligne monte hors de son masque, 95 ms d'écart. */
.ix-split { display: flow-root; }
.ix-split-line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.ix-split-inner { display: block; text-wrap: balance; }
.ix-split-line:nth-child(2) > .ix-split-inner { --i: 1; }
.ix-split-line:nth-child(3) > .ix-split-inner { --i: 2; }
.ix-split-line:nth-child(4) > .ix-split-inner { --i: 3; }
html.js .ix-split-inner { transform: translate3d(0, 108%, 0); transition: transform 1.05s var(--ease) calc(var(--ix-delay, 0ms) + var(--i, 0) * 95ms); }
html.js .ix-split.is-in .ix-split-inner { transform: none; }

/* Apparitions (Reveal) : 28 px de montée, opacité .9 s, mouvement 1 s. */
html.js .ix-reveal { transition: opacity .9s var(--ease) var(--ix-delay, 0ms), transform 1s var(--ease) var(--ix-delay, 0ms); }
html.js .ix-reveal-rise:not(.is-in) { opacity: 0; transform: translate3d(0, 28px, 0); }
/* Mots allumés au fil de la lecture (ScrollWords). */
.ix-word { opacity: clamp(.14, calc((var(--p, 0) * 1.2 - var(--w, 0)) * 9), 1); transition: opacity .18s linear; }
/* Sécurité : si le script d'animation ne démarre pas, tout redevient lisible. */
html.js:not(.motion-ready) :is(.ix-reveal-rise, .ix-split-inner) { animation: ix-failsafe .6s ease 2.5s forwards; }
@keyframes ix-failsafe { to { opacity: 1; transform: none; } }

/* ---------- Boutons ---------- */

/* Bouton de marque : pilule violette (lilas sur fond sombre), flèche dans une pastille (et-primary). */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 52px; padding: 13px 14px 13px 24px; border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent); cursor: pointer; font: 700 14px/1.25 var(--body); text-align: left; text-decoration: none; box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 18%, transparent); transition: transform .24s ease, background .24s ease, color .24s ease; }
.btn::after {
  content: "";
  flex: none;
  width: 26px;
  height: 26px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Ccircle cx='13' cy='13' r='13' fill-opacity='.2'/%3E%3Cpath d='M8.3 13h9.4M13.6 8.6l4.4 4.4-4.4 4.4' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Ccircle cx='13' cy='13' r='13' fill-opacity='.2'/%3E%3Cpath d='M8.3 13h9.4M13.6 8.6l4.4 4.4-4.4 4.4' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .3s var(--ease);
}
.btn:hover { transform: translateY(-3px); background: var(--accent-hover); }
.btn:hover::after { transform: translateX(2px); }
.btn:disabled { opacity: .55; cursor: wait; transform: none; }
.btn.wide { width: 100%; justify-content: space-between; min-height: 56px; padding-left: 26px; font-size: 15px; }
/* Bouton utilitaire carré, en mono (ix-btn) : les lettres roulent au survol (RollText). */
.btn.ghost { min-height: 46px; padding: 0 16px; border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); border-radius: 0; background: none; box-shadow: none; color: var(--ink); font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; transition: background .25s ease, color .25s ease, border-color .25s ease; }
.btn.ghost::after { display: none; }
.btn.ghost:hover { transform: none; border-color: var(--ink); background: var(--ink); color: var(--bg); }
.hero .btn.ghost:hover, .pass .btn.ghost:hover { color: var(--night); }
.btn.small { min-height: 40px; }
.btn:focus-visible, .btn.ghost:focus-visible { box-shadow: 0 0 0 6px var(--cream); }
.ix-roll { display: inline-flex; }
.ix-roll-vis { display: inline-flex; height: 1.3em; margin-block: -.15em; overflow: hidden; line-height: 1.3; white-space: pre; }
.ix-roll-vis > span { display: block; text-shadow: 0 1.3em 0 currentColor; transition: transform .5s var(--ease); transition-delay: calc(var(--i, 0) * 14ms); }
.ix-roll-vis > span::before { content: attr(data-c); }
:is(.btn.ghost:not(:disabled):hover, .btn.ghost:focus-visible) .ix-roll-vis > span { transform: translate3d(0, -1.3em, 0); }
/* Libellé qui laisse place à l'étape suivante (SwapLabel). */
.ix-swap { display: inline-grid; overflow: hidden; line-height: 1.25; }
.ix-swap > span { grid-area: 1 / 1; white-space: nowrap; transition: transform .55s var(--ease); }
.ix-swap-b { transform: translate3d(0, 105%, 0); }
.ix-swap-b::before { content: attr(data-label); }
:is(a, button):is(:hover, :focus-visible) > .ix-swap .ix-swap-a { transform: translate3d(0, -105%, 0); }
:is(a, button):is(:hover, :focus-visible) > .ix-swap .ix-swap-b { transform: none; }
/* Pilule lilas (et-primary is-lilac) : carnet de vol. */
.et-primary { display: inline-flex; align-items: center; gap: 12px; padding: 16px 19px 16px 22px; border: 0; border-radius: 999px; background: var(--violet); color: #fff; font: 700 13px/1 var(--body); text-decoration: none; cursor: pointer; box-shadow: 0 10px 24px rgba(91, 44, 232, .18); transition: transform .24s ease, background .24s ease, color .24s ease; }
.et-primary:hover { transform: translateY(-3px); background: var(--violet-deep); }
.et-primary > span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.et-primary.is-lilac { background: var(--lilac); color: var(--night); box-shadow: none; }
.et-primary.is-lilac > span { background: rgba(9, 10, 19, .12); }
.et-primary.is-lilac:hover { background: var(--cream); }
.audit-cta { margin-top: 10px; }
/* Soulignés de liens : le trait file vers la droite puis se retrace depuis la gauche. */
:is(.foot-legal a, .foot-top, .hero-scroll) { position: relative; text-decoration: none; }
:is(.foot-legal a, .foot-top, .hero-scroll)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform-origin: 0 50%; }
:is(.foot-legal a, .foot-top, .hero-scroll):is(:hover, :focus-visible)::after { animation: ix-line-redraw .8s var(--ease) both; }
@keyframes ix-line-redraw {
  0% { transform: scaleX(1); transform-origin: 100% 50%; }
  42% { transform: scaleX(0); transform-origin: 100% 50%; }
  43% { transform: scaleX(0); transform-origin: 0 50%; }
  100% { transform: scaleX(1); transform-origin: 0 50%; }
}

/* ---------- Header collant : ton de la section dessous, pastille et lune de lecture ---------- */

.et-header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; height: 82px; border-bottom: 1px solid transparent; color: var(--ink); transition: background .35s ease, border-color .35s ease, color .35s ease; }
.et-header.tone-dark { --ink: var(--cream); --bg: var(--night); --line: rgba(249, 245, 236, .14); --accent: var(--lilac); --logo: invert(1); }
.et-header.scrolled { background: color-mix(in srgb, var(--bg) 89%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-color: var(--line); }
.et-header.scrolled.tone-dark { background: rgba(9, 10, 19, .74); border-color: rgba(249, 245, 236, .1); }
.et-header-inner { position: relative; display: flex; justify-content: space-between; align-items: center; width: calc(100% - 2 * var(--gutter)); max-width: var(--max); margin: 0 auto; }
.et-logo-link { display: block; }
.et-logo-image { display: block; width: 84px; height: auto; filter: var(--logo); transition: filter .35s ease; }
.et-header-actions { display: flex; align-items: center; gap: 12px; }
.et-header-cta { display: flex; align-items: center; gap: 9px; padding: 12px 16px; border: 1px solid var(--violet); border-radius: 999px; background: var(--violet); color: #fff; font: 700 12px/1.6 var(--body); text-decoration: none; transition: background .24s ease, color .24s ease, border-color .24s ease; }
.et-header-cta:hover { border-color: var(--violet-deep); background: var(--violet-deep); color: #fff; }
.et-header-context { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; gap: 11px; padding: 10px 15px 9px; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); background: color-mix(in srgb, var(--bg) 62%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ink); font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transform: translate(-50%, -50%); transition: color .35s ease, background .35s ease, border-color .35s ease, transform .3s ease; }
.et-header.tone-dark .et-header-context { border-color: rgba(249, 245, 236, .16); background: rgba(9, 10, 19, .42); }
.et-header-context:hover { border-color: var(--accent); transform: translate(-50%, -50%) scale(1.04); }
.et-header-context:hover .et-context-moon { animation: et-moon-nudge .9s ease; }
.et-context-moon { width: 13px; height: 13px; color: var(--accent); --moon-stroke: 1.2; }
.et-context-label { display: block; animation: et-context-in .55s var(--ease) both; }
@keyframes et-moon-nudge { 30% { transform: translateY(-3px) rotate(-12deg); } 60% { transform: translateY(1px) rotate(6deg); } }
@keyframes et-context-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* Pages simples (billet, 404) : en-tête statique. */
.top { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; min-height: 82px; flex-wrap: wrap; }
.logo { display: inline-flex; flex: none; text-decoration: none; }
.logo img { display: block; width: 84px; height: auto; filter: var(--logo); }

/* ---------- Accroche et formulaire ---------- */

/* L'accroche passe sous le header transparent, comme le hero du site. */
.hero { position: relative; display: flex; flex-direction: column; min-height: max(700px, 100vh); min-height: max(700px, 100svh); margin-top: -82px; padding-top: 82px; }
.hero-grid { display: grid; flex: 1; grid-template-columns: minmax(0, 1.3fr) minmax(320px, 520px); gap: clamp(32px, 5vw, 96px); align-items: start; padding-top: clamp(32px, 6vw, 96px); }
.hero-copy { min-width: 0; }
.hero-title { max-width: 15ch; margin: 22px 0 26px; font: 600 clamp(42px, 5.6vw, 104px)/.92 var(--display); letter-spacing: -.062em; }
.sub { max-width: 32ch; margin: 0; color: rgba(249, 245, 236, .86); font: 400 clamp(18px, 1.5vw, 24px)/1.35 var(--display); letter-spacing: -.02em; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: clamp(28px, 4vw, 52px) 0 0; border-top: 1px solid var(--line); }
.facts div { min-width: 0; padding: 16px 0 18px; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--accent); font: 500 10px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.facts dd { margin: 7px 0 0; font: 500 clamp(17px, 1.4vw, 20px)/1.3 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.loading-error { margin: 18px 0 12px; }
/* Barre d'infos du hero : filet qui se trace, horloge de Bruxelles, défilement. */
.ix-infobar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: center; padding: 16px 0 20px; font: 500 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.ix-infobar > * { min-width: 0; }
.hero-bar { position: relative; margin-top: clamp(40px, 7vh, 80px); color: rgba(249, 245, 236, .8); }
.hero-bar::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: rgba(249, 245, 236, .26); transform-origin: 0 50%; }
/* Comme le site : le filet se trace et les infos apparaissent quand le rideau d'intro se lève ; sinon la barre est là d'emblée. */
html.hero-intro .hero-bar::before { animation: ix-rule-draw 1.1s var(--ease-io) .3s both; }
html.hero-intro .hero-bar > * { animation: ix-fade-in .6s ease .75s both; }
html.show-intro.motion-ready .hero-bar::before, html.show-intro.motion-ready .hero-bar > * { animation-play-state: paused; }
.hero-scroll { justify-self: end; padding: 0 0 4px; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.hero-scroll:hover { color: var(--lilac); }
.ix-clock { display: inline-flex; align-items: center; gap: 9px; }
.ix-clock::before { content: "["; opacity: .55; }
.ix-clock::after { content: "]"; opacity: .55; }
.ix-clock-dot { width: 6px; height: 6px; background: var(--accent); animation: ix-blink 2s steps(2, jump-none) infinite; }
.ix-clock time { font-variant-numeric: tabular-nums; }
.ix-clock-zone { opacity: .8; }
@keyframes ix-rule-draw { from { transform: scaleX(0); } to { transform: none; } }
@keyframes ix-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ix-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.card { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: clamp(22px, 2.6vw, 38px); background: var(--card-bg); color: var(--ink); box-shadow: 0 30px 80px rgba(9, 10, 19, .35); }
.card h2 { margin: 0 0 4px; font: 500 clamp(28px, 2.6vw, 38px)/1 var(--display); letter-spacing: -.05em; }
.field { display: flex; flex-direction: column; min-width: 0; }
.field label, .mode-picker legend { margin-bottom: 9px; color: var(--ink); font: 500 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.field input, .field select { width: 100%; min-width: 0; min-height: 52px; padding: 13px 14px; border: 1px solid var(--field-line); border-radius: 0; background-color: var(--field); color: var(--ink); font: 400 16px/1.4 var(--body); transition: border-color .2s ease, box-shadow .2s ease; }
.field select { appearance: none; padding-right: 42px; background-image: var(--card-chevron); background-position: right 14px center; background-repeat: no-repeat; background-size: 16px; cursor: pointer; }
.field select option { background: var(--card-bg); color: var(--ink); }
.field input::placeholder { color: var(--muted); opacity: 1; }
.field input:hover, .field select:hover { border-color: color-mix(in srgb, var(--ink) 50%, transparent); }
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
.mode-picker { min-width: 0; margin: 0; padding: 0; border: 0; }
.mode-picker legend { padding: 0; }

/* Choix carrés (options du brief du site). */
.chip { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 11px 14px; border: 1px solid var(--field-line); border-radius: 0; background: var(--field); color: var(--ink); cursor: pointer; font: 500 15px/1.25 var(--display); letter-spacing: -.01em; text-align: left; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .3s var(--ease); }
.chip:hover { border-color: var(--accent); transform: translateX(4px); }
.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.seg .chip::before { content: ""; flex: none; width: 10px; height: 10px; border: 1px solid currentColor; }
.chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.seg .chip[aria-pressed="true"]::before { background: currentColor; }

.legal { margin: 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.6; }
.legal a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--accent); }
.err, .loading-error { margin: 0; color: var(--err); font-size: 14px; font-weight: 600; }
.honeypot { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
.notice { margin-top: 24px; padding: 18px 20px; border: 1px solid var(--line); border-left: 4px solid var(--accent); background: var(--surface); color: var(--ink); font: 500 17px/1.45 var(--display); letter-spacing: -.01em; }
.notice[data-kind="error"] { border-left-color: var(--err); }

/* ---------- Sections ---------- */

.block { padding-block: var(--section); }
.block.alt { background: var(--alt); }
.section-head { margin-bottom: clamp(40px, 5vw, 72px); }
.section-head :is(.ix-title, .ix-heading) { margin-top: 22px; }
.lead.ix-lede { max-width: 24em; margin: 0 0 clamp(48px, 6vw, 96px); color: var(--ink); }

.timeline { margin: 0; padding: 0; border-top: 1px solid var(--rule); list-style: none; }
.timeline li { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 24px; align-items: baseline; padding: clamp(20px, 2.4vw, 32px) 0; border-bottom: 1px solid var(--line); }
.timeline time { color: var(--accent); font: 500 11px/1.4 var(--mono); letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.timeline li > div { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 8px 32px; align-items: baseline; }
.timeline b { font: 500 clamp(26px, 3.1vw, 50px)/.98 var(--display); letter-spacing: -.05em; }
.timeline span:not(.skeleton-line) { max-width: 40ch; color: var(--muted); font-size: 15px; line-height: 1.6; }

/* Programme : conserver une échelle compacte même hors de l'aperçu étroit. */
#programme .ix-title { font-size: clamp(44px, 7vw, 56px); line-height: 1; }
#programme .lead.ix-lede { max-width: 56ch; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; letter-spacing: normal; }
#programme .timeline b { font-size: clamp(26px, 3.1vw, 30px); line-height: 1.1; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 110px); align-items: center; }
.split .ix-heading { margin: 22px 0 32px; }
.body-copy { max-width: 46ch; margin: 0 0 14px; color: var(--muted); }

/* Images et scènes qui s'ouvrent en trame de points (Media), scène « ia » en direct. */
@property --ix-dot { syntax: "<length>"; inherits: false; initial-value: 0px; }
.ix-media { position: relative; margin: 0; overflow: hidden; }
.ix-media-frame { position: absolute; inset: 0; overflow: hidden; }
html.js .ix-media:not(.is-done) .ix-media-frame {
  -webkit-mask-image: radial-gradient(circle at center, #000 var(--ix-dot), transparent calc(var(--ix-dot) + .6px));
  mask-image: radial-gradient(circle at center, #000 var(--ix-dot), transparent calc(var(--ix-dot) + .6px));
  -webkit-mask-size: 12px 12px;
  mask-size: 12px 12px;
}
.ix-media.is-in:not(.is-done) .ix-media-frame { animation: ix-halftone 1.25s var(--ease) both; }
html.js:not(.motion-ready) .ix-media-frame { -webkit-mask-image: none; mask-image: none; }
@keyframes ix-halftone { from { --ix-dot: 0px; } to { --ix-dot: 9px; } }
.ix-dot-scene { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(120% 90% at 70% 20%, #1D1B34 0%, #111220 55%, #0B0C15 100%); }
.ix-dot-scene canvas { display: block; }
.sample { min-height: clamp(400px, 42vw, 600px); color: var(--cream); }
.sample-overlay { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; padding: clamp(14px, 1.8vw, 22px); pointer-events: none; }
.sample .tag { justify-self: start; padding: 6px 8px 5px; background: var(--lilac); color: var(--night); font: 500 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.sample-readout { grid-row: 3; justify-self: start; max-width: 34ch; padding: clamp(16px, 2vw, 26px); background: var(--night); pointer-events: auto; }
.sample p { margin: 0; font: 500 clamp(15px, 1.2vw, 18px)/1.35 var(--display); letter-spacing: -.02em; }
.sample strong { display: block; margin: 12px 0 10px; color: var(--lilac); font: 600 clamp(64px, 7vw, 112px)/.84 var(--display); letter-spacing: -.07em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sample .muted-copy { color: #AAA9B4; font: 400 14px/1.5 var(--body); letter-spacing: 0; }

.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--line); counter-reset: profil; }
.three article { display: grid; align-content: start; gap: 16px; min-width: 0; min-height: 230px; padding: 26px clamp(18px, 2.2vw, 34px) 32px; border-right: 1px solid var(--line); counter-increment: profil; }
.three article:first-child { padding-left: 0; }
.three article:last-child { border-right: 0; }
.three article::before { content: counter(profil, decimal-leading-zero); color: var(--accent); font: 500 11px/1 var(--mono); letter-spacing: .1em; }
.three h3 { margin: 0; font: 500 clamp(24px, 2.3vw, 36px)/1.02 var(--display); letter-spacing: -.05em; text-wrap: balance; }
.three p { max-width: 38ch; margin: 0; color: var(--muted); font-size: 15px; }

/* FAQ : une question ouverte à la fois, le panneau grandit, le « + » devient « × ». */
.faq-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 60px; align-items: start; }
.faq-list { border-top: 1px solid var(--rule); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item h3 { margin: 0; font: inherit; letter-spacing: normal; }
.faq-toggle { display: flex; justify-content: space-between; align-items: center; gap: 20px; width: 100%; padding: 24px 0; border: 0; background: none; color: inherit; font: 500 clamp(19px, 1.7vw, 26px)/1.2 var(--display); letter-spacing: -.03em; text-align: left; cursor: pointer; }
.faq-toggle svg { flex: none; color: var(--accent); transition: transform .35s var(--ease); }
.faq-item.is-open .faq-toggle svg { transform: rotate(45deg); }
.faq-panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .5s var(--ease-io); }
html.motion-ready .faq-item:not(.is-open) .faq-panel { grid-template-rows: 0fr; }
.faq-panel > div { min-height: 0; overflow: hidden; }
.faq-panel p { max-width: 62ch; margin: 0; padding-bottom: 26px; color: var(--muted); font-size: 15px; line-height: 1.7; }

/* ---------- Pied de page : bandeau final qui défile, pastille flottante ---------- */

.foot { padding-top: var(--section); }
.final { position: relative; border-block: 1px solid var(--line); }
.ix-marquee { overflow: hidden; }
.ix-marquee-track { display: flex; width: max-content; will-change: transform; }
.ix-marquee-set, .ix-marquee-copy { display: flex; flex-shrink: 0; align-items: center; }
.final-marquee { padding-block: clamp(8px, 1.4vw, 20px); color: var(--ink); font: 600 clamp(56px, 9.6vw, 172px)/1.06 var(--display); letter-spacing: -.066em; white-space: nowrap; transition: color .35s ease; }
.final-marquee span { display: inline-flex; align-items: center; gap: .32em; padding-right: .32em; }
.final-marquee .ix-moon { width: .46em; height: .46em; color: var(--lilac); --moon-stroke: 2; }
.final-link { position: absolute; inset: 0; z-index: 1; }
.final-link:focus-visible { outline: 2px solid var(--lilac); outline-offset: -6px; box-shadow: none; }
.final:is(:hover, :focus-within) .final-marquee { color: var(--lilac); }
.foot-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 20px 40px; padding-block: 30px 34px; }
.foot-bar .logo img { width: 64px; }
.foot-info { display: grid; justify-items: end; gap: 14px; text-align: right; }
.foot-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 8px 24px; }
.foot-bar small { color: var(--muted); font: 500 10px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.foot-top { padding: 0; border: 0; background: none; color: #AAA9B4; font: 500 10px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.foot-top:hover { color: var(--lilac); }
/* Mentions légales (dénomination, forme, siège, TVA, RPM) et contact, comme au pied de page d’eteamsys.com. */
.foot-legal { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 18px; color: var(--muted); font: 500 11px/1.6 var(--mono); letter-spacing: .04em; }
.foot-legal address { display: contents; font-style: normal; }
.foot-legal a { color: var(--ink); transition: color .2s ease; }
.foot-legal a::after { opacity: .45; }
.foot-legal a:hover { color: var(--accent); }
.foot-legal a:is(:hover, :focus-visible)::after { opacity: 1; }

.et-float { position: fixed; z-index: 40; right: var(--gutter); bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px)); display: inline-flex; align-items: center; gap: 12px; padding: 7px 7px 7px 20px; border: 0; border-radius: 999px; background: var(--violet); color: #fff; font: 700 13px/1 var(--body); text-decoration: none; box-shadow: 0 14px 34px rgba(91, 44, 232, .32); cursor: pointer; transform: translate3d(0, calc(100% + 48px), 0); transition: transform .55s var(--ease), background .24s ease; }
.et-float.is-visible { transform: none; }
/* Au-delà de 900 px, le bouton « Réserver ma place » de l'en-tête est visible : pas de doublon flottant. */
@media (min-width: 901px) { .et-float { display: none; } }
.et-float:hover { background: var(--violet-deep); }
.et-float:focus-visible { outline: 2px solid var(--lilac); outline-offset: 4px; box-shadow: none; }
.et-float-disc { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .18); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.et-float:is(:hover, :focus-visible) .et-float-disc { transform: rotate(45deg); }

/* ---------- Rideau d'introduction, première visite (SiteIntro) ---------- */

.et-site-intro { position: fixed; inset: 0; z-index: 9999; display: none; place-items: center; overflow: hidden; background: #090a13; color: #fff; font-family: var(--body); }
html.show-intro .et-site-intro, .et-site-intro.is-exiting { display: grid; }
html.show-intro:not(.motion-ready) .et-site-intro { animation: et-intro-failsafe 0s linear 3.5s forwards; }
.et-site-intro.is-exiting { transform: translate3d(0, -100%, 0); visibility: hidden; pointer-events: none; transition: transform 850ms cubic-bezier(.7, 0, .2, 1), visibility 0s linear 850ms; }
.et-intro-center { display: flex; flex-direction: column; align-items: center; gap: clamp(36px, 6vh, 56px); transform: translateY(-6%); transition: transform 850ms cubic-bezier(.7, 0, .2, 1), opacity 420ms ease; }
.et-site-intro.is-exiting .et-intro-center { transform: translateY(-30%); opacity: 0; }
.et-intro-logo-wrap { width: clamp(160px, 24vw, 280px); overflow: hidden; }
.et-intro-logo { display: block; width: 100%; height: auto; filter: invert(1); clip-path: inset(0 100% 0 0); animation: et-intro-reveal 1.25s .18s cubic-bezier(.18, .75, .2, 1) forwards; }
.et-dot-loader { display: grid; grid-template-columns: repeat(7, 7px); grid-template-rows: repeat(7, 7px); gap: 4px; }
.et-dot-loader-dot { width: 7px; height: 7px; border-radius: 2px; background: rgba(189, 179, 255, .18); transition: background 90ms ease, transform 90ms ease; }
.et-dot-loader-dot.active { background: #bdb3ff; transform: scale(1.1); }
.et-intro-skip { position: absolute; top: max(26px, env(safe-area-inset-top)); right: clamp(20px, 4vw, 64px); display: inline-flex; align-items: center; gap: 16px; padding: 10px 0; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .5); background: none; color: #f9f5ec; font: 700 11px/1.5 var(--body); letter-spacing: .06em; cursor: pointer; }
.et-intro-skip:hover { border-color: #bdb3ff; color: #bdb3ff; }
.et-intro-skip:focus-visible { outline: 2px solid #bdb3ff; outline-offset: 5px; box-shadow: none; }
.et-intro-corner { position: absolute; bottom: max(27px, env(safe-area-inset-bottom)); left: clamp(20px, 4vw, 64px); color: #aaa9b4; font: 10px/1.5 var(--mono); letter-spacing: .06em; }
@keyframes et-intro-reveal { to { clip-path: inset(0 0 0 0); } }
@keyframes et-intro-failsafe { to { visibility: hidden; pointer-events: none; } }

/* ---------- Transition de page en pixels (PageTransition) ---------- */

.ix-curtain { position: fixed; top: 0; left: 0; z-index: 95; display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr); width: 100%; height: 100vh; height: 100lvh; pointer-events: none; }
.ix-curtain i { margin: -1px; background: var(--night); }
.ix-curtain i.is-lilac { background: var(--violet); }
.ix-curtain.is-cover i { animation: ix-pixel-in 60ms steps(1, end) var(--cover, 0ms) both; }
.ix-curtain.is-reveal i { animation: ix-pixel-out 110ms steps(1, end) var(--reveal, 0ms) both; }
.ix-curtain-label { position: absolute; inset: 0 0 auto; display: grid; place-items: center; height: 100vh; height: 100svh; margin: 0; padding: 0 var(--gutter); color: var(--lilac); font: 500 12px/1.4 var(--mono); letter-spacing: .12em; text-align: center; text-transform: uppercase; }
.ix-curtain.is-cover .ix-curtain-label { animation: ix-fade-in .18s ease .2s both; }
.ix-curtain.is-reveal .ix-curtain-label { animation: ix-fade-out .16s ease both; }
.ix-curtain-label span::before { content: "[ "; opacity: .55; }
.ix-curtain-label span::after { content: " ]"; opacity: .55; }
/* Arrivée : la page reste couverte jusqu'à ce que les pixels prennent le relais. */
html.is-arriving body::after { content: ""; position: fixed; inset: 0; z-index: 95; background: var(--night); animation: et-intro-failsafe 0s linear 1.6s forwards; }
@keyframes ix-pixel-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ix-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ix-pixel-out { from { opacity: 1; } to { opacity: 0; } }

/* ---------- Carnet de vol (FlightLog) ---------- */

.fl-backdrop { --fl-top: 88px; position: fixed; inset: 0; z-index: 80; display: flex; justify-content: center; align-items: flex-start; padding: var(--fl-top) 16px 16px; background: rgba(9, 10, 19, .42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: ix-fade-in .3s ease both; }
.fl { width: min(440px, 100%); max-height: calc(100vh - var(--fl-top) - 16px); max-height: calc(100dvh - var(--fl-top) - 16px); overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: clamp(8px, 1.6vh, 14px); padding: clamp(12px, 2vh, 18px) 18px clamp(14px, 2.2vh, 20px); border: 1px solid rgba(189, 179, 255, .22); background: #0D0E19; color: var(--cream); box-shadow: 0 30px 80px rgba(9, 10, 19, .45); transform-origin: 50% 0; animation: fl-drop .55s cubic-bezier(.16, 1, .3, 1) both; }
.fl > * { flex-shrink: 0; }
.fl :focus-visible { outline-color: var(--lilac); box-shadow: none; }
.fl-top { display: flex; align-items: center; justify-content: space-between; }
.fl-top .eyebrow { color: var(--lilac); }
.fl-close { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(249, 245, 236, .2); background: none; color: inherit; cursor: pointer; }
.fl-close:hover { border-color: var(--lilac); color: var(--lilac); }
.fl h2 { margin: 0; font: 500 clamp(21px, min(3vw, 3.4vh), 30px)/1.05 var(--display); letter-spacing: -.045em; }
.fl h2 em { color: var(--lilac); font-style: normal; }
.fl > .fl-chart-wrap { position: relative; flex: 0 1 auto; width: 100%; aspect-ratio: 320 / 190; min-height: 64px; }
.fl-chart { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fl-sky { fill: rgba(249, 245, 236, .12); }
.fl-track { fill: none; stroke: rgba(249, 245, 236, .22); stroke-width: 1.4; stroke-dasharray: .012 .018; }
.fl-flown { fill: none; stroke: #BDB3FF; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1 1; animation: fl-draw 1.1s .15s cubic-bezier(.7, 0, .2, 1) both; }
.fl-moon-disc { fill: rgba(189, 179, 255, .1); }
.fl-moon-lit { fill: #F9F5EC; }
.fl-moon-ring { fill: none; stroke: #BDB3FF; stroke-width: .9; }
.fl-halo { opacity: calc(.25 + var(--p, 0) * .75); }
.fl-point { fill: #0D0E19; stroke: rgba(249, 245, 236, .5); stroke-width: 1.2; }
.fl-point.is-passed { fill: #BDB3FF; stroke: #BDB3FF; }
.fl-here { fill: #F9F5EC; filter: drop-shadow(0 0 6px #BDB3FF); animation: fl-pulse 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.fl-spark { fill: #BDB3FF; opacity: 0; animation: fl-burst 1.2s var(--d, 0ms) cubic-bezier(.16, 1, .3, 1) both; }
.fl.is-arrived .fl-moon { animation: fl-moon-pop .8s cubic-bezier(.16, 1, .3, 1) both; transform-box: fill-box; }
.fl-steps { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(249, 245, 236, .12); }
.fl-steps button { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: baseline; gap: 10px; width: 100%; padding: clamp(4px, 1.05vh, 9px) 0; border: 0; border-bottom: 1px solid rgba(249, 245, 236, .08); background: none; color: rgba(249, 245, 236, .55); font: 500 clamp(13px, 1.8vh, 15px)/1.25 var(--display); letter-spacing: -.02em; text-align: left; cursor: pointer; transition: color .2s ease, padding .25s ease; }
.fl-steps .is-passed button { color: rgba(249, 245, 236, .85); }
.fl-steps .is-current button { color: #F9F5EC; }
.fl-steps button:hover { color: #BDB3FF; padding-left: 6px; }
.fl-step-at { color: #BDB3FF; font: 500 10px/1 var(--mono); letter-spacing: .06em; opacity: .8; }
.fl-step-here { color: #BDB3FF; font: 500 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.fl-foot { display: grid; gap: 12px; padding-top: 4px; }
.fl-foot p { margin: 0; color: #AAA9B4; font-size: 12px; line-height: 1.5; }
.fl-foot .et-primary { justify-self: start; }
@keyframes fl-drop { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes fl-draw { from { stroke-dashoffset: 1; } }
@keyframes fl-pulse { 50% { transform: scale(1.35); } }
@keyframes fl-burst { 0% { opacity: 1; transform: translate(0, 0) scale(.4); } 70% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1); } }
@keyframes fl-moon-pop { 0% { transform: translate(286px, 34px) scale(2.2); } 40% { transform: translate(286px, 34px) scale(2.75); } 100% { transform: translate(286px, 34px) scale(2.2); } }
@media (max-height: 820px) {
  .fl-steps.is-long { display: block; columns: 2; column-gap: 16px; }
  .fl-steps.is-long li { break-inside: avoid; }
  .fl-steps.is-long button { grid-template-columns: 34px minmax(0, 1fr); }
  .fl-steps.is-long .fl-step-here { display: none; }
  .fl-steps.is-long .is-current button { color: #BDB3FF; }
  .fl-foot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding-top: 0; }
  .fl-foot .et-primary { justify-self: end; }
}
@media (max-height: 620px) { .fl-foot p { display: none; } .fl-foot { grid-template-columns: 1fr; } .fl-foot .et-primary { justify-self: start; } }
@media (max-height: 560px) { .fl-backdrop { --fl-top: 64px; } }
@media (max-height: 560px) and (min-width: 600px) {
  .fl { display: grid; width: min(820px, 100%); grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; column-gap: 24px; }
  .fl-top, .fl h2 { grid-column: 1; }
  .fl > .fl-chart-wrap { grid-column: 1; grid-row: 3; align-self: stretch; aspect-ratio: auto; min-height: 0; }
  .fl-steps { grid-column: 2; grid-row: 1 / span 3; align-self: start; }
  .fl-foot { grid-column: 1 / -1; grid-row: 4; }
}

/* ---------- Billet de confirmation et pages simples ---------- */

.ticket, .ticket-result { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; max-width: 760px; margin: 0 auto; padding-block: clamp(24px, 5vw, 64px) clamp(48px, 7vw, 104px); }
.ticket h1, .ticket-result h1 { margin: 0; font: 500 clamp(36px, 5vw, 68px)/.95 var(--display); letter-spacing: -.055em; text-wrap: balance; }
.ticket p, .ticket-result p { max-width: 56ch; margin: 0; }
.ticket > .top { align-self: stretch; }
/* Entrée du billet : les blocs montent l'un après l'autre (Reveal, 28 px). */
.ticket > :not(.top), .ticket-result > * { animation: ix-rise 1s var(--ease) both; }
.ticket > :nth-child(2), .ticket-result > :nth-child(2) { animation-delay: 80ms; }
.ticket > :nth-child(3), .ticket-result > :nth-child(3) { animation-delay: 160ms; }
.ticket > :nth-child(n + 4), .ticket-result > :nth-child(n + 4) { animation-delay: 240ms; }
@keyframes ix-rise { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } }
.pass { display: grid; gap: 14px; align-self: stretch; padding: clamp(22px, 3vw, 38px); }
.pass .facts { margin-top: 6px; }
.ticket-name { font: 500 clamp(22px, 2.4vw, 32px)/1.1 var(--display); letter-spacing: -.04em; overflow-wrap: anywhere; }
.next { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; align-self: stretch; padding: clamp(20px, 3vw, 34px); background: var(--accent-soft); color: var(--ink); }
.next h2 { margin: 0; font: 500 clamp(24px, 2.6vw, 34px)/1.05 var(--display); letter-spacing: -.045em; text-wrap: balance; }
.next p { color: var(--muted); }
.copy-fallback { display: flex; flex-direction: column; gap: 8px; align-self: stretch; }
.copy-fallback label { color: var(--ink); font: 500 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.copy-help { color: var(--muted); font-size: 14px; }
.copy-fallback input { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--field-line); border-radius: 0; background: var(--field); color: var(--ink); font: inherit; }
.ticket-loading { display: flex; flex-direction: column; gap: 12px; align-self: stretch; padding-block: 16px; }

.skeleton-line { position: relative; display: inline-block; width: 120px; height: 1em; overflow: hidden; background: var(--line); vertical-align: middle; }
.wide-line { width: min(100%, 390px); }
.skeleton-line::after { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 12%, transparent), transparent); content: ""; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ---------- Grand écran : l'accroche quitte la scène au défilement ---------- */

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .hero-copy { --exit: max(0, var(--hero-p, .5) - .5); opacity: calc(1 - var(--exit) * 3); transform: translate3d(0, calc(var(--exit) * -160px), 0); }
  .hero-bar { opacity: calc(1 - max(0, var(--hero-p, .5) - .5) * 5); }
  .hero-bar:has(:focus-visible) { opacity: 1; }
  .hero-copy:has(:focus-visible) { opacity: 1; transform: none; }
}

/* ---------- Écrans moyens et petits (paliers du site : 1100, 900, 590) ---------- */

@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 440px); }
}
@media (max-width: 900px) {
  /* La pastille ne garde que la lune ; l'appel du header laisse place à la pastille flottante. */
  .et-header-context { gap: 0; padding: 8px; }
  .et-context-label { display: none; }
  .et-header-cta { display: none; }
  .hero-grid, .split, .faq-layout { grid-template-columns: minmax(0, 1fr); }
  .hero-title { max-width: 16ch; }
  .ix-infobar { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 10px; }
  .hero-bar .hero-scroll { grid-column: 2; }
  .timeline li { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .timeline li > div { grid-template-columns: minmax(0, 1fr); }
  .three { grid-template-columns: minmax(0, 1fr); border-bottom: 0; }
  .three article { min-height: 0; padding: 22px 0 26px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sample { min-height: 0; aspect-ratio: 4 / 5; max-height: 640px; }
}
@media (max-width: 590px) {
  :root { --gutter: 16px; }
  .et-header { height: 70px; }
  html:has(body.landing) { scroll-padding-top: 84px; }
  #programme { scroll-margin-top: -84px; }
  .et-logo-image { width: 72px; }
  .hero { min-height: max(640px, 100vh); min-height: max(640px, 100svh); margin-top: -70px; padding-top: 70px; }
  .hero-title { font-size: clamp(40px, 11.5vw, 56px); }
  :is(.ix-split, .ix-title, .ix-heading) { overflow-wrap: break-word; hyphens: auto; }
  .hero-bar > :first-child { display: none; }
  .top { min-height: 70px; flex-wrap: nowrap; }
  .logo img { width: 72px; }
  .two, .facts { grid-template-columns: minmax(0, 1fr); }
  .card { margin-inline: -4px; }
  .seg { grid-template-columns: minmax(0, 1fr); }
  .foot-bar { grid-template-columns: minmax(0, 1fr); }
  .foot-info { justify-items: start; text-align: left; }
  .foot-actions { justify-content: flex-start; }
  .foot-legal { flex-direction: column; justify-content: flex-start; gap: 8px; }
  .fl-backdrop { --fl-top: 76px; }
  .et-dot-loader { grid-template-columns: repeat(7, 6px); grid-template-rows: repeat(7, 6px); }
  .et-dot-loader-dot { width: 6px; height: 6px; }
}
/* Écran tactile ou étroit : pas de survol, donc pas de roulement de lettres. */
@media (hover: none), (max-width: 590px) {
  .btn.ghost { max-width: 100%; padding-block: 12px; }
  .ix-roll-vis { display: none; }
  .ix-roll > .ix-sr { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; line-height: 1.4; }
}
@media (max-height: 820px) and (max-width: 380px) {
  .fl { padding-inline: 14px; }
  .fl-steps.is-long { column-gap: 12px; }
  .fl-steps.is-long button { grid-template-columns: minmax(0, 1fr); font-size: 13px; }
  .fl-steps.is-long .fl-step-at { display: none; }
}

/* ---------- Mouvement réduit : tout est visible, rien ne bouge ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html.js :is(.ix-reveal, .ix-reveal-rise) { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.js .ix-split-inner { transform: none !important; transition: none !important; }
  .ix-word { opacity: 1 !important; }
  html.js .ix-media .ix-media-frame { -webkit-mask-image: none !important; mask-image: none !important; animation: none !important; }
  .ix-clock-dot, .ix-curtain { animation: none; }
  .ix-curtain { display: none; }
  .ix-swap-a { transform: none !important; }
  .ix-swap-b { visibility: hidden; }
  .ix-roll-vis > span { transform: none !important; }
  :is(.foot-legal a, .foot-top, .hero-scroll)::after { animation: none !important; }
  .btn:hover, .et-primary:hover, .chip:hover { transform: none; }
  .et-intro-logo { animation: none; clip-path: none; }
  .fl-backdrop, .fl, .fl-flown, .fl-here, .fl-spark, .fl.is-arrived .fl-moon { animation: none !important; }
}

/* ----- Préparation d’audit (page /audit/preparation/:token) ----- */
.prep-page .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.prep-page .prep-app { max-width: 720px; min-height: 100vh; min-height: 100dvh; margin: 0 auto; padding-inline: var(--gutter); display: flex; flex-direction: column; }
.prep-page .prep-head { padding-block: 18px 12px; display: flex; flex-direction: column; gap: 14px; }
.prep-page .brand { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.prep-page .brand .logo img { width: 58px; }
.prep-page .brand h1 { margin: 0; padding-left: 16px; border-left: 1px solid var(--line); font: 500 24px/1.1 var(--display); letter-spacing: -.045em; }
.prep-page .brand > span:not(.logo) { margin-left: auto; color: var(--muted); font: 500 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.prep-page .steps { display: flex; gap: 4px; }
.prep-page .steps i { flex: 1; height: 5px; background: var(--line); transition: background .3s ease; }
.prep-page .steps i.on { background: var(--accent); }
.prep-page .feed, .prep-page .dialogue { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.prep-page .feed { flex: 1; padding-block: 8px 16px; }
.prep-page .msg { max-width: 86%; padding: 12px 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
.prep-page .msg.bot { align-self: flex-start; border: 1px solid var(--line); background: var(--surface); }
.prep-page .msg.me { align-self: flex-end; background: var(--accent); color: var(--on-accent); font-weight: 600; }
.prep-page .msg.wait { color: var(--muted); font-style: italic; }
.prep-page .note { align-self: center; margin: 0; color: var(--muted); font: 500 11px/1.5 var(--mono); letter-spacing: .06em; text-align: center; }
.prep-page .intro { display: flex; flex-direction: column; gap: 16px; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--line); background: var(--surface); }
.prep-page .intro h2 { margin: 0; font: 500 clamp(30px, 4.4vw, 44px)/1 var(--display); letter-spacing: -.055em; text-wrap: balance; }
.prep-page .intro p { margin: 0; color: var(--muted); }
.prep-page .intro label { display: block; margin-bottom: 9px; color: var(--ink); font: 500 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.prep-page .chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.prep-page .chip:disabled, .prep-page .composer input:disabled { opacity: .55; cursor: wait; }
.prep-page .example { padding: 14px 16px; border-left: 3px solid var(--accent); background: var(--accent-soft); color: var(--muted); font-size: 14px; }
.prep-page .example b { color: var(--ink); }
.prep-page .composer { position: sticky; bottom: 0; display: flex; flex-direction: column; gap: 10px; padding-block: 12px 16px; border-top: 1px solid var(--line); background: var(--bg); }
.prep-page .row { display: flex; gap: 8px; }
.prep-page .row input { flex: 1; min-width: 0; min-height: 52px; padding: 12px 14px; border: 1px solid var(--field-line); border-radius: 0; background: var(--field); color: var(--ink); font: inherit; }
.prep-page .row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent); }
.prep-page .prep-err { padding: 12px 14px; border: 1px solid var(--err); background: var(--surface); }
.prep-page .prep-retry { padding-top: 8px; }
.prep-page .diag { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--line); background: var(--surface); }
.prep-page .diag h2 { margin: 0; font: 500 clamp(22px, 2.6vw, 28px)/1.15 var(--display); letter-spacing: -.035em; text-wrap: balance; overflow-wrap: anywhere; }
.prep-page .diag p { margin: 0; overflow-wrap: anywhere; }
.prep-page .big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.prep-page .big strong { color: var(--accent); font: 600 clamp(56px, 10vw, 88px)/.9 var(--display); letter-spacing: -.07em; font-variant-numeric: tabular-nums; }
.prep-page .big span { color: var(--muted); }
.prep-page .kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin: 0; }
.prep-page .kv div { min-width: 0; padding: 12px 14px; background: var(--bg); }
.prep-page .kv dt { color: var(--accent); font: 500 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.prep-page .kv dd { margin: 6px 0 0; font: 500 17px/1.3 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.prep-page .kv dd small { display: block; color: var(--muted); font: 400 13px/1.4 var(--body); letter-spacing: 0; }
.prep-page .promise { padding: 14px 16px; background: var(--accent-soft); font: 500 17px/1.4 var(--display); letter-spacing: -.015em; }
.prep-page .fine { color: var(--muted); font-size: 13px; }
.prep-page .diag .next p { overflow-wrap: anywhere; }
@media (max-width: 460px) { .prep-page .msg { max-width: 94%; } .prep-page .row .btn { padding-left: 18px; } }
@media (prefers-reduced-motion: no-preference) {
  .prep-page .msg, .prep-page .diag { animation: prep-rise .25s ease-out; }
  @keyframes prep-rise { from { transform: translateY(6px); opacity: .4; } to { transform: none; opacity: 1; } }
}

.sample-note { margin: 10px 0 0; font-size: 13px; }
.prep-page .q { display: flex; flex-direction: column; gap: 16px; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--line); background: var(--surface); }
.prep-page .q h2 { margin: 0; font: 500 clamp(26px, 4vw, 38px)/1.05 var(--display); letter-spacing: -.05em; text-wrap: balance; }
.prep-page .q p { margin: 0; color: var(--muted); }
.prep-page .q textarea, .prep-page .q input[type="text"], .prep-page .q select { width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid var(--field-line); border-radius: 0; background: var(--field); color: var(--ink); font: 400 16px/1.4 var(--body); }
.prep-page .q textarea { min-height: 112px; resize: vertical; }
.prep-page .q textarea:focus, .prep-page .q input:focus, .prep-page .q select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent); }
.prep-page .q label, .prep-page .q .lbl { display: block; margin-bottom: 8px; color: var(--ink); font: 500 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.prep-page .q .actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; padding-top: 6px; }
.prep-page .chip:disabled, .prep-page .btn:disabled { opacity: .55; cursor: wait; }
.prep-page .chip.sm { min-height: 40px; font-size: 14px; }
.prep-page .chip[aria-pressed="true"]::before { background: currentColor; }
.prep-page .chip::before { content: ""; flex: none; width: 10px; height: 10px; border: 1px solid currentColor; }
.prep-page .chips.col { flex-direction: column; align-items: stretch; }
.prep-page .qlist { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.prep-page .qlist li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.prep-page .qlist .kind { grid-column: 1 / -1; color: var(--accent); font: 500 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.prep-page .loadbar { height: 5px; overflow: hidden; background: var(--line); }
.prep-page .loadbar::after { content: ""; display: block; width: 40%; height: 100%; background: var(--accent); animation: prep-slide 1.2s ease-in-out infinite alternate; }
@keyframes prep-slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.prep-page .small-note { color: var(--muted); font-size: 13px; }
.prep-page .conflict { padding: 12px 14px; border: 1px solid var(--accent); background: var(--accent-soft); font-size: 14px; }