/* Mouvement : survols, états initiaux des révélations, mouvement réduit, mode ?static=1.
   RÈGLE : tout est visible sans JavaScript, en ?static=1 et en mouvement réduit.
   Les états cachés des révélations n'existent que sous `html.anim` (classe posée par motion.js quand il démarre),
   donc tant que motion.js n'existe pas, rien n'est masqué. Voir ARCHITECTURE.md §10 et §16. */

/* ---------- survols : pointeur fin seulement ---------- */
@media (hover: hover) and (pointer: fine) {
  .bouton::after { transition: height var(--d-lien) var(--ease-out); }
  .bouton .ico--fleche { transition: transform var(--d-lien) var(--ease-out); }
  .bouton:hover::after { height: 2px; }
  .bouton:hover .ico--fleche { transform: translateX(6px); }
  .bouton--plein:hover { background: #000; }
  .lien-secondaire, .lien, p a { transition: text-decoration-thickness var(--d-lien) var(--ease-out); }
  .lien-secondaire:hover, p a:hover { text-decoration-thickness: 2px; }
  .lien-secondaire .ico { transition: transform var(--d-lien) var(--ease-out); }
  .lien-secondaire:hover .ico--bas { transform: translate(2px, 2px); }
  .lien-secondaire:hover .ico--fleche { transform: translateX(6px); }
  .entete__liens a:hover { text-decoration-color: var(--encre); }
  .entete__liens a { transition: text-decoration-color var(--d-lien) var(--ease-out); }

  .acces-rapide a { transition: padding var(--d-lien) var(--ease-out); }
  .acces-rapide a:hover { padding-left: 6px; }
  .acces-rapide a .ico { transition: transform var(--d-lien) var(--ease-out); }
  .acces-rapide a:hover .ico { transform: translate(3px, 3px); }

  .rangee { margin-inline: -16px; padding-inline: 16px; transition: background-color var(--d-survol-tirage) var(--ease-out); }
  .rangee::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--encre); transform: scaleX(0); transform-origin: left center; transition: transform var(--d-survol-tirage) var(--ease-out); }
  .rangee__phrase, .rangee__offre { transition: transform var(--d-survol-tirage) var(--ease-out); }
  .rangee__fleche { transition: transform var(--d-survol-tirage) var(--ease-out); }
  .rangee:hover, .rangee:focus-visible { background-color: var(--papier-2); }
  .rangee:hover::before, .rangee:focus-visible::before { transform: scaleX(1); }
  .rangee:hover .rangee__phrase, .rangee:hover .rangee__offre, .rangee:focus-visible .rangee__phrase, .rangee:focus-visible .rangee__offre { transform: translateX(12px); }
  .rangee:hover .rangee__fleche { transform: translate(3px, 3px); }

  .tirage { transition: transform var(--d-survol-tirage) var(--ease-out); }
  .tirage__cadre { transition: box-shadow var(--d-survol-tirage) var(--ease-out); }
  .tirage__cadre img { transition: transform 900ms var(--ease-out); }
  .tirage:hover { transform: rotate(0deg) scale(1.012); }
  .tirage:hover .tirage__cadre { box-shadow: var(--ombre-tirage-haut), 0 0 0 1px var(--bord-tirage); }
  .tirage:hover .tirage__cadre img { transform: scale(1.03); }
  .lettre__q { transition: background-color var(--d-lien) var(--ease-out); }
  .lettre__q[aria-selected="false"]:hover { background: var(--papier-2); }
  .barre-bas__lien:hover { background: rgba(242, 238, 230, .08); }
}

/* ---------- états initiaux des révélations ----------
   html.anim est posée par boot.js (ni ?static=1, ni mouvement réduit) et retirée par motion.js s'il ne peut pas démarrer :
   tant qu'elle n'est pas là, RIEN n'est caché. Un élément révélé reçoit .vu (le CSS le montre ; GSAP efface ses styles en ligne).
   Les décalages et rotations sont posés par GSAP en ligne : le CSS ne fixe que « invisible » et l'état de départ des masques. */
html.anim:not(.static):not(.reduit) [data-reveal="fondu"]:not(.vu),
html.anim:not(.static):not(.reduit) [data-reveal="rangee"]:not(.vu),
html.anim:not(.static):not(.reduit) [data-reveal="etape"]:not(.vu),
html.anim:not(.static):not(.reduit) [data-reveal="tirage"]:not(.vu),
html.anim:not(.static):not(.reduit) [data-reveal="titre"]:not(.vu) { opacity: 0; }

/* accroche : chaque ligne est un masque (le texte monte depuis sous la ligne) */
html.anim:not(.static):not(.reduit) [data-reveal="masque"] .accroche__txt { display: inline-block; }
html.anim:not(.static):not(.reduit) [data-reveal="masque"]:not(.vu) { padding-bottom: .16em; margin-bottom: -.16em; clip-path: inset(-1em -1em 0 -1em); }
html.anim:not(.static):not(.reduit) [data-reveal="masque"]:not(.vu) .accroche__txt { visibility: hidden; }   /* le décalage est posé par GSAP (yPercent), jamais ici : sinon il s'ajoute */

/* titres : un masque par mot, regroupés par ligne (motion.js ; le HTML d'origine est remis à la fin) */
html.anim:not(.static):not(.reduit) .mot { display: inline-block; padding-bottom: .16em; margin-bottom: -.16em; clip-path: inset(-.5em -.4em 0 -.4em); }
html.anim:not(.static):not(.reduit) .mot__in { display: block; visibility: hidden; }

/* ---------- la main d'Adrien : écriture, gestes, signature ---------- */
.annotation { filter: url(#crayon); }
.hw { display: inline-block; white-space: nowrap; }
.hc { display: inline-block; }
.hc.acu { position: relative; }
.hc.acu::after { content: "\00B4"; position: absolute; left: .13em; top: -.17em; font-size: 1.38em; line-height: 1; }
.geste-cible > .geste { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
.geste--fleche svg { left: 0; top: 0; width: 100%; height: 100%; }
html.anim:not(.static):not(.reduit) .geste-cible:not(.joue) > .geste,
html.anim:not(.static):not(.reduit) .geste--fleche:not(.joue),
html.anim:not(.static):not(.reduit) svg.signature:not(.ecrite) { visibility: hidden; }
html.anim:not(.static):not(.reduit) .annotation:not(.ecrit) .hw { clip-path: inset(-70% 102% -70% -4%); }

/* ---------- schéma de l'Exemple 05 : se dessine à l'arrivée (motion.js ajoute .dessine) ---------- */
html.anim:not(.static):not(.reduit) .schema-fig:not(.dessine) [data-trace] { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.anim:not(.static):not(.reduit) .schema-fig:not(.dessine) .schema__case--plein { fill-opacity: 0; }
html.anim:not(.static):not(.reduit) .schema-fig:not(.dessine) .schema__txt,
html.anim:not(.static):not(.reduit) .schema-fig:not(.dessine) .schema__num { opacity: 0; }

/* ---------- filets tracés au défilement (scrub) : étapes de la méthode, frise du parcours ---------- */
html.anim:not(.static):not(.reduit) .etapes { border-color: transparent; }
.etapes__filet { position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--encre); transform-origin: 0 50%; pointer-events: none; }
html.anim:not(.static):not(.reduit) .etape::before { transition: transform 420ms var(--ease-out); }
html.anim:not(.static):not(.reduit) .etape:not(.vu)::before { transform: scale(0); }
html.anim:not(.static):not(.reduit) .frise { position: relative; }
.frise__filet { position: absolute; left: 9rem; top: 0; bottom: 0; width: 1px; background: var(--encre); transform-origin: 50% 0; pointer-events: none; }
html.anim:not(.static):not(.reduit) .frise__texte::before { transition: transform 360ms var(--ease-out); }
html.anim:not(.static):not(.reduit) .frise__ligne:not(.pointe) .frise__texte::before { transform: scale(0); }
@media (max-width: 767px) {
  .etapes__filet { left: -1px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; transform-origin: 50% 0; }
  .frise__filet { display: none; }
}

/* ---------- lettre : se pose, puis la réponse apparaît (et chaque changement de question, très doucement) ---------- */
html.anim:not(.static):not(.reduit) .lettre:not(.pose) .lettre__r { opacity: 0; }
html.anim:not(.static):not(.reduit) .lettre.pose .lettre__r[data-actif="true"] { animation: reponse-entre 420ms var(--ease-out) both; }
@keyframes reponse-entre { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- mouvement réduit : pas de scrub, pas de parallaxe ; rien ne bouge, gestes et signature affichés complets ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms; animation-iteration-count: 1; transition-duration: .001ms; scroll-behavior: auto; }
  .entete, .barre-bas, .menu-panneau { transition-duration: 150ms; }
}
html.reduit [data-reveal] { opacity: 1; }

/* ---------- ?static=1 : aucune animation, tout affiché (captures) ; les tirages gardent leur rotation ---------- */
html.static *, html.static *::before, html.static *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.static .barre-bas { display: none; }
html.static [data-reveal] { opacity: 1; }
html.static .entete { height: var(--entete-h); }

/* ---------- ?demo=1 : curseur masqué, barre du bas et rail masqués ---------- */
html.demo, html.demo * { cursor: none; }
html.demo .barre-bas { display: none; }