/* ============================================================
   SOCLE DE MOUVEMENT : la mécanique des animations, commune à toutes les pages
   Chaque page règle le caractère du mouvement par ses variables
   (--rev-duree, --rev-courbe, --rev-y, --dec-duree, --dec-pas).
   Sans JavaScript, tout reste visible : rien n'est masqué hors de .js
   ============================================================ */

/* --- RÉVÉLATIONS AU DÉFILEMENT --- */
.js [data-rev] {
  opacity: 0;
  transform: translate3d(0, var(--rev-y, 28px), 0);
  transition:
    opacity var(--rev-duree, .9s) var(--rev-courbe, cubic-bezier(.16, 1, .3, 1)) var(--d, 0ms),
    transform var(--rev-duree, .9s) var(--rev-courbe, cubic-bezier(.16, 1, .3, 1)) var(--d, 0ms);
}
.js [data-rev="fondu"] { transform: none; }
.js [data-rev="echelle"] { transform: scale(.94); }
.js [data-rev="gauche"] { transform: translate3d(-44px, 0, 0); }
.js [data-rev="droite"] { transform: translate3d(44px, 0, 0); }
.js [data-rev].vu { opacity: 1; transform: none; }

/* --- DÉCOUPE DE TEXTE : chaque mot monte derrière un masque --- */
[data-decoupe] .m {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* le masque déborde un peu, pour ne couper ni les jambages ni les italiques */
  padding: .14em .07em .2em;
  margin: -.14em -.07em -.2em;
}
[data-decoupe] .m-i { display: inline-block; }
.js [data-decoupe] .m-i {
  transform: translate3d(0, 118%, 0) rotate(var(--dec-rot, 0deg));
  transform-origin: left bottom;
  transition: transform var(--dec-duree, 1.1s) var(--rev-courbe, cubic-bezier(.16, 1, .3, 1));
  transition-delay: calc(var(--l, 0) * var(--dec-pas, 90ms) + var(--d, 0ms));
}
.js [data-decoupe].vu .m-i { transform: none; }

/* variante lettre à lettre : fondu net, sans masque */
[data-decoupe="lettres"] .m { overflow: visible; white-space: nowrap; }
.js [data-decoupe="lettres"] .m-i { transform: none; transition: none; }
[data-decoupe="lettres"] .l { display: inline-block; }
.js [data-decoupe="lettres"] .l {
  opacity: 0;
  transform: translate3d(0, .45em, 0);
  filter: blur(10px);
  transition: opacity .8s ease, transform 1s var(--rev-courbe, cubic-bezier(.16, 1, .3, 1)), filter .9s ease;
  transition-delay: calc(var(--c, 0) * var(--dec-pas, 26ms) + var(--d, 0ms));
}
.js [data-decoupe="lettres"].vu .l { opacity: 1; transform: none; filter: none; }

/* --- TEXTE QUI S'ÉCLAIRE AU DÉFILEMENT --- */
[data-eclaire] .m { display: inline; transition: opacity .25s linear; }
[data-eclaire] .m-i { display: inline; }

/* --- BOUTON AIMANTÉ --- */
[data-aimant] { translate: var(--ax, 0px) var(--ay, 0px); transition: translate .5s cubic-bezier(.2, .9, .3, 1.25); }

/* --- ACCORDÉON --- */
details[data-acc] > summary { list-style: none; cursor: pointer; }
details[data-acc] > summary::-webkit-details-marker { display: none; }
details[data-acc] .acc-corps { overflow: hidden; }

/* --- CURSEUR « SEUIL DE 30 000 € » : mécanique commune, habillage par page --- */
[data-seuil] input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; margin: 0; background: transparent; cursor: grab;
  height: var(--seuil-poignee, 28px);
}
[data-seuil] input[type="range"]:active { cursor: grabbing; }
[data-seuil] input[type="range"]:focus { outline: none; }
[data-seuil] input[type="range"]::-webkit-slider-runnable-track {
  height: var(--seuil-piste, 4px); border-radius: 99px;
  background: linear-gradient(90deg, var(--seuil-plein, currentColor) calc(var(--k, 0) * 100%), var(--seuil-vide, rgba(128, 128, 128, .3)) 0);
}
[data-seuil] input[type="range"]::-moz-range-track {
  height: var(--seuil-piste, 4px); border-radius: 99px;
  background: linear-gradient(90deg, var(--seuil-plein, currentColor) calc(var(--k, 0) * 100%), var(--seuil-vide, rgba(128, 128, 128, .3)) 0);
}
[data-seuil] input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: var(--seuil-poignee, 28px); height: var(--seuil-poignee, 28px); border-radius: 50%;
  margin-top: calc((var(--seuil-piste, 4px) - var(--seuil-poignee, 28px)) / 2);
  background: var(--seuil-bouton, #fff); border: 2px solid var(--seuil-plein, currentColor);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25); transition: transform .2s;
}
[data-seuil] input[type="range"]::-moz-range-thumb {
  width: var(--seuil-poignee, 28px); height: var(--seuil-poignee, 28px); border-radius: 50%;
  background: var(--seuil-bouton, #fff); border: 2px solid var(--seuil-plein, currentColor);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
[data-seuil] input[type="range"]:hover::-webkit-slider-thumb,
[data-seuil] input[type="range"]:focus-visible::-webkit-slider-thumb { transform: scale(1.12); }
[data-seuil] [data-pour] { transition: opacity .45s ease, transform .55s cubic-bezier(.16, 1, .3, 1); }
[data-seuil][data-etat="avant"] [data-pour="apres"],
[data-seuil][data-etat="apres"] [data-pour="avant"] { opacity: .32; transform: scale(.985); }

/* --- ONGLETS À AVANCE AUTOMATIQUE --- */
@keyframes onglet-remplir { from { transform: scaleX(0); } to { transform: scaleX(1); } }
[data-onglets] [data-onglet] { position: relative; }
[data-onglets] [data-onglet]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
}
[data-onglets][data-auto] [data-onglet].actif::after { animation: onglet-remplir var(--auto, 5s) linear forwards; }
[data-onglets].hors [data-onglet]::after { animation-play-state: paused; }
[data-onglets].manuel [data-onglet].actif::after { animation: none; transform: scaleX(1); }

/* --- LIEN D'ÉVITEMENT --- */
.evitement { position: absolute; left: -9999px; top: 0; z-index: 999; padding: 12px 18px; background: #16212B; color: #fff; }
.evitement:focus { left: 12px; top: 12px; }

/* --- MOUVEMENT RÉDUIT : tout est posé, rien ne bouge --- */
/* La classe .calme vient du choix fait par le visiteur sur le site (js/atelier.js), jamais du réglage du
   système : sous Windows, des animations coupées pour de simples raisons de performances suffisaient
   à afficher le site sans aucun effet. Ne pas remettre de @media (prefers-reduced-motion) ici. */
.calme [data-rev],
.calme [data-decoupe] .m-i,
.calme [data-decoupe] .l { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
.calme [data-aimant] { translate: none; }
.calme { scroll-behavior: auto !important; }
.calme *, .calme *::before, .calme *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }