/* Page d'accueil Arcademia (lot B) : la scène (console, cartouche, manettes) est dessinée par accueil-console.js
   et remplit tout l'écran. Couleurs : variables d'arcadia.css. */
body.page-accueil { margin: 0; overflow: hidden; background: var(--fond); }
.ac-scene { position: fixed; inset: 0; }
.ac-svg { display: block; width: 100%; height: 100%; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.page-accueil .bouton-theme.coin { position: fixed; top: 16px; right: 16px; z-index: 2; background: var(--fond); }
.ac-secours { display: flex; gap: 24px; justify-content: center; padding: 40vh 16px 0; font: 700 1.2rem var(--police-texte); }
.ac-secours a { color: var(--encre); }

/* Manettes : liens ; au survol (ou au clavier), la manette grossit, les autres voies s'estompent,
   le voyant de la console s'allume et le dragon crache du feu une seule fois. */
.ac-voie { cursor: pointer; outline: none; transition: opacity .12s; }
.ac-manette { transition: transform .12s; }
.ac-voie:hover .ac-manette, .ac-voie:focus-visible .ac-manette { transform: scale(1.05); }
.ac-svg:has(.ac-voie:is(:hover, :focus-visible)) .ac-voie:not(:hover, :focus-visible) { opacity: .4; }
.ac-voie:focus-visible text { text-decoration: underline; text-decoration-thickness: 3px; }
.ac-voie:active .ac-manette { transform: scale(1.02) translate(4px, 4px); }
.ac-led { fill: color-mix(in srgb, var(--rouge) 50%, var(--nuit)); }
.ac-anneau { opacity: 0; }
.ac-svg:has(.ac-voie:is(:hover, :focus-visible)) .ac-led { fill: var(--rouge); }
.ac-svg:has(.ac-voie:is(:hover, :focus-visible)) .ac-anneau { opacity: 1; }

/* Dragon de la cartouche : respiration en boucle ; au survol, attaque (une fois) puis retour au calme */
.ac-attente { animation: ac-attente 2.4s steps(16) infinite; }
.ac-v-attaque, .ac-feu { opacity: 0; }
.ac-svg:has(.ac-voie:is(:hover, :focus-visible)) .ac-v-attaque { animation: ac-seq-attaque 2.5s steps(1) 1 forwards; }
.ac-svg:has(.ac-voie:is(:hover, :focus-visible)) .ac-attaque { animation: ac-attaque 2.5s steps(11) 1 forwards; }
.ac-svg:has(.ac-voie:is(:hover, :focus-visible)) .ac-v-attente { animation: ac-seq-attente 2.5s steps(1) 1 forwards; }
.ac-svg:has(.ac-voie:is(:hover, :focus-visible)) .ac-feu { animation: ac-souffle 1.15s steps(12) .9s 1 forwards; }
.ac-tiers { animation: ac-tiers .48s steps(1, end) infinite; opacity: 0; }
@keyframes ac-attente { to { transform: translateX(-1536px); } }
@keyframes ac-attaque { to { transform: translateX(-1056px); } }
@keyframes ac-seq-attaque { 0% { opacity: 1; } 99.9% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ac-seq-attente { 0% { opacity: 0; } 99.9% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ac-souffle { 0% { opacity: 0; transform: scaleX(.15); } 12% { opacity: 1; transform: scaleX(.5); } 45% { opacity: 1; transform: scaleX(1); } 80% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(.9); } }
@keyframes ac-tiers { 0% { opacity: 1; } 16.6% { opacity: 0; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ac-attente, .ac-feu, .ac-tiers, .ac-v-attaque, .ac-attaque, .ac-v-attente { animation: none !important; }
  .ac-v-attaque, .ac-feu { display: none; }
  .ac-voie, .ac-manette { transition: none; }
}

/* Lien discret vers les mentions légales et la confidentialité */
.ac-legal { position: fixed; right: 12px; bottom: 8px; z-index: 5; font-size: 0.72rem; color: var(--discret, inherit); opacity: 0.8; text-decoration: underline; }