/* =============================================================
   LA ROSERAIE
   ============================================================= */

/* ---------- Fontes ---------- */
@font-face {
  font-family: 'Antarctica';
  src: url('../fonts/antarctica-thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Antarctica';
  src: url('../fonts/antarctica-extralight.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Antarctica';
  src: url('../fonts/antarctica-light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Antarctica';
  src: url('../fonts/antarctica-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Antarctica ExtraCond';
  src: url('../fonts/antarctica-extracondextlt.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Disco Deco';
  src: url('../fonts/discodeco.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Couleurs (définitives, exports Illustrator) */
  --creme: #FEEEE4;
  --creme-claire: #FDF1EA;
  --saumon: #F7D4C6;
  --abricot: #F4BB97;
  --corail: #F2A88F;
  --corail-clair: #EDA995;
  --corail-fonce: #E68D74;
  --brun: #7C4D3D;
  --violet: #6B60C8; /* écart maquette assumé : #766CCC approfondi de 5 % pour le contraste des petits textes */
  --lavande: #C4BAE1;
  --noir: #000000;
  --blanc: #FFFFFF;
  /* Écart maquette assumé : corail foncé assombri pour les petits corps sur crème et saumon (contraste 3,4:1) ; les grands titres gardent --corail-fonce. */
  --corail-texte: #C9653F;

  /* Typo */
  --font-sans: 'Antarctica', 'Helvetica Neue', Arial, sans-serif;
  --font-cond: 'Antarctica ExtraCond', 'Antarctica', sans-serif;
  --font-display: 'Disco Deco', 'Didot', 'Bodoni MT', serif;

  /* Échelle mobile et tablette (écart maquette assumé : corps 17 px, leads 21, tout label display 16 px au moins) */
  --fs-h1: clamp(2.5rem, 6vw, 4.25rem);        /* 40 → 68 */
  --fs-h2: clamp(2.125rem, 4.5vw, 3rem);        /* 34 → 48 */
  --fs-display: clamp(2.5rem, 5.5vw, 4rem);     /* titres Disco Deco */
  --fs-lead: clamp(1.1875rem, 1.6vw, 1.3125rem);/* 19 → 21 */
  --fs-body: 1.0625rem;                         /* 17 */
  --fs-small: 1rem;                             /* 16 */
  --fs-kicker: 0.9375rem; /* 15px (maquette : 12, écart assumé pour la lisibilité) */

  /* Rythme */
  --container: 77.5rem;         /* 1240px */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(4.5rem, 9vw, 7.5rem);
  --radius-card: 1.375rem;      /* 22px */
  --radius-photo: 2.5rem;       /* 40px */

  --transition: 180ms ease;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; } /* les décors photo débordent volontairement des bords : jamais de scroll horizontal */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--brun);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--brun);
  color: var(--blanc);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 0.75rem 0;
}
.skip-link:focus { left: 0; }

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

/* Utilitaires couleur (vagues via currentColor) */
.text-creme { color: var(--creme); }
.text-creme-claire { color: var(--creme-claire); }
.text-saumon { color: var(--saumon); }
.text-abricot { color: var(--abricot); }
.text-corail { color: var(--corail); }
.text-blanc { color: var(--blanc); }

/* ---------- Typographie commune ---------- */
.kicker {
  /* chaque kicker commence par une majuscule, quel que soit le texte saisi */
  font-size: var(--fs-kicker);
  font-weight: 400; /* 200 sur la maquette : trop évanescent aux petits corps (écart assumé) */
  letter-spacing: 0.02em;
  margin-bottom: 1.5rem;
}
.kicker::first-letter { text-transform: uppercase; }
.font-display,
.stat-card__number,
.team-card__nom,
.temoignage__nom,
.actu-extrait__date,
.partenaires__titre,
.circle-cta__label,
.btn--display span,
.btn--display-brown span {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.page-titre {
  font-size: var(--fs-h1);
  font-weight: 100;
  line-height: 1.12;
  color: var(--corail-fonce);
  letter-spacing: 0.005em;
  text-wrap: balance; /* un H1 long (La maison) se coupe en lignes équilibrées ; sans effet sur les titres d'une ligne */
}
/* Sous-titre commun des pages internes, centré sous le H1 (ExtraLight 50, corail foncé comme le H1) */
.page-lead {
  text-align: center;
  font-weight: 200;
  font-size: var(--fs-lead);
  line-height: 1.25;
  color: var(--brun); /* petit corps : le corail foncé du H1 serait illisible */
  max-width: 30em;
  margin-inline: auto;
  margin-bottom: 1.5rem;
}
.page-interne .page-titre:has(+ .page-lead) { margin-bottom: 0.5rem; } /* le sous-titre reste près de son H1 */
@media (min-width: 62.0625rem) {
  .page-lead {
    font-size: max(calc(50 * var(--s)), 1.375rem);
    color: var(--corail-fonce); /* grand corps : même couleur que le H1 */
    margin: max(calc(10 * var(--s)), 0.75rem) auto 0;
    max-width: max(calc(1336 * var(--s)), 34rem);
  }
}

/* ---------- Vagues ----------
   Tracés dans inc/waves-data.php, viewBox 2560 × h. Fond du svg = section au-dessus, remplissage du path = section en dessous. */
.wave {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: -1px; /* évite le liseré de sous-pixel */
}
.wave-from-creme { background: var(--creme); }
.wave-from-creme-claire { background: var(--creme-claire); }
.wave-from-saumon { background: var(--saumon); }
.wave-from-abricot { background: var(--abricot); }
.wave-from-corail { background: var(--corail); }
.wave-from-blanc { background: var(--blanc); }
.wave-to-creme { color: var(--creme); }
.wave-to-creme-claire { color: var(--creme-claire); }
.wave-to-saumon { color: var(--saumon); }
.wave-to-abricot { color: var(--abricot); }
.wave-to-corail { color: var(--corail); }
.wave-to-blanc { color: var(--blanc); }

/* ---------- Pictos ---------- */
.picto {
  display: inline-block;
  width: 1.6em;
  height: 1.6em;
  vertical-align: middle;
}
.picto path { fill: currentColor; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  text-decoration: none;
  text-align: center;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.btn--primary {
  background: var(--brun);
  color: var(--creme);
  font-weight: 300;
  font-size: var(--fs-small);
  padding: 0.75rem 1.7rem;
}
.btn--primary:hover { background: #684035; }
.btn--secondary {
  background: var(--violet); /* maquette : violet plein, lavande réservée au CTA « Tous les articles » */
  color: var(--blanc);
  font-weight: 300;
  font-size: 1rem;
  padding: 0.5rem 1.2rem;
}
.btn--secondary:hover { background: #6257B8; }
.btn--display,
.btn--display-brown {
  padding: 1.5rem 3rem;
  font-size: 1.05rem;
}
.btn--display {
  background: var(--corail);
  color: var(--brun);
}
.btn--display:hover { background: var(--corail-clair); }
.btn--display-brown {
  background: var(--brun);
  color: var(--creme); /* écart maquette assumé : libellé corail foncé illisible sur le brun */
}
.btn--display-brown .btn__picto { color: var(--lavande); }
.btn--display-brown:hover { background: #684035; }
.btn--display span,
.btn--display-brown span {
  font-size: 1.125rem; /* Disco Deco est une fonte très fine : jamais sous 18 px */
  text-decoration: underline;
  text-underline-offset: 0.28em;
  text-decoration-thickness: 1px;
}
.btn__picto {
  width: 1.5em;
  height: 1.5em;
  color: var(--violet);
}

/* Lien flèche */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-weight: 400;
  font-size: 1rem;
}
.arrow-link__disc {
  display: inline-flex;
  flex-shrink: 0; /* reste rond quand le libellé passe sur plusieurs lignes */
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--brun);
  color: var(--creme);
  transition: transform var(--transition);
}
.arrow-link:hover .arrow-link__disc { transform: translateX(3px); }

/* Cercle CTA */
.circle-cta {
  /* Le libellé est centré dans le rond ; la fleur est posée au-dessus, en absolu, et suit le libellé. */
  position: relative;
  display: grid;
  place-items: center;
  --cta-gap: 0.55rem;
  width: clamp(10.5rem, 14vw, 12rem);
  aspect-ratio: 1;
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  padding: 1rem;
  transition: transform var(--transition);
}
.circle-cta:hover { transform: scale(1.04) rotate(-2deg); }
.circle-cta--brown { background: var(--brun); color: var(--creme); }
.circle-cta--violet { background: var(--violet); color: var(--blanc); }

/* Bouton contact flottant : rendu par footer.php sur toutes les pages sauf la home (le cercle du hero joue ce rôle) et la page contact. Mobile seulement ; sur desktop, le cercle de la vague du footer porte le contact. */
.contact-fab { display: none; }
.circle-cta__star {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--noir);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* bas de la fleur = haut du libellé moins le gap : 50 % − demi-hauteur de ligne du libellé − gap */
  bottom: calc(50% + 0.625 * 1.0625rem + var(--cta-gap));
}
.circle-cta__label {
  font-size: 1.0625rem;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-decoration: underline;
  text-underline-offset: 0.28em;
  text-decoration-thickness: 1px;
}

/* =============================================================
   HEADER
   ============================================================= */
.site-header {
  background: var(--abricot);
  position: relative;
  z-index: 20;
  /* 120px (échelle maquette 2560) d'abricot plat entre la nav et la crête de la vague */
  padding-bottom: clamp(1.25rem, 4.6875vw, 7.5rem);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem var(--gutter) 0.5rem;
  max-width: 100rem;
  margin-inline: auto;
}
.site-logo { flex-shrink: 0; }
.site-logo__img { width: min(14rem, calc(100vw - 2 * var(--gutter) - 7.5rem)); height: auto; } /* mobile et tablette : 224 px dès 390, sans jamais toucher les boutons EN et menu */

.site-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 1;
}
.nav-pill {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  background: var(--blanc);
  border-radius: 999px;
  padding: 0.3rem 0.45rem;
  margin: 0;
}
.nav-pill a {
  display: inline-block;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 300;
  font-size: 1.0625rem;
  color: var(--brun);
  transition: background var(--transition);
}
.nav-pill a:hover { background: var(--creme); }
.site-nav__primary .nav-pill a { color: var(--noir); } /* maquette : nav principale en noir, nav secondaire (FAQ, Contact) en brun */
.nav-pill .current-menu-item a,
.nav-pill .current_page_item a {
  background: var(--lavande);
  color: var(--noir);
}

.nav-toggle {
  display: none;
  background: var(--blanc);
  border: 0;
  border-radius: 999px;
  width: 2.75rem;
  height: 2.75rem;
  cursor: pointer;
  position: relative;
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 1.15rem;
  height: 2px;
  background: var(--brun);
  transform: translateX(-50%);
  transition: transform var(--transition), opacity var(--transition), top var(--transition);
}
.nav-toggle__bar { top: 50%; }
.nav-toggle__bar::before { top: -6px; }
.nav-toggle__bar::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
/* Croix du bouton menu : les traits reviennent au centre (top 0) puis pivotent, sinon ils ne se croisent pas en leur milieu. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { top: 0; transform: translateX(-50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { top: 0; transform: translateX(-50%) rotate(-45deg); }

/* Boutons du header mobile : pastille de langue (inc/langues.php) + bouton menu.
   Desktop : la langue vit dans la pill secondaire, le groupe disparaît. */
.site-header__actions { display: none; }
.langue-mobile {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  background: var(--blanc);
  color: var(--brun);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-decoration: none;
}
.langue-mobile:hover { background: var(--creme); }

/* Desktop : logo à gauche, nav principale centrée sur la page, secondaire à droite */
@media (min-width: 62.0625rem) {
  .site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  .site-nav { display: contents; }
  .site-logo { justify-self: start; }
  .site-nav__primary { justify-self: center; grid-column: 2; }
  .site-nav__secondary { justify-self: end; grid-column: 3; }
}

@media (max-width: 62rem) {
  .site-header__actions { display: flex; align-items: center; gap: 0.5rem; }
  .site-nav__secondary .menu-item--langue { display: none; } /* la pastille « EN » du header la remplace */
  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--abricot);
    padding: 0.5rem var(--gutter) 1.5rem;
    box-shadow: 0 18px 30px rgba(124, 77, 61, 0.15);
  }
  .site-nav.est-ouvert { display: flex; }
  /* Menu mobile : cartes blanches, liens pleine largeur centrés, nav secondaire en rangée sous la principale. Le panneau défile s'il est plus haut que l'écran. */
  .site-nav {
    flex-wrap: nowrap; /* sinon, hauteur plafonnée, les deux cartes passaient côte à côte (téléphone à l'horizontale) */
    justify-content: flex-start; /* en colonne, le flex-end desktop poussait le trop-plein vers le haut, hors d'atteinte */
    gap: 0.75rem;
    max-height: calc(100dvh - 8rem); /* hauteur du header mobile : 97 à 123px */
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav-pill {
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    padding: 0.4rem;
    border-radius: var(--radius-card);
  }
  .nav-pill a { display: block; text-align: center; padding: 0.7rem 1rem; font-size: 1.125rem; }
  .nav-pill--secondary { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .nav-pill--secondary li { flex: 1 1 auto; }
}

/* =============================================================
   HOME : HERO
   ============================================================= */
.hero { position: relative; }
.hero__title {
  font-size: var(--fs-h1);
  font-weight: 100;
  line-height: 1.12;
  color: var(--corail-fonce);
  text-align: center;
  max-width: 13em; /* la césure exacte est portée par le retour à la ligne du champ ACF (fenêtre max-width de 0.06em trop fragile aux arrondis de rendu) */
  margin: clamp(0.5rem, 2vw, 1.5rem) auto 0;
}
.hero__wave-intro { margin-top: clamp(1.5rem, 4vw, 3rem); }
.hero__band { background: var(--saumon); }
.hero__body {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--gutter);
  padding: 0 var(--gutter) clamp(1.5rem, 3vw, 2.5rem);
  max-width: 100rem;
  margin-inline: auto;
}
.hero__circle { margin-top: -3rem; } /* le cercle chevauche la vague d'entrée de bande */
.hero__intro { max-width: 38rem; }
.hero__lead {
  font-size: var(--fs-lead);
  font-weight: 200;
  line-height: 1.5;
}
.hero__lead--violet { color: var(--violet); margin-top: 0.35rem; }
.hero__intro .arrow-link { margin-top: 1.5rem; }
.hero__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
/* La forme organique est fournie par l'image elle-même (webp détouré, fond transparent). */
.hero__blob { width: clamp(9rem, 16vw, 14rem); }
.hero__blob-img { width: 100%; height: 100%; object-fit: contain; object-position: top right; }

@media (max-width: 62rem) {
  .hero__body { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 1.75rem; padding-top: 0.5rem; }
  .hero__intro { text-align: left; width: 100%; }
  .hero__side { gap: 1.5rem; }
  .hero__blob { width: 8rem; }

  /* Mobile : le grand cercle « Nous contacter » devient un bouton flottant compact en bas à droite ; .contact-fab (footer.php, autres pages) partage les mêmes règles. */
  .hero__circle,
  .contact-fab {
    display: block;
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 15; /* sous le header (20) : le menu ouvert passe devant */
    margin: 0;
  }
  .hero__circle .circle-cta,
  .contact-fab .circle-cta {
    width: auto;
    aspect-ratio: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.1rem 0.7rem 0.9rem;
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(124, 77, 61, 0.28);
  }
  .hero__circle .circle-cta:hover,
  .contact-fab .circle-cta:hover { transform: none; }
  .hero__circle .circle-cta__star,
  .contact-fab .circle-cta__star { position: static; transform: none; width: 1.25rem; height: 1.25rem; }
  .hero__circle .circle-cta__label,
  .contact-fab .circle-cta__label {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 0.9375rem;
    letter-spacing: 0.01em;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
  }

  /* « Découvrir la maison » : second lien flèche sous « Découvrir votre parcours », libellé Disco Deco */
  .hero__side { width: 100%; max-width: 38rem; align-items: flex-start; margin-top: -0.75rem; }
  .hero__side .btn--display {
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    padding: 0;
    background: transparent;
    color: var(--brun);
  }
  .hero__side .btn--display:hover { background: transparent; }
  .hero__side .btn--display .btn__picto {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0.3rem;
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--brun);
    color: var(--corail);
  }
  .hero__side .btn--display span {
    font-family: var(--font-sans); /* même fonte que le lien flèche du dessus, sur mobile uniquement */
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: 0.01em;
    text-transform: none;
    text-decoration: none;
  }
}
@media (max-width: 48rem) {
  /* Écart maquette assumé (mobile) : la découpe photo verticale prenait tout un écran pour un décor ; retirée sous 768 px */
  .hero__blob { display: none; }
}

/* =============================================================
   HOME : CHIFFRES
   ============================================================= */
.stats { background: var(--saumon); padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.stats .container { position: relative; z-index: 2; }
.stats__wave { margin-top: clamp(-7rem, -9vw, -4rem); } /* la frontière passe à mi-hauteur des cartes, comme sur la maquette */
.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
/* 5 cartes sur 2 colonnes : la dernière prend toute la largeur (pas d'orpheline) */
.stat-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.stat-card {
  background: var(--corail);
  border-radius: var(--radius-card);
  padding: 1.25rem 1.1rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: center;
}
.stat-card__picto {
  align-self: flex-start;
  color: var(--violet);
}
.stat-card__picto .picto { width: 1.9rem; height: 1.9rem; }
.stat-card__number {
  font-size: clamp(2.75rem, 4vw, 3.25rem);
  line-height: 1.05;
  color: var(--brun);
}
.stat-card__label { font-size: 1rem; line-height: 1.4; color: var(--noir); } /* noir sur la maquette (légendes des cartes chiffres) */

/* =============================================================
   HOME : TÉMOIGNAGES
   ============================================================= */
.temoignages { padding-block: calc(var(--section) * 0.6 + 5rem) calc(var(--section) * 0.6); } /* compense le chevauchement des cartes chiffres sur la vague */
/* Mobile / tablette : le berceau (webp détouré) reste un décor qui déborde à gauche, pas une photo pleine largeur */
.temoignages__blob { display: none; } /* mobile / tablette : retiré, il prenait un écran pour un décor */
.temoignages__blob-img { width: 100%; height: auto; }
/* Les décors photo passent toujours SOUS le contenu (cartes, textes) */
.temoignages .container, .galerie .container, .equipe .container, .securite .container, .stats .container, .partenaires .container { position: relative; z-index: 2; }
.temoignages__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.temoignage {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.temoignage__avatar {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  overflow: hidden;
}
.temoignage__avatar img { width: 100%; height: 100%; object-fit: cover; }
.temoignage__texte {
  font-family: var(--font-cond);
  font-weight: 200;
  font-size: 1.25rem; /* ExtraCond ExtraLight : fonte très fine, jamais sous 20 px */
  line-height: 1.45;
}
.temoignage__nom { font-size: 1.25rem; letter-spacing: 0.1em; }
.temoignage--brun { color: var(--brun); }
.temoignage--violet { color: var(--violet); }
.temoignage--corail { color: var(--corail-texte); } /* corail foncé assombri : petit corps sur crème */
.temoignages__cta { text-align: center; margin-top: 2.75rem; }

/* =============================================================
   HOME : GALERIE
   ============================================================= */
.galerie {
  padding-block: calc(var(--section) * 0.5) 0;
  /* coupe droite crème → blanc au tiers, comme sur la maquette */
  background: linear-gradient(180deg, var(--creme) 0%, var(--creme) 32%, var(--blanc) 32%, var(--blanc) 100%);
}
.galerie__collage {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
}
.galerie__item { border-radius: var(--radius-photo); overflow: hidden; }
.galerie__img { width: 100%; height: 100%; object-fit: cover; }
.galerie__item--1 { grid-column: 3 / 8; grid-row: 1; margin-top: 4rem; z-index: 2; }
.galerie__item--2 { grid-column: 5 / 11; grid-row: 1; }
.galerie__item--3 { grid-column: 8 / 12; grid-row: 1; margin-top: 7rem; z-index: 2; }
.galerie__placeholder { opacity: 0.6; font-size: var(--fs-small); }
@media (max-width: 48rem) {
  .galerie__collage { display: flex; flex-direction: column; gap: 1rem; }
  .galerie__item { margin: 0 !important; }
}
@media (max-width: 62rem) {
  .galerie { padding-bottom: 3.5rem; } /* respiration avant la vague équipe */
}

/* =============================================================
   HOME : ÉQUIPE
   ============================================================= */
.equipe { position: relative; background: var(--saumon); }
/* Décors photo équipe / actus / sécurité : desktop seulement (sur mobile ils prendraient la place du contenu) */
.equipe__blob, .securite__blob { display: none; }
@media (min-width: 62.0625rem) { .equipe__blob, .securite__blob { display: block; } }
.equipe__wave, .equipe__wave-bas { line-height: 0; }
.equipe .container { padding-block: calc(var(--section) * 0.5); }
.equipe__titre {
  font-size: var(--fs-lead);
  font-weight: 200;
  color: var(--violet);
  max-width: 42rem;
  line-height: 1.5;
  margin-bottom: 3rem;
}
.equipe__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.75rem;
}
.team-card {
  background: var(--corail-clair);
  border-radius: 1.5rem;
  padding: 1.4rem 1.4rem 1.6rem;
  position: relative;
  display: flex;
  flex-direction: column;
}
.team-card[hidden] { display: none; }
.team-card__picto { color: var(--violet); position: absolute; top: 1.1rem; left: 1.1rem; }
.team-card__picto .picto { width: 2.25rem; height: 2.25rem; }
.team-card__photo {
  display: block;
  width: min(58%, 13rem); /* maquette : la photo occupe presque toute la largeur utile de la carte */
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  margin: 1.5rem auto 1.2rem;
  background: var(--creme);
}
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card__nom {
  color: var(--noir); /* noir sur la maquette */
  text-align: center;
  font-size: 1.375rem; /* Disco Deco sur des noms : 22 px minimum pour rester lisible */
  letter-spacing: 0.06em;
  margin-bottom: 0.7rem;
}
.team-card__details { font-size: 1rem; line-height: 1.5; text-align: center; }
.team-card__fonction {
  align-self: center;
  margin: -0.2rem 0 0.8rem;
  padding: 0.25em 0.9em;
  border-radius: 1rem;
  background: var(--lavande);
  color: var(--noir);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
}
.team-card__fonction + .team-card__depuis { margin-top: 0; }
.team-card__depuis {
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.3;
  margin: -0.25rem 0 0.9rem;
}
.team-card__specialites {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
}
.team-card__specialites li {
  background: var(--creme);
  border-radius: 1rem;
  padding: 0.3rem 0.75rem;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
}
.team-card__contact {
  display: grid;
  justify-content: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(124, 77, 61, 0.22);
}
.team-card > :has(+ .team-card__contact) { margin-bottom: 1.1rem; }
.team-card__lien {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.3;
}
.team-card__texte { min-width: 0; overflow-wrap: anywhere; }
.team-card__lien:hover .team-card__texte { text-decoration: underline; text-underline-offset: 0.2em; }
.team-card__icone {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: #D09983;
  color: var(--brun);
}
.equipe__cta { text-align: center; margin-top: 3rem; }

/* =============================================================
   HOME : ACTUALITÉS
   ============================================================= */
.actus { background: var(--creme-claire); padding-block: var(--section); overflow: hidden; }
/* --- Slider (maquette : diapositive centrée pleine, voisines atténuées, filet vertical entre elles) --- */
.actus__slider { position: relative; }
.actus__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  --slide-w: min(88vw, 34rem);
  scroll-padding-inline: calc((100% - var(--slide-w)) / 2);
  padding-inline: calc((100% - var(--slide-w)) / 2);
  gap: 1.5rem;
  outline: none;
}
.actus__track::-webkit-scrollbar { display: none; }
.actus__track:focus-visible { outline: 2px solid var(--violet); outline-offset: -2px; border-radius: 1rem; }
.actu-slide {
  flex: 0 0 var(--slide-w);
  scroll-snap-align: center;
  display: grid;
  gap: 1.25rem;
  opacity: 0.4;
  transition: opacity 400ms ease;
}
.actu-slide.est-active { opacity: 1; }
.actus__citation {
  font-size: 1.3125rem;
  font-weight: 200;
  line-height: 1.45;
  text-align: center;
  color: var(--violet);
}
.actus__citation--seule { max-width: 32rem; margin-inline: auto; }
.actu-extrait { font-size: 1rem; }
.actu-extrait__date { margin-bottom: 0.4rem; font-size: 1rem; color: var(--violet); }
.actu-extrait__titre { font-size: 1.125rem; font-weight: 400; color: var(--violet); margin-bottom: 0.75rem; line-height: 1.35; }
.actu-extrait__titre a { text-decoration: none; }
.actu-extrait__titre a:hover { text-decoration: underline; }
.actu-extrait__texte { line-height: 1.55; color: var(--noir); } /* corps des extraits en noir sur la maquette */
.actu-extrait__lire { margin-top: 1rem; text-align: right; }
.actus__carte {
  position: relative;
  display: block;
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 970 / 509;
  background: var(--saumon);
}
.actus__carte-img { width: 100%; height: 100%; object-fit: cover; }
.actus__carte-vase {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--violet);
}
.actus__carte-vase .picto { width: 30%; height: auto; }
.actus__carte-label {
  position: absolute;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--blanc);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
}
.actus__nav { display: flex; justify-content: center; gap: 0.75rem; margin-top: 1.5rem; }
.actus__btn {
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: var(--brun);
  color: var(--creme);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background var(--transition);
}
.actus__btn:hover { background: #684035; }
.actus__cta { text-align: center; margin-top: 3rem; }
/* Maquette : ce CTA display est lavande (#C4BAE1), pas corail */
.actus__cta .btn--display { background: var(--lavande); color: var(--brun); }
.actus__cta .btn--display:hover { background: #B3A7D9; }
.actus .kicker { color: var(--violet); } /* « Les grands titres » est violet sur la maquette */
@media (max-width: 62rem) {
  /* mobile / tablette : carte puis extrait, la citation n'est pas affichée */
  .actu-slide .actus__carte { order: -1; }
  .actu-slide .actus__citation { display: none; }
}

/* =============================================================
   HOME : SÉCURITÉ
   ============================================================= */
.securite { background: var(--blanc); position: relative; padding-top: var(--section); }
.securite__titre {
  font-size: var(--fs-h2);
  font-weight: 100;
  color: var(--corail-fonce);
  text-align: center;
  line-height: 1.15;
  margin-bottom: 3rem;
}
.securite__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
  padding-bottom: var(--section);
}
.secu-card {
  background: var(--violet);
  color: var(--blanc);
  border-radius: var(--radius-card);
  padding: 1.5rem 1.4rem 1.7rem;
}
.secu-card__media { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 1rem; min-height: 3rem; } /* icônes centrées horizontalement */
.secu-card__media .picto { width: 2.4rem; height: 2.4rem; color: var(--corail-fonce); } /* même couleur que le 24/7 */
.secu-card__chiffre {
  font-family: var(--font-display);
  font-size: 2.75rem;
  line-height: 1;
  color: var(--corail-fonce); /* maquette : « 24/7 » Disco Deco corail foncé à la place du picto */
  letter-spacing: 0.04em;
}
.secu-card__logo { max-height: 2.6rem; width: auto; }
.secu-card__logo--theme { display: block; } /* logo HUG livré avec le thème (blanc, opacité d'origine) */
.secu-card__icone { display: block; height: 3rem; width: auto; } /* icônes maquette livrées avec le thème (corail foncé) */
.secu-card__chiffre + .secu-card__icone { height: 1.25rem; align-self: flex-start; } /* petit picto en exposant du 24/7 (maquette) */
.secu-card__titre { font-weight: 400; font-size: 1.125rem; margin-bottom: 0.4rem; line-height: 1.3; }
.secu-card__texte { font-size: 1rem; color: var(--corail); line-height: 1.5; } /* corail maquette ; le titre reste blanc */
.securite__wave { line-height: 0; }

/* =============================================================
   HOME : PARTENAIRES
   ============================================================= */
.partenaires { background: var(--saumon); padding-block: calc(var(--section) * 0.4) calc(var(--section) * 0.6); }
.partenaires__titre {
  font-size: 1.5rem;
  color: var(--brun);
  margin-bottom: 2.25rem;
}
.partenaires__defilement {
  /* Bandeau borné au container : ce qui déborde est caché, le défilement le fait apparaître, avec un fondu sur les deux bords. Scrollable au doigt tant que le marquee JS n'a pas pris le relais. */
  overflow-x: auto;
  scrollbar-width: none;
  display: flex;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.partenaires__defilement::-webkit-scrollbar { display: none; }
.partenaires__defilement.est-defilant {
  overflow: hidden;
  padding-inline: 0;
  /* fondu des logos sur les deux bords du container */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.partenaires__grid {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  width: max-content;
  flex-shrink: 0; /* la piste garde sa largeur réelle : sans ça, les copies du marquee se compressent et se chevauchent */
  margin-inline: auto; /* centré tant que le JS n'a pas lancé le défilement */
}
.est-defilant .partenaires__grid {
  margin: 0;
  padding-right: clamp(1.5rem, 4vw, 3.5rem); /* la gouttière entre la fin de la boucle et sa copie */
  animation: partenaires-defilement var(--defil-duree, 30s) linear infinite;
}
.est-defilant:hover .partenaires__grid { animation-play-state: paused; }
@keyframes partenaires-defilement {
  to { transform: translateX(-100%); }
}
.partenaires__logo {
  max-height: 3.4rem;
  width: auto;
  filter: none;
  transition: transform var(--transition);
}
.partenaires__item a:hover .partenaires__logo { transform: scale(1.05); }
.partenaires__item { flex-shrink: 0; }
.partenaires__placeholder { opacity: 0.6; font-size: var(--fs-small); }

/* =============================================================
   PAGES INTERNES (gabarit générique)
   ============================================================= */
.page-interne__wave { color: var(--abricot); }
.page-interne .page-titre { text-align: center; margin-block: clamp(1.5rem, 4vw, 3rem); }
.liste-articles { max-width: 46rem; margin-inline: auto; padding-block: 1rem var(--section); }
.liste-articles__item { margin-bottom: 2.5rem; }
.liste-articles__titre { font-weight: 400; color: var(--violet); font-size: 1.2rem; }
.liste-articles__titre a { text-decoration: none; }

/* =============================================================
   FOOTER
   ============================================================= */
.site-footer { position: relative; background: var(--corail); }
.footer-vague .site-footer__wave-haut { display: none; } /* la home se termine déjà sur du saumon (partenaires) */
.site-footer__top {
  background: var(--saumon);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  padding: 0 var(--gutter);
  margin-top: -1px;
}
.site-footer__circle { margin-top: -3.5rem; position: relative; z-index: 2; padding-left: clamp(0rem, 6vw, 5rem); }
.site-footer__arrows {
  /* Liens flèche (maillage) : dans la grille des colonnes, au-dessus de « Liens rapides ». Mobile : pleine largeur, en tête des colonnes. */
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  grid-column: 1 / -1;
  padding-bottom: 0.5rem;
}
.site-footer__main {
  background: var(--corail);
  padding: 2.5rem var(--gutter) 3rem;
}
.site-footer__main,
.site-footer__top { position: relative; }
.site-footer__main > * { max-width: var(--container); margin-inline: auto; }
.site-footer__main {
  display: block;
}
.site-footer__brand {
  /* Proportions du SVG « Logo footer », en em du wordmark : fleur 1.7em, écart fleur→wordmark 0.28em, baseline 0.25em avec 0.55em d'écart (versions texte gardées pour le SEO). */
  float: left;
  width: 13rem;
  font-size: 1.5rem; /* em de référence = corps du wordmark */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-right: 3rem;
}
.site-footer__logo { width: 1.7em; }
.site-footer__logo--complet { display: block; width: max(calc(178 * var(--s)), 9.5rem); height: auto; } /* SVG complet 178×124 : les SVG uploadés arrivent sans dimensions, on fixe la largeur (cote maquette) */
.site-footer__wordmark {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 1em;
  line-height: 1;
  margin-top: 0.28em;
  white-space: nowrap;
}
.site-footer__baseline { font-size: max(0.25em, 0.6875rem); letter-spacing: 0.12em; margin-top: 0.55em; line-height: 1; }
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 2rem;
  position: relative; /* les liens flèche s'ancrent au-dessus de la 3e colonne */
  font-size: 1rem;
}
.site-footer__title {
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--violet);
  margin-bottom: 0.9rem;
}
.site-footer__accent, .site-footer__col .accent { color: var(--violet); }
.site-footer__col p { margin-bottom: 0.5rem; }
.site-footer__col a { text-decoration: none; }
.site-footer__col a:hover { text-decoration: underline; }
.site-footer__menu li { margin-bottom: 0.35rem; }
.site-footer__urgence { font-size: max(calc(18 * var(--s)), 1rem); }
/* Ligne du bas : copyright à gauche, crédit du site à droite, filet au-dessus. */
.site-footer__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem 2rem;
  margin-top: 2.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(124, 77, 61, 0.22);
  font-size: 0.9375rem;
}
.site-footer__copy,
.site-footer__credit { margin: 0; }
.site-footer__credit a { text-decoration: none; }
.site-footer__credit a:hover { text-decoration: underline; }
/* Home et pages « footer-vague » : les CTA vivent dans la vague du footer (cercle violet à gauche, à cheval sur la vague corail, les liens flèche à droite sur le corail). Calage desktop dans le bloc calage maquette ; ici, les réglages communs et petits écrans. Pas de vague-haut sur la home, qui finit déjà sur le saumon des partenaires. */
.footer-vague .site-footer { background: var(--saumon); } /* tout ce qui n'est pas la partie corail (bande CTA, respiration au-dessus de la vague) est saumon */
.footer-vague .site-footer__top { background: transparent; }
.footer-vague .site-footer__circle { margin-top: 0; }
@media (max-width: 62rem) {
  /* Mobile : le rond violet du footer est masqué partout, le bouton contact flottant est le contact permanent. */
  .site-footer__circle { display: none; }
  /* air avant la première étape : la lettre A collait à la rangée de chips sticky */
  .parcours__etapes { padding-top: 1.75rem; }
}

@media (max-width: 62rem) {
  .site-footer__brand { float: none; margin: 0 auto 2rem; }
  /* petits écrans : tout est empilé centré au-dessus de la vague */
  .footer-vague .site-footer__top { flex-direction: column; align-items: center; gap: 1.5rem; padding-block: 1.5rem 0; }
}

/* =============================================================
   CALAGE MAQUETTE (desktop)
   Unité : --s = 1px du plan de travail Illustrator (2560 de large). Cotes extraites du PDF vectoriel de la maquette home, cap à 2560px d'écran. Textes et cibles tactiles ont des planchers via max() ; à 2560 et plus, les planchers ne s'activent jamais.
   ============================================================= */
:root {
  --s: 0.0390625vw; /* 100vw / 2560 */
  /* échelle « composants » : identique à --s mais avec un plancher, pour les éléments dont forme et texte doivent rétrécir ensemble sans devenir illisibles (CTA display, cercles). */
  --sc: max(0.0390625vw, 0.7px); /* plancher 70 % : labels display 30 → jamais sous 21px */
  /* largeur réelle du container, source unique : tout élément aligné sur la zone de contenu (intro hero, cercle contact) en dérive, jamais de cote maquette en dur. Jamais dans une règle mobile (~207px à 390). */
  --container-w: max(calc(1360 * var(--s)), min(1100px, calc(100vw - 28rem)));
  /* plancher 1100px et couloir 28rem : à 1280 le contenu occupe 832px, à 1440 : 992, à 1568 : 1100 ; la cote maquette 1360 × --s reprend à partir de ~2070px. Le cercle contact plancheré (180px) tient dans la marge de 224px à 1280. */
}
@media (min-width: 160rem) { :root { --s: 1px; --sc: 1px; } }

@media (min-width: 62.0625rem) {

  /* --- Container : contenu maquette x600 → x1960, avec un couloir latéral pour le cercle contact (--container-w) --- */
  .container { max-width: var(--container-w); padding-inline: 0; }

  /* --- Kickers : 12px ExtraLight sur la maquette, illisibles. Écart maquette assumé : plancher 14px, 16px à 2560, graisse 300 --- */
  .kicker { font-size: max(calc(16 * var(--s)), 0.9375rem); }

  /* --- Header : hauteur 238 sous nav (le logo, 573×220, déborde sur la vague), pill nav 530×58 centrée --- */
  .site-header { padding-bottom: 0; height: calc(238 * var(--s)); }
  .site-header__inner { padding: calc(60 * var(--s)) calc(55 * var(--s)) 0 calc(61 * var(--s)); max-width: none; align-items: flex-start; }
  .site-logo { position: relative; z-index: 5; }
  .site-logo__img { width: calc(573 * var(--s)); }
  .nav-pill { padding: calc(6 * var(--s)) calc(8 * var(--s)); }
  .nav-pill a {
    font-size: max(calc(20 * var(--s)), 1.0625rem);
    padding: max(calc(9 * var(--s)), 0.4rem) max(calc(22 * var(--s)), 0.95rem);
  }

  /* --- Hero : H1 y513, font 120. Sa ligne 2 (1403px) déborde du container 1360 :
     boîte élargie à 1440 par marges négatives symétriques → reste centrée, sans scroll --- */
  .hero__title {
    font-size: max(calc(120 * var(--s)), 3.625rem);
    margin-top: calc(31 * var(--s));
    max-width: none;
    width: auto;
    margin-inline: calc(-40 * var(--s));
  }
  .hero__wave-intro { margin-top: calc(30 * var(--s)); } /* la crête ne doit pas frôler le H1 : tout le contenu descend */

  /* --- Bande saumon : positions absolues depuis la fin de la vague (y1151) --- */
  .hero__band { position: relative; display: flow-root; } /* flow-root : empêche la marge négative de l'intro de remonter (le fond saumon recouvrait le bas de la vague) */
  .hero__body { display: block; max-width: none; padding: 0; }
  .hero__circle {
    position: absolute;
    /* le cercle se place dans la marge gauche réelle du container, aux
       proportions de la maquette : 240/343 de l'espace libre (600 = 240
       + ∅257 + 103). À 2560 : exactement x240. Sur laptop, la marge
       rétrécie garde le rythme gap / cercle / gap sans jamais chevaucher
       l'intro alignée sur le container. */
    left: min(
      calc(((100% - var(--container-w)) / 2 - 257 * var(--sc)) / 343 * 240),
      calc((100% - var(--container-w)) / 2 - 257 * var(--sc) - 1.5rem) /* laptop : jamais moins de 1.5rem entre le cercle et l'intro */
    );
    /* Écart maquette assumé : cercle remonté de 60 pour chevaucher la vague et respirer par rapport à l'intro sur laptop */
    top: calc(-188 * var(--sc));
    margin: 0;
    z-index: 3;
  }
  .circle-cta { width: calc(257 * var(--sc)); padding: calc(8 * var(--sc)); --cta-gap: calc(14 * var(--sc)); }
  .circle-cta__label { font-size: calc(34 * var(--sc)); letter-spacing: 0.02em; white-space: nowrap; line-height: 1.2; } /* 34 : cote maquette */ /* même corps que les autres CTA display ; marge d'air avec les bords de la forme */
  .circle-cta__star { width: calc(40 * var(--sc)); height: calc(40 * var(--sc)); bottom: calc(50% + 20 * var(--sc) + var(--cta-gap)); } /* 20 = demi-hauteur de ligne (34 × 1.2 / 2) */
  .hero__side { position: static; }
  /* Tous les CTA display suivent les mêmes règles d'air : cote maquette en minimum, le padding garantit la respiration entre le libellé et le bord */
  .btn--display, .btn--display-brown {
    padding: max(calc(20 * var(--sc)), 0.8rem) max(calc(48 * var(--sc)), 1.75rem);
  }
  .hero__side .btn--display {
    position: absolute;
    right: calc(240 * var(--s));
    top: calc(-242 * var(--s)); /* pill maquette 317×165 = minimum, s'élargit si le libellé le demande */
    min-width: calc(317 * var(--sc));
    min-height: calc(165 * var(--sc));
    justify-content: center;
    z-index: 3;
  }
  .btn--display span, .btn--display-brown span { font-size: calc(34 * var(--sc)); letter-spacing: 0.02em; white-space: nowrap; } /* 34 : cote maquette (« Découvrir la maison », « Tous les articles ») */
  .btn__picto { width: calc(40 * var(--sc)); height: calc(40 * var(--sc)); }
  .hero__blob {
    position: absolute;
    right: calc(145 * var(--s)); /* forme 158.565×738.227 (cote Illustrator), bord droit à x2415 */
    top: calc(-303 * var(--s)); /* haut à y826 */
    /* Écart maquette assumé : la photo décor garde l'échelle composant (--sc) au lieu de fondre avec --s. À 1440 : 111 × 517 au lieu de 89 × 415. */
    width: calc(158.565 * var(--sc));
    height: calc(738.227 * var(--sc));
    z-index: 2;
    will-change: transform; /* parallaxe douce au scroll (main.js) */
  }
  .hero__intro {
    position: relative;
    z-index: 2;
    /* calée sur le bord gauche RÉEL du container (= x600 maquette à 2560) :
       l'intro reste alignée avec la grille des chiffres à toutes les
       largeurs. Le couloir de --container-w garantit que le cercle contact
       tient dans la marge, avec son gap, sans garde-fou supplémentaire. */
    margin-left: calc((100% - var(--container-w)) / 2);
    margin-top: calc(-78 * var(--s)); /* texte à y1051, dans la zone de vague */
    max-width: max(calc(790 * var(--s)), 31rem); /* plancher laptop : la colonne suit le corps de texte relevé */
  }
  .hero__lead { font-size: max(calc(28 * var(--s)), 1.25rem); }
  .hero__intro .arrow-link { margin-top: calc(18 * var(--s)); }

  /* --- Chiffres : 5 cartes 245×245, gouttière 33, à cheval sur la vague --- */
  .stats { padding-top: calc(77 * var(--s)); }
  .stats .kicker { margin-bottom: calc(6 * var(--s)); }
  .stats__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(33 * var(--s)); } /* minmax(0,…) : le contenu ne peut pas faire déborder la grille du container */
  .stat-card:last-child:nth-child(odd) { grid-column: auto; } /* annule l'étirement mobile de la 5e carte */
  .stat-card {
    min-height: calc(245 * var(--s)); /* carré maquette ; pas d'aspect-ratio : les cartes s'étirent ensemble à la hauteur de la plus haute */
    border-radius: calc(30 * var(--s));
    padding: max(calc(22 * var(--s)), 1rem) max(calc(18 * var(--s)), 0.9rem);
    justify-content: space-between;
  }
  .stat-card__picto .picto { width: calc(44 * var(--s)); height: calc(44 * var(--s)); }
  .stat-card__number { font-size: max(calc(115 * var(--s)), 3.25rem); }
  .stat-card__label { font-size: max(calc(20 * var(--s)), 1rem); }
  /* Tailles réelles des SVG fournis (croix 35, groupe 71.7×56.6) */
  .stat-card__picto .picto--0 { width: calc(35 * var(--s)); height: calc(35 * var(--s)); }
  .stat-card__picto .picto--1 { width: calc(71.7 * var(--s)); height: calc(56.6 * var(--s)); }
  /* Carte sans chiffre (maquette carte 2) : grande illustration centrée (136.6×170.7) */
  .stat-card--icone .stat-card__picto { align-self: center; margin: auto 0; }
  .stat-card--icone .stat-card__picto .picto { width: calc(136.6 * var(--s)); height: calc(170.7 * var(--s)); }
  .stats__wave { margin-top: calc(-146 * var(--s)); } /* frontière à 40% des cartes */

  /* --- Témoignages : 3 colonnes de 410, gouttière 66, avatars 66 --- */
  .temoignages { position: relative; padding-block: calc(200 * var(--s)) 0; }
  .stats .container { z-index: 2; }
  /* Décor photo bord gauche (webp détouré, 502×753 à x-62 y1574 maquette), parallaxe js */
  .temoignages__blob {
    display: block;
    position: absolute;
    left: calc(-62 * var(--s));
    top: calc(320 * var(--s)); /* maquette : 52 ; descendu de 268 pour dégager le kicker et la première colonne */
    width: max(calc(502 * var(--s)), 15rem); /* échelle page + plancher doux : en --sc il dominait la section sur laptop */
    height: max(calc(753 * var(--s)), 22.5rem);
    z-index: 1;
    will-change: transform;
  }
  .temoignages__blob-img { width: 100%; height: 100%; object-fit: contain; object-position: top left; }

  /* --- Décors photo des sections suivantes (bbox relevées sur la maquette) :
     équipe x2174→2558 y3238→3666 ·
     sécurité gauche x142→586 y4892→5578 · sécurité droite x2006→2438 y5234→5894.
     Taille en --sc, position en --s depuis le haut de la section. --- */
  .equipe__blob, .securite__blob { position: absolute; z-index: 1; pointer-events: none; will-change: transform; }
  .equipe__blob-img, .securite__blob-img { width: 100%; height: 100%; object-fit: contain; }
  .equipe__blob { right: 0; top: calc(65 * var(--s)); width: calc(386 * var(--sc)); height: calc(428 * var(--sc)); }
  .equipe__blob-img { object-position: top right; }
  /* sur laptop la marge est plus étroite que la photo : elle glisse vers le bord (valeur négative) plutôt que de passer sous les cartes, jamais à moins de 1rem de la colonne de contenu */
  .securite__blob--gauche { left: min(calc(142 * var(--s)), calc((100% - var(--container-w)) / 2 - 444 * var(--sc) - 1rem)); top: calc(-68 * var(--s)); width: calc(444 * var(--sc)); height: calc(686 * var(--sc)); }
  .securite__blob--droite { right: min(calc(122 * var(--s)), calc((100% - var(--container-w)) / 2 - 432 * var(--sc) - 1rem)); top: calc(274 * var(--s)); width: calc(432 * var(--sc)); height: calc(660 * var(--sc)); }

  .temoignages__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(66 * var(--s)); }
  .temoignage__avatar { width: calc(66 * var(--s)); height: calc(66 * var(--s)); }
  .temoignage__avatar { width: max(calc(66 * var(--sc)), 4.5rem); height: max(calc(66 * var(--sc)), 4.5rem); } /* écart assumé : ∅66 maquette → plancher 72 px, le visage doit se lire */
  .temoignage__texte { font-size: max(calc(25 * var(--s)), 1.25rem); }
  .temoignage__nom { font-size: max(calc(26 * var(--s)), 1.25rem); }
  .temoignages__cta { margin-top: calc(60 * var(--s)); }
  .btn--primary {
    font-size: max(calc(17 * var(--s)), 1rem);
    padding: max(calc(8 * var(--s)), 0.55rem) max(calc(32 * var(--s)), 1.5rem);
  }
  .btn--secondary { font-size: max(calc(17 * var(--s)), 1rem); }

  /* --- Galerie : collage aux positions exactes (origine y2149) --- */
  .galerie { --g: calc(var(--container-w) / 1360); padding-block: calc(120 * var(--s)) 0; background: linear-gradient(180deg, var(--creme) 0, var(--creme) calc(120 * var(--s) + 590 * var(--g)), var(--blanc) calc(120 * var(--s) + 590 * var(--g)), var(--blanc) 100%); }
  .galerie .kicker { margin-bottom: calc(-20 * var(--s)); }
  /* Écart maquette assumé : le collage s'étire sur la largeur réelle du container (--g = 1 px maquette rapporté à --container-w) au lieu de rester à 1360 × --s. */
  .galerie__collage { --g: calc(var(--container-w) / 1360); display: block; position: relative; height: calc(1145 * var(--g)); width: var(--container-w); margin-inline: auto; }
  .galerie__item { position: absolute; margin: 0 !important; border-radius: calc(40 * var(--g)); }
  .galerie__item--1 { left: calc(279 * var(--g)); top: 0; width: calc(818 * var(--g)); aspect-ratio: 818 / 545; }
  .galerie__item--2 { left: calc(-18 * var(--g)); top: calc(343 * var(--g)); width: calc(535 * var(--g)); aspect-ratio: 535 / 802; z-index: 2; }
  .galerie__item--3 { left: calc(860 * var(--g)); top: calc(352 * var(--g)); width: calc(500 * var(--g)); aspect-ratio: 500 / 667; z-index: 2; }
  .galerie__img { height: 100%; }

  /* --- Équipe : cartes 430×385, gouttière 35, photo ∅205 --- */
  .equipe .container { padding-block: 0 calc(86 * var(--s)); }
  .equipe .kicker { margin-bottom: calc(8 * var(--s)); }
  .equipe__titre { font-size: max(calc(28 * var(--s)), 1.25rem); max-width: max(calc(800 * var(--s)), 36rem); margin-bottom: calc(52 * var(--s)); }
  .equipe__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: max(calc(35 * var(--s)), 1.25rem); }
  .team-card { min-height: calc(385 * var(--s)); border-radius: calc(30 * var(--s)); padding: max(calc(24 * var(--s)), 1.1rem) max(calc(20 * var(--s)), 1.1rem); }
  .team-card__picto .picto { width: max(calc(40 * var(--sc)), 1.75rem); height: max(calc(40 * var(--sc)), 1.75rem); } /* même échelle que les pictos des CTA display (--sc) : 40 à 2560, 28 sur laptop */
  .team-card__photo { width: min(58%, max(calc(205 * var(--s)), 11rem)); margin: calc(30 * var(--s)) auto calc(28 * var(--s)); } /* plancher relevé : la photo suit la carte agrandie par les planchers de texte */
  .team-card__nom { font-size: max(calc(28 * var(--s)), 1.375rem); }
  .team-card__details { font-size: max(calc(20 * var(--s)), 1rem); }
  .team-card__depuis,
  .team-card__lien { font-size: max(calc(18 * var(--s)), 0.9375rem); }
  .team-card__fonction { font-size: max(calc(17 * var(--s)), 0.9375rem); }
  .team-card__specialites li { font-size: max(calc(17 * var(--s)), 0.9375rem); padding: max(calc(6 * var(--s)), 0.3rem) max(calc(15 * var(--s)), 0.75rem); }
  .team-card__icone { width: max(calc(30 * var(--s)), 1.6rem); height: max(calc(30 * var(--s)), 1.6rem); }
  .equipe__cta { margin-top: calc(83 * var(--s)); }

  /* --- Actualités : zone large x173 → x2385, carte 970×509 --- */
  .actus { padding-block: calc(102 * var(--s)) calc(89 * var(--s)); }
  /* Diapositive : la maquette donnait extrait 250 · carte 970 · citation 260 (1540 de large). Écart assumé : la diapo active fait --container-w, extrait 340 · carte 640 · citation 320, gouttières 30. Échelle --a = max(--s, container/1360). */
  .actus__track { --a: max(var(--s), calc(var(--container-w) / 1360)); --slide-w: var(--container-w); gap: calc(60 * var(--a)); }
  .actu-slide {
    grid-template-columns: calc(340 * var(--a)) minmax(0, 1fr) calc(320 * var(--a));
    gap: calc(30 * var(--a));
    align-items: center;
    position: relative;
    opacity: 0.18; /* voisins nettement fondus (0.18) pour que l'article coupé au bord se lise comme un aperçu ; l'actif reste à 1 */
  }
  /* fondu crème sur les deux bords du slider */
  .actus__slider::before,
  .actus__slider::after { content: ''; position: absolute; top: 0; bottom: 0; width: 9rem; z-index: 2; pointer-events: none; }
  .actus__slider::before { left: 0; background: linear-gradient(to right, var(--creme-claire) 20%, rgba(253, 241, 234, 0)); }
  .actus__slider::after { right: 0; background: linear-gradient(to left, var(--creme-claire) 20%, rgba(253, 241, 234, 0)); }
  .actu-slide::before { /* filet de séparation (maquette) */
    content: '';
    position: absolute;
    left: calc(-30 * var(--a));
    top: 8%;
    height: 84%;
    width: 1px;
    background: var(--brun);
    opacity: 0.35;
  }
  .actu-slide:first-child::before { display: none; }
  .actu-slide .actus__carte { order: 0; }
  .actu-extrait { align-self: start; }
  .actus__citation { font-size: max(calc(30 * var(--s)), 1.3125rem); }
  .actus__carte { border-radius: calc(30 * var(--s)); }
  .actu-extrait { font-size: max(calc(20 * var(--s)), 1rem); }
  .actu-extrait__date { font-size: max(calc(26 * var(--s)), 1.0625rem); margin-bottom: 0.6rem; letter-spacing: 0.04em; } /* la date (Disco Deco) prend du corps dans la hiérarchie de la carte */
  .actu-extrait__titre { font-size: max(calc(20 * var(--s)), 1.125rem); }
  .actus__nav { margin-top: calc(40 * var(--s)); }
  .actus__cta { margin-top: calc(40 * var(--s)); }
  .actus__cta .btn--display { min-width: calc(294 * var(--sc)); padding-block: max(calc(14 * var(--sc)), 0.7rem); justify-content: center; margin-inline: auto; display: inline-flex; }
  .actus__cta .btn--display span { font-size: calc(34 * var(--sc)); }

  /* --- Sécurité : titre 86, 4 cartes 315×245, gouttière 33 --- */
  .securite { padding-top: calc(92 * var(--s)); }
  .securite__titre { font-size: max(calc(86 * var(--s)), 2.75rem); margin-bottom: max(calc(24 * var(--s)), 1.5rem); }
  .securite__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: max(calc(33 * var(--s)), 1.25rem); padding-bottom: calc(120 * var(--s)); }
  .secu-card { min-height: calc(245 * var(--s)); border-radius: calc(30 * var(--s)); padding: max(calc(24 * var(--s)), 1.4rem); }
  .secu-card__chiffre { font-size: max(calc(115 * var(--s)), 3rem); margin-top: calc(-14 * var(--s)); }
  .secu-card__logo, .secu-card__logo--theme { height: max(calc(53 * var(--s)), 2rem); max-height: none; width: auto; } /* logo HUG : 226×53 sur la maquette */
  .secu-card__icone { height: max(calc(80 * var(--s)), 3rem); } /* protocoles 68, équipement 75 : relevés d'un cran */
  .secu-card__chiffre + .secu-card__icone { height: max(calc(37 * var(--s)), 1.25rem); } /* picto 24:7 : 36.7 sur la maquette, en exposant */
  .secu-card__titre { font-size: max(calc(20 * var(--s)), 1.125rem); }
  .secu-card__texte { font-size: max(calc(20 * var(--s)), 1rem); }

  /* --- Partenaires --- */
  .partenaires__titre { font-size: max(calc(34 * var(--sc)), 1.375rem); } /* 34 Disco Deco sur la maquette */
  .partenaires__defilement { max-width: var(--container-w); padding-inline: 0; } /* desktop : bandeau borné aux bords exacts du container */
  .partenaires__logo { max-height: max(calc(100 * var(--s)), 3.5rem); }
  .partenaires__grid { gap: calc(60 * var(--s)); }
  .est-defilant .partenaires__grid { padding-right: calc(60 * var(--s)); }

  /* --- Footer : cercle ∅257 à x240, flèches à x1611, colonnes x857 → x2070 --- */
  .site-footer__circle { padding-left: calc(240 * var(--s)); margin-top: calc(-90 * var(--sc)); } /* offset en --sc : suit la taille réelle du cercle plancheré */
  /* Home : la bande CTA est un calque posé sur la vague corail. Cotes maquette : cercle à x240/y11, liens flèche calés à droite sur x1860, posés sur le corail à y107, crête de la vague à y32. */
  .footer-vague .site-footer { padding-top: calc(32 * var(--s)); } /* respiration saumon au-dessus de la crête (le calque CTA, lui, reste ancré tout en haut) */
  .footer-vague .site-footer__top { position: absolute; inset: 0 0 auto 0; z-index: 2; padding: 0; }
  /* plancher de hauteur sur la vague (preserveAspectRatio none) : sur laptop, la vague
     proportionnelle serait trop plate pour loger le cercle plancheré et les liens */
  .footer-vague .site-footer__wave-bas .wave { height: max(calc(217 * var(--s)), 9.5rem); }
  .footer-vague .site-footer__circle { position: absolute; left: calc(240 * var(--s)); top: calc(11 * var(--s)); margin: 0; padding-left: 0; }
  /* Liens flèche : colonne 3 de la grille (« Liens rapides »), bord gauche aligné sur son titre. Pages footer-vague : en absolu, ancrés au bas de leur zone de grille, ils montent dans la vague selon leur nombre (44 d'air). Pages génériques : en flux, rangée 1. */
  .site-footer__arrows { grid-column: 3; grid-row: 1; align-self: end; padding: 0 0 max(calc(44 * var(--s)), 1.25rem); }
  .site-footer__col { grid-row: 2; }
  .footer-vague .site-footer__col { grid-row: auto; }
  .footer-vague .site-footer__arrows { position: absolute; left: 0; bottom: 100%; padding: 0; margin-bottom: max(calc(44 * var(--s)), 1.25rem); }
  /* sur le corail, les disques des liens sont corail assombri + flèche brune (maquette) */
  .footer-vague .site-footer__arrows .arrow-link__disc { background: #D09983; color: var(--brun); }
  .site-footer__arrows { gap: max(calc(15 * var(--s)), 0.6rem); }
  .arrow-link { font-size: max(calc(20 * var(--s)), 1rem); }
  .site-footer__main > * { max-width: max(calc(1475 * var(--s)), min(1100px, calc(100vw - 6rem))); }
  .site-footer__brand {
    width: max(calc(260 * var(--s)), 11rem);
    margin-right: max(calc(60 * var(--s)), 2rem);
    font-size: max(calc(41 * var(--s)), 1.375rem);
    /* le float ignore le centrage auto de main > * : on l'indente à la main sur le bord
       gauche de la colonne de contenu du footer (maquette : logo à x455, colonnes à x857) */
    margin-left: calc((100% - max(calc(1475 * var(--s)), min(1100px, 100vw - 6rem))) / 2);
  }
  .site-footer__wordmark { letter-spacing: 0.04em; }
  .site-footer__title { font-size: max(calc(24 * var(--s)), 1.125rem); }
  /* colonnes plus compactes (maquette) : l'indentation du logo laisse ~1000px aux
     5 colonnes sur laptop, un titre long peut passer sur deux lignes */
  .site-footer__cols { font-size: max(calc(20 * var(--s)), 1rem); grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: max(calc(40 * var(--s)), 1.5rem); }
}

/* --- Footer mobile et tablette ---
   Sous 1200 px, composition centrée : logo, liens flèche en rangée centrée (empilés sur téléphone), colonnes centrées en blocs de largeur égale (3 + 2 en tablette ; sur téléphone Contact et Horaires pleine largeur, les deux menus côte à côte, Association & info en dessous avec le copyright). Même règle pour les pages footer-vague. */
@media (max-width: 74.9375rem) {
  .site-footer__main > * { max-width: 48rem; }
  .site-footer__brand { float: none; width: auto; margin: 0 auto 2.25rem; }
  .site-footer__cols { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.25rem 2rem; text-align: center; font-size: 1rem; }
  .site-footer__col { flex: 0 1 13rem; grid-row: auto; }
  .site-footer__arrows,
  .footer-vague .site-footer__arrows {
    position: static;
    flex: 1 1 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem 1.75rem;
    margin: 0;
    padding: 0 0 0.75rem;
  }
  .site-footer__title { font-size: 1.125rem; }
  .site-footer__bas { flex-direction: column; align-items: center; text-align: center; margin-top: 2.25rem; }
}
@media (max-width: 37.4375rem) {
  .site-footer__cols { gap: 2rem 1rem; }
  .site-footer__arrows,
  .footer-vague .site-footer__arrows { flex-direction: column; align-items: center; }
  .site-footer__col--contact,
  .site-footer__col--horaires,
  .site-footer__col--assoc { flex: 1 1 100%; }
  .site-footer__col--menu { flex: 1 1 calc(50% - 0.5rem); }
}

/* --- Footer desktop ---
   Grille logo | colonnes dans un conteneur centré, colonnes réparties sur toute la largeur (space-between) : 1760·--s à 2560 (x400 → x2160), 1320 px à 1512, jamais plus large que l'écran moins 6rem. Les liens flèche restent au-dessus de « Liens rapides » ; la ligne du bas court sur toute la largeur. */
@media (min-width: 75rem) {
  .site-footer__main > .site-footer__inner {
    width: min(calc(100vw - 6rem), max(calc(1760 * var(--s)), 1320px));
    max-width: none;
    margin-inline: auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: max(calc(84 * var(--s)), 3rem);
    align-items: start;
  }
  .site-footer__brand { float: none; width: auto; margin: 0; }
  /* Colonnes à la largeur de leur texte, l'air restant réparti entre elles. La mention d'urgence passe sur deux lignes (13em). Gouttière minimale 1.5rem. */
  .site-footer__cols {
    grid-template-columns: repeat(5, auto);
    justify-content: space-between;
    column-gap: 1.5rem;
    row-gap: 0;
  }
  .site-footer__urgence { max-width: 13em; }
  .site-footer__col { grid-row: 2; }
  .footer-vague .site-footer__col { grid-row: 1; }
  .site-footer__bas { grid-column: 1 / -1; margin-top: max(calc(56 * var(--s)), 2.25rem); font-size: max(calc(18 * var(--s)), 0.9375rem); }
  /* La vague loge trois liens flèche : chaque lien en plus descend les colonnes d'un cran pour que la pile reste sur le corail. */
  .footer-vague .site-footer__main:has(.site-footer__arrows > :nth-child(4)) { --liens-extra: 1; }
  .footer-vague .site-footer__main:has(.site-footer__arrows > :nth-child(5)) { --liens-extra: 2; }
  .footer-vague .site-footer__main:has(.site-footer__arrows > :nth-child(6)) { --liens-extra: 3; }
  .footer-vague .site-footer__main { padding-top: calc(2.5rem + var(--liens-extra, 0) * (max(1.75rem, max(calc(20 * var(--s)), 1rem) * 1.6) + max(calc(15 * var(--s)), 0.6rem))); }
}

/* --- Petits laptops / tablettes paysage (993 → 1200px) ---
   Le container plancheré descend à ~600px : 3 + 2 cartes chiffres centrées. */
@media (min-width: 62.0625rem) and (max-width: 75rem) {
  .stats__grid { display: flex; flex-wrap: wrap; justify-content: center; }
  .stat-card { flex: 0 1 calc((100% - 2 * max(calc(33 * var(--s)), 1rem)) / 3); }
  /* l'intro du hero ne passe jamais sous la pill « Découvrir la maison » */
  .hero__intro { max-width: min(max(calc(790 * var(--s)), 31rem), calc(100% - (100% - var(--container-w)) / 2 - 22rem)); }
}

/* --- Header entre 993 et 1280px : aux planchers rem, les deux pills et le logo ne tiennent plus dans 1fr·auto·1fr ; liens resserrés sur cette plage seulement --- */
@media (min-width: 62.0625rem) and (max-width: 80rem) {
  .site-header__inner { column-gap: 1rem; }
  .nav-pill { padding-inline: 0.3rem; }
  .nav-pill a { padding-inline: 0.62rem; }
}

/* =============================================================
   PAGE VOTRE PARCOURS (page-votre-parcours.php)
   Base mobile ici, calage maquette desktop plus bas.
   ============================================================= */
.parcours { --marge: calc((100vw - var(--container-w)) / 2); }
@media (min-width: 62.0625rem) {
  /* Colonne de contenu plus étroite sur cette page : couloir latéral 36rem au lieu de 28 (marge gauche 288 px de 1280 à 1600, pour le blob de nav et la lettre d'étape). À 1280 le contenu fait 704 px, à 1512 : 936, à 1728 : 1100. */
  .parcours { --container-w: max(calc(1360 * var(--s)), min(1100px, calc(100vw - 36rem))); }
}
.parcours .page-titre { text-align: center; }

/* Sous-navigation d'ancres, mobile : rangée de chips sticky sous le header */
.parcours__nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--creme);
  padding: 0.6rem var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}
.parcours__nav::-webkit-scrollbar { display: none; }
.parcours__nav-liste { display: flex; gap: 0.5rem; width: max-content; }
.parcours__nav-lien {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: var(--saumon);
  color: var(--brun);
  font-weight: 300;
  font-size: var(--fs-small);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.parcours__nav-lien:hover { background: var(--abricot); }
.parcours__nav-lien.est-active { background: var(--lavande); color: var(--noir); }

/* Étapes */
.parcours__etapes { padding-inline: var(--gutter); padding-bottom: 3rem; } /* air entre la dernière étape et la vague du CTA */
.etape { position: relative; scroll-margin-top: 3.5rem; } /* la nav sticky ne recouvre pas le début de l'étape visé par l'ancre */
.etape__decor { display: none; } /* décors photo : desktop seulement */
.etape__lettre {
  display: block;
  font-size: 3.25rem;
  line-height: 1;
  color: var(--corail-fonce);
  margin-bottom: 0.35rem;
}
.etape__titre { margin-bottom: 0.5rem; }
.etape__lead {
  font-size: var(--fs-lead);
  font-weight: 200;
  line-height: 1.45;
  color: var(--violet);
}
.etape__photo {
  margin-top: 1.25rem;
  border-radius: 1rem;
  overflow: hidden;
  aspect-ratio: 500 / 372;
  background: var(--saumon);
}
.etape__photo-img { width: 100%; height: 100%; object-fit: cover; }
.etape__items { margin-top: 2rem; }
.etape-item + .etape-item { margin-top: 1.1rem; }
.etape-item__titre {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--brun);
}
.etape-item__picto { flex-shrink: 0; display: inline-flex; margin-top: 0.15em; }
.etape-item__picto .picto { width: 1.05rem; height: 1rem; }
.etape-item__texte {
  /* maquette : ExtraLight 28 ; Light (300) sous 2560 pour rester lisible (écart assumé, comme les kickers) */
  padding-left: 1.5rem;
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.4;
  margin-top: 0.15rem;
}

/* Séparateur ondulé entre deux étapes (ligne corail, amplitude 14, période 36.6 sur la maquette) */
.ondule {
  height: 0.7rem;
  margin-block: 2.5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36.6 16' preserveAspectRatio='none'%3E%3Cpath d='M0 8 Q9.15 -5 18.3 8 T36.6 8' fill='none' stroke='%23F2A88F' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x left center / 1.6rem 100%;
}

/* Bande CTA finale (saumon) */
.parcours-cta { position: relative; background: var(--saumon); }
.parcours-cta__wave { line-height: 0; }
.parcours-cta__decor { display: none; }
.parcours-cta__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-top: 2.25rem; /* mobile : la vague ne fait que ~30px, le H2 respire franchement sous elle */
  padding-bottom: 2.5rem;
}
.parcours-cta__titre {
  font-size: var(--fs-h2);
  font-weight: 100;
  line-height: 1.12;
  color: var(--violet);
  max-width: 18em;
  margin-inline: auto;
}
.parcours-cta .btn--display-brown { margin-top: 1.25rem; }
.parcours-cta .btn__picto { width: auto; height: 3rem; }

@media (min-width: 62.0625rem) {
  /* --- H1 « Votre parcours » : texte à y476 (la boîte remonte dans la zone crème de la vague) --- */
  /* le H1 ne remonte presque plus dans la vague (−10 au lieu de −56) */
  .parcours .page-titre { font-size: max(calc(120 * var(--s)), 3.625rem); margin-block: calc(-10 * var(--s)) 0; }

  /* --- Grille : marge gauche (nav) · container (étapes) · reste --- */
  .parcours__corps {
    display: grid;
    grid-template-columns: calc((100% - var(--container-w)) / 2) var(--container-w) minmax(0, 1fr);
    margin-top: calc(130 * var(--s)); /* air entre le H1 et le début des étapes (130) */
  }
  .parcours__etapes { grid-column: 2; padding-inline: 0; padding-bottom: max(calc(160 * var(--s)), 4.5rem); } /* la photo de D ne colle pas à la vague */

  /* --- Sous-nav sticky : la nav blob est sticky sur desktop et les décors photo ne vivent que sur la marge droite (le blob habite la marge gauche). Ne pas remettre de décor gauche sur cette page tant que la nav est sticky. Le retrait admin-bar n'affecte que les admins connectés. --- */
  .parcours__nav {
    grid-column: 1;
    align-self: start;
    justify-self: start;
    position: sticky;
    top: calc(1.25rem + var(--wp-admin--admin-bar--height, 0px));
    z-index: 3;
    margin: calc(-109 * var(--s)) 0 0; /* le haut du blob précède la première étape (maquette y534 / A y643) */
    max-width: calc(100% - 78 * var(--s) - 1.25rem); /* ne mord jamais sur la lettre de l'étape (x522) */
    min-width: min(calc(349 * var(--s)), calc(100% - 78 * var(--s) - 1.25rem));
    padding: max(calc(44 * var(--s)), 1.5rem) max(calc(30 * var(--s)), 1rem) max(calc(207 * var(--s)), 6.5rem) max(1.5rem, calc(152 * var(--s) - 160px + 160 * var(--s)));
    background: var(--corail);
    overflow: visible;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 350.513 362.994' preserveAspectRatio='none'%3E%3Cpath d='M0,362.497s48.823,1.118,86.864,0c38.042-1.118,101.658-42.223,101.658-94.281v-.139c0-17.776,15.541-32.186,34.712-32.186h0c70.294,0,127.279-52.699,127.279-117.876C350.513,52.837,293.528,0,223.234,0H0s0,362.497,0,362.497Z' fill='%23000'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 350.513 362.994' preserveAspectRatio='none'%3E%3Cpath d='M0,362.497s48.823,1.118,86.864,0c38.042-1.118,101.658-42.223,101.658-94.281v-.139c0-17.776,15.541-32.186,34.712-32.186h0c70.294,0,127.279-52.699,127.279-117.876C350.513,52.837,293.528,0,223.234,0H0s0,362.497,0,362.497Z' fill='%23000'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  }
  .parcours__nav-liste { display: block; width: auto; }
  .parcours__nav-lien {
    display: block;
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--violet);
    font-size: max(calc(20 * var(--s)), 1rem);
    line-height: 1.5;
    white-space: nowrap;
  }
  .parcours__nav-lien:hover { background: none; text-decoration: underline; text-underline-offset: 0.2em; }
  .parcours__nav-lien.est-active { background: none; color: var(--noir); } /* même graisse : le libellé actif ne s'élargit pas */

  /* --- Étape : lettre Disco Deco 146.7 à x522 (hors container), deux colonnes 660 / 660, gouttière 40 --- */
  .etape {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Écart maquette assumé : gouttière doublée (maquette 40), les deux colonnes se touchaient presque. Vaut pour toute section .etape (Votre parcours et Conditions & tarifs). */
    column-gap: max(calc(80 * var(--s)), 3.5rem);
    scroll-margin-top: 1rem;
  }
  .etape__intro, .etape__items { position: relative; z-index: 2; }
  .etape__items { margin-top: 0; }
  .etape__lettre {
    position: absolute;
    right: calc(100% + 28 * var(--s)); /* bord droit de la lettre à x572 */
    top: calc(-7 * var(--s));
    font-size: max(calc(146.7 * var(--s)), 4.5rem);
    margin: 0;
    z-index: 2;
  }
  .etape__titre { margin-bottom: max(calc(6 * var(--s)), 0.35rem); }
  .etape__lead { font-size: max(calc(28 * var(--s)), 1.25rem); line-height: 1.2; }
  .etape__photo {
    width: 75.76%; /* 500 sur une colonne de 660 */
    margin: max(calc(23 * var(--s)), 1.25rem) auto 0;
    border-radius: max(calc(16 * var(--s)), 0.75rem);
  }
  .etape-item + .etape-item { margin-top: max(calc(31 * var(--s)), 1.1rem); }
  .etape-item__titre { font-size: max(calc(28 * var(--s)), 1.125rem); line-height: 1.2; gap: max(calc(8 * var(--s)), 0.4rem); }
  .etape-item__picto .picto { width: max(calc(22 * var(--s)), 1.05rem); height: max(calc(20 * var(--s)), 1rem); }
  .etape-item__texte {
    padding-left: max(calc(30 * var(--s)), 1.45rem); /* texte à x1330, titre à x1300 */
    font-size: max(calc(28 * var(--s)), 1.0625rem);
    line-height: 1.25;
    margin-top: calc(2 * var(--s));
  }
  .ondule {
    height: max(calc(16 * var(--s)), 0.7rem);
    margin-block: max(calc(90 * var(--s)), 3rem) max(calc(81 * var(--s)), 2.75rem);
    background-size: max(calc(36.6 * var(--s)), 1.5rem) 100%;
  }

  /* --- Décors photo des bords (webp détourés, hauteur ~700 sur la maquette) :
     A gauche x143 y+322 · B droite bord écran y+462 · D gauche bord écran y−189 (déborde sur C).
     Taille en --sc, position en --s ; sous le contenu (z 1), sous la nav sticky (z 3). --- */
  /* Décors : les blobs de la home, dimensionnés par la hauteur (~700 sur la maquette, en --sc), largeur selon l'image. Gauche : collés au bord de l'écran ; droite : 60 d'air avant le bord. Jamais sous la lettre ni sous le contenu (largeur plafonnée par la marge, object-fit: contain). */
  .etape__decor { display: block; position: absolute; z-index: 1; pointer-events: none; will-change: transform; height: calc(700 * var(--sc)); }
  .etape__decor-img { height: 100%; width: 100%; object-fit: contain; }
  /* Largeur plafonnée : la marge moins la zone de la lettre (78) et 100 d'air, plancher 3.5rem sur laptop. */
  .etape__decor--gauche, .etape__decor--gauche-haut { left: calc(0px - var(--marge)); width: calc(var(--marge) - 78 * var(--s) - max(calc(100 * var(--s)), 3.5rem)); }
  .etape__decor--gauche .etape__decor-img, .etape__decor--gauche-haut .etape__decor-img { object-position: left top; }
  .etape__decor--gauche { top: calc(320 * var(--s)); }
  /* 1re étape : le décor gauche passe sous le blob de navigation, avec 3.5rem d'air. À 2560 : 320, comme la maquette. */
  .etape:first-child .etape__decor--gauche { top: max(calc(320 * var(--s)), 15.5rem); }
  .etape__decor--gauche-haut { top: calc(-190 * var(--s)); }
  /* Droite : « droite » = collé au bord de l'écran (découpe faite pour être coupée, ex. étape B) ;
     « droite-air » = 60 d'air avant le bord (blob complet, ex. étape D). Choix dans ACF, par décor. */
  .etape__decor--droite, .etape__decor--droite-air { top: calc(460 * var(--s)); }
  .etape__decor--droite { right: calc(0px - var(--marge)); width: calc(var(--marge) - max(calc(100 * var(--s)), 3.5rem)); }
  .etape__decor--droite-air { right: calc(max(calc(60 * var(--s)), 1.25rem) - var(--marge)); width: calc(var(--marge) - max(calc(60 * var(--s)), 1.25rem) - max(calc(100 * var(--s)), 3.5rem)); }
  .etape__decor--droite .etape__decor-img, .etape__decor--droite-air .etape__decor-img { object-position: right top; }

  /* --- CTA final (parcours-section.svg : bande saumon 2560×950 vague comprise) : titre Thin 85.6 à 171 sous la crête, footer ~480 sous la crête, pill brune au format du hero (317×165 min, vase 56) à y440, 44 d'air avant le footer. --- */
  /* Vague « cta » (190 de haut, creux à 186 vers x1480→1940) : le H2 commence 104 sous le bas de la vague, donc dans le saumon sur toute sa largeur, « ? » compris. */
  .parcours-cta__inner { margin-top: calc(104 * var(--s)); padding-bottom: max(calc(54 * var(--s)), 2.5rem); }
  .parcours-cta__titre { font-size: max(calc(85.6 * var(--s)), 2.25rem); max-width: none; margin-inline: calc(-100 * var(--s)); } /* 1498 de large sur la maquette : déborde du container 1360, boîte élargie symétriquement */
  .parcours-cta .btn--display-brown {
    margin-top: max(calc(8 * var(--s)), 0.75rem);
    min-width: calc(317 * var(--sc));
    min-height: calc(165 * var(--sc));
    justify-content: center;
    position: relative;
    z-index: 3;
  }
  .parcours-cta .btn__picto { width: auto; height: calc(56 * var(--sc)); }
  .parcours-cta__decor { display: block; position: absolute; right: 0; top: calc(-258 * var(--s)); width: min(calc(459 * var(--sc)), var(--marge)); z-index: 1; pointer-events: none; will-change: transform; }
  .parcours-cta__decor-img { width: 100%; height: auto; object-fit: contain; }
}

/* =============================================================
   PAGE CONDITIONS & TARIFS (page-conditions-tarifs.php)
   Ossature .parcours sans surcharge d'en-tête (le H1 Disco Deco de la maquette n'est pas repris : en-tête commun). Ce bloc ne porte que les composants propres à la page. Décors photo à droite uniquement tant que la nav est sticky.
   ============================================================= */

/* Kicker (12 brun → 15/400) + titre de section (question violette, Regular 28) */
.conditions__kicker { display: block; margin-bottom: max(calc(13 * var(--s)), 0.5rem); }
.conditions__h2 {
  font-weight: 400;
  font-size: max(calc(28 * var(--s)), 1.25rem);
  line-height: 1.25;
  color: var(--violet);
  margin-bottom: max(calc(5 * var(--s)), 0.4rem);
}
.conditions__h3 {
  font-weight: 400;
  font-size: max(calc(28 * var(--s)), 1.125rem);
  line-height: 1.3;
  color: var(--brun);
  margin-bottom: max(calc(14 * var(--s)), 0.6rem);
}
.conditions__h3--suite { margin-top: max(calc(40 * var(--s)), 1.5rem); }
.conditions__texte {
  font-size: max(calc(28 * var(--s)), 1.0625rem); /* maquette ExtraLight 28 → Light 300 aux petits corps (écart assumé) */
  font-weight: 300;
  line-height: 1.3;
}
.conditions__note {
  margin-top: max(calc(34 * var(--s)), 1.25rem);
  font-size: max(calc(28 * var(--s)), 1.0625rem);
  font-weight: 300;
  line-height: 1.3;
  color: var(--corail-texte); /* maquette corail foncé : assombri aux petits corps (écart assumé) */
}
@media (min-width: 160rem) { .conditions__note { color: var(--corail-fonce); } }

/* Colonne de droite d'une section (équivalent de .etape__items sur le parcours) */
.conditions-section__droite { position: relative; z-index: 2; margin-top: 2rem; }

/* Liste à pictos (critères, remboursements) : lignes compactes de la maquette (interligne 33.6, pas d'écart entre items) */
.conditions-liste li {
  position: relative;
  padding-left: max(calc(30 * var(--s)), 1.5rem);
  font-size: max(calc(28 * var(--s)), 1.0625rem);
  font-weight: 300;
  line-height: 1.25;
}
.conditions-liste li + li { margin-top: max(calc(3 * var(--s)), 0.25rem); }
.conditions-liste__picto { position: absolute; left: 0; top: 0.1em; display: inline-flex; }
.conditions-liste__picto .picto {
  width: max(calc(22 * var(--s)), 1.05rem);
  height: max(calc(20 * var(--s)), 1rem);
}
.conditions-liste--blanc { color: var(--blanc); }

/* Encadré Remboursements : boîte brune pleine colonne (maquette x600-1260, y1706-1972), texte blanc, pictos « cadre ondulé » */
.conditions-rembours {
  margin-top: max(calc(36 * var(--s)), 1.5rem);
  background: var(--brun);
  color: var(--blanc);
  border-radius: var(--radius-card);
  padding: max(calc(24 * var(--s)), 1.15rem) max(calc(28 * var(--s)), 1.25rem) max(calc(30 * var(--s)), 1.35rem) max(calc(18 * var(--s)), 1.15rem);
}
.conditions-rembours__titre {
  font-weight: 400;
  font-size: max(calc(28 * var(--s)), 1.125rem);
  line-height: 1.3;
  margin-bottom: max(calc(8 * var(--s)), 0.5rem);
}

/* Tableau des frais : lignes impaires sur saumon (maquette), montants à droite */
.tarifs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: max(calc(22 * var(--s)), 1rem);
  line-height: 1.35;
}
.tarifs-table th,
.tarifs-table td {
  padding: max(calc(9 * var(--s)), 0.45rem) max(calc(12 * var(--s)), 0.6rem);
  text-align: left;
  vertical-align: top;
}
.tarifs-table th { font-weight: 400; }
.tarifs-table td { font-weight: 300; } /* maquette ExtraLight 22 → Light (écart assumé) */
.tarifs-table .tarifs-table__montant { text-align: right; }
.tarifs-table tbody tr:nth-child(odd) { background: var(--saumon); }

/* Soirées d'information : cartes « événement » blanches sur crème, jour en Disco Deco corail foncé, pastille de disponibilité lavande. */
.soiree {
  /* Pastille sous la date et l'horaire : à côté, elle écrasait le texte en colonne étroite. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: max(calc(10 * var(--s)), 0.5rem) max(calc(20 * var(--s)), 0.9rem);
  background: var(--blanc);
  border-radius: var(--radius-card);
  padding: max(calc(18 * var(--s)), 0.85rem) max(calc(26 * var(--s)), 1.1rem);
  font-size: max(calc(28 * var(--s)), 1.0625rem);
  line-height: 1.3;
}
.soirees-dates li + li { margin-top: max(calc(16 * var(--s)), 0.7rem); }
.soiree__badge {
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  min-width: max(calc(64 * var(--s)), 2.9rem);
}
.soiree__jour { font-size: max(calc(52 * var(--s)), 1.9rem); line-height: 1; color: var(--corail-fonce); }
.soiree__mois {
  font-size: max(calc(18 * var(--s)), 0.875rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brun);
  margin-top: 0.2em;
}
.soiree__infos { display: flex; flex-direction: column; gap: 0.1em; min-width: 0; }
.soiree__quand { font-weight: 400; }
.soiree__heure { font-weight: 300; font-size: max(calc(24 * var(--s)), 1rem); color: var(--violet); }
.soiree__statut {
  grid-column: 2;
  justify-self: start;
  font-size: max(calc(20 * var(--s)), 0.9375rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  padding: 0.25em 0.95em;
  border-radius: 999px;
  background: var(--lavande);
  color: var(--noir);
  white-space: nowrap;
}
/* Complet : la carte s'éteint, la pastille passe sur saumon ; les places disponibles ressortent d'autant */
.soiree--complet .soiree__badge,
.soiree--complet .soiree__infos { opacity: 0.55; }
.soiree--complet .soiree__statut { background: var(--saumon); color: var(--brun); }

/* Formulaire d'inscription aux soirées : carte saumon, champs blancs. Base générique, puis les règles calées sur le markup Gravity Forms 2.5+ (theme="gravity-theme"). Le préfixe :is(.conditions, .page-contact, .page-recrutement, .page-prestations) sert la spécificité : la feuille du plugin peut s'imprimer après main.css, il faut la battre sans !important. */
.soirees-form {
  background: var(--saumon);
  border-radius: var(--radius-card);
  padding: max(calc(28 * var(--s)), 1.25rem) max(calc(30 * var(--s)), 1.35rem);
}
.soirees-form .conditions__h3 { margin-bottom: max(calc(12 * var(--s)), 0.6rem); }
.soirees-form__repli { font-weight: 300; font-size: var(--fs-small); line-height: 1.45; }
.soirees-form .arrow-link { margin-top: 0.9rem; }
.soirees-form .gform_fields { display: grid; gap: 0.9rem; }
.soirees-form label { font-size: var(--fs-small); font-weight: 400; display: block; margin-bottom: 0.25rem; }
.soirees-form input[type="text"],
.soirees-form input[type="email"],
.soirees-form input[type="tel"],
.soirees-form input[type="number"],
.soirees-form select,
.soirees-form textarea {
  width: 100%;
  background: var(--blanc);
  border: 1px solid rgba(124, 77, 61, 0.28);
  border-radius: 0.65rem;
  padding: 0.55em 0.8em;
  font: inherit;
  color: var(--brun);
}
.soirees-form input[type="submit"],
.soirees-form button[type="submit"] {
  margin-top: 0.35rem;
  background: var(--brun);
  color: var(--blanc);
  border: 0;
  border-radius: 999px;
  padding: 0.7em 1.6em;
  font: inherit;
  font-weight: 400;
  cursor: pointer;
  transition: background var(--transition);
}
.soirees-form input[type="submit"]:hover,
.soirees-form button[type="submit"]:hover { background: #684035; }

/* Structure Gravity Forms : la grille 12 colonnes du plugin ramenée à une colonne, marges au rythme carte. */
:is(.conditions, .page-contact, .page-recrutement, .page-prestations) .soirees-form .gform_wrapper { margin: 0; }
/* La légende « * indique les champs nécessaires » n'est plus affichée (filtre gform_required_legend dans inc/formulaires.php) ; masquée ici aussi au cas où. */
.gform_wrapper .gform_required_legend { display: none; }
:is(.conditions, .page-contact, .page-recrutement, .page-prestations) .soirees-form .gform_fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}
:is(.conditions, .page-contact, .page-recrutement, .page-prestations) .soirees-form .gfield { grid-column: 1 / -1; }
:is(.conditions, .page-contact, .page-recrutement, .page-prestations) .soirees-form .gfield_label { margin-bottom: 0.25rem; }
:is(.conditions, .page-contact, .page-recrutement, .page-prestations) .soirees-form .gfield_required { color: var(--corail-texte); padding-left: 0.15em; }
:is(.conditions, .page-contact, .page-recrutement, .page-prestations) .soirees-form .gform_wrapper input[type="text"],
:is(.conditions, .page-contact, .page-recrutement, .page-prestations) .soirees-form .gform_wrapper input[type="email"],
:is(.conditions, .page-contact, .page-recrutement, .page-prestations) .soirees-form .gform_wrapper input[type="tel"],
:is(.conditions, .page-contact, .page-recrutement, .page-prestations) .soirees-form .gform_wrapper textarea,
:is(.conditions, .page-contact, .page-recrutement, .page-prestations) .soirees-form .gform_wrapper select {
  width: 100%;
  margin: 0;
  background-color: var(--blanc);
  border: 1px solid rgba(124, 77, 61, 0.28);
  border-radius: 0.65rem;
  padding: 0.55em 0.8em;
  font: inherit;
  color: var(--brun);
}
/* Sélecteur de dates : flèche maison (chevron brun), rendu natif neutralisé. */
:is(.conditions, .page-contact, .page-recrutement, .page-prestations) .soirees-form .gform_wrapper select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237C4D3D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8em center;
  background-size: 0.7em auto;
  padding-right: 2.3em;
}
/* Case de consentement (formulaire contact) : case dans la palette, phrase en petit corps. */
:is(.conditions, .page-contact, .page-recrutement, .page-prestations) .soirees-form .gform_wrapper .ginput_container_consent {
  display: flex;
  align-items: flex-start;
  gap: 0.55em;
}
:is(.conditions, .page-contact, .page-recrutement, .page-prestations) .soirees-form .gform_wrapper input[type="checkbox"] {
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
  margin: 0.2em 0 0;
  accent-color: var(--brun);
}
:is(.conditions, .page-contact, .page-recrutement, .page-prestations) .soirees-form .gform_wrapper .ginput_container_consent .gform-field-label {
  margin: 0;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.4;
}
:is(.conditions, .page-contact, .page-recrutement, .page-prestations) .soirees-form .gfield_description {
  margin-top: 0.3rem;
  padding: 0;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.4;
  color: rgba(124, 77, 61, 0.75);
}

/* États d'erreur : tout reste dans la palette (corail texte), pas de rouge système. */
:is(.conditions, .page-contact, .page-recrutement, .page-prestations) .soirees-form .gform_wrapper .gform_validation_errors {
  margin: 0 0 0.9rem;
  padding: 0.7em 0.9em;
  background: var(--blanc);
  border: 1px solid var(--corail-texte);
  border-radius: 0.65rem;
  box-shadow: none;
}
:is(.conditions, .page-contact, .page-recrutement, .page-prestations) .soirees-form .gform_wrapper .gform_submission_error {
  margin: 0;
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1.4;
  color: var(--corail-texte);
}
:is(.conditions, .page-contact, .page-recrutement, .page-prestations) .soirees-form .gform_wrapper .gform-icon { display: none; } /* icône fonte du plugin */
:is(.conditions, .page-contact, .page-recrutement, .page-prestations) .soirees-form .gform_wrapper .gfield_error input,
:is(.conditions, .page-contact, .page-recrutement, .page-prestations) .soirees-form .gform_wrapper .gfield_error select { border-color: var(--corail-texte); }
:is(.conditions, .page-contact, .page-recrutement, .page-prestations) .soirees-form .gform_wrapper .gfield_error .gfield_label { color: inherit; }
:is(.conditions, .page-contact, .page-recrutement, .page-prestations) .soirees-form .gform_wrapper .gfield_validation_message {
  margin-top: 0.3rem;
  padding: 0;
  background: none;
  border: 0;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--corail-texte);
}

/* Pied et envoi : la pill brune de la base, le spinner ajax à distance du bouton. */
:is(.conditions, .page-contact, .page-recrutement, .page-prestations) .soirees-form .gform_wrapper .gform_footer { margin: 0; padding: 0.35rem 0 0; }
:is(.conditions, .page-contact, .page-recrutement, .page-prestations) .soirees-form .gform_wrapper .gform_ajax_spinner { margin-left: 0.6rem; }

/* Confirmation (ajax) : petit mot sur carte blanche, à la place du formulaire. */
:is(.conditions, .page-contact, .page-recrutement, .page-prestations) .soirees-form .gform_confirmation_message {
  display: block;
  background: var(--blanc);
  border-radius: 0.65rem;
  padding: 0.9em 1em;
  font-weight: 300;
  line-height: 1.5;
}

/* Comment s'inscrire ? 4 formes Disco Deco violettes (cercle, colonne ondulée, blob, arche ; ~336 de haut) avec le numéro corail foncé par-dessus (306.5) */
.inscription-grille {
  list-style: none;
  padding: 0;
  margin: max(calc(30 * var(--s)), 1.75rem) 0 0;
  display: grid;
  gap: 2.25rem 1.5rem;
}
@media (min-width: 36rem) { .inscription-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.inscription-etape { text-align: center; }
.inscription-etape__forme {
  /* --sc a un plancher à 70 % : sur téléphone la forme est en plus bornée par la largeur d'écran */
  --forme-h: min(calc(336 * var(--sc)), 42vw);
  position: relative;
  height: var(--forme-h);
  display: flex;
  align-items: center;
  justify-content: center;
}
.inscription-etape__forme .picto {
  /* Toutes les formes à la même hauteur : le SVG prend la hauteur de la boîte et sa largeur suit le ratio du glyphe (le cercle peut déborder de quelques px sur la gouttière, il reste centré). */
  height: 100%;
  width: auto;
  flex-shrink: 0;
  color: var(--violet);
}
.inscription-etape__num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--forme-h) * 0.912); /* 306.5 pour une forme de 336 : le numéro suit la forme à toutes les tailles */
  line-height: 1;
  letter-spacing: 0;
  color: var(--corail-fonce);
  /* Calage encre : les chiffres Disco portent leur encre haut dans l'em (centre d'encre 31px au-dessus du centre de la forme pour 336). Recalé en % de la forme pour tenir à toutes les tailles. */
  transform: translateY(calc(var(--forme-h) * 0.092));
}
/* Blob (picto v) asymétrique : le chiffre se loge dans la partie pleine (≈ −35px pour 336, calé à l'encre), sans changer sa hauteur pour rester aligné avec les autres chiffres. */
.picto--v + .inscription-etape__num { transform: translate(calc(var(--forme-h) * -0.105), calc(var(--forme-h) * 0.092)); }
.inscription-etape__titre {
  font-weight: 400;
  font-size: max(calc(28 * var(--s)), 1.125rem);
  line-height: 1.2;
  color: var(--brun);
  margin-top: max(calc(60 * var(--s)), 1.25rem);
}
.inscription-etape__texte {
  font-size: max(calc(28 * var(--s)), 1.0625rem);
  font-weight: 300;
  line-height: 1.25;
  margin-top: max(calc(8 * var(--s)), 0.4rem);
  padding-inline: max(calc(10 * var(--s)), 0.25rem);
}

@media (min-width: 62.0625rem) {
  /* En-tête, marge du corps et position du blob : aucune surcharge, tout vient de .parcours. */
  /* Sous-nav : libellés courts (champs *_nav) sur une ligne ; le retour à la ligne reste permis
     si la cliente saisit un libellé long */
  .conditions .parcours__nav-lien { white-space: normal; line-height: 1.2; }
  .conditions .parcours__nav-liste li + li { margin-top: max(calc(10 * var(--s)), 0.45rem); }

  .conditions-section__droite { margin-top: 0; }

  /* Décors photo : plus hauts que sur le parcours, les sections sont plus courtes (maquette : +340 / +316) */
  .conditions .etape__decor--droite,
  .conditions .etape__decor--droite-air { top: calc(330 * var(--s)); }

  /* Tableau : bandes saumon alignées sur le bord de colonne (texte à x1300 sur la maquette),
     le padding des cellules déborde symétriquement dans les gouttières */
  .tarifs-table {
    width: calc(100% + 2 * max(calc(12 * var(--s)), 0.6rem));
    margin-inline: calc(-1 * max(calc(12 * var(--s)), 0.6rem));
  }
  /* La colonne Montant garde sa part : « (partenariat La Petite Cigogne) » tient sur une ligne à 2560 */
  .tarifs-table th.tarifs-table__montant { width: 38%; }

  /* Timeline d'inscription : pleine largeur sous le kicker/H2, 4 colonnes (maquette 600→1960) */
  .inscription-grille {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: max(calc(20 * var(--s)), 1.25rem);
  }
}

/* =============================================================
   PAGE L'ÉQUIPE (page-equipe.php)
   Maquette grille.pdf : cartes 430×384 radius 22, colonnes x601/1065/1530, picto violet ~60 (x+22, y+28), photo ronde ∅181 (y+29), nom Disco Deco 20 (y+242), lignes ExtraLight 20 brun (interligne 24, y+267). C'est le composant .team-card de la home, réutilisé tel quel (écarts assumés : photo ∅205, gouttière 35 aussi en vertical, fond corail). Ce bloc ne porte que l'en-tête de section, la grille et les ajouts de carte.
   ============================================================= */

/* Les sections équipe ne sont pas en deux colonnes : en-tête puis grille pleine largeur. */
.equipe-section { display: block; }

/* Sur cette page les cartes sont corail plein (cote maquette grille) : sur crème, le corail clair de la home manquait d'assise. */
.page-equipe .team-card { background: var(--corail); }

/* Longueur de ligne de l'intro : ~deux tiers du container. */
.equipe-section__entete .etape__lead { max-width: 38rem; }

/* La grille de cartes (mêmes cotes que .equipe__grid de la home). */
.equipe-grille {
  --eq-gap: 1.25rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--eq-gap);
  margin-top: 2rem;
}

/* Le comité : cartes compactes sans photo, picto centré au-dessus du nom, fonction en dessous, rangées centrées (7 membres = 4 + 3). */
.equipe-grille--compacte {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.equipe-grille--compacte .team-card {
  flex: 0 1 calc((100% - var(--eq-gap)) / 2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* avec ou sans fonction, le bloc picto + nom reste au centre */
  text-align: center;
  min-height: 9.5rem; /* même hauteur pour toutes : les rangées restent régulières */
  padding: 1.25rem 0.8rem 1.4rem;
}
.team-card--compacte .team-card__picto { position: static; margin-bottom: 0.9rem; }
.team-card--compacte .team-card__nom { margin-bottom: 0.35rem; }
.team-card--compacte .team-card__details { text-align: center; }
.equipe-section__lien { margin-top: 2rem; text-align: center; }

/* Photo de groupe d'une section : .etape__photo en paysage. Les cartes passent en compactes. */
.equipe-section__photo { position: relative; z-index: 2; aspect-ratio: 3 / 2; margin-top: 2rem; }
.equipe-section--photo .equipe-grille { margin-top: var(--eq-gap); }

/* Cartes sages-femmes : deux colonnes tant que trois ne laissent pas la place aux spécialités et aux coordonnées. */
@media (min-width: 62.0625rem) and (max-width: 93.6875rem) {
  .equipe-section--sages-femmes .equipe-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 62.0625rem) {
  .equipe-section { display: block; } /* prime sur la grille 2 colonnes de .etape */
  .equipe-section__entete .etape__lead { max-width: max(calc(880 * var(--s)), 38rem); }
  .equipe-grille {
    --eq-gap: max(calc(35 * var(--s)), 1.25rem); /* gouttière maquette 35 (vertical ~31 : cote commune, écart assumé) */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: max(calc(52 * var(--s)), 2rem); /* même respiration que la grille équipe de la home */
  }
  /* Deux cartes seulement (la direction) : mêmes largeurs de carte que les
     autres rangées, la paire est centrée dans le container. */
  .equipe-grille--paire {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: calc((100% - 2 * var(--eq-gap)) / 3 * 2 + var(--eq-gap));
    margin-inline: auto;
  }
  .equipe-grille--compacte .team-card {
    flex-basis: calc((100% - 3 * var(--eq-gap)) / 4);
    min-height: max(calc(200 * var(--s)), 9.5rem);
    padding-block: max(calc(30 * var(--s)), 1.25rem) max(calc(34 * var(--s)), 1.4rem);
  }
  .team-card--compacte .team-card__picto { margin-bottom: max(calc(20 * var(--s)), 0.9rem); }
  .page-equipe .parcours__nav-liste li + li { margin-top: max(calc(10 * var(--s)), 0.45rem); } /* 4 entrées depuis le comité : aération de Conditions */
  .equipe-section__lien { margin-top: max(calc(52 * var(--s)), 2rem); }
}

/* Section avec photo de groupe. Sous 1280 px les deux colonnes seraient trop étroites : elle reste empilée, deux cartes par rangée. */
@media (min-width: 62.0625rem) and (max-width: 79.9375rem) {
  .equipe-section--photo .equipe-grille--compacte .team-card { flex-basis: calc((100% - var(--eq-gap)) / 2); }
}
/* Dès 1280 px elle retrouve les deux colonnes de .etape : texte à gauche, photo à droite, cartes dessous. */
@media (min-width: 80rem) {
  .equipe-section.equipe-section--photo { display: grid; align-items: center; }
  .equipe-section__photo { width: 100%; margin: 0; }
  .equipe-section--photo .equipe-grille,
  .equipe-section--photo .equipe-section__lien { grid-column: 1 / -1; }
  .equipe-section--photo .equipe-grille { margin-top: max(calc(52 * var(--s)), 2rem); }
}

/* =============================================================
   PAGE LA MAISON (page-la-maison.php)
   Ossature .parcours et composants existants (kicker + H2 de Conditions, cartes .secu-card de la home, .etape__photo du parcours). Ce bloc ne porte que les composants propres : phrase mise en avant, collage photos, chiffres du lieu, grille sécurité à 6 cartes.
   ============================================================= */

/* Les sections « bloc » (Le lieu, Sécurité) ne sont pas en deux colonnes :
   en-tête puis contenu pleine largeur (même mécanisme que la page L'équipe). */
.maison-section--bloc { display: block; }
.maison-section--bloc .etape__lead { max-width: 38rem; } /* longueur de ligne de l'intro (cote équipe) */

/* Phrase mise en avant (philosophie) : violet lead, un cran au-dessus du texte courant, en tête de la colonne de droite. */
.maison-avant {
  font-weight: 200;
  font-size: var(--fs-lead);
  line-height: 1.35;
  color: var(--violet);
}
.maison-avant + .conditions__texte { margin-top: 1rem; }

/* Lien flèche en fin de colonne (Découvrir l'équipe). */
.maison-lien { margin-top: 1.25rem; }

/* Collage photos du lieu : le langage de la galerie home étendu à 5 photos sur deux rangées ; ratios fixés par position (object-fit: cover). */
.maison-galerie { margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.maison-galerie__item { border-radius: var(--radius-photo); overflow: hidden; }
.maison-galerie__img { width: 100%; height: 100%; object-fit: cover; }
.maison-galerie__item--1, .maison-galerie__item--5 { aspect-ratio: 4 / 3; }
.maison-galerie__item--2, .maison-galerie__item--4 { aspect-ratio: 16 / 10; }
.maison-galerie__item--3 { aspect-ratio: 3 / 4; }

/* Les chiffres du lieu : Disco Deco corail foncé (écho des chiffres clés de la home), légendes noires. */
.maison-chiffres {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 1.5rem;
  margin-top: 2.5rem;
}
.maison-chiffre__nombre {
  display: block;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--corail-fonce);
}
.maison-chiffre__legende {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.4;
  color: var(--noir);
}

/* Sécurité : les cartes violettes de la home (composant .secu-card), six ici. */
.maison-secu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

@media (min-width: 62.0625rem) {
  /* En-tête, marge du corps et position du blob : aucune surcharge, tout vient de .parcours. */
  /* Sous-nav : 5 entrées, mêmes règles d'aération que Conditions & tarifs. */
  .page-maison .parcours__nav-lien { white-space: normal; line-height: 1.2; }
  .page-maison .parcours__nav-liste li + li { margin-top: max(calc(10 * var(--s)), 0.45rem); }

  .maison-section--bloc .etape__lead { max-width: max(calc(880 * var(--s)), 38rem); }
  .maison-avant { font-size: max(calc(34 * var(--s)), 1.3125rem); }
  .maison-avant + .conditions__texte { margin-top: max(calc(24 * var(--s)), 1rem); }
  .maison-lien { margin-top: max(calc(34 * var(--s)), 1.25rem); }

  /* Collage : quinconce sur la grille 12 colonnes du container (comme la home),
     deux rangées qui se chevauchent légèrement. */
  .maison-galerie {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: start;
    gap: 0;
    margin-top: max(calc(52 * var(--s)), 2rem);
  }
  .maison-galerie__item--1 { grid-column: 1 / 6; grid-row: 1; margin-top: 3.5rem; z-index: 2; }
  .maison-galerie__item--2 { grid-column: 5 / 11; grid-row: 1; }
  .maison-galerie__item--3 { grid-column: 10 / 13; grid-row: 1; margin-top: 6rem; z-index: 2; }
  .maison-galerie__item--4 { grid-column: 2 / 7; grid-row: 2; margin-top: -2rem; z-index: 3; }
  .maison-galerie__item--5 { grid-column: 7 / 12; grid-row: 2; margin-top: 2.5rem; }

  .maison-chiffres {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: max(calc(35 * var(--s)), 1.5rem);
    margin-top: max(calc(80 * var(--s)), 2.75rem);
  }
  .maison-chiffre__nombre { font-size: max(calc(84 * var(--s)), 2.6rem); }
  .maison-chiffre__legende { font-size: max(calc(24 * var(--s)), var(--fs-body)); margin-top: max(calc(12 * var(--s)), 0.4rem); }

  .maison-secu {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: max(calc(35 * var(--s)), 1.25rem);
    margin-top: max(calc(52 * var(--s)), 2rem);
  }
}

/* =============================================================
   PAGE COURS & PRESTATIONS (page-prestations.php)
   Aucun séparateur .ondule : la respiration vient des vagues de la home et de la bande saumon du café des parents (vague d'entrée, bas plat). Composants réutilisés : kicker + H2 de Conditions, encadré brun .conditions-rembours, cartes .soiree (sessions, CPT lr_session), pill primaire. Ce bloc ne porte que les composants propres.
   ============================================================= */

/* La section répertoire n'est pas en deux colonnes : en-tête puis grille
   pleine largeur (même mécanisme que les pages L'équipe et La maison). */
.presta-section--bloc { display: block; }
.presta-section--bloc .etape__lead { max-width: 38rem; }

/* Phrase mise en avant (préparation) : même recette que .maison-avant. */
.presta-avant { font-weight: 200; font-size: var(--fs-lead); line-height: 1.35; color: var(--violet); }
.presta-avant + .conditions__texte { margin-top: 1rem; }

/* Prochaines sessions : cartes .soiree pleine largeur sous les deux colonnes
   (l'encadré « En pratique » réutilise .conditions-rembours, zéro style ici). */
.presta-sessions { margin-top: 2.25rem; }
.presta-sessions__liste { display: grid; gap: max(calc(16 * var(--s)), 0.7rem); }
.presta-sessions__liste li + li { margin-top: 0; } /* la grille porte l'écart (annule la marge de .soirees-dates) */
.presta-sessions__cta { margin-top: 1.5rem; }

/* Bande « Le café des parents » : saumon pleine largeur au milieu de la page. Elle vit dans le couloir de contenu (la nav blob sticky reste par-dessus) et en sort par marges négatives (mobile : la gouttière, desktop : la marge du couloir). */
.presta-cafe { position: relative; margin-inline: calc(-1 * var(--gutter)); margin-block: 2.5rem; scroll-margin-top: 3.5rem; }
.presta-cafe__wave { line-height: 0; }
.presta-cafe__corps { background: var(--saumon); padding: 2rem var(--gutter) 2.25rem; } /* le texte respire loin des vagues */
.presta-cafe__inner { max-width: 38rem; margin-inline: auto; text-align: center; }
/* Le titre de la bande prend la voix Thin des grands titres (un cran sous la bande CTA) : la bande est un moment de la page, pas une section. */
.presta-cafe .conditions__h2 { font-weight: 100; font-size: 1.875rem; line-height: 1.15; text-wrap: balance; }
.presta-cafe__texte { font-size: max(calc(28 * var(--s)), 1.0625rem); font-weight: 300; line-height: 1.4; margin-top: 0.5rem; }
.presta-cafe__badge {
  display: inline-block;
  margin-top: 1.1rem;
  font-size: max(calc(20 * var(--s)), 0.9375rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  padding: 0.3em 1.05em;
  border-radius: 999px;
  background: var(--lavande); /* la pastille « Places disponibles » des cartes soirée */
  color: var(--noir);
}
.presta-cafe__infos { margin-top: 0.7rem; font-size: var(--fs-small); font-weight: 400; color: var(--brun); }

/* Grille du répertoire : cartes saumon, picto violet, nom Disco Deco noir comme les cartes équipe. */
.presta-grille { margin-top: 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem; }
.presta-card { background: var(--saumon); border-radius: var(--radius-card); padding: 1.4rem 1.4rem 1.6rem; }
.presta-card__picto { display: inline-flex; color: var(--violet); }
.presta-card__picto .picto { width: 2.25rem; height: 2.25rem; }
/* nom en Antarctica Regular : Disco Deco sous ~28 px sur des mots ne se lit pas. */
.presta-card__nom { margin-top: 0.9rem; font-size: 1.25rem; font-weight: 400; line-height: 1.25; color: var(--noir); text-wrap: balance; }
.presta-card__texte { margin-top: 0.7rem; font-size: 1rem; font-weight: 300; line-height: 1.5; }
.presta-card__prat { margin-top: 0.8rem; }
.presta-card__prat--texte { font-size: 1rem; font-weight: 400; }
.presta-card__partenaire { display: inline-block; margin-top: 0.6rem; padding: 0.25em 0.9em; border-radius: 1rem; background: var(--lavande); color: var(--noir); font-size: 0.9375rem; font-weight: 400; line-height: 1.3; }
.presta-card__infos { margin-top: 0.6rem; font-size: 1rem; font-weight: 300; line-height: 1.5; color: var(--corail-texte); }

@media (min-width: 62.0625rem) {
  /* En-tête, marge du corps et position du blob : aucune surcharge, tout vient de .parcours. */
  .presta-section--bloc { display: block; } /* prime sur la grille 2 colonnes de .etape */
  .presta-section--bloc .etape__lead { max-width: max(calc(880 * var(--s)), 38rem); }
  .presta-avant { font-size: max(calc(34 * var(--s)), 1.3125rem); }
  .presta-avant + .conditions__texte { margin-top: max(calc(24 * var(--s)), 1rem); }

  /* Sessions : rangée pleine largeur sous les deux colonnes, deux cartes par ligne. */
  .presta-sessions { grid-column: 1 / -1; margin-top: max(calc(70 * var(--s)), 2.25rem); }
  .presta-sessions__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: max(calc(24 * var(--s)), 1rem) max(calc(35 * var(--s)), 1.5rem); }
  .presta-sessions__cta { margin-top: max(calc(40 * var(--s)), 1.5rem); }

  /* Bande café : pleine largeur d'écran (marges négatives = la marge du couloir). */
  .presta-cafe { margin-inline: calc(-1 * var(--marge)); margin-block: max(calc(150 * var(--s)), 4.5rem) max(calc(130 * var(--s)), 4rem); }
  .presta-cafe__corps { padding: max(calc(30 * var(--s)), 1.5rem) var(--gutter) max(calc(70 * var(--s)), 2.75rem); }
  .presta-cafe__inner { max-width: max(calc(880 * var(--s)), 38rem); }
  .presta-cafe .conditions__h2 { font-size: max(calc(54 * var(--s)), 2rem); }
  .presta-cafe__texte { margin-top: max(calc(14 * var(--s)), 0.6rem); }
  .presta-cafe__badge { margin-top: max(calc(28 * var(--s)), 1.1rem); }

  /* Le bouton d'inscription suit l'échelle de la maquette (la pill primaire fixe restait naine à 2560). */
  .presta-sessions__cta .btn--primary { font-size: max(calc(22 * var(--s)), 1rem); padding: max(calc(20 * var(--s)), 0.75rem) max(calc(46 * var(--s)), 1.7rem); }

  /* Grille du répertoire en flex : la dernière rangée se centre (5 cartes → 3 + 2), contrairement à la grille équipe qui reste alignée. */
  .presta-grille {
    --pg-gap: max(calc(35 * var(--s)), 1.25rem);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--pg-gap);
    margin-top: max(calc(52 * var(--s)), 2rem);
  }
  .presta-card { width: calc((100% - 2 * var(--pg-gap)) / 3); }
  .presta-card__picto .picto { width: max(calc(60 * var(--s)), 2.25rem); height: max(calc(60 * var(--s)), 2.25rem); }
  .presta-card__nom { font-size: max(calc(34 * var(--s)), 1.375rem); margin-top: max(calc(22 * var(--s)), 0.9rem); }
  .presta-card__texte { font-size: max(calc(22 * var(--s)), 1rem); margin-top: max(calc(16 * var(--s)), 0.7rem); }
  .presta-card__prat--texte, .presta-card__infos { font-size: max(calc(20 * var(--s)), 1rem); }
  .presta-card__partenaire { margin-top: max(calc(14 * var(--s)), 0.6rem); font-size: max(calc(17 * var(--s)), 0.9375rem); }
}

/* =============================================================
   PAGE FAQ (page-faq.php)
   Aucun séparateur .ondule : l'en-tête kicker + H2 fait la coupure, les cartes blanches des questions (padding et corps des cartes .soiree) portent la texture. Dépliage natif (details/summary), zéro JavaScript ; le disque saumon à chevron reprend le langage des liens flèche. Les cartes prennent toute la largeur du couloir, seule la longueur de ligne des réponses est plafonnée.
   ============================================================= */

/* Les sections FAQ ne sont pas en deux colonnes : en-tête puis liste
   (même mécanisme que les pages L'équipe, La maison et Prestations). */
.faq-section { display: block; }
.faq-section + .faq-section { margin-top: 2.75rem; }

.faq-liste { margin-top: 1.25rem; }

/* Une question = une carte blanche dépliable (padding et corps des cartes
   .soiree). Le marqueur natif du summary est remplacé par le disque à
   chevron du langage des liens flèche. */
.faq-item { background: var(--blanc); border-radius: var(--radius-card); }
.faq-item + .faq-item { margin-top: 0.6rem; }
.faq-item__q {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: max(calc(20 * var(--s)), 0.9rem) max(calc(26 * var(--s)), 1.1rem);
  font-weight: 400;
  font-size: max(calc(28 * var(--s)), 1.0625rem);
  line-height: 1.3;
  color: var(--brun);
  cursor: pointer;
  list-style: none;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q-texte { flex: 1; min-width: 0; }
.faq-item__marque {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max(calc(30 * var(--s)), 1.4rem);
  height: max(calc(30 * var(--s)), 1.4rem);
  margin-top: 0.05em;
  border-radius: 999px;
  background: var(--saumon);
  color: var(--brun);
  transition: background var(--transition);
}
.faq-item__marque svg { transition: transform var(--transition); }
.faq-item__q:hover .faq-item__marque { background: var(--abricot); }
.faq-item[open] .faq-item__marque svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .faq-item__marque svg { transition: none; }
}
.faq-item__r {
  padding: 0 max(calc(26 * var(--s)), 1.1rem) max(calc(24 * var(--s)), 1.1rem);
  font-size: max(calc(28 * var(--s)), 1.0625rem);
  font-weight: 300;
  line-height: 1.45;
}
.faq-item__r p + p { margin-top: 0.5rem; }
.faq-item__r .arrow-link { margin-top: 0.8rem; }

@media (min-width: 62.0625rem) {
  /* En-tête, marge du corps et position du blob : aucune surcharge, tout vient de .parcours. */
  .faq-section { display: block; } /* prime sur la grille 2 colonnes de .etape */
  /* Sous-nav : 6 entrées, mêmes règles d'aération que Conditions & tarifs. */
  .page-faq .parcours__nav-lien { white-space: normal; line-height: 1.2; }
  .page-faq .parcours__nav-liste li + li { margin-top: max(calc(10 * var(--s)), 0.45rem); }

  /* Sans .ondule, l'air entre deux catégories fait la coupure (l'équivalent
     des marges du séparateur des autres pages internes). */
  .faq-section + .faq-section { margin-top: max(calc(120 * var(--s)), 3.75rem); }
  .faq-liste { margin-top: max(calc(30 * var(--s)), 1.25rem); }
  .faq-item + .faq-item { margin-top: max(calc(16 * var(--s)), 0.6rem); }
  /* Les cartes courent sur tout le couloir ; la ligne de réponse s'arrête à ~65-70 caractères. */
  .faq-item__r { max-width: max(calc(1000 * var(--s)), 40rem); }
}

/* =============================================================
   PAGE CONTACT (page-contact.php)
   Aucun séparateur .ondule : le formulaire est le moment de la page, porté par la bande saumon .contact-ecrire (vague d'entrée, bas plat, sortie du couloir par marges négatives). Composants réutilisés : kicker + H2 de Conditions, items .etape-item pour les coordonnées, liste .conditions-liste (accès), champs GF de .soirees-form, bande CTA .parcours-cta. Ce bloc ne porte que la photo, la bande et la grille de champs.
   ============================================================= */

/* Les coordonnées reprennent les items du parcours ; seule la marge au-dessus
   de la liste est propre à la page. */
.contact-coord__liste { margin-top: 1.5rem; }

/* La photo de la sonnette tient lieu de carte (pas d'iframe Google Maps : cookies tiers). Portrait 3:4, grand radius photo. */
.contact-photo {
  width: 75.76%; /* 500 sur une colonne de 660, comme .etape__photo */
  margin: 1.5rem auto 0;
  border-radius: max(calc(40 * var(--s)), 1.25rem);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--saumon);
}
.contact-photo__img { width: 100%; height: 100%; object-fit: cover; }
.contact-itineraire { margin-top: 1rem; text-align: center; }

/* Bande « Écrivez-nous » : le formulaire au centre de la page, sur saumon
   pleine largeur (recette .presta-cafe : vague d'entrée seulement, bas plat). */
.contact-ecrire { position: relative; margin-inline: calc(-1 * var(--gutter)); margin-block: 2.5rem; scroll-margin-top: 3.5rem; }
.contact-ecrire__wave { line-height: 0; }
.contact-ecrire__corps { background: var(--saumon); padding: 2rem var(--gutter) 2.5rem; } /* le texte respire loin de la vague */
.contact-ecrire__inner { max-width: 38rem; margin-inline: auto; text-align: center; }
/* Le titre de la bande prend la voix Thin des grands titres, comme la bande café : un moment, pas une section. */
.contact-ecrire .conditions__h2 { font-weight: 100; font-size: 1.875rem; line-height: 1.15; text-wrap: balance; }
.contact-ecrire__texte { font-size: max(calc(28 * var(--s)), 1.0625rem); font-weight: 300; line-height: 1.4; margin-top: 0.5rem; }
.contact-ecrire__infos { margin-top: 0.7rem; font-size: var(--fs-small); font-weight: 400; color: var(--brun); }

/* Les champs vivent directement sur la bande : la « carte » saumon de
   .soirees-form disparaît (même saumon), ses styles de champs restent. */
.contact-ecrire__form { background: none; border-radius: 0; padding: 0; margin-top: 1.75rem; text-align: left; }
.contact-ecrire__form .soirees-form__repli { text-align: center; }
.contact-ecrire__form .arrow-link { display: inline-flex; }
.contact-ecrire__form:has(.soirees-form__repli) { text-align: center; }

@media (min-width: 62.0625rem) {
  /* En-tête, marge du corps et position du blob : aucune surcharge, tout vient de .parcours. */
  .contact-coord__liste { margin-top: max(calc(40 * var(--s)), 1.5rem); }
  .contact-photo { margin-top: 0; }
  .contact-itineraire { margin-top: max(calc(24 * var(--s)), 1rem); }

  /* Décors photo : mêmes hauteurs que Conditions (sections courtes). */
  .page-contact .etape__decor--droite,
  .page-contact .etape__decor--droite-air { top: calc(330 * var(--s)); }

  /* Bande : pleine largeur d'écran (marges négatives = la marge du couloir). */
  .contact-ecrire { margin-inline: calc(-1 * var(--marge)); margin-block: max(calc(150 * var(--s)), 4.5rem) max(calc(130 * var(--s)), 4rem); }
  .contact-ecrire__corps { padding: max(calc(30 * var(--s)), 1.5rem) var(--gutter) max(calc(80 * var(--s)), 3rem); }
  .contact-ecrire__inner { max-width: max(calc(880 * var(--s)), 38rem); }
  .contact-ecrire .conditions__h2 { font-size: max(calc(54 * var(--s)), 2rem); }
  .contact-ecrire__texte { margin-top: max(calc(14 * var(--s)), 0.6rem); }

  /* Le formulaire garde une colonne confortable au centre de la bande. */
  .contact-ecrire__form { max-width: max(calc(720 * var(--s)), 34rem); margin-inline: auto; margin-top: max(calc(45 * var(--s)), 1.75rem); }
  .contact-ecrire__infos { font-size: max(calc(20 * var(--s)), 1rem); }
  /* Grille GF 12 colonnes : prénom|nom, email|téléphone, terme|enfants côte à côte (classes gfield--width-half du markup gravity-theme) ; la carte étroite de Conditions reste sur une colonne. */
  :is(.page-contact, .page-recrutement, .conditions-demande, .presta-inscription) .soirees-form .gform_fields { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: max(calc(24 * var(--s)), 0.9rem) max(calc(30 * var(--s)), 1.1rem); }
  :is(.page-contact, .page-recrutement, .conditions-demande, .presta-inscription) .soirees-form .gfield { grid-column: 1 / -1; }
  :is(.page-contact, .page-recrutement, .conditions-demande, .presta-inscription) .soirees-form .gfield--width-half { grid-column: span 6; }
  /* Sur la bande, le formulaire est le sujet : ses corps suivent l'échelle maquette (dans la carte étroite de Conditions ils restent fixes). */
  :is(.page-contact, .page-recrutement, .conditions-demande, .presta-inscription) .soirees-form label,
  :is(.page-contact, .page-recrutement, .conditions-demande, .presta-inscription) .soirees-form .gfield_label { font-size: max(calc(22 * var(--s)), 1rem); }
  :is(.page-contact, .page-recrutement, .conditions-demande, .presta-inscription) .soirees-form .gform_wrapper input[type="text"],
  :is(.page-contact, .page-recrutement, .conditions-demande, .presta-inscription) .soirees-form .gform_wrapper input[type="email"],
  :is(.page-contact, .page-recrutement, .conditions-demande, .presta-inscription) .soirees-form .gform_wrapper input[type="tel"],
  :is(.page-contact, .page-recrutement, .conditions-demande, .presta-inscription) .soirees-form .gform_wrapper textarea,
  :is(.page-contact, .page-recrutement, .conditions-demande, .presta-inscription) .soirees-form .gform_wrapper select {
    font-size: max(calc(24 * var(--s)), 1.0625rem);
    padding: max(calc(14 * var(--s)), 0.55em) max(calc(20 * var(--s)), 0.8em);
  }
  :is(.page-contact, .page-recrutement, .conditions-demande, .presta-inscription) .soirees-form .gform_wrapper select { padding-right: 2.3em; } /* la flèche maison garde sa place */
  :is(.page-contact, .page-recrutement, .conditions-demande, .presta-inscription) .soirees-form input[type="submit"],
  :is(.page-contact, .page-recrutement, .conditions-demande, .presta-inscription) .soirees-form button[type="submit"] {
    font-size: max(calc(24 * var(--s)), 1.0625rem);
    padding: max(calc(18 * var(--s)), 0.7em) max(calc(42 * var(--s)), 1.6em);
    margin-top: max(calc(10 * var(--s)), 0.35rem);
  }
  :is(.page-contact, .page-recrutement, .conditions-demande, .presta-inscription) .soirees-form .gform_required_legend,
  :is(.page-contact, .page-recrutement, .conditions-demande, .presta-inscription) .soirees-form .gfield_description,
  :is(.page-contact, .page-recrutement, .conditions-demande, .presta-inscription) .soirees-form .gform_wrapper .gfield_validation_message { font-size: max(calc(18 * var(--s)), 0.9375rem); }
  :is(.page-contact, .page-recrutement, .conditions-demande, .presta-inscription) .soirees-form .gform_wrapper .ginput_container_consent .gform-field-label { font-size: max(calc(20 * var(--s)), 1rem); }
  :is(.page-contact, .page-recrutement, .conditions-demande, .presta-inscription) .soirees-form .gform_wrapper input[type="checkbox"] { width: max(calc(24 * var(--s)), 1.05em); height: max(calc(24 * var(--s)), 1.05em); }

  /* Cercle footer « Appelez-nous » : à corps égal le libellé est plus court que « Nous contacter » et flottait dans le rond ; recalé à ~93 % du diamètre, la fleur suit la demi-hauteur de ligne du nouveau corps (47 × 1.2 / 2 ≈ 28). */
  .page-template-page-contact .site-footer .circle-cta__label { font-size: calc(47 * var(--sc)); }
  .page-template-page-contact .site-footer .circle-cta__star { bottom: calc(50% + 28 * var(--sc) + var(--cta-gap)); }
}

/* =============================================================
   PAGES BLOG / ACTUALITÉS (home.php, archive.php, single.php)
   Aucun séparateur .ondule : les photos des cartes portent la texture, la bande CTA fait la sortie. Sur l'archive, la sous-nav blob est un filtre (entrée active posée côté PHP). Écarts de gabarit assumés : le H1 d'un article prend la voix Thin 85.6 des bandes CTA (un titre d'article est une phrase) ; la grille reste alignée à gauche comme la grille équipe.
   ============================================================= */

/* --- Grille de cartes (archive + « À lire aussi » d'un article) --- */
.blog-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem;
}
.blog-card {
  background: var(--blanc);
  border-radius: var(--radius-card);
  overflow: hidden; /* l'image épouse les coins hauts de la carte */
  display: flex;
  flex-direction: column;
}
.blog-card__media {
  display: block;
  aspect-ratio: 970 / 509; /* le ratio de la carte actus de la home */
  background: var(--saumon);
  position: relative;
}
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; }
.blog-card__vase {
  /* Sans image mise en avant : le vase violet sur saumon de la home. */
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--violet);
}
.blog-card__vase .picto { width: 26%; height: auto; }
.blog-card__corps {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.1rem 1.2rem 1.3rem;
}
.blog-card__meta {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-bottom: 0.55rem;
}
.blog-card__date {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.125rem; /* plancher 18 px, le plancher des labels display (16 px restait dur à lire) */
  color: var(--violet);
}
.blog-card__cat { font-size: var(--fs-small); font-weight: 400; color: var(--brun); }
.blog-card__titre {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--violet);
  margin-bottom: 0.6rem;
  text-wrap: balance;
}
.blog-card__titre a { text-decoration: none; }
.blog-card__titre a:hover { text-decoration: underline; }
.blog-card__extrait { font-size: 1rem; font-weight: 300; line-height: 1.5; color: var(--noir); }
.blog-card__lire { margin-top: auto; padding-top: 1rem; } /* le lien flèche se cale au bas de la carte, toutes cartes alignées */

/* --- Pagination : les chips de la sous-nav mobile (saumon, active lavande), flèches en disques bruns comme les liens flèche. --- */
.blog-pagination { margin-top: 2.5rem; }
.blog-pagination .nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.blog-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 0.9rem;
  border-radius: 999px;
  background: var(--saumon);
  color: var(--brun);
  font-weight: 300;
  font-size: var(--fs-small);
  text-decoration: none;
  transition: background var(--transition);
}
.blog-pagination a.page-numbers:hover { background: var(--abricot); }
.blog-pagination .page-numbers.current { background: var(--lavande); color: var(--noir); }
.blog-pagination .page-numbers.dots { background: none; min-width: auto; padding: 0; }
.blog-pagination .page-numbers.prev,
.blog-pagination .page-numbers.next { background: var(--brun); color: var(--creme); padding: 0; width: 2.4rem; }
.blog-pagination .page-numbers.prev:hover,
.blog-pagination .page-numbers.next:hover { background: #684035; }

/* --- Archive vide (avant l'import des premiers articles) --- */
.blog-vide {
  background: var(--blanc);
  border-radius: var(--radius-card);
  padding: 2rem 1.5rem;
  text-align: center;
}
.blog-vide__texte { font-weight: 300; line-height: 1.5; max-width: 28em; margin-inline: auto; }

/* --- Article : méta sous le H1, image de tête, colonne de lecture --- */
.article-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  margin-top: 1rem;
}
.article-meta__date {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.375rem;
  color: var(--violet);
}
.article-meta__cat {
  /* la pastille lavande des cartes soirée, cliquable vers la catégorie */
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  padding: 0.25em 0.95em;
  border-radius: 999px;
  background: var(--lavande);
  color: var(--noir);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition);
}
.article-meta__cat:hover { background: #B3A7D9; }
.article-meta__auteur { font-size: var(--fs-small); font-weight: 300; color: var(--brun); }

.article-hero {
  margin: 2rem auto 0;
  border-radius: max(calc(40 * var(--s)), 1.25rem);
  overflow: hidden;
  aspect-ratio: 970 / 509; /* même cadre que les cartes : l'article ouvre sur l'image de sa carte */
  background: var(--saumon);
}
.article-hero img { width: 100%; height: 100%; object-fit: cover; }

/* Corps Gutenberg : colonne de lecture plafonnée, styles éditoriaux dans la
   palette (H2 violet Regular de Conditions, listes ✳ du gabarit générique,
   citation dans la voix des témoignages). */
.article-corps {
  max-width: 38rem;
  margin: 2rem auto 0;
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.55;
}
.article-corps p { margin-bottom: 1em; }
.article-corps h2 {
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--violet);
  margin: 1.8em 0 0.6em;
}
.article-corps h3 {
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--brun);
  margin: 1.5em 0 0.5em;
}
.article-corps ul, .article-corps ol { margin: 0 0 1em; padding-left: 0.2em; }
.article-corps ul li { padding-left: 1.4em; position: relative; }
.article-corps ul li::before { content: '✳'; color: var(--corail-fonce); position: absolute; left: 0.1em; }
.article-corps ol { list-style: decimal inside; }
.article-corps li + li { margin-top: 0.35em; }
.article-corps a { text-decoration: underline; text-underline-offset: 0.2em; }
.article-corps blockquote {
  font-family: var(--font-cond);
  font-weight: 200;
  font-size: 1.3125rem; /* la voix des témoignages, jamais sous 21 px */
  line-height: 1.45;
  color: var(--violet);
  text-align: center;
  margin: 1.6em auto;
  max-width: 26em;
}
.article-corps blockquote p { margin: 0; }
.article-corps blockquote cite { display: block; margin-top: 0.6em; font-style: normal; font-size: var(--fs-small); color: var(--brun); }
.article-corps img { border-radius: max(calc(40 * var(--s)), 1.25rem); margin-block: 0.5em; }
.article-corps figure { margin: 1.4em 0; }
.article-corps figcaption { margin-top: 0.5em; font-size: var(--fs-small); color: var(--corail-texte); text-align: center; }
.article-corps strong { font-weight: 400; }

/* Chapô (phrase mise en avant = extrait), images et galeries, vidéos en façade, liens flèche (style de paragraphe « Lien flèche »). */
.article-corps .article-chapo { margin-bottom: 1.4em; }
.article-corps .wp-block-image img { display: block; width: 100%; height: auto; margin: 0; }
.article-corps .wp-block-gallery { --wp--style--unstable-gallery-gap: max(calc(30 * var(--s)), 0.75rem); gap: var(--wp--style--unstable-gallery-gap); margin: 1.4em 0; }
.article-corps .wp-block-gallery img { margin: 0; }
.article-corps .video { margin: 1.4em 0; }
.article-corps .video__img { margin: 0; border-radius: 0; }
.article-corps .video__legende { color: var(--brun); }
.article-corps .article-lien { margin: 1.4em 0; }
.article-corps .article-lien + .article-lien { margin-top: -0.4em; }
.article-corps .arrow-link { text-decoration: none; }

/* --- « À lire aussi » : l'air seul fait la coupure (pas d'.ondule). --- */
.article-lies { margin-top: 3.5rem; padding-bottom: 1rem; }
.article-lies .blog-grille { margin-top: 1.25rem; }

@media (min-width: 62.0625rem) {
  /* En-tête et marge du corps de l'archive : aucune surcharge, tout vient de .parcours. */
  /* Sous-nav filtre : 4 entrées au plus (Tout + 3 catégories), mêmes règles d'aération que Conditions & tarifs. */
  .page-blog .parcours__nav-lien { white-space: normal; line-height: 1.2; }
  .page-blog .parcours__nav-liste li + li { margin-top: max(calc(10 * var(--s)), 0.45rem); }

  .blog-grille {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: max(calc(35 * var(--s)), 1.25rem) max(calc(35 * var(--s)), 1.25rem); /* la gouttière 35 des grilles de cartes */
  }
  .blog-card__corps { padding: max(calc(26 * var(--s)), 1.1rem) max(calc(28 * var(--s)), 1.2rem) max(calc(30 * var(--s)), 1.3rem); }
  .blog-card__date { font-size: max(calc(26 * var(--s)), 1.125rem); } /* la cote 26 de la date du slider home, plancher 18 px */
  .blog-card__cat { font-size: max(calc(20 * var(--s)), 0.9375rem); }
  .blog-card__titre { font-size: max(calc(24 * var(--s)), 1.125rem); }
  .blog-card__extrait { font-size: max(calc(20 * var(--s)), 1rem); }
  .blog-pagination { margin-top: max(calc(80 * var(--s)), 2.5rem); }

  /* --- Article : H1 en voix 85.6 (écart de gabarit assumé), largeur bornée pour que les phrases longues s'équilibrent. --- */
  .page-article .page-titre { font-size: max(calc(85.6 * var(--s)), 2.5rem); max-width: 16em; margin-inline: auto; }
  .article-meta { margin-top: max(calc(30 * var(--s)), 1.25rem); gap: 0.4rem max(calc(30 * var(--s)), 1.1rem); }
  .article-meta__date { font-size: max(calc(30 * var(--s)), 1.375rem); } /* un cran au-dessus des cartes : c'est la date de l'article */
  .article-meta__cat { font-size: max(calc(20 * var(--s)), 0.9375rem); }
  .article-meta__auteur { font-size: max(calc(22 * var(--s)), 1rem); }

  /* L'image de tête respire plus large que la colonne de lecture (1100 vs 880). */
  .article-hero { margin-top: max(calc(70 * var(--s)), 2.5rem); width: 100%; max-width: max(calc(1100 * var(--s)), 42rem); }

  .article-corps {
    max-width: max(calc(880 * var(--s)), 38rem);
    margin-top: max(calc(70 * var(--s)), 2.25rem);
    font-size: max(calc(28 * var(--s)), 1.0625rem);
    line-height: 1.5;
  }
  .article-corps h2 { font-size: max(calc(28 * var(--s)), 1.25rem); }
  .article-corps h3 { font-size: max(calc(28 * var(--s)), 1.125rem); }
  .article-corps blockquote { font-size: max(calc(25 * var(--s)), 1.3125rem); }
  .article-corps .video__legende { font-size: max(calc(22 * var(--s)), 1rem); }

  /* « À lire aussi » : la même respiration que deux catégories de la FAQ. */
  .article-lies { margin-top: max(calc(150 * var(--s)), 4.5rem); padding-bottom: max(calc(60 * var(--s)), 1.5rem); }
  .article-lies .blog-grille { margin-top: max(calc(30 * var(--s)), 1.25rem); }
}

/* =============================================================
   PAGE L'ASSOCIATION & DONS (page-association.php)
   Aucun séparateur .ondule : le don est le moment de la page, porté par une bande saumon pleine largeur (vague d'entrée, bas plat). Composants réutilisés : kicker + H2 + H3 de Conditions, liste .conditions-liste, liens flèche, pill primaire, bande CTA .parcours-cta. Deux classes communes naissent ici : .bande-pleine (= .presta-cafe et .contact-ecrire) et .texte-avant (= .maison-avant et .presta-avant) ; les pages d'origine migreront dessus.
   ============================================================= */

/* --- Classe commune : phrase mise en avant (violet, un cran au-dessus du texte) --- */
.texte-avant { font-weight: 200; font-size: var(--fs-lead); line-height: 1.35; color: var(--violet); }
.texte-avant + * { margin-top: 1rem; }

/* --- Classe commune : bande saumon pleine largeur au milieu d'une page interne. Elle vit dans le couloir de contenu (la nav blob sticky reste par-dessus) et en sort par marges négatives (mobile : la gouttière, desktop : la marge du couloir). Vague d'entrée seulement, bas plat. --- */
.bande-pleine { position: relative; margin-inline: calc(-1 * var(--gutter)); margin-block: 2.5rem; scroll-margin-top: 3.5rem; }
.bande-pleine__wave { line-height: 0; }
.bande-pleine__corps { background: var(--saumon); padding: 2rem var(--gutter) 2.5rem; } /* le texte respire loin de la vague */
.bande-pleine__inner { max-width: 38rem; margin-inline: auto; text-align: center; }
/* Le titre d'une bande prend la voix Thin des grands titres (un cran sous la
   bande CTA) : c'est un « moment » de la page, pas une section. */
.bande-pleine .conditions__h2 { font-weight: 100; font-size: 1.875rem; line-height: 1.15; text-wrap: balance; }
.bande-pleine__texte { font-size: max(calc(28 * var(--s)), 1.0625rem); font-weight: 300; line-height: 1.4; margin-top: 0.5rem; }
.bande-pleine__badge {
  display: inline-block;
  margin-top: 1.1rem;
  font-size: max(calc(20 * var(--s)), 0.9375rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  padding: 0.3em 1.05em;
  border-radius: 999px;
  background: var(--lavande); /* la pastille « Places disponibles » des cartes soirée */
  color: var(--noir);
}
.bande-pleine__infos { margin-top: 0.7rem; font-size: var(--fs-small); font-weight: 400; color: var(--brun); }

/* --- Sections de la page --- */
.association-section--bloc { display: block; }
.association-section--bloc .etape__lead { max-width: 38rem; }
/* Mission → Devenir membre : l'air seul fait la transition ; la bande du don, juste après, porte le rythme. */
.association-section + .association-section { margin-top: 3.5rem; }
.association-texte p + p { margin-top: 0.9em; }
.association-lien { margin-top: 1.25rem; }
.association-usages { margin-top: 1.25rem; }
.association-docs { display: grid; gap: 0.55rem; }
.association-docs .arrow-link { align-items: flex-start; }

/* Formules d'adhésion : cartes blanches (le langage des cartes « à choisir » : soirées, sessions, FAQ), picto violet, nom en Antarctica Regular noir (Disco Deco illisible à 18 px sur des mots), montant Disco Deco corail foncé. */
.formules { margin-top: 1.75rem; display: grid; gap: 0.7rem; }
/* Mobile : une ligne compacte par formule (picto, nom, montant à droite) ; trois cartes hautes empilées faisaient défiler un écran pour trois chiffres. */
.formule { background: var(--blanc); border-radius: var(--radius-card); padding: 0.9rem 1.2rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.9rem; }
.formule__picto { display: inline-flex; color: var(--violet); }
.formule__picto .picto { width: 2rem; height: 2rem; }
.formule__nom { font-size: 1.25rem; font-weight: 400; line-height: 1.25; color: var(--noir); text-wrap: balance; }
.formule__prix { text-align: right; }
.formule__montant { display: block; font-size: 2.4rem; line-height: 1; letter-spacing: 0.04em; color: var(--corail-fonce); }
.formule__unite { display: block; margin-top: 0.2rem; font-size: var(--fs-small); font-weight: 300; color: var(--noir); white-space: nowrap; }
@media (min-width: 40rem) {
  /* Dès la tablette : trois cartes centrées sur une rangée. */
  .formules { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
  .formule { display: block; text-align: center; padding: 1.5rem 1.25rem 1.6rem; }
  .formule__picto .picto { width: 2.25rem; height: 2.25rem; }
  .formule__nom { margin-top: 0.8rem; }
  .formule__prix { margin-top: 0.9rem; text-align: center; }
  .formule__montant { font-size: 3.25rem; }
  .formule__unite { margin-top: 0.45rem; font-size: var(--fs-small); }
}

.association-membre__suite { margin-top: 1.75rem; }
.association-membre__note { max-width: 38rem; }
.association-membre__cta { margin-top: 1.5rem; }

/* Le don : sur mobile les coordonnées bancaires passent DEVANT le QR (on ne
   scanne pas son propre écran, on copie l'IBAN) ; sur desktop le QR est à
   gauche, c'est lui qu'on vise avec le téléphone. */
.don { display: flex; flex-direction: column-reverse; gap: 1.5rem; max-width: 38rem; margin: 2rem auto 0; }
.don__qr { background: var(--blanc); border-radius: var(--radius-card); padding: 1.1rem 1.1rem 1.2rem; text-align: center; width: min(100%, 17rem); margin-inline: auto; }
.don__qr-img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.don__qr-legende { margin-top: 0.6rem; font-size: 1rem; font-weight: 300; line-height: 1.35; color: var(--brun); text-wrap: balance; }
.don__banque { background: var(--blanc); border-radius: var(--radius-card); padding: 1.4rem 1.4rem 1.5rem; }
.don__ligne + .don__ligne { margin-top: 0.9rem; }
.don__ligne dt { font-size: 0.9375rem; font-weight: 400; color: var(--corail-texte); }
.don__ligne dd { margin: 0.1rem 0 0; font-size: max(calc(26 * var(--s)), 1.0625rem); font-weight: 300; line-height: 1.35; color: var(--noir); }
.don__iban { display: inline-block; font-weight: 400; letter-spacing: 0.02em; white-space: nowrap; }
.don__copier {
  display: inline-block;
  margin: 0.45rem 0 0;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 400;
  padding: 0.3em 1.05em;
  border: 0;
  border-radius: 999px;
  background: var(--lavande);
  color: var(--noir);
  cursor: pointer;
  transition: background var(--transition);
}
.don__copier[hidden] { display: none; }
.don__copier:hover { background: #b5aad8; }
.don__copier:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.don__copier.is-copie { background: var(--violet); color: var(--blanc); }

@media (min-width: 62.0625rem) {
  /* En-tête, marge du corps et position du blob : aucune surcharge, tout vient de .parcours. */
  .texte-avant { font-size: max(calc(34 * var(--s)), 1.3125rem); }
  .texte-avant + * { margin-top: max(calc(24 * var(--s)), 1rem); }

  .bande-pleine { margin-inline: calc(-1 * var(--marge)); margin-block: max(calc(150 * var(--s)), 4.5rem) max(calc(130 * var(--s)), 4rem); }
  .bande-pleine__corps { padding: max(calc(30 * var(--s)), 1.5rem) var(--gutter) max(calc(90 * var(--s)), 3.25rem); }
  .bande-pleine__inner { max-width: max(calc(880 * var(--s)), 38rem); }
  .bande-pleine .conditions__h2 { font-size: max(calc(54 * var(--s)), 2rem); }
  .bande-pleine__texte { margin-top: max(calc(14 * var(--s)), 0.6rem); }
  .bande-pleine__badge { margin-top: max(calc(28 * var(--s)), 1.1rem); }
  .bande-pleine__infos { font-size: max(calc(20 * var(--s)), 1rem); }

  .association-section--bloc { display: block; } /* prime sur la grille 2 colonnes de .etape */
  .association-section + .association-section { margin-top: max(calc(140 * var(--s)), 4.5rem); }
  .association-section--bloc .etape__lead { max-width: max(calc(880 * var(--s)), 38rem); }
  .association-lien { margin-top: max(calc(30 * var(--s)), 1.25rem); }
  .association-usages { margin-top: max(calc(34 * var(--s)), 1.25rem); }
  .association-docs { gap: max(calc(14 * var(--s)), 0.55rem); }

  /* Décors photo : mêmes hauteurs que Conditions (sections courtes). */
  .page-association .etape__decor--droite,
  .page-association .etape__decor--droite-air { top: calc(330 * var(--s)); }

  /* Trois formules sur une rangée, largeur du couloir. */
  .formules { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: max(calc(35 * var(--s)), 1.25rem); margin-top: max(calc(52 * var(--s)), 2rem); }
  .formule { padding: max(calc(40 * var(--s)), 1.5rem) max(calc(30 * var(--s)), 1.25rem) max(calc(44 * var(--s)), 1.6rem); }
  .formule__picto .picto { width: max(calc(60 * var(--s)), 2.25rem); height: max(calc(60 * var(--s)), 2.25rem); }
  .formule__nom { font-size: max(calc(34 * var(--s)), 1.375rem); margin-top: max(calc(20 * var(--s)), 0.8rem); }
  .formule__prix { margin-top: max(calc(24 * var(--s)), 0.9rem); }
  .formule__montant { font-size: max(calc(96 * var(--s)), 3.25rem); }
  .formule__unite { font-size: max(calc(22 * var(--s)), 1rem); margin-top: max(calc(12 * var(--s)), 0.45rem); }

  .association-membre__suite { margin-top: max(calc(50 * var(--s)), 1.75rem); display: flex; align-items: center; justify-content: space-between; gap: max(calc(80 * var(--s)), 3.5rem); }
  .association-membre__note { max-width: max(calc(880 * var(--s)), 34rem); }
  .association-membre__cta { margin-top: 0; flex-shrink: 0; }
  /* Le bouton suit l'échelle de la maquette (recette du bouton d'inscription des prestations). */
  .association-membre__cta .btn--primary { font-size: max(calc(22 * var(--s)), 1rem); padding: max(calc(20 * var(--s)), 0.75rem) max(calc(46 * var(--s)), 1.7rem); }

  /* Le don : QR à gauche, coordonnées à droite, centrés dans la bande. */
  .don { flex-direction: row; align-items: stretch; justify-content: center; gap: max(calc(35 * var(--s)), 1.25rem); max-width: max(calc(1000 * var(--s)), 46rem); margin-top: max(calc(56 * var(--s)), 2.25rem); }
  .don__qr { width: max(calc(380 * var(--s)), 15rem); flex-shrink: 0; margin-inline: 0; padding: max(calc(24 * var(--s)), 1rem); display: flex; flex-direction: column; justify-content: center; }
  .don__qr-legende { font-size: max(calc(20 * var(--s)), 1rem); margin-top: max(calc(14 * var(--s)), 0.6rem); }
  .don__banque { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; text-align: left; padding: max(calc(40 * var(--s)), 1.5rem) max(calc(46 * var(--s)), 1.6rem); }
  /* Deux colonnes : l'IBAN et le titulaire prennent la ligne entière, les lignes courtes (BIC, banque) se rangent côte à côte ; la carte garde la hauteur du QR. */
  .don__lignes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: max(calc(22 * var(--s)), 0.9rem) max(calc(30 * var(--s)), 1.25rem); }
  .don__ligne + .don__ligne { margin-top: 0; }
  .don__ligne--iban, .don__ligne--iban + .don__ligne { grid-column: 1 / -1; }
  .don__ligne dt { font-size: max(calc(20 * var(--s)), 0.9375rem); }
  .don__ligne--iban dd { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem max(calc(20 * var(--s)), 0.9rem); }
  .don__copier { margin-top: 0; font-size: max(calc(20 * var(--s)), 0.9375rem); }
}

/* =============================================================
   PAGE TÉMOIGNAGES (page-temoignages.php)
   Le mur réutilise le composant .temoignage de la home (mêmes voix, même cycle brun / violet / corail) en colonnes verticales (masonry CSS). Pas de sous-nav blob, aucun séparateur .ondule : la respiration du mur est la citation en exergue sur la bande saumon (.bande-pleine). Avatar : photo de la famille, sinon disque saumon + glyphe « personne » (picto b) coloré par le cycle ; sur la bande, le disque passe en crème.
   ============================================================= */

.temoignages-mur { position: relative; }
/* Colonnes partout (1 → 2 → 3) : l'espacement vertical vit sur la carte,
   jamais en gap de grille (un seul mécanisme). */
.temoignages-mur__grille { columns: 1; }
.page-temoignages .temoignage { break-inside: avoid; margin-bottom: 2.6rem; }

/* Le détail sous le nom : Antarctica ; le nom au-dessus reste en Disco Deco. */
.temoignage__detail {
  display: block;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.0625rem;
  letter-spacing: 0;
  text-transform: none;
  margin-top: 0.25rem;
}

/* L'avatar de repli : disque saumon, tête + épaules ancrées en bas, les
   épaules affleurent le bord (cadrage portrait). Couleur : le cycle. */
.temoignage__avatar--repli {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--saumon);
  flex-shrink: 0;
}
.temoignage__avatar-picto { display: block; width: 64%; height: 70%; margin-bottom: -7%; }
.temoignage--brun .temoignage__avatar-picto { color: var(--brun); }
.temoignage--violet .temoignage__avatar-picto { color: var(--violet); }
.temoignage--corail .temoignage__avatar-picto { color: var(--corail-texte); }

/* La citation en exergue : la grande voix ExtraCond violette au centre de la
   bande saumon, l'avatar au-dessus, le nom Disco et le détail dessous. */
.temoignages-exergue .temoignage__avatar { margin-inline: auto; margin-bottom: 1rem; }
.temoignages-exergue .temoignage__avatar--repli { background: var(--creme); }
.temoignages-exergue .temoignage__avatar-picto { color: var(--violet); }
.temoignages-exergue__citation {
  font-family: var(--font-cond);
  font-weight: 200;
  font-size: 1.4rem; /* ExtraCond ExtraLight : jamais sous 20 px (ici bien au-dessus) */
  line-height: 1.42;
  color: var(--violet);
}
.temoignages-exergue__source { margin-top: 0.9rem; }
.temoignages-exergue__nom {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.25rem;
  color: var(--noir);
}
.temoignages-exergue__detail {
  display: block;
  font-weight: 300;
  font-size: 1rem;
  color: var(--brun);
  margin-top: 0.3rem;
}

@media (min-width: 40rem) {
  .temoignages-mur__grille { columns: 2; column-gap: 2.25rem; }
}

@media (min-width: 62.0625rem) {
  .temoignages-mur__grille { columns: 3; column-gap: max(calc(66 * var(--s)), 2.25rem); } /* la gouttière des témoignages de la home */
  .page-temoignages .temoignage { margin-bottom: max(calc(80 * var(--s)), 2.8rem); }
  .temoignage__detail { font-size: max(calc(22 * var(--s)), 1.0625rem); margin-top: max(calc(8 * var(--s)), 0.25rem); }

  .temoignages-exergue .temoignage__avatar { width: max(calc(100 * var(--sc)), 5rem); height: max(calc(100 * var(--sc)), 5rem); margin-bottom: max(calc(24 * var(--s)), 1rem); }
  /* La cote 54 des « moments » de bande (H2 du café, du don) : l'exergue parle à la même hauteur. */
  .temoignages-exergue__citation { font-size: max(calc(54 * var(--s)), 1.625rem); }
  .temoignages-exergue__source { margin-top: max(calc(30 * var(--s)), 1rem); }
  .temoignages-exergue__nom { font-size: max(calc(26 * var(--s)), 1.25rem); }
  .temoignages-exergue__detail { font-size: max(calc(22 * var(--s)), 1rem); }
}

/* =============================================================
   PAGE RECRUTEMENT (page-recrutement.php)
   Aucun séparateur .ondule : la candidature est le moment de la page, portée par la bande saumon .bande-pleine ; entre les deux premières sections, l'air seul. Composants réutilisés : kicker + H2 de Conditions, items .etape-item (valeurs employeur), liste .conditions-liste (profil recherché), champs GF de .soirees-form, pill primaire, bande CTA .parcours-cta. Les offres sont des cartes blanches sur une colonne centrée : une annonce se lit, elle ne se compare pas en grille.
   ============================================================= */

/* --- Sections de la page --- */
.recrutement-section--bloc { display: block; }
.recrutement-section--bloc .etape__lead { max-width: 38rem; }
/* Pourquoi nous → Nos offres : l'air seul fait la transition ; la bande de la candidature, juste après, porte le rythme. */
.recrutement-section + .recrutement-section { margin-top: 3.5rem; }
.recrutement-valeurs { margin-top: 1.5rem; }

/* --- Les offres : une carte blanche par annonce, sur une colonne centrée --- */
.offres-liste { margin-top: 1.75rem; display: grid; gap: 1rem; max-width: 38rem; margin-inline: auto; }
.offre { background: var(--blanc); border-radius: var(--radius-card); padding: 1.4rem 1.4rem 1.5rem; }
.offre__titre { font-size: 1.25rem; font-weight: 400; line-height: 1.25; color: var(--noir); text-wrap: balance; }
/* Type et taux : la ligne violette des cartes soirée (« mardi à 19h »). */
.offre__meta { margin-top: 0.35rem; font-size: 0.9375rem; font-weight: 400; color: var(--violet); }
.offre__texte { margin-top: 0.9rem; font-size: max(calc(28 * var(--s)), 1.0625rem); font-weight: 300; line-height: 1.5; }
.offre__texte p + p { margin-top: 0.9em; }
.offre__profil-titre { margin-top: 1.1rem; font-size: 0.9375rem; font-weight: 400; color: var(--corail-texte); }
.offre__profil { margin-top: 0.5rem; }
.offre__cta { margin-top: 1.25rem; }

/* Aucune annonce en ligne (l'état réel au lancement) : le message de la spec
   en carte blanche, la main tendue vers la candidature spontanée. */
.offres-vide { margin: 1.75rem auto 0; max-width: 38rem; background: var(--blanc); border-radius: var(--radius-card); padding: 1.75rem 1.5rem 1.6rem; text-align: center; }
.offres-vide__picto { display: inline-flex; color: var(--violet); }
.offres-vide__picto .picto { width: 2.25rem; height: 2.25rem; }
.offres-vide__texte { margin-top: 0.8rem; font-size: 1.0625rem; font-weight: 300; line-height: 1.45; text-wrap: balance; }
.offres-vide__lien { margin-top: 1rem; }
.offres-vide .arrow-link { display: inline-flex; }

/* --- La candidature : les champs vivent directement sur la bande (recette Contact) ; la carte saumon de .soirees-form disparaît, ses styles de champs restent. --- */
.recrutement-form { background: none; border-radius: 0; padding: 0; margin-top: 1.75rem; text-align: left; }
.recrutement-form .soirees-form__repli { text-align: center; }
.recrutement-form .arrow-link { display: inline-flex; }
.recrutement-form:has(.soirees-form__repli) { text-align: center; }

/* Le champ CV (fileupload GF) : même voix que les champs texte (fond blanc, bordure brune, radius). */
:is(.conditions, .page-contact, .page-recrutement, .page-prestations) .soirees-form .gform_wrapper input[type="file"] {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  background: var(--blanc);
  border: 1px solid rgba(124, 77, 61, 0.28);
  border-radius: 0.65rem;
  padding: 0.6rem 0.9rem;
  color: var(--brun);
}
:is(.conditions, .page-contact, .page-recrutement, .page-prestations) .soirees-form .gform_wrapper input[type="file"]:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
/* La ligne d'extensions/taille que GF ajoute sous le champ : la voix des descriptions. */
:is(.conditions, .page-contact, .page-recrutement, .page-prestations) .soirees-form .gform_wrapper .gform_fileupload_rules {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.4;
  color: rgba(124, 77, 61, 0.75);
}

@media (min-width: 62.0625rem) {
  /* En-tête, marge du corps et position du blob : aucune surcharge, tout vient de .parcours. */
  .recrutement-valeurs { margin-top: 0; } /* la colonne de droite s'aligne sur l'en-tête de section */
  .recrutement-section + .recrutement-section { margin-top: max(calc(150 * var(--s)), 4.5rem); }

  /* Décors photo : mêmes hauteurs que Conditions et Contact (sections courtes). */
  .page-recrutement .etape__decor--droite,
  .page-recrutement .etape__decor--droite-air { top: calc(330 * var(--s)); }

  .offres-liste { margin-top: max(calc(50 * var(--s)), 2rem); gap: max(calc(30 * var(--s)), 1.25rem); max-width: max(calc(880 * var(--s)), 38rem); }
  .offre { padding: max(calc(50 * var(--s)), 1.75rem) max(calc(55 * var(--s)), 2rem) max(calc(55 * var(--s)), 2rem); }
  .offre__titre { font-size: max(calc(34 * var(--s)), 1.375rem); }
  .offre__meta { margin-top: max(calc(10 * var(--s)), 0.35rem); font-size: max(calc(22 * var(--s)), 0.9375rem); }
  .offre__texte { margin-top: max(calc(24 * var(--s)), 0.9rem); }
  .offre__profil-titre { margin-top: max(calc(30 * var(--s)), 1.1rem); font-size: max(calc(20 * var(--s)), 0.9375rem); }
  .offre__cta { margin-top: max(calc(34 * var(--s)), 1.25rem); }

  .offres-vide { margin-top: max(calc(50 * var(--s)), 2rem); max-width: max(calc(680 * var(--s)), 34rem); padding: max(calc(55 * var(--s)), 2rem) max(calc(50 * var(--s)), 1.75rem) max(calc(50 * var(--s)), 1.75rem); }
  .offres-vide__picto .picto { width: max(calc(60 * var(--sc)), 2.25rem); height: max(calc(60 * var(--sc)), 2.25rem); }
  .offres-vide__texte { margin-top: max(calc(20 * var(--s)), 0.8rem); font-size: max(calc(28 * var(--s)), 1.0625rem); }
  .offres-vide__lien { margin-top: max(calc(26 * var(--s)), 1rem); }

  /* Le formulaire garde une colonne confortable au centre de la bande (recette Contact). */
  .recrutement-form { max-width: max(calc(720 * var(--s)), 34rem); margin-inline: auto; margin-top: max(calc(45 * var(--s)), 1.75rem); }
  :is(.conditions, .page-contact, .page-recrutement, .page-prestations) .soirees-form .gform_wrapper input[type="file"] { font-size: max(calc(22 * var(--s)), 0.95rem); padding: max(calc(16 * var(--s)), 0.6rem) max(calc(24 * var(--s)), 0.9rem); }
  :is(.conditions, .page-contact, .page-recrutement, .page-prestations) .soirees-form .gform_wrapper .gform_fileupload_rules { font-size: max(calc(18 * var(--s)), 0.9375rem); }
}

/* =============================================================
   PAGES DE TEXTE (page.php)
   Mentions légales, Confidentialité et toute page sans modèle dédié : en-tête commun, couloir .parcours__corps, corps .article-corps des articles. Seul composant propre : le sommaire de la marge gauche, qui remplace le blob par une liste à filet (une page légale a 5 à 12 titres). Mobile : les chips sticky habituelles.
   ============================================================= */
.page-texte__maj {
  text-align: center;
  margin-top: 0.9rem;
  font-size: var(--fs-small);
  font-weight: 300;
  color: var(--brun);
}
.page-texte__sommaire-titre { display: none; } /* mobile : la rangée de chips se passe de titre */
.page-texte__section { scroll-margin-top: 4.25rem; } /* sous la rangée de chips sticky */
.page-texte__corps > .page-texte__section:first-child h2 { margin-top: 0; }
/* Points à faire trancher par l'association (inc/legales-demo.php) : visibles tant qu'ils ne sont pas retirés. */
.article-corps mark.lr-a-valider {
  background: var(--lavande);
  color: var(--noir);
  padding: 0.05em 0.3em;
  border-radius: 0.3em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

@media (min-width: 62.0625rem) {
  .page-texte__maj { margin-top: max(calc(30 * var(--s)), 1rem); font-size: max(calc(20 * var(--s)), 0.9375rem); }
  .page-texte__corps { margin-top: 0; } /* l'air vient de .parcours__corps (130·--s), pas de cumul */
  .page-texte__section { scroll-margin-top: 2rem; }

  /* Sommaire : même place et même voix que la sous-nav blob (violet, actif noir),
     sans le blob. Le filet saumon porte l'entrée active (trait corail foncé). */
  .page-texte__sommaire {
    justify-self: stretch;
    top: calc(2rem + var(--wp-admin--admin-bar--height, 0px));
    margin: 0;
    min-width: 0;
    max-width: none;
    max-height: calc(100vh - 4rem - var(--wp-admin--admin-bar--height, 0px));
    overflow-y: auto;
    padding: 0 1.5rem 0 max(1.5rem, calc(152 * var(--s) - 160px + 160 * var(--s))); /* le retrait gauche du texte du blob */
    background: none;
    -webkit-mask: none;
    mask: none;
    scrollbar-width: thin;
  }
  .page-texte__sommaire-titre {
    display: block;
    font-size: var(--fs-kicker);
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--brun);
    margin-bottom: 0.9rem;
    padding-left: calc(1rem + 2px);
  }
  .page-texte__sommaire .parcours__nav-liste { border-left: 2px solid var(--saumon); }
  .page-texte__sommaire .parcours__nav-liste li + li { margin-top: max(calc(12 * var(--s)), 0.5rem); }
  .page-texte__sommaire .parcours__nav-lien {
    margin-left: -2px;
    padding-left: 1rem;
    border-left: 2px solid transparent;
    white-space: normal;
    line-height: 1.3;
    font-size: max(calc(20 * var(--s)), 1rem); /* la voix de la sous-nav blob */
  }
  .page-texte__sommaire .parcours__nav-lien.est-active { border-left-color: var(--corail-fonce); }
}

/* =============================================================
   VIDÉO DE PRÉSENTATION ET FORMULAIRES D'INSCRIPTION
   La vidéo (inc/video.php) vit sur La maison (bande .maison-visite, ancre #video) et au-dessus de la demande d'inscription de Conditions & tarifs (bande .conditions-demande) ; l'inscription au cours se déplie sous les dates des sessions (<details> .presta-inscription). Bandes en recette .bande-pleine. Façade vidéo sans cookie tiers : le lecteur n'est chargé qu'au clic (main.js).
   ============================================================= */

/* --- Façade vidéo --- */
.video { margin: 1.75rem auto 0; max-width: 100%; }
.video__cadre {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-photo);
  overflow: hidden;
  background: var(--abricot); /* sans image d'aperçu : fond abricot, le bouton seul */
}
.video__facade { position: absolute; inset: 0; display: block; color: var(--blanc); text-decoration: none; }
.video__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease; }
.video__facade:hover .video__img { transform: scale(1.02); }
/* Le bouton de lecture : le rond violet du site (cercle CTA du footer), halo doux. */
.video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4.5rem;
  height: 4.5rem;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--violet);
  color: var(--blanc);
  box-shadow: 0 0 0 0.55rem rgba(107, 96, 200, 0.28);
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
}
/* Le tracé du triangle est déjà décalé vers la droite dans son viewBox : sans marge, centre de gravité à +0,8 %, le centrage optique habituel d'une icône lecture. */
.video__play svg { width: 44%; height: 44%; }
.video__facade:hover .video__play,
.video__facade:focus-visible .video__play { transform: translate(-50%, -50%) scale(1.06); background: #655bba; box-shadow: 0 0 0 0.8rem rgba(107, 96, 200, 0.32); }
.video__facade:focus-visible { outline: none; }
.video__cadre:has(.video__facade:focus-visible) { outline: 3px solid var(--violet); outline-offset: 4px; }
.video__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Légende : titre · durée */
.video__legende { margin-top: 0.8rem; text-align: center; font-size: var(--fs-small); line-height: 1.45; color: var(--brun); }
.video__nom { font-weight: 400; }
.video__duree { font-weight: 400; color: var(--violet); }
.video__duree::before { content: "·"; margin-inline: 0.45em; color: var(--brun); }

/* --- La maison : bande « La visite en vidéo » --- */
.maison-visite__suite { margin-top: 1.75rem; text-align: center; }
.maison-visite__phrase { margin-bottom: 1rem; font-size: max(calc(28 * var(--s)), 1.0625rem); font-weight: 300; line-height: 1.4; text-wrap: balance; }

/* --- Conditions & tarifs : bande « Demande d'inscription ». Les champs vivent directement sur la bande (recette Contact / Recrutement). --- */
.conditions-demande { scroll-margin-top: 4.25rem; } /* sous la rangée de chips sticky (mobile) */
.conditions-demande .video { scroll-margin-top: 5rem; }
.conditions-demande__form { background: none; border-radius: 0; padding: 0; margin-top: 2rem; text-align: left; scroll-margin-top: 5rem; }
.conditions-demande__form .soirees-form__repli { text-align: center; }
.conditions-demande__form .arrow-link { display: inline-flex; }
.conditions-demande__form:has(.soirees-form__repli) { text-align: center; }
.conditions-demande__form:has(.gform_confirmation_message) .conditions-demande__infos { display: none; } /* la confirmation le dit déjà */
.conditions-demande__infos { margin-top: 0.8rem; font-size: 1rem; font-weight: 300; line-height: 1.4; color: rgba(124, 77, 61, 0.75); }

/* --- Cours & prestations : l'inscription au cours se déplie sous les dates --- */
.presta-inscription > summary { list-style: none; cursor: pointer; }
.presta-inscription > summary::-webkit-details-marker { display: none; }
.presta-inscription__bouton { flex-direction: row; gap: 0.7em; }
.presta-inscription__bouton::after { /* chevron : bas fermé, haut ouvert */
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform var(--transition);
}
.presta-inscription[open] > .presta-inscription__bouton::after { transform: translateY(0.1em) rotate(-135deg); }
.presta-inscription__form { margin-top: 1.25rem; text-align: left; }

/* --- Conditions & tarifs : le pont entre les 4 étapes et la bande. Sans lui, la vague saumon sous les étapes se lit comme une fin de page. Bouton brun centré, chevron vers le bas ; .btn--chevron est réutilisable. --- */
.btn--chevron { flex-direction: row; gap: 0.7em; }
.btn--chevron::after {
  content: "";
  flex: none;
  width: 0.5em;
  height: 0.5em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform var(--transition);
}
.btn--chevron:hover::after { transform: translateY(0.05em) rotate(45deg); }
.inscription-suite { grid-column: 1 / -1; margin-top: 2.5rem; text-align: center; }
@media (min-width: 62.0625rem) {
  .inscription-suite { margin-top: max(calc(64 * var(--s)), 2.5rem); }
  .inscription-suite .btn--primary { font-size: max(calc(22 * var(--s)), 1rem); padding: max(calc(20 * var(--s)), 0.75rem) max(calc(46 * var(--s)), 1.7rem); }
}
@media (prefers-reduced-motion: reduce) { .btn--chevron::after { transition: none; } }
.presta-inscription__intro { margin: 0.35rem 0 1.1rem; font-size: var(--fs-small); font-weight: 300; line-height: 1.45; }

/* --- Gravity Forms : ce que les formulaires de bande ajoutent au bloc commun --- */
/* Intertitres (champs « section ») : Vos coordonnées, Votre assurance, Votre grossesse. */
:is(.conditions, .page-contact, .page-recrutement, .page-prestations) .soirees-form .gform_wrapper .gsection {
  margin-top: 0.9rem;
  padding: 0 0 0.45rem;
  border-bottom: 1px solid rgba(124, 77, 61, 0.2);
}
:is(.conditions, .page-contact, .page-recrutement, .page-prestations) .soirees-form .gform_wrapper .gfield:first-child.gsection { margin-top: 0; }
:is(.conditions, .page-contact, .page-recrutement, .page-prestations) .soirees-form .gform_wrapper .gsection_title {
  margin: 0;
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--violet);
}
/* Cases à cocher (préalables de la demande d'inscription) : la voix de la case de consentement. */
:is(.conditions, .page-contact, .page-recrutement, .page-prestations) .soirees-form .gform_wrapper legend.gfield_label { padding: 0; margin-bottom: 0.45rem; font-size: var(--fs-small); font-weight: 400; }
:is(.conditions, .page-contact, .page-recrutement, .page-prestations) .soirees-form .gform_wrapper .gfield_checkbox { display: grid; gap: 0.5rem; }
:is(.conditions, .page-contact, .page-recrutement, .page-prestations) .soirees-form .gform_wrapper .gchoice { display: flex; align-items: flex-start; gap: 0.55em; }
:is(.conditions, .page-contact, .page-recrutement, .page-prestations) .soirees-form .gform_wrapper .gchoice .gform-field-label {
  display: inline;
  margin: 0;
  font-size: 1rem; /* la voix de la case de consentement, juste dessous */
  font-weight: 300;
  line-height: 1.4;
}
:is(.conditions, .page-contact, .page-recrutement, .page-prestations) .soirees-form .gform_wrapper .gchoice a,
:is(.conditions, .page-contact, .page-recrutement, .page-prestations) .soirees-form .lr-orientation a { color: inherit; font-weight: 400; text-decoration: underline; text-underline-offset: 0.15em; }
/* Contact : renvoi vers la demande d'inscription (objet « Inscription »), petit mot sur carte blanche. */
:is(.conditions, .page-contact, .page-recrutement, .page-prestations) .soirees-form .lr-orientation {
  margin: 0;
  padding: 0.8em 1em;
  background: var(--blanc);
  border-radius: 0.65rem;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.45;
}

@media (min-width: 62.0625rem) {
  .video__play { width: max(calc(150 * var(--sc)), 4.5rem); height: max(calc(150 * var(--sc)), 4.5rem); box-shadow: 0 0 0 max(calc(18 * var(--sc)), 0.55rem) rgba(107, 96, 200, 0.28); }
  .video__legende { margin-top: max(calc(22 * var(--s)), 0.8rem); font-size: max(calc(22 * var(--s)), 1rem); }

  /* La maison : la vidéo plus large que le texte de la bande (c'est le sujet). */
  .maison-visite__video { max-width: max(calc(1200 * var(--s)), 40rem); margin-top: max(calc(50 * var(--s)), 2rem); }
  .maison-visite__suite { margin-top: max(calc(50 * var(--s)), 1.75rem); }
  .maison-visite__phrase { margin-bottom: max(calc(24 * var(--s)), 1rem); }
  .maison-visite__suite .btn--primary { font-size: max(calc(22 * var(--s)), 1rem); padding: max(calc(20 * var(--s)), 0.75rem) max(calc(46 * var(--s)), 1.7rem); }

  /* Conditions : vidéo à la largeur du texte, formulaire dans la colonne de Contact. */
  .conditions-demande { scroll-margin-top: 1rem; }
  .conditions-demande__video { max-width: max(calc(880 * var(--s)), 38rem); margin-top: max(calc(45 * var(--s)), 1.75rem); }
  .conditions-demande .video,
  .conditions-demande__form { scroll-margin-top: 2rem; }
  .conditions-demande__form { max-width: max(calc(720 * var(--s)), 34rem); margin-inline: auto; margin-top: max(calc(60 * var(--s)), 2rem); }
  .conditions-demande__infos { margin-top: max(calc(18 * var(--s)), 0.8rem); font-size: max(calc(18 * var(--s)), 1rem); }

  /* Cours & prestations : la carte du formulaire sous le bouton, à la largeur de la rangée des sessions. */
  .presta-inscription__form { margin-top: max(calc(35 * var(--s)), 1.25rem); padding: max(calc(45 * var(--s)), 1.5rem) max(calc(50 * var(--s)), 1.6rem) max(calc(50 * var(--s)), 1.6rem); }
  .presta-inscription__intro { margin: max(calc(8 * var(--s)), 0.35rem) 0 max(calc(28 * var(--s)), 1.1rem); font-size: max(calc(22 * var(--s)), 1rem); }

  /* Grille 12 colonnes des formulaires de bande : NPA | Localité (4 | 8), et les autres largeurs GF. */
  :is(.page-contact, .page-recrutement, .conditions-demande, .presta-inscription) .soirees-form .gfield--width-third { grid-column: span 4; }
  :is(.page-contact, .page-recrutement, .conditions-demande, .presta-inscription) .soirees-form .gfield--width-two-thirds { grid-column: span 8; }
  :is(.page-contact, .page-recrutement, .conditions-demande, .presta-inscription) .soirees-form .gfield--width-quarter { grid-column: span 3; }
  :is(.page-contact, .page-recrutement, .conditions-demande, .presta-inscription) .soirees-form .gfield--width-three-quarter { grid-column: span 9; }
  :is(.page-contact, .page-recrutement, .conditions-demande, .presta-inscription) .soirees-form .gform_wrapper .gsection { margin-top: max(calc(30 * var(--s)), 0.9rem); padding-bottom: max(calc(10 * var(--s)), 0.45rem); }
  :is(.page-contact, .page-recrutement, .conditions-demande, .presta-inscription) .soirees-form .gform_wrapper .gfield:first-child.gsection { margin-top: 0; }
  :is(.page-contact, .page-recrutement, .conditions-demande, .presta-inscription) .soirees-form .gform_wrapper .gsection_title { font-size: max(calc(28 * var(--s)), 1.125rem); }
  :is(.page-contact, .page-recrutement, .conditions-demande, .presta-inscription) .soirees-form .gform_wrapper legend.gfield_label { font-size: max(calc(22 * var(--s)), 1rem); }
  :is(.page-contact, .page-recrutement, .conditions-demande, .presta-inscription) .soirees-form .gform_wrapper .gchoice .gform-field-label { font-size: max(calc(20 * var(--s)), 1rem); } /* = la case de consentement */
  :is(.page-contact, .page-recrutement, .conditions-demande, .presta-inscription) .soirees-form .lr-orientation { font-size: max(calc(20 * var(--s)), 1rem); }
}

/* =============================================================
   NÉS À LA ROSERAIE (page-naissances.php) + point d'entrée de l'accueil
   Compteurs = composant .stat-card de l'accueil ; années = cartes dépliables .faq-item de la FAQ.
   ============================================================= */
.stat-card--lien { position: relative; transition: transform var(--transition); }
.stat-card--lien:hover { transform: translateY(-3px); }
.stat-card--lien:focus-within { outline: 2px solid var(--violet); outline-offset: 3px; }
.stat-card__lien { text-decoration: none; }
.stat-card__lien:focus-visible { outline: none; }
.stat-card__lien::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.stat-card--lien:hover .stat-card__lien { text-decoration: underline; text-underline-offset: 0.2em; }
@media (prefers-reduced-motion: reduce) {
  .stat-card--lien, .stat-card--lien:hover { transition: none; transform: none; }
}

/* Home : bande « Nés à la Roseraie » entre les témoignages et la galerie : saumon, vague d'entrée « equipe », bas plat, cinq cartes faire-part blanches, bouton vers la page. */
.nes-home { position: relative; text-align: center; background: var(--saumon); margin-top: calc(var(--section) * 0.2); padding-bottom: calc(var(--section) * 0.6); }
.nes-home__wave { line-height: 0; margin-bottom: 1.5rem; }
.nes-home__inner { position: relative; z-index: 2; }
.nes-home .kicker { margin-bottom: 1rem; }
.nes-home__titre {
  font-size: var(--fs-h2);
  font-weight: 100;
  line-height: 1.12;
  color: var(--violet);
  text-wrap: balance;
  max-width: 22em;
  margin-inline: auto;
}
.nes-home__cartes {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
}
.faire-part {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: calc(50% - 0.45rem);
  padding: 1.6rem 0.9rem 1.2rem;
  background: var(--blanc);
  border-radius: var(--radius-card);
}
.faire-part__picto .picto { width: 1.9rem; height: 1.9rem; color: var(--violet); }
.faire-part__prenom { font-weight: 400; font-size: 1.375rem; line-height: 1.15; color: var(--brun); overflow-wrap: anywhere; }
.faire-part__date { font-weight: 300; font-size: 1rem; line-height: 1.3; color: var(--brun); }
.nes-home__texte { font-weight: 200; font-size: var(--fs-lead); line-height: 1.35; color: var(--brun); max-width: 30em; margin: 1.5rem auto 0; }
.nes-home__cta { margin-top: 1.5rem; }
.nes-home .btn__picto { width: auto; height: 2.4rem; }

@media (min-width: 62.0625rem) {
  .nes-home { margin-top: max(calc(60 * var(--s)), 2rem); padding-bottom: max(calc(150 * var(--s)), 4.5rem); }
  .nes-home__wave { margin-bottom: max(calc(20 * var(--s)), 1rem); }
  .nes-home .kicker { margin-bottom: max(calc(18 * var(--s)), 0.75rem); }
  .nes-home__titre { font-size: max(calc(86 * var(--s)), 2.75rem); }
  .nes-home__cartes { margin-top: max(calc(60 * var(--s)), 2rem); gap: max(calc(33 * var(--s)), 1rem); flex-wrap: nowrap; }
  .faire-part { width: auto; flex: 1 1 0; max-width: calc(245 * var(--s)); padding: max(calc(34 * var(--s)), 1.5rem) max(calc(18 * var(--s)), 0.9rem) max(calc(28 * var(--s)), 1.2rem); border-radius: calc(30 * var(--s)); gap: max(calc(10 * var(--s)), 0.35rem); }
  .faire-part__picto .picto { width: max(calc(44 * var(--s)), 1.9rem); height: max(calc(44 * var(--s)), 1.9rem); }
  .faire-part__prenom { font-size: max(calc(34 * var(--s)), 1.375rem); }
  .faire-part__date { font-size: max(calc(20 * var(--s)), 1rem); }
  .nes-home__texte { font-size: max(calc(34 * var(--s)), 1.3125rem); margin-top: max(calc(50 * var(--s)), 1.75rem); }
  .nes-home__cta { margin-top: max(calc(45 * var(--s)), 1.75rem); }
  .nes-home .btn__picto { height: max(calc(60 * var(--s)), 2.4rem); }
}

.naissances-chiffres { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.naissances-chiffres .stat-card:first-child { grid-column: 1 / -1; }
.naissances-chiffres .stat-card:last-child:nth-child(odd) { grid-column: auto; }
.naissances-registre { position: relative; margin-top: 3rem; } /* ancre du décor photo */
.naissances-registre__titre { font-weight: 400; font-size: 1.25rem; line-height: 1.3; color: var(--violet); margin-bottom: 1.25rem; }
.naissances-annee .faq-item__q { align-items: center; }
.naissances-annee .faq-item__q-texte { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.9rem; }
.naissances-annee__an { font-family: var(--font-display); font-size: 2rem; line-height: 1; color: var(--corail-fonce); }
.naissances-annee__compte { font-weight: 300; font-size: 1rem; }
.naissances-liste {
  list-style: none;
  margin: 0;
  padding: 0.25rem 1.1rem 1.4rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 1rem 1.25rem;
}
.naissance__prenom { display: block; font-weight: 400; font-size: 1.125rem; line-height: 1.25; color: var(--violet); overflow-wrap: anywhere; }
.naissance__date { display: block; font-weight: 300; font-size: 0.9375rem; line-height: 1.35; color: var(--brun); }

@media (min-width: 62.0625rem) {
  .naissances-chiffres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(33 * var(--s)); }
  .naissances-chiffres .stat-card:first-child { grid-column: auto; }
  .naissances-registre { margin-top: max(calc(130 * var(--s)), 3.5rem); }
  .naissances-registre__titre { font-size: max(calc(28 * var(--s)), 1.25rem); margin-bottom: max(calc(30 * var(--s)), 1.25rem); }
  .naissances-annee + .naissances-annee { margin-top: max(calc(16 * var(--s)), 0.6rem); }
  .naissances-annee__an { font-size: max(calc(60 * var(--s)), 2.25rem); }
  .naissances-annee__compte { font-size: max(calc(22 * var(--s)), 1rem); }
  .naissances-liste {
    padding: max(calc(6 * var(--s)), 0.25rem) max(calc(26 * var(--s)), 1.1rem) max(calc(34 * var(--s)), 1.4rem);
    grid-template-columns: repeat(auto-fill, minmax(max(calc(200 * var(--s)), 10rem), 1fr));
    gap: max(calc(26 * var(--s)), 1rem) max(calc(30 * var(--s)), 1.25rem);
  }
  .naissance__prenom { font-size: max(calc(28 * var(--s)), 1.125rem); }
  .naissance__date { font-size: max(calc(19 * var(--s)), 0.9375rem); }
}

/* =============================================================
   PAGE INTROUVABLE (404.php)
   ============================================================= */
.page-404 { padding-bottom: var(--section); }
.page-404__code {
  font-family: var(--font-display);
  font-size: clamp(5.5rem, 22vw, 9rem);
  line-height: 1;
  color: var(--abricot);
  text-align: center;
  margin: 1.75rem 0 1.25rem;
}
.page-404__liens {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: fit-content;
  display: grid;
  gap: 1rem;
}
.page-404__retour { text-align: center; margin-top: 2.5rem; }
@media (min-width: 40rem) {
  .page-404__liens { grid-template-columns: repeat(2, auto); column-gap: 3rem; }
}
@media (min-width: 62.0625rem) {
  .page-404__code { font-size: max(calc(300 * var(--s)), 9rem); margin-block: max(calc(80 * var(--s)), 2rem) max(calc(40 * var(--s)), 1.25rem); }
  .page-404__liens { grid-template-columns: repeat(3, auto); column-gap: max(calc(100 * var(--s)), 3rem); row-gap: max(calc(34 * var(--s)), 1.1rem); }
  .page-404__retour { margin-top: max(calc(90 * var(--s)), 3rem); }
}

/* =============================================================
   Animations d'apparition (progressives, respect reduced-motion)
   ============================================================= */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 500ms ease, transform 500ms ease;
}
.reveal.est-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}