/* EX’SIE — base : police, remise à zéro, typographie, mise en page, accessibilité. */
@font-face {
  font-family: "Quicksand"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/quicksand-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Quicksand"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/quicksand-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--h-entete) + 24px); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--police); font-size: var(--t-corps); font-weight: 500; line-height: 1.7;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure { margin: 0; }
[hidden] { display: none !important; }

/* Titres légers, mots-clés en gras — comme le hero */
h1, h2, h3, h4 { color: var(--ink); font-weight: 300; text-wrap: balance; }
h1 { font-size: var(--t-h1); line-height: 1.08; letter-spacing: -.015em; }
h2 { font-size: var(--t-h2); line-height: 1.14; letter-spacing: -.012em; }
h3 { font-size: var(--t-h3); line-height: 1.3; font-weight: 600; letter-spacing: -.005em; }
h1 strong, h2 strong, h1 b, h2 b { font-weight: 700; }
.accent { color: var(--accent); }
p { max-width: var(--mesure); text-wrap: pretty; }
p strong, li strong { color: var(--ink); font-weight: 700; }
.chapo { font-size: var(--t-chapo); line-height: 1.75; max-width: var(--mesure-chapo); }
.petit { font-size: var(--t-petit); }
.discret { color: var(--muted); }

.conteneur { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gouttiere); }
.section { padding-block: var(--section); position: relative; }
.section--douce { background: var(--bg-doux); --recit-fond: var(--bg-doux); }
.section:not(.section--douce) + .section:not(.section--douce) { border-top: 1px solid var(--line); }
.pile > * + * { margin-top: var(--pile, var(--e-5)); }

/* Accessibilité */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--c-accent-fonce); color: #fff; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.evitement {
  position: fixed; left: 16px; top: 12px; z-index: 100; padding: 12px 18px; border-radius: var(--r-pilule);
  background: var(--accent-fonce); color: #fff; font-weight: 600; transform: translateY(-200%);
  transition: transform var(--d-2) var(--c-entree);
}
.evitement:focus { transform: none; }

/* Transitions entre pages (repli : navigation normale) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-sortie var(--d-2) var(--c-trajet) both; }
::view-transition-new(root) { animation: vt-entree var(--d-3) var(--c-entree) both; }
@keyframes vt-sortie { to { opacity: 0; filter: blur(6px); } }
@keyframes vt-entree { from { opacity: 0; filter: blur(8px); } }
@keyframes vt-fondu { from { opacity: 0; } }
html.vt-theme::view-transition-old(root) { animation: none; }
html.vt-theme::view-transition-new(root) { animation: vt-fondu var(--d-3) both; }
::view-transition-group(marque), ::view-transition-group(marqueur) {
  animation-duration: var(--d-3); animation-timing-function: var(--c-elan);
}
/* La page s’ouvre depuis la carte qu’on vient de choisir, et s’y range au retour.
   Le script en tête de page pose la classe et les quatre marges --vt-* (rectangle de la carte dans la fenêtre). */
html:is(.vt-carte, .vt-retour)::view-transition-old(root),
html:is(.vt-carte, .vt-retour)::view-transition-new(root) { mix-blend-mode: normal; animation: none; }
html:is(.vt-part, .vt-carte, .vt-retour) :is(.marque, .nav-lien[aria-current] i) { view-transition-name: none; }
html.vt-carte::view-transition-old(root) { animation: vt-recule 620ms var(--c-trajet) both; }
html.vt-carte::view-transition-new(root) { animation: vt-ouvre 620ms var(--c-trajet) both; }
html.vt-retour::view-transition-old(root) { z-index: 1; animation: vt-range 520ms var(--c-trajet) both; }
html.vt-retour::view-transition-new(root) { animation: vt-recule 520ms var(--c-trajet) both reverse; }
/* La page qu’on quitte recule (elle pâlit et perd sa netteté) : la fenêtre qui s’ouvre se détache sans ombre ni bordure. */
@keyframes vt-recule { to { filter: blur(5px) opacity(.4); } } /* tout par filter : avec opacity, Safari laisse transparaître la page d’arrivée */
@keyframes vt-ouvre {
  from { clip-path: inset(var(--vt-t) var(--vt-r) var(--vt-b) var(--vt-l) round 18px); opacity: 0; }
  14% { opacity: 1; }
  to { clip-path: inset(0 round 0px); }
}
@keyframes vt-range {
  from { clip-path: inset(0 round 0px); }
  82% { opacity: 1; }
  to { clip-path: inset(var(--vt-t) var(--vt-r) var(--vt-b) var(--vt-l) round 18px); opacity: 0; }
}

/* Mouvement réduit : version douce, jamais figée */
@media (prefers-reduced-motion: reduce) {
  :root { --d-1: 120ms; --d-2: 200ms; --d-3: 320ms; --d-4: 480ms; }
  @keyframes vt-sortie { to { opacity: 0; } }
  @keyframes vt-entree { from { opacity: 0; } }
  .boucle { animation: none !important; }
}

/* Le décor du hero dépasse volontairement de l’écran : la page, elle, ne défile jamais de côté. */
html { overflow-x: clip; }

/* Le lien d’évitement donne le focus au contenu : pas d’anneau autour de toute la page. */
main:focus { outline: none; }