/* =========================================================================
   L'EN-TÊTE ESCAMOTABLE
   -------------------------------------------------------------------------
   Le site est un récit : il n'a pas de barre de navigation permanente. Un
   seul bouton, en haut à droite, ouvre un panneau qui donne accès à tout.
   Fermé, il ne coûte que 48 px de coin ; ouvert, il prend la main au clavier
   comme à la souris.
   ========================================================================= */

.t-nav-bouton {
  position: fixed;
  top: clamp(14px, 2.2vw, 26px);
  right: clamp(14px, 2.2vw, 26px);
  z-index: 60;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 0;
  background: var(--sc-surface);
  border: 1px solid var(--t-line);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(38, 38, 38, 0.06);
  transition: background-color 200ms var(--t-ease), border-color 200ms var(--t-ease),
              transform 200ms var(--t-ease), box-shadow 200ms var(--t-ease);
}
.t-nav-bouton:hover {
  border-color: var(--sc-ink);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(38, 38, 38, 0.10);
}
.t-nav-bouton:focus-visible { outline: 3px solid var(--sc-ink); outline-offset: 3px; }

/* Deux barres seulement : le tréma est déjà le motif de la marque, une
   troisième barre ferait un hamburger générique. */
.t-nav-bouton i {
  display: block;
  width: 18px; height: 2px;
  background: var(--sc-ink);
  border-radius: 2px;
  transition: transform 260ms var(--t-ease), background-color 200ms var(--t-ease);
}
/* nth-of-type et non first-child : le premier enfant du bouton est le
   libellé pour lecteurs d'écran, pas une barre. Avec :first-child, la barre
   jaune n'était jamais jaune et ne tournait pas — la croix de fermeture
   sortait en flèche. */
.t-nav-bouton i:nth-of-type(1) { background: var(--sc-accent); }

/* Ouvert, les deux barres deviennent la croix de fermeture. */
[data-nav-ouvert] .t-nav-bouton i:nth-of-type(1) { transform: translateY(3.5px) rotate(45deg); }
[data-nav-ouvert] .t-nav-bouton i:nth-of-type(2) { transform: translateY(-3.5px) rotate(-45deg); }
[data-nav-ouvert] .t-nav-bouton { background: var(--sc-surface); border-color: var(--sc-ink); }

/* --- Le panneau -------------------------------------------------------- */
.t-nav-panneau {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 55;
  width: min(420px, 88vw);
  padding: clamp(88px, 12vh, 128px) clamp(24px, 4vw, 48px) clamp(28px, 4vh, 48px);
  background: var(--sc-canvas);
  border-left: 1px solid var(--t-line);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(101%);
  visibility: hidden;
  transition: transform 380ms var(--t-ease), visibility 380ms;
}
[data-nav-ouvert] .t-nav-panneau { transform: translateX(0); visibility: visible; }

.t-nav-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.t-nav-liste li { border-bottom: 1px solid var(--t-line); }
.t-nav-liste li:first-child { border-top: 1px solid var(--t-line); }

.t-nav-liste a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 12px 0;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--sc-ink);
  text-decoration: none;
  transition: color 180ms var(--t-ease), padding-left 220ms var(--t-ease);
}
.t-nav-liste a:hover { color: var(--t-accent-ink); padding-left: 10px; }
.t-nav-liste a { transition: color 180ms var(--t-ease), padding-left 220ms var(--t-ease); }
.t-nav-liste a:focus-visible { outline: 3px solid var(--sc-ink); outline-offset: 3px; }

/* La page courante porte les deux points du tréma, pas une couleur : c'est
   le même marqueur que partout ailleurs sur le site. */
.t-nav-liste a[aria-current="page"] { position: relative; padding-left: 26px; }
.t-nav-liste a[aria-current="page"]::before,
.t-nav-liste a[aria-current="page"]::after {
  content: ''; position: absolute; top: 50%; margin-top: -3px;
  width: 6px; height: 6px; border-radius: 50%;
}
.t-nav-liste a[aria-current="page"]::before { left: 0;  background: var(--sc-accent); }
.t-nav-liste a[aria-current="page"]::after  { left: 11px; background: var(--sc-ink); }

.t-nav-pied { margin-top: clamp(26px, 4vh, 40px); font-size: 0.9375rem; line-height: 1.7; }
.t-nav-pied a {
  color: var(--t-accent-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color 180ms var(--t-ease);
}
.t-nav-pied a:hover { border-bottom-color: currentColor; }
.t-nav-pied p { margin: 0 0 6px; color: var(--sc-ink-soft); }

/* --- Le voile ---------------------------------------------------------- */
.t-nav-voile {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(38, 38, 38, 0.42);
  opacity: 0;
  visibility: hidden;
  transition: opacity 380ms var(--t-ease), visibility 380ms;
}
[data-nav-ouvert] .t-nav-voile { opacity: 1; visibility: visible; }

/* Le corps ne défile plus derrière le panneau ouvert. */
[data-nav-ouvert] body { overflow: hidden; }

/* --- Téléphone et tablette --------------------------------------------- */
@media (max-width: 640px) {
  /* Sous 640 px, un panneau partiel laisse une bande inutile : il prend
     tout l'écran. */
  .t-nav-panneau { width: 100%; border-left: 0; }
  .t-nav-liste a { min-height: 60px; font-size: 1.25rem; }
}

/* En paysage sur téléphone, la hauteur manque : on resserre le haut. */
@media (max-height: 520px) {
  .t-nav-panneau { padding-top: clamp(72px, 16vh, 92px); }
  .t-nav-liste a { min-height: 48px; font-size: 1.0625rem; }
}

@media (prefers-reduced-motion: reduce) {
  .t-nav-panneau, .t-nav-voile, .t-nav-bouton, .t-nav-bouton i, .t-nav-liste a {
    transition: none;
  }
}


/* =========================================================================
   L'AIMANTATION DU DÉFILEMENT
   -------------------------------------------------------------------------
   Le visiteur ne doit jamais s'arrêter à cheval entre deux actes. À la fin
   d'un geste, la page se cale sur l'acte le plus proche.

   « proximity » et non « mandatory », pour une raison précise : les actes
   épinglés durent jusqu'à cinq hauteurs d'écran, et le contenu y avance à
   l'intérieur de l'acte (les quatre étapes de l'approche, les quatre
   questions du constructeur). Une aimantation obligatoire ramènerait sans
   cesse le visiteur au début de l'acte et rendrait ces scènes impraticables.
   En proximité, l'aimant n'agit qu'aux abords d'une borne : il rattrape les
   arrêts entre deux actes sans gêner la progression dans un acte.
   ========================================================================= */
html {
  scroll-snap-type: y proximity;
  /* Sans cela, l'aimant se déclencherait aussi sur les ancres du menu et
     sauterait par-dessus la cible. */
  scroll-padding-top: 0;
}
/* L'aimant ne se pose QUE sur les actes en flux.
   Un acte épinglé ne révèle son contenu qu'à mesure qu'on le traverse :
   au tout début, sa progression vaut zéro et l'écran est vide. Aimanter ce
   point-là ramenait le visiteur sur un écran blanc — constaté en tablette
   portrait, où l'aimant reprenait la main juste après le bas de page.
   Et c'est sans conséquence : une scène épinglée occupe tout l'écran par
   construction, on ne peut donc pas s'y retrouver « entre deux pages ». */
[data-sc-act="flow"] { scroll-snap-align: start; scroll-snap-stop: normal; }

/* Le panneau ouvert fige le corps : l'aimant n'a rien à y faire. */
[data-nav-ouvert] { scroll-snap-type: none; }

/* Sur un appareil à pointeur grossier, l'aimantation se bat avec le
   défilement à inertie du système et donne une sensation collante. */
@media (pointer: coarse) {
  html { scroll-snap-type: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
}