/* Accueil spectaculaire (30/10/2026) : hero en calques parallaxes, Roue des Douze, podium des légendes.
   Fichier propre à gabarits/accueil.njk. Utilise (sans les réimplémenter) les classes de motion.css : .brille, .lueur,
   .flotte, .pulse, .titre-or, .ken-burns, .socle. Rien ne cache de contenu sans JavaScript (états masqués sous html.js). */

/* ---------- Hero ---------- */
.hero--accueil {
  --e: min(33vh, 14vw, 440px); /* hauteur d'un personnage de la rangée avant */
  display: flex; align-items: center; isolation: isolate;
  min-height: min(86vh, 920px);
  border-bottom: 0; background: #0b1020;
}
.ciel, .calque, .rayon, .procession, .particules { position: absolute; inset: 0; pointer-events: none; }
.calque { inset: -30px; will-change: transform; }

/* L0 : ciel. Quatre teintes empilées ; l'heure (html[data-moment], posée par tete.js) en rend une opaque (fondu de 2 s). */
.ciel { z-index: 0; }
.ciel__ton { position: absolute; inset: 0; opacity: 0; transition: opacity 2s ease; }
.ciel__ton--aube { background: linear-gradient(180deg, #2f3160 0%, #a8648c 42%, #f0b08c 78%, #fbd9a0 100%); }
.ciel__ton--jour { background: linear-gradient(180deg, #1f5aa0 0%, #5a9fd4 45%, #a8d2ec 80%, #f3e2b4 100%); }
.ciel__ton--crepuscule { background: linear-gradient(180deg, #1e1a4a 0%, #7c3a5a 40%, #d8643a 75%, #f3a24a 100%); }
.ciel__ton--nuit { background: linear-gradient(180deg, #030816 0%, #0a1634 55%, #17274d 100%); }
html[data-moment='aube'] .ciel__ton--aube,
html[data-moment='jour'] .ciel__ton--jour,
html[data-moment='crepuscule'] .ciel__ton--crepuscule,
html[data-moment='nuit'] .ciel__ton--nuit,
html:not([data-moment]) .ciel__ton--crepuscule { opacity: 1; }
.ciel__etoiles {
  position: absolute; inset: 0 0 35%; opacity: 0; transition: opacity 2s ease;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 14%, #fff, transparent), radial-gradient(1px 1px at 15% 38%, #fff, transparent),
    radial-gradient(2px 2px at 23% 9%, #ffe9b0, transparent), radial-gradient(1px 1px at 31% 27%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 39% 17%, #fff, transparent), radial-gradient(1px 1px at 47% 44%, #cfe0ff, transparent),
    radial-gradient(2px 2px at 55% 8%, #fff, transparent), radial-gradient(1px 1px at 62% 31%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 70% 15%, #ffe9b0, transparent), radial-gradient(1px 1px at 77% 40%, #fff, transparent),
    radial-gradient(2px 2px at 84% 11%, #fff, transparent), radial-gradient(1px 1px at 91% 29%, #cfe0ff, transparent),
    radial-gradient(1.5px 1.5px at 96% 6%, #fff, transparent), radial-gradient(1px 1px at 4% 46%, #fff, transparent),
    radial-gradient(1px 1px at 27% 52%, #ffe9b0, transparent), radial-gradient(1.5px 1.5px at 58% 55%, #fff, transparent),
    radial-gradient(1px 1px at 88% 52%, #fff, transparent), radial-gradient(1px 1px at 44% 5%, #fff, transparent);
}
html[data-moment='nuit'] .ciel__etoiles { opacity: 1; }
html[data-moment='crepuscule'] .ciel__etoiles { opacity: 0.35; }

/* L1 : lavis de couleur (bannière 11 pré-floutée par scripts/accueil-art.py). */
.calque--lavis { z-index: 1; }
.calque--lavis img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0.32; mix-blend-mode: soft-light; }

/* L2 : nuages. Positions de repos (sans mouvement) par --x ; la dérive les fait traverser le hero. */
.calque--nuages { z-index: 2; opacity: 0.85; transition: opacity 2s ease; }
html[data-moment='nuit'] .calque--nuages { opacity: 0.16; }
html[data-moment='crepuscule'] .calque--nuages { opacity: 0.6; }
html[data-moment='aube'] .calque--nuages { opacity: 0.7; }
.nuage { position: absolute; left: 0; height: auto; will-change: transform; transform: translateX(var(--x)); }
.nuage--1 { --x: 6vw; top: 9%; width: min(46vw, 760px); }
.nuage--2 { --x: 52vw; top: 24%; width: min(34vw, 560px); opacity: 0.8; }
.nuage--3 { --x: 76vw; top: 4%; width: min(28vw, 480px); opacity: 0.6; }
html:not(.sans-mouvement) .nuage { animation: nuage-derive 110s linear infinite; }
html:not(.sans-mouvement) .nuage--2 { animation-duration: 85s; animation-delay: -40s; }
html:not(.sans-mouvement) .nuage--3 { animation-duration: 140s; animation-delay: -90s; }
html:not(.sans-mouvement) .nuage--1 { animation-delay: -30s; }
@keyframes nuage-derive {
  0% { transform: translateX(-60vw); }
  100% { transform: translateX(120vw); }
}

/* Rayon de lumière diagonal doux. */
.rayon {
  z-index: 3; inset: -30% -10% auto; height: 130%; transform-origin: 72% 0; mix-blend-mode: screen; opacity: 0.32;
  background: conic-gradient(from 150deg at 72% -6%, transparent 0deg, rgba(255, 240, 180, 0) 3deg, rgba(255, 240, 180, 0.55) 11deg,
    rgba(255, 240, 180, 0) 21deg, rgba(255, 240, 180, 0.35) 26deg, transparent 34deg, transparent 360deg);
  transition: opacity 2s ease;
}
html[data-moment='nuit'] .rayon { opacity: 0.12; }
html[data-moment='crepuscule'] .rayon { opacity: 0.24; }
html:not(.sans-mouvement) .rayon { animation: rayon-oscille 18s ease-in-out infinite alternate; }
@keyframes rayon-oscille {
  from { transform: rotate(-3deg); }
  to { transform: rotate(4deg); }
}

/* L3 : la procession des Douze, trois rangées de profondeur. */
.procession { z-index: 4; }
.procession__scene { position: absolute; inset: 0; max-width: 2700px; margin-inline: auto; }
.rang { position: absolute; inset: 0; will-change: transform; }
.rang--arriere { --t: 0.58; }
.rang--milieu { --t: 0.78; }
.rang--avant { --t: 1; }
.perso { position: absolute; isolation: isolate; height: calc(var(--e) * var(--t)); translate: -50% 0; }
.rang--arriere .perso { bottom: 36%; }
.rang--milieu .perso { bottom: 17%; }
.rang--avant .perso { bottom: 3%; }
.perso__img { display: block; height: 100%; width: auto; }
.rang--arriere .perso__img { filter: brightness(0.55) saturate(0.8); }
.rang--milieu .perso__img { filter: brightness(0.8) saturate(0.92); }
.perso::after { /* ombre portée au sol */
  content: ''; position: absolute; z-index: -1; left: 50%; bottom: -3%; width: 80%; height: 13%; translate: -50% 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6), transparent 70%);
}
.perso--1 { left: 5%; } .perso--2 { left: 17%; } .perso--3 { left: 83%; } .perso--4 { left: 95%; }
.perso--5 { left: 11%; } .perso--6 { left: 24%; } .perso--7 { left: 76%; } .perso--8 { left: 89%; }
.perso--9 { left: 6%; } .perso--10 { left: 18%; } .perso--11 { left: 82%; } .perso--12 { left: 94%; }
/* Phases : n sert à l'entrée en cascade et au décalage du flottement. */
.p1 { --n: 1; } .p2 { --n: 2; } .p3 { --n: 3; } .p4 { --n: 4; } .p5 { --n: 5; } .p6 { --n: 6; }
.p7 { --n: 7; } .p8 { --n: 8; } .p9 { --n: 9; } .p10 { --n: 10; } .p11 { --n: 11; } .p12 { --n: 12; }
.perso .perso__img { animation-delay: calc(var(--n) * -0.45s); animation-duration: calc(3.8s + var(--n) * 0.17s); }

/* L4 : particules (canvas dessiné par accueil.js). */
.particules { z-index: 5; width: 100%; height: 100%; }

/* Fondu bas et bords : le hero se pose sur le bandeau des chiffres. */
.hero--accueil::after {
  z-index: 6; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(27, 18, 12, 0) 62%, rgba(27, 18, 12, 0.75) 100%),
    radial-gradient(ellipse 110% 100% at 50% 40%, transparent 55%, rgba(8, 5, 3, 0.55) 100%);
}

/* L5 : contenu. */
.hero__page { z-index: 7; }
.hero--accueil .hero__contenu { margin-inline: auto; text-align: center; max-width: 780px; padding-block: 64px 96px; }
.hero--accueil .hero__contenu::before { /* voile sombre derrière le texte : lisible sur chaque calque, jour comme nuit */
  content: ''; position: absolute; z-index: -1; inset: -30px -90px;
  background: radial-gradient(ellipse at center, rgba(12, 8, 6, 0.66) 0%, rgba(12, 8, 6, 0.4) 50%, transparent 72%);
}
.hero__logo-cadre { --lueur: rgba(241, 205, 122, 0.5); display: block; position: relative; width: min(440px, 90%); margin: 0 auto 14px; }
.hero__logo-cadre .brille { display: block; }
.hero--accueil .hero__logo { display: block; width: 100%; margin: 0; }
.hero--accueil .hero__texte { margin-inline: auto; max-width: 34em; }
.hero--accueil .actions { justify-content: center; gap: 12px; flex-wrap: nowrap; }
.hero--accueil .actions .bouton { padding: 0.7em 1.15em; font-size: 1.08rem; white-space: nowrap; }
.mot { display: inline-block; }

/* Séquence d'entrée (première visite de la session ; accueil.js pose html.intro-faite sinon). */
html.js:not(.sans-mouvement):not(.intro-faite) .hero__logo-cadre { animation: accueil-zoom 0.6s ease-out 0.1s backwards; }
html.js:not(.sans-mouvement):not(.intro-faite) .mot { animation: accueil-monte 0.55s ease-out backwards; animation-delay: calc(0.55s + var(--i, 0) * 60ms); }
html.js:not(.sans-mouvement):not(.intro-faite) .hero--accueil .hero__texte { animation: accueil-monte 0.6s ease-out 1.2s backwards; }
html.js:not(.sans-mouvement):not(.intro-faite) .hero--accueil .actions { animation: accueil-monte 0.6s ease-out 1.4s backwards; }
html.js:not(.sans-mouvement):not(.intro-faite) .perso { animation: accueil-entree 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; animation-delay: calc(0.3s + var(--n) * 70ms); }
.mot:nth-of-type(2) { --i: 1; } .mot:nth-of-type(3) { --i: 2; } .mot:nth-of-type(4) { --i: 3; } .mot:nth-of-type(5) { --i: 4; }
.mot:nth-of-type(6) { --i: 5; } .mot:nth-of-type(7) { --i: 6; } .mot:nth-of-type(8) { --i: 7; } .mot:nth-of-type(9) { --i: 8; }
@keyframes accueil-zoom { from { opacity: 0; transform: scale(0.9); } }
@keyframes accueil-monte { from { opacity: 0; transform: translateY(16px); } }
@keyframes accueil-entree { from { opacity: 0; transform: translateY(75%); } }

/* Séparateur en bois ouvragé : chevauche le bas du hero et le haut du bandeau des chiffres. */
.hero__bois {
  position: relative; z-index: 8; height: 44px; margin-block: -22px;
  background: url(/img/accueil/bois-bande.svg) repeat-x center / auto 44px; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.5));
}
.hero__bois img { position: absolute; left: 50%; top: 50%; height: 64px; width: auto; translate: -50% -50%; }
.chiffres-serveur--accueil .page { padding-top: 22px; }
.chiffres-serveur .pulse {
  display: inline-block; width: 0.4em; height: 0.4em; margin-right: 0.4em; vertical-align: middle; border-radius: 50%;
  background: #6fd14a; box-shadow: 0 0 8px #6fd14a;
}

/* ---------- La Roue des Douze ---------- */
.roue {
  --s: 400px; --ico: 62px; --r: calc(var(--s) / 2 - var(--ico) / 2 - 6px);
  display: grid; grid-template-columns: var(--s) minmax(0, 1fr); gap: 36px; align-items: center; justify-content: center;
  padding: 26px 30px; position: relative; overflow: hidden;
  border: 3px solid var(--bois); border-radius: 12px; box-shadow: var(--ombre), inset 0 0 0 1px var(--filet);
  background: radial-gradient(ellipse 70% 90% at 78% 50%, rgba(226, 176, 74, 0.14), transparent 70%), var(--grain-sombre), linear-gradient(180deg, #33200f, #211407);
}
.roue__cadran { position: relative; width: var(--s); height: var(--s); }
.roue__cadran::before { /* repère de la classe choisie, en haut de l'anneau */
  content: ''; position: absolute; z-index: 3; left: 50%; top: -9px; translate: -50% 0;
  border: 9px solid transparent; border-top: 12px solid var(--or); border-bottom: 0; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6));
}
.roue__anneau { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; transform: rotate(var(--rot, 0deg)); transition: transform 0.6s cubic-bezier(0.3, 0.7, 0.2, 1); }
.roue__anneau::before { content: ''; position: absolute; inset: calc(var(--ico) / 2 + 6px); border: 2px solid rgba(226, 176, 74, 0.38); border-radius: 50%; }
.roue__rose { position: absolute; inset: 24%; opacity: 0.34; }
.roue__rose img { display: block; width: 100%; height: 100%; }
.roue__item {
  position: absolute; left: 50%; top: 50%; width: var(--ico); height: var(--ico); margin: calc(var(--ico) / -2) 0 0 calc(var(--ico) / -2);
  transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1 - var(--rot, 0deg)));
  transition: transform 0.6s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.roue__item--1 { --a: 0deg; } .roue__item--2 { --a: 30deg; } .roue__item--3 { --a: 60deg; } .roue__item--4 { --a: 90deg; }
.roue__item--5 { --a: 120deg; } .roue__item--6 { --a: 150deg; } .roue__item--7 { --a: 180deg; } .roue__item--8 { --a: 210deg; }
.roue__item--9 { --a: 240deg; } .roue__item--10 { --a: 270deg; } .roue__item--11 { --a: 300deg; } .roue__item--12 { --a: 330deg; }
.roue__lien {
  display: block; width: 100%; height: 100%; border-radius: 50%; background: #2a170a; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6), 0 0 0 2px var(--bois);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.roue__lien img { display: block; width: 100%; height: 100%; }
.roue__lien:hover { transform: scale(1.14); }
.roue__lien.est-actif { transform: scale(1.3); box-shadow: 0 0 0 3px var(--or), 0 0 22px rgba(241, 205, 122, 0.8); }
.roue__lien:focus-visible { outline: 3px solid var(--or-clair); outline-offset: 3px; }

.roue__scene { min-width: 0; }
.roue__panneau { display: none; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; align-items: center; }
.roue__panneau.est-actif { display: grid; }
.roue__figures { position: relative; aspect-ratio: 1.1; }
.roue__halo { pointer-events: none; position: absolute; left: 50%; top: 50%; width: 100%; height: auto; translate: -50% -50%; opacity: 0.95; filter: drop-shadow(0 0 28px rgba(241, 205, 122, 0.3)); }
.roue__figure { position: absolute; bottom: 4%; width: 56%; height: auto; max-height: 92%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.55)); }
.roue__figure--h { left: -3%; }
.roue__figure--f { right: -3%; }
.roue__texte { color: var(--creme); }
.roue__nom { margin: 0; font-family: var(--police-titre); font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.1; color: var(--or-clair); text-shadow: 0 3px 6px rgba(0, 0, 0, 0.7); }
.roue__sous-titre { margin: 2px 0 10px; font-style: italic; color: var(--or); }
.roue__accroche { margin: 0 0 18px; font-size: 1.12rem; color: #f3e8cd; max-width: 30em; }
html:not(.sans-mouvement) .roue__halo { animation: accueil-tourne 70s linear infinite; }
html:not(.sans-mouvement) .roue__panneau.est-actif .roue__figure--h { animation: roue-gauche 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
html:not(.sans-mouvement) .roue__panneau.est-actif .roue__figure--f { animation: roue-droite 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.08s backwards; }
html:not(.sans-mouvement) .roue__panneau.est-actif .roue__texte { animation: accueil-monte 0.5s ease-out 0.1s backwards; }
@keyframes roue-gauche { from { opacity: 0; transform: translateX(-60px); } }
@keyframes roue-droite { from { opacity: 0; transform: translateX(60px); } }
@keyframes accueil-tourne { to { transform: rotate(360deg); } }
html.sans-mouvement .roue__anneau, html.sans-mouvement .roue__item, html.sans-mouvement .roue__lien { transition: none; }

/* ---------- Légendes : podium ---------- */
.legendes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; }
.legende { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
.legende--1 { order: 2; } .legende--2 { order: 1; } .legende--3 { order: 3; }
.legende__icone { width: 44px; height: 44px; filter: drop-shadow(0 3px 3px rgba(60, 30, 5, 0.4)); }
.legende--1 .legende__icone { width: 56px; height: 56px; }
.legende__nom { font-weight: 700; overflow-wrap: anywhere; }
.legende__detail { font-size: 0.9rem; color: var(--encre-douce); }
.legende__socle {
  display: grid; place-items: center; width: 100%; margin-top: 8px; border: 2px solid var(--filet); border-bottom: 0; border-radius: 8px 8px 0 0;
  font-family: var(--police-titre); font-weight: 700; font-size: 1.7rem; color: var(--encre); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5);
}
.legende--1 .legende__socle { height: 88px; background: linear-gradient(180deg, var(--or-clair), var(--or)); }
.legende--2 .legende__socle { height: 64px; background: linear-gradient(180deg, #eef0f1, #aab2b9); }
.legende--3 .legende__socle { height: 46px; background: linear-gradient(180deg, #e3b184, #b8733a); }
.legendes__lien { margin: 14px 0 0; text-align: center; }

.engagement__ico { display: inline-block; }

/* ---------- Tablette et mobile ---------- */
@media (max-width: 1200px) {
  .perso--6, .perso--7 { display: none; }
}
@media (max-width: 1100px) {
  .perso--2, .perso--3 { display: none; }
}
@media (max-width: 1000px) {
  .roue { --s: 340px; --ico: 54px; gap: 22px; padding: 22px; }
}
@media (max-width: 900px) {
  /* Cinq personnages en rangée au pied du hero, texte au-dessus. */
  .hero--accueil { --e: min(34vw, 170px); min-height: min(86vh, 920px); align-items: flex-start; }
  .hero--accueil .hero__contenu { padding-block: 36px calc(var(--e) * 1.4 + 56px); }
  .hero--accueil .hero__contenu::before { inset: -20px -30px; }
  .perso--bureau { display: none; }
  .hero--accueil .actions { flex-wrap: wrap; }
  .hero--accueil .actions .bouton { flex: 1 1 100%; white-space: normal; }
  .rang--arriere .perso { bottom: calc(var(--e) * 0.66 + 14px); }
  .rang--milieu .perso { bottom: 14px; }
  .rang--avant .perso { bottom: 12px; }
  .perso--1 { left: 12%; } .perso--2 { left: 88%; }
  .perso--9 { left: 26%; } .perso--10 { left: 50%; } .perso--12 { left: 74%; }
  .hero--accueil::after { background: linear-gradient(180deg, rgba(27, 18, 12, 0) 70%, rgba(27, 18, 12, 0.7) 100%); }

  /* La roue devient une rangée défilante d'icônes, la scène en dessous. */
  .roue { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 14px; }
  .roue__cadran { width: 100%; height: auto; }
  .roue__cadran::before, .roue__anneau::before, .roue__rose { display: none; }
  .roue__anneau { position: static; display: flex; gap: 12px; padding: 12px 8px; overflow-x: auto; transform: none; transition: none; scrollbar-color: var(--filet) transparent; }
  .roue__item { position: static; flex: none; margin: 0; transform: none; transition: none; }
  .roue__lien.est-actif { transform: scale(1.12); }
  .roue__panneau { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .roue__figures { aspect-ratio: auto; height: 240px; overflow: hidden; }
  .roue__halo { width: auto; height: 100%; }
  .roue__figure { width: auto; height: 90%; max-width: 50%; }
  .roue__texte { text-align: center; }
  .roue__accroche { margin-inline: auto; }
}
@media (max-width: 640px) {
  .hero--accueil { --e: min(34vw, 150px); }
  .hero--accueil .hero__texte { font-size: 1.02rem; }
  .legendes { gap: 6px; }
  .legende__socle { font-size: 1.3rem; }
}