/* =====================================================================
   EFFETS : mouvement et mise en scène.
   Désactivés si l'utilisateur demande moins d'animations ; sans
   JavaScript, tout reste lisible (la démo s'affiche en pile).
   ===================================================================== */

/* Barre de progression de lecture et ombre de l'en-tête */
.progression { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; background: linear-gradient(90deg, var(--bleu), var(--accent)); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
.entete { transition: box-shadow .3s ease; }
.entete--ombre { box-shadow: 0 6px 24px rgba(31,68,102,.12); }

/* Premier écran : halos qui dérivent, titre qui se lève mot à mot */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero::before, .hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); opacity: .55; pointer-events: none; }
.hero::before { width: 520px; height: 520px; right: -140px; top: -160px; background: radial-gradient(circle, #9EC3E6 0%, rgba(158,195,230,0) 70%); animation: derive-a 16s ease-in-out infinite alternate; }
.hero::after { width: 460px; height: 460px; left: -160px; bottom: -200px; background: radial-gradient(circle, #F2B8A2 0%, rgba(242,184,162,0) 70%); animation: derive-b 19s ease-in-out infinite alternate; }
@keyframes derive-a { to { transform: translate(-90px, 70px) scale(1.15); } }
@keyframes derive-b { to { transform: translate(110px, -60px) scale(1.2); } }
.hero__titre { font-size: clamp(2.2rem, 6.2vw, 4.2rem); line-height: 1.05; letter-spacing: -.02em; }
.mot { display: inline-block; animation: mot-monte .8s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--m) * 70ms + 100ms); }
@keyframes mot-monte { from { opacity: 0; transform: translateY(.6em); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* Apparition au défilement */
.js-anim .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 90ms); }
.js-anim .reveal.vu { opacity: 1; transform: none; }

/* Cartes : relief et halo qui suit le curseur */
.difference, .carte, .fiche { position: relative; overflow: hidden; transition: transform .35s ease, box-shadow .35s ease; }
.difference::after, .carte::after, .fiche::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(46,95,138,.14), transparent 70%); }
.difference:hover, .carte:hover, .fiche:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(31,68,102,.16); }
.difference:hover::after, .carte:hover::after, .fiche:hover::after { opacity: 1; }
.bouton { transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease; }
.bouton:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(181,80,47,.35); }

/* Démo : de la dictée au compte rendu (scène sombre) */
.demo { background: var(--fond); }
.demo__piste { background: radial-gradient(1200px 600px at 80% 0%, #24507a 0%, #0F2740 60%); color: #EAF3FA; padding-block: 48px; }
.demo__grille { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); align-items: center; }
.demo h2 { color: #fff; font-size: clamp(1.7rem, 4.5vw, 2.8rem); line-height: 1.1; margin: 0 0 20px; }
.demo__etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.demo__etape { display: flex; gap: 14px; align-items: flex-start; transition: opacity .4s ease; }
.demo__etape h3 { color: #fff; margin: 0 0 4px; font-size: 1.2rem; }
.demo__etape p { margin: 0; color: #C9DCEC; }
.demo__num { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; display: grid; place-items: center; transition: transform .4s ease, box-shadow .4s ease; }
.demo__fenetre { margin: 0; background: #fff; color: var(--texte); border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.45); overflow: hidden; }
.demo__fenetre .ecran__barre { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--bloc); border-bottom: 1px solid var(--bord); }
.demo__titre-fenetre { margin-left: auto; font-size: .85rem; color: var(--texte-doux); }
.demo__corps { padding: 18px; display: grid; gap: 22px; }
.demo__etiquette { margin: 0 0 8px; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.demo__dictee { margin: 0; font-size: 1.05rem; line-height: 1.6; }
.demo__table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.demo__table th, .demo__table td { border: 1px solid var(--bord); padding: 8px 10px; text-align: left; }
.demo__table th { background: var(--bloc); }
.demo__page { border: 1px solid var(--bord); border-radius: 8px; padding: 14px 16px; font-size: .92rem; }
.demo__page p, .demo__page ul { margin: 4px 0; }
.demo__legende { padding: 8px 14px 12px; font-size: .85rem; color: var(--texte-doux); border-top: 1px solid var(--bord); }
.demo > .conteneur { padding-block: 40px; }

/* Épinglée (ordinateur, mouvement autorisé) : la scène reste, le contenu change au défilement */
.demo--epingle .demo__piste { height: 320vh; padding: 0; }
.demo--epingle .demo__scene { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; }
.demo--epingle .demo__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; width: 100%; }
.demo--epingle .demo__etape { opacity: .35; }
.demo--epingle .demo__etape.actif { opacity: 1; }
.demo--epingle .demo__etape.actif .demo__num { transform: scale(1.18); box-shadow: 0 0 0 6px rgba(181,80,47,.3); }
.demo--epingle .demo__corps { position: relative; min-height: 340px; display: block; }
.demo--epingle .demo__panneau { position: absolute; inset: 18px; opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.demo--epingle .demo__panneau.actif { opacity: 1; transform: none; }
.mot-dicte { transition: color .25s ease, background-color .25s ease; }
.demo--epingle .mot-dicte { color: #B7C6D4; }
.demo--epingle .mot-dicte.allume { color: var(--texte); background: rgba(181,80,47,.14); border-radius: 3px; }
.demo--epingle .demo__table tbody tr { opacity: 0; transform: translateX(-14px); transition: opacity .45s ease, transform .45s ease; }
.demo--epingle .demo__table tbody tr.allume { opacity: 1; transform: none; }

/* Sélecteur de trames : une même donnée, deux façons d'écrire */
.bascule__choix { display: none; }
.js-bascule .bascule__choix { display: inline-flex; gap: 4px; padding: 5px; background: #fff; border: 1px solid var(--bord); border-radius: 999px; margin-bottom: 18px; }
.bascule__bouton { border: 0; background: transparent; padding: 10px 18px; border-radius: 999px; font: inherit; font-weight: 600; color: var(--bleu-fonce); cursor: pointer; transition: background-color .3s ease, color .3s ease; }
.bascule__bouton[aria-pressed="true"] { background: var(--bleu); color: #fff; }
.js-bascule .bascule .trames { display: grid; grid-template-columns: minmax(0, 560px); justify-content: center; }
.js-bascule .bascule .trames .doc { grid-area: 1 / 1; transition: opacity .5s ease, transform .5s ease; }
.js-bascule .bascule .trames .doc:not(.actif) { opacity: 0; transform: translateY(14px) scale(.98); visibility: hidden; }
.js-bascule .bascule .trames__legende { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after, .mot { animation: none; }
  .difference, .carte, .fiche, .bouton, .demo__panneau { transition: none; }
}