/* =============================================================
   LA ROSERAIE — feuille de style principale
   Tokens issus du design system v1.1 (19.07.2026)
   ============================================================= */

/* ---------- 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: #766CCC;
  --lavande: #C4BAE1;
  --noir: #000000;
  --blanc: #FFFFFF;
  /* Écart maquette assumé (14.09.2026, lisibilité) : corail foncé assombri pour les
     PETITS corps posés sur crème/saumon (2,2:1 → 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 / tablette (révision lisibilité 14.09.2026, écart maquette assumé :
     corps 17 px, leads 19 → 21, tout label display ≥ 16 px) */
  --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 — relevé pour lisibilité (maquette : 12, écart assumé) */

  /* 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 (retour Romain 16.09) */
@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 dans ACF (demande Romain 14.09) */
  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;
}

/* ---------- Vagues ----------
   Tracés extraits de la maquette (inc/waves-data.php), viewBox 2560 × h.
   Frontière entre deux sections : fond du svg = section au-dessus,
   remplissage du path = section en dessous. width 100% + height auto
   = proportions exactes de la maquette à toutes les largeurs. */
.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 (relevé Home.png 16.09), lavande réservée au CTA « Tous les articles » */
  color: var(--blanc);
  font-weight: 300;
  font-size: 0.9375rem;
  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(--corail-fonce);
}
.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;
  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 (comme sur la maquette) ; la fleur est posée
     au-dessus, en absolu, et suit le libellé (retour Romain 16.09). */
  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); }
.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: clamp(10rem, 16vw, 14rem); height: auto; }

.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);
}
.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; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateX(-50%) rotate(45deg) translateY(6px); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { transform: translateX(-50%) rotate(-45deg) translateY(-6px); }

/* 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) {
  .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; }
  .nav-pill { flex-direction: column; align-items: stretch; padding: 0.5rem; }
  .nav-pill a { text-align: center; padding: 0.7rem 1rem; font-size: 1.125rem; }
}

/* =============================================================
   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; }

  /* Arbitrage mobile (16.09.2026) : le grand cercle « Nous contacter » posé au-dessus de
     l'intro cassait la lecture. Il devient un bouton flottant compact en bas à droite,
     présent sur toute la page (le contact est l'action clé pour une future maman). */
  .hero__circle {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 15; /* sous le header (20) : le menu ouvert passe devant */
    margin: 0;
  }
  .hero__circle .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 { transform: none; }
  .hero__circle .circle-cta__star { position: static; transform: none; width: 1.25rem; height: 1.25rem; }
  .hero__circle .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 » : plus une pill isolée sous le texte, mais un second lien
     flèche sous « Découvrir votre parcours » (page pilier, on garde le 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 (retour Romain 16.09) */
    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 (258 × 1200) prenait
     tout un écran de téléphone pour un simple 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 (retour Romain 16.09) */
.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: 1rem; 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 (retour Romain 16.09) */
}

/* =============================================================
   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;
}
.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.0625rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.7rem;
}
.team-card__details { font-size: 1rem; line-height: 1.5; }
.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: 0.9375rem; 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 — relevé sur Home.png (16.09) */
.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 (retour Romain 16.09) */
.secu-card__media .picto { width: 2.4rem; height: 2.4rem; color: var(--corail-fonce); } /* même couleur que le 24/7 (retour Romain 16.09) */
.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 (demande Romain 16.09) ; 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 (retour Romain 16.09) : ce qui déborde est caché,
     c'est le défilement qui le fait apparaître, avec un fondu sur les deux bords
     (même logique que les diapositives voisines du slider actus). 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); }
.page-contenu {
  max-width: 46rem;
  margin-inline: auto;
  padding-block: 2rem var(--section);
}
.page-contenu h2 { font-weight: 400; color: var(--violet); margin: 2rem 0 0.75rem; }
.page-contenu p { margin-bottom: 1rem; }
.page-contenu ul { list-style: none; margin-bottom: 1rem; }
.page-contenu ul li::before { content: '✳ '; color: var(--brun); }
.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 {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1rem clamp(0rem, 8vw, 8rem) 2rem 0;
}
.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 » fourni par Romain (16.09) : tout est exprimé
     en em du wordmark — fleur 1.7em, écart fleur→wordmark 0.28em, baseline 0.25em
     avec 0.55em d'écart (versions texte conservé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;
  overflow: hidden;
  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: 0.9375rem; }
.site-footer__copy { margin-top: 1.5rem; font-size: 0.875rem; }
/* Home + pages « footer-vague » (Votre parcours) — capture maquette, retour Romain 16.09 :
   les CTA vivent DANS la vague du footer — cercle violet « Nous contacter » à gauche, à cheval sur la vague corail,
   les 3 liens flèche à droite, posés SUR le corail dans le creux de la vague. La mise
   en place desktop (calques absolus sur la vague) est dans le bloc calage maquette ;
   ici, les réglages communs + petits écrans. Pas de vague-haut sur la home : la page
   se termine 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) {
  .site-footer__brand { float: none; margin: 0 auto 2rem; }
  /* petits écrans : la disposition maquette ne tient pas, tout est empilé centré
     au-dessus de la vague (arbitrage validé) */
  .footer-vague .site-footer__top { flex-direction: column; align-items: center; gap: 1.5rem; padding-block: 1.5rem 0; }
  .footer-vague .site-footer__arrows { padding: 0 0 1.5rem; }
}

/* =============================================================
   CALAGE MAQUETTE — desktop
   Unité : --s = 1px du plan de travail Illustrator (2560 de large).
   Toutes les cotes ci-dessous sont les valeurs EXACTES extraites du
   PDF vectoriel de la maquette home. Cap à 2560px d'écran.
   Les textes et cibles tactiles ont des planchers via max().
   Planchers « Confort+ » (22.07.2026, +1 cran à la demande de Romain) :
   la maquette 2560 rendue en proportionnel pur donnait 11-13px sur
   laptop. Chaque rôle typo a un plancher lisible (corps cartes 15px,
   témoignages 17px, leads 18px, citations 19px, nav 15.5px). ≥2560px :
   rendu maquette strictement identique, les planchers ne s'activent jamais.
   ============================================================= */
:root {
  --s: 0.0390625vw; /* 100vw / 2560 */
  /* échelle « composants » : identique à --s mais plancher à 60 % de la maquette
     (labels display 30 → jamais sous 18px). À utiliser 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 relevé 60 → 70 % (14.09.2026) : labels display 30 → jamais sous 21px */
  /* largeur réelle du container — SOURCE UNIQUE : tout élément qui doit
     s'aligner sur la zone de contenu (intro hero, cercle contact) dérive
     de cette variable, jamais de cotes maquette en dur. Le terme
     100vw - 29rem garantit une marge latérale d'au moins ~14.5rem sous
     ~1350px : le cercle contact plancheré (257 × --sc) y tient toujours. */
  --container-w: max(calc(1360 * var(--s)), min(1100px, calc(100vw - 28rem)));
  /* Révision laptop 14.09.2026 : plancher 860 → 1100px et couloir 29 → 28rem. À 1280 le
     contenu occupe 832px (65 %) au lieu de 816, à 1440 : 992, à 1568 : 1100 ; la cote
     maquette 1360 × --s reprend la main à partir de ~2070px d'écran. Le cercle contact
     plancheré (257 × 0.7 = 180px) tient dans la marge de 224px à 1280 avec au moins
     1.5rem d'air avant l'intro (garde-fou dans .hero__circle). */
}
@media (min-width: 160rem) { :root { --s: 1px; --sc: 1px; } }

@media (min-width: 62.0625rem) {

  /* --- Container : contenu maquette x600 → x1960.
     Plancher laptop : sous ~1620px d'écran, la zone de contenu ne descend
     plus sous 860px (les marges « aérées » de la maquette absorbent la
     compression, le contenu garde de la place pour le texte agrandi),
     avec un couloir latéral préservé pour le cercle contact (--container-w). --- */
  .container { max-width: var(--container-w); padding-inline: 0; }

  /* --- Kickers : 12px ExtraLight sur la maquette (cote extraite du PDF),
     illisibles en pratique. Écart maquette ASSUMÉ (validé Romain 22/07 :
     « s'éloigner des cotes si ça améliore la lisibilité ») : plancher 14px,
     16px à 2560, graisse 300 + opacité 0.9 (réglées dans la base). --- */
  .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)); } /* demande client 21/07 : la crête ne doit plus frôler le H1 — tout le contenu descend (les éléments de la bande suivent automatiquement) */

  /* --- 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 (retour Romain 14.09) */
    );
    /* Écart maquette assumé (14.09.2026) : cercle remonté de 60 (maquette : centre sur le haut de
       hero__body) pour qu'il chevauche la vague et respire 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 (pdfminer 16.09) */ /* 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 (retour Romain 16.09) */
  .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é (16.09.2026, équilibre laptop) : la photo décor garde l'échelle
       composant (--sc, plancher 70 %) 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 (retour Romain 14.09) 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 (retour Romain 16.09) */
    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 Home.png, 16.09.2026) :
     équipe x2174→2558 y3238→3666 ·
     sécurité gauche x142→586 y4892→5578 · sécurité droite x2006→2438 y5234→5894.
     Taille en --sc (échelle composant, comme le hero), 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é 16.09 : ∅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(20 * var(--s)), 1rem); }
  .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(15 * var(--s)), 0.9375rem); }

  /* --- 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é (16.09.2026) : le collage s'étire sur la largeur RÉELLE du container
     (--g = 1 px maquette rapporté à --container-w) au lieu de rester à 1360 × --s. À 2560 les deux
     coïncident ; sur laptop le collage remplit la colonne de contenu au lieu de flotter au centre. */
  .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 (retour Romain 16.09) */
  .team-card__nom { font-size: max(calc(20 * var(--s)), 1.0625rem); }
  .team-card__details { font-size: max(calc(20 * var(--s)), 1rem); }
  .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, plus large que le container). Écart assumé (retour Romain 16.09) : la diapo
     active fait exactement --container-w, si bien que le bord gauche de l'extrait tombe
     PILE sous le kicker « Les grands titres », et l'image est réduite au profit des
     deux colonnes de texte : extrait 340 · carte 640 · citation 320, gouttières 30.
     Échelle : --a = max(--s, container/1360) pour suivre la colonne réelle sur laptop. */
  .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;
  }
  .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__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é d'un cran (retour Romain) */
  .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 (capture maquette 16.09) : la bande CTA devient un CALQUE posé sur la vague
     corail — le flux du footer n'est plus que vague + partie corail. Cotes maquette :
     cercle à x240/y11 (à cheval sur la vague), 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; }
  .footer-vague .site-footer__arrows { position: absolute; right: calc(700 * var(--s)); top: calc(107 * var(--s)); padding: 0; }
  /* 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 { padding: calc(54 * var(--s)) calc(700 * var(--s)) calc(30 * var(--s)) 0; 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); }
}

/* --- Petits laptops / tablettes paysage (993 → 1200px, révision 14.09.2026) ---
   Le container plancheré descend à ~600px : 5 cartes chiffres sur une rangée
   donnaient un mot par ligne. 3 + 2 cartes centrées, largeur de carte lisible. */
@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)); }
}

/* =============================================================
   PAGE VOTRE PARCOURS (template page-votre-parcours.php, 17.09.2026)
   Cotes : ros/06-page-votre-parcours.md (pdfminer + échantillonnage
   Votre-parcours.png). Base mobile ici, calage maquette desktop plus bas.
   ============================================================= */
.parcours { --marge: calc((100vw - var(--container-w)) / 2); }
.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); }
.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 aux petits corps (é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: -1.5rem;
  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) --- */
  .parcours .page-titre { font-size: max(calc(120 * var(--s)), 3.625rem); margin-block: calc(-56 * 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(58 * var(--s));
  }
  .parcours__etapes { grid-column: 2; padding-inline: 0; }

  /* --- Sous-nav dans son blob corail (x0→349, y534→895 ; liens à x152 y578, interligne 30).
     Le blob = `ROS/svg/bg-menu.svg` (tracé Illustrator fourni par Romain 17.09) posé en masque
     sur la nav elle-même : la forme suit le texte plancheré sur laptop au lieu de rester à
     l'échelle --s (le texte en sortirait). Sticky, blob compris (décision Romain 17.09).
     Sur laptop la marge (224 px à 1280) loge le blob ET la lettre d'étape : au moins 1.25rem
     d'air entre les deux, quitte à passer les liens à 15 px. --- */
  .parcours__nav {
    grid-column: 1;
    align-self: start;
    justify-self: start;
    position: sticky;
    top: 1.5rem;
    z-index: 3;
    margin-top: calc(-109 * var(--s)); /* le haut du blob précède la première étape */
    max-width: calc(100% - 78 * var(--s) - 1.25rem); /* ne mord jamais sur la lettre de l'étape (x522), 1.25rem d'air */
    min-width: min(calc(349 * var(--s)), calc(100% - 78 * var(--s) - 1.25rem));
    /* Planchers laptop : les liens (17 px) doivent rester dans le lobe large du blob (≤ 55 % de sa
       hauteur, le lobe bas est plus étroit) → retrait gauche réduit, marge basse allongée */
    padding: max(calc(44 * var(--s)), 1.6rem) max(calc(30 * var(--s)), 0.85rem) max(calc(207 * var(--s)), 7.5rem) max(1.25rem, calc(152 * var(--s) - 160px + 160 * var(--s)));
    /* retrait gauche : 152 à 2560, fond progressivement vers 1.25rem sur laptop (le terme −160px + 160·--s s'annule à 2560) */
    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.186v.139c70.294,0,127.279-52.837,127.279-118.015C350.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.186v.139c70.294,0,127.279-52.837,127.279-118.015C350.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)), 0.9375rem); /* 15 px sur laptop (écart assumé) : la marge (224) doit loger blob + lettre avec de l'air */
    line-height: 1.5;
  }
  .parcours__nav-lien:hover { background: none; text-decoration: underline; text-underline-offset: 0.2em; }
  .parcours__nav-lien.est-active { background: none; color: var(--noir); }

  /* --- É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));
    column-gap: max(calc(40 * var(--s)), 2rem);
    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). --- */
  .etape__decor { display: block; position: absolute; z-index: 1; pointer-events: none; will-change: transform; }
  .etape__decor-img { width: 100%; height: auto; object-fit: contain; }
  /* largeur = découpe maquette en --sc ; sur laptop la marge est plus étroite que la découpe : elle glisse
     vers le bord (jamais sous la lettre ni le contenu, 1rem d'air), comme les décors sécurité de la home */
  .etape__decor--gauche { width: calc(233 * var(--sc)); left: min(calc(143 * var(--s) - var(--marge)), calc(-78 * var(--s) - 233 * var(--sc) - 1rem)); top: calc(320 * var(--s)); }
  .etape__decor--gauche-haut { width: calc(419 * var(--sc)); left: min(calc(0px - var(--marge)), calc(-78 * var(--s) - 419 * var(--sc) - 1rem)); top: calc(-190 * var(--s)); }
  .etape__decor--droite { width: calc(158 * var(--sc)); right: calc(0px - var(--marge)); top: calc(460 * var(--s)); }

  /* --- CTA final : titre Thin 85.6 à y4722 dans le creux de la vague, pill brune 504×274 (x1122 y4825),
     vase « x » 93 violet ; le bas de la pill chevauche le haut du footer de 55 --- */
  .parcours-cta__inner { margin-top: calc(-160 * var(--s)); padding-bottom: 0; }
  .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(20 * var(--s)), 1rem);
    margin-bottom: calc(-55 * var(--s));
    min-width: calc(504 * var(--sc));
    min-height: calc(274 * var(--sc));
    justify-content: center;
    position: relative;
    z-index: 3;
  }
  .parcours-cta .btn__picto { width: auto; height: calc(110 * 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; }
}

/* =============================================================
   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; }
}