/* =====================================================================
   Maison Daguet, feuille de style unique
   Écrite à la main. Aucune dépendance, aucun appel externe.
   Le clair domine : fond craie, une seule bande ardoise par page,
   grille asymétrique, filets de 1 px, angles droits, le vert en petit.
   Mouvement et matière d'après le skill apple-design : en-tête collant
   en verre craie, menus qui entrent et sortent par le même chemin,
   appui visible, interlignage et approche réglés selon la taille.
   Sommaire
     1. Polices
     2. Variables
     3. Réinitialisation et base
     4. Typographie
     5. Gabarit et sections
     6. Lien d'évitement
     7. Boutons et liens
     8. Barre d'annonce, en-tête, sous-menu et panneau de menu
     9. Pied de page et appel final
    10. Heros : éditorial, photo, texte
    11. Rangées : étapes, rangées de l'accueil, coordonnées
    12. Bandes ardoise : biais, suivi, test
    13. Manifeste, duo, lettre, repères
    14. Offres et encart sur mesure
    14 bis. Vitrine des sites livrés
    15. Questions en accordéon
    16. Statistique et anneau
    17. Traits à la main
    18. Accessibilité et mouvement
   ===================================================================== */

/* ------------------------------------------------------------------ 1. Polices */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-500.woff2") format("woff2");
}
/* l'italique fine du mot mis en valeur dans la barre d'annonce. Sans elle, font-synthesis: none
   laisserait le mot droit au lieu de l'incliner. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-300-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/libre-franklin-500.woff2") format("woff2");
}

/* ------------------------------------------------------------------ 2. Variables */
:root {
  /* couleurs */
  --craie: #F2F0EA;          /* fond de page, fond par défaut des sections */
  --lin: #EDEAE3;            /* fond alterné, encarts, texte des boutons pleins */
  --ardoise: #15181A;        /* texte, bande sombre, barre d'annonce */
  --vert-vif: #2C5C4A;       /* accent : boutons, accroches, FAQ, noms d'offres, traits */
  --vert-bouteille: #1E4034; /* bouton plein de la carte d'offre mise en avant */
  --menthe: #A8D5BA;         /* accent de Maison Daguet plus, mot mis en valeur de la barre d'annonce */
  --gris-clair: #DCDCDC;     /* titres et filets sur ardoise */
  --encre: #15181A;
  --gris-texte: #4A5154;
  --gris-discret: #8B9295;
  --filet: rgba(128, 128, 128, 0.35);        /* filets des cartes et listes sur clair */
  --filet-sombre: rgba(220, 220, 220, 0.9);  /* filets sur ardoise */

  /* polices */
  --serif: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --sans: "Libre Franklin", "Work Sans", Arial, sans-serif;

  /* échelle typographique, relevée à 1536 px de large */
  --fs-h1: clamp(2.5rem, 4.64vw, 4.5rem);        /* 71 px */
  --fs-h2: clamp(2rem, 3.2vw, 3.0625rem);        /* 49 px */
  --fs-h3: clamp(1.625rem, 2.47vw, 2.375rem);    /* 38 px */
  --fs-h4: clamp(1.25rem, 1.76vw, 1.6875rem);    /* 27 px */
  --fs-grand: clamp(1.125rem, 1.5vw, 1.4375rem); /* 23 px, paragraphes de lecture */
  --fs-texte: 1rem;                              /* 16 px */
  --fs-carte: 0.9375rem;                         /* 15 px, listes des cartes d'offre */
  --fs-petit: 0.75rem;                           /* 12 px, libellés en capitales */

  /* approche : resserrée en grand, neutre en texte courant, ouverte en petit */
  --ap-display: -0.025em;    /* h1, montants des offres */
  --ap-titre: -0.02em;       /* h2, h3 et grandes lignes en serif */
  --ap-sous-titre: -0.01em;  /* h4 et serif de 27 px */
  --ap-petit: 0.01em;        /* 14 px et moins, hors capitales */

  /* mouvement : un ressort sans rebond (amortissement 1, réponse 0,4 s), une sortie franche */
  --courbe-sortie: cubic-bezier(0.23, 1, 0.32, 1);
  --courbe-ressort: cubic-bezier(0.32, 0.72, 0, 1);   /* repli, voir @supports plus bas */
  --duree-appui: 80ms;
  --duree-courte: 160ms;
  --duree-panneau: 450ms;

  /* en-tête collant : sa hauteur fixe sert aussi à glisser le hero dessous */
  --hauteur-entete: 5rem;

  /* gabarit */
  --marge: clamp(1.25rem, 4vw, 3.875rem);        /* 61 px à 1536 */
  --section: clamp(4rem, 6.6vw, 6.5rem);         /* 101 px à 1536 */
  --largeur: 1536px;
  --gouttiere: clamp(0.75rem, 1.5vw, 1.5rem);

  /* couleurs de contexte, inversées dans la bande ardoise */
  --titre: var(--ardoise);
  --trace: var(--filet);
  --trait: var(--vert-vif);
}
/* le ressort échantillonné, là où linear() existe */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --courbe-ressort: linear(0, 0.02 3%, 0.069 6%, 0.135 9%, 0.21 12%, 0.314 16%, 0.416 20%, 0.531 25%, 0.63 30%, 0.727 36%, 0.812 43%, 0.874 50%, 0.931 60%, 0.969 72%, 0.99 85%, 1);
  }
}
@media (max-width: 900px) {
  :root { --hauteur-entete: 4rem; }
}

/* ------------------------------------------------------------------ 3. Réinitialisation et base */
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }

html {
  -webkit-text-size-adjust: 100%;
  font-synthesis: none;
  font-kerning: normal;
  /* les ancres s'arrêtent sous l'en-tête collant, pas dessous */
  scroll-padding-top: calc(var(--hauteur-entete) + 1rem);
  /* l'appui est dessiné par la feuille : ni flash gris, ni attente du double-tap */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--fs-texte);
  line-height: 1.6;
  color: var(--ardoise);
  background: var(--craie);
}

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

a { color: inherit; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:where(ul, ol, dl, dd, figure) { margin: 0; padding: 0; }
:where(ul, ol)[role="list"] { list-style: none; }

b, strong { font-weight: inherit; }

/* ------------------------------------------------------------------ 4. Typographie */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: var(--ap-titre);
  color: var(--titre);
  text-wrap: balance;
}
/* plus le corps grandit, plus l'interligne et l'approche se resserrent */
h1 { font-size: var(--fs-h1); line-height: 1.04; letter-spacing: var(--ap-display); }
h2 { font-size: var(--fs-h2); line-height: 1.08; }
h3 { font-size: var(--fs-h3); line-height: 1.15; }
h4 { font-size: var(--fs-h4); line-height: 1.2; letter-spacing: var(--ap-sous-titre); }

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}
p:last-child { margin-bottom: 0; }

/* paragraphe de lecture */
.grand {
  font-size: var(--fs-grand);
  line-height: 1.45;
}

/* libellé en capitales */
.libelle {
  font-size: var(--fs-petit);
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.7;
}

.vert { color: var(--vert-vif); }
.secondaire { color: var(--gris-texte); }

.telephone {
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}

.sr-seul {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ 5. Gabarit et sections */
.wrap {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--marge);
}

.grille {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gouttiere);
}

.section { padding-block: var(--section); }
.section--lin { background: var(--lin); }
.section--ardoise,
.section--biais {
  color: var(--lin);
  --titre: var(--gris-clair);
  --trace: var(--gris-clair);
  --trait: var(--lin);
}
.section--ardoise { background: var(--ardoise); }

/* motifs de colonnes : libellé / contenu, titre / contenu */
.col-libelle { grid-column: 1 / span 3; }
.col-contenu { grid-column: 4 / -1; }
.col-titre { grid-column: 1 / span 5; }
.col-droite { grid-column: 7 / -1; }
.col-droite--courte { grid-column: 7 / span 5; }
.col-titre h2 + p { margin-top: 1.25rem; }
.section--note { padding-block: clamp(2rem, 4vw, 3rem); }

@media (max-width: 900px) {
  .grille { grid-template-columns: minmax(0, 1fr); }
  .col-libelle, .col-contenu, .col-titre, .col-droite, .col-droite--courte { grid-column: 1 / -1; }
  .col-libelle, .col-titre { margin-bottom: 1.75rem; }
}

/* emplacement photo réservé */
.emplacement-photo {
  aspect-ratio: 375 / 612;
  background: var(--lin);
  border: 1px solid var(--filet);
}
.emplacement-photo--4-5 { aspect-ratio: 4 / 5; }
.section--lin .emplacement-photo { background: var(--craie); }

/* ------------------------------------------------------------------ 6. Lien d'évitement */
.skip {
  position: absolute;
  left: var(--marge);
  top: -100px;
  z-index: 100;
  background: var(--craie);
  color: var(--ardoise);
  padding: 0.75rem 1rem;
  text-decoration: none;
}
.skip:focus { top: 0.5rem; }

/* ------------------------------------------------------------------ 7. Boutons et liens */
.bouton {
  display: inline-block;
  font: 500 1rem/1.2 var(--sans);
  padding: 1.2em 2em;            /* 19 px 32 px */
  text-align: center;
  text-decoration: none;
  transition:
    background-color 150ms ease, color 150ms ease, opacity 150ms ease,
    transform var(--duree-courte) var(--courbe-sortie);
}
.bouton--principal { background: var(--vert-vif); color: var(--lin); }
.bouton--contour { border: 1px solid currentColor; color: inherit; padding: calc(1.2em - 1px) calc(2em - 1px); }
.bouton--grand { min-width: 283px; padding-block: 1.7em; }   /* bouton du hero : 283 x 72 px */
.bouton--large { display: block; width: 100%; }

/* l'appui répond dès la pression, avant le relâchement : le bouton s'enfonce
   vite et revient plus lentement. Les boutons larges s'enfoncent moins. */
.bouton:active {
  transform: scale(0.97);
  transition-duration: 150ms, 150ms, 150ms, var(--duree-appui);
}
.bouton--large:active { transform: scale(0.985); }

/* lien de texte */
.lien {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-decoration-thickness 150ms ease, opacity 150ms ease;
}

/* liens et bascules : l'appui pâlit tout de suite */
:is(.lien, .nav-bureau a, .bascule-services, .actions-mobiles a, .actions-mobiles button,
    .panneau-menu a, .site-footer a, .encart__lignes a, .coordonnee__valeur a, .faq__item summary):active {
  opacity: 0.6;
  transition-duration: 0s;
}

/* survols : seulement avec un vrai pointeur, pour qu'ils ne restent pas collés au doigt */
@media (hover: hover) {
  .bouton--principal:hover { background: var(--ardoise); color: var(--lin); }
  .section--ardoise .bouton--principal:hover,
  .section--biais .bouton--principal:hover { background: var(--lin); color: var(--ardoise); }
  .bouton--contour:hover { opacity: 0.65; }
  .lien:hover { text-decoration-thickness: 2px; }
}

.liens {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  margin-top: 1.75rem;
}

/* ------------------------------------------------------------------ 8. Barre d'annonce, en-tête, sous-menu et panneau de menu */
/* texte, lien et couleurs viennent de contenu/banniere.json (Pages CMS) : outils/construire.mjs
   pose les trois --annonce-* en style sur la barre. Les replis donnent le rendu par défaut. */
.annonce {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  padding: 0.6rem var(--marge);
  background: var(--annonce-fond, var(--ardoise));
  color: var(--annonce-texte, var(--lin));
  font-size: 0.875rem;
  line-height: 1.4;
  letter-spacing: var(--ap-petit);
  text-align: center;
  text-wrap: balance;  /* sur deux lignes en mobile : deux lignes égales, la marque d'un seul tenant */
  text-decoration: none;
}
/* le mot entre astérisques dans le CMS : serif italique fine, un cran plus grand
   pour rattraper le petit œil du Cormorant, sans hausser la ligne */
.annonce__accent {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.25em;
  line-height: 1;
  letter-spacing: 0;
  color: var(--annonce-accent, var(--menthe));
}
@media (hover: hover) {
  a.annonce:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
}

/* collant, en verre craie : le contenu défile dessous, flouté. Il reste dans le flux,
   sous la barre d'annonce, et main remonte de sa hauteur : le hero commence derrière lui
   et garde son dégagement d'origine. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
}
main { margin-top: calc(-1 * var(--hauteur-entete)); }

/* la matière vit sur un pseudo-élément : un backdrop-filter posé sur l'en-tête lui-même
   en ferait le bloc conteneur du panneau de menu, qui est en position fixe */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(242 240 234 / 0.86);
  background: color-mix(in srgb, var(--craie) 86%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
          backdrop-filter: blur(24px) saturate(160%);
}
/* bord de défilement : un flou qui s'efface vers le bas plutôt qu'un filet,
   seulement quand du contenu passe dessous. Presque sans teinte, pour ne pas
   faire de halo sur la bande ardoise. */
.site-header::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 1.25rem;
  background: linear-gradient(rgb(242 240 234 / 0.2), rgb(242 240 234 / 0));
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(#000, transparent);
          mask-image: linear-gradient(#000, transparent);
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.site-header.est-colle::after { opacity: 1; }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.5rem);
  height: var(--hauteur-entete);
}

.logo {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ardoise);
  text-decoration: none;
  white-space: nowrap;
}

.nav-bureau { margin-right: auto; }
.nav-bureau > ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.9vw, 2rem);
}
.nav-bureau a,
.bascule-services {
  font-size: 1rem;
  line-height: 1.2;
  color: var(--ardoise);
  text-decoration: none;
  white-space: nowrap;
}
.nav-bureau a[aria-current="page"],
.bascule-services.est-courant {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
@media (hover: hover) {
  .nav-bureau a:hover,
  .bascule-services:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
  }
}

/* chevron : deux bordures à 45° */
.bascule-services::after {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-left: 0.5em;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-0.2em) rotate(45deg);
  transition: transform 200ms var(--courbe-sortie);
}
.bascule-services[aria-expanded="true"]::after { transform: translateY(0.05em) rotate(-135deg); }

.nav-services { position: relative; }
.sous-menu {
  list-style: none;
  position: absolute;
  top: calc(100% + 0.9rem);
  left: -1.25rem;
  min-width: 16rem;
  padding: 0.5rem 0;
  background: var(--craie);
  border: 1px solid var(--filet);
  /* il flotte : une ombre douce le détache, sans le gonfler */
  box-shadow: 0 10px 30px -12px rgb(21 24 26 / 0.25);
  /* fermé, il reste en place mais invisible et hors du focus, pour s'animer
     dans les deux sens. Il naît du mot « Services » et y retourne. */
  transform-origin: 2.5rem 0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-0.25rem) scale(0.96);
  transition:
    opacity 150ms ease,
    transform 150ms var(--courbe-sortie),
    visibility 0s linear 150ms;
}
.sous-menu.est-ouvert {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition:
    opacity 200ms ease,
    transform 200ms var(--courbe-sortie),
    visibility 0s;
}
.sous-menu[hidden] { display: none; }
.sous-menu a { display: block; padding: 0.7rem 1.25rem; }

/* bouton de l'en-tête : même dessin, à la mesure d'une barre (46 px) */
.entete-rdv { flex: 0 0 auto; padding: 0.9em 1.5em; }

.actions-mobiles {
  display: none;
  align-items: center;
  gap: 1.25rem;
  margin-left: auto;
}
.actions-mobiles a,
.actions-mobiles button {
  padding-block: 0.75rem;
  color: var(--ardoise);
  text-decoration: none;
}

/* panneau de menu : une feuille craie pleine qui tombe de sous l'en-tête, son déclencheur.
   --bas-entete est mesuré à l'ouverture, la barre d'annonce pouvant être encore visible.
   Elle entre et sort par le même chemin, sur un ressort sans rebond ; une transition
   repart de la position affichée, on peut donc la rappeler en plein vol. */
.panneau-menu {
  position: fixed;
  top: var(--bas-entete, var(--hauteur-entete));
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: var(--craie);
  color: var(--ardoise);
  padding: 2rem var(--marge) 2.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-0.75rem);
  transition:
    opacity 250ms ease,
    transform var(--duree-panneau) var(--courbe-ressort),
    visibility 0s linear var(--duree-panneau);
}
.panneau-menu.est-ouvert {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition:
    opacity 150ms var(--courbe-sortie),
    transform var(--duree-panneau) var(--courbe-ressort),
    visibility 0s;
}
.panneau-menu[hidden] { display: none; }
.panneau-menu ul { list-style: none; }
.panneau-menu li + li { margin-top: 0.6rem; }
.panneau-menu nav a {
  font-family: var(--serif);
  font-size: 1.75rem;
  line-height: 1.2;
  letter-spacing: var(--ap-sous-titre);
  text-decoration: none;
}
.panneau-menu nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
.panneau-menu .libelle { margin: 1.75rem 0 0.75rem; }
.panneau-menu__groupe { padding-bottom: 1.1rem; }
.panneau-menu .bouton { display: block; margin-top: 2.25rem; }
.panneau-menu__tel {
  display: inline-block;
  margin-top: 1.25rem;
  padding-block: 0.5rem;
  text-decoration: none;
}

/* menu ouvert : la page ne défile plus derrière la feuille */
body.menu-ouvert { overflow: hidden; }

@media (max-width: 1180px) {
  .site-header__inner { gap: 1rem; }
  .nav-bureau > ul { gap: 0.85rem; }
  .nav-bureau a, .bascule-services { font-size: 0.9375rem; }
  .entete-rdv { padding-inline: 1.25em; }
}
@media (max-width: 900px) {
  .nav-bureau, .entete-rdv { display: none; }
  .actions-mobiles { display: flex; }
}
@media (min-width: 900.1px) {
  .panneau-menu { display: none; }
}

/* ------------------------------------------------------------------ 9. Pied de page et appel final */
.site-footer { padding-block: var(--section) 2.5rem; }
.site-footer__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--filet);
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.2vw, 3.0625rem);
  line-height: 1.1;
  letter-spacing: var(--ap-titre);
}
.site-footer__tete p { margin: 0; }
.site-footer__tete a {
  text-decoration: none;
  overflow-wrap: anywhere;
}
@media (hover: hover) {
  .site-footer__tete a:hover,
  .site-footer nav a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
  }
}
.site-footer__colonnes {
  padding-top: clamp(2rem, 4vw, 3.5rem);
  row-gap: 2.25rem;
}
.site-footer nav { grid-column: span 4; }
.site-footer h2 {
  margin-bottom: 1rem;
  font-family: var(--sans);
  color: inherit;
}
.site-footer nav ul { list-style: none; }
.site-footer nav li { padding-block: 0.3rem; }
.site-footer nav a { text-decoration: none; }
.site-footer__bas {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  font-size: 0.875rem;
  letter-spacing: var(--ap-petit);
  color: var(--gris-texte);
}
@media (max-width: 900px) {
  .site-footer nav { grid-column: 1 / -1; }
  .site-footer nav li { padding-block: 0.55rem; }
}

/* appel final, sur lin */
.appel-final__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

/* ------------------------------------------------------------------ 10. Heros : éditorial, photo, texte */
/* l'en-tête est posé dessus : chaque hero prévoit son dégagement en haut */
.section--hero-edito,
.section--hero-photo,
.section--hero-texte { padding-top: 9.75rem; }

/* éditorial : haut, presque vide, contenu poussé aux extrémités */
.section--hero-edito {
  display: flex;
  min-height: min(86vh, 936px);
  padding-bottom: 50px;
}
.hero-edito {
  align-content: space-between;
  row-gap: 3rem;
}
.hero-edito__signe {
  grid-area: 1 / 1 / 2 / span 7;
  font-family: var(--serif);
  font-size: var(--fs-h1);
  line-height: 1;
}
.hero-edito__accroche {
  grid-area: 1 / 9 / 2 / -1;
  justify-self: end;
  width: 100%;
  max-width: 283px;
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-h4);
  line-height: 1.2;
  letter-spacing: var(--ap-sous-titre);
  color: var(--vert-vif);
  text-wrap: balance;
}
.hero-edito h1 {
  grid-area: 2 / 1 / 3 / span 7;
  align-self: end;
}
.hero-edito h1 > span { display: block; }
.hero-edito .bouton {
  grid-area: 2 / 9 / 3 / -1;
  align-self: end;
  justify-self: end;
}
/* compact : pages légales, h1 seul */
.section--hero-compact {
  min-height: 0;
  padding-bottom: 0;
}
.section--hero-compact .hero-edito h1 { grid-row: 1; }

/* photo : texte à gauche, portrait à droite */
.section--hero-photo { padding-bottom: var(--section); }
.hero-photo { align-items: center; }
.hero-photo__texte { grid-column: 2 / span 5; }
.hero-photo__texte .bouton { margin-top: clamp(2rem, 3.5vw, 3rem); }
.hero-photo__note {
  margin-top: 1rem;
  color: var(--vert-vif);
}
.hero-photo__image { grid-column: 8 / span 4; }

/* texte : deux colonnes centrées en hauteur */
.section--hero-texte {
  display: flex;
  min-height: min(70vh, 720px);
  padding-bottom: var(--section);
}
.hero-texte { align-items: center; }
.hero-texte .bouton { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

@media (max-width: 900px) {
  .section--hero-edito, .section--hero-photo, .section--hero-texte { padding-top: 6.5rem; }
  .section--hero-edito { min-height: 0; padding-bottom: 2.5rem; }
  .hero-edito { row-gap: 1.5rem; }
  .hero-edito > * { grid-area: auto; }
  .hero-edito h1 { grid-area: auto; }
  .hero-edito__accroche { justify-self: start; max-width: 22rem; }
  .hero-edito .bouton { grid-area: auto; justify-self: stretch; min-width: 0; margin-top: 0.5rem; }
  .section--hero-compact .hero-edito h1 { grid-row: auto; }
  .hero-photo__texte, .hero-photo__image { grid-column: 1 / -1; }
  .hero-photo__image { margin-top: 2.5rem; }
  .hero-photo__image .emplacement-photo { aspect-ratio: 4 / 5; }
  .section--hero-texte { min-height: 0; }
}

/* ------------------------------------------------------------------ 11. Rangées : étapes, rangées de l'accueil, coordonnées */
/* une rangée : titre à gauche, texte dans la moitié droite, filet entre deux */
.rangees { list-style: none; }
.rangee {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(50% - var(--gouttiere) / 2);
  column-gap: var(--gouttiere);
  align-items: start;
  padding-block: 1.875rem;
}
.rangee + .rangee,
.rangees--filet .rangee { border-top: 1px solid var(--trace); }
.rangee__titre {
  font-family: var(--serif);
  font-size: var(--fs-h4);
  line-height: 1.2;
  letter-spacing: var(--ap-sous-titre);
  color: var(--titre);
  padding-right: 1.5rem;
}
.rangee__texte {
  margin: 0;
  font-size: var(--fs-grand);
  line-height: 1.5;
}
.rangee__texte p { margin: 0; }
.rangee__texte p + p { margin-top: 0.6em; }

/* numéro dans sa colonne de 48 px, chiffres elzéviriens du Cormorant */
.rangees--numerotees { counter-reset: etape; }
.rangees--numerotees > .rangee {
  counter-increment: etape;
  grid-template-columns: 48px minmax(0, 1fr) calc(50% - var(--gouttiere) / 2);
}
.rangees--numerotees > .rangee::before {
  content: counter(etape);
  font-family: var(--serif);
  font-size: var(--fs-h4);
  line-height: 1.2;
  text-align: right;
  color: var(--titre);
}

/* le seul titre centré du site */
.bande-etapes__titre {
  text-align: center;
  margin-bottom: 3.75rem;
}
.bande-etapes__titre:has(+ .bande-etapes__note) { margin-bottom: 1.25rem; }
.bande-etapes__note {
  max-width: 60ch;
  margin: 0 auto 3.75rem;
  text-align: center;
  color: var(--titre);
  opacity: 0.7;
}

/* rangées de l'accueil et des services : nom, phrase, texte, lien */
.rangees--grandes { margin-top: clamp(2.5rem, 5vw, 4rem); }
.rangees--grandes .rangee { padding-block: clamp(2rem, 4vw, 3.5rem); }
.rangee__nom {
  font-size: var(--fs-h3);
  padding-right: 1.5rem;
}
.rangee__phrase {
  margin: 0 0 0.75em;
  font-family: var(--serif);
  font-size: var(--fs-h4);
  line-height: 1.2;
  letter-spacing: var(--ap-sous-titre);
  color: var(--vert-vif);
}
.rangee__lien { display: inline-block; margin-top: 1.25rem; }
.rangee__lien + .rangee__lien { margin-left: 1.75rem; }

/* coordonnées : le moyen à gauche, la valeur en grand à droite */
.coordonnee__valeur {
  font-family: var(--serif);
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: var(--ap-titre);
  overflow-wrap: anywhere;
}
.coordonnee__valeur a:not(.lien) { text-decoration: none; }
@media (hover: hover) {
  .coordonnee__valeur a:not(.lien):hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
  }
}
.coordonnee__precision { margin: 0.5rem 0 0; }

@media (max-width: 900px) {
  .rangee { grid-template-columns: minmax(0, 1fr); row-gap: 0.75rem; padding-block: 1.5rem; }
  .rangees--numerotees > .rangee { grid-template-columns: auto minmax(0, 1fr); column-gap: 0.9rem; }
  .rangees--numerotees > .rangee::before { text-align: left; min-width: 1ch; }
  .rangees--numerotees .rangee__texte { grid-column: 2; }
  .bande-etapes__titre, .bande-etapes__note { margin-bottom: 2rem; }
  .bande-etapes__titre:has(+ .bande-etapes__note) { margin-bottom: 1rem; }
}

/* ------------------------------------------------------------------ 12. Bandes ardoise : biais, suivi, test */
/* bords coupés en biais, comme une feuille posée de travers */
.section--biais { position: relative; background: var(--craie); padding-block: calc(var(--section) + 4vw); }
.section--biais::before {
  content: ""; position: absolute; inset: 0; background: var(--ardoise);
  clip-path: polygon(0 2.8vw, 25% 0, 100% 1vw, 100% calc(100% - 0.5vw), 0 calc(100% - 3.6vw));
}
.section--biais > .wrap { position: relative; }
/* quand la section suivante est sur lin, le bas de la feuille repose sur du lin */
.section--biais-lin { background: linear-gradient(var(--craie) 50%, var(--lin) 50%); }

.biais__texte {
  font-family: var(--serif);
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: var(--ap-titre);
}

/* le suivi : tâche, points de conduite, rythme */
.suivi__liste {
  list-style: none;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.suivi__ligne {
  display: flex;
  align-items: baseline;
  padding-block: 0.6em;
  font-family: var(--serif);
  font-size: var(--fs-h4);
  line-height: 1.3;
  letter-spacing: var(--ap-sous-titre);
}
.suivi__tache { flex: 0 1 auto; color: var(--gris-clair); }
.suivi__points {
  flex: 1 1 3ch;
  min-width: 3ch;
  height: 2px;
  margin-inline: 0.5em;
  align-self: flex-end;
  transform: translateY(-0.3em);
  background-image: radial-gradient(circle at 1px 1px, var(--gris-discret) 1px, transparent 1.2px);
  background-size: 6px 2px;
  background-repeat: repeat-x;
}
.suivi__rythme {
  flex: 0 0 auto;
  text-align: right;
  color: var(--lin);
}
.suivi__notes {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  color: var(--gris-clair);
}
.suivi__notes p { margin-bottom: 0.25em; }
@media (max-width: 640px) {
  .suivi__ligne {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15em;
    padding-block: 0.85em;
  }
  .suivi__ligne + .suivi__ligne { border-top: 1px solid rgba(220, 220, 220, 0.25); }
  .suivi__points { display: none; }
  .suivi__rythme { text-align: left; }
}

/* grandes lignes séparées par des filets */
.lignes { list-style: none; }
.lignes > * {
  margin: 0;
  padding-block: 0.55em;
  font-family: var(--serif);
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: var(--ap-titre);
}
.lignes > * + * { border-top: 1px solid var(--trace); }
.grand + .lignes { margin-top: 1.5rem; }

/* ------------------------------------------------------------------ 13. Manifeste, duo, lettre, repères */
.manifeste__libelle {
  font: 500 var(--fs-texte)/1.6 var(--sans);
  letter-spacing: 0;
  color: var(--vert-vif);
}
.manifeste__texte p {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: var(--ap-titre);
  text-wrap: balance;
}
.manifeste__texte p + p { margin-top: 0.7em; }

/* duo : titre à gauche, lecture à droite */
.section--duo .col-droite > p {
  font-size: var(--fs-grand);
  line-height: 1.5;
}
.section--duo:has(+ .section--duo) { padding-bottom: calc(var(--section) / 2); }
.section--duo + .section--duo { padding-top: 0; }
.section--duo + .section--duo > .wrap::before {
  content: "";
  grid-column: 1 / -1;
  border-top: 1px solid var(--filet);
  margin-bottom: calc(var(--section) / 2);
}

/* liste à filets, sans puce ni pictogramme */
.liste { list-style: none; }
.liste li {
  padding-block: 0.7em;
  border-top: 1px solid var(--trace);
  font-size: var(--fs-grand);
  line-height: 1.5;
}
.liste li:last-child { border-bottom: 1px solid var(--trace); }
p + .liste { margin-top: 1.5rem; }

/* lettre à la première personne */
.lettre__photo { grid-column: 1 / span 4; }
.lettre__texte { grid-column: 6 / -1; max-width: 62ch; }
.lettre__texte p {
  font-size: var(--fs-grand);
  line-height: 1.5;
}
.lettre__texte h2 {
  font-size: var(--fs-h3);
  line-height: 1.2;
  margin: 1.6em 0 0.6em;
}
.signature {
  display: block;
  margin-top: 1.25em;
  font-family: var(--serif);
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: var(--ap-titre);
  color: var(--vert-vif);
}
@media (max-width: 900px) {
  .lettre__photo, .lettre__texte { grid-column: 1 / -1; }
  .lettre__photo { max-width: 20rem; margin-bottom: 2.5rem; }
}

/* repères : quatre colonnes à filet, sans cadre ni numéro */
.reperes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5rem var(--gouttiere);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.repere {
  border-top: 1px solid var(--filet);
  padding: 24px 1.5rem 0 0;
}
.repere h3 {
  font-size: 1.625rem;
  color: var(--vert-vif);
  margin-bottom: 0.6rem;
}
@media (max-width: 1100px) { .reperes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .reperes { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }

/* ------------------------------------------------------------------ 14. Offres et encart sur mesure */
.offres {
  align-items: start;
  row-gap: clamp(2rem, 3.5vw, 3rem);
}
.offres__titre, .offres__suite { grid-column: 1 / -1; }

/* carte d'offre : un cadre à filet, sans fond */
.offre {
  grid-column: span 3;
  padding: 2rem 1.75rem;
  border: 1px solid var(--filet);
}
.offres--trois .offre { grid-column: span 4; }
.offre__libelle { margin-bottom: 16px; }
.offre__nom { margin-bottom: 18px; color: var(--vert-vif); }
.offre__prix {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 10px;
  margin-bottom: 18px;
}
.offre__montant {
  font-family: var(--serif);
  font-size: 3.25rem;
  line-height: 1;
  letter-spacing: var(--ap-display);
}
.offre__unite { font-size: 0.875rem; letter-spacing: var(--ap-petit); opacity: 0.7; }
.offre__texte { font-size: 0.96875rem; line-height: 1.6; opacity: 0.75; margin-bottom: 22px; }
.offre__liste { list-style: none; margin-bottom: 26px; border-bottom: 1px solid var(--filet); }
.offre__liste li { font-size: var(--fs-carte); line-height: 1.5; padding: 12px 0; border-top: 1px solid var(--filet); }
.offre__bouton {
  display: block;
  text-align: center;
  padding: 15px 20px;
  font-size: 0.9375rem;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: inherit;
  border: 1px solid currentColor;
  transition: opacity 200ms ease, transform var(--duree-courte) var(--courbe-sortie);
}
@media (hover: hover) {
  .offre__bouton:hover { opacity: 0.65; }
}
/* bouton pleine largeur de la carte : il s'enfonce moins qu'un petit bouton */
.offre__bouton:active {
  transform: scale(0.985);
  transition-duration: 200ms, var(--duree-appui);
}
.offre--pleine .offre__bouton { background: var(--vert-bouteille); border-color: var(--vert-bouteille); color: var(--craie); }

/* encart sur mesure : trois lignes à filets à la place d'un formulaire */
.sur-mesure__titre { color: var(--vert-vif); }
.encart {
  padding: 2rem;
  background: var(--lin);
}
.section--lin .encart { background: var(--craie); }
.encart__lignes { list-style: none; margin-top: 1.25rem; }
.encart__lignes li {
  padding-block: 14px;
  font-family: var(--serif);
  font-size: var(--fs-h4);
  line-height: 1.2;
  letter-spacing: var(--ap-sous-titre);
  overflow-wrap: anywhere;
}
.encart__lignes li + li { border-top: 1px solid var(--filet); }
.encart__lignes li:last-child { padding-bottom: 0; }
.encart__lignes a { text-decoration: none; }
@media (hover: hover) {
  .encart__lignes a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
  }
}
.encart--seul { grid-column: 7 / -1; }

/* avec encart : titres sur la première rangée, cartes et encart sur la seconde */
@media (min-width: 1100.1px) {
  .offres--encart .offres__titre { grid-area: 1 / 1 / 2 / span 5; }
  .offres--encart .offre { grid-row: 2; }
  .offres--encart .sur-mesure__titre { grid-area: 1 / 8 / 2 / -1; align-self: end; }
  .offres--encart .encart { grid-area: 2 / 8 / 3 / -1; }
}
@media (max-width: 1100px) {
  .offre { grid-column: span 6; }
  .offres--encart .sur-mesure__titre { grid-column: 1 / -1; margin-top: 1.5rem; }
  .offres--encart .encart { grid-column: 1 / -1; margin-top: calc(-1 * clamp(2rem, 3.5vw, 3rem) + 1.25rem); }
}
@media (max-width: 900px) {
  .offre, .offres--trois .offre, .encart--seul { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ 14 bis. Vitrine des sites livrés */
/* un sommaire numéroté au-dessus d'une fenêtre de navigateur. Le site choisi se souligne du
   trait à la main, qui se dessine dans le sens de l'écriture. La fenêtre montre d'abord une
   capture : le vrai site ne se charge qu'au clic (site.js, composant 4). */
.vitrine { margin-top: clamp(2.5rem, 4.5vw, 4rem); }
/* .bouton et la fenêtre fixent leur display : hidden doit l'emporter */
.vitrine [hidden] { display: none; }

.vitrine__sommaire {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gouttiere);
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
}
.vitrine__onglet {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: baseline;
  padding-top: 1.1rem;
  border-top: 1px solid var(--filet);
  color: var(--gris-texte);
  text-decoration: none;
  transition: color 150ms ease, border-color 150ms ease, opacity 150ms ease;
}
.vitrine__onglet.est-actif { color: var(--ardoise); border-top-color: var(--ardoise); }
.vitrine__numero {
  font-size: var(--fs-petit);
  letter-spacing: 0.16em;
  font-variant-numeric: lining-nums tabular-nums;
}
/* justify-self : le trait suit la longueur du nom, pas celle de la colonne */
.vitrine__nom {
  justify-self: start;
  font-family: var(--serif);
  font-size: var(--fs-h4);
  line-height: 1.2;
  letter-spacing: var(--ap-sous-titre);
}
.vitrine__lieu {
  grid-column: 2;
  margin-top: 0.35rem;
  font-size: 0.875rem;
  line-height: 1.4;
  letter-spacing: var(--ap-petit);
  color: var(--gris-texte);
}
.vitrine__nom.trait::after {
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--duree-panneau) var(--courbe-sortie);
}
.vitrine__onglet.est-actif .vitrine__nom.trait::after { clip-path: inset(0 0 0 0); }
.vitrine__onglet:active { opacity: 0.6; transition-duration: 0s; }
@media (hover: hover) {
  .vitrine__onglet:not(.est-actif):hover { color: var(--ardoise); }
}

.vitrine__fenetre { border: 1px solid var(--filet); }
.vitrine__barre {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--filet);
  font-size: 0.875rem;
  letter-spacing: var(--ap-petit);
}
.vitrine__adresse {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--gris-texte);
}
.vitrine__ouvrir { white-space: nowrap; }
.vitrine__ouvrir::after { content: "\00a0↗" / ""; }

.vitrine__ecran {
  position: relative;
  height: clamp(26rem, 60vw, 44rem);
  overflow: hidden;
  background: var(--lin);
}
.vitrine__ecran picture { display: block; height: 100%; }
.vitrine__ecran img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: opacity var(--duree-courte) ease;
}
/* d'une capture à l'autre : un fondu court, sans glissement */
.vitrine__ecran.est-en-cours img { opacity: 0; }
.vitrine__ecran iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
/* un voile au bas de la capture, pour que le bouton se lise sur n'importe quel site */
.vitrine__action {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  justify-content: center;
  padding: 5rem 1rem clamp(1.25rem, 3vw, 2rem);
  background: linear-gradient(to bottom, rgb(21 24 26 / 0), rgb(21 24 26 / 0.55));
}
@media (hover: hover) {
  .vitrine__action .bouton--principal:hover { background: var(--lin); color: var(--ardoise); }
}
/* un site sans capture : son nom en grand sur le lin, le bouton dessous, sans voile */
.vitrine__carton {
  position: absolute;
  inset: 0 0 6rem;
  display: grid;
  place-items: center;
  margin: 0;
  padding-inline: 1rem;
  font-family: var(--serif);
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: var(--ap-titre);
  text-align: center;
  color: var(--titre);
}
.vitrine__ecran.est-sans-capture .vitrine__action { background: none; }
@media (hover: hover) {
  .vitrine__ecran.est-sans-capture .vitrine__action .bouton--principal:hover { background: var(--ardoise); color: var(--lin); }
}
.vitrine__note {
  margin-top: 1rem;
  font-size: 0.875rem;
  letter-spacing: var(--ap-petit);
  color: var(--gris-texte);
}

/* en mobile, le sommaire devient une liste : un site par ligne, entre deux filets */
@media (max-width: 700px) {
  .vitrine__sommaire { grid-template-columns: minmax(0, 1fr); margin-bottom: 1.25rem; }
  .vitrine__onglet { padding-block: 0.8rem; }
  .vitrine__sommaire li:last-child .vitrine__onglet { border-bottom: 1px solid var(--filet); }
  .vitrine__nom { font-size: 1.375rem; }
}
/* en mobile, le bouton prend toute la largeur : il couvre net les boutons flottants des sites capturés */
@media (max-width: 600px) {
  .vitrine__ecran { height: 34rem; }
  .vitrine__action .bouton { width: 100%; }
}

/* ------------------------------------------------------------------ 15. Questions en accordéon */
.faq__item { border-top: 1px solid var(--vert-vif); }
.faq__item:last-child { border-bottom: 1px solid var(--vert-vif); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.875rem;
  list-style: none;
  cursor: pointer;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item h3 {
  font-size: clamp(1.25rem, 1.5625vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: var(--ap-sous-titre);
  color: var(--vert-vif);
}
/* le « + » : deux traits de 1 px, 14 px de long */
.faq__plus {
  position: relative;
  flex: 0 0 14px;
  height: 14px;
  color: var(--vert-vif);
}
.faq__plus::before,
.faq__plus::after {
  content: "";
  position: absolute;
  background: currentColor;
}
.faq__plus::before { left: 0; right: 0; top: calc(50% - 0.5px); height: 1px; }
.faq__plus::after {
  top: 0; bottom: 0; left: calc(50% - 0.5px); width: 1px;
  transition: transform 200ms var(--courbe-sortie), opacity 200ms ease;
}
.faq__item[open] .faq__plus::after { transform: rotate(90deg); opacity: 0; }

/* la réponse se déplie au lieu d'apparaître d'un coup, là où le navigateur
   sait animer jusqu'à une hauteur automatique ; ailleurs, elle s'ouvre net */
@supports (interpolate-size: allow-keywords) {
  .faq__item { interpolate-size: allow-keywords; }
  .faq__item::details-content {
    block-size: 0;
    overflow-y: clip;
    transition:
      block-size 300ms var(--courbe-sortie),
      content-visibility 300ms allow-discrete;
  }
  .faq__item[open]::details-content { block-size: auto; }
}
.faq__reponse {
  margin: 0;
  padding: 0 2.5rem 1.875rem 0;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--vert-vif);
}
@media (max-width: 900px) {
  .faq__item summary { padding-block: 1.25rem; }
  .faq__reponse { padding-bottom: 1.25rem; }
}

/* ------------------------------------------------------------------ 16. Statistique et anneau */
.stat { align-items: center; }
.stat__texte { grid-column: 2 / span 5; }
.stat__texte h2 { margin-bottom: 0.6em; }
.stat__figure { grid-column: 7 / span 5; }
.anneau { width: 220px; }
.legende {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  margin-top: 1.75rem;
}
.legende li::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 0.6em;
  background: var(--c);
}
.source {
  margin: 1.5rem 0 0;
  padding: 12px;
  border: 1px solid var(--filet);
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: var(--ap-petit);
  color: var(--gris-texte);
}
@media (max-width: 900px) {
  .stat__texte, .stat__figure { grid-column: 1 / -1; }
  .stat__figure { margin-top: 2.5rem; }
}

/* ------------------------------------------------------------------ 17. Traits à la main */
/* soulignement et cercle dessinés en SVG, posés en masque pour prendre la couleur du contexte */
.trait { position: relative; white-space: nowrap; }
.trait::after {
  content: ""; position: absolute; pointer-events: none;
  background: var(--trait);
  -webkit-mask: var(--forme) center / 100% 100% no-repeat;
          mask: var(--forme) center / 100% 100% no-repeat;
}
.trait--souligne::after {
  left: -0.05em; right: -0.05em; bottom: -0.18em; height: 0.28em;
  --forme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 7 C 40 3, 96 10, 197 4 C 150 8, 84 8, 16 12' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
.trait--cercle::after {
  inset: -0.16em -0.24em -0.14em -0.24em;
  --forme: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'%3E%3Cpath d='M 152 10 C 112 2, 34 5, 11 30 C -5 52, 40 75, 102 74 C 162 73, 199 56, 193 34 C 187 13, 138 5, 90 8 C 68 9, 50 13, 36 20' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ 18. Accessibilité et mouvement */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* mouvement réduit : rien ne glisse, ne grandit ni ne tourne, mais rien ne saute non plus.
   Les menus arrivent en fondu court, l'appui répond en opacité plutôt qu'en échelle. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .panneau-menu,
  .sous-menu {
    transform: none;
    transition: opacity 150ms ease, visibility 0s linear 150ms;
  }
  .panneau-menu.est-ouvert,
  .sous-menu.est-ouvert { transition: opacity 150ms ease, visibility 0s; }
  .bouton:active,
  .offre__bouton:active { transform: none; opacity: 0.8; }
  .bascule-services::after,
  .faq__plus::after,
  .faq__item::details-content,
  .vitrine__nom.trait::after { transition: none; }
}

/* transparence réduite : l'en-tête devient une barre craie pleine */
@media (prefers-reduced-transparency: reduce) {
  .site-header::before {
    background: var(--craie);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
  .site-header::after { display: none; }
}

/* contraste renforcé : surfaces pleines, filets et gris plus francs */
@media (prefers-contrast: more) {
  :root {
    --filet: rgba(21, 24, 26, 0.6);
    --gris-texte: #2E3335;
  }
  .site-header::before {
    background: var(--craie);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    border-bottom: 1px solid var(--ardoise);
  }
  .site-header::after { display: none; }
  .libelle,
  .offre__texte,
  .offre__unite,
  .bande-etapes__note { opacity: 1; }
}