/* aitzaga.com · accueil motion · 20261017 */
/* Concept : la page se lit comme la lignée. Le défilement mène de l'âge I (préhistoire, en haut) à l'âge VII (futur, en bas).
   Vocabulaire de plateau de tournage : repères de cadre, horloge de jeu, compteurs en chasse fixe.
   L'illustration reste peinte ; sa lumière (feu de camp, fumée, brume, soleil, rivière, poussières) est animée en code.
   Courbes : --sortie (décélération longue) pour les entrées, --balancier (accélère puis freine) pour les masques. */
:root {
  --nuit: #16130F;      /* fond du site */
  --suie: #1F1B16;      /* surfaces */
  --ligne: #3A332A;     /* filets */
  --ligne-2: rgba(243,236,224,.12);
  --cuir: #F3ECE0;      /* texte */
  --cuir-2: #CFC4B3;    /* texte secondaire */
  --cendre: #9C9182;    /* légendes */
  --flamme: #D9642B;    /* accent de marque */
  --braise: #F08A4B;    /* accent lumineux */
  --teinte: #F08A4B;    /* accent de l'âge courant, piloté par le défilement : braise · ocre · blé · brique · vert-de-gris · néon · aube */
  --ok: #9FC28A;
  --err: #F0A08A;
  --f-voix: "Alegreya", "Iowan Old Style", Georgia, serif;
  --f-texte: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono: "Fragment Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --sortie: cubic-bezier(.16, 1, .3, 1);
  --balancier: cubic-bezier(.77, 0, .175, 1);
  --gout: max(16px, env(safe-area-inset-left, 0px));
  --gout-d: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: dark;
  --ink-soft: var(--cuir-2); --serif: var(--f-voix); /* bloc film */
}
* { box-sizing: border-box; }
html, body { background: var(--nuit); color: var(--cuir); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; font-family: var(--f-texte); font-size: 1.125rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
::selection { background: var(--flamme); color: #1A120B; }
a { color: var(--braise); text-underline-offset: 4px; }
a:hover { color: var(--cuir); }
:focus-visible { outline: 1px solid var(--braise); outline-offset: 4px; border-radius: 2px; }
h1, h2, h3 { margin: 0; text-wrap: balance; font-weight: 800; }
p { margin: 0; }
:root:not([lang="en"]) [lang="en"]:not(html), html[lang="en"] [lang="fr"]:not(html) { display: none !important; }
.wrap { max-width: 1240px; margin-inline: auto; padding-left: var(--gout); padding-right: var(--gout-d); }
.mono { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cendre); font-variant-numeric: tabular-nums; }
.mono b { color: var(--cuir); font-weight: 400; }
.maquette { position: fixed; z-index: 60; left: calc(var(--gout) + 4px); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(31,27,22,.82); backdrop-filter: blur(8px); border: 1px solid var(--ligne); border-radius: 999px; padding: .35rem .85rem; white-space: nowrap; font-size: .62rem; }
.grain { position: fixed; inset: -100px; z-index: 70; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0,0); } 20% { transform: translate(-30px,20px); } 40% { transform: translate(25px,-35px); } 60% { transform: translate(-20px,-15px); } 80% { transform: translate(35px,30px); } }

/* ---------- Ouverture ---------- */
.intro { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: var(--nuit); pointer-events: none; }
.anim .intro { pointer-events: auto; }
.intro .bloc { display: grid; justify-items: center; gap: 22px; }
.intro svg { width: 64px; height: 64px; overflow: visible; }
.intro svg path { fill: transparent; stroke: var(--braise); stroke-width: 1.2px; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.anim .intro svg path { animation: trace 1.3s var(--balancier) forwards; }
.anim .intro svg path + path { animation-delay: .25s; }
@keyframes trace { to { stroke-dashoffset: 0; } }
.anim .intro svg g g path { animation: trace 1.3s var(--balancier) forwards, remplit .5s 1.15s ease forwards; }
@keyframes remplit { to { fill: #D9642B; } }
.intro .compte { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .3em; color: var(--cendre); font-variant-numeric: tabular-nums; }
.intro .barre { width: 120px; height: 1px; background: var(--ligne); overflow: hidden; }
.intro .barre i { display: block; height: 100%; background: var(--braise); transform: scaleX(0); transform-origin: left; }
.intro.part { clip-path: inset(0 0 100% 0); transition: clip-path 1.05s var(--balancier); }
:root:not(.anim) .intro { display: none; }

/* ---------- Curseur ---------- */
.curseur { position: fixed; left: 0; top: 0; z-index: 75; pointer-events: none; display: none; }
.curseur-actif .curseur { display: block; }
.curseur-actif, .curseur-actif a, .curseur-actif button, .curseur-actif label { cursor: none; }
.curseur-actif input, .curseur-actif [data-curseur-natif] { cursor: auto; }
.curseur .pt, .curseur .an { position: absolute; left: 0; top: 0; }
.curseur .pt i { position: absolute; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--braise); }
.curseur .an i { position: absolute; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; border: 1px solid rgba(243,236,224,.45); display: grid; place-items: center; font-style: normal; transition: width .45s var(--sortie), height .45s var(--sortie), margin .45s var(--sortie), background .45s, border-color .45s, opacity .3s; }
.curseur .an span { font-family: var(--f-mono); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--nuit); opacity: 0; transition: opacity .3s; }
.curseur.survol .an i { width: 64px; height: 64px; margin: -32px 0 0 -32px; border-color: transparent; background: rgba(240,138,75,.16); }
.curseur.etiquette .an i { width: 78px; height: 78px; margin: -39px 0 0 -39px; background: var(--cuir); border-color: transparent; }
.curseur.etiquette .an span { opacity: 1; }
.curseur.natif .an i, .curseur.natif .pt i { opacity: 0; }

/* ---------- Barre haute ---------- */
.top { position: absolute; inset: 0 0 auto; z-index: 20; display: flex; justify-content: space-between; align-items: center; padding-top: calc(20px + env(safe-area-inset-top, 0px)); padding-bottom: 20px; padding-left: calc(var(--gout) + 10px); padding-right: calc(var(--gout-d) + 10px); }
.top .glyphe { width: 30px; height: 30px; display: block; }
.top .glyphe g g, .embleme .glyphe g g { fill: url(#flamme-age); }
#flamme-age stop + stop { stop-color: var(--teinte); }
.top .marque { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.top .marque .mono { color: var(--cuir-2); }
@media (max-width: 640px) { .top .marque .mono, .top nav a.lien { display: none; } }
.top nav { display: flex; align-items: center; gap: 22px; }
.lien { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cuir); text-decoration: none; position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; }
.lien .rl { display: grid; transition: transform .6s var(--balancier); }
.lien .rl > * { grid-area: 1 / 1; } .lien .rl > *:last-child { transform: translateY(105%); color: var(--braise); }
.lien:hover .rl { transform: translateY(-105%); }
.lien:hover .rl > *:last-child { transform: translateY(105%); }
.langues { position: relative; display: flex; gap: 0; background: rgba(22,19,15,.5); border: 1px solid rgba(243,236,224,.16); border-radius: 999px; padding: 3px; backdrop-filter: blur(8px); }
.langues i { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: var(--cuir); transition: transform .55s var(--balancier); }
html[lang="en"] .langues i { transform: translateX(100%); }
.langues button { position: relative; font: 500 .68rem/1 var(--f-mono); letter-spacing: .14em; color: var(--cuir-2); background: none; border: 0; padding: 9px 12px; cursor: pointer; transition: color .45s; }
.langues button[aria-pressed="true"] { color: var(--nuit); }

/* ---------- Héros ---------- */
.heros { position: relative; min-height: min(100svh, 940px); display: flex; align-items: flex-end; overflow: clip; isolation: isolate; }
.plan { position: absolute; inset: -7% -2% 0; z-index: -2; will-change: transform; }
.plan .respire { position: absolute; inset: 0; }
.plan img, .plan canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; }
.anim.pret .plan .respire { animation: plan-in 3.2s var(--sortie) both, respire 22s 3.2s ease-in-out infinite alternate; }
.anim:not(.pret) .plan .respire { transform: scale(1.16); filter: brightness(.12); }
@keyframes plan-in { from { transform: scale(1.16); filter: brightness(.12) saturate(.5); } to { transform: scale(1.03); filter: none; } }
@keyframes respire { from { transform: scale(1.03); } to { transform: scale(1.065); } }
.voiles { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(130% 90% at 50% 40%, transparent 55%, rgba(10,8,6,.55)), linear-gradient(180deg, rgba(22,19,15,.62) 0%, rgba(22,19,15,0) 24%), linear-gradient(0deg, var(--nuit) 0%, rgba(22,19,15,.9) 24%, rgba(22,19,15,.1) 62%); }
.reperes i { position: absolute; width: 14px; height: 14px; border-color: rgba(243,236,224,.38); border-style: solid; border-width: 0; z-index: 2; }
.reperes i:nth-child(1) { left: calc(var(--gout) + 10px); top: calc(76px + env(safe-area-inset-top, 0px)); border-left-width: 1px; border-top-width: 1px; }
.reperes i:nth-child(2) { right: calc(var(--gout-d) + 10px); top: calc(76px + env(safe-area-inset-top, 0px)); border-right-width: 1px; border-top-width: 1px; }
.reperes i:nth-child(3) { left: calc(var(--gout) + 10px); bottom: 22px; border-left-width: 1px; border-bottom-width: 1px; }
.reperes i:nth-child(4) { right: calc(var(--gout-d) + 10px); bottom: 22px; border-right-width: 1px; border-bottom-width: 1px; }
.anim.pret .reperes i { animation: repere .9s var(--sortie) both; animation-delay: calc(1.1s + var(--k, 0) * 80ms); }
.anim:not(.pret) .reperes i { opacity: 0; }
@keyframes repere { from { opacity: 0; scale: 1.8; } }
.heros-in { position: relative; width: 100%; padding-bottom: clamp(74px, 11vh, 120px); will-change: transform, opacity; }
.surtitre { margin-bottom: 22px; display: flex; gap: .7rem; align-items: center; color: var(--cuir-2); }
.surtitre::before { content: ""; width: 38px; height: 1px; background: var(--braise); transform-origin: left; }
.anim.pret .surtitre::before { animation: trait 1.1s .2s var(--balancier) both; }
.anim:not(.pret) .surtitre::before { transform: scaleX(0); }
@keyframes trait { from { transform: scaleX(0); } }
.logotype { display: block; width: min(680px, 88vw); height: auto; color: var(--cuir); margin: 0 0 28px; overflow: hidden; }
.logotype .lt { transform-box: fill-box; }
.anim.pret .logotype .lt { animation: lettre 1.15s var(--balancier) both; animation-delay: calc(.35s + var(--i) * 70ms); }
.anim:not(.pret) .logotype .lt { transform: translateY(115%); }
@keyframes lettre { from { transform: translateY(115%); } }
.logotype .tri { transform-box: fill-box; transform-origin: 50% 75%; }
.anim.pret .logotype .tri { animation: pop .8s 1.25s cubic-bezier(.3,1.7,.4,1) both; }
.anim:not(.pret) .logotype .tri { transform: scale(0); }
@keyframes pop { from { transform: scale(0) rotate(-30deg); } }
.devise { font: italic 500 clamp(1.6rem, 3.5vw, 2.6rem)/1.15 var(--f-voix); margin: 0 0 34px; letter-spacing: -.005em; }
.devise .m { display: inline-block; overflow: hidden; padding: 0 .02em .1em; margin-bottom: -.1em; vertical-align: top; }
.devise .m:last-child { color: var(--braise); }
.c { display: inline-block; }
.anim.pret .devise .c { animation: car 1s var(--sortie) both; animation-delay: calc(1.05s + var(--i) * 22ms); }
.anim:not(.pret) .devise .c { transform: translateY(110%); }
@keyframes car { from { transform: translateY(110%) rotate(6deg); } }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; }
.anim.pret .actions { animation: monte 1.2s 1.7s var(--sortie) both; }
.anim:not(.pret) .actions, .anim:not(.pret) .surtitre > span, .anim:not(.pret) .hud { opacity: 0; }
.anim.pret .surtitre > span { animation: monte 1.1s .45s var(--sortie) both; }
@keyframes monte { from { transform: translateY(24px); opacity: 0; } }
.cta { position: relative; display: inline-flex; align-items: center; gap: 14px; background: var(--flamme); color: #1A120B; font: 700 1rem/1 var(--f-texte); text-decoration: none; padding: 18px 26px 18px 28px; border-radius: 999px; border: 0; cursor: pointer; overflow: hidden; isolation: isolate; will-change: transform; }
.cta::before { content: ""; position: absolute; left: 50%; top: 100%; width: 160%; aspect-ratio: 1; z-index: -1; background: var(--braise); border-radius: 50%; transform: translate(-50%, 0) scale(.2); transition: transform .7s var(--balancier); }
.cta:hover { color: #1A120B; } .cta:hover::before { transform: translate(-50%, -62%) scale(1); }
.roll { display: grid; overflow: hidden; height: 1.15em; line-height: 1.15; }
.roll > span { grid-area: 1 / 1; transition: transform .65s var(--balancier); }
.roll > span + span { transform: translateY(110%); }
.cta:hover .roll > span:first-child { transform: translateY(-110%); } .cta:hover .roll > span + span { transform: none; }
.fleche { position: relative; width: 16px; height: 1.15em; overflow: hidden; display: inline-block; }
.fleche::before, .fleche::after { content: "→"; position: absolute; inset: 0; transition: transform .65s var(--balancier); }
.fleche::after { transform: translateX(-120%); }
.cta:hover .fleche::before { transform: translateX(120%); } .cta:hover .fleche::after { transform: none; }
.lien-film { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cuir); text-decoration: none; display: inline-flex; align-items: center; gap: .9rem; }
.lien-film .rond { position: relative; width: 40px; height: 40px; display: grid; place-items: center; }
.lien-film svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.lien-film circle { fill: none; stroke: rgba(243,236,224,.35); stroke-width: 1; }
.lien-film circle + circle { stroke: var(--braise); stroke-dasharray: 113; stroke-dashoffset: 113; transition: stroke-dashoffset .9s var(--balancier); }
.lien-film:hover circle + circle { stroke-dashoffset: 0; }
.lien-film .rond b { font-size: .6rem; color: var(--cuir); font-weight: 400; transform: translateX(1px); }
.hud { position: absolute; z-index: 2; bottom: 26px; display: flex; gap: 22px; align-items: center; font-size: .64rem; }
.hud.g { left: calc(var(--gout) + 34px); } .hud.d { right: calc(var(--gout-d) + 34px); text-align: right; }
.anim.pret .hud { animation: monte 1s 2s var(--sortie) both; }
.hud .vent { display: inline-flex; gap: 3px; align-items: flex-end; height: 10px; }
.hud .vent i { width: 2px; background: var(--cendre); animation: vent 1.6s ease-in-out infinite; }
.hud .vent i:nth-child(2) { animation-delay: .2s; } .hud .vent i:nth-child(3) { animation-delay: .4s; }
@keyframes vent { 0%, 100% { height: 3px; } 50% { height: 10px; } }
@media (max-width: 760px) { .hud.d { display: none; } .hud.g { left: calc(var(--gout) + 4px); } }
.credit-m { display: none; }
@media (max-width: 760px) { .credit-m { display: block; margin-top: 18px; font-size: .58rem; } }
.defiler { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 1px; height: 54px; background: var(--ligne-2); overflow: hidden; }
.defiler::after { content: ""; position: absolute; inset: 0; background: var(--braise); animation: goutte 2.4s 2.6s var(--balancier) infinite both; }
@keyframes goutte { 0% { transform: translateY(-100%); } 55%, 100% { transform: translateY(100%); } }
@media (max-width: 760px) { .defiler { display: none; } }

/* ---------- Rail des âges ---------- */
.rail { position: fixed; z-index: 15; right: calc(var(--gout-d) + 8px); top: 50%; transform: translateY(-50%); height: 46vh; width: 140px; pointer-events: none; display: none; }
@media (min-width: 1400px) { .rail { display: block; } }
.anim:not(.pret) .rail { opacity: 0; } .anim.pret .rail { animation: monte 1s 2.2s var(--sortie) both; }
.rail .fil { position: absolute; right: 4px; top: 0; bottom: 0; width: 1px; background: var(--ligne); }
.rail .fil i { position: absolute; inset: 0 0 auto; height: 0; background: linear-gradient(#D9642B, var(--teinte)); }
.rail .cran { position: absolute; right: 0; width: 9px; height: 1px; background: var(--ligne); transition: background .4s, width .4s var(--sortie); }
.rail .cran.on { background: var(--teinte); } .rail .cran.ici { width: 15px; }
.rail .point { position: absolute; right: -1px; top: 0; width: 11px; height: 11px; margin-top: -5px; border-radius: 50%; background: var(--teinte); box-shadow: 0 0 0 4px color-mix(in srgb, var(--teinte) 18%, transparent), 0 0 22px 5px color-mix(in srgb, var(--teinte) 45%, transparent); }
.rail .age { position: absolute; right: 24px; text-align: right; top: 0; margin-top: -.62em; white-space: nowrap; overflow: hidden; height: 1.25em; }
.rail .age span { display: block; transition: transform .6s var(--balancier); }

/* ---------- Bandeau défilant ---------- */
.bandeau { position: relative; border-block: 1px solid var(--ligne); padding-block: 22px 18px; overflow: hidden; display: grid; gap: 10px; }
.piste { display: flex; width: max-content; will-change: transform; }
.piste > span { white-space: nowrap; padding-right: .5em; }
.piste.grand { font: italic 800 clamp(2.6rem, 7vw, 6rem)/1 var(--f-voix); color: transparent; -webkit-text-stroke: 1px rgba(243,236,224,.38); }
.piste.grand em { font-style: italic; color: var(--braise); -webkit-text-stroke: 0; }
.piste.petit { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: var(--cendre); }

/* ---------- Titres de section ---------- */
.etiquette { display: flex; align-items: center; gap: 14px; }
.etiquette::after { content: ""; flex: 1; height: 1px; background: var(--ligne); transform-origin: left; transition: transform 1.4s .15s var(--balancier); }
.anim .etiquette:not(.vu)::after { transform: scaleX(0); }
.etiquette b { color: var(--teinte); transition: color .8s; }

/* ---------- Les âges (scène épinglée, 7 âges) ---------- */
.ages { position: relative; height: 760vh; }
.ages-scene { position: sticky; top: 0; height: 100svh; overflow: clip; isolation: isolate; }
.ages-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }
.ages-haut { position: absolute; inset: 0 0 auto; padding-top: calc(92px + env(safe-area-inset-top, 0px)); }
.ages-titres { position: relative; height: clamp(150px, 26vh, 260px); margin-top: 18px; }
.age-t { position: absolute; inset: 0 auto auto 0; display: grid; gap: 6px; pointer-events: none; }
.age-t .num { font: 800 clamp(4.4rem, 13vw, 11rem)/.82 var(--f-voix); letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.2px var(--c); overflow: hidden; padding-bottom: .06em; }
.age-t .phr { font: italic 500 clamp(1.3rem, 2.6vw, 2.1rem)/1.15 var(--f-voix); overflow: hidden; padding-bottom: .1em; }
.age-t .c { transition: transform .9s var(--balancier); transition-delay: calc(var(--i) * 16ms); transform: translateY(112%); }
.age-t.ici .c { transform: none; transition-delay: calc(.12s + var(--i) * 16ms); }
.age-t.passe .c { transform: translateY(-112%); }
.ages-bas { position: absolute; inset: auto 0 0; padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 14px; }
.frise { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.frise span { display: grid; gap: 8px; color: var(--cendre); transition: color .6s; }
.frise span::before { content: ""; height: 2px; background: var(--ligne); background-image: linear-gradient(var(--c), var(--c)); background-repeat: no-repeat; background-size: var(--r, 0%) 100%; }
.frise span.on { color: var(--c); }
.ages-compte { display: flex; flex-wrap: wrap; gap: 6px 30px; justify-content: space-between; }
.indice { display: flex; gap: 12px; align-items: center; }
.indice i { width: 1px; height: 26px; background: var(--ligne); position: relative; overflow: hidden; }
.indice i::after { content: ""; position: absolute; inset: 0; background: var(--teinte); animation: goutte 2.4s var(--balancier) infinite; }
.titre-k { overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.titre-k .c { transition: transform 1.2s var(--sortie); transition-delay: calc(var(--i) * 18ms); }
.anim .titre-k:not(.vu) .c { transform: translateY(115%) rotate(4deg); }
.anim .rev { transition: transform 1.3s var(--sortie), opacity 1.3s var(--sortie); transition-delay: var(--d, 0s); }
.anim .rev:not(.vu) { transform: translateY(40px); opacity: 0; }

/* ---------- Manifeste ---------- */
.manifeste { position: relative; height: 300vh; }
.scene { position: sticky; top: 0; height: 100svh; display: grid; grid-template-rows: auto 1fr auto; padding-block: calc(96px + env(safe-area-inset-top, 0px)) 30px; overflow: clip; isolation: isolate; }
.scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.scene .milieu { display: flex; flex-direction: column; justify-content: center; gap: clamp(26px, 5vh, 54px); }
.trio { font: 800 clamp(3rem, 10.6vw, 9.8rem)/.9 var(--f-voix); letter-spacing: -.025em; }
.trio .mot { display: inline-block; overflow: hidden; padding: 0 .03em .1em; margin-bottom: -.1em; vertical-align: top; }
.trio .mot:last-child { color: var(--braise); font-style: italic; }
.trio .c { will-change: transform; }
.recit { max-width: 30ch; font: 500 clamp(1.4rem, 2.8vw, 2.25rem)/1.28 var(--f-voix); margin-left: clamp(0px, 22vw, 330px); }
.recit .w { transition: color .5s, opacity .5s; }
.anim .recit .w { color: rgba(243,236,224,.16); }
.anim .recit .w.on { color: var(--cuir); }
.anim .recit .w.on.nom { color: var(--braise); }
@media (max-width: 760px) { .recit { margin-left: 0; } }
.ardoise { display: grid; grid-template-columns: repeat(4, minmax(0, auto)) 1fr; gap: 6px 34px; align-items: end; }
.ardoise > div { display: grid; gap: 4px; }
.ardoise b { font-size: 1.05rem; letter-spacing: .06em; }
.ardoise .jauge { height: 1px; background: var(--ligne); position: relative; align-self: center; min-width: 60px; }
.ardoise .jauge i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--braise); }
.ardoise .jauge s { position: absolute; top: -3px; width: 1px; height: 7px; background: var(--ligne); }
@media (max-width: 760px) { .ardoise { grid-template-columns: repeat(3, minmax(0, auto)); } .ardoise .jauge, .ardoise .cache-m { display: none; } }

/* ---------- Piliers ---------- */
.piliers { padding-block: clamp(90px, 15vh, 170px) 30px; display: grid; gap: 46px; }
.piliers-tete { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; }
.grand-titre { font: 800 clamp(2.4rem, 5.4vw, 4.6rem)/.98 var(--f-voix); letter-spacing: -.015em; }
.grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; perspective: 1100px; }
@media (max-width: 900px) { .grille { grid-template-columns: minmax(0, 1fr); } }
.pilier { --mx: 50%; --my: 0%; position: relative; background: var(--suie); border-radius: 20px; display: flex; flex-direction: column; min-width: 0; transform-style: preserve-3d; will-change: transform; }
.pilier::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(240,138,75,.75), var(--ligne) 45%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.pilier::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(520px circle at var(--mx) var(--my), rgba(240,138,75,.07), transparent 50%); pointer-events: none; opacity: 0; transition: opacity .5s; }
.pilier:hover::after { opacity: 1; }
.vignette { position: relative; aspect-ratio: 16 / 10; max-width: 100%; border-radius: 20px 20px 0 0; overflow: hidden; background: radial-gradient(120% 95% at 50% 100%, #2B2119, #14110D 72%); border-bottom: 1px solid var(--ligne); }
.vignette canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vignette .mono { position: absolute; left: 16px; top: 14px; font-size: .6rem; }
.vignette .mono.d { left: auto; right: 16px; }
.pilier .corps { padding: 26px 26px 30px; display: grid; gap: 12px; }
.pilier h3 { font: 800 1.62rem/1.12 var(--f-voix); }
.pilier p { color: var(--cuir-2); font-size: 1.05rem; }

/* ---------- Film ---------- */
.film { padding-block: clamp(80px, 12vh, 140px) 0; display: grid; gap: 22px; }
.film-tete { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; }
.film-tete p { color: var(--cuir-2); max-width: 46ch; }
.cadre { position: relative; }
.cadre > i { position: absolute; width: 16px; height: 16px; border: 0 solid var(--braise); z-index: 3; pointer-events: none; transition: transform .8s var(--sortie); }
.cadre > i:nth-child(1) { left: -8px; top: 16px; border-left-width: 1px; border-top-width: 1px; }
.cadre > i:nth-child(2) { right: -8px; top: 16px; border-right-width: 1px; border-top-width: 1px; }
.cadre > i:nth-child(3) { left: -8px; bottom: -8px; border-left-width: 1px; border-bottom-width: 1px; }
.cadre > i:nth-child(4) { right: -8px; bottom: -8px; border-right-width: 1px; border-bottom-width: 1px; }
.cadre:hover > i:nth-child(1) { transform: translate(-5px, -5px); } .cadre:hover > i:nth-child(2) { transform: translate(5px, -5px); }
.cadre:hover > i:nth-child(3) { transform: translate(-5px, 5px); } .cadre:hover > i:nth-child(4) { transform: translate(5px, 5px); }

/* ---------- Inscription ---------- */
.inscription { padding-block: clamp(100px, 15vh, 180px) clamp(90px, 14vh, 160px); }
.carte { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(160deg, #241E17, #16120E); border: 1px solid var(--ligne); border-radius: 28px; padding: clamp(28px, 5.5vw, 72px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 860px) { .carte { grid-template-columns: minmax(0, 1fr); } }
.carte canvas.lueur { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.carte .txt { display: grid; gap: 18px; }
.carte .txt p { color: var(--cuir-2); max-width: 40ch; }
.promesses { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; }
.promesses li { display: flex; gap: 12px; align-items: baseline; }
.promesses li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--braise); flex: none; transform: translateY(-2px); box-shadow: 0 0 10px 2px rgba(240,138,75,.5); }
form { display: grid; gap: 20px; }
.champ { position: relative; display: block; padding-top: 18px; }
.champ .lab { position: absolute; left: 0; top: 34px; transition: transform .5s var(--sortie), color .4s; transform-origin: left; pointer-events: none; }
.champ input { font: 1.2rem var(--f-texte); color: var(--cuir); background: transparent; border: 0; border-bottom: 1px solid var(--ligne); border-radius: 0; padding: 14px 0 12px; width: 100%; }
.champ input:focus { outline: none; }
.champ .souligne { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--braise); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--balancier); }
.champ input:focus ~ .souligne { transform: none; }
.champ input:focus ~ .lab, .champ input:not(:placeholder-shown) ~ .lab { transform: translateY(-30px) scale(.86); color: var(--braise); }
.accord { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; font-size: .95rem; color: var(--cuir-2); align-items: start; cursor: pointer; }
.accord input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.accord .case { width: 20px; height: 20px; margin-top: 3px; border: 1px solid var(--cendre); border-radius: 6px; display: grid; place-items: center; transition: border-color .3s, background .3s; }
.accord .case svg { width: 12px; height: 12px; stroke: #1A120B; stroke-width: 2.2; fill: none; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .45s var(--sortie) .05s; }
.accord input:checked + .case { background: var(--braise); border-color: var(--braise); }
.accord input:checked + .case svg { stroke-dashoffset: 0; }
.accord input:focus-visible + .case { outline: 1px solid var(--braise); outline-offset: 3px; }
form .cta { justify-content: space-between; width: 100%; padding-inline: 28px; }
.msg { min-height: 1.5em; font-size: .98rem; }
.msg.ok { color: var(--ok); } .msg.err { color: var(--err); }

/* ---------- Pied ---------- */
footer { position: relative; overflow: hidden; isolation: isolate; border-top: 1px solid var(--ligne); padding-top: 34px; }
footer canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.pied-haut { display: flex; flex-wrap: wrap; gap: 14px 30px; justify-content: space-between; align-items: center; }
.pied-haut a { color: var(--cuir-2); }
.remonter { background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; gap: 10px; align-items: center; color: var(--cuir); }
.remonter i { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--ligne); display: grid; place-items: center; font-style: normal; transition: border-color .3s; }
.remonter:hover i { border-color: var(--braise); }
.adresse { user-select: all; color: var(--cuir-2); }
.embleme { display: inline-flex; align-items: center; gap: 14px; }
.embleme .glyphe { width: 34px; height: 34px; animation: vacille 3.2s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes vacille { 50% { transform: scaleY(1.06) skewX(-1.5deg); } }
.monument { display: block; width: 100%; height: auto; color: var(--cuir); margin-top: clamp(40px, 8vh, 90px); overflow: hidden; }
.monument .lt { transform-box: fill-box; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .manifeste { height: auto; } .scene { position: relative; height: auto; } .ages { height: auto; } .ages-scene { position: relative; } .age-t:last-child .c { transform: none; }
  .grain { display: none; }
}
/* ---------- Film (bloc commun) ---------- */

/* Film Aitzaga (64 s, généré en code) : salle de projection sombre, toutes les classes préfixées af-. */
.af {
  --af-nuit: #141210;      /* fond de projection */
  --af-suie: #1E1B18;      /* surfaces */
  --af-cuir: #F3ECE0;      /* texte (cuir clair de la marque) */
  --af-cendre: #9C9184;    /* texte secondaire */
  --af-flamme: #D9642B;    /* accent de marque */
  --af-braise: #F08A4B;    /* accent lumineux sur fond sombre */
  --af-givre: #CFE3EE;     /* hiver */
  --af-f-titre: "Alegreya", "Iowan Old Style", Georgia, serif;
  --af-f-mono: "Fragment Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color-scheme: dark;
}

/* Scène */
.af-ecran { position: relative; width: 100%; aspect-ratio: 16 / 9; max-width: 100%; background: #0B0A09; overflow: hidden; border-radius: 3px; container-type: inline-size; isolation: isolate; }
.af-ecran:fullscreen { border-radius: 0; width: 100vw; height: auto; max-height: 100vh; margin: auto; }
#af-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.af-calque { position: absolute; inset: 0; pointer-events: none; }
.af-cue { position: absolute; white-space: nowrap; visibility: hidden; will-change: transform, opacity; }
.af-cue.af-centre { left: 50% !important; }
.af-ln { display: inline-block; overflow: hidden; padding: .06em .08em .14em; margin: -.06em -.08em -.14em; vertical-align: top; }
.af-l { display: inline-block; will-change: transform; }
.af-t-xl { font-family: var(--af-f-titre); font-weight: 800; font-size: 14.5cqw; line-height: .9; letter-spacing: -.02em; }
.af-t-l { font-family: var(--af-f-titre); font-weight: 800; font-size: 9cqw; line-height: .95; letter-spacing: -.015em; }
.af-t-m { font-family: var(--af-f-titre); font-weight: 500; font-size: 4.4cqw; line-height: 1.05; }
.af-t-a { font-family: var(--af-f-titre); font-weight: 500; font-style: italic; font-size: 3.1cqw; line-height: 1.1; }
.af-t-s { font-family: var(--af-f-mono); font-size: 1.35cqw; letter-spacing: .14em; text-transform: uppercase; color: var(--af-cendre); }
.af-t-s b { color: var(--af-cuir); font-weight: 400; font-variant-numeric: tabular-nums; }
.af-it { font-style: italic; }
.af-or { color: var(--af-braise); }
.af-gv { color: var(--af-givre); }
.af-mlab { position: absolute; font-family: var(--af-f-mono); font-size: 1.2cqw; letter-spacing: .16em; text-transform: uppercase; color: var(--af-cuir); visibility: hidden; white-space: nowrap; }
.af-mlab::before { content: ""; display: inline-block; width: .55em; height: .55em; border: 1px solid currentColor; border-radius: 50%; margin-right: .6em; vertical-align: .05em; }
.af-mlab.af-camp { color: var(--af-braise); }
.af-glyphe-film { position: absolute; left: 10%; top: 17%; width: 33cqw; height: 33cqw; visibility: hidden; overflow: visible; }
.af-glyphe-film path { stroke: var(--af-braise); stroke-width: 2px; vector-effect: non-scaling-stroke; stroke-dasharray: 1; }
.glyphe-fin { position: absolute; left: 50%; top: 11%; width: 8cqw; height: 8cqw; transform: translateX(-50%); visibility: hidden; overflow: visible; }
.af-logo-film { position: absolute; left: 50%; top: 31%; width: 58cqw; height: auto; color: var(--af-cuir); transform: translateX(-50%); visibility: hidden; overflow: visible; }
.af-hud { position: absolute; inset: 0; pointer-events: none; font-family: var(--af-f-mono); font-size: 1.05cqw; letter-spacing: .16em; text-transform: uppercase; color: var(--af-cuir); opacity: .55; }
.af-hud > span { position: absolute; white-space: nowrap; }
.af-hud .af-hg { left: 2.4%; top: 4%; }
.af-hud .af-hd { right: 2.4%; top: 4%; font-variant-numeric: tabular-nums; }
.af-hud .af-bg { left: 2.4%; bottom: 4%; }
.af-hud .af-bd { right: 2.4%; bottom: 4%; }
.af-hud .af-reticule { left: 50%; top: 50%; width: 1.4cqw; height: 1.4cqw; transform: translate(-50%, -50%); border: 1px solid var(--af-cuir); border-radius: 50%; opacity: 0; }
.af-balayage { position: absolute; top: -10%; height: 120%; width: 55%; left: 0; background: linear-gradient(90deg, transparent, var(--af-flamme) 18%, var(--af-braise) 50%, var(--af-flamme) 82%, transparent); transform: translateX(-200%) skewX(-16deg); mix-blend-mode: normal; pointer-events: none; }
.af-eclair { position: absolute; inset: 0; background: radial-gradient(circle at 50% 62%, #FFE7C9, var(--af-flamme) 40%, transparent 75%); opacity: 0; pointer-events: none; }
.af-grain { position: absolute; inset: -50%; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.af-voile { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--af-nuit) 35%, transparent); border: 0; padding: 0; cursor: pointer; color: var(--af-cuir); font: inherit; }
.af-voile[hidden] { display: none !important; }
.af-voile .af-rond { width: clamp(64px, 9cqw, 112px); height: clamp(64px, 9cqw, 112px); border-radius: 50%; background: var(--af-flamme); display: grid; place-items: center; box-shadow: 0 0 0 10px color-mix(in srgb, var(--af-flamme) 25%, transparent); transition: transform .25s; }
.af-voile:hover .af-rond, .af-voile:focus-visible .af-rond { transform: scale(1.07); }
.af-voile svg { width: 34%; margin-left: 8%; fill: #FFF6EC; }
.af-voile:focus-visible { outline: 2px solid var(--af-braise); outline-offset: -4px; }

/* Commandes */
.af-commandes { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.af-btn { font: inherit; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--af-cuir); background: var(--af-suie); border: 1px solid #36312B; border-radius: 999px; padding: .55rem 1rem; cursor: pointer; display: inline-flex; align-items: center; gap: .5rem; }
.af-btn:hover { border-color: var(--af-flamme); }
.af-btn:focus-visible, .af-piste input:focus-visible, .af-chap button:focus-visible { outline: 2px solid var(--af-braise); outline-offset: 2px; }
.af-btn.af-princ { background: var(--af-flamme); border-color: var(--af-flamme); color: #FFF6EC; }
.af-piste { flex: 1 1 260px; position: relative; min-width: 0; height: 28px; display: flex; align-items: center; }
.af-piste input { width: 100%; margin: 0; accent-color: var(--af-flamme); position: relative; z-index: 1; background: transparent; }
.af-ticks { position: absolute; left: 0; right: 0; top: 50%; height: 0; pointer-events: none; }
.af-ticks i { position: absolute; top: -9px; width: 1px; height: 18px; background: #4A433B; }
.af-temps { font-size: .82rem; color: var(--af-cendre); font-variant-numeric: tabular-nums; min-width: 6.5em; text-align: right; }
.af-chap { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.af-chap button { font: inherit; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--af-cendre); background: transparent; border: 1px solid #2E2A25; border-radius: 4px; padding: .4rem .6rem; cursor: pointer; }
.af-chap button span { color: var(--af-braise); margin-right: .45em; }
.af-chap button.af-actif { color: var(--af-cuir); border-color: var(--af-flamme); }
.af-note { font-size: .74rem; color: var(--af-cendre); letter-spacing: .04em; line-height: 1.6; max-width: 70ch; margin: 0; }

.af { background: var(--af-nuit); color: var(--af-cuir); font-family: var(--af-f-mono); border-radius: 6px; padding-block: 14px 16px; padding-inline: clamp(10px, 2vw, 18px); display: flex; flex-direction: column; gap: 12px; margin-top: 1.5rem; color-scheme: dark; }
.af * { box-sizing: border-box; }
.af p { margin: 0; }
.af-credit { font-size: 12px; color: var(--ink-mute, #9c9182); margin: 0; }


.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }