/* =========================================================================
   SAGEPREV — feuille de style unique
   Papier / encre / bordeaux. Aucun framework.
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. Polices — hébergées sur notre serveur (aucun appel à Google)
   Les deux familles historiques du site : Saira Extra Condensed pour les
   titres, Mulish (ex-Muli, renommé en 2020) pour le texte courant.
   Mulish est variable : un seul fichier couvre 400 à 800.
   Licence SIL Open Font License 1.1.
   ---------------------------------------------------------------------- */
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/mulish-latin.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: "Mulish";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/mulish-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, 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;
}
@font-face {
  font-family: "Mulish";
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/mulish-italic-latin.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: "Mulish";
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/mulish-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, 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;
}
@font-face {
  font-family: "Saira Extra Condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/saira-500-latin.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: "Saira Extra Condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/saira-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, 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;
}
@font-face {
  font-family: "Saira Extra Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/saira-700-latin.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: "Saira Extra Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/saira-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, 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;
}

/* -------------------------------------------------------------------------
   1. Jetons
   ---------------------------------------------------------------------- */
:root {
  /* Couleur — le bordeaux de la marque porte l'identité, pas un simple accent */
  --wine:        oklch(0.405 0.163 17);
  --wine-hover:  oklch(0.345 0.145 17);
  --wine-deep:   oklch(0.255 0.095 17);
  --wine-wash:   oklch(0.955 0.022 20);
  --wine-line:   oklch(0.86 0.055 18);

  --ochre:       oklch(0.665 0.115 68);
  --ochre-wash:  oklch(0.96 0.04 75);
  --leaf:        oklch(0.75 0.09 150);
  --leaf-wash:   oklch(0.96 0.03 150);

  /* Blanc pur, et c'est voulu : il ne sert qu'aux plaques sous le logo et au
     fond des champs actifs, qui doivent être PLUS clairs que le papier crème
     pour se détacher. Partout ailleurs, les neutres teintés ci-dessous. */
  --white:       oklch(1 0 0);

  /* Neutres, tous teintés vers l'hue de la marque */
  --paper:       oklch(0.977 0.008 72);
  --paper-sunk:  oklch(0.951 0.011 68);
  --ivory:       oklch(0.965 0.014 68);
  --ink:         oklch(0.235 0.021 32);
  --ink-2:       oklch(0.455 0.021 32);
  /* Assombri pour passer WCAG AA (4,5:1) : ce gris porte les libellés du
     formulaire et des fiches, en 12-14 px, où la norme ne tolère aucun
     rabais. 4,60:1 sur le fond le plus clair-sur-clair (bande de preuve). */
  --ink-3:       oklch(0.53 0.018 42);
  --rule:        oklch(0.875 0.013 52);
  --rule-soft:   oklch(0.925 0.010 52);

  /* Typographie */
  --font-display: "Saira Extra Condensed", "Arial Narrow", Arial, sans-serif;
  --font-sans:    "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-xs:  0.75rem;
  --t-sm:  0.875rem;
  --t-base: clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
  --t-md:  clamp(1.125rem, 1.06rem + 0.3vw, 1.3rem);
  /* Saira Extra Condensed occupe environ un tiers de moins en largeur que
     Fraunces : les tailles de titre sont remontées d'autant pour garder la
     même présence à l'écran. */
  --t-lg:  clamp(1.7rem, 1.5rem + 0.9vw, 2.25rem);
  --t-xl:  clamp(2.25rem, 1.85rem + 1.75vw, 3.35rem);
  --t-2xl: clamp(2.9rem, 2.15rem + 3.4vw, 5.4rem);

  /* Rythme — volontairement irrégulier, pas une grille uniforme */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 6.5rem;

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --shell:  76rem;
  --measure: 68ch;

  --radius: 2px;
  --radius-lg: 4px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* -------------------------------------------------------------------------
   2. Base
   ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.04;
  /* Saira Extra Condensed est déjà très resserrée : une chasse négative la
     rendrait illisible. On l'ouvre légèrement à la place. */
  letter-spacing: 0.005em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

address { font-style: normal; }
abbr[title] { text-decoration: underline dotted; cursor: help; }

a { color: var(--wine); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--wine-hover); }

::selection { background: var(--wine); color: var(--ivory); }

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

.ico { width: 1em; height: 1em; fill: currentColor; flex: none; }

.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: var(--s-4); top: -4rem;
  z-index: 100;
  background: var(--wine); color: var(--ivory);
  padding: var(--s-3) var(--s-5);
  text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: var(--s-4); color: var(--ivory); }

/* -------------------------------------------------------------------------
   3. En-tête
   ---------------------------------------------------------------------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule-soft);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.masthead.is-stuck { border-bottom-color: var(--rule); }

.masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: 5.25rem;
}

/* Le nom s'écrit toujours en capitales, comme sur le logo. */
.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.wordmark em { font-style: normal; color: var(--wine); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}
/* Logo carré : le nom est dans l'image, aucun texte ne l'accompagne.
   Un carré ne tourne pas au survol — il se soulève. */
.brand__mark {
  width: auto; height: 4.25rem;
  /* Contour blanc : le logo est dessiné sur blanc, le papier de la barre
     est légèrement crème — sans cette marge, le carré rouge s'y colle. */
  box-sizing: content-box;
  padding: 0.35rem;
  background: var(--white);
  border-radius: var(--radius);
  transition: transform 0.5s var(--ease);
}
.brand:hover .brand__mark { transform: translateY(-2px) scale(1.03); }

.nav { display: contents; }

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.9vw, 2rem);
  list-style: none;
  margin: 0; padding: 0;
}
.nav__list a {
  position: relative;
  display: block;
  padding: 0.4rem 0;
  color: var(--ink-2);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.nav__list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--wine);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.nav__list a:hover { color: var(--ink); }
.nav__list a:hover::after,
.nav__list a[aria-current]::after { transform: scaleX(1); }
.nav__list a[aria-current] { color: var(--wine); }

.nav__aside {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}
.tel {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.tel .ico { color: var(--wine); }
.tel:hover { color: var(--wine); }

.nav-toggle { display: none; }
/* Bouton d'appel : n'existe que sous le point de rupture du menu. */
.tel-call { display: none; }

/* Tablette en paysage : la barre se resserre plutôt que de sacrifier le
   bouton de devis, seul appel à l'action visible à cette largeur. */
@media (max-width: 1080px) {
  .masthead__inner { gap: var(--s-4); }
  .nav__aside { gap: var(--s-4); }
  .nav__aside .btn--sm { padding: 0.55rem 0.9rem; white-space: nowrap; }
  .brand__mark { height: 3.6rem; }
}
/* Sous 1000 px la barre ne peut plus tenir les cinq rubriques, le numéro
   écrit ET le bouton. Le numéro se réduit à son pictogramme : le geste reste
   à portée de doigt, et le seul appel à l'action de la barre survit. */
@media (max-width: 1000px) {
  .tel__num { display: none; }
  .tel { padding: 0.4rem; }
  .nav__list { gap: clamp(0.7rem, 1.35vw, 1.25rem); }
}

@media (max-width: 620px) {
  /* Plus de place pour le numéro écrit : le pictogramme suffit, le libellé
     accessible le porte toujours. */
  .tel-call__num { display: none; }
  .tel-call { padding: 0.6rem; min-width: 44px; justify-content: center; }
  .tel-call .ico { font-size: 1.15rem; }
  .masthead__inner { gap: var(--s-3); }
}

@media (max-width: 420px) {
  .brand__mark { height: 3.5rem; }
  .masthead__inner { min-height: 4.75rem; }
}

@media (max-width: 900px) {
  /* Le téléphone est l'action la plus rentable du site : plein bordeaux,
     jamais replié dans le menu. Hauteur calée sur les 44 px tactiles. */
  .tel-call {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 44px;
    padding: 0.5rem 0.85rem;
    border-radius: var(--radius);
    background: var(--wine);
    color: var(--ivory);
    font-size: var(--t-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
  }
  .tel-call:hover,
  .tel-call:focus-visible { background: var(--wine-hover); color: var(--ivory); }
  /* Le même numéro dans le menu déplié ferait doublon, y compris pour un
     lecteur d'écran. */
  .nav__aside .tel { display: none; }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: none;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 0.5rem 0.85rem;
    font: inherit;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
  }
  .nav-toggle__bars { display: grid; gap: 4px; width: 16px; }
  .nav-toggle__bars i {
    display: block; height: 1.5px; background: currentColor;
    transition: transform 0.35s var(--ease), opacity 0.2s;
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars i:first-child { transform: translateY(2.75px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars i:last-child  { transform: translateY(-2.75px) rotate(-45deg); }

  .nav {
    display: block;
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: var(--s-2) var(--gutter) var(--s-6);
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.45s var(--ease);
  }
  .nav.is-open { clip-path: inset(0 0 0 0); }
  .nav:not(.is-open) { visibility: hidden; }
  .nav.is-open { visibility: visible; }

  .nav__list { display: block; }
  .nav__list li + li { border-top: 1px solid var(--rule-soft); }
  .nav__list a {
    padding: var(--s-4) 0;
    font-size: var(--t-md);
    font-family: var(--font-display);
    color: var(--ink);
  }
  .nav__list a::after { display: none; }

  .nav__aside {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-4);
    margin-top: var(--s-5);
  }
  .nav__aside .btn { display: inline-flex; }
  .tel { font-size: var(--t-md); justify-content: center; }
}

/* -------------------------------------------------------------------------
   4. Boutons
   ---------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.btn .ico { transition: transform 0.4s var(--ease); }
.btn:hover .ico { transform: translateX(3px); }

.btn--solid { background: var(--wine); color: var(--ivory); }
.btn--solid:hover { background: var(--wine-hover); color: var(--ivory); }

.btn--ghost { border-color: var(--rule); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--wine); color: var(--wine); }

.btn--inverse { background: var(--ivory); color: var(--wine); }
.btn--inverse:hover { background: var(--white); color: var(--wine-hover); }

.btn--outline-inverse { border-color: color-mix(in oklab, var(--ivory) 45%, transparent); color: var(--ivory); }
.btn--outline-inverse:hover { border-color: var(--ivory); color: var(--ivory); background: color-mix(in oklab, var(--ivory) 10%, transparent); }

.btn--sm { padding: 0.6rem 1.05rem; font-size: var(--t-xs); }
.btn--lg { padding: 1.05rem 2rem; font-size: var(--t-base); }
.btn--block { display: flex; width: 100%; }
/* Bouton verrouillé pendant l'envoi du formulaire. */
.btn:disabled { opacity: 0.65; cursor: progress; pointer-events: none; }

/* Lien-flèche discret, utilisé dans le corps de texte */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: var(--t-sm);
  letter-spacing: 0.01em;
  text-decoration: none;
  border-bottom: 1px solid var(--wine-line);
  padding-bottom: 2px;
  transition: border-color 0.3s var(--ease);
}
.arrow-link:hover { border-bottom-color: var(--wine); }
.arrow-link .ico { transition: transform 0.4s var(--ease); }
.arrow-link:hover .ico { transform: translateX(3px); }

/* -------------------------------------------------------------------------
   5. Accueil — bandeau bordeaux
   ---------------------------------------------------------------------- */
/* Hauteur volontairement contenue : l'offre (« nos domaines d'intervention »)
   doit commencer à apparaître sans défilement sur un portable 1440x900. */
.hero {
  background: var(--wine);
  color: var(--ivory);
  padding-block: clamp(2rem, 3.5vw, 3rem);
  position: relative;
  overflow: hidden;
}
.hero > * { position: relative; z-index: 1; }

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

/* À droite du titre, les deux domaines plutôt que le logo : le visiteur
   choisit sa formation sans défiler, et la marque reste dans l'en-tête. */
.hero__pick {
  display: grid;
  gap: var(--s-3);
  align-content: center;
}
.hero__pick-label {
  margin: 0 0 var(--s-1);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--ivory) 66%, var(--wine));
}

.pick {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border: 1px solid color-mix(in oklab, var(--ivory) 32%, transparent);
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--ivory) 7%, transparent);
  color: var(--ivory);
  text-decoration: none;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease),
              color 0.35s var(--ease), transform 0.35s var(--ease);
}
.pick:hover {
  background: var(--ivory);
  border-color: var(--ivory);
  color: var(--wine);
  transform: translateY(-2px);
}
/* Vignettes des deux visuels de la section « domaines », en petit :
   le fond blanc est nécessaire au logo SST, détouré sur blanc. */
.pick__thumb {
  width: 3.5rem; height: 3.5rem;
  flex: none;
  object-fit: cover;
  background: var(--white);
  border-radius: 0.6rem;
}
.pick__text { display: grid; }
.pick__name {
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.2;
}
.pick__meta {
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  opacity: 0.78;
}
.pick__ico { transition: transform 0.35s var(--ease); }
.pick:hover .pick__ico { transform: translateX(3px); }

@media (max-width: 820px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--s-6); }
  .hero__actions { margin-top: var(--s-5); }
  /* Deux cartes côte à côte : elles coûtent moins de hauteur qu'empilées. */
  .hero__pick { grid-template-columns: 1fr 1fr; }
  .hero__pick-label { grid-column: 1 / -1; }
  .pick { padding: var(--s-4); gap: var(--s-3); }
  .pick__thumb { width: 2.75rem; height: 2.75rem; }
  .pick__ico { display: none; }
}
/* Sur téléphone, le premier écran doit déjà montrer les deux domaines : c'est
   le choix que le visiteur vient faire. Tout le hero est donc resserré d'un
   cran — hauteur du bouton comprise — pour faire remonter les cartes au-dessus
   de la ligne de flottaison, y compris sur les petits écrans (375 x 553). */
@media (max-width: 700px) {
  .hero { padding-block: var(--s-4) var(--s-5); }
  .hero__inner { gap: var(--s-4); }
  .hero__eyebrow { margin-bottom: var(--s-2); }
  .hero h1 { font-size: clamp(2.2rem, 1.5rem + 3.2vw, 2.9rem); }
  .hero__lead { margin-top: var(--s-3); font-size: var(--t-sm); line-height: 1.55; }
  .hero__actions { margin-top: var(--s-4); }
  .hero .btn--lg { padding: 0.75rem 1.4rem; font-size: var(--t-sm); }
  /* Chapô raccourci : les deux incises secondaires du chapô disparaissent,
     la phrase reste grammaticale (« Interventions dans vos locaux, dans les
     Yvelines. »). Deux lignes de moins, soit une carte de gagnée. */
  .hero__lead .lead-more { display: none; }
}
@media (max-width: 480px) {
  .hero__pick { grid-template-columns: 1fr; }
  /* Cartes empilées : un cran plus compactes pour que la première tienne
     entière sur les écrans les plus courts. */
  .pick { padding: var(--s-3); }
  .pick__thumb { width: 2.5rem; height: 2.5rem; }
}

.hero__eyebrow {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--ivory) 72%, var(--wine));
  margin-bottom: var(--s-5);
}
.hero h1 {
  font-size: clamp(2.9rem, 1.7rem + 4vw, 4.75rem);
  font-weight: 700;
  letter-spacing: 0.005em;
  max-width: 20ch;
}
/* Saira n'a pas d'italique : l'accent se fait à la graisse et à la couleur,
   pas sur un faux oblique. */
.hero h1 em {
  font-style: normal;
  font-weight: 500;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--ivory) 76%, var(--wine));
}

.hero__lead {
  margin-top: var(--s-5);
  max-width: 46ch;
  font-size: var(--t-base);
  line-height: 1.6;
  color: color-mix(in oklab, var(--ivory) 88%, var(--wine));
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: var(--s-6);
}

/* -------------------------------------------------------------------------
   5bis. Bande de preuve (accueil) — typographique, pas des tuiles
   ---------------------------------------------------------------------- */
.proof {
  background: var(--paper-sunk);
  border-bottom: 1px solid var(--rule-soft);
  padding-block: var(--s-5);
}
.proof__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) 0;
  list-style: none;
  margin: 0; padding: 0;
}
.proof__list li {
  flex: 1 1 12rem;
  padding-inline: var(--s-5);
  border-left: 1px solid var(--rule);
}
.proof__list li:first-child { border-left: 0; padding-left: 0; }
.proof__list b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--wine);
  letter-spacing: 0.005em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.proof__list span {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 700px) {
  .proof__list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-5); }
  .proof__list li { border-left: 0; padding-inline: 0; }
  /* Deux colonnes : chaque mention n'a plus que la moitié de la largeur. Au pas
     du bureau, « Interlocuteur unique » et « du devis à la formation » partaient
     sur trois lignes et la bande écrasait le hero. */
  .proof__list b { font-size: 1rem; letter-spacing: 0; }
  .proof__list span { font-size: 0.6875rem; letter-spacing: 0.05em; }
}
@media (max-width: 380px) {
  .proof__list b { font-size: 0.9375rem; }
  .proof__list span { font-size: 0.65rem; letter-spacing: 0.04em; }
}

/* Déroulé en quatre temps. Pas des tuiles : une bande numérotée séparée par
   des filets, dans la même famille que la bande de preuve du hero. */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.steps li {
  padding: var(--s-5) var(--s-5) var(--s-6) 0;
  border-bottom: 1px solid var(--rule);
}
/* Le filet vertical passe par une ombre d'un pixel : une bordure changerait
   la largeur des colonnes et casserait l'alignement du texte. */
@media (min-width: 56rem) {
  .steps li + li { padding-left: var(--s-5); box-shadow: -1px 0 0 var(--rule); }
}
.steps__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--wine);
  margin-bottom: var(--s-3);
}
.steps h3 { font-size: var(--t-md); margin-bottom: var(--s-3); }
.steps p { margin: 0; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.6; }

/* Références clients : simple ligne de tags, pas de logos inventés */
.refs { padding-top: var(--s-8); }
.refs .eyebrow { margin-bottom: var(--s-3); }

/* Bloc formateur : le visage avant le CV */
.trainer {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: clamp(1.75rem, 5vw, 3.5rem);
  align-items: center;
}
.trainer__photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}
.trainer h2 {
  font-size: var(--t-xl);
  letter-spacing: 0.005em;
  margin-top: var(--s-2);
}
.trainer__body {
  margin: var(--s-4) 0 var(--s-5);
  color: var(--ink-2);
  max-width: 52ch;
}
/* Sur téléphone, la photo empilée au-dessus du bloc poussait le nom et le texte
   très bas. Elle passe en flottant à droite : le texte l'habille et la section
   perd une hauteur d'image. La grille est abandonnée le temps du float — un
   élément flottant n'existe pas dans une grille. */
@media (max-width: 640px) {
  .trainer { display: block; }
  .trainer::after { content: ''; display: block; clear: both; }
  .trainer__photo {
    float: right;
    width: clamp(7rem, 20vw, 9rem);
    /* Marge haute négative : le disque remonte jusqu'à ce que son centre tombe
       sur la ligne du nom, sinon la photo « pendait » sous le titre. */
    margin: -0.9rem 0 var(--s-3) var(--s-4);
    /* Le texte suit le disque et non son carré englobant. */
    shape-outside: circle(50%);
    shape-margin: 0.4rem;
  }
  /* Le nom cohabite avec la photo sur une colonne deux fois plus étroite :
     sans ce cran de moins, « Gentilhomme » débordait. */
  .trainer h2 { font-size: clamp(1.9rem, 1.2rem + 3.2vw, 2.25rem); }
}

/* -------------------------------------------------------------------------
   6. Sections génériques
   ---------------------------------------------------------------------- */
.band { padding-block: clamp(3.5rem, 8vw, var(--s-9)); }
.band--sunk { background: var(--paper-sunk); }
.band--tight { padding-block: clamp(2.5rem, 5vw, var(--s-7)); }

.band__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s-7);
}
.band__head h2 {
  font-size: var(--t-lg);
  letter-spacing: 0.005em;
}
.eyebrow {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}

/* -------------------------------------------------------------------------
   7. Domaines d'intervention (accueil)
   ---------------------------------------------------------------------- */
.domains { display: grid; gap: clamp(3rem, 6vw, 5.5rem); }

.domain {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: center;
}
/* Alternance gauche/droite en conservant la même largeur de texte : sans
   inverser aussi les pistes, le second bloc hériterait de la colonne étroite. */
.domain:nth-child(even) { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.domain:nth-child(even) .domain__visual { order: 2; }

.domain__visual {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 4vw, 3rem);
  background: var(--ivory);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}
.domain__visual img {
  width: min(100%, 15rem);
  border-radius: 50%;
}
.domain__num {
  position: absolute;
  top: var(--s-4); left: var(--s-5);
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--wine-line);
  line-height: 1;
}

.domain h3 {
  font-size: var(--t-xl);
  letter-spacing: 0.005em;
}
.domain__body { color: var(--ink-2); margin-top: var(--s-4); max-width: 44ch; }

.domain__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

@media (max-width: 760px) {
  .domain { grid-template-columns: 1fr; }
  .domain:nth-child(even) { grid-template-columns: 1fr; }
  .domain:nth-child(even) .domain__visual { order: 0; }

  /* Même gabarit pour les deux visuels, moitié de la taille de référence
     (15rem sur grand écran) : les vignettes ne doivent pas manger l'écran. */
  .domain__visual { padding: var(--s-5); }
  .domain__visual img { width: 7.5rem; }
}

/* -------------------------------------------------------------------------
   8. Bandeau d'appel
   ---------------------------------------------------------------------- */
/* Bandeau d'appel juste avant le pied de page. Bordeaux clair, pas
   « wine-deep » : posé sur le pied de page, les deux ne feraient qu'un
   seul bloc sombre. */
.callout {
  background: var(--wine);
  color: var(--ivory);
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
}
.callout__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
}
.callout h2 {
  font-size: var(--t-xl);
  max-width: 20ch;
  letter-spacing: 0.005em;
}
/* Sur fond bordeaux, le « PREV » ne peut pas rester bordeaux. */
.callout .wordmark em { color: color-mix(in oklab, var(--ivory) 58%, var(--wine)); }
.callout p {
  margin-top: var(--s-3);
  color: color-mix(in oklab, var(--ivory) 82%, var(--wine));
  max-width: 40ch;
}
.callout__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* -------------------------------------------------------------------------
   9. Pages formation — en-tête et grille
   ---------------------------------------------------------------------- */
/* Même bordeaux que le hero de l'accueil : toutes les pages s'ouvrent sur le
   même bandeau de marque, et il ne se confond plus avec l'en-tête crème. */
.pagehead {
  background: var(--wine);
  color: var(--ivory);
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem);
}
.pagehead .eyebrow { color: color-mix(in oklab, var(--ivory) 72%, var(--wine)); }
.pagehead__sub {
  margin-top: var(--s-5);
  font-size: var(--t-md);
  color: color-mix(in oklab, var(--ivory) 88%, var(--wine));
  max-width: var(--measure);
}
/* Sur fond bordeaux, le « PREV » ne peut pas rester bordeaux. */
.pagehead .wordmark em { color: color-mix(in oklab, var(--ivory) 58%, var(--wine)); }
/* Titre de page sur une seule ligne : plus de largeur maximale (c'est elle
   qui coupait « Sauveteur Secouriste du Travail » en deux), et une taille
   indexée sur la largeur de l'écran plutôt que sur l'échelle générale, pour
   que le plus long des titres — « Maintien et Actualisation des
   Compétences » — tienne encore d'un seul tenant. */
.pagehead h1 {
  font-size: clamp(1.9rem, 4.9vw, 4.5rem);
  letter-spacing: 0.005em;
  margin-top: var(--s-4);
}
/* Bascule SST / MAC — vit dans le bandeau bordeaux : couleurs inversées,
   l'onglet actif est ivoire plein, l'autre reste en creux. */
.switch {
  display: inline-flex;
  margin-top: var(--s-6);
  border: 1px solid color-mix(in oklab, var(--ivory) 45%, transparent);
  border-radius: var(--radius);
  overflow: hidden;
}
.switch a {
  padding: 0.7rem 1.4rem;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ivory);
  text-decoration: none;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.switch a + a { border-left: 1px solid color-mix(in oklab, var(--ivory) 45%, transparent); }
.switch a:hover { background: color-mix(in oklab, var(--ivory) 12%, transparent); }
.switch a[aria-current] { background: var(--ivory); color: var(--wine); }
.switch a[aria-current]:hover { background: var(--ivory); }
.switch small { font-weight: 400; opacity: 0.8; }

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  padding-block: clamp(2.5rem, 6vw, var(--s-8)) clamp(3rem, 7vw, var(--s-9));
}
@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; }
}
/* Pages sans colonne latérale (légales, 404) */
.layout--solo { grid-template-columns: minmax(0, 1fr); }

/* -------------------------------------------------------------------------
   10. Corps rédactionnel
   ---------------------------------------------------------------------- */
.prose { counter-reset: sect; max-width: var(--measure); }

.prose > section { padding-block: var(--s-6) var(--s-7); }
.prose > section + section { border-top: 1px solid var(--rule-soft); }
.prose > section:first-child { padding-top: 0; }

.prose h2 {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  font-size: var(--t-lg);
  letter-spacing: 0.005em;
  margin-bottom: var(--s-5);
}
.prose h2::before {
  counter-increment: sect;
  content: counter(sect, decimal-leading-zero);
  font-size: var(--t-xs);
  font-weight: 600;
  font-family: var(--font-sans);
  letter-spacing: 0.1em;
  color: var(--wine);
  transform: translateY(-0.25em);
}
.prose p { color: var(--ink-2); }
/* Listes « nues » : puce en filet. Les listes typées (.ruled, .tags) gardent
   leur propre habillage. */
.prose > section > ul:not([class]) {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
}
.prose > section > ul:not([class]) > li {
  position: relative;
  padding-left: var(--s-5);
  margin-bottom: var(--s-3);
  color: var(--ink-2);
}
.prose > section > ul:not([class]) > li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 0.6rem; height: 1px;
  background: var(--wine);
}

/* -------------------------------------------------------------------------
   11. Listes de compétences / contenus
   ---------------------------------------------------------------------- */
.blocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-5);
}
.block { border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; }
.block .block__head {
  background: var(--wine);
  color: var(--ivory);
  margin: 0;
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}
/* Le domaine lui-même, dans son propre bandeau sous l'intitulé : mêmes
   couleurs que l'encadré « En pratique » (ivoire, filet, titre bordeaux). */
.block .block__domain {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  background: var(--ivory);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.1;
  color: var(--wine);
  text-align: center;
}
.block ul { list-style: none; margin: 0; padding: 0; }
.block li {
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.block li + li { border-top: 1px solid var(--rule-soft); }

/* Liste simple à filets, sans encadrement */
.ruled { list-style: none; margin: var(--s-4) 0 0; padding: 0; }
.ruled li {
  padding: var(--s-3) 0;
  border-top: 1px solid var(--rule-soft);
  color: var(--ink-2);
  font-size: var(--t-sm);
}
.ruled li:last-child { border-bottom: 1px solid var(--rule-soft); }

/* Note de bas de section : mention légale, pas argument de vente. Filet
   bordeaux à gauche et fond lavé pour qu'elle se lise comme une annotation
   adossée aux encadrés de prix, sans entrer en concurrence avec eux.
   Corps volontairement petit — --ink-2 et non --ink-3 pour que 12 px restent
   au-dessus du seuil AA sur ce fond très clair. */
.fineprint {
  margin-top: var(--s-5);
  padding: var(--s-3) var(--s-4);
  /* Pas de --measure ici : cette limite de lecture vaut 68 caractères de la
     taille COURANTE, soit à peine 26 rem une fois le corps descendu à 12 px.
     La note se coupait donc bien avant le bord de la colonne. Elle prend toute
     la largeur disponible et tient sur une ligne dès le bureau. */
  background: var(--wine-wash);
  border-left: 3px solid var(--wine-line);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--ink-2);
}

/* Rangée de mots-clés (secteurs d'activité) */
.tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-5) 0 0; padding: 0; list-style: none; }
.tags li {
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--rule);
  border-radius: 100px;
  font-size: var(--t-sm);
  color: var(--ink-2);
  background: var(--ivory);
}

/* -------------------------------------------------------------------------
   12. Intervenant
   ---------------------------------------------------------------------- */
.intervenant { margin-top: var(--s-4); }

.intervenant__id {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--rule-soft);
}
.intervenant__photo {
  flex: none;
  width: 4.25rem; height: 4.25rem;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--rule);
}
.intervenant__name {
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
}
.intervenant__cert { margin: 0.15rem 0 0; font-size: var(--t-sm); color: var(--ink-3); }

.creds-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--s-5) var(--s-6);
  margin-top: var(--s-5);
}
.creds__head {
  /* C'est un vrai h3 : la règle générale des titres lui donnerait la police
     d'affichage, or c'est une étiquette, pas un titre de section. */
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 var(--s-2);
}
.creds { list-style: none; margin: var(--s-4) 0 0; padding: 0; }
.creds li { padding: var(--s-3) 0; border-top: 1px solid var(--rule-soft); }
.creds :is(h3, h4) {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 0.15rem;
}
.creds :is(h3, h4) span { font-weight: 400; color: var(--ink-3); }
/* Les sigles (CQP ALS, PRAP IBC / 2S…) restent d'un seul tenant : coupés en
   fin de ligne, avec leur soulignement, ils devenaient illisibles. */
.creds :is(h3, h4) a { white-space: nowrap; }
.creds p { margin: 0; font-size: var(--t-sm); color: var(--ink-3); line-height: 1.5; }

/* -------------------------------------------------------------------------
   13. Fiche pratique (colonne droite)
   ---------------------------------------------------------------------- */
.fiche {
  position: sticky;
  top: 6rem;
  background: var(--ivory);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
}
@media (max-width: 980px) { .fiche { position: static; } }

.fiche__title {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wine);
  margin-bottom: var(--s-4);
}

.fiche__rows { margin: 0; }
.fiche__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--rule-soft);
}
.fiche__row dt {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.fiche__row dd {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 600;
  text-align: right;
  color: var(--ink);
}
/* Ligne « Tarif » : deux montants empilés à droite (intra puis inter), et
   l'intitulé qui porte le bouton « i » en dessous, faute de place à côté d'une
   valeur sur deux lignes. */
.fiche__row--tarif { align-items: start; }
.fiche__row--tarif dt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
}
/* Grille à deux colonnes portée par le <dd> lui-même, et non par chaque ligne :
   c'est ce qui garantit que « Intra » et « Inter » partagent la même colonne et
   que les deux montants s'alignent, quelle que soit leur longueur. */
.fiche__pairs {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 0.6rem;
  align-items: baseline;
}
.fiche__amount { text-align: right; }
.fiche__qualifier {
  text-align: left;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Pictogramme d'information : renvoie à la section Tarif, qui détaille ce que
   le forfait comprend. Un lien d'ancre, pas une infobulle — il fonctionne sans
   JS et reste atteignable au clavier. Le glyphe dessine lui-même son cercle,
   inutile d'en ajouter un en CSS ; .ico le dimensionne sur le font-size. */
.fiche__info {
  display: inline-flex;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--wine);
  opacity: 0.7;
  text-decoration: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.fiche__info:hover {
  opacity: 1;
  transform: scale(1.12);
}

/* Cible de ce bouton : la section « Tarif ». Le décalage compense l'en-tête
   collant, sinon le titre arrive sous le bandeau. Pas de surbrillance au
   :target — un h2 « Tarif » se repère seul, contrairement à une puce noyée
   dans une liste. */
#tarif { scroll-margin-top: 7rem; }

.pdf {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--t-sm);
  text-decoration: none;
  border-bottom: 1px solid var(--wine-line);
}
.pdf:hover { border-bottom-color: var(--wine); }

.fiche__meters {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}
.meter__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.5rem;
}
.meter__head b {
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--wine);
  letter-spacing: 0.005em;
  font-variant-numeric: tabular-nums;
}
.meter__track {
  height: 3px;
  background: var(--rule);
  border-radius: 100px;
  overflow: hidden;
}
.meter__fill {
  display: block;
  height: 100%;
  width: var(--value, 0%);
  background: var(--wine);
  transform-origin: left;
  transition: transform 1.1s var(--ease);
}
.js .meter__fill { transform: scaleX(0); }
.js .meter.is-shown .meter__fill { transform: scaleX(1); }

.fiche__cta { margin-top: var(--s-5); width: 100%; }

/* -------------------------------------------------------------------------
   14. Coordonnées (page contact)
   ---------------------------------------------------------------------- */
/* Même habillage que l'encadré « En pratique » des pages formation :
   fond ivoire, filet, titre bordeaux. */
.coords {
  position: sticky;
  top: 6rem;
  background: var(--ivory);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
}
@media (max-width: 980px) { .coords { position: static; } }

.coords__title {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wine);
  margin-bottom: var(--s-4);
}
.coords__item {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--rule-soft);
}
.coords__item .ico { font-size: 1.15rem; margin-top: 0.2rem; color: var(--wine); }
.coords__item a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--wine-line); }
.coords__item a:hover { color: var(--wine); border-bottom-color: var(--wine); }
.coords__item address { font-style: normal; line-height: 1.5; }
.coords__label {
  display: block;
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.15rem;
}

/* -------------------------------------------------------------------------
   15. Formulaire
   ---------------------------------------------------------------------- */
.form { max-width: var(--measure); }
.form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--s-5);
  margin-bottom: var(--s-5);
}
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field--full { grid-column: 1 / -1; }
.field > label {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.field .req { color: var(--wine); }

.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: var(--t-sm);
  color: var(--ink);
  background: var(--ivory);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.8rem 0.9rem;
  width: 100%;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.field textarea { resize: vertical; min-height: 9rem; line-height: 1.6; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23726' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  padding-right: 2.25rem;
}
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--ink-3); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--wine);
  box-shadow: 0 0 0 3px var(--wine-wash);
  background: var(--white);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-3); }

/* Message d'erreur attaché à un champ */
.field__error {
  margin: 0.1rem 0 0;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--wine);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--wine);
  background: var(--wine-wash);
}

.consent-wrap { margin-bottom: var(--s-5); }
.consent-wrap .consent { margin-bottom: 0.35rem; }
.consent label a { color: var(--wine); }

.form__reassure {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--ink-3);
  font-style: italic;
}

.consent {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  margin-bottom: var(--s-5);
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.consent input {
  appearance: none;
  flex: none;
  width: 1.15rem; height: 1.15rem;
  margin-top: 0.2rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--ivory);
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.consent input:checked {
  background: var(--wine) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 0.9rem no-repeat;
  border-color: var(--wine);
}
.consent label { cursor: pointer; }

.form__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}
.antispam { max-width: 17rem; }

/* Messages */
.notice {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-6);
  font-size: var(--t-sm);
  background: var(--ivory);
}
.notice strong { display: block; margin-bottom: 0.2rem; font-size: var(--t-base); }
/* Le focus programmatique posé sur l'encart au retour du serveur ne doit pas
   dessiner de contour : c'est un déplacement de lecture, pas une navigation. */
.notice:focus { outline: none; }
.notice--ok   { border-color: var(--leaf);  background: var(--leaf-wash); }
.notice--warn { border-color: var(--ochre); background: var(--ochre-wash); }
.notice--bad  { border-color: var(--wine-line); background: var(--wine-wash); }

/* -------------------------------------------------------------------------
   16. Pied de page
   ---------------------------------------------------------------------- */
.siteend {
  background: var(--wine-deep);
  color: color-mix(in oklab, var(--ivory) 80%, var(--wine-deep));
  padding-block: clamp(3rem, 7vw, 5rem) var(--s-6);
  font-size: var(--t-sm);
}
/* auto-fit ne peut pas cohabiter avec une piste en fr : pistes explicites. */
.siteend__grid {
  display: grid;
  grid-template-columns: minmax(13rem, 1.5fr) minmax(11rem, 1fr) minmax(11rem, 1fr);
  gap: var(--s-6) var(--s-6);
  padding-bottom: var(--s-7);
}
@media (max-width: 720px) {
  .siteend__grid { grid-template-columns: 1fr; }
}
.siteend__brand {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
/* Sur le bordeaux profond du pied de page, le logo a besoin d'une plaque
   claire : son cadre et le blanc du bloc « SAGE » disparaîtraient sinon. */
.siteend__mark {
  width: auto; height: 4.6rem;
  flex: none;
  padding: 0.5rem;
  border-radius: var(--radius);
  background: var(--white);
}
.siteend__tag {
  margin: 0;
  font-size: var(--t-md);
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ivory);
}

.siteend__title {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--ivory) 60%, var(--wine-deep));
  margin-bottom: var(--s-4);
}
.siteend__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
/* Le soulignement passe par text-decoration et non par une bordure : posé sur
   la ligne de base, il ne s'éloigne pas du texte quand la zone cliquable
   grandit. */
.siteend__list a {
  display: inline-block;
  padding-block: 0.2rem;
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.2em;
  transition: color 0.3s var(--ease), text-decoration-color 0.3s var(--ease);
}
.siteend__list a:hover {
  color: var(--ivory);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--ivory) 50%, transparent);
}
.siteend__list address { font-style: normal; line-height: 1.5; }

/* Doigt plutôt que souris : les liens du pied de page atteignent 44 px de
   haut, les 21 px d'origine étaient intouchables sans zoomer. */
@media (pointer: coarse) {
  /* 14 px sur 1,65 d'interligne = 23 px : il faut 0,7 rem de part et d'autre
     pour franchir les 44 px. Les mentions légales sont en 12 px, d'où 0,8. */
  .siteend__list { gap: 0; }
  .siteend__list a { padding-block: 0.7rem; }
  .siteend__legal a { display: inline-block; padding-block: 0.8rem; }
}

.siteend__nda {
  margin: 0;
  padding-top: var(--s-5);
  border-top: 1px solid color-mix(in oklab, var(--ivory) 18%, transparent);
  font-size: var(--t-xs);
  line-height: 1.6;
  max-width: 78ch;
  color: color-mix(in oklab, var(--ivory) 55%, var(--wine-deep));
}

.siteend__legal a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--ivory) 30%, transparent);
  text-underline-offset: 0.2em;
  transition: color 0.3s var(--ease), text-decoration-color 0.3s var(--ease);
}
.siteend__legal a:hover { color: var(--ivory); text-decoration-color: var(--ivory); }

.siteend__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-5);
  margin: 0;
  padding-top: var(--s-4);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: color-mix(in oklab, var(--ivory) 62%, var(--wine-deep));
}

/* -------------------------------------------------------------------------
   17. Apparition au défilement
   ---------------------------------------------------------------------- */
/* Masquer avant apparition ne vaut QUE si le JavaScript tourne : sans lui,
   personne ne remettrait l'opacité à 1 et la page serait vide. La classe .js
   est posée en tête de document. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js [data-reveal].is-shown { opacity: 1; transform: none; }
.js [data-reveal][style*="--delay"] { transition-delay: var(--delay); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  /* Même spécificité que les règles .js ci-dessus, sinon elles l'emporteraient
     et le contenu resterait masqué. */
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .meter__fill { transform: scaleX(1); }
}

@media print {
  .masthead, .nav, .callout, .fiche__cta, .skip-link { display: none; }
  body { background: #fff; color: #000; }
}