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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.52;
  color: var(--texte);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: "ss01", "cv05";
}

body.no-scroll { overflow: hidden; }

/* Toute classe posant un display (grid, flex…) l'emporte sur la règle
   « [hidden] { display: none } » du navigateur, qui n'a aucune
   sélectivité. On la rétablit une fois pour tout le site : masquer un
   élément avec `hidden` doit marcher quel que soit son display. */
[hidden] { display: none !important; }

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* Curseurs du système : ils restent en place tant que le curseur rond
   (css/curseur.css, js/curseur.js) n'a pas pris le relais — écran
   tactile ou JavaScript absent. */
a[href], button, summary, label[for], select, [role="button"], [role="tab"],
input[type="checkbox"], input[type="radio"], input[type="submit"] { cursor: pointer; }
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), textarea { cursor: text; }
button:disabled, input:disabled { cursor: not-allowed; }
h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* ------------------------------------------------------------------ titres
   Archivo en largeur resserrée (wdth 84) et interlignage court : c'est la
   signature typographique. `font-variation-settings` court-circuitant
   `font-weight`, les deux axes sont toujours déclarés ensemble. */
h1, h2, h3, h4,
.display,
.chiffre-valeur,
.offre-prix {
  font-family: var(--font-display);
  font-variation-settings: "wdth" var(--wdth-display), "wght" var(--wght-titre);
  letter-spacing: -0.025em;
  line-height: 1.02;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 {
  font-size: var(--fs-h3);
  font-variation-settings: "wdth" var(--wdth-sous-titre), "wght" var(--wght-sous-titre);
  letter-spacing: -0.012em;
  line-height: 1.18;
}
h4 {
  font-size: var(--fs-small);
  font-variation-settings: "wdth" var(--wdth-sous-titre), "wght" var(--wght-sous-titre);
  letter-spacing: 0;
}

p { text-wrap: pretty; }

.container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ------------------------------------------------------------ étiquettes
   Le monospace en petites capitales sert de repère de lecture : numéro
   d'étape, catégorie, coordonnées. Il ne dit jamais rien d'essentiel. */
.etiquette {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--texte-doux);
}
.etiquette::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--orange);
  border-radius: 50%;
  flex: none;
}
.etiquette.sans-point::before { display: none; }
.on-sombre .etiquette { color: rgba(243, 240, 233, 0.74); }

/* ------------------------------------------------------------ en-têtes */
.section-tete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(16px, 3vw, 48px);
  align-items: end;
  margin-bottom: var(--sp-7);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--trait);
}
.on-sombre .section-tete { border-bottom-color: var(--trait-clair); }

.section-titre { max-width: 17ch; }
/* Un titre reste d'une seule couleur. Colorer un morceau de phrase
   désigne « ce qu'il faut retenir » à la place du lecteur — et l'orange
   est réservé à ce qu'on peut cliquer. */
.section-titre .accent { color: inherit; }

.section-intro {
  font-size: var(--fs-lead);
  color: var(--texte-doux);
  max-width: 52ch;
  line-height: 1.55;
}
.on-sombre .section-intro { color: rgba(243, 240, 233, 0.74); }

@media (max-width: 860px) {
  .section-tete {
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--sp-4);
  }
  .section-titre { max-width: 22ch; }
}

/* ------------------------------------------------------------- surfaces */
.on-sombre {
  background: var(--nuit);
  color: var(--os);
  --trait: var(--trait-clair);
  --texte-doux: rgba(243, 240, 233, 0.74);
}

section { position: relative; }
.section-pad { padding-block: var(--pad-section); }
.section-pad-sm { padding-block: var(--pad-section-sm); }

.filet {
  height: 1px;
  background: var(--trait);
  border: 0;
  margin: 0;
}

.icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.icone svg { width: 100%; height: 100%; display: block; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  background: var(--nuit);
  color: var(--os);
  padding: 9px 14px;
  z-index: 999;
  border-radius: var(--radius-sm);
  transition: top var(--dur-1) var(--ease-sortie);
}
.skip-link:focus { top: 12px; }

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--orange); color: #fff; }

/* Lien souligné qui se dessine de gauche à droite au survol. */
.lien-trait {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 550;
  padding-bottom: 3px;
  position: relative;
}
.lien-trait::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: currentColor;
  opacity: 0.28;
  transform-origin: left;
  transition: transform var(--dur-2) var(--ease-sortie), opacity var(--dur-2) var(--ease-sortie), background-color var(--dur-2) var(--ease-sortie);
}
.lien-trait:hover::after { background: var(--orange); opacity: 1; }
.lien-trait .fleche {
  transition: transform var(--dur-2) var(--ease-elan);
}
.lien-trait:hover .fleche { transform: translateX(5px); }

/* ------------------------------------------------------- utilitaires
   Quelques réglages ponctuels qui étaient posés en attribut style. La
   CSP interdit les styles en ligne : ils étaient donc ignorés en
   production alors qu'ils fonctionnaient en local, où aucune CSP ne
   s'applique. */
.sur-fond { position: relative; z-index: 1; }
.sans-marge-haut { margin-top: 0; }
.mesure-46 { max-width: 46ch; }
.marge-haut-4 { margin-top: var(--sp-4); }
.marge-haut-5 { margin-top: var(--sp-5); }
.marge-haut-6 { margin-top: var(--sp-6); }