/* ——— Direction artistique « Majorelle » ———
   Le bleu Majorelle et le jaune safran du jardin de Marrakech, la crème des façades, le rouge et le vert du drapeau.
   Typographie : Bricolage Grotesque (titres, largeur et graisse variables), Instrument Serif italique (accents),
   Geist Mono (repères, chiffres), Instrument Sans (texte courant). */
@font-face { font-family: 'Bricolage Grotesque'; src: url(/fonts/bricolage.woff2) format('woff2'); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url(/fonts/bricolage-ext.woff2) format('woff2'); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: 'Instrument Serif'; src: url(/fonts/iserif-italic.woff2) format('woff2'); font-style: italic; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url(/fonts/iserif-italic-ext.woff2) format('woff2'); font-style: italic; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: 'Instrument Serif'; src: url(/fonts/iserif.woff2) format('woff2'); font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url(/fonts/geistmono.woff2) format('woff2'); font-display: swap; }

:root {
  --maj: #2337c8; --maj2: #3b50ff; --majd: #121c66; --saf: #f2b33d; --saf2: #ffd36e;
  --cream: #f3ecdf; --cream2: #fbf7ef; --ink: #0f1433; --red: #d2352b; --green: #0b7a4b;
  --bg: var(--cream); --bg2: var(--cream2); --sand: #e8dcc6; --navy: var(--ink); --txt: var(--ink); --soft: #3e4462; --mut: #6b6f86;
  --gold: #b07a14; --gold2: var(--saf); --gold3: var(--saf2);
  --line: rgba(15, 20, 51, .14); --line2: rgba(15, 20, 51, .08);
  --disp: 'Bricolage Grotesque', 'Reem Kufi', 'Noto Kufi Arabic', 'PingFang SC', sans-serif;
  --serif: 'Instrument Serif', 'Reem Kufi', serif; --mono: 'Geist Mono', ui-monospace, monospace;
  --shadow: 0 30px 80px rgba(15, 20, 51, .14);
  --ease: cubic-bezier(.65, 0, .35, 1); --out: cubic-bezier(.16, 1, .3, 1);
}
body { background: var(--cream) !important; color: var(--ink); }
::selection { background: var(--saf); color: var(--ink); }
.mono { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
html[dir=rtl] .mono { letter-spacing: 0; }

/* grain photographique */
.grain { position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .07; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } }

/* titres */
.h1 { font: 600 clamp(2.6rem, 6vw, 6.4rem)/.95 var(--disp); font-stretch: 85%; letter-spacing: -.035em; color: var(--ink); max-width: 16ch; }
.h2 { font: 600 clamp(2rem, 4.2vw, 4rem)/1 var(--disp); font-stretch: 85%; letter-spacing: -.03em; color: var(--ink); }
html[dir=rtl] .h1, html[dir=rtl] .h2 { font-family: 'Noto Kufi Arabic', var(--disp); font-weight: 700; letter-spacing: 0; line-height: 1.25; }
.k { font: 500 .74rem var(--mono); letter-spacing: .12em; color: var(--ink); }
.k::before { width: auto; height: auto; background: none; content: '( ' attr(data-n) ' )'; color: var(--red); transform: none !important; }
.k:not([data-n])::before { content: '✦'; }
.lead { color: var(--soft); }
.cc h3, .mod h3, .sc h3, .steps h3, .jr-step h3, .ucx h3, .pf-tag, .wc span, .hosts span { font-family: var(--disp); font-weight: 600; font-stretch: 90%; letter-spacing: -.015em; }

/* boutons */
.btn { font-family: var(--ui); font-weight: 600; }
.btn.gold { color: var(--ink); background: var(--saf); box-shadow: 0 0 0 0 rgba(242, 179, 61, .5); }
.btn.gold:hover { background: var(--saf2); box-shadow: 0 14px 40px rgba(242, 179, 61, .45); }
.btn .arr { font-style: normal; display: inline-block; transition: transform .5s var(--out); }
.btn:hover .arr { transform: translateX(6px); }
.btn.ghost { color: inherit; border-color: currentColor; background: transparent; backdrop-filter: none; }
.btn.ghost:hover { color: var(--saf); border-color: var(--saf); }

/* navigation */
#nav.solid { background: rgba(251, 247, 239, .82); border-color: var(--line2); box-shadow: 0 10px 30px rgba(15, 20, 51, .08); }
#nav:not(.solid) .wm b, #nav:not(.solid) .links a, #nav:not(.solid) .sel select { color: #fbf7ef; }
#nav:not(.solid) .sel select { border-color: rgba(251, 247, 239, .35); background: rgba(255, 255, 255, .08); }
.wm b { font: 700 .92rem var(--disp); font-stretch: 80%; letter-spacing: .14em; }
.wm em { color: var(--saf); }
.links a { font: 500 .8rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.links a::after { background: var(--saf); height: 1px; }
#nav .btn.gold { padding: .62rem 1.1rem; }

/* 1. ouverture : bleu Majorelle vivant, typographie géante */
.hero { min-height: 100svh; height: 100svh; padding: 0; display: grid; grid-template-rows: 1fr auto auto auto; align-items: end; color: var(--cream); background: radial-gradient(80% 80% at 70% 40%, #3346e0, #1a2796 60%, #0e1659); }
.hero .hero-bg { display: none; }
.royaume-gl { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; opacity: 1 !important; top: 0 !important; z-index: 0; }
.hero-meta { position: absolute; z-index: 2; top: 104px; left: var(--gut); right: var(--gut); display: flex; justify-content: space-between; gap: 1rem; color: rgba(251, 247, 239, .72); }
.hero-meta .geo { opacity: .7; }
@media (max-width: 760px) { .hero-meta .geo { display: none; } }
.mega { position: relative; z-index: 2; margin: 0 0 1.2rem; padding: 0 var(--gut); align-self: end; text-align: start; white-space: normal; color: var(--cream); font: 800 clamp(3.4rem, 14vw, 15.5rem)/.82 var(--disp); font-stretch: 75%; letter-spacing: -.045em; text-transform: uppercase; perspective: none; }
.mega .ln { display: block; white-space: nowrap; }
.mega .ln + .ln { font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -.03em; color: var(--saf); font-size: .82em; line-height: 1.02; padding-inline-start: 16vw; margin-top: -.06em; }
.mega .c { display: inline-block; animation: none; transition: font-variation-settings .25s, transform .4s var(--out); will-change: transform; }
.mega .gold { background: none; -webkit-background-clip: initial; background-clip: initial; color: inherit; animation: none; }
.hero-low { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: end; gap: 2rem; padding: 1.4rem var(--gut) 1.6rem; border-top: 1px solid rgba(251, 247, 239, .18); margin: 0 var(--gut); padding-inline: 0; }
.hero-left { max-width: 46ch; }
.mega-ar { margin: 0 0 .4rem; font-weight: 600; text-align: start !important; color: var(--saf); font-size: clamp(1.5rem, 2.6vw, 2.4rem); }
.hero .slogan { margin: 0; color: rgba(251, 247, 239, .82); font-size: clamp(.95rem, 1.1vw, 1.08rem); max-width: 54ch; }
.hero .cta { margin: 0; flex-shrink: 0; }
.hero .btn.ghost { color: var(--cream); }
.gl-cap { position: absolute; z-index: 2; top: 140px; inset-inline-end: var(--gut); left: auto; transform: none; bottom: auto; background: rgba(251, 247, 239, .1); border: 1px solid rgba(251, 247, 239, .25); color: var(--cream); backdrop-filter: blur(10px); box-shadow: none; font: 500 .7rem var(--mono); letter-spacing: .1em; }
.gl-cap i { background: var(--saf); box-shadow: 0 0 0 4px rgba(242, 179, 61, .25); }
.hero .marquee { position: relative; z-index: 2; height: 64px; background: var(--saf); border: 0; }
.hero .mq-track span { font: 700 1.25rem var(--disp); font-stretch: 80%; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
.hero .mq-track span::after { color: var(--red); }
.hero .mq-track .ar, .hero .mq-track .tf { color: var(--majd); }
@media (max-width: 900px) { .hero-low { flex-direction: column; align-items: flex-start; } .mega .ln + .ln { padding-inline-start: 8vw; } }

/* chargeur */
#curtain { background: var(--maj); display: grid; place-items: center; clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--ease) .1s; }
#curtain.open { clip-path: inset(0 0 100% 0); }
#curtain svg { width: 64px; height: 64px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -120%); }
#curtain path { stroke: var(--saf); }
#curtain.open svg { transform: translate(-50%, -160%); opacity: 0; }
#count { position: absolute; left: var(--gut); bottom: 4vh; font-size: clamp(4rem, 14vw, 13rem); color: var(--cream); letter-spacing: -.04em; font-family: var(--disp); font-weight: 800; font-stretch: 75%; line-height: .8; }
.cur-l { position: absolute; right: var(--gut); bottom: 5vh; color: rgba(251, 247, 239, .7); }

/* 1 bis. la vidéo à travers les lettres */
.stage { height: 300vh; background: var(--cream); }
.stage-pin { background: var(--ink); }
.stage-win { clip-path: none !important; }
.stage-mask { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 50%; will-change: transform; }
.stage-shade { display: none; }
.stage-chip { opacity: 0; font-family: var(--disp); font-weight: 600; font-stretch: 85%; }
.stage-dots { right: 3%; }

/* séquence */
.seq-media { border-radius: 28px; }
.sn { font-family: var(--disp); font-weight: 500; font-stretch: 88%; letter-spacing: -.02em; color: rgba(15, 20, 51, .52); }
.sn b { font-family: var(--mono); color: #9f3027; }
.sn.on { color: var(--ink); }
.sn.on b { color: var(--red); }

/* sections bleu Majorelle */
.royal { color: var(--cream); background: var(--maj) !important; }
.royal::before { opacity: .22; filter: none; }
.royal .h1, .royal .h2 { color: var(--cream); }
.royal .k { color: var(--cream); }
.royal .k::before { color: var(--saf); }
.royal .lead { color: rgba(251, 247, 239, .78); }
.royal .fact { background: transparent; border: 1px solid rgba(251, 247, 239, .22); border-radius: 24px; backdrop-filter: none; }
.fact b { font: 800 clamp(4rem, 9vw, 9rem)/.9 var(--disp) !important; font-stretch: 75% !important; letter-spacing: -.05em; }
.royal .fact b { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; color: var(--saf) !important; }
.royal .fact span { color: rgba(251, 247, 239, .7); font-family: var(--mono); letter-spacing: .08em; }
.royal .dtable { background: transparent; border-color: rgba(251, 247, 239, .25); box-shadow: none; }
.royal .dh span { background: rgba(255, 255, 255, .06); color: rgba(251, 247, 239, .7); font-family: var(--mono); }
.royal .dh span:last-child { background: var(--saf); color: var(--ink); }
.royal .dr span { border-color: rgba(251, 247, 239, .14); }
.royal .dr span:first-child { color: rgba(251, 247, 239, .55); text-decoration-color: var(--red); }
.royal .dr span:last-child { background: rgba(242, 179, 61, .1); color: var(--cream); font-family: var(--disp); font-weight: 500; }

/* cartes : filets nets, pas d'ombres molles */
.cc, .mod, .sc, .jr-step, .fact, .pf-stage { box-shadow: none !important; border: 1px solid var(--line) !important; background: var(--cream2) !important; }
.royal .fact { background: transparent !important; border-color: rgba(251, 247, 239, .22) !important; }
.cc::after { background: var(--red); height: 4px; }
.cc:hover, .mod:hover, .jr-step:hover { transform: translateY(-6px); border-color: var(--ink) !important; }
.jr-step b, .ucx b { font: 800 5rem/1 var(--disp) !important; font-stretch: 75% !important; background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; color: var(--maj) !important; }
.jr-line path { stroke-width: 3; }
.si { border-radius: 50%; }
.steps b { border-color: var(--maj); color: var(--maj); font-family: var(--mono); }
.steps::before { background: var(--maj); opacity: .3; height: 1px; }
.pf-tabs button.on { background: var(--maj); box-shadow: none; }
.pf-list li { font-family: var(--disp); font-weight: 500; font-stretch: 92%; }
.pf-list li::before { font-family: var(--mono); }
.ucx { border-radius: 18px; }

/* plateforme : capture inclinée */
.plat { background: var(--cream) !important; }
.plat-shot { border-radius: 18px; box-shadow: 0 60px 120px rgba(15, 20, 51, .28), 0 0 0 1px var(--line); }

/* rayonnement */
.ray::before { background: linear-gradient(90deg, rgba(35, 55, 200, .96) 0%, rgba(35, 55, 200, .86) 42%, rgba(35, 55, 200, .1) 78%) !important; }
.ray .h1, .ray .k { color: var(--cream); }
.ray .k::before { color: var(--saf); }
.ray .lead { color: rgba(251, 247, 239, .82); }
.hosts span { background: rgba(251, 247, 239, .12); border-color: rgba(251, 247, 239, .3); color: var(--cream); }
.hosts span small { color: var(--saf); }

/* IA */
.ia-box { background: var(--cream2); border-radius: 24px; box-shadow: 0 40px 100px rgba(8, 12, 50, .45); }
.ia-head b { font-family: var(--disp); font-weight: 700; }
.ia-log .b.me { background: var(--maj); }

/* accès */
.acc.royal .acc-in { background: var(--cream2); border-radius: 28px; }
#code { border-color: var(--line); }
#code input { font-family: var(--mono); letter-spacing: .4em; }

/* pied : signature géante */
.foot { background: var(--ink) !important; color: var(--cream); padding-top: 6rem; }
.giant { margin: 0 0 3rem; font: 800 clamp(3rem, 13.5vw, 15rem)/.82 var(--disp); font-stretch: 75%; letter-spacing: -.05em; color: var(--cream); white-space: nowrap; }
.giant em { font: italic 400 .92em var(--serif); color: var(--saf); letter-spacing: -.02em; }
.foot .wm em, .foot a { color: var(--saf); }

/* curseur à fusion de couleurs */
#ring { border: 0; background: #fff; mix-blend-mode: difference; width: 14px; height: 14px; margin: -7px 0 0 -7px; color: transparent; }
#ring.big { width: 72px; height: 72px; margin: -36px 0 0 -36px; background: #fff; color: #000; }
#dot { display: none; }
#cursor { display: none; }

/* défilement des grandes bandes */
.mq-big { overflow: hidden; padding: 2.4rem 0; border-block: 1px solid var(--line); background: var(--cream); }
.mq-big .row { display: flex; gap: 3vw; white-space: nowrap; font: 800 clamp(3rem, 9vw, 9rem)/1 var(--disp); font-stretch: 75%; letter-spacing: -.04em; text-transform: uppercase; will-change: transform; }
.mq-big .row span:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.mq-big .row em { font: italic 400 .95em var(--serif); color: var(--maj); text-transform: none; }

/* modules empilés */
@media (min-width: 1001px) {
  .mods.stack { display: block; padding-top: 2rem; }
  .mods.stack .mod { position: sticky; top: 110px; display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; min-height: 62vh; margin-bottom: 4vh; border-radius: 28px; transform-origin: 50% 0; opacity: 1 !important; }
  .mods.stack .mod .mi { aspect-ratio: auto; height: 100%; min-height: 62vh; }
  .mods.stack .mod h3 { font-size: clamp(2rem, 3.4vw, 3.4rem); margin: 0 2.4rem .8rem; line-height: 1; }
  .mods.stack .mod p { font-size: 1.1rem; margin: 0 2.4rem; }
  .mods.stack .mod .txt { padding: 2rem 0; }
  .mods.stack .mod .mnum { display: block; margin: 0 2.4rem 1rem; font: 500 .8rem var(--mono); color: var(--red); letter-spacing: .1em; }
}
.mod .mnum { display: none; }

@media (prefers-reduced-motion: reduce) { .grain { animation: none; } }
html[dir=ltr] .hero .mega-ar { text-align: left !important; }

/* fond vivant en CSS (léger pour toutes les machines) : lumières safran, rouge et vert sur bleu Majorelle */
.hero { background: #1f31b8; }
.hero::before, .hero::after, .hero-glow { content: ''; position: absolute; pointer-events: none; border-radius: 50%; will-change: transform; }
.hero::before { width: 70vmax; height: 70vmax; left: -20vmax; top: -30vmax; background: radial-gradient(circle, rgba(242, 179, 61, .38), transparent 62%); animation: drift1 18s ease-in-out infinite alternate; }
.hero::after { width: 60vmax; height: 60vmax; right: -18vmax; bottom: -32vmax; background: radial-gradient(circle, rgba(210, 53, 43, .35), transparent 62%); animation: drift2 22s ease-in-out infinite alternate; }
.hero-glow { z-index: 0; width: 46vmax; height: 46vmax; left: 30%; top: 20%; background: radial-gradient(circle, rgba(11, 122, 75, .32), transparent 64%); animation: drift3 26s ease-in-out infinite alternate; }
.hero-glow.m { width: 40vmax; height: 40vmax; left: 0; top: 0; background: radial-gradient(circle, rgba(255, 214, 120, .22), transparent 60%); animation: none; transform: translate3d(calc(var(--mx, 60vw) - 20vmax), calc(var(--my, 40vh) - 20vmax), 0); transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
@keyframes drift1 { to { transform: translate3d(18vw, 22vh, 0) scale(1.15); } }
@keyframes drift2 { to { transform: translate3d(-22vw, -18vh, 0) scale(1.2); } }
@keyframes drift3 { to { transform: translate3d(-20vw, 18vh, 0) scale(.9); } }
.royaume-gl { z-index: 1 !important; }
.hero-meta, .mega, .hero-low, .gl-cap, .hero .marquee { z-index: 3; }
/* titre géant : tient aussi dans les écrans bas */
.mega { font-size: min(14vw, 23vh, 15.5rem) !important; }
.hero-meta { top: max(96px, 13vh); }
@media (max-height: 760px) { .hero-meta { display: none; } .hero-low { padding-block: 1rem; } .hero .slogan { font-size: .9rem; } }

/* ——— effets signature ——— */
/* constat : constellation */
.constat { position: relative; }
.constel { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.constat > *:not(.constel) { position: relative; z-index: 1; }
/* compteurs mécaniques */
.odo { display: inline-flex !important; overflow: hidden; height: .9em; line-height: .9 !important; }
.odc { display: inline-block; height: .9em; overflow: hidden; }
.ods { display: flex; flex-direction: column; transform: translateY(0); transition: transform 1.8s cubic-bezier(.2, .9, .1, 1); }
.ods span { display: block; height: .9em; line-height: .9; }
.odo.roll .ods { transform: translateY(calc(var(--d) * -.9em)); }
/* points chauds sur la capture */
.hots { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hot { position: absolute; transform: translate(-50%, -50%) scale(.4); opacity: 0; transition: opacity .6s, transform .8s cubic-bezier(.16, 1, .3, 1); display: flex; align-items: center; gap: .55rem; }
.hots.in .hot { opacity: 1; transform: translate(-12px, -50%) scale(1); }
.hot i { width: 16px; height: 16px; border-radius: 50%; background: var(--saf); box-shadow: 0 0 0 0 rgba(242, 179, 61, .7); animation: hotp 2s infinite; flex-shrink: 0; border: 3px solid var(--ink); }
@keyframes hotp { 70% { box-shadow: 0 0 0 16px rgba(242, 179, 61, 0); } 100% { box-shadow: 0 0 0 0 rgba(242, 179, 61, 0); } }
.hot b { font: 600 .74rem var(--mono); letter-spacing: .06em; text-transform: uppercase; background: var(--ink); color: var(--cream); padding: .4rem .65rem; border-radius: 99px; white-space: nowrap; }
@media (max-width: 760px) { .hot b { display: none; } }
/* carte des villes hôtes */
.ray-in.has-map { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.ray-in.has-map > :not(.hostmap) { grid-column: 1; }
.hostmap { grid-column: 2; grid-row: 1 / span 4; width: 100%; max-height: 74vh; overflow: visible; }
.hostmap path { fill: rgba(251, 247, 239, .06); stroke: var(--saf); stroke-width: 2; transition: stroke-dashoffset 2.6s cubic-bezier(.65, 0, .35, 1), fill 1s 2.2s; }
.hostmap.in path { stroke-dashoffset: 0 !important; fill: rgba(251, 247, 239, .12); }
.hostmap .hc { opacity: 0; transform: translateY(8px); transition: opacity .6s, transform .8s cubic-bezier(.16, 1, .3, 1); }
.hostmap.in .hc { opacity: 1; transform: none; }
.hostmap .hc circle:not(.hh) { fill: var(--saf); stroke: var(--ink); stroke-width: 2; }
.hostmap .hh { fill: rgba(242, 179, 61, .25); animation: hostp 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes hostp { from { transform: scale(.4); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.hostmap text { fill: var(--cream); font: 700 15px var(--disp); font-stretch: 85%; letter-spacing: .02em; text-transform: uppercase; }
@media (max-width: 900px) { .ray-in.has-map { grid-template-columns: 1fr; } .hostmap { grid-column: 1; grid-row: auto; max-height: 60vh; } }
/* différence : rature rouge animée */
.dr span:first-child { text-decoration: none !important; position: relative; }
.dr span:first-child::after { content: ''; position: absolute; left: 1.6rem; right: 1.6rem; top: 50%; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.65, 0, .35, 1); }
html[dir=rtl] .dr span:first-child::after { transform-origin: right; }
.dtable.striking .dr span:first-child::after { transform: scaleX(1); }
.dtable.striking .dr:nth-child(3) span:first-child::after { transition-delay: .35s; }
.dtable.striking .dr:nth-child(4) span:first-child::after { transition-delay: .7s; }
.dtable.striking .dr:nth-child(5) span:first-child::after { transition-delay: 1.05s; }
.dr span:last-child { transition: background .6s, color .6s; }
.dtable.striking .dr span:last-child { background: rgba(242, 179, 61, .18); }
/* méthode : fil qui se remplit */
.steps-fill { position: absolute; top: 1.1rem; left: 0; right: 0; height: 2px; background: var(--saf); transform-origin: left; display: block; }
html[dir=rtl] .steps-fill { transform-origin: right; }
.steps li b { transition: background .5s, color .5s, transform .6s cubic-bezier(.16, 1, .3, 1); }
.steps li.lit b { background: var(--maj); color: var(--cream); transform: scale(1.15); }
/* sommaire de chapitres */
.chap { position: fixed; z-index: 45; right: 18px; top: 50%; transform: translateY(-50%); display: grid; gap: 10px; }
.chap a { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; text-decoration: none; flex-direction: row-reverse; }
.chap i { width: 8px; height: 8px; border-radius: 50%; background: rgba(15, 20, 51, .25); transition: all .4s cubic-bezier(.16, 1, .3, 1); flex-shrink: 0; }
.chap span { font: 500 .66rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: var(--cream2); padding: .25rem .5rem; border-radius: 99px; opacity: 0; transform: translateX(8px); transition: all .35s; white-space: nowrap; pointer-events: none; }
.chap a:hover span, .chap a.on span { opacity: 1; transform: none; }
.chap a.on i { background: var(--red); height: 22px; border-radius: 6px; }
.chap.dark i { background: rgba(251, 247, 239, .4); }
.chap.dark a.on i { background: var(--saf); }
@media (max-width: 1100px) { .chap { display: none; } }
/* signature finale */
.giant .gc { display: inline-block; transform: translateY(105%); opacity: 0; transition: transform 1s cubic-bezier(.16, 1, .3, 1), opacity .6s, color .3s; }
.giant.in .gc { transform: none; opacity: 1; }
.giant.in .gc:hover { transform: translateY(-14%); color: var(--saf); transition-delay: 0s !important; }
.giant { overflow: hidden; padding-bottom: .06em; }
@media (prefers-reduced-motion: reduce) { .giant .gc, .hot, .hostmap .hc { opacity: 1; transform: none; } .ods { transition: none; } }
.fact .odo span { font: inherit; color: inherit; letter-spacing: inherit; text-transform: none; margin: 0; }
.fact .odo .odc { display: inline-block; }
.fact .odo .ods { display: flex; }
.fact .odo .ods span { display: block; }
.constel { opacity: .95; }
.chap a { position: relative; width: 22px; height: 22px; justify-content: center; flex-direction: row; }
.chap span { position: absolute; right: 26px; top: 50%; transform: translate(8px, -50%); }
.chap a:hover span { opacity: 1; transform: translate(0, -50%); }
.chap a.on span { opacity: 0; }
.chap a.on:hover span { opacity: 1; transform: translate(0, -50%); }

/* ——— Message du fondateur (vidéo) ——— */
.team { align-items: center; }
.tvid { position: relative; margin: 0; justify-self: center; height: min(78vh, 740px); aspect-ratio: 478 / 850; border-radius: 30px; overflow: hidden; background: #0f1433 url(/media/fondateur.jpg) center / cover; box-shadow: 0 40px 90px -30px rgba(15, 20, 51, .55), 0 0 0 1px rgba(15, 20, 51, .08); isolation: isolate; transform: translateZ(0); }
.tvid::before { content: ''; position: absolute; inset: -2px; border-radius: 32px; padding: 2px; background: conic-gradient(from var(--tva, 0deg), #2337c8, #f2b33d, #d2352b, #0b7a4b, #2337c8); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: 3; pointer-events: none; animation: tvspin 9s linear infinite; opacity: .9; }
@property --tva { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes tvspin { to { --tva: 360deg; } }
.tvid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .6s, transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.tvid:not(.on) video { filter: saturate(.85) contrast(1.02); transform: scale(1.04); }
.tvid::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15, 20, 51, .35), transparent 22%, transparent 55%, rgba(15, 20, 51, .78)); transition: opacity .6s; pointer-events: none; }
.tvid.on::after { opacity: .35; }
.tv-tag { position: absolute; z-index: 2; top: 18px; left: 18px; display: inline-flex; align-items: center; gap: .5rem; padding: .42rem .75rem; border-radius: 99px; background: rgba(15, 20, 51, .45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #f3ecdf; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }
.tv-tag i { width: 7px; height: 7px; border-radius: 50%; background: #d2352b; box-shadow: 0 0 0 0 rgba(210, 53, 43, .6); animation: tvrec 1.6s infinite; }
@keyframes tvrec { 70% { box-shadow: 0 0 0 8px rgba(210, 53, 43, 0); } 100% { box-shadow: 0 0 0 0 rgba(210, 53, 43, 0); } }
.tv-play { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; gap: .9rem; padding: .7rem 1rem .7rem .7rem; border: 0; border-radius: 22px; background: rgba(243, 236, 223, .9); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); color: #0f1433; text-align: start; cursor: pointer; transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .4s, background .3s; box-shadow: 0 14px 40px -12px rgba(15, 20, 51, .5); }
.tv-play:hover { transform: translateY(-3px); background: #fff; }
.tv-ic { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #2337c8; color: #fff; position: relative; }
.tv-ic::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(35, 55, 200, .35); animation: tvpulse 2.2s cubic-bezier(.2, .8, .2, 1) infinite; }
@keyframes tvpulse { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.tv-ic svg { width: 22px; height: 22px; fill: currentColor; margin-inline-start: 3px; }
.tv-tx { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.tv-tx b { font: 600 1.02rem/1.15 'Bricolage Grotesque', 'Instrument Sans', sans-serif; letter-spacing: -.01em; }
.tv-tx small { font-size: .7rem; letter-spacing: .08em; color: rgba(15, 20, 51, .62); }
.tvid.on .tv-play { opacity: 0; transform: translateY(14px); pointer-events: none; }
.tvid.on.paused .tv-play { opacity: 1; transform: none; pointer-events: auto; }
.tv-bar { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(243, 236, 223, .25); opacity: 0; transition: opacity .4s; }
.tv-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #f2b33d, #d2352b); transform-origin: left; transform: scaleX(var(--p, 0)); }
.tvid.on .tv-bar { opacity: 1; }
.tvid.on video { cursor: pointer; }
@media (max-width: 900px) { .tvid { height: auto; width: min(100%, 420px); } }
@media (prefers-reduced-motion: reduce) { .tvid::before, .tv-ic::after, .tv-tag i { animation: none; } }

/* bulle du fondateur dans le héros */
.hero .cta { flex-wrap: wrap; align-items: center; }
.vf-go { display: inline-flex; align-items: center; gap: .75rem; padding: .35rem 1.1rem .35rem .35rem; border-radius: 99px; color: #f3ecdf; text-decoration: none; background: rgba(15, 20, 51, .28); box-shadow: inset 0 0 0 1px rgba(243, 236, 223, .22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .3s, transform .4s; }
.vf-go:hover { background: rgba(15, 20, 51, .45); }
.vf-th { width: 46px; height: 46px; border-radius: 50%; flex: none; background: url(/media/fondateur.jpg) center 22% / cover; box-shadow: 0 0 0 2px #f2b33d, 0 0 0 0 rgba(242, 179, 61, .55); animation: vfring 2.4s infinite; }
@keyframes vfring { 70% { box-shadow: 0 0 0 2px #f2b33d, 0 0 0 12px rgba(242, 179, 61, 0); } 100% { box-shadow: 0 0 0 2px #f2b33d, 0 0 0 0 rgba(242, 179, 61, 0); } }
.vf-tx { display: flex; flex-direction: column; line-height: 1.15; }
.vf-tx b { font: 600 .9rem 'Bricolage Grotesque', 'Instrument Sans', sans-serif; }
.vf-tx small { font-size: .66rem; letter-spacing: .1em; opacity: .7; }

/* ——— Le Royaume vu du ciel ——— */
.vol { position: relative; height: 1150vh; background: #ddd0b8; }
.vol-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.vol-map { position: absolute; inset: 0; opacity: 0; transform: scale(1.06); transition: opacity 1.4s, transform 2.4s cubic-bezier(.16, 1, .3, 1); background: radial-gradient(120% 90% at 50% 40%, #e8dcc4, #c9b994); }
.vol.ready .vol-map { opacity: 1; transform: none; }
.vol.nogl .vol-map { opacity: 1; transform: none; background: radial-gradient(120% 90% at 30% 30%, #3346d6, #121c66); }
.vol .vol-map, .vol .vol-map.maplibregl-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.vol .maplibregl-ctrl-attrib { font-size: 10px; opacity: .6; }
.vol-shade { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(180deg, var(--cream, #f3ecdf) 0, rgba(243, 236, 223, 0) 18%),
  linear-gradient(0deg, rgba(15, 20, 51, .82) 0, rgba(15, 20, 51, .45) 30%, rgba(15, 20, 51, 0) 58%),
  radial-gradient(130% 100% at 50% 50%, transparent 60%, rgba(15, 20, 51, .28)); }
.vol-intro { position: absolute; z-index: 3; top: 0; bottom: 0; left: 0; width: min(62vw, 900px); display: flex; flex-direction: column; justify-content: center; text-align: start; padding: 0 var(--gut, 24px); background: linear-gradient(90deg, rgba(243, 236, 223, .92) 30%, rgba(243, 236, 223, 0)); padding-inline-end: 12vw; transition: opacity .8s, transform 1s cubic-bezier(.16, 1, .3, 1); pointer-events: none; }
.vol-intro.gone { opacity: 0; transform: translateX(-60px); }
.vol:not(.flying) .vc { opacity: 0; }
html[dir=rtl] .vol-intro { left: auto; right: 0; background: linear-gradient(270deg, rgba(243, 236, 223, .92) 30%, rgba(243, 236, 223, 0)); }
@media (max-width: 760px) { .vol-intro { width: 100%; justify-content: flex-start; padding-top: 18vh; background: linear-gradient(180deg, rgba(243, 236, 223, .95) 40%, rgba(243, 236, 223, 0)); height: 70%; } }
.vi-k { color: #2337c8; letter-spacing: .2em; text-transform: uppercase; font-size: .74rem; margin: 0 0 1rem; }
.vi-t { margin: 0; max-width: 13ch; font: 800 clamp(2.6rem, 7vw, 6.6rem)/.92 'Bricolage Grotesque', sans-serif; font-stretch: 78%; letter-spacing: -.035em; color: #0f1433; text-wrap: balance; }
.vi-hint { margin-top: 1.4rem; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: #0f1433; opacity: .7; animation: vihint 2.4s ease-in-out infinite; }
@keyframes vihint { 50% { transform: translateY(6px); opacity: .4; } }
.vc { transition: opacity .5s; position: absolute; z-index: 3; left: var(--gut, 24px); bottom: 15vh; max-width: min(720px, 86vw); color: #f3ecdf; pointer-events: none; }
html[dir=rtl] .vc { left: auto; right: var(--gut, 24px); }
html[dir=rtl] .vc-ar { text-align: right; }
.vc-idx { margin: 0 0 .4rem; font-size: .76rem; letter-spacing: .22em; color: #f2b33d; opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .7s cubic-bezier(.16, 1, .3, 1); }
.vc-name { margin: 0; font: 800 clamp(3.4rem, 10.5vw, 10.5rem)/.86 'Bricolage Grotesque', sans-serif; font-stretch: 75%; letter-spacing: -.045em; text-shadow: 0 10px 50px rgba(15, 20, 51, .45); overflow: hidden; padding-bottom: .06em; white-space: nowrap; }
.vc-name span { display: inline-block; transform: translateY(105%) rotate(6deg); transition: transform .9s cubic-bezier(.16, 1, .3, 1) var(--d, 0ms); }
.vc-wc[hidden] { display: none; }
.vc-ar { unicode-bidi: plaintext; text-align: left; margin: .5rem 0 0; font: 500 clamp(1.1rem, 2vw, 1.6rem) 'Noto Naskh Arabic', 'Amiri', serif; color: #f2b33d; opacity: 0; transition: opacity .8s .25s; text-align: start; }
.vc-tag { margin: .8rem 0 0; max-width: 46ch; font: 400 clamp(1rem, 1.5vw, 1.25rem)/1.45 'Instrument Sans', sans-serif; opacity: 0; transform: translateY(14px); transition: opacity .7s .3s, transform .9s cubic-bezier(.16, 1, .3, 1) .3s; text-shadow: 0 2px 18px rgba(15, 20, 51, .6); }
.vc-wc { display: inline-flex; align-items: center; gap: .55rem; margin: 1rem 0 0; padding: .45rem .85rem; border-radius: 99px; background: #f2b33d; color: #0f1433; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; opacity: 0; transform: scale(.9); transition: opacity .5s .45s, transform .7s cubic-bezier(.34, 1.56, .64, 1) .45s; }
.vc-wc i { width: 7px; height: 7px; border-radius: 50%; background: #d2352b; }
.vc.in .vc-idx, .vc.in .vc-ar, .vc.in .vc-tag { opacity: 1; transform: none; }
.vc.in .vc-wc { opacity: 1; transform: none; }
.vc.in .vc-name span { transform: none; }
.vc.big { bottom: auto; top: 50%; left: 50%; transform: translate(-50%, -10%); text-align: center; max-width: 900px; }
.vc.big .vc-tag { margin-inline: auto; font: 500 clamp(1.3rem, 2.6vw, 2.3rem)/1.25 'Instrument Serif', serif; font-style: italic; max-width: 30ch; color: #0f1433; text-shadow: 0 1px 24px rgba(243, 236, 223, .9); }
html[dir=rtl] .vc.big { right: auto; }
.vol-hud { position: absolute; z-index: 3; right: var(--gut, 24px); top: 92px; margin: 0; padding: .45rem .75rem; border-radius: 8px; background: rgba(15, 20, 51, .5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #f3ecdf; font-size: .7rem; letter-spacing: .08em; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .6s; }
.vol.ready .vol-hud { opacity: calc(min(1, var(--vp, 0) * 40)); }
.vol-rail { position: absolute; z-index: 3; left: var(--gut, 24px); right: var(--gut, 24px); bottom: 4.2vh; display: flex; justify-content: space-between; gap: .3rem; }
.vol-rail button { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; padding: .3rem 0 0; border: 0; background: none; color: rgba(243, 236, 223, .62); font: 500 .68rem 'Geist Mono', monospace; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: color .3s; }
.vol-rail button i { width: 9px; height: 9px; border-radius: 50%; background: rgba(243, 236, 223, .5); box-shadow: 0 0 0 0 rgba(242, 179, 61, .6); transition: background .3s, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.vol-rail button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.vol-rail button:hover, .vol-rail button.on { color: #fff; }
.vol-rail button.on i { background: #f2b33d; transform: scale(1.6); animation: tvrec 1.6s infinite; }
.vol-bar { position: absolute; z-index: 3; left: var(--gut, 24px); right: var(--gut, 24px); bottom: calc(4.2vh + 4px); height: 1px; background: rgba(243, 236, 223, .25); pointer-events: none; }
.vol-bar i { display: block; height: 100%; background: linear-gradient(90deg, #f2b33d, #d2352b); transform-origin: left; transform: scaleX(var(--vp, 0)); }
html[dir=rtl] .vol-bar i { transform-origin: right; }
.vol-rail { bottom: calc(4.2vh - .3rem); }
@media (max-width: 760px) {
  .vol { height: 900vh; }
  .vol-rail span { display: none; } .vol-rail button.on span { display: block; position: absolute; bottom: 1.4rem; }
  .vol-rail button { position: relative; align-items: center; }
  .vol-hud { top: auto; bottom: 9vh; right: auto; left: var(--gut, 16px); font-size: .62rem; }
  .vc { bottom: 17vh; }
}
@media (prefers-reduced-motion: reduce) { .vc-name span { transition: none; } .vi-hint { animation: none; } }

/* ——— menu mobile ——— */
.burger { display: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: rgba(15, 20, 51, .08); place-items: center; align-content: center; gap: 6px; cursor: pointer; margin-inline-start: .4rem; position: relative; z-index: 62; }
.burger i { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
#nav:not(.solid) .burger { color: #fbf7ef; background: rgba(255, 255, 255, .12); }
#nav.solid .burger, body.menu-open .burger { color: #0f1433; }
.burger[aria-expanded="true"] i:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] i:last-child { transform: translateY(-4px) rotate(-45deg); }
.burger:focus-visible { outline: 3px solid #f2b33d; outline-offset: 2px; }
@media (max-width: 1080px) { .burger { display: grid; } }
@media (max-width: 520px) { #nav > .btn.gold { display: none; } }
.menu { position: fixed; inset: 0; z-index: 61; background: rgba(243, 236, 223, .97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .35s; }
.menu.on { opacity: 1; }
.menu nav { display: flex; flex-direction: column; gap: .4rem; width: min(420px, 86vw); }
.menu nav a { display: block; padding: .9rem 0; border-bottom: 1px solid rgba(15, 20, 51, .1); color: #0f1433; text-decoration: none; font: 700 clamp(1.4rem, 6vw, 2rem) 'Bricolage Grotesque', sans-serif; font-stretch: 85%; letter-spacing: -.02em; text-transform: none; opacity: 0; transform: translateY(14px); transition: opacity .4s calc(var(--i) * 40ms + 80ms), transform .6s cubic-bezier(.16, 1, .3, 1) calc(var(--i) * 40ms + 80ms); }
.menu.on nav a { opacity: 1; transform: none; }
.menu nav a.m-cta { margin-top: 1rem; border: 0; text-align: center; border-radius: 99px; background: #f2b33d; padding: 1rem; font-size: 1.1rem; }
.menu nav a:focus-visible { outline: 3px solid #2337c8; outline-offset: 4px; }
body.menu-open { overflow: hidden; }
body.menu-open #nav { z-index: 70; }

/* ——— correctifs mobile (audit) : rien ne doit dépasser l'écran ——— */
@media (max-width: 900px) { .ia-in { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; } .ia-in > * { min-width: 0; } }
@media (max-width: 560px) {
  #nav { gap: .5rem; padding: 0 .4rem 0 .7rem; left: 10px; right: 10px; }
  #nav .wm b { font-size: .7rem; letter-spacing: .08em; }
  #nav .sel select { max-width: 104px; font-size: .78rem; padding-inline: .5rem 1.4rem; }
  #nav .brand { min-width: 0; flex-shrink: 1; overflow: hidden; }
}
@media (max-width: 360px) { #nav .wm em { display: none; } #nav .sel select { max-width: 86px; } }
/* aucun défilement horizontal parasite, sur aucun appareil (la découpe « clip » ne casse pas les sections épinglées) */
html, body { overflow-x: clip; }
.uses, .uses-pin { overflow-x: clip; }
@media (max-width: 560px) {
  .acc { padding: 4rem 12px; }
  .acc-in { width: 100%; min-width: 0; padding: 2.4rem 1.1rem; border-radius: 26px; }
  .acc .h1 { font-size: clamp(2rem, 10vw, 3rem); overflow-wrap: anywhere; }
  #code { flex-wrap: wrap; border-radius: 22px; }
  #code input { flex: 1 1 100%; height: 52px; letter-spacing: .25em; }
  #code .btn { width: 100%; justify-content: center; }
  .acc .link { overflow-wrap: anywhere; text-align: center; }
}
.steps li.steps-fill { position: absolute; padding: 0; margin: 0; list-style: none; }