/* Scène 16:9 de 1280 x 720, mise à l'échelle de l'écran par diaporama.js. */
:root {
  --papier: #f7f2e8; --papier-fonce: #e9e1d0; --encre: #16202e; --encre-douce: #4d5868;
  --nuit: #0f1b33; --sur-nuit: #f7f2e8; --bleu-ecran: #1f5fe0; --sur-bleu: #ffffff;
  --ambre: #f2a71b; --alerte: #c4321c;
  --font-titre: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --font-texte: "Atkinson Hyperlegible", Arial, system-ui, sans-serif;
  --entree: cubic-bezier(.2, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--nuit); color: var(--encre); font: 400 26px/1.4 var(--font-texte); overflow: hidden; }

.scene { position: fixed; left: 50%; top: 50%; width: 1280px; height: 720px; margin: -360px 0 0 -640px; overflow: hidden; background: var(--papier); cursor: pointer; transform-origin: center; }
.diapo { position: absolute; inset: 0; padding: 40px 64px 76px; display: none; flex-direction: column; gap: 14px; background: var(--papier); }
.diapo.active, .diapo.sortie { display: flex; }
.diapo.active { z-index: 2; }
.diapo.sortie { z-index: 1; }
.diapo.nuit { background: var(--nuit); color: var(--sur-nuit); }

.diapo.active.vers-avant { animation: entre-droite .55s var(--entree) both; }
.diapo.active.vers-arriere { animation: entre-gauche .55s var(--entree) both; }
.diapo.sortie.vers-avant { animation: sort-gauche .55s var(--entree) both; }
.diapo.sortie.vers-arriere { animation: sort-droite .55s var(--entree) both; }
@keyframes entre-droite { from { transform: translateX(7%); opacity: 0; } }
@keyframes entre-gauche { from { transform: translateX(-7%); opacity: 0; } }
@keyframes sort-gauche { to { transform: translateX(-7%); opacity: 0; } }
@keyframes sort-droite { to { transform: translateX(7%); opacity: 0; } }

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
.partie { font-size: 19px; font-weight: 700; color: var(--bleu-ecran); }
.nuit .partie { color: var(--ambre); }
h2 { font: 800 50px/1.08 var(--font-titre); letter-spacing: -.01em; text-wrap: balance; }
.chapo { max-width: 42em; }

/* Ce qui entre à l'arrivée sur la diapo */
.active .partie, .active h2, .active .chapo { animation: monte .6s var(--entree) both; animation-delay: .1s; }
.active h2 { animation-delay: .18s; }
.active .chapo { animation-delay: .3s; }
@keyframes monte { from { transform: translateY(18px); opacity: 0; } }

/* Ce qui entre au clic */
.f { opacity: 0; transform: translateY(18px); transition: opacity .45s var(--entree), transform .45s var(--entree); }
.f.vu { opacity: 1; transform: none; }

/* Schémas : chaque case arrive à son tour */
figure { flex: 1; min-height: 0; }
figure svg { width: 100% !important; height: 100% !important; font-size: inherit; }
.active .pas { animation: pas .5s var(--entree) both; animation-delay: calc(var(--i, 0) * 170ms + .35s); }
.active .fleche { animation-name: fleche; animation-duration: .3s; }
.active .rayon { animation-name: rayon; animation-duration: .8s; }
@keyframes pas { from { opacity: 0; transform: translateY(12px); } }
@keyframes fleche { from { opacity: 0; transform: translateX(-10px); } }
@keyframes rayon { from { opacity: 0; transform: translateX(-60px); } }

/* Titre : les pixels de l'écran s'éteignent, la lune monte */
.titre { justify-content: flex-end; gap: 12px; padding-bottom: 96px; }
.titre h1 { font: 800 112px/.95 var(--font-titre); letter-spacing: -.015em; }
.titre .slogan { font: 700 40px/1.15 var(--font-titre); color: var(--ambre); }
.titre .noms { font-size: 24px; }
.pixels { position: absolute; left: 64px; top: 44px; width: 720px; }
.pixels rect { fill: var(--bleu-ecran); rx: 4px; }
.lune { position: absolute; right: 96px; top: 56px; width: 200px; height: 200px; border-radius: 50%; background: var(--ambre); }
.active .pixels rect { animation: pixel .5s linear both; animation-delay: calc(var(--i) * 40ms + .9s); }
@keyframes pixel { from { fill: var(--sur-nuit); opacity: 1; } 40% { fill: var(--bleu-ecran); opacity: 1; } to { fill: var(--bleu-ecran); opacity: var(--fin, 1); } }
.active .lune { animation: lune 1.6s var(--entree) both; animation-delay: 1.4s; }
@keyframes lune { from { transform: translateY(300px); opacity: 0; } }
.active.titre h1 { animation: monte .8s var(--entree) both .15s; }
.active.titre .slogan { animation: monte .7s var(--entree) both .6s; }
.active.titre .noms { animation: monte .7s var(--entree) both .9s; }

/* Question */
.question { justify-content: center; }
.question h2 { font-size: 66px; line-height: 1.08; max-width: 19em; }

/* Listes */
.habitudes { list-style: none; display: grid; gap: 12px; margin-top: 8px; }
.habitudes li { background: var(--papier-fonce); border-radius: 10px; padding: 18px 24px; font-size: 30px; }
.nuance { font-size: 24px; color: var(--encre-douce); }
.mots { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px; }
.mots div { background: var(--papier-fonce); border-radius: 10px; padding: 20px 24px; }
.mots dt { font: 700 30px/1.15 var(--font-titre); margin-bottom: 6px; }
.mots dd { font-size: 24px; line-height: 1.3; }

table { border-collapse: collapse; width: 100%; font-size: 25px; line-height: 1.25; }
th, td { text-align: left; padding: 12px 18px 12px 0; border-bottom: 1px solid var(--papier-fonce); }
th { border-bottom: 3px solid var(--encre); font-size: 20px; }
td:first-child { font-weight: 700; width: 48%; }
tr.f { transform: none; }
.remarque { font-weight: 700; font-size: 25px; color: var(--alerte); }

.conseils { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; flex: 1; min-height: 0; margin-top: 10px; }
.conseils li { background: var(--papier-fonce); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.conseils li:first-child { background: var(--nuit); color: var(--sur-nuit); }
.conseils h3 { font: 700 40px/1.08 var(--font-titre); }
.conseils p { font-size: 30px; line-height: 1.32; }

.conclusion p { font-size: 33px; line-height: 1.32; max-width: 33em; }
.conclusion strong { color: var(--ambre); }
.conclusion { justify-content: center; gap: 22px; }

.sources { list-style: none; display: grid; gap: 14px; font-size: 24px; line-height: 1.3; max-width: 48em; margin-top: 10px; }

/* Fin : l'écran s'éteint comme un vieux téléviseur */
.fin { justify-content: flex-end; padding-bottom: 96px; gap: 12px; }
.fin .ligne { font: 800 96px/.98 var(--font-titre); letter-spacing: -.015em; }
.fin .ambre { color: var(--ambre); }
.fin .merci { font-size: 26px; margin-top: 10px; }
.fin .lune { top: 60px; }
.crt { display: none; position: absolute; inset: 0; z-index: 3; background: var(--bleu-ecran); color: var(--sur-bleu); padding: 0 64px 96px; flex-direction: column; justify-content: flex-end; }
.crt span { font: 800 96px/.98 var(--font-titre); letter-spacing: -.015em; }
.active .crt { display: flex; animation: crt 1.5s ease-in both .7s; }
@keyframes crt {
  0% { transform: none; filter: brightness(1); }
  45% { transform: scale(1, .006); filter: brightness(2.4); }
  80% { transform: scale(0, .006); filter: brightness(3); opacity: 1; }
  100% { transform: scale(0, 0); opacity: 0; }
}
.active.fin .ligne { animation: monte .7s var(--entree) both 2.1s; }
.active.fin .ligne.ambre { animation-delay: 2.5s; }
.active.fin .merci { animation: monte .7s var(--entree) both 3s; }
.active.fin .lune { animation: lune 1.8s var(--entree) both 2.2s; }
.fin a { color: inherit; text-underline-offset: 4px; position: relative; }

/* Commandes */
.progres { position: fixed; left: 0; right: 0; bottom: 0; height: 5px; z-index: 6; background: transparent; }
.progres i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: var(--ambre); transition: transform .4s var(--entree); }
.barre { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 10px; background: var(--nuit); color: var(--sur-nuit); font-size: 15px; line-height: 1; white-space: nowrap; box-shadow: 0 0 0 1px rgba(247, 242, 232, .25); transition: opacity .3s; }
.barre button, .barre a { appearance: none; border: 0; background: none; color: inherit; font: inherit; padding: 9px 12px; border-radius: 6px; cursor: pointer; text-decoration: none; }
.barre button:hover, .barre a:hover { background: rgba(247, 242, 232, .16); }
.barre button:disabled { opacity: .4; cursor: default; background: none; }
.barre button:focus-visible, .barre a:focus-visible, .fin a:focus-visible { outline: 3px solid var(--ambre); outline-offset: 1px; }
.compteur { min-width: 58px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }
body.calme .barre { opacity: 0; }
body.calme .barre:focus-within { opacity: 1; }
body.calme { cursor: none; }
body.calme .scene { cursor: none; }
.tourne { display: none; position: fixed; left: 16px; right: 16px; top: 16px; z-index: 5; text-align: center; font-size: 16px; color: var(--sur-nuit); }
@media (orientation: portrait) and (max-width: 700px) { .tourne { display: block; } }

/* Sans animation : tout est simplement là */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .diapo.sortie { display: none; }
  .active .crt { display: none; }
}