/* Les commentaires de cette feuille sont dans TEASER-NOTES.md (non servi). */

@font-face { font-family: 'Space Grotesk'; src: url(/assets/fonts/space-grotesk-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url(/assets/fonts/space-grotesk-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Inter'; src: url(/assets/fonts/inter-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url(/assets/fonts/inter-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url(/assets/fonts/jetbrains-mono-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url(/assets/fonts/jetbrains-mono-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }

:root {
  color-scheme: dark;
  --nuit: #0B1120; --chaud: #1A1208;
  --or: #E8C15A; --or-clair: #FFF6CC; --or-fonce: #C6871A; --sur-or: #0C0C0F; --encre: #0C0C0F;
  --t1: #FFFFFF; --t2: rgba(255,255,255,.9); --t3: rgba(255,255,255,.82);
  --voix: 'Space Grotesk', system-ui, sans-serif;
  --texte: 'Inter', system-ui, sans-serif;
  --frappe: 'JetBrains Mono', ui-monospace, monospace;
  --gout: 20px;
  --or-feuille: linear-gradient(176deg, #FFF6CC 0%, #F1D68A 30%, #E8C15A 52%, #C6871A 100%);
  --ombre: 0 1px 12px rgba(0,0,0,.35);
  --v: 10,8,6;
  --rayon: 16px;
  --encre-page: #FFFFFF; --lib-page: rgba(255,255,255,.8);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--chaud); }
body {
  margin: 0; background: var(--chaud); color: var(--t1);
  font: 400 16px/1.5 var(--texte);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
sup { font-size: .62em; line-height: 0; vertical-align: .5em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
.evitement { position: fixed; left: 12px; top: -80px; z-index: 90; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--or); color: var(--sur-or); font: 700 15px/1 var(--voix); }
.evitement:focus { top: 12px; }

.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.entete {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 60px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(var(--gout) - 10px); pointer-events: none;
}
.entete::before { content: ""; position: absolute; inset: 0 0 -14px; z-index: -1; opacity: 0; transition: opacity .2s ease;
  background: linear-gradient(180deg, rgba(var(--v),.5) 0%, rgba(var(--v),.36) 55%, rgba(var(--v),.12) 82%, rgba(var(--v),0) 100%); }
.entete.defile::before { opacity: 1; }
.marque, .langues, .pause { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.marque { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; pointer-events: auto; text-shadow: var(--ombre); border-radius: 999px; background: rgba(var(--v),.84); }
.marque b { font: 700 15px/1 var(--voix); letter-spacing: .36em; color: #fff; }
.marque svg { width: 10px; height: 17px; display: block; filter: drop-shadow(0 1px 6px rgba(0,0,0,.4)); }
.outils { display: flex; align-items: center; pointer-events: auto; }
.langues { display: flex; align-items: center; border-radius: 999px; background: rgba(var(--v),.84); margin-right: 6px; }
.langues button {
  min-width: 44px; height: 44px; padding: 0 6px; border: 0; background: none; cursor: pointer;
  font: 700 12px/1 var(--frappe); letter-spacing: .14em; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.langues button[aria-pressed="true"] { color: var(--or); }
.langues i { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.7); }
.pause {
  width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: rgba(var(--v),.84); color: #fff;
}
.pause svg { width: 14px; height: 14px; }
.pause .i-lecture, .pause[aria-pressed="true"] .i-pause { display: none; }
.pause[aria-pressed="true"] .i-lecture { display: block; }

.rail { display: none; }

.ecran { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; overflow: clip; isolation: isolate; view-timeline: --ecran block; }
.ecran { --fondu: clamp(40px, 7vh, 84px); --fondu-teinte: 88,71,52; }
.ecran:not(#accueil)::before, .ecran:not(#vision)::after { content: ""; position: absolute; left: 0; right: 0; height: var(--fondu); z-index: -1; pointer-events: none; }
.ecran:not(#accueil)::before { top: 0; background: linear-gradient(180deg, rgb(var(--fondu-teinte)) 0%, rgba(var(--fondu-teinte),.62) 14%, rgba(var(--fondu-teinte),.32) 32%, rgba(var(--fondu-teinte),.12) 56%, rgba(var(--fondu-teinte),0) 84%); }
.ecran:not(#vision)::after { bottom: 0; background: linear-gradient(0deg, rgb(var(--fondu-teinte)) 0%, rgba(var(--fondu-teinte),.62) 14%, rgba(var(--fondu-teinte),.32) 32%, rgba(var(--fondu-teinte),.12) 56%, rgba(var(--fondu-teinte),0) 84%); }
.fond { position: absolute; inset: -26px 0; z-index: -2; background: var(--chaud); will-change: transform; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.pose) .ecran > .fond { animation: profondeur linear both; animation-timeline: --ecran; }
  }
}
@keyframes profondeur { from { transform: translate3d(0, 24px, 0); } to { transform: translate3d(0, -24px, 0); } }
.fond video, .fond img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fond img[data-src]:not([src]) { visibility: hidden; }
.voile { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.pc-seul { display: none !important; }
.fond img { animation: respire 14s ease-in-out infinite alternate; transform-origin: 50% 40%; }
@keyframes respire { from { transform: scale(1); } to { transform: scale(1.06); } }
.fond .fond-monde, .fond .fond-page { opacity: 0; transition: opacity .6s ease; }
.fond .fond-monde.on, .fond .fond-page.on { opacity: 1; }

.surtitre { margin: 0; display: inline-flex; align-items: center; gap: 10px; font: 700 12px/1.3 var(--frappe); letter-spacing: .14em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.55); }
.surtitre::before { content: ""; flex: none; width: 18px; height: 2px; border-radius: 1px; background: var(--or); box-shadow: 0 1px 6px rgba(0,0,0,.35); }
.t-xxl { margin: 0; font: 700 clamp(44px, 11.6vw, 150px)/.93 var(--voix); letter-spacing: -.038em; text-wrap: balance; text-shadow: var(--ombre); }
.t-xl { margin: 0; font: 700 clamp(38px, 10vw, 92px)/.96 var(--voix); letter-spacing: -.034em; text-wrap: balance; text-shadow: var(--ombre); }
.t-l  { margin: 0; font: 700 clamp(30px, 7.8vw, 60px)/1.02 var(--voix); letter-spacing: -.028em; text-wrap: balance; text-shadow: var(--ombre); }
.t-m  { margin: 0; font: 700 clamp(28px, 7vw, 48px)/1.04 var(--voix); letter-spacing: -.022em; text-wrap: balance; text-shadow: var(--ombre); }
.or-feuille { font-style: normal; background: var(--or-feuille); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 1px 10px rgba(0,0,0,.35)); }
.chapo { margin: 0; font: 600 17px/1.4 var(--texte); color: #fff; text-wrap: balance; text-shadow: var(--ombre); }
.micro { margin: 0; font: 400 13px/1.45 var(--texte); color: var(--t2); text-shadow: var(--ombre); }
.sous-titre { margin: 0; font: 400 15px/1.45 var(--texte); color: #fff; text-wrap: balance; text-shadow: var(--ombre); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 28px; border-radius: 999px; border: 0; cursor: pointer;
  font: 700 16px/1 var(--voix); letter-spacing: .005em; white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; }
.btn-or {
  color: var(--sur-or);
  background: linear-gradient(180deg, #F6DA8C 0%, #E8C15A 48%, #D4A23E 100%);
  box-shadow: inset 0 0 0 1px rgba(60,40,6,.45), inset 0 1px 0 rgba(255,255,255,.55), 0 8px 24px rgba(0,0,0,.25);
}
.btn-blanc { color: var(--encre); background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.22); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: default; }

.carte-boite { --s: 1; position: relative; width: calc(320px * var(--s)); height: calc(448px * var(--s)); flex: none; }
.carte-boite > .kc-scene { position: absolute; left: 0; top: 0; --l: 320px !important; transform: scale(var(--s)); transform-origin: 0 0; }
.kc-scene.pseudo-fantome .kc-nom b { opacity: .42; }
.kc-case.flash .kc-val { color: var(--or-clair); text-shadow: 0 0 14px rgba(232,193,90,.9); transition: color .2s, text-shadow .2s; }
.kc-case .kc-val { transition: color .9s, text-shadow .9s; }
.kc-grand b { transition: filter .2s ease-out; }
.kc-grand.bouge b { filter: drop-shadow(0 0 14px rgba(232,193,90,.85)); transition: filter .15s; }
.kc-gain { position: absolute; left: 114px; top: 34px; z-index: 6; pointer-events: none; opacity: 0; white-space: nowrap;
  font: 700 30px/1 var(--voix); letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--or-clair);
  text-shadow: 0 0 2px rgba(0,0,0,.95), 0 2px 8px rgba(0,0,0,.85), 0 0 22px rgba(232,193,90,.75); }
.kc-gain.vole { animation: kcGain 850ms cubic-bezier(.2,.75,.25,1) both; }
@keyframes kcGain { 0% { opacity: 0; transform: translateY(14px) scale(.72); } 16% { opacity: 1; transform: translateY(0) scale(1.06); }
  30% { transform: translateY(-14px) scale(1); } 72% { opacity: 1; } 100% { opacity: 0; transform: translateY(-82px) scale(.96); } }
.kc-card.eclat .kc-reflet { background: linear-gradient(104deg, transparent 30%, rgba(255,246,204,.42) 46%, rgba(232,193,90,.3) 54%, transparent 70%); animation: kcEclat 700ms cubic-bezier(.3,.6,.3,1) 1; }
@keyframes kcEclat { 0% { opacity: 0; transform: translateX(-115%); } 14% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; transform: translateX(115%); } }
.kc-scene.apparait .kc-flip { animation: apparait-carte .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes apparait-carte { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }

.e1 .voile { background: radial-gradient(78% 9% at 30% 68%, rgba(var(--v),.5) 0%, rgba(var(--v),.3) 60%, rgba(var(--v),0) 100%), linear-gradient(180deg, rgba(var(--v),.3) 0%, rgba(var(--v),0) 12%, rgba(var(--v),0) 54%, rgba(var(--v),.3) 66%, rgba(var(--v),.4) 100%); }
.e1 .contenu { position: absolute; left: var(--gout); right: var(--gout); bottom: max(30px, env(safe-area-inset-bottom)); display: grid; gap: 16px; justify-items: start; }
.e1 .contenu::before { content: ""; position: absolute; inset: -46px calc(-1 * var(--gout)) -36px; z-index: -1; background: linear-gradient(180deg, rgba(12,12,15,0) 0%, rgba(12,12,15,.78) 14%, rgba(12,12,15,.88) 72%, rgba(12,12,15,.72) 100%); pointer-events: none; }
.e1 .t-xxl { font-size: clamp(30px, 8.8vw, 72px); line-height: 1.02; }
.e1 .chapo { margin-top: -2px; max-width: 62ch; text-wrap: pretty; }
.e1 .ligne-cta { display: grid; gap: 12px; justify-items: start; margin-top: 4px; }

.e2 .fond video { object-position: 50% 30%; }
.e2 .voile { background: linear-gradient(180deg, rgba(var(--v),.66) 0%, rgba(var(--v),.62) 40%, rgba(var(--v),.3) 50%, rgba(var(--v),.06) 60%, rgba(var(--v),.12) 100%); }
.e2 .contenu { padding: 88px var(--gout) 28px; display: grid; gap: 0; }
.e2 .phrase { margin: 16px 0 0; font: 700 clamp(31px, 8.5vw, 72px)/1.04 var(--voix); letter-spacing: -.03em; text-shadow: var(--ombre); }
html[lang="en"] .e2 .phrase { text-wrap: balance; }
.e2 .phrase .mot { opacity: var(--o, .16); transition: opacity .35s ease; }
.e2 .phrase-or { margin: 12px 0 0; font: 700 clamp(24px, 6.4vw, 48px)/1.05 var(--voix); letter-spacing: -.025em; opacity: var(--o, .16); transition: opacity .35s ease; }
.e2 .phrase-vrai { margin: 14px 0 0; max-width: 560px; font: 600 17px/1.42 var(--texte); color: #fff; text-wrap: balance; text-shadow: var(--ombre); opacity: var(--o, .16); transition: opacity .35s ease; }
.e2 .app { margin: 28px 0 12px; }
.portes { list-style: none; margin: 0 calc(-1 * var(--gout)); padding: 0; display: grid; gap: 6px; background: var(--nuit); }
.portes li { display: block; }
.porte {
  position: relative; width: 100%; height: 118px; overflow: hidden; display: flex; align-items: center; text-align: left;
  padding: 0 64px 0 calc(var(--gout) + 2px); cursor: pointer; isolation: isolate; border: 0; background: var(--chaud); color: #fff;
}
.porte picture, .porte .photo { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.porte .photo { transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.porte:hover .photo, .porte:focus-visible .photo { transform: scale(1.05); }
.porte::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(var(--v),.66) 0%, rgba(var(--v),.5) 40%, rgba(var(--v),0) 62%); }
.porte .texte { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 10px; min-width: min-content; max-width: 58%; }
.porte .nom { justify-self: start; padding: 6px 10px 5px; border-radius: 4px; font: 700 22px/1 var(--voix); letter-spacing: .02em; color: var(--sur-acc); background: var(--acc); box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.porte .ligne { grid-column: 1 / -1; margin-top: 9px; font: 400 14.5px/1.32 var(--texte); color: #fff; text-wrap: balance; text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.porte .ligne b { font-weight: 600; }
.porte .entrer {
  position: absolute; right: 16px; top: 50%; margin-top: -22px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: var(--encre); background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.3);
}
.porte .entrer svg { width: 16px; height: 16px; }
.porte [data-logo] { width: 32px; height: 32px; }
[data-monde="match"]   { --acc: #E11D2E; --sur-acc: #FFFFFF; }
[data-monde="footing"] { --acc: #FF963C; --sur-acc: #0C0C0F; }
[data-monde="gym"]     { --acc: #96ACCD; --sur-acc: #0C0C0F; }
[data-monde="play"]    { --acc: #6080FF; --sur-acc: #0C0C0F; }

.cinema { position: fixed; inset: 0; z-index: 70; overflow: hidden; isolation: isolate; background: var(--chaud); }
.cinema[hidden] { display: none; }
.cinema:focus, main:focus { outline: none; }
.cinema.on { animation: cine-ouvre .5s cubic-bezier(.2,.8,.2,1); }
.cinema.eteint > * { opacity: 0; transition: opacity .26s ease-in; }
.cinema.sort { opacity: 0; transition: opacity .3s ease-out; }
.cinema.sort > *, .net .fond-monde { transition: none; }
.net { scroll-behavior: auto; }
@keyframes cine-ouvre { from { clip-path: inset(var(--ct, 40%) var(--cd, 0) var(--cb, 40%) var(--cg, 0) round 16px); } to { clip-path: inset(0 round 0); } }
.cinema video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.cinema-voile { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(var(--v),.4) 0%, rgba(var(--v),0) 16%, rgba(var(--v),0) 62%, rgba(var(--v),.55) 100%); }
.cinema-haut { position: absolute; left: 0; right: 0; top: 0; padding: max(14px, env(safe-area-inset-top)) var(--gout) 0; display: flex; align-items: center; justify-content: space-between; }
.cinema-haut [data-logo] { width: 36px; height: 36px; margin-right: 10px; }
.cinema-haut .plaque-monde { margin-right: auto; }
.plaque-monde { display: inline-block; padding: 7px 12px 6px; border-radius: 4px; font: 700 24px/1 var(--voix); letter-spacing: .02em; color: var(--sur-acc); background: var(--acc); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.cinema .fermer { width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; color: var(--encre); background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.cinema .fermer svg { width: 16px; height: 16px; }
.cinema-bas { position: absolute; left: var(--gout); right: var(--gout); bottom: max(34px, env(safe-area-inset-bottom)); display: grid; gap: 16px; justify-items: start; }
.cinema-ligne { margin: 0; max-width: 520px; font: 700 clamp(22px, 6vw, 40px)/1.12 var(--voix); letter-spacing: -.02em; color: #fff; text-shadow: var(--ombre); }
.cinema-ligne b { font-weight: 700; }
.cinema-progres { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.25); }
.cinema-progres i { display: block; height: 100%; background: var(--or); transform-origin: 0 50%; transform: scaleX(var(--progres, 0)); }

.e3 .voile { background: radial-gradient(90% 15% at 50% 8%, rgba(var(--v),.58) 0%, rgba(var(--v),.3) 60%, rgba(var(--v),0) 100%), linear-gradient(180deg, rgba(var(--v),.3) 0%, rgba(var(--v),0) 20%, rgba(var(--v),0) 66%, rgba(var(--v),.26) 100%); }
.e3 .contenu { min-height: 100vh; min-height: 100svh; padding: 64px 10px 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.e3 .tete { display: grid; gap: 6px; justify-items: center; text-align: center; }
.e3 .t-l { font-size: clamp(26px, 7vw, 56px); }
.e3 .tete .sous-titre { display: none; }
.telephone {
  position: relative; width: 100%; max-width: 400px; padding: 8px 10px 10px; border-radius: 30px; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: rgba(var(--v),.16); box-shadow: inset 0 0 0 2px var(--acc), 0 24px 60px rgba(0,0,0,.3);
  transition: box-shadow .5s ease;
}
.app-barre { width: 100%; height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 10px; border-radius: 17px; background: rgba(12,12,15,.5); }
.app-logo { display: inline-flex; align-items: center; gap: 5px; }
.app-logo b { font: 700 13px/1 var(--voix); letter-spacing: .26em; color: #fff; text-shadow: var(--ombre); }
.app-logo svg { width: 9px; height: 15px; }
.app-monde { padding: 5px 9px 4px; border-radius: 4px; font: 700 12px/1 var(--voix); letter-spacing: .1em; color: var(--sur-acc); background: var(--acc); }
.app-sim { margin-left: auto; padding: 5px 9px; border-radius: 999px; font: 700 10.5px/1 var(--frappe); letter-spacing: .12em; text-transform: uppercase; color: var(--encre); background: var(--or); }
.app-onglets { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 20px; background: rgba(12,12,15,.54); }
.app-onglets button { position: relative; min-height: 46px; border: 0; border-radius: 16px; cursor: pointer; display: grid; place-items: center; gap: 2px; padding: 4px 2px;
  font: 700 11.5px/1 var(--voix); letter-spacing: .08em; color: #fff; background: none; transition: background .25s, color .25s; }
.app-onglets button[aria-selected="true"] { color: var(--encre); background: var(--or); }
.rideau { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; background: var(--acc); clip-path: circle(0 at var(--rx, 50%) var(--ry, 100%)); }
.rideau.joue { animation: rideau .6s cubic-bezier(.3,.7,.3,1); }
@keyframes rideau { 0% { opacity: .9; clip-path: circle(0 at var(--rx, 50%) var(--ry, 100%)); } 55% { opacity: .8; clip-path: circle(140% at var(--rx, 50%) var(--ry, 100%)); } 100% { opacity: 0; clip-path: circle(140% at var(--rx, 50%) var(--ry, 100%)); } }
.e3 .cote { position: relative; width: 100%; max-width: 400px; margin-top: 4px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.e3 .cote::before { content: ""; position: absolute; inset: -16px -10px; z-index: -1; background: linear-gradient(180deg, rgba(var(--v),0) 0, rgba(var(--v),.5) 14px, rgba(var(--v),.5) calc(100% - 14px), rgba(var(--v),0) 100%); }
.e3 .verite { margin: 0; font: 600 16px/1.4 var(--texte); color: #fff; text-wrap: balance; text-shadow: var(--ombre); }
.gestes { order: 3; list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.gestes li { display: flex; align-items: center; gap: 10px; font: 600 14.5px/1.35 var(--texte); color: #fff; text-shadow: var(--ombre); }
.gestes li b { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 13px/1 var(--voix); color: var(--sur-acc); background: var(--acc); text-shadow: none; }
.sim { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sim .btn { min-height: 50px; padding: 0 22px; font-size: 15px; }
.sim .btn[hidden] { display: none; }
.sim .etat { position: relative; margin: 0; min-height: 3.2em; max-width: 340px; font: 700 11px/1.4 var(--frappe); letter-spacing: .14em; color: #fff; text-transform: uppercase; text-align: center; text-shadow: var(--ombre); }
.sim .etat b { display: block; margin-top: 4px; font: 400 14px/1.4 var(--texte); letter-spacing: 0; text-transform: none; color: #fff; text-wrap: balance; }
.sim .recommencer.cache { visibility: hidden; }
#app:not([data-monde="match"]) .seul-match { visibility: hidden; }
#app.sim-arrivee .pips, #app.sim-arrivee .vivante { visibility: hidden; }
.pips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: -2px; max-width: 340px; }
.pips i { width: 26px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.28); transition: background .3s, transform .3s; }
.pips i.on { background: var(--or); transform: scaleY(1.25); }
.pips-dit { flex: 0 0 100%; margin: 2px 0 0; font: 600 13px/1.35 var(--texte); color: #fff; text-align: center; text-shadow: var(--ombre); text-wrap: balance; }
.vivante { order: 4; width: 100%; max-width: 340px; display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: rgba(12,12,15,.44); text-align: left; }
.vivante p { margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.vivante .lib { font: 700 10.5px/1.2 var(--frappe); letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.vivante-l1 b { font: 700 26px/1 var(--voix); color: var(--or); }
.vivante-barre { height: 6px; border-radius: 3px; background: rgba(255,255,255,.2); overflow: hidden; }
.vivante-barre i { display: block; height: 100%; width: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--acc), var(--or)); transform-origin: 0 50%; transform: scaleX(calc(var(--n, 65) / 100)); transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.autour { order: 5; width: 100%; max-width: 340px; padding: 10px 14px 6px; border-radius: 14px; background: rgba(12,12,15,.44); text-align: left; }
.autour-tete { margin: 0 0 4px; display: flex; align-items: center; justify-content: space-between; font: 700 10.5px/1.2 var(--frappe); letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.autour-tete em { font-style: normal; padding: 3px 8px; border-radius: 999px; color: var(--encre); background: #fff; letter-spacing: .1em; }
.autour ul { list-style: none; margin: 0; padding: 0; }
.autour li { display: flex; align-items: center; gap: 10px; min-height: 40px; border-top: 1px solid rgba(255,255,255,.12); font: 600 14px/1.3 var(--texte); color: #fff; }
.autour li:first-child { border-top: 0; }
.autour li i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); }
.autour li span { flex: 1; }
.autour li em { font: 700 12px/1 var(--voix); font-style: normal; padding: 6px 11px; border-radius: 999px; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); }
.autour li em.ouvert { color: var(--encre); background: var(--or); box-shadow: none; }
.sim .recommencer { min-height: 44px; border: 0; background: none; color: #fff; font: 700 12px/1 var(--frappe); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-shadow: var(--ombre); }

.avatar-choix { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.avatar-choix .genre { display: flex; padding: 3px; border-radius: 999px; background: rgba(12,12,15,.44); }
.avatar-choix .genre button { min-width: 54px; height: 44px; padding: 0 12px; border: 0; border-radius: 999px; cursor: pointer; font: 700 14px/1 var(--voix); color: #fff; background: none; }
.avatar-choix .genre button[aria-checked="true"] { color: var(--encre); background: #fff; }
.avatar-choix .visages { display: flex; gap: 8px; }
.avatar-choix .visages button { width: 50px; height: 50px; padding: 0; border: 0; border-radius: 50%; overflow: hidden; cursor: pointer; background: var(--chaud);
  box-shadow: 0 0 0 2px rgba(255,255,255,.75), 0 4px 12px rgba(0,0,0,.3); transition: transform .2s, box-shadow .2s; }
.avatar-choix .visages button img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.avatar-choix .visages button[aria-checked="true"] { box-shadow: 0 0 0 3px var(--or), 0 4px 14px rgba(0,0,0,.35); transform: scale(1.08); }
.avatar-choix[data-choix="app"] { gap: 6px; flex-wrap: nowrap; }
.avatar-choix[data-choix="app"] .choix-lib { flex: none; width: auto; padding: 5px 6px; border-radius: 10px; background: rgba(12,12,15,.78); font-size: 9.5px; line-height: 1.2; letter-spacing: .08em; text-align: center; max-width: 50px; }
.avatar-choix[data-choix="app"] .genre button { min-width: 46px; padding: 0 9px; }
.avatar-choix[data-choix="app"] .visages { gap: 6px; }
.avatar-choix[data-choix="app"] .visages button { width: 46px; height: 46px; }
.avatar-choix .choix-lib { flex-basis: 100%; font: 700 11px/1.2 var(--frappe); letter-spacing: .14em; text-transform: uppercase; color: #fff; text-shadow: var(--ombre); }
.avatar-choix button[aria-disabled="true"] { cursor: default; }

.e-marche .voile { background: radial-gradient(110% 24% at 40% 21%, rgba(var(--v),.5) 0%, rgba(var(--v),.32) 60%, rgba(var(--v),0) 100%), linear-gradient(180deg, rgba(var(--v),.4) 0%, rgba(var(--v),.2) 34%, rgba(var(--v),.32) 100%); }
.e-marche .fond img { scale: 1.3; transform-origin: 50% 90%; }
.e-marche .contenu { padding: 72px var(--gout) 22px; display: grid; gap: 12px; align-content: start; }
.e-marche .tete { display: grid; gap: 8px; justify-items: start; }
.e-marche .t-m { font-size: clamp(28px, 7.4vw, 48px); }
.e-marche .chapo { font-size: 15.5px; }
.e-marche .blocs { display: grid; }
.e-marche .bloc { grid-area: 1 / 1; display: grid; gap: 11px; align-content: start; padding: 14px 14px 15px; border-radius: var(--rayon);
  background: rgba(12,12,15,.42); box-shadow: inset 0 0 0 1.5px var(--acc), 0 18px 44px rgba(0,0,0,.28);
  visibility: hidden; opacity: 0; transition: opacity .2s ease; }
.e-marche .bloc.on { visibility: visible; opacity: 1; }
.e-marche .bloc-tete { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 6px; }
.e-marche .plaque-monde { margin: 0; font-size: 17px; padding: 6px 10px 5px; box-shadow: none; }
.e-marche .discipline { margin: 0; font: 600 14px/1.3 var(--texte); color: #fff; text-shadow: var(--ombre); }
.kf-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
[data-logo] { flex: none; display: block; overflow: visible; filter: drop-shadow(0 2px 6px rgba(5,5,6,.55)); }
.app-onglets [data-logo] { width: 24px; height: 24px; filter: drop-shadow(0 1px 2px rgba(5,5,6,.5)); }
.e-marche .bloc-tete [data-logo] { width: 32px; height: 32px; margin-right: -1px; }
@media (max-width: 379px) { .e-marche .bloc-tete [data-logo] { width: 28px; height: 28px; margin-right: -4px; } }
.e-marche .gestes { order: 0; margin: 0; gap: 8px; align-content: start; counter-reset: etape; }
.e-marche .gestes li { counter-increment: etape; align-items: flex-start; gap: 10px; font: 500 14px/1.38 var(--texte); }
.e-marche .gestes li::before { content: counter(etape); content: counter(etape) / ""; flex: none; width: 22px; height: 22px; margin-top: -1px; border-radius: 50%;
  display: grid; place-items: center; font: 700 12px/1 var(--voix); color: var(--sur-acc); background: var(--acc); text-shadow: none; }
.e-marche .lib { display: block; margin-bottom: 3px; font: 700 10.5px/1.2 var(--frappe); letter-spacing: .12em; text-transform: uppercase; color: #fff; text-shadow: var(--ombre); }
.e-marche .note-ligne, .e-marche .difference { margin: 0; font: 400 14px/1.4 var(--texte); color: #fff; text-shadow: var(--ombre); }
.e-marche .note-ligne { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: start; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.16); }
.e-marche .note-ligne > b { font: 700 30px/1 var(--voix); font-variant-numeric: tabular-nums; color: var(--or); text-shadow: var(--ombre); }
.e-marche .pied-marche { display: grid; gap: 4px; }
.e-marche .pied-marche .pied-2 { color: #fff; font-weight: 600; }

.e4 .fond img { object-position: 50% 40%; }
.e4 .voile { background: radial-gradient(100% 20% at 30% 17%, rgba(var(--v),.44) 0%, rgba(var(--v),.26) 60%, rgba(var(--v),0) 100%), radial-gradient(70% 36% at 50% 60%, rgba(var(--v),.26) 0%, rgba(var(--v),.16) 60%, rgba(var(--v),0) 100%), linear-gradient(180deg, rgba(var(--v),.3) 0%, rgba(var(--v),.2) 22%, rgba(var(--v),0) 34%, rgba(var(--v),0) 88%, rgba(var(--v),.12) 100%); }
.e4 .titre { position: absolute; top: 72px; left: var(--gout); right: var(--gout); display: grid; gap: 8px; justify-items: start; }
.e4 .t-l { font-size: clamp(26px, 7.4vw, 44px); }
.e4 .sous-titre { font-size: 14.5px; }

.livret { position: absolute; left: 0; right: 0; top: var(--haut, 196px); --k: 1; }
.piste {
  display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-padding-left: 12px; padding: 0 12px 0;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; perspective: 1600px;
}
.piste::-webkit-scrollbar { display: none; }
.feuillet {
  position: relative; flex: 0 0 calc(364px * var(--k)); height: calc(632px * var(--k));
  scroll-snap-align: start; transform-origin: 0% 50%;
}
.feuillet:nth-last-child(2) { margin-right: calc(100vw - 364px * var(--k) - 20px); }
.feuillet.dos { display: none; }
.page {
  position: absolute; left: 0; top: 0; width: 364px; height: 632px; transform: scale(var(--k)); transform-origin: 0 0;
  border-radius: 3px 12px 12px 3px; overflow: hidden; isolation: isolate; color: var(--encre-page);
  background: rgba(10,14,26,.84);
  box-shadow: 0 24px 50px rgba(0,0,0,.32), inset 0 0 0 1px rgba(232,193,90,.28), inset 0 1px 0 rgba(255,255,255,.12);
  font-family: var(--texte);
}
.page::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .34;
  background: url(/assets/media/fond-five-or-9x16-flou.webp?v=355850a1) center / cover;
}
.page::after {
  content: ""; position: absolute; top: 6px; bottom: 6px; right: 0; width: 5px; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(232,193,90,0) 0 1px, rgba(232,193,90,.18) 1px 2px);
}
.page .ondes { position: absolute; inset: 0; pointer-events: none; opacity: .12; background: url(/assets/media/ondes.svg?v=d991435b) center / cover; }
.page .rosace { position: absolute; pointer-events: none; }
.page .filigrane { position: absolute; pointer-events: none; opacity: .07; color: #E8C15A; }
.page .micro-ligne { position: absolute; left: 16px; right: 16px; height: 6px; overflow: hidden; white-space: nowrap; font: 500 4.2px/6px var(--frappe); letter-spacing: .08em; color: rgba(232,193,90,.45); }
.page .bandeau { position: absolute; left: 0; right: 0; top: 0; height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px 0 20px; }
.page .bandeau .kid { display: flex; align-items: center; gap: 7px; font: 700 13.5px/1 var(--voix); letter-spacing: .26em; color: #fff; }
.page .bandeau .kid svg { width: 9px; height: 15px; }
.page .bandeau .doc { font: 500 9.5px/1.3 var(--frappe); letter-spacing: .12em; color: var(--lib-page); text-align: right; text-transform: uppercase; }
.page .filet-or { position: absolute; left: 16px; right: 16px; top: 46px; height: 1px; background: linear-gradient(90deg, rgba(198,135,26,0), rgba(198,135,26,.75) 12%, rgba(232,193,90,.9) 50%, rgba(198,135,26,.75) 88%, rgba(198,135,26,0)); }
.champ { position: absolute; }
.champ .lib, .signature .lib { display: block; font: 500 10px/1.2 var(--frappe); letter-spacing: .1em; text-transform: uppercase; color: var(--lib-page); }
.champ .lib.serre { letter-spacing: .03em; }
.visa .champ .lib { white-space: nowrap; }
.champ .val { display: block; margin-top: 3px; font: 600 14px/1.15 var(--texte); color: var(--encre-page); }
.champ .val.grand { font: 700 24px/1 var(--voix); letter-spacing: .01em; }
.champ .val.num { font: 700 14px/1.15 var(--frappe); letter-spacing: .1em; }
.champ .val.gros { font: 700 20px/1 var(--voix); font-variant-numeric: tabular-nums; }
.champ .val.grand, .champ .val.gros { background: var(--or-feuille); -webkit-background-clip: text; background-clip: text; color: transparent; }
.specimen { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(-28deg); pointer-events: none; font: 700 54px/1 var(--voix); letter-spacing: .28em; color: rgba(232,193,90,.07); white-space: nowrap; }
.mrz {
  position: absolute; left: 0; right: 0; bottom: 0; height: 72px; padding: 13px 14px 0 15px;
  background: rgba(0,0,0,.32); box-shadow: inset 0 1px 0 rgba(232,193,90,.25);
  font: 700 11.4px/21px var(--frappe); letter-spacing: .055em; color: var(--or); white-space: pre; overflow: hidden;
}
.photo-id { position: absolute; left: 18px; top: 64px; width: 128px; height: 166px; border-radius: 5px; overflow: hidden; background: #1A2236; box-shadow: 0 0 0 1px rgba(232,193,90,.35); }
.photo-id img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.holo {
  position: absolute; inset: 0; pointer-events: none; --a: 210deg; opacity: .34;
  background: conic-gradient(from var(--a) at 50% 50%, rgba(255,246,204,0), rgba(255,246,204,.9) 40deg, rgba(232,193,90,.8) 90deg, rgba(198,135,26,.6) 150deg, rgba(255,255,255,.95) 200deg, rgba(232,193,90,.75) 260deg, rgba(255,246,204,0) 330deg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 166'%3E%3Cpath d='M78 22 L44 92 H64 L52 146 L92 66 H70 Z' fill='%23000'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 166'%3E%3Cpath d='M78 22 L44 92 H64 L52 146 L92 66 H70 Z' fill='%23000'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.ovd { position: absolute; width: 50px; height: 50px; border-radius: 50%; pointer-events: none; --a: 210deg; overflow: hidden;
  background: conic-gradient(from var(--a), #C6871A, #FFF6CC 50deg, #E8C15A 100deg, #A8741A 160deg, #FFF3C9 220deg, #E8C15A 280deg, #C6871A);
  box-shadow: 0 0 0 1px rgba(168,116,26,.55), inset 0 0 0 2px rgba(255,246,204,.4), 0 2px 6px rgba(80,50,0,.22); }
.ovd .ovd-rosace { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .75; }
.ovd .ovd-eclair { position: absolute; left: 50%; top: 50%; width: 13px; height: 22px; transform: translate(-50%,-50%); }
.fantome { position: absolute; width: 62px; height: 80px; overflow: hidden; border-radius: 3px; opacity: .35; }
.fantome img { width: 100%; height: 100%; object-fit: cover; display: block; }
.signature { position: absolute; width: 210px; }
.signature svg { display: block; width: 168px; height: 46px; margin-top: 4px; stroke: #E8C15A; }
.signature .trait { height: 1px; background: rgba(255,255,255,.25); margin-top: 2px; }
.gaufre { position: absolute; pointer-events: none; }
.gaufre svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.gaufre svg:nth-child(1) { opacity: .16; }
.gaufre svg:nth-child(3) { opacity: 0; }
.visa .monde-titre { position: absolute; left: 18px; top: 58px; font: 700 62px/.9 var(--voix); letter-spacing: -.035em; color: var(--acc); }
.visa .monde-sous { position: absolute; left: 20px; top: 120px; font: 500 10px/1.3 var(--frappe); letter-spacing: .16em; text-transform: uppercase; color: var(--lib-page); }
.visa .gravure-cadre { position: absolute; left: 16px; right: 16px; top: 142px; height: 160px; border-radius: 6px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(232,193,90,.3); background: rgba(0,0,0,.25); }
.visa .gravure-cadre canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.visa .gravure-cadre::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 50%, transparent 50%, rgba(10,14,26,.9) 100%); }
.visa .phrase-monde { position: absolute; left: 18px; right: 18px; top: 366px; margin: 0; font: 600 13.5px/1.36 var(--texte); color: var(--encre-page); text-wrap: balance; }
.cases-vides { position: absolute; left: 146px; top: 452px; display: flex; gap: 12px; }
.cases-vides i { display: block; width: 60px; height: 60px; border-radius: 50%; border: 1px dashed rgba(232,193,90,.16); box-shadow: inset 0 0 0 1px rgba(232,193,90,.22), inset 0 2px 6px rgba(0,0,0,.4); }
.tampon { position: absolute; pointer-events: none; }
.tampon svg { display: block; width: 100%; height: 100%; }
.page.claque .tampon svg { animation: claque .42s cubic-bezier(.2,.9,.25,1.25) both; animation-delay: calc(var(--i, 0) * 140ms + 120ms); }
@keyframes claque { 0% { opacity: 0; transform: scale(1.5) rotate(-6deg); } 60% { opacity: 1; transform: scale(.94); } 100% { opacity: 1; transform: none; } }
.couverture { background: radial-gradient(95% 70% at 34% 26%, rgba(255,214,140,.30) 0%, rgba(255,214,140,.10) 42%, rgba(255,214,140,0) 72%), linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,0) 60%), #18223D url(/assets/media/cuir-nuit-tuile.webp?v=532f8d13) 0 0 / 256px 256px; color: var(--or); border-radius: 2px 12px 12px 2px; }
.couverture::before, .couverture::after { display: none; }
.couv-centre { position: absolute; left: 0; right: 0; top: 190px; display: grid; justify-items: center; gap: 14px; }
.couv-centre svg { width: 46px; height: 76px; opacity: .9; }
.couv-kid { font: 700 22px/1 var(--voix); letter-spacing: .34em; color: var(--or); }
.couv-sous { font: 500 10px/1 var(--frappe); letter-spacing: .2em; text-transform: uppercase; color: rgba(232,193,90,.9); }
.couv-pied { position: absolute; left: 0; right: 0; bottom: 40px; text-align: center; font: 500 9.5px/1 var(--frappe); letter-spacing: .2em; text-transform: uppercase; color: rgba(232,193,90,.85); }

.pagination { position: absolute; left: 0; right: 0; top: calc(var(--haut, 196px) + 632px * var(--k) + 10px); display: flex; align-items: center; justify-content: center; gap: 10px; }
.pagination .points { display: flex; gap: 0; }
.pagination .points > * { width: 26px; height: 44px; border: 0; padding: 0; background: none; display: grid; place-items: center; }
.pagination .points button { width: 44px; cursor: pointer; }
.pagination .points > *::before { content: ""; width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.7); box-shadow: 0 0 0 1px rgba(0,0,0,.25); transition: width .25s, background .25s; }
.pagination .points > .on::before { width: 18px; background: var(--or); }
.pagination .nav { min-height: 44px; min-width: 44px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; background: rgba(12,12,15,.62); color: #fff;
  font: 500 11px/1 var(--frappe); letter-spacing: .18em; text-transform: uppercase; }
.pagination .nav svg { width: 15px; height: 15px; }
.pagination .prec { display: none; }
.pagination .nav[aria-disabled="true"] { opacity: .3; cursor: default; }

.cases-vides .poser { position: relative; width: 60px; height: 60px; padding: 0; border: 1.5px dashed rgba(232,193,90,.85); border-radius: 50%; cursor: pointer; background: rgba(232,193,90,.08); display: grid; place-items: center; }
.cases-vides .poser:not(.pose)::before, .cases-vides .poser:not(.pose)::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; margin: -1px 0 0 -9px; border-radius: 1px; background: var(--or); }
.cases-vides .poser:not(.pose)::after { transform: rotate(90deg); }
.cases-vides .poser:not(.pose) { animation: appel 2.4s ease-in-out infinite; }
@keyframes appel { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,193,90,.0); } 50% { box-shadow: 0 0 0 6px rgba(232,193,90,.22); } }
.cases-vides .poser.pose { border-color: transparent; background: none; }
.poser-cible { position: absolute; inset: -14px; pointer-events: none; }
.poser-cible svg { width: 100%; height: 100%; display: block; animation: claque-doigt .18s cubic-bezier(.3,.9,.3,1.2) both; }
@keyframes claque-doigt { from { opacity: 0; transform: scale(1.6) rotate(-8deg); } to { opacity: 1; transform: none; } }
.page.tressaille { animation: tressaille .22s linear; }
@keyframes tressaille { 0%, 100% { translate: 0 0; } 25% { translate: 2px 1px; } 50% { translate: -2px -1px; } 75% { translate: 1px 0; } }

.e5 .voile { background: radial-gradient(90% 14% at 50% 12%, rgba(var(--v),.4) 0%, rgba(var(--v),.18) 60%, rgba(var(--v),0) 100%), linear-gradient(180deg, rgba(var(--v),.26) 0%, rgba(var(--v),.08) 20%, rgba(var(--v),.04) 50%, rgba(var(--v),.3) 82%, rgba(var(--v),.4) 100%); }
.e5 .contenu { min-height: 100vh; min-height: 100svh; padding: 76px var(--gout) 34px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; }
.e5 .tete { display: grid; gap: 8px; justify-items: center; }
.colonne-carte { display: grid; gap: 14px; justify-items: center; width: 100%; }
.mondes-choix { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 420px; padding: 4px; border-radius: 16px; background: rgba(12,12,15,.66); } /* 31/10 : .42 → .66, le blanc des mondes à 4,5:1 au moins sur les quatre fonds HD (4,26:1 mesuré) */
.mondes-choix button {
  height: 44px; border: 0; border-radius: 12px; cursor: pointer; display: grid; place-items: center; gap: 2px; padding: 4px 2px; white-space: nowrap;
  font: 700 11.5px/1 var(--voix); letter-spacing: .08em; color: #fff; background: none;
}
.mondes-choix button[aria-checked="true"] { color: var(--encre); background: var(--or); }
.mondes-choix [data-logo] { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgba(5,5,6,.5)); }
.j0 { margin: 0; padding: 6px 14px; border-radius: 999px; font: 600 14.5px/1.4 var(--texte); color: #fff; background: rgba(12,12,15,.5); }
.formulaire { position: relative; width: 100%; max-width: 420px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.formulaire .avatar-choix { justify-content: flex-start; padding: 10px 12px 12px; border-radius: 16px; background: rgba(12,12,15,.42); }
.champ-saisie {
  display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px; border-radius: 14px; text-align: left;
  background: rgba(255,255,255,.94); box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.champ-saisie:focus-within { box-shadow: inset 0 0 0 2px var(--encre), 0 0 0 3px var(--or); }
.champ-saisie label { flex: none; width: 92px; font: 700 10.5px/1.2 var(--frappe); letter-spacing: .12em; color: #3A3632; text-transform: uppercase; }
.champ-saisie input { flex: 1; min-width: 0; width: 100%; height: 100%; border: 0; outline: 0; background: none; color: var(--encre); caret-color: var(--encre); }
#pseudo { font: 700 18px/1 var(--voix); letter-spacing: .06em; text-transform: uppercase; }
#pseudo::placeholder { color: #595959; opacity: 1; }
#email { font: 400 16px/1 var(--texte); }
#email::placeholder { color: rgba(12,12,15,.5); }
.formulaire .btn-or { width: 100%; margin-top: 4px; }
.formulaire .micro { text-align: center; color: #fff; text-wrap: pretty; }
.formulaire .micro.erreur { color: #FFE2B8; }
.formulaire .micro.reussi { color: #fff; }
.formulaire[aria-busy="true"] .btn-or { opacity: .7; cursor: progress; }
.formulaire.fige .btn-or { opacity: .55; cursor: default; }
.formulaire.fermee .btn-or { opacity: 1; color: var(--or-clair); background: rgba(12,12,15,.62); box-shadow: inset 0 0 0 1.5px var(--or), 0 8px 24px rgba(0,0,0,.22);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: default; gap: 10px; }
.formulaire.fermee .btn-or::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--or); box-shadow: 0 0 0 3px rgba(232,193,90,.22); }
.mondes-choix button[aria-disabled="true"] { cursor: default; }
.mondes-choix button[aria-disabled="true"]:not([aria-checked="true"]) { opacity: .5; }
.apercu { margin: 0 0 2px; padding: 9px 14px; border-radius: 12px; text-align: left; font: 500 12.5px/1.4 var(--texte); color: var(--or-clair);
  background: rgba(12,12,15,.72); box-shadow: inset 0 0 0 1px rgba(232,193,90,.6); }
.apercu[hidden] { display: none; }
.champ-saisie[hidden] { display: none; }
.champ-accord { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 12px 14px; border-radius: 14px; text-align: left; background: rgba(12,12,15,.62); }
.champ-accord input { width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--or); cursor: pointer; }
.champ-accord label { font: 400 13.5px/1.45 var(--texte); color: #fff; cursor: pointer; }
.champ-accord label b, .notice b { font-weight: 600; }
.champ-accord:focus-within { box-shadow: 0 0 0 3px var(--or); }
.champ-accord:has(input[aria-invalid="true"]) { box-shadow: inset 0 0 0 2px #FFE2B8; }
.champ-accord:has(input[aria-invalid="true"]):focus-within { box-shadow: inset 0 0 0 2px #FFE2B8, 0 0 0 3px var(--or); }
.formulaire.fige .champ-accord { opacity: .7; }
.notice { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; text-align: left; background: rgba(12,12,15,.62); }
.notice p { margin: 0; font: 400 12px/1.45 var(--texte); color: #fff; }
.notice .lien-notice { display: inline-flex; align-items: center; min-height: 44px; font: 600 13px/1.3 var(--texte); color: var(--or-clair); text-decoration: underline; text-underline-offset: 4px; }
.formulaire:not(.fermee) .micro { padding: 8px 12px; border-radius: 12px; background: rgba(12,12,15,.62); }
/* 31/10 : porte fermée, la ligne sous le bouton reposait sur la photo (3,09:1 et 3,88:1 sur les fonds HD) — un fond sombre
   derrière le texte, sans toucher la mise en page (l'ombre portée l'élargit de 6 px, comme en contraste renforcé) */
.formulaire.fermee .micro { color: #fff; border-radius: 8px; background: rgba(12,12,15,.66); box-shadow: 0 0 0 6px rgba(12,12,15,.66); }
.formulaire:not(.fermee) .avatar-choix { background: rgba(12,12,15,.62); }
.champ-accord[hidden], .notice[hidden], .pied nav a[hidden] { display: none; }
@media (max-width: 359px) { .champ-saisie { gap: 8px; padding: 0 12px; } .champ-saisie label { width: 62px; font-size: 9.5px; letter-spacing: .08em; } #email { font-size: 15px; } }

.e6 .voile { background: radial-gradient(56% 42% at 50% 50%, rgba(255,240,205,.5) 0%, rgba(255,240,205,.28) 55%, rgba(255,240,205,0) 100%); }
.e6 .contenu { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 90px var(--gout) 40px; color: var(--encre); }
.e6 .surtitre { color: var(--encre); text-shadow: none; }
.e6 .surtitre::before { background: var(--encre); box-shadow: none; }
.date { margin: 18px 0 0; font: 700 clamp(56px, 15vw, 168px)/.88 var(--voix); letter-spacing: -.045em; color: var(--encre); }
@keyframes pose-date { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
.date.date-mot { max-width: 100%; font-size: clamp(34px, 12.6vw, 150px); line-height: .9; letter-spacing: -.05em; white-space: nowrap; hyphens: none; }
.date-mot .mot { position: relative; display: block; }
.e6.vu .date-mot .mot { animation: pose-date .9s cubic-bezier(.2,.8,.2,1) .15s both; }
.beta { position: relative; margin-top: 18px; padding-top: 30px; display: grid; justify-items: center; }
.beta::before { content: ""; position: absolute; top: 0; left: 50%; width: 1.5px; height: 22px; background: var(--encre); }
.beta-date { margin: 0; display: grid; justify-items: center; gap: 10px; }
.beta-lib { font: 700 12px/1 var(--frappe); letter-spacing: .2em; text-transform: uppercase; color: var(--encre); }
.beta-jour { font: 700 clamp(26px, 6.6vw, 60px)/.95 var(--voix); letter-spacing: -.03em; color: var(--encre); }
.beta-jour b { font-weight: 700; font-feature-settings: 'tnum' 1; }
.e6 .statut { margin: 22px auto 0; max-width: 330px; font: 600 15px/1.45 var(--texte); color: var(--encre); text-wrap: balance; }
.e6 .invite { margin: 8px auto 0; max-width: 330px; font: 700 16px/1.4 var(--texte); color: var(--encre); text-wrap: balance; }
.e6 .btn { margin-top: 24px; box-shadow: inset 0 0 0 2px var(--encre), inset 0 1px 0 rgba(255,255,255,.55), 0 8px 24px rgba(0,0,0,.25); }
.phrase-pole { font: 600 14px/1.42 var(--texte); color: #fff; text-wrap: pretty; text-shadow: var(--ombre); }

.eia .fond img { scale: 2; transform-origin: 8% 60%; }
.eia .voile { background: linear-gradient(180deg, rgba(var(--v),.62) 0%, rgba(var(--v),.52) 22%, rgba(var(--v),.36) 38%, rgba(var(--v),.3) 50%, rgba(var(--v),.36) 62%, rgba(var(--v),.52) 80%, rgba(var(--v),.64) 100%); }
.eia .tete, .ia-pied { position: relative; }
.eia .tete::before, .ia-pied::before { content: ""; position: absolute; z-index: -1; inset: -64px calc(-1 * var(--gout)); pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--v),0) 0, rgba(var(--v),.07) 16px, rgba(var(--v),.22) 32px, rgba(var(--v),.38) 48px, rgba(var(--v),.48) 64px,
    rgba(var(--v),.48) calc(100% - 64px), rgba(var(--v),.38) calc(100% - 48px), rgba(var(--v),.22) calc(100% - 32px), rgba(var(--v),.07) calc(100% - 16px), rgba(var(--v),0) 100%); }
.eia .contenu { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 80px var(--gout) 36px; }
.eia .tete { display: grid; gap: 10px; justify-items: start; }
.eia .t-m { font-size: clamp(30px, 8.4vw, 50px); }
.eia .t-m em { display: block; }
.eia .chapo { font-size: 16px; }
.ia-points { list-style: none; margin: 0; padding: 4px 16px; counter-reset: ia; border-radius: var(--rayon);
  background: rgba(var(--v),.58); box-shadow: inset 0 0 0 1px rgba(232,193,90,.28), 0 18px 44px rgba(0,0,0,.3); }
.ia-points li { counter-increment: ia; display: grid; grid-template-columns: 30px 1fr; column-gap: 10px; row-gap: 3px; padding: 13px 0; }
.ia-points li + li { border-top: 1px solid rgba(255,255,255,.16); }
.ia-points li::before { content: counter(ia, decimal-leading-zero); grid-row: 1 / span 2; padding-top: 2px; font: 700 13px/1.3 var(--frappe); letter-spacing: .06em; color: var(--or); }
.ia-points b { font: 700 16px/1.25 var(--voix); color: #fff; }
.ia-points span { font: 400 14.5px/1.45 var(--texte); color: #fff; text-wrap: pretty; }
.ia-pied { display: grid; gap: 4px; }
.ia-maison { margin: 0; font: 600 15px/1.45 var(--texte); color: #fff; text-wrap: pretty; text-shadow: var(--ombre); }
.ia-contact { margin: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; font: 400 14px/1.4 var(--texte); color: #fff; text-shadow: var(--ombre); }
.ia-contact a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-decoration-color: rgba(255,255,255,.5); text-underline-offset: 4px; }

.e8 .fond video { object-position: 50% 40%; }
.e8 .voile { background: linear-gradient(180deg, rgba(var(--v),.24) 0%, rgba(var(--v),0) 14%, rgba(var(--v),0) 40%, rgba(var(--v),.56) 54%, rgba(var(--v),.68) 70%, rgba(var(--v),.68) 100%); }
.e8 .contenu { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 0 var(--gout) 22px; }
.e8 .t-l { font-size: clamp(30px, 8.2vw, 64px); line-height: 1.02; }
.e8 .btn { align-self: flex-start; margin-top: 4px; }
.pied { margin-top: 26px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.3); display: grid; gap: 4px; }
.pied nav { display: flex; flex-wrap: wrap; column-gap: 20px; font: 400 14px/1.4 var(--texte); color: #fff; text-shadow: var(--ombre); }
.pied nav a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-decoration-color: rgba(255,255,255,.5); text-underline-offset: 4px; }
.pied .legal { margin: 0; font: 700 11px/1.5 var(--frappe); letter-spacing: .12em; color: #fff; text-transform: uppercase; text-shadow: var(--ombre); }

.kc-scene {
  --or: #E8C15A; --or-clair: #FFF6CC; --or-fonce: #C6871A;
  --l: min(320px, calc(100vw - 48px)); --h: calc(var(--l) * 1.4); --pan: 20px;
  --pan-corps: calc(var(--pan) - 2.929px);
  --pan-filet: calc(var(--pan) - 5.858px);
  position: relative; width: var(--l); height: var(--h);
  perspective: 1100px; perspective-origin: 50% 40%;
  font-family: var(--texte); color: #fff;
  -webkit-tap-highlight-color: transparent;
}
.kc-scene[data-monde="match"]   { --acc:#E11D2E; --acc-clair:#FF2E3F; --sur-acc:#FFFFFF; --halo: 225,29,46; --env: var(--env-match); }
.kc-scene[data-monde="footing"] { --acc:#FF963C; --acc-clair:#FFB068; --sur-acc:#0C0C0F; --halo: 255,150,60; --env: var(--env-footing); }
.kc-scene[data-monde="gym"]     { --acc:#96ACCD; --acc-clair:#B8C9E2; --sur-acc:#0C0C0F; --halo: 150,172,205; --env: var(--env-gym); }
.kc-scene[data-monde="play"]    { --acc:#6080FF; --acc-clair:#8FA5FF; --sur-acc:#0C0C0F; --halo: 96,128,255; --env: var(--env-play); }

.kc-flip { position: relative; width: var(--l); height: var(--h); transform-style: preserve-3d; transition: transform 500ms cubic-bezier(.22,.9,.28,1); cursor: pointer; outline: none; }
.kc-flip:focus-visible { outline: 2px solid var(--or); outline-offset: 4px; }
.kc-scene.incline .kc-flip { transition: transform 90ms linear; }
.kc-flip[data-face="dos"] { transform: rotateY(180deg); }
.kc-card {
  position: absolute; inset: 0; width: var(--l); height: var(--h);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; font-family: var(--texte); color: #fff; overflow: hidden; padding: 5px;
  background: conic-gradient(from 218deg at 50% 45%, #6B5320 0deg, #C9A24E 22deg, #FFF6D6 58deg, #E8C15A 92deg, #8A6A28 140deg, #4A3A16 186deg, #A8812F 232deg, #FFF3C9 268deg, #E8C15A 300deg, #7A5E22 340deg, #6B5320 360deg);
  box-shadow: 0 2px 3px rgba(0,0,0,.9), 0 26px 60px rgba(0,0,0,.66), 0 0 52px rgba(var(--halo), .18), inset 0 0 0 1px rgba(255,248,220,.5), inset 0 0 0 5px rgba(0,0,0,.28);
}
.kc-dos { transform: rotateY(180deg); }
.kc-tranche { position: absolute; inset: 0; z-index: -1; background: linear-gradient(140deg, #4A3A12, #1C1508 46%, #0B0905); transform: translate(var(--tx, 3px), var(--ty, 4px)); transition: transform 120ms linear; }
.kc-corps { position: relative; flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #05060A;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.92), inset 0 0 30px rgba(0,0,0,.6), inset 0 0 90px rgba(0,0,0,.35); }
.kc-corps::after { content: ""; position: absolute; inset: 5px; z-index: 4; pointer-events: none; outline: 1px solid rgba(255,255,255,.13); outline-offset: -1px; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.50); }
.kc-lumiere { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(126deg, rgba(255,246,214,.07) 0%, rgba(255,246,214,.02) 22%, transparent 46%, rgba(0,0,0,.14) 78%, rgba(0,0,0,.26) 100%); }
.kc-guilloche { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: repeating-radial-gradient(circle at 50% 28%, transparent 0, transparent 10px, rgba(232,193,90,.045) 11px, transparent 12px); }
.kc-speculaire { position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: 0; transition: opacity 220ms ease; background: radial-gradient(52% 38% at var(--sx, 50%) var(--sy, 30%), rgba(255,246,204,.20), rgba(232,193,90,.07) 42%, transparent 72%); }
.kc-scene.incline .kc-speculaire { opacity: 1; transition: none; }
.kc-grain { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: repeating-linear-gradient(102deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 50%, transparent 52%, #000 100%); mask-image: radial-gradient(120% 100% at 50% 50%, transparent 52%, #000 100%); }
.kc-reflet { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 4; background: linear-gradient(104deg, transparent 34%, rgba(255,246,204,.22) 47%, rgba(232,193,90,.12) 54%, transparent 66%); transform: translateX(-120%); }
.kc-card.brille .kc-reflet { animation: kcReflet 1200ms ease-out 1; }
@keyframes kcReflet { 0% { opacity: 0; transform: translateX(-120%); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translateX(120%); } }
.kc-tete { position: relative; z-index: 3; height: 36px; flex: 0 0 36px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; gap: 8px; }
.kc-logo { display: flex; align-items: center; gap: 5px; }
.kc-logo b { font-family: var(--voix); font-weight: 700; font-size: 13.5px; letter-spacing: .2em; color: #fff; }
.kc-eclair { width: 9px; height: 15px; display: block; }
.kc-pastille { font-family: var(--voix); font-weight: 500; font-size: 11px; letter-spacing: .16em; padding: 5px 10px; border-radius: 3px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 93%, #fff) 0%, var(--acc) 42%, color-mix(in srgb, var(--acc) 78%, #000) 100%);
  color: var(--sur-acc); white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.35), 0 2px 5px rgba(0,0,0,.6); text-shadow: 0 1px 0 rgba(0,0,0,.25); }
.kc-scenePhoto { position: absolute; inset: 0; overflow: hidden; background: var(--env) center / cover no-repeat; }
.kc-scenePhoto::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(88% 50% at 0% 14%, rgba(4,5,8,.88), rgba(4,5,8,.5) 55%, transparent 82%), radial-gradient(62% 26% at 100% 9%, rgba(4,5,8,.72), transparent 78%), linear-gradient(180deg, transparent 40%, rgba(4,5,8,.35) 56%, transparent 72%); }
.kc-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; }
.kc-muet { position: absolute; inset: 0; display: grid; place-items: end center; color: var(--acc-clair); }
.kc-muet svg { width: 58%; height: 74%; opacity: .3; }
.kc-voile { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(4,5,8,.94) 0%, rgba(4,5,8,.58) 12%, rgba(4,5,8,.08) 25%, rgba(4,5,8,0) 36%, rgba(4,5,8,.4) 45%, rgba(4,5,8,.8) 53%, rgba(4,5,8,.90) 64%, rgba(4,5,8,.985) 78%, #040508 100%),
    radial-gradient(130% 62% at 50% 106%, rgba(var(--halo), .22), transparent 62%); }
.kc-ui { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.kc-creux { flex: 1 1 auto; min-height: 0; }
.kc-grand { position: absolute; top: 42px; left: 16px; line-height: .92; z-index: 2; }
.kc-grand b { position: relative; display: block; font-family: var(--voix); font-weight: 700; font-size: 78px; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  background: linear-gradient(174deg, #FFF9DE 0%, var(--or-clair) 26%, var(--or) 38%, #A9741A 52%, var(--or) 66%, #FFF4D2 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.kc-grand b::before { content: attr(data-v); content: attr(data-v) / ""; position: absolute; inset: 0; z-index: -1; -webkit-background-clip: initial; background-clip: initial; color: transparent;
  text-shadow: 0 -1px 0 rgba(255,250,225,.55), 0 1px 0 rgba(0,0,0,.92), 0 2px 2px rgba(0,0,0,.8), 0 6px 22px rgba(0,0,0,.75); }
.kc-grand span { display: block; margin-top: 1px; font-family: var(--voix); font-weight: 500; font-size: 10.5px; letter-spacing: .26em; color: #fff;
  text-shadow: 0 0 2px rgba(0,0,0,.9), 0 1px 2px rgba(0,0,0,.9), 0 1px 8px rgba(0,0,0,.95); }
.kc-etiquette { position: absolute; top: 42px; right: 16px; z-index: 2; font-family: var(--voix); font-weight: 500; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase;
  color: #fff; padding: 3px 0 3px 9px; text-shadow: 0 0 2px rgba(0,0,0,.9), 0 1px 2px rgba(0,0,0,.9), 0 1px 6px rgba(0,0,0,.95); }
.kc-card[data-etat="fondateur"] .kc-etiquette { display: none; }
.kc-nom { padding: 0 16px 10px; }
.kc-nom b { display: block; font-family: var(--voix); font-weight: 700; font-size: 31px; letter-spacing: -.012em; color: #fff; line-height: 1;
  text-shadow: 0 0 3px rgba(0,0,0,.6), 0 2px 14px rgba(0,0,0,.85); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-nom span { display: block; margin-top: 6px; font-family: var(--voix); font-weight: 500; font-size: 10.5px; letter-spacing: .2em; color: rgba(255,255,255,.82);
  text-shadow: 0 0 2px rgba(0,0,0,.95), 0 1px 3px rgba(0,0,0,.9), 0 1px 10px rgba(0,0,0,.95); }
.kc-nom span i { font-style: normal; color: var(--acc-clair); }
.kc-socle { position: relative; margin: 0; padding: 12px 16px 13px; background: linear-gradient(180deg, rgba(6,7,11,0) 0%, rgba(6,7,11,.46) 24%, rgba(6,7,11,.82) 56%, rgba(6,7,11,.94) 100%); box-shadow: inset 0 -1px 0 rgba(0,0,0,.9); }
.kc-six { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kc-case { position: relative; padding-left: 9px; min-width: 0; }
.kc-case::before, .kc-etiquette::before { content: ""; position: absolute; left: 0; top: 0; bottom: 3px; width: 2px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.6) 18%, rgba(0,0,0,.6) 82%, transparent) left / 1px 100% no-repeat,
    linear-gradient(180deg, transparent, rgba(232,193,90,.38) 18%, rgba(232,193,90,.38) 82%, transparent) right / 1px 100% no-repeat; }
.kc-etiquette::before { bottom: 0; }
.kc-val { font-family: var(--voix); font-weight: 700; font-size: 24px; line-height: .9; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -.005em; }
.kc-val i { font-style: normal; font-size: 10px; margin-left: 2px; letter-spacing: 0; color: rgba(255,255,255,.55); }
.kc-lib { min-height: 2.44em; margin-top: 5px; font-family: var(--voix); font-weight: 500; font-size: 10.5px; line-height: 1.22; letter-spacing: .15em; color: rgba(255,255,255,.66);
  text-transform: uppercase; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kc-lib.serre { letter-spacing: .05em; }
.kc-lib.petit { font-size: 9.5px; letter-spacing: .04em; }
.kc-card[data-anime="1"] .kc-case { opacity: 1; animation: kcMonte 260ms ease-out forwards; }
.kc-card[data-anime="1"] .kc-case:nth-child(2) { animation-delay: 150ms; }
.kc-card[data-anime="1"] .kc-case:nth-child(3) { animation-delay: 300ms; }
.kc-card[data-anime="1"] .kc-case:nth-child(4) { animation-delay: 450ms; }
.kc-card[data-anime="1"] .kc-case:nth-child(5) { animation-delay: 600ms; }
.kc-card[data-anime="1"] .kc-case:nth-child(6) { animation-delay: 750ms; }
@keyframes kcMonte { from { opacity: 1; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.kc-plaque { height: 38px; flex: 0 0 38px; display: flex; align-items: center; justify-content: center; gap: 9px; position: relative; padding: 0 16px;
  background: linear-gradient(180deg, #0B0D12 0%, #06070B 52%, #0A0C10 100%); box-shadow: inset 0 1px 0 rgba(232,193,90,.30), inset 0 2px 5px rgba(0,0,0,.85), inset 0 -1px 0 rgba(255,255,255,.05); }
.kc-plaque i { flex: 1 1 0%; height: 1px; min-width: 0; background: linear-gradient(90deg, rgba(232,193,90,.04), rgba(232,193,90,.62)); }
.kc-plaque i:last-child { transform: scaleX(-1); }
.kc-plaque b { flex: 0 0 auto; width: 5px; height: 5px; transform: rotate(45deg); background: linear-gradient(135deg, var(--or-clair), var(--or) 55%, var(--or-fonce)); box-shadow: 0 0 4px rgba(232,193,90,.5), inset 0 0 0 .5px rgba(255,246,204,.6); }
.kc-plaque span { margin: 0 4px; white-space: nowrap; font-family: var(--frappe); font-weight: 500; font-size: 11.5px; letter-spacing: .28em; padding-left: .28em; color: #C9A24E; text-shadow: 0 1px 0 rgba(255,255,255,.16), 0 -1px 1px rgba(0,0,0,.95); }
.kc-dos .kc-corps { background: linear-gradient(158deg, #10131A, #05060A); }
.kc-versoTitre { font-family: var(--voix); font-weight: 500; font-size: 10.5px; letter-spacing: .16em; color: var(--or); padding: 12px 12px 8px; }
.kc-defs { margin: 0; padding: 4px 12px 10px; list-style: none; flex: 1; overflow: hidden; text-align: left; }
.kc-defs li { margin-bottom: 9px; font-size: 12px; line-height: 1.34; color: rgba(255,255,255,.72); text-wrap: pretty; }
.kc-defs b { font-family: var(--voix); font-weight: 500; font-size: 10.5px; letter-spacing: .1em; color: #fff; }
.kc-defs li.kc-defGrand b { color: var(--or); }
.kc-defVal { display: inline-block; margin-right: 6px; font-family: var(--voix); font-weight: 700; font-size: 15px; color: var(--or); letter-spacing: -.005em; }
.kc-card, .kc-card .kc-tranche, .kc-card .kc-corps, .kc-card .kc-corps::after {
  clip-path: polygon(var(--p) 0, calc(100% - var(--p)) 0, 100% var(--p), 100% calc(100% - var(--p)), calc(100% - var(--p)) 100%, var(--p) 100%, 0 calc(100% - var(--p)), 0 var(--p));
}
.kc-card, .kc-card .kc-tranche { --p: var(--pan); }
.kc-card .kc-corps { --p: var(--pan-corps); }
.kc-card .kc-corps::after { --p: var(--pan-filet); }
.kc-scene {
  --env-match: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20320%20300'%3E%20%3Cdefs%3E%3ClinearGradient%20id%3D'c'%20x1%3D'0'%20y1%3D'0'%20x2%3D'0'%20y2%3D'1'%3E%20%3Cstop%20offset%3D'0'%20stop-color%3D'%232A0A10'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%2307080C'%2F%3E%3C%2FlinearGradient%3E%20%3ClinearGradient%20id%3D'f'%20x1%3D'0'%20y1%3D'0'%20x2%3D'0'%20y2%3D'1'%3E%20%3Cstop%20offset%3D'0'%20stop-color%3D'%23FF6A75'%20stop-opacity%3D'.30'%2F%3E%20%3Cstop%20offset%3D'1'%20stop-color%3D'%23FF6A75'%20stop-opacity%3D'0'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%20%3Crect%20width%3D'320'%20height%3D'300'%20fill%3D'url(%23c)'%2F%3E%20%3Cg%20fill%3D'url(%23f)'%3E%20%3Cpath%20d%3D'M40%200%20L96%200%20L70%20300%20L0%20300%20Z'%2F%3E%3Cpath%20d%3D'M130%200%20L166%200%20L176%20300%20L112%20300%20Z'%2F%3E%20%3Cpath%20d%3D'M214%200%20L268%200%20L320%20300%20L246%20300%20Z'%2F%3E%3C%2Fg%3E%20%3Cg%20stroke%3D'%23E11D2E'%20stroke-opacity%3D'.34'%20fill%3D'none'%3E%20%3Ccircle%20cx%3D'160'%20cy%3D'232'%20r%3D'58'%20stroke-width%3D'1.5'%2F%3E%20%3Cpath%20d%3D'M0%20232%20H320'%20stroke-width%3D'1'%2F%3E%3Cpath%20d%3D'M160%20174%20V290'%20stroke-width%3D'1'%2F%3E%3C%2Fg%3E%20%3Cg%20fill%3D'%23FFF6CC'%20fill-opacity%3D'.5'%3E%20%3Ccircle%20cx%3D'36'%20cy%3D'22'%20r%3D'2.5'%2F%3E%3Ccircle%20cx%3D'150'%20cy%3D'14'%20r%3D'2.5'%2F%3E%3Ccircle%20cx%3D'286'%20cy%3D'26'%20r%3D'2.5'%2F%3E%3C%2Fg%3E%20%3C%2Fsvg%3E");
  --env-footing: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20320%20300'%3E%20%3Cdefs%3E%3ClinearGradient%20id%3D'c'%20x1%3D'0'%20y1%3D'0'%20x2%3D'0'%20y2%3D'1'%3E%20%3Cstop%20offset%3D'0'%20stop-color%3D'%232A1608'%2F%3E%3Cstop%20offset%3D'.46'%20stop-color%3D'%23140C08'%2F%3E%20%3Cstop%20offset%3D'1'%20stop-color%3D'%2307080C'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%20%3Crect%20width%3D'320'%20height%3D'300'%20fill%3D'url(%23c)'%2F%3E%20%3Ccircle%20cx%3D'232'%20cy%3D'120'%20r%3D'34'%20fill%3D'%23FF963C'%20fill-opacity%3D'.20'%2F%3E%20%3Ccircle%20cx%3D'232'%20cy%3D'120'%20r%3D'15'%20fill%3D'%23FFB068'%20fill-opacity%3D'.34'%2F%3E%20%3Cpath%20d%3D'M0%20150%20H320'%20stroke%3D'%23FF963C'%20stroke-opacity%3D'.26'%20stroke-width%3D'1'%2F%3E%20%3Cg%20fill%3D'none'%20stroke%3D'%23FF963C'%20stroke-opacity%3D'.22'%20stroke-width%3D'1.2'%3E%20%3Cpath%20d%3D'M-10%20206%20C60%20186%20110%20224%20176%20206%20S290%20178%20330%20198'%2F%3E%20%3Cpath%20d%3D'M-10%20232%20C56%20214%20118%20250%20182%20230%20S296%20204%20330%20222'%2F%3E%20%3Cpath%20d%3D'M-10%20258%20C64%20242%20112%20274%20180%20256%20S288%20232%20330%20248'%2F%3E%20%3Cpath%20d%3D'M-10%20284%20C58%20270%20120%20298%20186%20282%20S294%20260%20330%20274'%2F%3E%3C%2Fg%3E%20%3C%2Fsvg%3E");
  --env-gym: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20320%20300'%3E%20%3Cdefs%3E%3ClinearGradient%20id%3D'c'%20x1%3D'0'%20y1%3D'0'%20x2%3D'0'%20y2%3D'1'%3E%20%3Cstop%20offset%3D'0'%20stop-color%3D'%231A2130'%2F%3E%3Cstop%20offset%3D'.55'%20stop-color%3D'%230D1119'%2F%3E%20%3Cstop%20offset%3D'1'%20stop-color%3D'%2307080C'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%20%3Crect%20width%3D'320'%20height%3D'300'%20fill%3D'url(%23c)'%2F%3E%20%3Cg%20stroke%3D'%2396ACCD'%20stroke-opacity%3D'.34'%20stroke-width%3D'3'%20stroke-linecap%3D'round'%3E%20%3Cpath%20d%3D'M36%2082%20V276'%2F%3E%3Cpath%20d%3D'M120%2062%20V276'%2F%3E%3Cpath%20d%3D'M206%2062%20V276'%2F%3E%3Cpath%20d%3D'M288%2082%20V276'%2F%3E%20%3Cpath%20d%3D'M36%2082%20H288'%2F%3E%3Cpath%20d%3D'M120%2062%20H206'%2F%3E%3C%2Fg%3E%20%3Cg%20stroke%3D'%23B8C9E2'%20stroke-opacity%3D'.2'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%3E%20%3Cpath%20d%3D'M64%20132%20H100'%2F%3E%3Cpath%20d%3D'M226%20132%20H262'%2F%3E%3Cpath%20d%3D'M64%20168%20H100'%2F%3E%3Cpath%20d%3D'M226%20168%20H262'%2F%3E%3C%2Fg%3E%20%3Cpath%20d%3D'M0%20276%20H320'%20stroke%3D'%2396ACCD'%20stroke-opacity%3D'.18'%20stroke-width%3D'1'%2F%3E%20%3C%2Fsvg%3E");
  --env-play: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20320%20300'%3E%20%3Cdefs%3E%3ClinearGradient%20id%3D'c'%20x1%3D'0'%20y1%3D'0'%20x2%3D'0'%20y2%3D'1'%3E%20%3Cstop%20offset%3D'0'%20stop-color%3D'%23111A38'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'%2307080C'%2F%3E%3C%2FlinearGradient%3E%20%3ClinearGradient%20id%3D'b'%20x1%3D'0'%20y1%3D'0'%20x2%3D'0'%20y2%3D'1'%3E%20%3Cstop%20offset%3D'0'%20stop-color%3D'%238FA5FF'%20stop-opacity%3D'.30'%2F%3E%20%3Cstop%20offset%3D'1'%20stop-color%3D'%238FA5FF'%20stop-opacity%3D'0'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%20%3Crect%20width%3D'320'%20height%3D'300'%20fill%3D'url(%23c)'%2F%3E%20%3Cpath%20d%3D'M138%200%20L190%200%20L248%20300%20L74%20300%20Z'%20fill%3D'url(%23b)'%2F%3E%20%3Cg%20stroke%3D'%236080FF'%20stroke-opacity%3D'.4'%20stroke-width%3D'1.4'%20fill%3D'none'%3E%20%3Cpath%20d%3D'M18%20118%20H54%20V150%20H90'%2F%3E%3Cpath%20d%3D'M18%20182%20H54%20V150'%2F%3E%20%3Cpath%20d%3D'M302%20118%20H266%20V150%20H230'%2F%3E%3Cpath%20d%3D'M302%20182%20H266%20V150'%2F%3E%20%3Cpath%20d%3D'M90%20150%20H230'%2F%3E%3C%2Fg%3E%20%3Cg%20fill%3D'%236080FF'%20fill-opacity%3D'.5'%3E%20%3Ccircle%20cx%3D'18'%20cy%3D'118'%20r%3D'3'%2F%3E%3Ccircle%20cx%3D'18'%20cy%3D'182'%20r%3D'3'%2F%3E%20%3Ccircle%20cx%3D'302'%20cy%3D'118'%20r%3D'3'%2F%3E%3Ccircle%20cx%3D'302'%20cy%3D'182'%20r%3D'3'%2F%3E%3C%2Fg%3E%20%3Ccircle%20cx%3D'160'%20cy%3D'150'%20r%3D'6'%20fill%3D'%23E8C15A'%20fill-opacity%3D'.7'%2F%3E%20%3C%2Fsvg%3E");
}

@media (min-width: 900px) {
  :root { --gout: 64px; }
  .tel-seul { display: none !important; }
  .pc-seul { display: block !important; }
  .entete { height: 76px; padding: 0 calc(var(--gout) - 10px); }
  .marque b { font-size: 17px; }
  .rail { position: fixed; right: 10px; top: 50%; transform: translateY(-50%); z-index: 50; display: grid; }
  .rail a { width: 44px; height: 44px; display: grid; place-items: center; }
  .rail i { display: block; width: 3px; height: 14px; border-radius: 2px; background: rgba(255,255,255,.7); box-shadow: 0 1px 6px rgba(0,0,0,.4); transition: height .3s, background .3s; }
  .rail a.on i { height: 26px; background: var(--or); }
  .rail a:hover i { background: #fff; height: 20px; }

  .e1 .fond video { object-position: 100% 50%; }
  .e1 .voile { background: radial-gradient(46% 42% at 20% 66%, rgba(var(--v),.6) 0%, rgba(var(--v),.42) 55%, rgba(var(--v),0) 100%), linear-gradient(90deg, rgba(var(--v),.4) 0%, rgba(var(--v),.24) 30%, rgba(var(--v),0) 54%), linear-gradient(180deg, rgba(var(--v),.28) 0%, rgba(var(--v),0) 14%, rgba(var(--v),0) 64%, rgba(var(--v),.28) 100%); }
  .e1 .contenu { bottom: 72px; max-width: 1040px; gap: 22px; }
  .e1 .t-xxl { font-size: clamp(54px, 6vw, 100px); }
  .e1 .chapo { font-size: 20px; }
  .e1 .ligne-cta { display: flex; align-items: center; gap: 22px; }

  .e2 .voile { background: linear-gradient(90deg, rgba(var(--v),.68) 0%, rgba(var(--v),.62) 50%, rgba(var(--v),.42) 64%, rgba(var(--v),0) 82%), linear-gradient(180deg, rgba(var(--v),.4) 0%, rgba(var(--v),0) 22%); }
  .e2 .contenu { max-width: clamp(1312px, 88vw, 1680px); margin: 0 auto; padding: 116px var(--gout) 56px; }
  .e2 .tete { max-width: 900px; }
  .e2 .phrase-vrai { font-size: 19px; }
  .portes { margin: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; background: none; }
  .porte { height: auto; aspect-ratio: 3 / 4; align-items: flex-end; padding: 0 22px 24px; border-radius: var(--rayon); box-shadow: 0 18px 44px rgba(0,0,0,.3); }
  .porte::before { background: linear-gradient(180deg, rgba(var(--v),0) 0%, rgba(var(--v),0) 48%, rgba(var(--v),.5) 76%, rgba(var(--v),.68) 100%); }
  .porte .texte { max-width: none; }
  .porte .nom { font-size: 30px; }
  .porte [data-logo], .cinema-haut [data-logo] { width: 40px; height: 40px; }
  .porte .ligne { font-size: 16px; }
  .porte .entrer { top: 20px; right: 20px; margin-top: 0; }
  .cinema-bas { bottom: 60px; gap: 22px; }
  .plaque-monde { font-size: 29px; padding: 6px 13px 5px; }
  .cinema-haut { padding-top: 22px; }

  .e3 .voile { background: radial-gradient(30% 40% at 15% 52%, rgba(var(--v),.68) 0%, rgba(var(--v),.58) 55%, rgba(var(--v),0) 100%), linear-gradient(270deg, rgba(var(--v),.8) 0, rgba(var(--v),.55) 32%, rgba(var(--v),0) 46%); }
  .e3 .contenu { display: grid; grid-template-columns: minmax(0, 1fr) 400px minmax(0, 1fr); column-gap: 56px; align-items: center; padding: 92px var(--gout) 40px; max-width: 1640px; margin: 0 auto; }
  .e3 .tete { justify-items: start; text-align: left; align-self: center; }
  .e3 .tete .sous-titre { display: block; max-width: 400px; margin-top: 8px; font-size: 17px; }
  .e3 .t-l { font-size: clamp(40px, 3.8vw, 60px); }
  .e3 .cote { align-items: flex-start; text-align: left; max-width: 420px; gap: 16px; }
  .e3 .cote::before { display: none; }
  .e3 .verite { font-size: 20px; }
  .gestes { order: 1; gap: 12px; }
  .e3 .sim { order: 2; margin-top: 4px; }
  .gestes li { font-size: 16px; }
  .sim { align-items: flex-start; }
  .sim .etat { text-align: left; }
  .pips { justify-content: flex-start; }
  .pips-dit { text-align: left; }

  .e-marche .voile { background: radial-gradient(55% 34% at 28% 18%, rgba(var(--v),.4) 0%, rgba(var(--v),.24) 60%, rgba(var(--v),0) 100%), linear-gradient(180deg, rgba(var(--v),.16) 0%, rgba(var(--v),.26) 38%, rgba(var(--v),.34) 100%); }
  .e-marche .fond img { scale: none; transform-origin: 50% 40%; }
  .e-marche .contenu { max-width: clamp(1312px, 88vw, 1680px); margin: 0 auto; min-height: 100vh; min-height: 100svh; padding: 104px var(--gout) 44px; gap: 20px; align-content: center; }
  .e-marche .tete { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: 56px; row-gap: 10px; align-items: end; }
  .e-marche .tete .surtitre { grid-column: 1 / -1; }
  .e-marche .t-m { grid-column: 1; grid-row: 2 / span 2; align-self: end; font-size: 48px; }
  .e-marche .sous-titre, .e-marche .chapo { grid-column: 2; max-width: 640px; font-size: 17px; }
  .marche-onglets { display: none; }
  .e-marche .blocs { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); column-gap: 14px; row-gap: 0; }
  .e-marche .bloc { grid-area: auto; grid-row: span 4; grid-template-rows: subgrid; row-gap: 14px; visibility: visible; opacity: 1; padding: 20px 20px 22px; }
  .e-marche .plaque-monde { font-size: 20px; padding: 7px 11px 6px; }
  .e-marche .bloc-tete [data-logo] { width: 36px; height: 36px; margin: 0; }
  .e-marche .bloc-tete { display: grid; grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-content: start; }
  .e-marche .bloc-tete .discipline { grid-column: 1 / -1; }
  .e-marche .gestes { gap: 10px; }
  .e-marche .gestes li { font-size: 14.5px; }
  .e-marche .pied-marche { gap: 2px; }
  .e-marche .pied-marche .micro { font-size: 14px; }
  .e-marche .note-ligne .lib { letter-spacing: .08em; }

  .e4 .voile { background: radial-gradient(34% 48% at 68% 50%, rgba(var(--v),.34) 0%, rgba(var(--v),.22) 65%, rgba(var(--v),0) 100%), linear-gradient(90deg, rgba(var(--v),.6) 0%, rgba(var(--v),.5) 30%, rgba(var(--v),0) 42%), linear-gradient(180deg, rgba(var(--v),.26) 0%, rgba(var(--v),0) 16%); }
  .e4 .titre { top: 50%; transform: translateY(-50%); left: var(--gout); right: auto; width: 420px; }
  .e4 .t-l { font-size: 42px; }
  .e4 .sous-titre { font-size: 17px; }
  .livret { left: auto; right: var(--droite, 64px); top: var(--haut, 96px); }
  .piste { overflow: visible; padding: 0; gap: 0; scroll-snap-type: none; perspective: 2400px; }
  .feuillet { display: none; }
  .feuillet.vue { display: block; animation: apparait .35s ease both; }
  .feuillet:nth-last-child(2) { margin-right: 0; }
  @keyframes apparait { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
  .feuillet.gauche .page { border-radius: 12px 2px 2px 12px; box-shadow: 0 30px 60px rgba(0,0,0,.34), inset -24px 0 26px -18px rgba(0,0,0,.6), inset 0 0 0 1px rgba(232,193,90,.28); }
  .feuillet.droite .page { border-radius: 2px 12px 12px 2px; box-shadow: 0 30px 60px rgba(0,0,0,.34), inset 24px 0 26px -18px rgba(0,0,0,.6), inset 0 0 0 1px rgba(232,193,90,.28); }
  .feuillet.gauche .page::after { left: 0; right: auto; }
  .feuillet.dos .page { border-radius: 2px 12px 12px 2px; }
  .pagination { left: auto; right: var(--droite, 64px); width: calc(728px * var(--k)); }
  .pagination .prec { display: inline-flex; }
  .e5 .voile { background: linear-gradient(90deg, rgba(var(--v),.3) 0%, rgba(var(--v),.1) 34%, rgba(var(--v),.36) 56%, rgba(var(--v),.6) 100%), linear-gradient(180deg, rgba(var(--v),.4) 0%, rgba(var(--v),0) 20%); }
  .e5 .contenu { display: grid; grid-template-columns: 372px minmax(380px, 460px); grid-template-rows: auto auto; column-gap: 80px; row-gap: 22px; align-content: center; justify-content: center; text-align: left; }
  .e5 .colonne-carte { width: 372px; grid-column: 1; grid-row: 1 / span 2; }
  .e5 .tete { grid-column: 2; grid-row: 1; justify-items: start; align-self: end; }
  .e5 .formulaire { grid-column: 2; grid-row: 2; align-self: start; }
  .e5 .formulaire .micro { text-align: left; }

  .e6 .voile { background: radial-gradient(40% 46% at 50% 52%, rgba(255,240,205,.55) 0%, rgba(255,240,205,.3) 58%, rgba(255,240,205,0) 100%); }
  .e6 .statut, .e6 .invite { max-width: 620px; }
  .e6 .statut { font-size: 17px; }
  .e6 .invite { font-size: 18px; }
  .date { font-size: min(188px, 15vw, 17vh); }
  .date.date-mot { margin-top: 4.5vh; font-size: min(224px, 11.4vw, 20vh); }
  .beta { margin-top: 4.5vh; padding-top: 10vh; }
  .beta::before { height: 8vh; }
  .beta-jour { font-size: min(76px, 7.6vh); }
  .e6 .statut { margin-top: 5.5vh; }
  .e6 .btn { margin-top: 7vh; }
  .beta-lib { font-size: 13px; }
  .phrase-pole { font-size: 16px; }
  .phrase-pole { font-size: clamp(12px, 1.11vw, 16px); }

  .eia .fond img { scale: 1.7; transform-origin: 0% 50%; }
  .eia .voile { background: linear-gradient(90deg, rgba(var(--v),.76) 0%, rgba(var(--v),.68) 42%, rgba(var(--v),.2) 62%, rgba(var(--v),.1) 100%), linear-gradient(180deg, rgba(var(--v),.3) 0%, rgba(var(--v),0) 22%, rgba(var(--v),0) 78%, rgba(var(--v),.3) 100%); }
  .eia .tete::before, .ia-pied::before { content: none; }
  .eia .contenu { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: clamp(48px, 6vw, 112px); row-gap: 26px;
    max-width: clamp(1180px, 84vw, 1560px); margin: 0 auto; padding: 110px var(--gout) 72px; }
  .eia .tete { grid-column: 1; grid-row: 1; align-self: end; gap: 14px; }
  .eia .t-m { font-size: clamp(38px, 3.4vw, 58px); }
  .eia .chapo { font-size: 19px; max-width: 36ch; }
  .ia-points { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 8px 30px; }
  .ia-points li { grid-template-columns: 40px 1fr; column-gap: 14px; padding: 22px 0; }
  .ia-points li::before { font-size: 15px; }
  .ia-points b { font-size: 21px; }
  .ia-points span { font-size: 16.5px; }
  .ia-pied { grid-column: 1; grid-row: 2; align-self: start; gap: 8px; max-width: 46ch; }
  .ia-maison { font-size: 16px; }
  .ia-contact { font-size: 15px; }

  .e8 .fond video { object-position: 70% 40%; }
  .e8 .voile { background: linear-gradient(90deg, rgba(var(--v),.72) 0%, rgba(var(--v),.64) 40%, rgba(var(--v),.25) 56%, rgba(var(--v),0) 66%), linear-gradient(180deg, rgba(var(--v),.3) 0%, rgba(var(--v),0) 18%, rgba(var(--v),0) 70%, rgba(var(--v),.45) 100%); }
  .e8 .contenu { max-width: 760px; padding-bottom: 48px; }
  .e8 .t-l { font-size: 56px; }
}
@media (min-width: 900px) and (max-width: 1279px) {
  .porte .texte { grid-template-columns: auto; row-gap: 9px; }
  .porte .nom { font-size: clamp(28px, 6vw - 27px, 30px); }
  .porte .ligne { margin-top: 0; }
  .phrase-pole { font-size: 11.5px; line-height: 1.38; }
}
@media (min-width: 901px) { .kc-scene { --l: 360px; } .avatar-choix[data-choix="app"] .visages button { width: 52px; height: 52px; } .avatar-choix .visages button { width: 54px; height: 54px; } }
@media (max-width: 899px) and (max-height: 700px) {
  .e-marche .contenu { padding-top: 58px; gap: 6px; }
  .e-marche .tete { gap: 5px; }
  .e-marche .tete .surtitre { display: none; }
  .e-marche .t-m { font-size: 23px; }
  .e-marche .sous-titre, .e-marche .chapo { font-size: 13.5px; line-height: 1.36; }
  .e-marche .bloc { gap: 6px; padding: 11px 12px 12px; }
  .e-marche .gestes { gap: 4px; }
  .e-marche .pied-marche .pied-2 { order: -1; }
  .e-marche .gestes li { font-size: 13px; line-height: 1.32; }
  .e-marche .note-ligne, .e-marche .difference { font-size: 13px; line-height: 1.34; }
  .e-marche .note-ligne { padding-top: 7px; }
  .e-marche .note-ligne > b { font-size: 26px; }
  .e3 .contenu { padding-top: 58px; gap: 6px; }
  .e3 .tete .surtitre { display: none; }
  .e3 .t-l { font-size: 23px; }
  .telephone { gap: 5px; padding-top: 4px; }
  .app-barre { height: 28px; }
  .app-onglets button { min-height: 44px; }
  .e3 .verite { font-size: 14px; }
  .sim { gap: 4px; }
  .sim .btn { min-height: 46px; }
}
@media (min-width: 900px) and (max-height: 820px) {
  .e-marche .contenu { padding-top: 88px; padding-bottom: 24px; gap: 14px; }
  .e-marche .t-m { font-size: 40px; }
  .e-marche .sous-titre, .e-marche .chapo { font-size: 15.5px; }
  .e-marche .bloc { row-gap: 10px; padding: 16px 18px 18px; }
  .e-marche .gestes { gap: 7px; }
  .e-marche .gestes li { font-size: 13.5px; }
  .e-marche .note-ligne, .e-marche .difference { font-size: 13.5px; }
  .e2 .contenu { padding-top: 92px; padding-bottom: 28px; }
  .e2 .phrase { font-size: min(clamp(31px, 8.5vw, 72px), 7vh); }
  .e2 .phrase-or { font-size: min(clamp(24px, 6.4vw, 48px), 4.6vh); }
  .e2 .phrase-vrai { font-size: 16px; margin-top: 10px; }
  .e2 .app { margin: 16px 0 10px; }
  .porte { aspect-ratio: auto; height: 40vh; }
}
@media (min-width: 1680px) and (min-height: 1000px) {
  .e-marche .contenu { gap: 26px; }
  .e-marche .t-m { font-size: 58px; }
  .e-marche .sous-titre, .e-marche .chapo { max-width: 720px; font-size: 19px; }
  .e-marche .bloc { row-gap: 18px; padding: 26px 26px 28px; }
  .e-marche .plaque-monde { font-size: 24px; }
  .e-marche .bloc-tete [data-logo] { width: 40px; height: 40px; }
  .e-marche .discipline { font-size: 16px; }
  .e-marche .gestes { gap: 12px; }
  .e-marche .gestes li { font-size: 16.5px; }
  .e-marche .gestes li::before { width: 25px; height: 25px; font-size: 13px; }
  .e-marche .note-ligne, .e-marche .difference { font-size: 16px; }
  .e-marche .note-ligne > b { font-size: 36px; }
  .e-marche .lib { font-size: 11.5px; }
  .e-marche .pied-marche .micro { font-size: 15.5px; }
}
@media (min-width: 900px) and (max-height: 740px) {
  .e-marche .contenu { padding-top: 82px; padding-bottom: 16px; gap: 10px; }
  .e-marche .tete { row-gap: 6px; }
  .e-marche .t-m { font-size: 36px; }
  .e-marche .bloc { row-gap: 8px; padding: 14px 16px 15px; }
  .e-marche .gestes { gap: 5px; }
  .e-marche .gestes li, .e-marche .note-ligne, .e-marche .difference { font-size: 13.5px; line-height: 1.34; }
}

@media (max-width: 899px) {
.micro, .pips-dit, .sim .recommencer, .pagination .nav,
  .apercu, .champ-accord label, .notice .lien-notice { font-size: 14px; }
  .app-onglets button, .mondes-choix button { font-size: 14px; letter-spacing: 0; }
  .app-onglets button { padding-block: 3px; }
  .mondes-choix button { height: 44px; min-height: 44px; padding-block: 3px; }
.app-sim, .sim .etat, .vivante .lib, .autour-tete,
  .avatar-choix .choix-lib, .avatar-choix[data-choix="app"] .choix-lib,
  .e-marche .lib, .champ-saisie label, .pied .legal { font-size: 12px; }
  .avatar-choix[data-choix="app"] { flex-wrap: wrap; gap: 4px; }
  .avatar-choix[data-choix="app"] .choix-lib { width: 56px; max-width: 56px; padding-inline: 2px; letter-spacing: .02em; }
  .e3 .cote { margin-top: 0; }
  .sim .etat { min-height: 5em; letter-spacing: .06em; width: 340px; max-width: 100%; }
  .phrase-pole { font-size: 14px; }
  .e-marche .gestes li, .e-marche .note-ligne, .e-marche .difference { font-size: 14px; }
  .e-marche .contenu { gap: 10px; }
  .e-marche .tete { gap: 6px; }
  .e-marche .bloc { gap: 8px; padding: 12px; }
  .e-marche .gestes { gap: 6px; }

  .carte-boite .kc-logo b, .carte-boite .kc-pastille,
  .carte-boite .kc-grand span, .carte-boite .kc-etiquette,
  .carte-boite .kc-nom span, .carte-boite .kc-val i,
  .carte-boite .kc-lib, .carte-boite .kc-lib.petit,
  .carte-boite .kc-plaque span, .carte-boite .kc-versoTitre,
  .carte-boite .kc-defs b { font-size: calc(12px / var(--s)); letter-spacing: .02em; }
  .carte-boite .kc-defs li { font-size: calc(14px / var(--s)); color: var(--t2); }
  .carte-boite .kc-val { font-size: max(24px, calc(14px / var(--s))); }
  .carte-boite .kc-defVal { font-size: max(15px, calc(14px / var(--s))); }
  .kc-defs { overflow-y: auto; }
  .kc-six { gap: 10px 6px; }
  .kc-case { padding-left: 5px; }
  .kc-lib { overflow-wrap: anywhere; }
  .kc-plaque { padding-inline: 10px; gap: 4px; }

  .page .bandeau .kid, .page .bandeau .doc,
  .page .champ .lib, .page .signature .lib, .visa .monde-sous,
  .couv-sous, .couv-pied { font-size: calc(12px / var(--k)); letter-spacing: .03em; }
  .page .champ .val, .page .champ .val.num, .visa .phrase-monde { font-size: calc(14px / var(--k)); }
  .page .champ .val.grand { font-size: max(24px, calc(14px / var(--k))); }
  .page .champ .val.gros { font-size: max(20px, calc(14px / var(--k))); }
  .visa .gravure-cadre { height: 128px; }
  .visa .champ { top: 278px !important; width: 100px; }
  .visa .champ .lib { white-space: normal; min-height: 2.4em; }
  .visa .phrase-monde { top: 350px; }
.e2 .surtitre, .e2 .phrase, .e2 .phrase-or, .e2 .phrase-vrai,
  .e3 .tete, .e3 .cote, .e-marche .tete, .e-marche .pied-marche,
  .e4 .titre, .e5 .tete, .formulaire.fermee .micro, .eia .tete, .ia-pied,
  .e8 .surtitre, .e8 .t-l, .e8 .chapo, .e8 .pied, .cinema-ligne {
    background: rgba(12,12,15,.9); border-radius: 8px;
    box-shadow: 0 0 0 6px rgba(12,12,15,.9);
  }
  .porte .ligne { background: rgba(12,12,15,.84); border-radius: 4px; box-shadow: 0 0 0 4px rgba(12,12,15,.84); }
  .app-barre, .app-onglets, .mondes-choix, .avatar-choix .genre, .j0,
  .e-marche .bloc, .ia-points, .vivante, .autour,
  .formulaire .avatar-choix { background: rgba(12,12,15,.84); }
  .page:not(.couverture) { background: rgba(10,14,26,.96); }
  .page:not(.couverture)::before { opacity: .12; }
  .page .champ .val.grand, .page .champ .val.gros { background: none; color: var(--or); }
  .couv-kid, .couv-sous, .couv-pied { background: rgba(12,12,15,.84); }
  .kc-grand, .kc-etiquette, .kc-nom, .kc-socle { background: rgba(12,12,15,.98); }
  .kc-pastille { background: var(--acc); }
  .kc-nom span i { color: #fff; }
  .visa .monde-titre { color: var(--sur-acc); background: var(--acc); }
  .kc-lib, .kc-val i { color: var(--t2); }
  .e6 .surtitre, .e6 .date, .e6 .beta-date, .e6 .statut, .e6 .invite {
    background: rgba(255,246,204,.9); border-radius: 8px;
    box-shadow: 0 0 0 6px rgba(255,246,204,.9);
  }
}

/* Libellés utiles : seuil de 13 px après réduction des cartes et du livret. */
.carte-boite .kc-logo b, .carte-boite .kc-pastille,
.carte-boite .kc-grand span, .carte-boite .kc-etiquette,
.carte-boite .kc-nom span, .carte-boite .kc-val i,
.carte-boite .kc-lib, .carte-boite .kc-lib.petit,
.carte-boite .kc-plaque span, .carte-boite .kc-versoTitre,
.carte-boite .kc-defs b { font-size: calc(13px / var(--s)); letter-spacing: 0; }
.carte-boite .kc-defs li { font-size: calc(14px / var(--s)); color: #E3E3E4; }
.carte-boite .kc-val { font-size: max(24px, calc(14px / var(--s))); }
.carte-boite .kc-defVal { font-size: max(15px, calc(14px / var(--s))); }

.kc-lib, .kc-val i, .kc-nom span { color: #E3E3E4; }
.kc-nom span i { color: #fff; }
.kc-scene.pseudo-fantome .kc-nom b { opacity: 1; color: #BFC0C3; }
.kc-defs { overflow-y: auto; }
.kc-six { gap: 10px 6px; }
.kc-case { padding-left: 5px; }
.kc-lib { display: block; overflow: visible; overflow-wrap: anywhere; min-height: 2.44em; }
.kc-plaque { padding-inline: 10px; gap: 4px; }
.kc-pastille { background: var(--acc); }
.e1 .micro { font-size: 14px; color: #fff; }
.pied .legal { font-size: 12px; }

.page:not(.couverture) { background: #0A0E1A; }
.page:not(.couverture)::before { opacity: .08; }
.page .bandeau .kid, .page .bandeau .doc,
.page .champ .lib, .page .signature .lib, .visa .monde-sous,
.couv-sous, .couv-pied { font-size: calc(13px / var(--k)); letter-spacing: 0; color: #E3E3E4; }
.page .champ .lib, .page .signature .lib { line-height: 1; }
.page .champ .val { line-height: 1; margin-top: 1px; }
.page .champ .val, .page .champ .val.num, .visa .phrase-monde { font-size: calc(14px / var(--k)); }
.page .champ .val.grand { font-size: max(24px, calc(14px / var(--k))); }
.page .champ .val.gros { font-size: max(20px, calc(14px / var(--k))); }
.page .champ .val.grand, .page .champ .val.gros { background: none; color: var(--or); }
.visa .gravure-cadre { height: 128px; }
.visa .champ { top: 278px !important; width: 100px; }
.visa .champ .lib { white-space: normal; min-height: 2.4em; }
.visa .phrase-monde { top: 350px; }
.visa .monde-titre { color: var(--sur-acc); background: var(--acc); }
.couv-kid, .couv-sous, .couv-pied { background: #0C0C0F; }
/* Les mots des tampons gardent leur encre pleine, sans filtre qui efface les lettres. */
.page .tampon { left: 180px !important; top: 418px !important; width: 164px !important; height: 130px !important; }
.page.visa .tampon { left: 12px !important; }
.page .tampon svg text, .poser-cible svg text { font-size: calc(13px / var(--k)); letter-spacing: 0; }
.cases-vides { left: 200px; }
.cases-vides i { width: 42px; height: 42px; }
.cases-vides { gap: 4px; }
.poser-cible { inset: auto; left: -16px; top: -34px; width: 164px; height: 130px; }

@media (max-width: 899px) and (max-height: 700px) {
  .e-marche .sous-titre, .e-marche .chapo { font-size: 14px; }
  .e3 .contenu { gap: 4px; }
  .telephone { padding-bottom: 6px; }
  .e3 .cote { gap: 6px; }
  .e-marche .contenu { gap: 3px; }
  .e-marche .tete { gap: 3px; }
  .e-marche .bloc { gap: 3px; padding: 8px 10px 9px; }
  .e-marche .bloc-tete { row-gap: 4px; }
  .e-marche .gestes { gap: 3px; }
  .e-marche .gestes li { gap: 6px; }
  .e-marche .note-ligne { padding-top: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .e-marche .bloc { transition: none; }
  .fond img { animation: none; }
  .e2 .phrase .mot, .e2 .phrase-or, .e2 .phrase-vrai { opacity: 1 !important; }
  .cinema.on, .rideau.joue, .kc-scene.apparait .kc-flip, .cases-vides .poser, .page.tressaille, .poser-cible svg { animation: none !important; }
.page.claque .tampon svg, .e6.vu .date-mot .mot, .feuillet.vue { animation: none !important; }
  .feuillet { transform: none !important; }
  .porte .photo { transition: none; }
  .kc-flip { transition: none !important; transform: none !important; }
  .kc-flip[data-face="dos"] .kc-face { opacity: 0; }
  .kc-flip[data-face="dos"] .kc-dos { opacity: 1; transform: none; }
  .kc-dos { opacity: 0; transform: none; transition: opacity 150ms linear; }
  .kc-face { transition: opacity 150ms linear; }
  .kc-card.brille .kc-reflet, .kc-card.eclat .kc-reflet, .kc-gain.vole { animation: none; }
  .vivante-barre i { transition: none; }
  .kc-card[data-anime="1"] .kc-case { opacity: 1; animation: none; }
  .kc-tranche { transition: none; }
}

.pose .fond img { animation: none; }
.pose .kc-card .kc-case { opacity: 1 !important; animation: none !important; }
.pose .kc-face.reflet-pose .kc-reflet { opacity: .9; transform: translateX(-26%); }
.pose .page.claque .tampon svg, .pose .e6.vu .date-mot .mot, .pose .feuillet.vue { animation: none !important; }

/* Corrections de lecture : sections à leur hauteur utile, détails au premier geste. */
.e3, .e6, .eia { min-height: 0; }
.e3 .contenu { min-height: 0; padding-top: 64px; padding-bottom: 28px; }
#app.sim-arrivee .pips, #app.sim-arrivee .vivante,
#app.sim-arrivee .recommencer.cache { display: none; }
.e6 .contenu { min-height: 0; padding: 80px var(--gout) 36px; }
.e6 .date.date-mot { margin-top: 20px; font-size: clamp(34px, 12.6vw, 108px); }
.e6 .beta { margin-top: 22px; padding-top: 28px; }
.e6 .beta::before { height: 18px; }
.e6 .beta-jour { font-size: clamp(28px, 4.5vw, 54px); }
.e6 .statut { margin-top: 22px; }
.e6 .btn { margin-top: 24px; }
.eia .contenu { min-height: 0; padding-top: 80px; padding-bottom: 32px; gap: 16px; }
.eia .voile { background: rgba(12,12,15,.76); }
.eia .tete::before, .ia-pied::before { content: none; }
.eia .tete, .ia-pied { background: none; box-shadow: none; }
.eia .t-m { font-size: clamp(28px, 4vw, 42px); }
.eia .chapo { font-size: 16px; }
.eia .ia-points { padding: 4px 16px; background: rgba(12,12,15,.5); }
.eia .ia-points li { padding: 10px 0; }
.eia .ia-points b { font-size: 17px; }
.eia .ia-points span { font-size: 14.5px; }
.eia .ia-maison { font-size: 14px; }
@media (min-width: 900px) {
  .e3 .contenu { grid-template-columns: 400px minmax(0, 480px); gap: 16px 48px;
    align-items: start; justify-content: center; padding-top: 80px; max-width: 1280px; }
  .e3 .tete { grid-column: 1 / -1; grid-row: 1; align-self: start; gap: 8px; }
  .e3 .t-l { font-size: 40px; }
  .e3 .tete .sous-titre { max-width: 70ch; margin-top: 0; }
  .e3 .telephone { grid-column: 1; grid-row: 2; }
  .e3 .cote { grid-column: 2; grid-row: 2; align-self: start; }
  .eia .contenu { column-gap: 40px; row-gap: 16px; }
  .eia .tete { gap: 10px; }
}

.entete { transition: transform .18s ease; }
.entete.masquee:not(:has(:focus-visible)) { transform: translateY(calc(-100% - 16px)); }
.entete:has(:focus-visible) { transform: none; }
main :focus-visible { scroll-margin-top: 88px; }
@media (prefers-reduced-motion: reduce) {
  .entete, .entete::before { transition: none; }
}

@media (min-width: 900px) {
  .e1 .contenu::before { right: -72px; background: radial-gradient(ellipse at 28% 62%, rgba(12,12,15,.88) 0%, rgba(12,12,15,.82) 52%, rgba(12,12,15,.66) 68%, rgba(12,12,15,0) 100%); }
}

@media (min-width: 900px) {
  /* 03/11 : la bande brune unie au-dessus du stade (fond décalé de 218 px) est retirée — le titre se pose sur la photo, lisible grâce au voile du haut. */
  .e3 { background: #0c0c0f; }
}

.e1 .contenu::before { mask-image: linear-gradient(180deg, transparent, #000 12%, #000 92%, transparent); }

.e1 .voile { background: none; }
@media (min-width: 900px) {
  .e3 .voile { background: linear-gradient(180deg, rgba(12,12,15,.86) 0, rgba(12,12,15,.62) 150px, rgba(12,12,15,.18) 300px, rgba(12,12,15,.08) 420px); }
  .e3 .cote::before { display: block; inset: -12px; border-radius: 16px; background: rgba(12,12,15,.74); }
}
@media (max-width: 899px) and (max-height: 700px) {
  .e3 .contenu { padding-top: 60px; }
}

/* 31/10 : repère du film et usages des pôles, sans masquer les images ni le bouton. */
.scene-lien { position: absolute; z-index: 3; top: 80px; left: var(--gout); display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; border: 1px solid rgba(232,193,90,.5); border-radius: 999px; background: #0C0C0F; color: #fff; font: 500 14px/1.3 var(--texte); }
.scene-repere { color: var(--or); font-size: 12px; }
.scene-lien:focus-visible { outline-offset: 5px; }
@media (min-width: 900px) { .scene-lien { top: 100px; left: 40px; } }

/* Parcours court : la carte personnelle suit la simulation, les règles restent dans les mondes. */
.e-marche, .e-marche .contenu { min-height: 0; }
.e-marche .contenu { padding-bottom: 32px; }
.e-marche .bloc { grid-template-rows: auto auto 1fr auto; }
.e-marche .benefice { margin: 0; color: #fff; font: 700 17px/1.35 var(--voix); }
.e-marche .regles-lien { display: inline-flex; align-items: center; min-height: 44px; width: fit-content; color: #fff; font: 600 14px/1.4 var(--texte); text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 900px) {
  .carte-boite .kc-lib, .carte-boite .kc-lib.petit, .carte-boite .kc-val i { font-size: calc(14px / var(--s)); }
  .pagination .nav { font-size: 15px; }
  .e-marche .bloc { grid-template-rows: subgrid; gap: 16px; }
}
@media (min-width: 900px) {
  .e-marche .pied-marche { padding: 12px 16px; border-radius: 12px; background: rgba(12,12,15,.84); }
  .e-marche .pied-marche .micro { color: #fff; }
}

/* Le libellé anglais long garde son mot entier, sans réduire le texte. */
.kc-card[data-monde="match"] .kc-six { grid-template-columns: 1.2fr .8fr 1fr; }
/* La carte agrandie à 360×780 garde le bouton entier au premier écran. */
@media (max-width: 899px) and (min-height: 740px) and (max-height: 800px) {
 .e3 .contenu { gap: 6px; }
 .telephone { gap: 6px; padding-top: 6px; padding-bottom: 6px; }
 .e3 .cote { gap: 6px; }
}

/* 31/10/2026 — cinq scènes cinéma, un écran par pôle, accordéon au bureau. */
.e7 { --or: #EAB94F; --v: 11,17,32; background: #0B1120; min-height: 100svh; isolation: isolate; }
.e7 .contenu { position: relative; width: 100%; max-width: none; min-height: 100svh; padding: 0; margin: 0; }
.e7 .tete { position: absolute; top: 78px; left: 24px; right: 24px; z-index: 4; display: grid; gap: 9px; padding: 0; margin: 0; background: none; box-shadow: none; pointer-events: none; }
.e7 .tete::before { display: none; }
.e7 .surtitre { color: #EAB94F; font-size: 13px; }
.e7 .tete h2 { max-width: 33em; font: 700 22px/1.15 var(--voix); letter-spacing: -.035em; text-wrap: balance; }
.e7 .tete .sous-titre { max-width: 34em; font-size: 13px; line-height: 1.5; }
.poles { position: relative; display: block; width: 100%; height: 100svh; min-height: 568px; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; scrollbar-width: none; }
.poles::-webkit-scrollbar { display: none; }
.poles:focus-visible { outline: 2px solid #EAB94F; outline-offset: -6px; }
.pole-bloc { height: 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.pole { position: relative; width: 100%; height: 100%; color: #fff; container-type: inline-size; }
.pole-recto { position: absolute; inset: 0; overflow: hidden; isolation: isolate; }
.pole-recto picture { position: absolute; inset: 0; z-index: -3; }
.pole-recto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.pole-recto::after { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg,rgba(11,17,32,.6),rgba(11,17,32,.2) 22%,transparent 43%,transparent 55%,rgba(11,17,32,.65) 68%,rgba(11,17,32,.65) 83%,rgba(11,17,32,.75)); }
.pole-recto::before { content: ""; pointer-events: none; position: absolute; inset: 14px; z-index: 3; border: 1px solid rgba(234,185,79,.24); background: linear-gradient(#EAB94F,#EAB94F) top left / 20px 1px no-repeat,linear-gradient(#EAB94F,#EAB94F) top left / 1px 20px no-repeat,linear-gradient(#EAB94F,#EAB94F) bottom right / 20px 1px no-repeat,linear-gradient(#EAB94F,#EAB94F) bottom right / 1px 20px no-repeat; }
.pole-index { position: absolute; bottom: 28px; left: 25px; font: 500 13px/1 var(--frappe); letter-spacing: .13em; color: #EAB94F; }
.pole .tampon-bientot { position: absolute; top: 224px; left: 25px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #EAB94F; border-radius: 2px; background: #0B1120; color: #EAB94F; font: 500 14px/1 var(--frappe); letter-spacing: .06em; }
.pole .tampon-bientot::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #EAB94F; box-shadow: 0 0 12px rgba(234,185,79,.7); }
.pole-texte { position: absolute; bottom: 76px; left: 25px; right: 25px; display: grid; justify-items: start; gap: 20px; }
.pole .nom { margin: 0; display: grid; gap: 12px; font: 700 clamp(46px,16cqw,100px)/.9 var(--voix); letter-spacing: -.065em; text-shadow: 0 2px 28px rgba(11,17,32,.6); }
.pole .pole-marque { font: 500 14px/1 var(--frappe); letter-spacing: .48em; text-transform: uppercase; color: #EAB94F; }
.pole .pole-domaine { white-space: nowrap; }
.pole-usages { font: 400 16px/1.5 var(--texte); }
.pole-usages p { margin: 0; }
.pole-decouvrir { display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 48px; min-width: 165px; padding: 0 16px; border: 1px solid rgba(234,185,79,.8); background: rgba(11,17,32,.88); color: #fff; font: 500 14px/1 var(--texte); }
.pole-decouvrir span:last-child { color: #EAB94F; font-size: 24px; }
.pole-decouvrir:focus-visible { outline: 3px solid #EAB94F; outline-offset: 5px; }
.pole-decouvrir:hover { background: #EAB94F; color: #0B1120; }
.pole-decouvrir:hover span:last-child { color: #0B1120; }
@media (min-width: 900px) {
 .e7 .tete { top: 100px; left: 54px; right: auto; max-width: 62%; gap: 12px; }
 .e7 .tete h2 { font-size: clamp(24px,2.3vw,38px); }
 .e7 .tete .sous-titre { font-size: 15px; }
 .poles { display: flex; min-height: 720px; overflow: hidden; scroll-snap-type: none; }
 .pole-bloc { flex: 1 1 0; height: 100%; transition: flex-grow .65s cubic-bezier(.2,.7,.2,1); }
 .pole-bloc:has(.is-active) { flex-grow: 8; }
 .pole { border-right: 1px solid rgba(234,185,79,.35); }
 .pole-recto::before { inset: 20px 12px; }
 .pole-recto::after { background: linear-gradient(180deg,rgba(11,17,32,.6),rgba(11,17,32,.2) 24%,transparent 43%,transparent 55%,rgba(11,17,32,.65) 68%,rgba(11,17,32,.65) 89%,rgba(11,17,32,.75)); }
 .pole-texte { left: 54px; right: 30px; bottom: 96px; gap: 26px; }
 .pole .nom { font-size: clamp(70px,16cqw,180px); gap: 18px; }
 .pole .pole-marque { font-size: 16px; }
 .pole-usages { font-size: 19px; }
 .pole-index { left: 54px; bottom: 40px; }
 .pole .tampon-bientot { top: 270px; left: 54px; }
 .pole:not(.is-active) .pole-recto::after { background: linear-gradient(180deg,rgba(11,17,32,.55),rgba(11,17,32,.06) 35%,rgba(11,17,32,.68) 80%,rgba(11,17,32,.75)); }
 .pole:not(.is-active) .pole-texte { inset: auto 0 116px; align-items: center; justify-items: center; gap: 0; }
 .pole:not(.is-active) .nom { writing-mode: vertical-rl; transform: rotate(180deg); font-size: clamp(34px,3.4vw,58px); letter-spacing: -.045em; gap: 10px; }
 .pole:not(.is-active) .pole-marque { font-size: 13px; letter-spacing: .25em; }
 .pole:not(.is-active) .pole-usages, .pole:not(.is-active) .tampon-bientot { visibility: hidden; height: 0; }
 .pole:not(.is-active) .pole-decouvrir { position: absolute; top: calc(100% + 20px); min-width: 44px; width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; border-color: rgba(234,185,79,.6); }
 .pole:not(.is-active) .pole-decouvrir span:first-child { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
 .pole:not(.is-active) .pole-index { left: 0; right: 0; text-align: center; font-size: 13px; letter-spacing: 0; }
}
@media (max-width: 899px) and (max-height: 700px) {
 .e7 .tete { top: 66px; gap: 6px; }
 .e7 .tete h2 { font-size: 20px; }
 .pole .tampon-bientot { top: 196px; }
 .pole-texte { bottom: 65px; gap: 14px; }
 .pole .nom { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .pole-bloc { transition: none; } .poles { scroll-behavior: auto; } }

/* Le rail global laisse le dernier panneau accessible au pointeur ; il revient au clavier. */
.poles-au-premier-plan .rail:not(:focus-within) { opacity: 0; pointer-events: none; }
@media (max-width: 899px) { .pole-index::after { content: " ↓"; margin-left: 18px; } }
/* Le petit nom or reste lisible sur les costumes et décors dorés. */
.pole .pole-marque { width: max-content; padding: 4px 6px; background: rgba(11,17,32,.92); }

/* Exposition du décor derrière le voile ; les fichiers validés restent intacts. */
.pole-recto img { filter: brightness(1.24); }
.pole[data-pole="dar"] .pole-recto img { filter: brightness(1.4); }
.pole[data-pole="auto"] .pole-recto img { filter: contrast(.68) brightness(1.2); }
.pole[data-pole="culture"] .pole-recto img { filter: brightness(1.05); }
.pole-usages p { width: fit-content; padding: 4px 8px; background: rgba(11,17,32,.92); }
.e7 .surtitre { width: fit-content; padding: 4px 8px; background: rgba(11,17,32,.92); }
.e7 .tete .sous-titre { width: fit-content; background: rgba(11,17,32,.92); box-shadow: 0 0 0 4px rgba(11,17,32,.92); }
.pole-index { padding: 4px 6px; background: rgba(11,17,32,.92); }
.e7 .tete h2 { width: fit-content; background: rgba(11,17,32,.88); box-shadow: 0 0 0 4px rgba(11,17,32,.88); }
@media (min-width: 900px) { .pole:not(.is-active) .pole-index { bottom: 28px; } }
.pole-texte { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) and (max-width: 1199px) { .pole:not(.is-active) .pole-recto::before { inset: 20px 3px; } }

/* Portrait intégré : mêmes proportions et même visage sur chaque carte. */
.kc-scenePhoto::after { background: linear-gradient(90deg, rgba(4,5,8,.82), rgba(4,5,8,.72) 20%, transparent 45%), radial-gradient(50% 22% at 100% 0%, rgba(4,5,8,.8), rgba(4,5,8,.65) 60%, transparent), linear-gradient(180deg, rgba(4,5,8,.3), transparent 22%); }
.kc-photo { height: auto; object-fit: contain; object-position: 50% 0; }
.kc-voile { z-index: 1; background: linear-gradient(180deg, transparent 32%, rgba(4,5,8,.18) 40%, rgba(4,5,8,.88) 51%, #040508 64%), radial-gradient(100% 55% at 50% 90%, rgba(var(--halo),.28), transparent); }
.kc-grand, .kc-nom { background: none; }
.kc-tete { justify-content: flex-end; padding-top: 8px; }
.kc-pastille { position: absolute; left: 16px; top: 16px; padding: 0; background: none; box-shadow: none; color: var(--or-clair); text-shadow: 0 1px 5px #040508; }
.kc-grand { top: 42px; }
.kc-grand b { font-size: 68px; }
.kc-logo b { letter-spacing: .1em; }
.kc-nom { text-align: center; padding: 0 12px 6px; }
.kc-nom b { font-size: 32px; }
.kc-nom span { margin-top: 4px; line-height: 1.15; }
.kc-nom span i { color: #fff; }
.kc-socle { padding: 6px 16px 4px; background: linear-gradient(180deg, rgba(var(--halo),.12), transparent); box-shadow: none; }
.kc-etiquette { position: static; flex: 0 0 auto; padding: 2px 10px 4px; text-align: center; line-height: 1; color: #E3E3E4; background: #040508; }
.kc-etiquette::before { display: none; }
.kc-plaque { height: 26px; flex-basis: 26px; }
.telephone { border-radius: 18px; box-shadow: 0 16px 40px rgba(0,0,0,.25); background: rgba(12,12,15,.08); }
.app-barre { border-radius: 8px; }
.avatar-choix[data-choix="app"] { display: flex; flex-wrap: nowrap; justify-content: center; gap: 8px; }
.avatar-choix[data-choix="app"] .genre { background: rgba(12,12,15,.84); }
.avatar-choix[data-choix="app"] .choix-lib { flex-basis: auto; width: 48px; max-width: 48px; padding: 4px 2px; border-radius: 6px; background: rgba(12,12,15,.84); }
.app-onglets { border-radius: 12px; }
.app-onglets button { border-radius: 8px; }
.e3 .sim { gap: 14px; }
.e3 .cote { padding: 0 12px; }
@media (max-width: 899px) and (min-height: 801px) { .e3 .contenu { gap: 6px; } }
@media (min-width: 900px) {
 .e3 .contenu { gap: 28px 64px; grid-template-columns: 400px minmax(0,480px); }
 .e3 .cote { padding: 20px 24px; gap: 20px; }
 .e3 .cote::before { inset: 0; }
 .e3 .tete { padding-bottom: 8px; }
 .e5 .surtitre { background: rgba(12,12,15,.72); border-radius: 4px; box-shadow: 0 0 0 5px rgba(12,12,15,.72); }
}

.kc-lib { min-height: 1.12em; line-height: 1.12; margin-top: 3px; }
.kc-six { gap: 6px; }
.kc-card[data-monde="play"] .kc-six { grid-template-columns: 1.34fr .9fr .96fr; column-gap: 4px; }
#app:not([data-monde="match"]) .autour { display: none; }

.kc-card[data-monde="play"] .kc-socle { padding-inline: 12px; }

/* ══ LES PALIERS DE LA CARTE (03/11, choix du fondateur : seuils Q1 A, métal vrai Q2 A, walkout Q3 B, festival Q4 B) ══
   La note décide de la matière : Bronze 40–69 (le départ, 65), Argent 70–79, Or 80–89, Or noir 90–97, Légende 98–99
   (décernée). Tout le cadre change : métal conique, brossage, bande spéculaire, biseau éclairé à l'inverse, tranche,
   chiffre gravé, écu. La couleur du monde reste au portrait, au halo et aux statistiques. Noms : KESH_CARTE.PALIERS. */
.kc-scene[data-palier="bronze"] { --m1: #372215; --m2: #885532; --m3: #C38B5B; --m4: #F6D2AA; --encre-metal: #372215; --palier-encre: #D9B99A; --grave: #2A1408; --spec-a: .26;
  --chiffre: linear-gradient(176deg, #FFE9D2 0%, #DAB99B 26%, #B57743 50%, #674026 64%, #CA9B71 86%, #E2C9B2 100%); --lueur: rgba(201,138,85,0); --lueur-a: 0; }
.kc-scene[data-palier="argent"] { --m1: #44484D; --m2: #979BA1; --m3: #D3D6DA; --m4: #FFFFFF; --encre-metal: #2D3135; --palier-encre: #E4E6E9; --grave: #2D3135; --spec-a: .48;
  --chiffre: linear-gradient(176deg, #FFFFFF 0%, #F0F1F3 28%, #A9ADB2 50%, #5E6267 64%, #D9DCDF 86%, #FFFFFF 100%); --lueur: rgba(230,232,236,.18); --lueur-a: .6; }
.kc-scene[data-palier="or"] { --m1: #5A4210; --m2: #B8892A; --m3: #E8C15A; --m4: #FFF6CC; --encre-metal: #3D2C06; --palier-encre: #F3D27E; --grave: #3D2C06; --spec-a: .42;
  --chiffre: linear-gradient(176deg, #FFFBEA 0%, #FFE8A3 26%, #E8C15A 46%, #9C6B12 62%, #E8C15A 84%, #FFF3C4 100%); --lueur: rgba(232,193,90,.36); --lueur-a: .9; }
.kc-scene[data-palier="noir"] { --m1: #020202; --m2: #15120B; --m3: #2E2717; --m4: #E8C15A; --encre-metal: #0A0806; --palier-encre: #E8C15A; --grave: #000; --spec-a: .22;
  --chiffre: linear-gradient(176deg, #FFFBEA 0%, #FFE8A3 22%, #E8C15A 42%, #A8760F 60%, #E8C15A 80%, #FFF3C4 100%); --lueur: rgba(232,193,90,.42); --lueur-a: 1; }
.kc-scene[data-palier="legende"] { --m1: #9A7A45; --m2: #DDBE86; --m3: #F7E2B8; --m4: #FFFDF6; --encre-metal: #5A4520; --palier-encre: #FFF1D6; --grave: #5A4520; --spec-a: .6;
  --chiffre: linear-gradient(176deg, #FFFFFF 0%, #FFF6E2 26%, #EBC98B 46%, #A8803A 62%, #F0D9A8 82%, #FFFFFF 100%); --lueur: rgba(255,236,196,.6); --lueur-a: 1; }

.kc-scene[data-palier] .kc-card { padding: 8px;
  background:
    linear-gradient(118deg, transparent 22%, rgba(255,255,255,var(--spec-a)) 34%, transparent 44%, transparent 64%, rgba(255,255,255,calc(var(--spec-a) * .5)) 72%, transparent 80%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, rgba(0,0,0,.08) 1px 2px, transparent 2px 3px),
    conic-gradient(from 205deg at 50% 38%, var(--m1) 0%, var(--m3) 9%, var(--m4) 14%, var(--m2) 24%, var(--m1) 36%, var(--m2) 50%, var(--m4) 58%, var(--m3) 64%, var(--m2) 78%, var(--m1) 90%, var(--m3) 100%);
  box-shadow: 0 2px 3px rgba(0,0,0,.9), 0 26px 60px rgba(0,0,0,.66), inset 0 1px 0 rgba(255,255,255,.8), inset 1px 0 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.55), inset -1px 0 0 rgba(0,0,0,.4); }
.kc-scene[data-palier] .kc-card .kc-corps { --p: calc(var(--pan) - 4.686px); }
.kc-scene[data-palier] .kc-card .kc-corps::after { --p: calc(var(--pan) - 7.615px); }
.kc-scene[data-palier] .kc-tranche { background: linear-gradient(140deg, var(--m2), var(--m1) 46%, #050403); }
.kc-biseau { display: none; }
.kc-scene[data-palier] .kc-biseau { display: block; position: absolute; inset: 3px; pointer-events: none; --p: calc(var(--pan) - 1.757px);
  clip-path: polygon(var(--p) 0, calc(100% - var(--p)) 0, 100% var(--p), 100% calc(100% - var(--p)), calc(100% - var(--p)) 100%, var(--p) 100%, 0 calc(100% - var(--p)), 0 var(--p));
  background: linear-gradient(298deg, transparent 30%, rgba(255,255,255,.28) 44%, transparent 56%),
    conic-gradient(from 25deg at 50% 62%, var(--m1) 0%, var(--m3) 12%, var(--m2) 28%, var(--m1) 40%, var(--m2) 55%, var(--m4) 62%, var(--m2) 76%, var(--m1) 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.55), inset 0 2px 2px rgba(0,0,0,.45), inset 0 -1px 1px rgba(255,255,255,.25); }
.kc-scene[data-palier="noir"] .kc-card { box-shadow: 0 2px 3px rgba(0,0,0,.9), 0 26px 60px rgba(0,0,0,.66), inset 0 0 0 1.5px #C9A24E, inset 0 0 0 2.5px #000, inset 0 1px 0 rgba(255,255,255,.6); }
.kc-scene[data-palier="noir"] .kc-biseau { box-shadow: inset 0 0 0 1px #E8C15A, inset 0 0 0 2px #000, inset 0 2px 2px rgba(0,0,0,.45); }
.kc-scene[data-palier="legende"] .kc-card { box-shadow: 0 2px 3px rgba(0,0,0,.9), 0 26px 60px rgba(0,0,0,.66), inset 0 0 0 1.5px rgba(232,193,90,.9), inset 0 1px 0 #fff, inset 0 -2px 0 rgba(90,60,20,.5); }
.kc-lueur { position: absolute; inset: -9%; border-radius: 30%; pointer-events: none; background: radial-gradient(closest-side, var(--lueur, transparent), transparent 80%); opacity: var(--lueur-a, 0); transition: opacity 600ms ease; }
.kc-scene[data-palier="legende"] .kc-lueur { animation: kcRespire 3.6s ease-in-out infinite; }
@keyframes kcRespire { 50% { opacity: .55; } }

/* la note gravée dans la matière du palier */
.kc-scene[data-palier] .kc-grand b { background: var(--chiffre); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kc-scene[data-palier] .kc-grand b::before { text-shadow: 0 -1px 0 rgba(255,255,255,.5), 0 1px 0 var(--grave), 0 2px 2px rgba(0,0,0,.8), 0 6px 22px rgba(0,0,0,.75); }
/* l'écu du palier, sous le logo, loin du visage */
.kc-palier { position: absolute; top: 40px; right: 14px; z-index: 3; display: grid; justify-items: center; gap: 4px; pointer-events: none; }
.kc-ecu { width: 36px; height: 42px; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 14%, 100% 58%, 50% 100%, 0 58%, 0 14%);
  background: linear-gradient(118deg, transparent 30%, rgba(255,255,255,.55) 44%, transparent 56%), conic-gradient(from 200deg at 50% 40%, var(--m1), var(--m3) 15%, var(--m4) 22%, var(--m2) 40%, var(--m1) 60%, var(--m4) 72%, var(--m2) 86%, var(--m1));
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.7)); }
.kc-scene[data-palier="noir"] .kc-ecu { background: linear-gradient(118deg, transparent 30%, rgba(255,255,255,.6) 44%, transparent 56%), conic-gradient(from 200deg at 50% 40%, #6B4E12, #E8C15A 15%, #FFF6CC 22%, #B8892A 40%, #6B4E12 60%, #FFF6CC 72%, #B8892A 86%, #6B4E12); }
.kc-ecu svg { width: 64%; height: 64%; margin-top: -8%; fill: var(--encre-metal); filter: drop-shadow(0 1px 0 rgba(255,255,255,.35)); }
.kc-palier b { font: 700 9.5px/1 var(--voix); letter-spacing: .2em; padding: 3px 4px 3px calc(4px + .2em); border-radius: 3px; background: rgba(4,5,8,.86); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); color: var(--palier-encre); white-space: nowrap; }
/* les filets du pied et des cases prennent le métal du palier */
.kc-scene[data-palier] .kc-plaque span { color: var(--palier-encre); }
.kc-scene[data-palier] .kc-plaque i { background: linear-gradient(90deg, transparent, var(--m3)); }
.kc-scene[data-palier] .kc-plaque b { background: linear-gradient(135deg, var(--m4), var(--m3) 55%, var(--m1)); }

/* festival (Q4 B) : le reflet holographique suit l'angle ; la carte s'assombrit et tremble à la défaite */
.kc-holo { position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; z-index: 5; pointer-events: none; opacity: 0; mix-blend-mode: color-dodge; transition: opacity 300ms;
  background: linear-gradient(115deg, transparent 30%, rgba(232,193,90,.5) 38%, rgba(255,160,140,.38) 43%, rgba(var(--halo), .42) 48%, rgba(255,246,204,.5) 53%, transparent 60%); }
.kc-scene.incline .kc-holo { opacity: .7; }
.kc-assombri { position: absolute; inset: 0; z-index: 7; background: #000; opacity: 0; pointer-events: none; transition: opacity 500ms ease; }
.kc-scene.baisse .kc-assombri { opacity: .45; transition: opacity 90ms; }
.kc-scene.baisse .kc-flip { animation: kcTremble 380ms linear 1; }
@keyframes kcTremble { 20% { transform: translateX(-2.5%) rotateZ(-1.2deg); } 40% { transform: translateX(2.5%) rotateZ(1.2deg); } 60% { transform: translateX(-1.5%); } 80% { transform: translateX(1%); } }
/* la machine à sous : le chiffre file vers le haut pendant qu'il défile */
.kc-grand.bouge b { animation: kcRoule 120ms linear infinite; }
@keyframes kcRoule { 0% { transform: translateY(-6%); filter: blur(.4px); } 50% { transform: translateY(6%); } 100% { transform: translateY(-6%); } }
.kc-eclats { position: absolute; left: 50%; top: 38%; width: 0; height: 0; z-index: 9; pointer-events: none; }
.kc-eclats i { position: absolute; width: var(--t, 6px); height: var(--t, 6px); margin: -3px; background: var(--c, #E8C15A); opacity: 0; box-shadow: 0 0 6px var(--c, #E8C15A); animation: kcEclatVole var(--d, 1100ms) cubic-bezier(.15,.7,.3,1) forwards; }
@keyframes kcEclatVole { 0% { opacity: 1; transform: translate(0,0) rotate(45deg) scale(1); } 100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) rotate(225deg) scale(.3); } }

/* le cadre plus épais prend 6 px au corps : Play garde « TOURNAMENTS » entier au téléphone */
.kc-scene[data-palier] .kc-card[data-monde="play"] .kc-socle { padding-inline: 8px; }
/* le passeport : le palier de départ à côté de la note */
.palier-depart { display: inline-block; margin-left: 8px; vertical-align: 3px; font: 700 10px/1 var(--voix); letter-spacing: .18em; padding: 3px 6px 3px 7px; border-radius: 3px; color: #120802;
  background: linear-gradient(118deg, transparent 30%, rgba(255,255,255,.5) 44%, transparent 56%), linear-gradient(176deg, #F6D2AA, #C38B5B 50%, #885532); }
.champ .val.gros + .palier-depart { margin-top: 0; }
.champ .val.gros:has(+ .palier-depart) { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  .kc-scene[data-palier="legende"] .kc-lueur, .kc-scene.baisse .kc-flip, .kc-grand.bouge b, .kc-eclats i { animation: none; }
  .kc-eclats { display: none; }
}

/* 03/11, seconde passe : chaque palier se reconnaît de loin. Le cadre passe à 11 px avec son biseau, et TOUTE la carte change
   de matière : le voile et le corps prennent le fond du palier (cuivre chaud, acier poli, or lumineux, noir laqué à paillettes,
   or blanc nacré), le monde garde son portrait et un halo discret. */
.kc-scene[data-palier="bronze"]  { --pan-rgb: 34, 20, 11; --teinte: rgba(176, 112, 70, .40); }
.kc-scene[data-palier="argent"]  { --pan-rgb: 22, 25, 29; --teinte: rgba(200, 206, 214, .30); }
.kc-scene[data-palier="or"]      { --pan-rgb: 36, 27, 6;  --teinte: rgba(232, 193, 90, .36); }
.kc-scene[data-palier="noir"]    { --pan-rgb: 3, 3, 3;    --teinte: rgba(232, 193, 90, .14); }
.kc-scene[data-palier="legende"] { --pan-rgb: 34, 30, 22; --teinte: rgba(255, 236, 196, .30); }
.kc-scene[data-palier] .kc-card .kc-corps { background: rgb(var(--pan-rgb)); }
.kc-scene[data-palier] .kc-voile { background:
    linear-gradient(180deg, transparent 32%, rgba(var(--pan-rgb), .2) 40%, rgba(var(--pan-rgb), .9) 51%, rgb(var(--pan-rgb)) 64%),
    radial-gradient(110% 52% at 50% 100%, var(--teinte), transparent 72%),
    radial-gradient(70% 26% at 50% 96%, rgba(var(--halo), .14), transparent); }
.kc-scene[data-palier="noir"] .kc-socle { background:
    radial-gradient(circle at 18% 30%, rgba(255, 232, 160, .9) 0 .6px, transparent 1.4px) 0 0 / 23px 19px,
    radial-gradient(circle at 70% 60%, rgba(232, 193, 90, .75) 0 .6px, transparent 1.3px) 0 0 / 31px 27px,
    linear-gradient(180deg, rgba(232, 193, 90, .10), transparent); }
.kc-scene[data-palier="noir"] .kc-corps::after { outline-color: rgba(232, 193, 90, .55); }
.kc-scene[data-palier="legende"] .kc-socle { background:
    radial-gradient(120% 80% at 50% 120%, rgba(247, 214, 190, .22), transparent 62%),
    repeating-radial-gradient(circle at 50% 140%, transparent 0 7px, rgba(255, 240, 215, .06) 8px, transparent 9px); }
.kc-scene[data-palier="or"] .kc-corps::after { outline-color: rgba(232, 193, 90, .4); }

/* le portrait aussi prend la lumière du palier (doucement : le visage et le maillot du monde restent lisibles) */
.kc-scene[data-palier] .kc-lumiere { mix-blend-mode: soft-light; background: linear-gradient(180deg, transparent 0 30%, var(--lumiere-palier, transparent) 52%, transparent 78%); }
.kc-scene[data-palier="bronze"]  { --lumiere-palier: rgba(176, 112, 70, .55); }
.kc-scene[data-palier="argent"]  { --lumiere-palier: rgba(214, 220, 228, .45); }
.kc-scene[data-palier="or"]      { --lumiere-palier: rgba(240, 200, 90, .60); }
.kc-scene[data-palier="noir"]    { --lumiere-palier: rgba(0, 0, 0, .70); }
.kc-scene[data-palier="legende"] { --lumiere-palier: rgba(255, 250, 240, .60); }
/* l'Or noir est NOIR : l'or n'y vit qu'en filets (cadre, biseau, écu, chiffre), plus en larges reflets */
.kc-scene[data-palier="noir"] { --m1: #020202; --m2: #0E0C08; --m3: #1E1A12; --m4: #4A3E22; }
/* la Légende est blanche nacrée, nettement plus claire que l'Or */
.kc-scene[data-palier="legende"] { --m1: #A89270; --m2: #E9DFCF; --m3: #FBF6EE; --m4: #FFFFFF; --spec-a: .7; }

/* la saison jusqu'à 99 : un bouton à côté de la victoire, discret mais au pouce */
.sim .saison { min-height: 44px; padding: 0 16px; border: 1px solid rgba(232,193,90,.7); border-radius: 999px; background: rgba(12,12,15,.62); color: var(--or-clair);
  font: 700 12px/1 var(--frappe); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; text-shadow: var(--ombre); }
.sim .saison[aria-disabled="true"] { opacity: .55; cursor: default; }
.sim .saison:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

/* walkout (Q3 B) : le monde s'allume, un rideau de lumière s'ouvre, la carte sort en tournant — pour l'Or et au-dessus ;
   98 et 99 : la cérémonie, un tampon sur des rayons. Tout en transform/opacity. */
.walkout { position: absolute; inset: -14px; z-index: 20; pointer-events: none; opacity: 0; display: grid; place-items: center; overflow: hidden; border-radius: 12px;
  background: radial-gradient(50% 40% at 50% 62%, rgba(var(--halo), .55), transparent 72%), #020204; }
.walkout > * { grid-area: 1 / 1; }
.wk-monde { font: 700 64px/1 var(--voix); letter-spacing: .08em; color: rgb(var(--halo)); opacity: 0; text-shadow: 0 0 50px rgba(var(--halo), .8); }
.wk-rideau { position: absolute; inset: 0; display: flex; justify-content: center; gap: 4%; opacity: 0; }
.wk-rideau i { width: 3%; height: 100%; background: linear-gradient(180deg, transparent, rgba(255,246,204,.95) 40%, rgba(232,193,90,.95) 60%, transparent); transform: scaleY(0); }
.wk-titre { align-self: end; margin-bottom: 14%; font: 700 15px var(--voix); letter-spacing: .42em; padding-left: .42em; color: var(--or-clair); opacity: 0; text-shadow: 0 0 20px rgba(232,193,90,.8); }
.wk-rayons { width: 170%; aspect-ratio: 1; opacity: 0; background: repeating-conic-gradient(rgba(255,246,204,.2) 0 6deg, transparent 6deg 18deg); -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); }
.wk-tampon { font: 700 170px/1 var(--voix); letter-spacing: -.03em; background: linear-gradient(176deg, #FFFFFF, #FFF6E2 26%, #EBC98B 46%, #A8803A 62%, #FFFFFF); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0; }
.wk-annonce { position: absolute; left: 50%; top: -42px; z-index: 30; margin: 0; transform: translateX(-50%); white-space: nowrap; pointer-events: none; opacity: 0;
  font: 700 12px var(--voix); letter-spacing: .2em; text-transform: uppercase; padding: 9px 14px; border-radius: 4px; color: #0C0C0F;
  background: linear-gradient(176deg, #FFF6CC, #E8C15A 52%, #C6871A); box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.wk-annonce.sombre { color: #fff; background: rgba(20,22,28,.94); border: 1px solid rgba(255,255,255,.2); }
.wk-annonce.vue { animation: wkAnnonce 2400ms ease-out 1 both; }
@keyframes wkAnnonce { 0% { opacity: 0; transform: translate(-50%, 8px); } 12% { opacity: 1; transform: translate(-50%, 0); } 80% { opacity: 1; } 100% { opacity: 0; } }
.wk-pack .walkout { animation: wkFond 3000ms ease 1 both; }
.wk-pack .wk-monde { animation: wkMonde 1200ms 150ms ease-out 1 both; }
.wk-pack .wk-rideau { animation: wkVis 1800ms 800ms ease 1 both; }
.wk-pack .wk-rideau i { animation: wkBarre 900ms ease-out 1 both; animation-delay: calc(800ms + var(--k) * 60ms); }
.wk-pack .wk-titre { animation: wkVis 1500ms 1000ms ease 1 both; }
.wk-pack .kc-flip { animation: wkSort 1300ms 1250ms cubic-bezier(.2,.9,.25,1.05) 1 both; }
.wk-pack .kc-scene { z-index: 25; }
.wk-ceremonie .walkout { animation: wkFond 3400ms ease 1 both; }
.wk-ceremonie .wk-rayons { animation: wkRayons 3400ms linear 1 both; }
.wk-ceremonie .wk-tampon { animation: wkTampon 1600ms 300ms cubic-bezier(.2,1.4,.4,1) 1 both; }
.wk-ceremonie .wk-titre { animation: wkVis 2200ms 800ms ease 1 both; }
.wk-ceremonie .kc-flip { animation: wkSort 1100ms 1700ms cubic-bezier(.2,.9,.25,1.05) 1 both; }
.wk-ceremonie .kc-scene { z-index: 25; }
.wk-sobre .kc-flip { animation: wkTourne 900ms cubic-bezier(.3,.6,.25,1) 1; }
.wk-sobre .kc-reflet { animation: kcReflet 800ms 420ms ease-out 1; }
@keyframes wkFond { 0% { opacity: 0; } 8%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes wkMonde { 0% { opacity: 0; transform: scale(.7); } 40% { opacity: 1; transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes wkVis { 0% { opacity: 0; } 25%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes wkBarre { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1) scaleX(.2); } }
@keyframes wkSort { 0% { opacity: 0; transform: translateY(18%) scale(.6) rotateY(-540deg); } 30% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes wkRayons { 0% { opacity: 0; transform: rotate(0); } 15%, 70% { opacity: 1; } 100% { opacity: 0; transform: rotate(70deg); } }
@keyframes wkTampon { 0% { opacity: 0; transform: scale(2.4); } 45% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(.9); } }
@keyframes wkTourne { 0% { transform: rotateY(0) scale(1); } 45% { transform: rotateY(90deg) scale(1.05); } 55% { transform: rotateY(-90deg) scale(1.05); } 100% { transform: rotateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .walkout, .wk-pack .kc-flip, .wk-ceremonie .kc-flip, .wk-sobre .kc-flip { animation: none !important; }
  .wk-annonce.vue { animation: wkAnnonceDoux 2400ms ease 1 both; }
  @keyframes wkAnnonceDoux { 0%, 100% { opacity: 0; } 10%, 85% { opacity: 1; } }
}

/* ══ FINITIONS (03/11) : aucun texte utile sous 13 px au téléphone ni sous 14 px au bureau — hors section des pôles (.e7),
   qu'une autre passe refait. Les textes des cartes et du passeport, réduits par --s et --k, gardent leur taille VUE. ══ */
.ecran:not(.e7) .surtitre, .langues button, .scene-repere, .app-monde, .app-sim, .sim .saison, .sim .etat > span,
.autour-tete, .autour-tete em, .autour li em, .avatar-choix .choix-lib, .avatar-choix[data-choix="app"] .choix-lib,
.champ-saisie label, .beta-lib, .pied .legal { font-size: 13px; }
.carte-boite .kc-palier b { font-size: calc(13px / var(--s)); letter-spacing: .12em; padding-left: calc(4px + .12em); }
.page .palier-depart { font-size: calc(13px / var(--k)); }
@media (min-width: 900px) {
  .ecran:not(.e7) .surtitre, .langues button, .scene-repere, .app-monde, .app-sim, .sim .saison, .sim .etat > span,
  .autour-tete, .autour-tete em, .autour li em, .avatar-choix .choix-lib, .avatar-choix[data-choix="app"] .choix-lib,
  .champ-saisie label, .beta-lib, .pied .legal, .formulaire .micro, .app-onglets button, .mondes-choix button, .app-logo b { font-size: 14px; }
  .avatar-choix[data-choix="app"] .choix-lib { width: auto; max-width: none; letter-spacing: .02em; }
  .carte-boite .kc-palier b, .carte-boite .kc-pastille, .carte-boite .kc-grand span, .carte-boite .kc-nom span,
  .carte-boite .kc-etiquette, .carte-boite .kc-logo b, .carte-boite .kc-plaque span { font-size: calc(14px / var(--s)); }
  .page .bandeau .kid, .page .bandeau .doc, .page .champ .lib, .page .signature .lib, .visa .monde-sous,
  .couv-sous, .couv-pied, .page .palier-depart { font-size: calc(14px / var(--k)); }
}

/* « KESH, c'est quoi ? » au téléphone : UN cadre pour l'en-tête (surtitre, phrase, phrase or, phrase vraie), plus quatre pavés empilés */
@media (max-width: 899px) {
  .e2 .tete { background: rgba(12,12,15,.78); border-radius: 12px; padding: 14px 16px 16px; }
  .e2 .tete .surtitre, .e2 .phrase, .e2 .phrase-or, .e2 .phrase-vrai { background: none; box-shadow: none; }
}
@media (min-width: 900px) { .app-onglets button { line-height: 1; gap: 1px; padding-block: 2px; } }
/* la phrase du visa, plus courte depuis le 03/11, se pose sur un fond plus clair : blanc pur et une ombre de lecture */
.visa .phrase-monde { color: #fff; background: rgba(10,14,26,.82); border-radius: 4px; box-shadow: 0 0 0 4px rgba(10,14,26,.82); }
.page .champ .palier-depart { color: #120802; -webkit-text-fill-color: #120802; background-clip: border-box; -webkit-background-clip: border-box; }
/* la pastille du palier tient sur la ligne de « 65 », au-dessus de la phrase du visa */
.page .champ:has(.palier-depart) { white-space: nowrap; }
.page .champ .palier-depart { letter-spacing: .06em; padding: 2px 4px 2px 5px; margin-left: 5px; }

/* 04/11 : la mission, plus longue, au titre de l'accueil ; au téléphone, un titre plus compact et un panneau un cran plus léger
   gardent l'accueil au moins aussi clair que sur main (mesure rapide 390×844 : L* 25,5 contre 25,2, noir 30,8 % contre 36,5 %) */
@media (max-width: 899px) {
  .e1 .t-xxl { font-size: 30px; }
  .e1 .contenu::before { background: linear-gradient(180deg, rgba(12,12,15,0) 0%, rgba(12,12,15,.66) 14%, rgba(12,12,15,.76) 72%, rgba(12,12,15,.6) 100%); }
}
/* au bureau aussi, le panneau du titre de mission un cran plus léger : l'accueil au moins aussi clair que main (L* 24,7 contre 24,1) */
@media (min-width: 900px) { .e1 .contenu::before { background: radial-gradient(ellipse at 28% 62%, rgba(12,12,15,.8) 0%, rgba(12,12,15,.74) 52%, rgba(12,12,15,.58) 68%, rgba(12,12,15,0) 100%); } }

/* Lot 3 (04/11) : l'éclat, rapproché de la lumière de 01d1d1c par les voiles seuls (aucun média changé).
   lumiere, main → ici (01d1d1c) : téléphone quoi 27,4 → 30,1 (34,1) · marche 18,7 → 19,9 (30,6) · IA 25,8 → 32,1 ;
   ordinateur IA 32,6 → 36,3. Accueil et vision restent : plus clairs, un surtitre ou l'or de « le prouver. » passait sous 4,5:1 / 3:1.
   Le reste de l'écart avec 01d1d1c tient aux médias, changés depuis (hors de ce lot). */
.eia .voile { background: rgba(12,12,15,.62); }
@media (max-width: 899px) { .e-marche .voile, .e2 .voile { opacity: .7; } }

/* Lot 2 (04/11) : « Crée la tienne » dit son rôle — le jour 1, pour de vrai — après la simulation de l'écran de l'app */
.e5 .tete .sous-titre { max-width: 30em; font-size: 15px; line-height: 1.6; }
.e5 .tete .sous-titre span { background: rgba(12,12,15,.78); border-radius: 4px; padding: 2px 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }