/* Animation de l'accueil — styles du moteur (repris des propositions du 2026-10-06). */
@property --s { syntax: '<integer>'; inherits: true; initial-value: 0; }
@property --n { syntax: '<integer>'; inherits: true; initial-value: 0; }

.motion-section { background: var(--papier); padding: 92px 0 100px; overflow: hidden; }
.motion-section.sombre { background: var(--nuit); }
.motion-section .entete-section { margin-bottom: 2.4rem; }

.motion-cadre {
  position: relative; width: 100%; max-width: 1120px; margin: 0 auto; aspect-ratio: 16 / 9;
  border-radius: 22px; overflow: hidden; isolation: isolate; background: var(--nuit);
  box-shadow: 0 50px 100px -45px rgba(20, 13, 8, .7), 0 0 0 1px rgba(34, 23, 15, .08);
}
.sombre .motion-cadre { box-shadow: 0 0 0 1px rgba(224, 176, 79, .25), 0 40px 120px -40px rgba(224, 176, 79, .35); }
.plateau {
  position: absolute; left: 0; top: 0; width: 1280px; height: 720px; overflow: hidden;
  transform: scale(var(--k, .875)); transform-origin: 0 0;
  font-family: 'Figtree', system-ui, sans-serif; color: #fff; line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}
.plateau * { box-sizing: border-box; animation-play-state: var(--jeu, running); }
.plateau .titre { font-family: 'Bricolage', 'Figtree', sans-serif; font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; }
.plateau .abs { position: absolute; }
.plateau svg { max-width: none; }

/* Bouton lecture / pause */
.motion-pause {
  position: absolute; right: 14px; bottom: 14px; z-index: 5; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; padding: 0;
  background: rgba(20, 13, 8, .55); color: #fff; border: 1px solid rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: .7; transition: opacity .2s, transform .2s;
}
.motion-pause:hover, .motion-pause:focus-visible { opacity: 1; transform: scale(1.06); }
.motion-pause svg { width: 18px; height: 18px; }
.motion-pause .lire { display: none; }
.en-pause .motion-pause { opacity: 1; }
.en-pause .motion-pause .lire { display: block; }
.en-pause .motion-pause .arret { display: none; }

/* Chapitres : le texte des trois étapes, synchronisé avec la scène */
.chapitres { list-style: none; margin: 26px auto 0; padding: 0; max-width: 1120px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.chapitres li { margin: 0; }
.chapitres button {
  all: unset; box-sizing: border-box; display: block; width: 100%; height: 100%; cursor: pointer; position: relative;
  padding: 18px 20px 18px; border-radius: 16px; border: 1px solid var(--filet); background: transparent;
  transition: background .35s, box-shadow .35s, border-color .35s;
}
.chapitres button:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; }
.chapitres .num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-weight: 800; font-size: 14px; background: rgba(224, 176, 79, .2); color: var(--cuir); margin-right: .55rem; vertical-align: 1px; transition: background .35s, color .35s; }
.chapitres h3 { display: inline; font-size: 1.15rem; margin: 0; }
.chapitres p { margin: .5rem 0 0; color: var(--gris); font-size: 15.5px; line-height: 1.5; }
.chapitres li.actif button { background: #fff; border-color: rgba(224, 176, 79, .55); box-shadow: 0 18px 40px -24px rgba(20, 13, 8, .45); }
.chapitres li.actif .num { background: var(--or); color: var(--nuit); }
.sombre .chapitres button { border-color: rgba(255, 255, 255, .12); }
.sombre .chapitres h3 { color: #fff; }
.sombre .chapitres p { color: rgba(255, 251, 244, .68); }
.sombre .chapitres li.actif button { background: rgba(255, 255, 255, .06); border-color: rgba(224, 176, 79, .6); box-shadow: none; }
.sombre .chapitres .num { color: var(--or-clair); }
.sombre .chapitres li.actif .num { color: var(--nuit); }
.motion-section .actions { justify-content: center; margin-top: 34px; }
@media (max-width: 760px) {
  .motion-cadre { border-radius: 14px; }
  .chapitres { grid-template-columns: 1fr; gap: 8px; }
  .chapitres button { padding: 12px 14px; }
  .chapitres li:not(.actif) p { display: none; }
  /* 32 px au moins : une cible au doigt (30 px relevés par l'audit du 2026-10-08, B3). */
  .motion-pause { width: 32px; height: 32px; right: 6px; bottom: 6px; }
  .motion-pause svg { width: 14px; height: 14px; }
}

/* Personnages (personnages.js) */
.perso svg { display: block; width: 100%; height: auto; overflow: visible; }
.perso .yeux { transform-box: fill-box; transform-origin: center; animation: cligne 4.6s infinite; }
.perso .bouche-o { opacity: 0; }
.perso .bouche-o ellipse { transform-box: fill-box; transform-origin: center; animation: jacasse .42s infinite; }
.perso .bras { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); }
@keyframes cligne { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes jacasse { 0% { transform: scaleY(.35); } 25% { transform: scaleY(1); } 45% { transform: scaleY(.55); } 70% { transform: scaleY(.95); } 100% { transform: scaleY(.35); } }