/* ============================================================
   BASE — réglages globaux. Aucune décoration ici.
   ============================================================ */

*,*::before,*::after{ box-sizing:border-box }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--entete-h) + var(--e-4));
  background:var(--bg);
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-texte);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:var(--fw-normal);
  text-wrap:pretty;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;   /* garde-fou : aucun débordement horizontal */
}

h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd,fieldset{ margin:0 }
ul,ol{ padding:0; list-style:none }
fieldset{ padding:0; border:0 }

h1,h2,h3,h4{
  font-family:var(--font-titre);
  font-weight:var(--fw-gras);
  line-height:var(--lh-titre);
  letter-spacing:var(--ls-titre);
  text-wrap:balance;   /* pas de mot seul en fin de titre */
}
h1{ font-size:var(--fs-h1) }
h2{ font-size:var(--fs-h2) }
h3{ font-size:var(--fs-h3) }

img,svg,video,canvas{ display:block; max-width:100% }

button,input,select,textarea{ font:inherit; color:inherit; margin:0 }
button{ background:none; border:0; padding:0; cursor:pointer; color:inherit }

a{
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  text-decoration-color:var(--rule-fort);
}
a:hover{ text-decoration-color:currentColor }

/* Focus clavier : une seule expression dans tout le site. */
:focus-visible{
  outline:var(--trait-fort) solid var(--focus);
  outline-offset:3px;
  border-radius:var(--r-1);
}
:focus:not(:focus-visible){ outline:none }

::selection{ background:var(--ink); color:var(--bg) }

/* Chiffres alignés : places, horaires, durées, montants. */
.nums{ font-variant-numeric:tabular-nums }

/* Réservé aux lecteurs d'écran */
.sr{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0;
}

/* Lien d'évitement */
.skip{
  position:absolute; left:var(--e-4); top:var(--e-2);
  z-index:100;
  padding:var(--e-2) var(--e-4);
  min-block-size:var(--tap-min);
  display:inline-flex; align-items:center;
  background:var(--ink); color:var(--bg);
  text-decoration:none; border-radius:var(--r-2);
  font-family:var(--font-mono); font-size:var(--fs-micro);
  transform:translateY(-200%);
  transition:transform var(--t-etat) var(--courbe);
}
.skip:focus{ transform:none }

/* ------------------------------------------------------------
   APPARITION
   L'état de repos est opacity:1. On ne retire qu'un léger
   décalage. Sans JavaScript, rien ne bouge et tout est lisible.
   ------------------------------------------------------------ */
.js .apparait{
  transform:translateY(var(--glisse));
  transition:transform var(--t-entree) var(--courbe);
  transition-delay:var(--d, 0ms);
}
.js .apparait.est-la{ transform:none }

/* ------------------------------------------------------------
   ÉTATS — les trois seules couleurs du site.
   Aucune section ne lit --etat-* : le seul point d'entrée
   est cette classe. La règle devient impossible à violer
   par accident.
   ------------------------------------------------------------ */
.etat{
  display:inline-flex; align-items:center; gap:var(--e-2);
  padding:var(--e-1) var(--e-3);
  border-radius:var(--r-rond);
  font-family:var(--font-mono);
  font-size:var(--fs-nano);
  font-weight:var(--fw-moyen);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  white-space:nowrap;
  border:var(--trait) solid currentColor;
}
/* Le signe de la marque sert d'indicateur d'état. */
.etat__signe{ inline-size:10px; block-size:10px; flex:none }
.etat__signe rect{ fill:currentColor }
.etat__signe path{ stroke:currentColor }

.etat--verifie    { color:var(--etat-verifie);     background:var(--etat-verifie-fond) }
.etat--hypothese  { color:var(--etat-hypothese);   background:var(--etat-hypothese-fond) }
.etat--non-verifie{ color:var(--etat-non-verifie); background:var(--etat-non-verifie-fond) }

/* ------------------------------------------------------------
   MISE EN PAGE
   ------------------------------------------------------------ */
.contenant{
  width:100%;
  max-width:var(--contenant);
  margin-inline:auto;
  padding-inline:var(--marge-page);
}
@media (min-width:720px){ :root{ --marge-page:40px } }
@media (min-width:1200px){ :root{ --marge-page:64px } }

.mono{ font-family:var(--font-mono) }
.surtitre{
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  color:var(--ink-3);
}
.micro{ font-size:var(--fs-micro); color:var(--ink-3) }
.mesure{ max-width:var(--mesure) }

/* ------------------------------------------------------------
   BOUTONS
   Le survol ne change ni la taille ni la position dans le flux.
   ------------------------------------------------------------ */
.bouton{
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--e-2);
  min-block-size:var(--tap-min);
  padding-inline:var(--e-6);
  border-radius:var(--r-2);
  font-family:var(--font-titre);
  font-size:var(--fs-small);
  font-weight:var(--fw-gras);
  text-decoration:none;
  border:var(--trait) solid var(--ink);
  transition:transform var(--t-reaction) var(--courbe),
             opacity var(--t-reaction) var(--courbe);
}
.bouton--plein{ background:var(--ink); color:var(--bg) }
.bouton--vide{ background:transparent; color:var(--ink) }
.bouton:hover{ opacity:.82 }
.bouton:active{ transform:translateY(1px) }
.bouton:disabled{ opacity:.4; cursor:not-allowed }

/* ------------------------------------------------------------
   DÉFILEMENT LIÉ À LA POSITION
   Là où le navigateur le sait faire, l'apparition n'est plus
   déclenchée une fois pour toutes : elle est PILOTÉE par la
   position de la section dans l'écran.

   Conséquences, toutes voulues par le brief :
   · réversible par construction — on remonte, ça se rejoue
     à l'envers, depuis la position courante ;
   · interruptible — il n'y a pas de lecture en cours à finir,
     seulement une position à lire ;
   · exécutée hors du fil principal par le compositeur, donc
     soixante images par seconde même sur un téléphone ;
   · toujours transform seul, jamais depuis une opacité nulle.

   Sans cette prise en charge, la page garde le comportement
   précédent : une classe posée à l'entrée dans l'écran.
   ------------------------------------------------------------ */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){

    .js .apparait{
      /* On rend la main à l'animation : plus de transition. */
      transition:none;
      animation:monter linear both;
      animation-timeline:view();
      /* La montée se joue sur le premier tiers de l'entrée, puis
         le texte reste net pendant tout le reste de sa traversée. */
      animation-range:entry 5% entry 40%;
    }

    /* Les en-têtes de section vont chercher un peu plus loin :
       c'est là que se lit « une idée par écran ». */
    .js .section__tete .apparait,
    .js .section__titre.apparait,
    .js .accroche__titre.apparait{
      --glisse:var(--glisse-section);
    }
  }
}

@keyframes monter{
  from{ transform:translateY(var(--glisse)) }
  to  { transform:none }
}