/* Accueil — les décors chargés sans bloquer l'affichage : plan d'évasion de la FAQ (ci-dessous), plan de Toulouse
   de la Localisation, poussière dans la lumière de la porte, chiffres clés en cadenas à molettes (plus bas). */

/* FAQ — « le plan d'évasion ».
   La FAQ devient un plan d'évacuation : chaque thème est une pièce (murs, cloison, porte), un itinéraire doré
   se dessine de pièce en pièce au fil du défilement, du point rouge (vous êtes ici) au panneau de sortie posé
   juste au-dessus de « Vous ne trouvez pas votre réponse ? ». Sur grand écran, les ailes du bâtiment sont
   dessinées de part et d'autre (/img/faq/plan-evacuation.svg), sans dépasser la largeur du contenu du site.
   Aucun texte dans le décor : seulement des symboles. Feuille chargée sans bloquer la page : elle n'ajoute que
   des décors en position absolue et ne change jamais la mise en page, donc rien ne bouge à son arrivée. */

#faq { --fq-trait: rgba(214, 219, 228, .3); --fq-or: #d4af37; --fq-axe: -2.7rem; --fq-gap: 2rem; }
#faq .fq-inner { position: relative; isolation: isolate; }
#faq .fq-group, #faq .fq-cta { position: relative; }

/* la feuille : la grille de la Localisation continue sous le plan */
#faq .fq-inner::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .06;
  background-image: linear-gradient(#d4af37 1px, transparent 1px), linear-gradient(90deg, #d4af37 1px, transparent 1px);
  background-size: 6.4rem 6.4rem;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent);
}
.lc .lc-inner::before {
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent), linear-gradient(0deg, #000, transparent 40%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent), linear-gradient(0deg, #000, transparent 40%);
}

/* l'itinéraire : pointillés dorés et chevrons, dessinés pièce par pièce quand chaque thème apparaît */
#faq .fq-group::after {
  content: ""; position: absolute; left: calc(var(--fq-axe) - .6rem); width: 1.2rem;
  top: calc(var(--fq-gap) * -1); bottom: calc(var(--fq-gap) * -1); pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 160'%3E%3Cpath d='M2 2.5l4 5 4-5' fill='none' stroke='%23d4af37' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 0 7rem / 1.2rem 16rem repeat-y,
    repeating-linear-gradient(var(--fq-or) 0 .7rem, transparent .7rem 1.2rem) 50% 0 / 2px 100% no-repeat;
  filter: drop-shadow(0 0 3px rgba(212, 175, 55, .6)); clip-path: inset(0);
}
/* départ : le point rouge « vous êtes ici » */
#faq .fq-head + .fq-group::after { top: -4rem; }
#faq .fq-head + .fq-group .fq-theme::before {
  content: ""; position: absolute; z-index: 1; left: calc(var(--fq-axe) - .6rem); top: -4.6rem; width: 1.2rem; height: 1.2rem;
  border-radius: 50%; background: #ff4d3d; box-shadow: 0 0 0 .3rem rgba(255, 77, 61, .3), 0 0 12px rgba(255, 77, 61, .6);
  pointer-events: none;
}
/* arrivée : l'itinéraire tourne vers la sortie, au fond de la dernière pièce */
#faq .fq-group:nth-last-child(2)::after {
  bottom: -2.2rem; width: calc(50% - 3.8rem - var(--fq-axe));
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M1 1l8 5-8 5z' fill='%23d4af37'/%3E%3C/svg%3E") 100% calc(100% - .1rem) / 1rem 1.2rem no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 160'%3E%3Cpath d='M2 2.5l4 5 4-5' fill='none' stroke='%23d4af37' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 0 7rem / 1.2rem 16rem repeat-y,
    repeating-linear-gradient(var(--fq-or) 0 .7rem, transparent .7rem 1.2rem) .5rem 0 / 2px calc(100% - .6rem) no-repeat,
    repeating-linear-gradient(90deg, var(--fq-or) 0 .7rem, transparent .7rem 1.2rem) .5rem calc(100% - .6rem) / calc(100% - 1.7rem) 2px no-repeat;
}
/* le panneau de sortie doré (pictogramme seul), allumé dans l'ouverture du mur du fond */
#faq .fq-cta::after {
  content: ""; position: absolute; left: calc(50% - 3.8rem); top: -2.55rem; width: 7.6rem; height: 4.4rem;
  transform: translateY(-50%); border-radius: .5rem; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 32' fill='none' stroke='%23171204' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M25 3h11v26H25' stroke-width='2.4'/%3E%3Ccircle cx='18' cy='5' r='3.2' fill='%23171204' stroke='none'/%3E%3Cpath d='M16.5 9.8l-3 7.6' stroke-width='4.4'/%3E%3Cpath d='M16.6 10.8l4.6 3 3.4-2.4M15.8 10.9l-4.4 1-2.6 4' stroke-width='2.8'/%3E%3Cpath d='M13.4 17.6l5.4 3-.6 7h2.6M13.4 17.6l-3.6 5.4-5.4 1.4' stroke-width='3.2'/%3E%3C/svg%3E") 50% 50% / 4rem auto no-repeat,
    linear-gradient(#ecd58a, #d4af37 60%, #b3901f);
  box-shadow: inset 0 0 0 1px rgba(255, 244, 214, .45), 0 0 22px rgba(212, 175, 55, .55), 0 0 70px rgba(212, 175, 55, .2);
}

/* ordinateur : les pièces (murs doubles, cloisons percées d'une porte côté itinéraire, mur du fond) */
@media (min-width: 1060px) {
  #faq .fq-group::before {
    content: ""; position: absolute; left: -5.6rem; right: -5.6rem; top: calc(var(--fq-gap) * -1); bottom: calc(var(--fq-gap) * -1);
    pointer-events: none;
    background:
      linear-gradient(var(--fq-trait), var(--fq-trait)) 0 0 / 1px 100% no-repeat,
      linear-gradient(var(--fq-trait), var(--fq-trait)) .5rem 0 / 1px 100% no-repeat,
      linear-gradient(var(--fq-trait), var(--fq-trait)) 100% 0 / 1px 100% no-repeat,
      linear-gradient(var(--fq-trait), var(--fq-trait)) calc(100% - .5rem) 0 / 1px 100% no-repeat,
      linear-gradient(var(--fq-trait), var(--fq-trait)) 5rem 0 / calc(100% - 5.5rem) 1px no-repeat,
      linear-gradient(var(--fq-trait), var(--fq-trait)) 5rem .5rem / calc(100% - 5.5rem) 1px no-repeat;
  }
  #faq .fq-group:nth-last-child(2)::before { bottom: calc(-3.3rem - 1px); }
  #faq .fq-group + .fq-group .fq-theme::before {
    content: ""; position: absolute; left: -5.1rem; top: calc(var(--fq-gap) * -1); width: 4.5rem; height: 4.5rem;
    box-sizing: border-box; border: solid var(--fq-trait); border-width: 0 1px 1px; border-bottom-right-radius: 100%;
    pointer-events: none;
  }
  #faq .fq-cta::before {
    content: ""; position: absolute; left: -5.6rem; right: -5.6rem; top: -2.8rem; height: calc(.5rem + 1px); pointer-events: none;
    background:
      linear-gradient(var(--fq-trait), var(--fq-trait)) 0 0 / calc(50% - 4.2rem) 1px no-repeat,
      linear-gradient(var(--fq-trait), var(--fq-trait)) 0 100% / calc(50% - 4.2rem) 1px no-repeat,
      linear-gradient(var(--fq-trait), var(--fq-trait)) 100% 0 / calc(50% - 4.2rem) 1px no-repeat,
      linear-gradient(var(--fq-trait), var(--fq-trait)) 100% 100% / calc(50% - 4.2rem) 1px no-repeat;
  }
}
/* grand écran : les ailes du bâtiment, dans la largeur du contenu du site (1160 px, comme les autres sections) */
@media (min-width: 1260px) {
  #faq .fq-inner::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: url(/img/faq/plan-evacuation.svg?v=20260924-3) 50% 0 / 1160px auto no-repeat;
  }
}
/* tablette et téléphone : pas de murs ; les questions sont en retrait (règle dans la page) et l'itinéraire
   longe la colonne, dans la marge normale du site, en marquant chaque thème d'un point */
@media (max-width: 1059px) {
  #faq { --fq-axe: .6rem; }
  #faq .fq-group::after { background-image: none, repeating-linear-gradient(var(--fq-or) 0 .7rem, transparent .7rem 1.2rem); }
  #faq .fq-group:nth-last-child(2)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M1 1l8 5-8 5z' fill='%23d4af37'/%3E%3C/svg%3E"), none,
      repeating-linear-gradient(var(--fq-or) 0 .7rem, transparent .7rem 1.2rem), repeating-linear-gradient(90deg, var(--fq-or) 0 .7rem, transparent .7rem 1.2rem);
  }
  #faq .fq-group + .fq-group .fq-theme::before {
    content: ""; position: absolute; z-index: 1; left: calc(var(--fq-axe) - .5rem); top: .34rem; width: 1rem; height: 1rem;
    box-sizing: border-box; border: 2px solid var(--fq-or); border-radius: 50%; background: #0a0a0e; pointer-events: none;
  }
  #faq .fq-head + .fq-group::after { top: -2rem; }
  #faq .fq-head + .fq-group .fq-theme::before { top: -2.6rem; }
}
@media (max-width: 600px) { #faq { --fq-gap: 1.6rem; } }

/* animations : point rouge qui palpite, itinéraire qui se dessine, panneau qui s'allume comme un néon */
@media (prefers-reduced-motion: no-preference) {
  #faq .fq-head + .fq-group:not(.ee-reveal-pending) .fq-theme::before { animation: fqIci 1.8s ease-out .2s 3; }
  @keyframes fqIci {
    0% { box-shadow: 0 0 0 0 rgba(255, 77, 61, .6), 0 0 12px rgba(255, 77, 61, .6); }
    100% { box-shadow: 0 0 0 1.2rem rgba(255, 77, 61, 0), 0 0 12px rgba(255, 77, 61, .6); }
  }
  #faq .fq-group::after { transition: clip-path 1.6s cubic-bezier(.45, 0, .25, 1) .35s; }
  #faq .fq-group.ee-reveal-pending::after { clip-path: inset(0 0 100% 0); }
  #faq .fq-cta.ee-reveal-pending::after { opacity: .1; }
  #faq .fq-cta:not(.ee-reveal-pending)::after { animation: fqNeon 1.4s linear .6s both; }
  @keyframes fqNeon { 0% { opacity: .1; } 8% { opacity: 1; } 12% { opacity: .25; } 20% { opacity: 1; } 25% { opacity: .35; } 36%, 100% { opacity: 1; } }
}

/* Localisation — « le plan de Toulouse » : le plan de la ville au trait fin derrière les trois adresses (la Garonne
   et ses ponts, les canaux, les voies de Matabiau, le centre ancien dans ses boulevards), avec une rose
   des vents au-dessus du titre, dans la largeur du contenu du site et fondu vers les bords. Les numéros des cartes
   deviennent des repères de carte dorés, qui tombent en place quand la carte apparaît. */
.lc .lc-inner { isolation: isolate; }
.lc .lc-inner::after {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: min(1160px, 92%);
  transform: translateX(-50%); pointer-events: none;
  background: url(/img/accueil/plan-toulouse.svg?v=20260924-1) 50% 0 / 1160px auto no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(#000 380px, transparent 820px);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(#000 380px, transparent 820px);
  mask-composite: intersect;
}
/* la rose des vents, emblème au-dessus de « Localisation » */
.lc .lc-head { position: relative; }
.lc .lc-head::before {
  content: ""; position: absolute; left: 50%; top: -8.4rem; width: 6.4rem; height: 6.4rem; margin-left: -3.2rem; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23d4af37' stroke-width='.9'%3E%3Ccircle cx='32' cy='32' r='30.5' stroke-opacity='.5'/%3E%3Ccircle cx='32' cy='32' r='26.5' stroke-opacity='.35'/%3E%3Cpath d='M58.5 32L62.5 32M58 37.2L60 37.6M56.5 42.1L58.3 42.9M54 46.7L55.7 47.8M50.7 50.7L53.6 53.6M46.7 54L47.8 55.7M42.1 56.5L42.9 58.3M37.2 58L37.6 60M32 58.5L32 62.5M26.8 58L26.4 60M21.9 56.5L21.1 58.3M17.3 54L16.2 55.7M13.3 50.7L10.4 53.6M10 46.7L8.3 47.8M7.5 42.1L5.7 42.9M6 37.2L4 37.6M5.5 32L1.5 32M6 26.8L4 26.4M7.5 21.9L5.7 21.1M10 17.3L8.3 16.2M13.3 13.3L10.4 10.4M17.3 10L16.2 8.3M21.9 7.5L21.1 5.7M26.8 6L26.4 4M32 5.5L32 1.5M37.2 6L37.6 4M42.1 7.5L42.9 5.7M46.7 10L47.8 8.3M50.7 13.3L53.6 10.4M54 17.3L55.7 16.2M56.5 21.9L58.3 21.1M58 26.8L60 26.4' stroke-opacity='.5'/%3E%3Cpath d='M27.4 32L32 8L36.6 32' stroke-opacity='.8'/%3E%3Cpath d='M32 32L27.4 32L32 8Z' fill='%23d4af37' fill-opacity='1' stroke='none'/%3E%3Cpath d='M32 32L36.6 32L32 8Z' fill='%23d4af37' fill-opacity='.35' stroke='none'/%3E%3Cpath d='M29.7 29.7L41.9 22.1L34.3 34.3' stroke-opacity='.8'/%3E%3Cpath d='M32 32L29.7 29.7L41.9 22.1Z' fill='%23d4af37' fill-opacity='0.55' stroke='none'/%3E%3Cpath d='M32 27.4L56 32L32 36.6' stroke-opacity='.8'/%3E%3Cpath d='M32 32L32 27.4L56 32Z' fill='%23d4af37' fill-opacity='0.55' stroke='none'/%3E%3Cpath d='M34.3 29.7L41.9 41.9L29.7 34.3' stroke-opacity='.8'/%3E%3Cpath d='M32 32L34.3 29.7L41.9 41.9Z' fill='%23d4af37' fill-opacity='0.55' stroke='none'/%3E%3Cpath d='M36.6 32L32 56L27.4 32' stroke-opacity='.8'/%3E%3Cpath d='M32 32L36.6 32L32 56Z' fill='%23d4af37' fill-opacity='0.55' stroke='none'/%3E%3Cpath d='M34.3 34.3L22.1 41.9L29.7 29.7' stroke-opacity='.8'/%3E%3Cpath d='M32 32L34.3 34.3L22.1 41.9Z' fill='%23d4af37' fill-opacity='0.55' stroke='none'/%3E%3Cpath d='M32 36.6L8 32L32 27.4' stroke-opacity='.8'/%3E%3Cpath d='M32 32L32 36.6L8 32Z' fill='%23d4af37' fill-opacity='0.55' stroke='none'/%3E%3Cpath d='M29.7 34.3L22.1 22.1L34.3 29.7' stroke-opacity='.8'/%3E%3Cpath d='M32 32L29.7 34.3L22.1 22.1Z' fill='%23d4af37' fill-opacity='0.55' stroke='none'/%3E%3Ccircle cx='32' cy='32' r='2.2' fill='%23d4af37' stroke='none'/%3E%3C/svg%3E") 50% 50% / contain no-repeat;
}
@media (max-width: 600px) { .lc .lc-head::before { top: -6.6rem; width: 5.2rem; height: 5.2rem; margin-left: -2.6rem; } }
.lc .lc-num {
  left: 1.8rem; bottom: 1.8rem; display: grid; place-items: center; width: 4.4rem; height: 4.4rem;
  font: 700 1.5rem/1 var(--ee-font-display); color: #171204; -webkit-text-fill-color: #171204; background: none;
}
.lc .lc-num::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--ee-grad-gold); box-shadow: 0 6px 14px rgba(0, 0, 0, .55), 0 0 0 3px rgba(212, 175, 55, .2);
}
@media (prefers-reduced-motion: no-preference) {
  .lc .lc-card.ee-reveal-pending .lc-num { opacity: 0; }
  .lc .lc-card:not(.ee-reveal-pending) .lc-num { animation: lcRepere .7s cubic-bezier(.3, 1.5, .5, 1) .45s both; }
  @keyframes lcRepere { from { opacity: 0; transform: translateY(-1.6rem); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
}

/* Réservations → Salles : des grains de poussière flottent dans la lumière de la porte (créés par
   accueil-fusion.js), et de légers rayons partent de la porte. Les conteneurs reprennent exactement le cône et le
   profil de la lumière (section Réservations) et de sa suite (section Salles) : la poussière n'apparaît que dans
   le rai et s'efface avant la frontière entre les deux sections. */
.ds { position: absolute; left: 50%; z-index: -1; pointer-events: none; transform: translateX(-50%); }
.ds-porte {
  top: calc(100% - 2rem); width: min(110rem, 180vw); height: 40rem;
  background: conic-gradient(from 180deg at 50% -5rem, rgba(255, 230, 180, 0) 3deg, rgba(255, 230, 180, .07) 6deg, rgba(255, 230, 180, 0) 10deg 17deg,
    rgba(255, 230, 180, .05) 22deg, rgba(255, 230, 180, 0) 27deg 36deg, rgba(255, 230, 180, .08) 41deg, rgba(255, 230, 180, 0) 47deg 309deg,
    rgba(255, 230, 180, .06) 315deg, rgba(255, 230, 180, 0) 320deg 327deg, rgba(255, 230, 180, .08) 334deg, rgba(255, 230, 180, 0) 339deg 346deg,
    rgba(255, 230, 180, .05) 351deg, rgba(255, 230, 180, 0) 356deg);
  -webkit-mask-image: conic-gradient(from 180deg at 50% -5rem, #000 60deg, transparent 78deg 282deg, #000 300deg),
    linear-gradient(90deg, transparent calc(50% - 45rem), #000 calc(50% - 20rem), #000 calc(50% + 20rem), transparent calc(50% + 45rem)),
    linear-gradient(#000 20%, transparent 45%);
  -webkit-mask-composite: source-in;
  mask-image: conic-gradient(from 180deg at 50% -5rem, #000 60deg, transparent 78deg 282deg, #000 300deg),
    linear-gradient(90deg, transparent calc(50% - 45rem), #000 calc(50% - 20rem), #000 calc(50% + 20rem), transparent calc(50% + 45rem)),
    linear-gradient(#000 20%, transparent 45%);
  mask-composite: intersect;
}
.ds-salles {
  top: 0; width: min(110rem, 100%); height: 46rem;
  -webkit-mask-image: linear-gradient(90deg, transparent calc(50% - 45rem), #000 calc(50% - 20rem), #000 calc(50% + 20rem), transparent calc(50% + 45rem)),
    linear-gradient(transparent, #000 14%, #000 42%, transparent 68%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent calc(50% - 45rem), #000 calc(50% - 20rem), #000 calc(50% + 20rem), transparent calc(50% + 45rem)),
    linear-gradient(transparent, #000 14%, #000 42%, transparent 68%);
  mask-composite: intersect;
}
.ds i {
  position: absolute; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fffaf0 0, rgba(255, 232, 190, .9) 38%, rgba(255, 228, 184, 0) 72%);
  box-shadow: 0 0 8px rgba(255, 214, 150, .55);
  animation: dsVol1 20s ease-in-out infinite alternate, dsLueur1 5s ease-in-out infinite;
}
.ds i.ds-flou { background: radial-gradient(circle, rgba(255, 232, 196, .5), rgba(255, 232, 196, .16) 45%, rgba(255, 232, 196, 0) 70%); box-shadow: none; }
.ds-pause i { animation-play-state: paused; }
@keyframes dsVol1 { 0% { transform: translate(0, 0); } 35% { transform: translate(28px, -18px); } 70% { transform: translate(-12px, -40px); } 100% { transform: translate(20px, -58px); } }
@keyframes dsVol2 { 0% { transform: translate(0, 0); } 35% { transform: translate(-34px, 12px); } 70% { transform: translate(-50px, -20px); } 100% { transform: translate(-18px, -44px); } }
@keyframes dsVol3 { 0% { transform: translate(0, 0); } 35% { transform: translate(16px, 26px); } 70% { transform: translate(44px, 8px); } 100% { transform: translate(30px, -30px); } }
@keyframes dsVol4 { 0% { transform: translate(0, 0); } 35% { transform: translate(-20px, -30px); } 70% { transform: translate(10px, -52px); } 100% { transform: translate(-26px, -70px); } }
@keyframes dsVol5 { 0% { transform: translate(0, 0); } 35% { transform: translate(40px, 4px); } 70% { transform: translate(22px, 34px); } 100% { transform: translate(52px, 16px); } }
@keyframes dsVol6 { 0% { transform: translate(0, 0); } 35% { transform: translate(-8px, 30px); } 70% { transform: translate(-36px, 44px); } 100% { transform: translate(-50px, 14px); } }
@keyframes dsLueur1 { 0%, 100% { opacity: .25; } 30% { opacity: .95; } 55% { opacity: .4; } 80% { opacity: .8; } }
@keyframes dsLueur2 { 0%, 100% { opacity: .15; } 40% { opacity: .7; } 70% { opacity: 1; } }
@keyframes dsLueur3 { 0%, 100% { opacity: .35; } 20% { opacity: .6; } 50% { opacity: .15; } 75% { opacity: .9; } }
@media (max-width: 991px) {
  .ds-porte {
    width: 100%;
    background: conic-gradient(from 180deg at 50% -12.5rem, rgba(255, 230, 180, 0) 3deg, rgba(255, 230, 180, .07) 6deg, rgba(255, 230, 180, 0) 9deg 14deg,
      rgba(255, 230, 180, .06) 18deg, rgba(255, 230, 180, 0) 22deg 337deg, rgba(255, 230, 180, .07) 342deg, rgba(255, 230, 180, 0) 346deg 351deg,
      rgba(255, 230, 180, .05) 355deg, rgba(255, 230, 180, 0) 358deg);
    -webkit-mask-image: conic-gradient(from 180deg at 50% -12.5rem, #000 24deg, transparent 40deg 320deg, #000 336deg),
      linear-gradient(90deg, transparent calc(50% - 18rem), #000 calc(50% - 7rem), #000 calc(50% + 7rem), transparent calc(50% + 18rem)),
      linear-gradient(#000 20%, transparent 45%);
    mask-image: conic-gradient(from 180deg at 50% -12.5rem, #000 24deg, transparent 40deg 320deg, #000 336deg),
      linear-gradient(90deg, transparent calc(50% - 18rem), #000 calc(50% - 7rem), #000 calc(50% + 7rem), transparent calc(50% + 18rem)),
      linear-gradient(#000 20%, transparent 45%);
  }
  .ds-salles {
    -webkit-mask-image: linear-gradient(90deg, transparent calc(50% - 18rem), #000 calc(50% - 7rem), #000 calc(50% + 7rem), transparent calc(50% + 18rem)),
      linear-gradient(transparent, #000 14%, #000 42%, transparent 68%);
    mask-image: linear-gradient(90deg, transparent calc(50% - 18rem), #000 calc(50% - 7rem), #000 calc(50% + 7rem), transparent calc(50% + 18rem)),
      linear-gradient(transparent, #000 14%, #000 42%, transparent 68%);
  }
}

/* Chiffres clés (12 / 3 / 1500 / 60) : cadenas à molettes, construites par accueil-fusion.js. Chaque molette garde
   la taille de son chiffre final (chiffre invisible) ; la bande de 30 chiffres dessinée ici tourne, se cale d'un
   déclic, puis un reflet doré passe de gauche à droite. Sans cette feuille, le chiffre s'affiche simplement. */
.ee-roue { position: relative; display: inline-block; overflow: hidden; vertical-align: top; }
.ee-roue-taille { visibility: hidden; }
.ee-roue-bande { position: absolute; left: 0; right: 0; top: 0; transform: translateY(var(--fin)); }
.ee-roue-bande::before {
  content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9";
  display: block; white-space: pre; text-align: center;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 248, 226, .95) 50%, transparent 60%) 150% 0 / 260% 1em repeat-y,
    var(--ee-grad-gold) 0 0 / 100% 1em repeat-y;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ee-code-melange .ee-roue-bande { transform: translateY(var(--debut)); transition: none; }
.ee-code-ouvert .ee-roue-bande { transition: transform var(--duree) cubic-bezier(.16, .74, .3, 1.07) .1s; }
.ee-code-ouvert .ee-roue-bande::before { animation: eeReflet .9s ease-in-out calc(var(--duree-max) + .2s + var(--i) * .07s) both; }
@keyframes eeReflet { from { background-position: 150% 0, 0 0; } to { background-position: -50% 0, 0 0; } }

/* ============================================================
   LOGO DE L'ACCUEIL : la lumière qui sort du cadenas
   ============================================================ */
/* Un calque de lumière sur le trou de serrure (81,3 % / 59,7 % de l'image) : à l'arrivée, la serrure s'allume
   (éclat qui grandit puis se pose, rayons irréguliers), puis la lumière respire lentement et les rayons tournent
   à peine. Le logo lui-même n'est jamais animé (aucun effet sur son affichage) ; le calque n'utilise que opacity,
   scale et rotate (carte graphique). En « mouvement réduit » : halo fixe. Le cadre prend la taille exacte du
   logo : rien ne bouge dans la page, même si cette feuille arrive après le premier affichage. */
.ee-hero-body > picture { position: relative; display: block; width: fit-content; margin-inline: auto; }
.ee-hero-body > picture::before {
  content: ""; position: absolute; pointer-events: none;
  left: 81.3%; top: 59.7%; width: 96%; aspect-ratio: 1; translate: -50% -50%;
  background:
    radial-gradient(circle, rgba(255, 255, 250, .95) 0 1.3%, rgba(255, 244, 214, .7) 3.6%, rgba(255, 226, 150, .32) 9%,
      rgba(255, 206, 110, .12) 19%, rgba(255, 196, 90, .05) 30%, transparent 46%),
    conic-gradient(from 0deg, transparent 0.7deg, rgba(255,242,206,0.46) 4.5deg, transparent 8.3deg, transparent 37.9deg, rgba(255,242,206,0.58) 40.1deg, transparent 42.3deg, transparent 80.0deg, rgba(255,242,206,0.36) 82.2deg, transparent 84.4deg, transparent 122.4deg, rgba(255,242,206,0.46) 124.0deg, transparent 125.6deg, transparent 164.8deg, rgba(255,242,206,0.26) 168.6deg, transparent 172.4deg, transparent 195.3deg, rgba(255,242,206,0.36) 197.5deg, transparent 199.7deg, transparent 233.6deg, rgba(255,242,206,0.58) 237.4deg, transparent 241.2deg, transparent 274.1deg, rgba(255,242,206,0.46) 275.7deg, transparent 277.3deg, transparent 310.9deg, rgba(255,242,206,0.46) 312.5deg, transparent 314.1deg, transparent 337.4deg, rgba(255,242,206,0.26) 339.0deg, transparent 340.6deg);
  -webkit-mask: radial-gradient(circle, #000 0 5%, rgba(0, 0, 0, .55) 17%, rgba(0, 0, 0, .18) 32%, transparent 48%);
          mask: radial-gradient(circle, #000 0 5%, rgba(0, 0, 0, .55) 17%, rgba(0, 0, 0, .18) 32%, transparent 48%);
  mix-blend-mode: screen;
  opacity: 0; scale: .25;
  animation: eeSerreAllume 1.6s cubic-bezier(.2, .8, .2, 1) .4s forwards,
    eeSerreRespire 7s ease-in-out 2s infinite, eeSerreTourne 150s linear infinite;
}
@keyframes eeSerreAllume {
  0% { opacity: 0; scale: .25; }
  38% { opacity: 1; scale: 1.3; }
  100% { opacity: .85; scale: 1; }
}
@keyframes eeSerreRespire {
  0%, 100% { opacity: .85; scale: 1; }
  50% { opacity: .62; scale: .94; }
}
@keyframes eeSerreTourne { to { rotate: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  .ee-hero-body > picture::before { animation: none; opacity: .85; scale: 1; }
}