/* ==========================================================================
   Polices auto-hébergées (aucune requête vers Google — perf + RGPD)

   Les deux familles sont des polices variables : un seul fichier porte tout
   l'axe de graisse. Google Fonts sert néanmoins un fichier par graisse
   déclarée, et ces fichiers sont identiques au bit près. Les déclarer une par
   une revenait à télécharger cinq fois les mêmes octets sous cinq noms
   différents : 146 ko au lieu de 70 sur l'accueil, sur le chemin critique.

   D'où la syntaxe de plage, « font-weight: 300 700 » : elle annonce au
   navigateur que le fichier couvre l'intervalle, et il interpole. Le rendu ne
   change pas, puisque les graisses 500 et 600 sortaient déjà de ce même
   fichier variable.

   Ne pas revenir à une déclaration par graisse en remplaçant les fichiers
   depuis Google Fonts : vérifier d'abord s'ils sont identiques (md5).
   Sous-ensemblage des glyphes : tools/make-fonts.py.
   ========================================================================== */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('/assets/fonts/nunito-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('/assets/fonts/nunito-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Naturellement Naturo — design system
   Desktop d'abord (>=1080px), puis deux paliers :
     - max-width:1079px  → "narrow" (tablette, valeurs de la maquette desktop)
     - max-width:767px   → téléphone (traitement de la maquette mobile)
   ========================================================================== */

:root {
  /* Palette */
  --bg:            #1c231a;
  --ink:           #fdf7ea;
  --ink-70:        rgba(253, 247, 234, .72);
  --ink-60:        rgba(253, 247, 234, .62);
  --ink-45:        rgba(253, 247, 234, .45);
  --sage:          #ccd5ae;
  --sage-24:       rgba(204, 213, 174, .24);
  --sage-16:       rgba(204, 213, 174, .16);
  --terracotta:    #e76f51;
  --terracotta-d:  #cf5b3e;
  --salmon:        #e0876c;
  --salmon-l:      #f0a68f;
  --glass:         rgba(250, 237, 205, .10);
  --glass-soft:    rgba(250, 237, 205, .06);

  /* Typo */
  --serif:  'Cormorant Garamond', Georgia, serif;
  --sans:   'Nunito Sans', system-ui, -apple-system, sans-serif;

  /* Tokens responsives — repris de la maquette */
  --fs-body:     17px;
  /* Fluide plutôt que fixe : « Apaisez votre corps, naturellement. » passait
     sur trois lignes là où le slogan précédent en tenait deux, la colonne
     du hero descendant à 430 px vers 1080 px de large. La borne haute est
     la plus grande taille qui garde deux lignes sur un grand écran. */
  --fs-h1:       clamp(52px, 4.7vw, 68px);
  --fs-h2:       50px;
  --fs-quote:    42px;
  --gutter:      44px;
  --section-top: 96px;
  --radius-card: 40px;

  --hero-cols:      1.05fr .78fr;
  --split-cols:     1fr 1fr;
  --about-shift:    -70px;
  --about-pad:      48px;
  --about-radius:   180px 34px 34px 34px;
  --about-h:        520px;
  --cta-pad:        66px 60px;
  --footer-cols:    1.4fr 1fr 1.25fr 1fr;
}

/* ---------- Reset léger ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: var(--sage); text-decoration: none; }
h1, h2, h3, h4 { font-weight: 500; margin: 0; }
.ico { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--terracotta); color: var(--bg); padding: 12px 20px; border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; }

/* Réservé aux lecteurs d'écran. Un display:none ou un visibility:hidden les
   ferait taire aussi : il faut laisser le texte dans le flux, réduit à un
   point invisible. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

:where(a, button):focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Primitives ---------- */
.glass {
  background: var(--glass);
  border: 1px solid rgba(204, 213, 174, .26);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--salmon);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  border-radius: 100px;
  padding: 13px 26px;
  font-weight: 700;
  font-size: 14.5px;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.btn--lg { padding: 16px 30px; font-size: 15.5px; }
/* Encre sombre sur les aplats terracotta, et non du blanc : #fff sur #e76f51
   plafonne à 3,09:1, sous le seuil de 4,5 exigé à cette taille de texte — tous
   les boutons du site échouaient au contraste. L'encre du fond de page donne
   5,20 sans toucher à la couleur de marque, là où assombrir le terracotta
   l'aurait fait diverger des prix et des filets qui l'emploient ailleurs. */
.btn--primary {
  background: var(--terracotta);
  color: var(--bg);
  box-shadow: 0 14px 30px rgba(231, 111, 81, .34);
}
.btn--primary:hover { background: var(--salmon); color: var(--bg); }
.btn--ghost {
  border: 1.5px solid rgba(204, 213, 174, .5);
  color: var(--sage);
}
.btn--ghost:hover { background: rgba(204, 213, 174, .14); color: var(--ink); }

.section {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--section-top) var(--gutter) 0;
}

.section h2 {
  font-family: var(--serif);
  font-size: var(--fs-h2);
  line-height: 1.08;
  color: var(--ink);
  text-wrap: pretty;
}

.on-phone { display: none; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 760px;
  overflow: hidden;
  padding-bottom: 70px;
}
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__veil {
  position: absolute; inset: 0;
  background: radial-gradient(110% 90% at 72% 12%, rgba(28, 35, 26, .45), rgba(22, 28, 21, .93) 72%);
}

/* ---------- En-tête ---------- */
.site-header {
  position: relative;
  z-index: 20;
  max-width: 1280px;
  margin: 0 auto;
  padding: 26px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* ---------- Marque : logo monochrome + texte ----------
   Le logo d'origine est bicolore et sa moitié basse ne contraste qu'à 2.6:1 sur
   le fond : elle disparaissait. Il est repeint d'une seule teinte claire
   (tools/make-logo-mono.py, alpha conservé) et posé directement sur le fond,
   sans cartouche. Ratio natif 320/512. */
.brand { display: flex; align-items: center; gap: 15px; line-height: 1; }
.brand__text { display: flex; flex-direction: column; }

.brand__mark {
  flex: none;
  width: auto;
  height: 54px;
}
.brand__mark--lg { height: 78px; }

/* Au pied de page, le logo est posé à gauche du nom et du prénom, comme dans
   l'en-tête. La description reste dessous, sur toute la largeur. */
.footer__brand-head { display: flex; align-items: center; gap: 16px; min-width: 0; }
.footer__brand, .footer__brand .brand__text { min-width: 0; }
.brand__name {
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--ink);
}
.brand__role {
  font-size: 9.5px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--sage);
  margin-top: 6px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border-radius: 100px;
  background: rgba(250, 237, 205, .08);
  border: 1px solid rgba(204, 213, 174, .2);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.nav__link {
  padding: 9px 20px;
  border-radius: 100px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-70);
}
.nav__link:hover { background: rgba(204, 213, 174, .12); color: var(--ink); }
.nav__link.is-current { font-weight: 700; color: var(--ink); background: rgba(204, 213, 174, .18); }

.header__actions { display: flex; align-items: center; gap: 16px; flex: none; }
.header__phone {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--sage);
  white-space: nowrap;
}
.header__phone:hover { color: var(--ink); }

.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  align-items: flex-end;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
}
.burger span { display: block; width: 24px; height: 2px; background: var(--ink); border-radius: 2px; }
.burger span:last-child { width: 15px; }

.menu-mobile {
  position: relative;
  z-index: 30;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 22px;
  display: flex;
  flex-direction: column;
}
.menu-mobile[hidden] { display: none; }
/* Il y avait ici un `.menu-mobile > *` qui repeignait chaque enfant du fond du
   panneau. Invisible sur les liens, il écrasait en revanche le terracotta du
   bouton de rendez-vous — à spécificité égale, il était déclaré plus bas que
   .btn--primary. Le panneau porte déjà ce fond ; la règle ne servait qu'à
   empiler un flou de plus par enfant. */
.menu-mobile {
  background: rgba(31, 39, 29, .96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--sage-24);
  border-radius: 24px;
  padding: 10px 22px 18px;
  box-shadow: 0 28px 56px rgba(16, 21, 15, .55);
  width: calc(100% - 44px);
  margin: 0 22px;
}
.menu-mobile a:not(.btn) {
  padding: 14px 0;
  font-weight: 700;
  font-size: 15px;
  color: rgba(253, 247, 234, .82);
  border-bottom: 1px solid rgba(204, 213, 174, .14);
  background: none;
}
/* Le bouton de rendez-vous ouvre le menu, avant les pages. */
.menu-mobile__cta { margin: 6px 0 14px; }
/* L'accent portait sur `:first-child`, qui désigne désormais le bouton. On vise
   le premier lien qui le suit, pour garder la même mise en avant. */
.menu-mobile__cta + a { color: var(--ink); }
.menu-mobile a:not(.btn):nth-last-child(2) { border-bottom: none; padding-bottom: 16px; }
.menu-mobile .btn { padding: 13px; }

/* ---------- Contenu du hero ---------- */
.hero__inner {
  position: relative;
  z-index: 10;
  max-width: 1280px;
  margin: 0 auto;
  padding: 58px var(--gutter) 0;
  display: grid;
  grid-template-columns: var(--hero-cols);
  gap: 56px;
  align-items: center;
}
.hero__card {
  padding: 52px 48px;
  border-radius: var(--radius-card);
  box-shadow: 0 40px 80px rgba(16, 21, 15, .5);
}
.eyebrow-row { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.eyebrow-icon {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(204, 213, 174, .4);
  display: grid;
  place-items: center;
  color: var(--sage);
  flex: none;
}
.hero__title {
  font-family: var(--serif);
  font-size: var(--fs-h1);
  line-height: 1;
  letter-spacing: .5px;
  color: var(--ink);
  text-wrap: balance;
}
.hero__title em { font-style: italic; color: var(--salmon-l); }
.hero__lede {
  margin: 26px 0 0;
  color: var(--ink-70);
  font-size: 18px;
  max-width: 46ch;
  text-wrap: pretty;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.chip {
  background: rgba(250, 237, 205, .07);
  border: 1px solid rgba(204, 213, 174, .22);
  color: var(--sage);
  padding: 9px 18px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.hero__aside { display: flex; flex-direction: column; gap: 20px; }
/* Le portrait source est un cadrage serré (459x601) : la tête occupe 62 % de sa
   hauteur. Une hauteur figée de 330px ne laissait voir que 52 % de la photo, donc
   un menton coupé — et aucun object-position ne pouvait le rattraper. Un ratio
   fixe garantit le même cadrage quelle que soit la largeur de colonne ; il doit
   rester sous 1.22 pour que la tête tienne entière. */
.hero__portrait {
  margin: 0;
  border-radius: 150px 34px 34px 34px;
  overflow: hidden;
  aspect-ratio: 8 / 7;
  border: 1px solid rgba(204, 213, 174, .18);
}
.hero__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }

.credential {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  border-radius: 26px;
}
.credential__icon {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 15px;
  background: rgba(204, 213, 174, .14);
  border: 1px solid var(--sage-24);
  display: grid;
  place-items: center;
  color: var(--sage);
}
.credential b { display: block; font-family: var(--serif); font-size: 21px; color: var(--ink); font-weight: 600; }
.credential small { color: rgba(253, 247, 234, .6); font-size: 13.5px; }

/* ==========================================================================
   Section « La naturopathie »
   ========================================================================== */
.split { display: grid; grid-template-columns: var(--split-cols); gap: 64px; align-items: start; }
.split__intro .eyebrow { margin-bottom: 14px; }
.split__intro h2 { margin-bottom: 20px; }
.split__text { margin: 0; color: rgba(253, 247, 234, .66); max-width: 44ch; text-wrap: pretty; }

.pillars { display: flex; flex-direction: column; gap: 14px; }
.pillar {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--glass-soft);
  border: 1px solid var(--sage-16);
  border-radius: 24px;
  padding: 24px 26px;
  transition: background .18s ease;
}
.pillar:hover { background: rgba(250, 237, 205, .1); }
.pillar__icon {
  flex: none;
  width: 50px; height: 50px;
  border-radius: 16px;
  background: rgba(204, 213, 174, .14);
  border: 1px solid rgba(204, 213, 174, .22);
  display: grid;
  place-items: center;
  color: var(--sage);
}
.pillar h3 { font-family: var(--serif); font-weight: 600; font-size: 24px; color: var(--ink); margin-bottom: 6px; }
.pillar p { margin: 0; color: var(--ink-60); font-size: 15px; line-height: 1.55; }

/* ==========================================================================
   Prestations
   ========================================================================== */
.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 34px;
}
.section__head .eyebrow { margin-bottom: 12px; }
.section__head-link { flex: none; }

.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.service {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: rgba(250, 237, 205, .07);
  border: 1px solid rgba(204, 213, 174, .2);
  border-radius: 28px;
  padding: 22px;
  transition: background .18s ease;
}
.service:hover { background: rgba(250, 237, 205, .12); }
/* Ratio fixe plutôt qu'une hauteur figée : avec `height: 150px`, la largeur
   suivant la grille, le rapport oscillait entre 1.45 et 1.95 selon l'écran —
   donc un recadrage `cover` imprévisible d'un appareil à l'autre. */
.service__media {
  aspect-ratio: 16 / 10;
  border-radius: 20px;
  background: rgba(204, 213, 174, .09);
  border: 1px solid var(--sage-16);
  display: grid;
  place-items: center;
  color: var(--sage);
  margin-bottom: 20px;
  overflow: hidden;
}
.service__media--photo { background: none; }
.service__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 23px;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.15;
}
.service p { margin: 0 0 20px; color: rgba(253, 247, 234, .6); font-size: 14.5px; line-height: 1.5; }
.service__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.service__foot b { font-family: var(--serif); font-size: 24px; color: var(--salmon-l); font-weight: 600; }
.service__go {
  width: 36px; height: 36px;
  border-radius: 100px;
  background: var(--terracotta);
  color: var(--bg);
  display: grid;
  place-items: center;
  flex: none;
}

/* ==========================================================================
   À propos
   ========================================================================== */
.about { display: grid; grid-template-columns: var(--split-cols); align-items: center; }
.about__media {
  margin: 0;
  border-radius: var(--about-radius);
  overflow: hidden;
  height: var(--about-h);
  border: 1px solid rgba(204, 213, 174, .18);
}
.about__media img { width: 100%; height: 100%; object-fit: cover; }
.about__card {
  margin-left: var(--about-shift);
  position: relative;
  background: rgba(38, 47, 36, .9);
  border: 1px solid rgba(204, 213, 174, .22);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 34px;
  padding: var(--about-pad);
  box-shadow: 0 34px 66px rgba(16, 21, 15, .5);
}
.about__card .eyebrow { margin-bottom: 12px; }
.about__card h2 { margin-bottom: 18px; }
.about__lede { margin: 0 0 14px; color: var(--ink-70); font-size: 17.5px; }
.about__text { margin: 0 0 28px; color: rgba(253, 247, 234, .6); font-size: 16px; }

/* ==========================================================================
   Citation
   ========================================================================== */
.quote { max-width: 900px; text-align: center; }
.quote blockquote { margin: 0; }
.quote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-quote);
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}
.quote cite {
  display: block;
  margin-top: 24px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--salmon);
}

/* ==========================================================================
   Modalités
   ========================================================================== */
.modalities { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; }
.modality {
  display: flex;
  gap: 18px;
  align-items: center;
  background: rgba(250, 237, 205, .05);
  border: 1px solid rgba(204, 213, 174, .14);
  border-radius: 22px;
  padding: 24px 26px;
}
.modality__icon {
  flex: none;
  width: 48px; height: 48px;
  border-radius: 15px;
  border: 1px solid rgba(204, 213, 174, .26);
  background: rgba(204, 213, 174, .1);
  display: grid;
  place-items: center;
  color: var(--sage);
}
.modality b { display: block; font-family: var(--serif); font-size: 21px; color: var(--ink); font-weight: 600; }
.modality small { color: rgba(253, 247, 234, .58); font-size: 14px; }

/* ==========================================================================
   CTA final
   ========================================================================== */
.cta {
  border-radius: var(--radius-card);
  background: linear-gradient(150deg, rgba(204, 213, 174, .18), rgba(250, 237, 205, .05));
  border: 1px solid var(--sage-24);
  padding: var(--cta-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 56px;
  flex-wrap: wrap;
}
.cta__text { flex: 1; min-width: 320px; }
.cta__text .eyebrow { margin-bottom: 12px; }
.cta__text h2 { margin-bottom: 14px; line-height: 1.06; }
.cta__text p { margin: 0; color: rgba(253, 247, 234, .68); max-width: 46ch; }
.cta__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  max-width: 1280px;
  margin: 0 auto;
  padding: 100px var(--gutter) 40px;
  color: var(--ink-70);
}
.footer__grid { display: grid; grid-template-columns: var(--footer-cols); gap: 30px; padding-bottom: 44px; }
.footer__brand .brand__role { display: block; }
.footer__brand p { margin: 18px 0 0; color: rgba(253, 247, 234, .55); font-size: 15px; max-width: 34ch; }
/* Titres de colonnes : en h2 et non en h4, pour ne pas sauter de niveau
   après le dernier titre de la page. Leur taille reste celle d'un
   intertitre — le niveau dit la structure, pas l'apparence. */
.site-footer .footer__grid h2 {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 10.5px;
  color: var(--sage);
  margin: 0 0 18px;
  font-weight: 700;
}
.footer__list { display: flex; flex-direction: column; gap: 11px; }
.footer__list a, .footer__list li { color: var(--ink-70); font-size: 15px; }
.footer__list a:hover { color: var(--ink); }
.footer__bottom {
  border-top: 1px solid var(--sage-16);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
  /* --ink-45 tombait à 4,13:1 sur ce fond, sous le seuil de 4,5 exigé
     à 12,5 px. */
  color: var(--ink-60);
}
.footer__bottom a { color: var(--ink-60); }
.footer__bottom a:hover { color: var(--sage); }

/* ==========================================================================
   PALIER 1 — tablette / < 1080px
   ========================================================================== */
@media (max-width: 1079px) {
  :root {
    --fs-h1:       46px;
    --fs-h2:       34px;
    --fs-quote:    30px;
    --gutter:      28px;
    --section-top: 64px;

    --hero-cols:    1fr;
    --split-cols:   1fr;
    --about-shift:  0;
    --about-pad:    32px;
    --about-radius: 34px;
    --about-h:      300px;
    --cta-pad:      40px 28px;
    --footer-cols:  repeat(auto-fit, minmax(210px, 1fr));
  }

  .nav, .header__phone { display: none; }
  .burger { display: flex; }

  .hero { min-height: 0; padding-bottom: 56px; }
  .hero__inner { padding-top: 40px; gap: 32px; }

  /* En colonne unique, l'aside occupe toute la largeur : sans plafond, le
     portrait s'étirerait à plus de 800px de large et le cadrage repartirait
     de travers. On le ramène à une largeur comparable à celle du desktop. */
  .hero__portrait, .credential { max-width: 460px; margin-inline: auto; width: 100%; }
  .site-footer { padding: 72px var(--gutter) 40px; }
}

/* ==========================================================================
   PALIER 2 — téléphone / < 768px  (traitement de la maquette mobile)
   ========================================================================== */
/* Entre 900 et 1079 px, les quatre colonnes du pied de page tiennent encore,
   mais l'auto-fit les fait toutes égales : Navigation, dont le plus long
   libellé mesure 152 px, occupait autant de place que Contact, où l'adresse
   email en demande 245 et se coupait au milieu d'un mot. On leur donne des
   proportions, et on resserre l'écart. */
@media (min-width: 900px) and (max-width: 1079px) {
  :root { --footer-cols: 1.15fr .85fr 1.3fr .9fr; }
  .footer__grid { gap: 22px; }
}

@media (max-width: 767px) {
  :root { --fs-body: 16px; --gutter: 22px; }
  body { line-height: 1.6; }

  .on-desktop { display: none; }
  .on-phone { display: inline; }

  /* --- En-tête : marque sur une ligne, plus de sous-titre --- */
  .site-header { padding: 18px var(--gutter); }
  .brand__name { font-size: 19px; }
  .site-header .brand__role { display: none; }
  .header__cta { display: none; }

  /* --- Hero : carte unique centrée, portrait et carte diplôme retirés --- */
  .hero__veil { background: radial-gradient(130% 85% at 50% 8%, rgba(28, 35, 26, .4), rgba(22, 28, 21, .93) 76%); }
  .hero__inner { padding: 30px var(--gutter) 0; }
  .hero__aside { display: none; }

  .hero__card { padding: 40px 26px 34px; border-radius: 36px; text-align: center; }
  .eyebrow-row { flex-direction: column; gap: 16px; margin-bottom: 20px; }
  .hero__title { line-height: 1.04; }
  .hero__lede { margin: 20px auto 0; font-size: 15.5px; }
  .hero__actions { margin-top: 26px; }
  .hero__actions .btn { flex: 1 1 100%; }

  /* Les puces deviennent une rangée défilante (au lieu de passer à la ligne) */
  .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 28px calc(var(--gutter) * -1) 0;
    padding: 0 var(--gutter) 4px;
    scrollbar-width: none;
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; font-size: 12.5px; padding: 9px 16px; }

  /* --- Naturopathie : l'intro devient une carte centrée --- */
  .split { gap: 16px; }
  .split__intro {
    border-radius: 28px;
    background: var(--glass-soft);
    border: 1px solid rgba(204, 213, 174, .18);
    padding: 28px 24px;
    text-align: center;
  }
  .split__intro h2 { margin-bottom: 14px; line-height: 1.14; }
  .split__text { max-width: none; font-size: 15px; }
  .pillars { gap: 12px; }
  .pillar { gap: 16px; padding: 20px; border-radius: 22px; }
  .pillar__icon { width: 46px; height: 46px; }
  .pillar h3 { font-size: 21px; }
  .pillar p { font-size: 14.5px; }

  /* --- Prestations : la grille devient un carrousel à accroche --- */
  .section__head { flex-wrap: nowrap; margin-bottom: 18px; }
  .section__head-link {
    border: none;
    padding: 0 0 4px;
    font-size: 12.5px;
    color: var(--sage);
  }
  .section__head-link .ico { display: none; }
  .section__head-link:hover { background: none; }

  .services {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 calc(var(--gutter) * -1);
    padding: 4px var(--gutter) 10px;
    scrollbar-width: none;
  }
  .services::-webkit-scrollbar { display: none; }
  .services > li { flex: none; width: 238px; scroll-snap-align: start; }
  .service { padding: 20px; border-radius: 26px; }
  .service__media { border-radius: 18px; margin-bottom: 16px; }
  .service h3 { font-size: 20px; margin-bottom: 7px; }
  .service p { margin-bottom: 16px; font-size: 13.5px; }
  .service__foot b { font-size: 22px; }
  .service__go { width: 34px; height: 34px; }

  /* --- À propos : image dessus, carte qui remonte par-dessus --- */
  .about { display: block; }
  .about__media { border-radius: 120px 28px 28px 28px; }
  .about__card {
    margin: -30px 10px 0;
    border-radius: 26px;
    padding: 24px;
    background: rgba(38, 47, 36, .86);
  }
  .about__card h2 { font-size: 28px; line-height: 1.14; margin-bottom: 12px; }
  .about__lede { font-size: 15px; margin-bottom: 10px; }
  .about__text { font-size: 15px; margin-bottom: 20px; }

  /* --- Citation --- */
  .quote { padding-left: 26px; padding-right: 26px; }
  .quote p { font-size: 27px; line-height: 1.35; }

  /* --- Modalités --- */
  .modalities { grid-template-columns: 1fr; gap: 12px; }
  .modality { gap: 14px; padding: 16px 18px; border-radius: 20px; }
  .modality__icon { width: 42px; height: 42px; border-radius: 13px; }
  .modality b { font-size: 19px; }
  .modality small { font-size: 13.5px; }

  /* --- CTA : centré, boutons pleine largeur empilés --- */
  .cta { flex-direction: column; text-align: center; gap: 0; padding: 32px 24px; border-radius: 30px; }
  .cta__text { min-width: 0; }
  .cta__text p { margin: 0 auto; font-size: 15px; }
  .cta__actions { flex-direction: column; width: 100%; margin-top: 24px; gap: 10px; }
  .cta__actions .btn { width: 100%; }

  /* --- Footer : une seule colonne, sans les intitulés --- */
  .site-footer { padding: 44px var(--gutter) 26px; }
  .footer__grid { grid-template-columns: 1fr; gap: 22px; padding-bottom: 22px; }
  .site-footer .footer__grid h2 { display: none; }
  .footer__brand p { display: none; }
  .footer__modes { display: none; }
  .footer__list { gap: 11px; }
  .footer__bottom { flex-direction: column; gap: 10px; font-size: 11.5px; }
}

/* ---------- Accessibilité : mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   PAGES INTÉRIEURES
   ========================================================================== */

/* ---------- Bandeau de tête ---------- */
.pagehead { position: relative; overflow: hidden; padding-bottom: 8px; }
.pagehead__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 130% at 76% -10%, rgba(204, 213, 174, .16), transparent 62%),
    linear-gradient(178deg, #232c20 0%, var(--bg) 88%);
}
.pagehead__bg::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(70% 90% at 12% 0%, rgba(231, 111, 81, .10), transparent 60%);
}
.pagehead__inner {
  position: relative;
  z-index: 10;
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px var(--gutter) 8px;
}
.pagehead h1 {
  font-family: var(--serif);
  font-size: clamp(38px, 6vw, 66px);
  line-height: 1.02;
  letter-spacing: .5px;
  color: var(--ink);
  margin: 16px 0 0;
  max-width: 20ch;
  text-wrap: balance;
}
.pagehead__lead {
  margin: 20px 0 0;
  color: var(--ink-70);
  font-size: 18px;
  max-width: 54ch;
  text-wrap: pretty;
}

/* ---------- Variantes de titrage ---------- */
.section__head--center { justify-content: center; text-align: center; margin-bottom: 40px; }
.section__head--center > div { max-width: 30ch; }

/* ---------- Piliers en grille (page À propos) ---------- */
.pillars--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.pillars--grid .pillar { flex-direction: column; gap: 16px; }

/* ---------- Liste à coches ---------- */
.checklist { display: flex; flex-direction: column; gap: 16px; }
.checklist li { display: flex; gap: 13px; align-items: flex-start; color: var(--ink-70); }
.checklist .ico { color: var(--terracotta); flex: none; margin-top: 4px; stroke-width: 2.2; }
.checklist b { color: var(--ink); font-weight: 700; }

.disclaimer {
  margin: 24px 0 0;
  font-size: 14.5px;
  font-style: italic;
  color: rgba(253, 247, 234, .5);
}
.disclaimer--center { text-align: center; max-width: 62ch; margin: 34px auto 0; }

/* ==========================================================================
   Tarifs
   ========================================================================== */
/* ==========================================================================
   Prestations — un bloc par catégorie, une carte par prestation
   ==========================================================================
   La grille tarifaire compacte d'avant tenait sur trois colonnes ; publier les
   descriptifs de Virginie demandait de la place. Chaque catégorie occupe donc
   toute la largeur, et ses prestations se répartissent en cartes. */
.prestas { display: flex; flex-direction: column; gap: 26px; }
.presta {
  background: var(--glass-soft);
  border: 1px solid var(--sage-16);
  border-radius: 28px;
  padding: 30px;
  scroll-margin-top: 24px;
}
.presta__head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 24px; }
.presta__icon {
  flex: none;
  width: 52px; height: 52px;
  border-radius: 16px;
  background: rgba(204, 213, 174, .14);
  border: 1px solid rgba(204, 213, 174, .22);
  display: grid;
  place-items: center;
  color: var(--sage);
}
.presta__intro { min-width: 0; }
.presta h2 { font-family: var(--serif); font-size: 28px; line-height: 1.15; font-weight: 600; margin-bottom: 6px; }
.presta__desc { margin: 0; color: var(--ink-60); font-size: 15px; line-height: 1.55; max-width: 62ch; }
/* Une modalité, une icône : montrer une épingle devant « à domicile » et
   laisser « en téléconférence » nu laissait croire à un oubli. Les pictogrammes
   sont ceux du pied de page et de l'accueil, pour ne pas introduire un second
   jeu de symboles pour les mêmes notions. */
.presta__lieux {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 10px 0 0;
  color: var(--ink-45);
  font-size: 13px;
}
.presta__lieu { display: inline-flex; align-items: center; gap: 6px; }
.presta__lieux .ico { flex: none; }

.presta__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
  gap: 14px;
  align-items: start;
}
/* L'intertitre coupe la grille sur toute sa largeur : sans cela, « Détente »
   se logerait dans une colonne et les massages qui suivent remonteraient à sa
   droite, sous le mauvais intertitre. */
.presta__section {
  grid-column: 1 / -1;
  margin-top: 6px;
}
.presta__list > .presta__section:first-child { margin-top: 0; }
.presta__section h3 {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0 0 6px;
}
.presta__section-desc {
  margin: 0;
  color: var(--ink-60);
  font-size: 14px;
  line-height: 1.55;
  max-width: 68ch;
}

.presta__item {
  background: rgba(204, 213, 174, .07);
  border: 1px solid rgba(204, 213, 174, .16);
  border-radius: 18px;
  padding: 18px 20px;
  height: 100%;
}
/* Nom, durée et prix sur une ligne. Le nom peut s'enrouler, les deux autres
   non : `1fr auto auto` leur garantit leur largeur, et l'alignement sur la
   ligne de base cale le prix sur le titre malgré la différence de corps. */
.presta__ligne {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 4px 14px;
}
.presta__ligne h4 {
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  margin: 0;
}
.presta__duree { color: var(--ink-45); font-size: 13px; white-space: nowrap; }
.presta__prix {
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 600;
  color: var(--salmon-l);
  white-space: nowrap;
}
.presta__texte {
  margin: 10px 0 0;
  color: var(--ink-60);
  font-size: 14px;
  line-height: 1.6;
}
/* Réservation d'une prestation : contour et non aplat. Répété huit fois sur la
   page, un bouton plein volerait la vedette à l'appel principal du bas. */
.presta__rdv {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 7px 14px;
  border: 1.5px solid rgba(204, 213, 174, .5);
  border-radius: 100px;
  color: var(--sage);
  font-size: 13px;
  font-weight: 700;
}
.presta__rdv:hover { background: rgba(204, 213, 174, .14); color: var(--ink); }


/* ==========================================================================
   Page d'erreur
   ==========================================================================
   Le corps s'aligne sur le titre plutôt que de se centrer comme les pages de
   texte : sur un long texte juridique, une colonne étroite au milieu se lit
   bien ; sur neuf liens courts, le décalage de deux cents pixels sous un titre
   aligné à gauche saute aux yeux. */
.erreur { padding-top: 34px; }
.erreur__intro { color: var(--ink-60); font-size: 15.5px; margin: 0 0 16px; }
/* Trois colonnes plutôt qu'une liste en pilonne : neuf items empilés
   laissaient la moitié droite de l'écran vide et allongeaient la page pour
   rien. */
.erreur__liens {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 4px 30px;
  max-width: 760px;
  margin: 0 0 34px;
}
.erreur__liens a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 0;
  color: var(--ink-70);
  font-size: 15.5px;
}
.erreur__liens a:hover { color: var(--ink); }
.erreur__liens .ico { flex: none; color: var(--salmon-l); }

/* ==========================================================================
   Étapes
   ========================================================================== */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.step {
  position: relative;
  background: var(--glass-soft);
  border: 1px solid var(--sage-16);
  border-radius: 24px;
  padding: 30px 26px 26px;
}
.step__num {
  display: block;
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  color: rgba(231, 111, 81, .55);
  margin-bottom: 14px;
}
.step h3 { font-family: var(--serif); font-size: 23px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.step p { margin: 0; color: var(--ink-60); font-size: 15px; line-height: 1.55; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact { display: grid; grid-template-columns: .85fr 1.15fr; gap: 44px; align-items: start; }
.contact__cards { display: flex; flex-direction: column; gap: 12px; }
/* Colonne de droite : la réservation puis le formulaire. Sans ce conteneur, le
   bloc de réservation deviendrait un troisième enfant de la grille et
   retomberait sous les cartes, en première colonne. */
.contact__col { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.cta--compact { padding: 26px 28px; gap: 22px; }
.cta--compact h2 { font-size: clamp(21px, 2.2vw, 26px); }
.cta--compact .cta__text { min-width: 0; }
.contact-card {
  display: flex;
  gap: 16px;
  align-items: center;
  background: var(--glass-soft);
  border: 1px solid var(--sage-16);
  border-radius: 20px;
  padding: 18px 20px;
  color: inherit;
  transition: background .18s ease;
}
a.contact-card:hover { background: rgba(250, 237, 205, .11); }
.contact-card__icon {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(204, 213, 174, .26);
  background: rgba(204, 213, 174, .1);
  display: grid;
  place-items: center;
  color: var(--sage);
}
.contact-card b { display: block; font-family: var(--serif); font-size: 19px; color: var(--ink); font-weight: 600; }
.contact-card span, .contact-card address {
  color: var(--ink-60);
  font-size: 14.5px;
  font-style: normal;
  line-height: 1.45;
}

/* ---------- Formulaire ---------- */
.form {
  background: rgba(38, 47, 36, .74);
  border: 1px solid rgba(204, 213, 174, .2);
  border-radius: 30px;
  padding: 34px;
}
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 18px; }
.field label { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sage); }
.field__opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-45); }
.field input, .field select, .field textarea {
  font-family: inherit;
  font-size: 15.5px;
  color: var(--ink);
  background: rgba(28, 35, 26, .55);
  border: 1px solid rgba(204, 213, 174, .22);
  border-radius: 14px;
  padding: 13px 16px;
  width: 100%;
  transition: border-color .18s ease, background .18s ease;
}
.field textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--sage) 50%), linear-gradient(135deg, var(--sage) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(253, 247, 234, .32); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--sage);
  background: rgba(28, 35, 26, .8);
}
.form__note { margin: 18px 0 0; font-size: 13px; color: var(--ink-45); line-height: 1.55; }
.form__note a { color: var(--sage); text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   Pages de texte (mentions légales, confidentialité, 404)
   ========================================================================== */
.prose { max-width: 780px; }
.prose h2 {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  color: var(--ink);
  margin: 44px 0 14px;
  line-height: 1.2;
}
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 16px; color: var(--ink-70); font-size: 16.5px; line-height: 1.7; }

/* Corps des articles de blog, aligné des deux côtés.
   La césure n'est pas une option ici : sans elle, justifier une colonne de
   texte creuse des rivières de blanc entre les mots, d'autant plus larges que
   l'écran est étroit. `hyphens: auto` laisse le navigateur couper aux bons
   endroits — il s'appuie sur le `lang="fr"` de la page, sans lequel il ne
   ferait rien. Safari demande encore le préfixe.
   Le lien de retour et le bloc de maillage restent au fil du texte : ce sont
   des éléments de navigation, pas de la prose. */
.article__corps p:not(.retour):not(.cocon__titre):not(.cocon__mere) {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.prose a { color: var(--sage); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--ink); }
.prose b { color: var(--ink); }
.callout {
  background: rgba(231, 111, 81, .1);
  border: 1px solid rgba(231, 111, 81, .3);
  border-radius: 18px;
  padding: 20px 24px;
}
.todo {
  display: block;
  margin-top: 10px;
  background: rgba(204, 213, 174, .1);
  border-left: 3px solid var(--sage);
  border-radius: 0 10px 10px 0;
  padding: 12px 16px;
  font-size: 14.5px;
  color: var(--sage);
}
.prose__meta { margin-top: 44px; font-size: 13.5px; color: var(--ink-45); font-style: italic; }

/* ==========================================================================
   Encadré — ce qu'il faut savoir avant de s'engager
   ==========================================================================
   Employé deux fois : le questionnaire préalable au coaching, et les modalités
   d'inscription aux ateliers. Teinte terracotta, celle que le site réserve à
   ce qui doit ressortir du lot ; en sauge, l'encadré se fondrait dans ce qui
   l'entoure alors qu'il appelle une action.

   Déclaré après `.prose` à dessein : les deux sélecteurs de paragraphe ont la
   même spécificité, seul l'ordre les départage, et cet encadré vit à
   l'intérieur d'une prose sur la page des événements. */
.encadre {
  margin: 26px 0;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(231, 111, 81, .09);
  border: 1px solid rgba(231, 111, 81, .3);
}
.encadre p { margin: 0 0 10px; color: var(--ink-70); font-size: 14px; line-height: 1.55; }
.encadre p:last-child { margin-bottom: 0; }
.encadre b { color: var(--ink); }
.encadre__titre {
  font-family: var(--sans);
  font-size: 10.5px !important;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--terracotta-l, #f0a68f) !important;
  margin-bottom: 10px !important;
}
/* Consigne secondaire : elle s'efface d'un cran pour ne pas concurrencer
   l'action, sans descendre sous 4,5:1 de contraste. */
.encadre__aparte { display: block; margin-top: 8px; color: var(--ink-60); font-size: 13px; }
.encadre__doc {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  color: var(--salmon-l);
  font-weight: 700;
}
.encadre__doc:hover { color: var(--terracotta); }


/* ==========================================================================
   Divers
   ========================================================================== */
.cta--center { flex-direction: column; text-align: center; gap: 28px; }
.cta--center .cta__text { min-width: 0; max-width: 34ch; }
.cta--center .cta__text p { margin: 0 auto; }
.cta--center .cta__actions { justify-content: center; }

.footer__legal { display: flex; gap: 20px; flex-wrap: wrap; }

/* Indicateur de défilement du carrousel — masqué hors téléphone */
.rail-hint { display: none; }

/* ==========================================================================
   Responsive des pages intérieures
   ========================================================================== */
@media (max-width: 1079px) {
  .pagehead__inner { padding: 36px var(--gutter) 8px; }
  .contact { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 767px) {
  .pagehead__inner { padding: 26px var(--gutter) 4px; }
  .pagehead h1 { margin-top: 12px; }
  .pagehead__lead { font-size: 15.5px; margin-top: 14px; }

  .section__head--center { margin-bottom: 26px; }
  .prestas { gap: 16px; }
  .presta { padding: 22px 20px; border-radius: 24px; }
  .presta h2 { font-size: 23px; }
  .presta__head { gap: 14px; margin-bottom: 20px; }
  .presta__list { grid-template-columns: 1fr; gap: 12px; }
  .presta__item { padding: 16px 18px; }
  /* Trop étroit pour trois colonnes : la durée passe sous le nom, le prix tient
     la hauteur des deux à droite. */
  .presta__ligne { grid-template-columns: 1fr auto; }
  .presta__duree { grid-column: 1; grid-row: 2; }
  .presta__prix { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

  .steps { grid-template-columns: 1fr; gap: 12px; }
  .step { padding: 24px 22px; }
  .pillars--grid { grid-template-columns: 1fr; }
  .pillars--grid .pillar { flex-direction: row; }

  .form { padding: 24px 20px; border-radius: 26px; }
  .form .btn { width: 100%; }
  .prose h2 { font-size: 25px; margin-top: 34px; }
  .prose p { font-size: 15.5px; }

  /* Le carrousel prestations a besoin d'un repère visible : la barre native est masquée */
  .rail-hint {
    display: block;
    height: 4px;
    margin: 14px auto 0;
    width: 96px;
    border-radius: 100px;
    background: rgba(204, 213, 174, .18);
    overflow: hidden;
  }
  .rail-hint[hidden] { display: none; }
  .rail-hint span {
    display: block;
    height: 100%;
    border-radius: 100px;
    background: var(--sage);
    transition: transform .12s linear;
  }
}

/* ==========================================================================
   Correctif : les adresses email sont de longues chaînes insécables et
   débordaient de leur colonne (pied de page à 768px, cartes de contact).
   ========================================================================== */
.footer__list a,
.contact-card span,
.contact-card address,
.prose a { overflow-wrap: break-word; }
/* `break-word` casse au milieu d'un mot en dernier recours, mais ne réduit pas
   la largeur minimale intrinsèque : dans un conteneur flex — les liens du pied
   de page en sont — l'élément refuse de rétrécir et l'adresse déborde de sa
   colonne. `anywhere`, lui, la réduit. On le réserve donc aux largeurs où la
   colonne descend sous 240 px, sinon il découpe « naturellementnatur / o.fr »
   alors que la place ne manque pas. */
@media (max-width: 899px) {
  .footer__list a { overflow-wrap: anywhere; }
}

/* ==========================================================================
   Correctif de débordement — enfants de grille et de flex
   Un élément de grille/flex a `min-width: auto` par défaut : il refuse de
   devenir plus étroit que son contenu minimum. La rangée de puces du hero
   (flex-wrap:nowrap, puces flex:none) imposait ainsi 430px à sa colonne sur
   un écran de 375px. `min-width:0` autorise la rétraction ; les rangées
   défilantes gèrent alors leur propre dépassement.
   ========================================================================== */
.hero__inner > *,
.split > *,
.about > *,
.contact > *,
.section__head > *,
.cta > * { min-width: 0; }

/* Pas de max-width ici : les marges négatives élargissent volontairement ces
   rangées jusqu'aux bords de l'écran (effet pleine largeur). */
.chips,
.services { min-width: 0; }

/* ==========================================================================
   Rangées défilantes — alignement de la première carte
   `scroll-snap-align: start` cale la carte sur le bord du scrollport, ce qui
   annulait le padding-left : la première carte se retrouvait collée au bord
   de l'écran alors que le titre de section, lui, respectait la gouttière.
   `scroll-padding-left` décale le scrollport d'autant et rétablit l'alignement.
   ========================================================================== */
@media (max-width: 767px) {
  .services,
  .chips {
    scroll-padding-left: var(--gutter);
    scroll-padding-right: var(--gutter);
  }
}

/* ---------- Carte de contact « itinéraire » ---------- */
.contact-card__hint {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--sage);
}
.contact-card__hint .ico { stroke-width: 2.2; }
a.contact-card:hover .contact-card__hint { color: var(--ink); }

/* Liens de la colonne Contact du pied de page. Chacun porte son icône :
   Facebook était seul à en avoir une, les trois autres paraissaient décrochés.
   Mêmes pictogrammes et même traitement que la colonne Modalités, pour que les
   deux colonnes se lisent d'un même mouvement.
   L'icône se cale sur la première ligne : un libellé qui se replie — l'adresse
   email, sur une colonne étroite — la laisserait flotter au milieu du bloc si
   elle était centrée verticalement. */
.footer__lien-icone { display: inline-flex; align-items: flex-start; gap: .55em; }
.footer__lien-icone .ico { flex: none; margin-top: 4px; opacity: .7; color: var(--sage); }


@media (max-width: 767px) {
  /* En-tête compact : logo réduit, la marque reste sur une ligne */
  .brand { gap: 11px; }
  .brand__mark { height: 42px; }
  .brand__mark--lg { height: 58px; }
}



/* ---------- Prose : chapô ---------- */
.prose__lead {
  font-size: 19px !important;
  color: var(--ink-70) !important;
  line-height: 1.6 !important;
  margin-bottom: 34px !important;
}

/* ---------- FAQ ---------- */
.faq { max-width: 820px; }
.faq__item {
  padding: 28px 0;
  border-bottom: 1px solid var(--sage-16);
}
.faq__item:first-child { padding-top: 0; }
.faq__item h2 {
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 12px;
}
.faq__item p { margin: 0 0 12px; color: var(--ink-70); font-size: 16.5px; line-height: 1.7; }
.faq__item p:last-child { margin-bottom: 0; }
.faq__item a { color: var(--sage); text-decoration: underline; text-underline-offset: 2px; }
.faq__item b { color: var(--ink); }

@media (max-width: 767px) {
  .prose__lead { font-size: 17px !important; }
  .faq__item { padding: 22px 0; }
  .faq__item h2 { font-size: 22px; }
  .faq__item p { font-size: 15.5px; }
}

/* Avec 5 entrées de menu, l'en-tête réclame ~1188px. Entre 1080 et 1280 on
   retire le numéro de l'en-tête plutôt que de comprimer la navigation : il
   reste accessible dans le hero, le bloc CTA et le pied de page. */
@media (max-width: 1279px) {
  .header__phone { display: none; }
}

/* ==========================================================================
   Navigation : sous-menu Actualités
   ========================================================================== */
/* La pastille d'état enveloppe le lien ET la flèche : portée par le seul lien,
   elle s'arrêtait avant le chevron, qui paraissait détaché du contour. */
.nav__group {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 100px;
  transition: background .18s ease;
}
.nav__group .nav__link { padding-right: 8px; }
.nav__group .nav__link:hover { background: none; }
.nav__group:hover { background: rgba(204, 213, 174, .12); }
.nav__group:hover .nav__link { color: var(--ink); }
.nav__group.is-current { background: rgba(204, 213, 174, .18); }
.nav__group.is-current .nav__link { color: var(--ink); font-weight: 700; }
.nav__toggle {
  display: grid;
  place-items: center;
  height: 30px;
  padding: 0 15px 0 0;
  background: none;
  border: none;
  color: var(--ink-70);
  cursor: pointer;
}
.nav__group.is-current .nav__toggle { color: var(--ink); }
.nav__toggle:hover { color: var(--ink); }
.nav__toggle[aria-expanded="true"] .ico { transform: rotate(180deg); }
.nav__toggle .ico { transition: transform .18s ease; stroke-width: 2.4; }
.nav__sub {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 190px;
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-radius: 18px;
  background: rgba(31, 39, 29, .97);
  border: 1px solid var(--sage-24);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 22px 44px rgba(16, 21, 15, .5);
  z-index: 40;
}
.nav__sub[hidden] { display: none; }
.nav__sub a {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-70);
}
.nav__sub a:hover { background: rgba(204, 213, 174, .12); color: var(--ink); }

.menu-mobile__sub { padding-left: 18px !important; font-weight: 600 !important; font-size: 14px !important; }

/* ==========================================================================
   Événements
   ========================================================================== */
.evts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.evts--passes { opacity: .62; }
.evt {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--glass-soft);
  border: 1px solid var(--sage-16);
  border-radius: 26px;
  padding: 26px;
  transition: background .18s ease;
}
.evt:hover { background: rgba(250, 237, 205, .11); }
.evt__badge {
  align-self: flex-start;
  background: rgba(231, 111, 81, .16);
  border: 1px solid rgba(231, 111, 81, .34);
  color: var(--salmon-l);
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 12.5px;
  font-weight: 700;
  margin-bottom: 16px;
}
.evt__badge--passe { background: rgba(204, 213, 174, .1); border-color: var(--sage-24); color: var(--sage); }
.evt h3 { font-family: var(--serif); font-size: 25px; font-weight: 600; color: var(--ink); line-height: 1.15; margin-bottom: 10px; }
.evt p { margin: 0 0 18px; color: var(--ink-60); font-size: 15px; line-height: 1.55; }
.evt__meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--sage);
  font-size: 13.5px;
  font-weight: 600;
}
.evt__reste { color: var(--ink-45); font-weight: 400; }

/* ---------- Fiche d'un événement ---------- */
.evt-detail { display: grid; grid-template-columns: 1.35fr .65fr; gap: 48px; align-items: start; }
.evt-detail__corps { max-width: none; }
.evt-detail__infos {
  position: sticky;
  top: 24px;
  background: rgba(38, 47, 36, .8);
  border: 1px solid rgba(204, 213, 174, .22);
  border-radius: 28px;
  padding: 28px;
}
.evt-detail__infos h2 {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--sage);
  margin: 26px 0 10px;
}
.evt-detail__infos h2:first-of-type { margin-top: 20px; }
.evt-detail__infos p { margin: 0 0 8px; color: var(--ink-70); font-size: 15px; line-height: 1.55; }
.evt-detail__infos a:not(.btn):not(.evt__inscription) { color: var(--sage); font-weight: 700; font-size: 14.5px; display: inline-flex; align-items: center; gap: .4em; }
.evt-detail__infos .btn { width: 100%; margin-top: 24px; }
.evt__statut { font-weight: 700; color: var(--salmon-l) !important; font-size: 15.5px !important; }
.evt__statut--passe { color: var(--ink-45) !important; }
.evt__dates { display: flex; flex-direction: column; }
.evt__dates li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(204, 213, 174, .13);
  font-size: 14.5px;
  color: var(--ink-70);
}
.evt__dates li:last-child { border-bottom: none; }
.evt__dates b { color: var(--ink); font-weight: 700; }
.evt__dates .passee { opacity: .4; text-decoration: line-through; }
/* Une date, ses horaires, son bouton. La colonne des horaires garde sa largeur
   pour que les boutons s'alignent d'une ligne à l'autre, même quand une séance
   n'en a pas encore. */
.evt__dates li { align-items: baseline; }
.evt__heures { margin-left: auto; white-space: nowrap; }
.evt__inscription {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  margin-left: 14px;
  padding: 5px 12px;
  border-radius: 100px;
  background: var(--terracotta);
  color: var(--bg);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}
.evt__inscription:hover { background: var(--salmon); color: var(--bg); }
.evt__inscription .ico { flex: none; }
/* Deux inscriptions pour une même matinée : les boutons passent sous le texte
   de l'encadré plutôt que de se serrer en bout de ligne, et retrouvent une
   marge nulle — celle de .evt__inscription vise l'alignement en liste. */
.evt__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px !important; }
.evt__cta .evt__inscription { margin-left: 0; }
.evt__prix { font-family: var(--serif); font-size: 26px; font-weight: 600; color: var(--salmon-l) !important; }
.evt__note { font-size: 13px !important; color: var(--ink-45) !important; margin-top: 12px !important; }

@media (max-width: 1079px) {
  .evt-detail { grid-template-columns: 1fr; gap: 28px; }
  .evt-detail__infos { position: static; }
}
@media (max-width: 767px) {
  .evts { grid-template-columns: 1fr; gap: 14px; }
  .evt { padding: 22px; border-radius: 22px; }
  .evt h3 { font-size: 22px; }
  .evt-detail__infos { padding: 22px; border-radius: 24px; }
}

/* Seuil calé sur la mesure : la barre complète réclame 1194px bord à bord.
   On bascule en burger à 1260 pour garder ~50px de respiration. */
@media (max-width: 1259px) {
  .nav { display: none; }
  .burger { display: flex; }
}
@media (max-width: 1439px) {
  .header__phone { display: none; }
}

/* ==========================================================================
   En-tête pleine largeur
   Plafonné à 1280px comme le reste du site, l'en-tête ne disposait que de
   1192px utiles pour 1346 nécessaires : les libellés passaient à la ligne à
   TOUTES les résolutions, y compris en 1920. Le `nowrap` est indispensable en
   complément — sans lui le texte se replie au lieu de forcer un débordement,
   ce qui masque le problème aux contrôles automatiques.
   ========================================================================== */
.site-header { max-width: none; }
/* Restreint à l'en-tête : appliqué à toutes les marques, ce `nowrap` faisait
   déborder « Naturellement Naturo » sur la colonne Navigation du pied de page,
   dont les colonnes descendent à 210 px. Là, le nom doit pouvoir se replier. */
.site-header .brand__name { white-space: nowrap; }
.nav__link { white-space: nowrap; }

/* Le menu mobile suit la largeur de l'en-tête, pas celle du contenu. */
.menu-mobile { max-width: none; }

/* ==========================================================================
   Les dix techniques naturopathiques
   ========================================================================== */
.techniques { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; margin: 22px 0 14px; }
.techniques li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 2px 10px;
  padding: 14px 18px;
  border-radius: 16px;
  background: var(--glass-soft);
  border: 1px solid var(--sage-16);
}
.techniques li b { color: var(--ink-45); font-size: 15.5px; font-weight: 700; }
.tech__desc { grid-column: 1 / -1; color: var(--ink-45); font-size: 13.5px; line-height: 1.45; }
.tech__maj {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 700;
  color: var(--sage);
  border: 1px solid var(--sage-24);
  border-radius: 100px;
  padding: 3px 9px;
  white-space: nowrap;
}
/* Les cinq techniques réellement pratiquées ressortent du lot */
.tech--sienne {
  background: rgba(231, 111, 81, .09) !important;
  border-color: rgba(231, 111, 81, .3) !important;
}
.tech--sienne b { color: var(--ink) !important; }
.tech--sienne .tech__desc { color: var(--ink-60) !important; }
/* Technique employée en appui, sans être une prestation : un degré en dessous
   des cinq pratiquées. La sauge plutôt que le terracotta, que le site réserve
   à ce qui se réserve — sinon la phytologie se lirait comme une consultation. */
.tech--appui {
  background: rgba(204, 213, 174, .09) !important;
  border-color: var(--sage-24) !important;
}
.tech--appui b { color: var(--ink-70) !important; }
/* Sélecteur rattaché à la ligne : seul, `.tech__badge--appui` a la même
   spécificité que `.tech__badge` et se fait devancer, faute d'être déclaré
   après lui. */
.tech--appui .tech__badge {
  background: transparent;
  color: var(--sage);
  border: 1px solid var(--sage-24);
  padding: 3px 9px;
}
.tech__badge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 700;
  color: var(--bg);
  background: var(--terracotta);
  border-radius: 100px;
  padding: 4px 10px;
  white-space: nowrap;
  grid-row: 1;
  grid-column: 2;
}
.tech--sienne .tech__maj { grid-row: 2; grid-column: 2; margin-top: 4px; }
.techniques__note {
  font-size: 14px !important;
  color: var(--sage) !important;
  font-weight: 700;
  margin-bottom: 30px !important;
}
.prose i { font-style: italic; color: var(--ink); }

@media (max-width: 767px) {
  .techniques { grid-template-columns: 1fr; }
}

/* ---------- Signature et mention de transparence des articles ---------- */
.article__signature {
  margin-top: 40px !important;
  padding-top: 22px;
  border-top: 1px solid var(--sage-16);
  font-size: 15px !important;
  color: var(--ink-70) !important;
}
.article__signature a { color: var(--sage); font-weight: 700; text-decoration: none; }

/* ---------- Maillage du cocon ---------- */
.cocon {
  margin-top: 46px;
  padding: 26px 28px;
  border-radius: 24px;
  background: var(--glass-soft);
  border: 1px solid var(--sage-16);
}
.cocon__titre {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 10.5px !important;
  font-weight: 700;
  color: var(--sage) !important;
  margin: 0 0 14px !important;
}
.cocon ul { display: flex; flex-direction: column; gap: 10px; }
.cocon li a {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.25;
}
.cocon li a:hover { color: var(--sage); }
.cocon__mere { margin: 18px 0 0 !important; padding-top: 16px; border-top: 1px solid var(--sage-16); }
.cocon__mere a { color: var(--sage); font-weight: 700; font-size: 14.5px; text-decoration: none; }

/* ==========================================================================
   Affiliations professionnelles — pleine largeur
   L'encadré vivait dans la colonne droite d'une grille en deux colonnes, ce qui
   laissait un vide à gauche sur les grands écrans. Il forme désormais sa propre
   section.
   ========================================================================== */
.affil { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 20px; }
.affil__item {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 28px;
  align-items: start;
  padding: 30px 32px;
  border-radius: 26px;
  background: var(--glass-soft);
  border: 1px solid var(--sage-16);
}
.affil__logo { display: grid; place-items: center; }
.affil__logo img { width: 100%; height: auto; }
.affil__texte h3 {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 11px;
  font-weight: 700;
  color: var(--sage);
  margin-bottom: 12px;
}
.affil__texte p { margin: 0 0 12px; color: var(--ink-60); font-size: 15px; line-height: 1.6; }
.affil__texte b { color: var(--ink); }
.affil__lien {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  color: var(--sage);
  font-weight: 700;
  font-size: 14.5px;
}
.affil__lien:hover { color: var(--ink); }

@media (max-width: 900px) {
  .affil { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .affil__item { grid-template-columns: 84px 1fr; gap: 20px; padding: 24px; border-radius: 22px; }
}

/* ==========================================================================
   Lien de retour vers la liste
   Un vrai lien, pas un history.back() : un visiteur arrivé depuis Google ou
   depuis un lien partagé serait renvoyé hors du site.
   ========================================================================== */
.retour { margin: 0 0 26px !important; }
.retour a {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  color: var(--sage);
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
}
.retour a:hover { color: var(--ink); }
.retour .ico { transform: rotate(180deg); stroke-width: 2.2; }
/* Dans la grille en deux colonnes d'une fiche d'événement, le lien occupe
   toute la largeur au lieu de se loger dans la première cellule. */
.retour--pleine { grid-column: 1 / -1; }

/* ==========================================================================
   Article de blog — en-tête, sommaire latéral
   ========================================================================== */
.article__hero { position: relative; padding-bottom: 18px; }
/* Le visuel ne couvre que le bloc titre : la barre de navigation reste sur le
   fond du site, comme partout ailleurs. Sans photo déclarée, la charte suffit —
   deux dégradés et une trame diagonale, aucun asset à produire. */
.article__titre { position: relative; overflow: hidden; }
.article__titre::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 150% at 78% -30%, rgba(204, 213, 174, .22), transparent 62%),
    radial-gradient(90% 130% at 6% 0%, rgba(231, 111, 81, .17), transparent 58%),
    repeating-linear-gradient(135deg, rgba(250,237,205,.04) 0 22px, transparent 22px 44px),
    linear-gradient(176deg, #26301f 0%, var(--bg) 96%);
}
.article__titre--photo::before { background-image: var(--visuel); background-size: cover; background-position: center; }
.article__titre-voile { position: absolute; inset: 0; }
.article__titre--photo .article__titre-voile {
  background: linear-gradient(180deg, rgba(22,28,21,.55) 0%, rgba(22,28,21,.88) 78%);
}
.article__hero-inner {
  position: relative; z-index: 10;
  max-width: 1280px; margin: 0 auto;
  padding: 46px var(--gutter) 34px;
}
.article__hero h1 {
  font-family: var(--serif);
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.04;
  letter-spacing: .4px;
  color: var(--ink);
  margin: 14px 0 0;
  max-width: 22ch;
  text-wrap: balance;
}
.article__chapo {
  margin: 18px 0 0;
  color: var(--ink-70);
  font-size: 18px;
  max-width: 58ch;
  text-wrap: pretty;
}

/* Fil d'Ariane */
.fil { display: flex; align-items: center; gap: .55em; font-size: 12.5px; color: var(--ink-45); }
.fil a { color: var(--sage); font-weight: 700; }
.fil .ico { stroke-width: 2.4; opacity: .5; }

/* Auteure, date, temps de lecture */
.article__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  margin: 26px 0 0;
  font-size: 14px; color: var(--ink-45);
}
.article__meta a { color: var(--ink); font-weight: 700; }
.article__meta span { position: relative; padding-left: 19px; }
.article__meta span::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--sage); opacity: .5; transform: translateY(-50%);
}

/* Corps + colonne latérale */
.article { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 56px; align-items: start; }
.article__corps { max-width: 720px; }
.article__aside { position: sticky; top: 28px; }
.sommaire {
  padding: 22px 24px;
  border-radius: 20px;
  background: var(--glass-soft);
  border: 1px solid var(--sage-16);
}
.sommaire__titre {
  text-transform: uppercase; letter-spacing: .18em;
  font-size: 10px; font-weight: 700; color: var(--sage);
  margin: 0 0 14px;
}
.sommaire ol {
  counter-reset: s;
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Le reset global ne neutralise que ul : sans ça, la puce native de la liste
     ordonnée s'ajoutait au compteur CSS et les numéros apparaissaient en double. */
  list-style: none;
  margin: 0;
  padding: 0;
}
.sommaire li { counter-increment: s; }
.sommaire a {
  display: block;
  padding: 7px 0 7px 26px;
  position: relative;
  font-size: 13.5px; line-height: 1.4;
  color: var(--ink-45);
  border-left: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.sommaire a::before {
  content: counter(s);
  position: absolute; left: 10px; top: 7px;
  font-size: 11px; font-weight: 700; color: var(--sage); opacity: .45;
}
.sommaire a:hover { color: var(--ink-70); }
.sommaire a.est-actif {
  color: var(--ink);
  border-left-color: var(--terracotta);
  font-weight: 700;
}
.sommaire a.est-actif::before { opacity: 1; color: var(--terracotta); }

/* Les ancres ne doivent pas se caler sous le haut de fenêtre */
.prose h2 { scroll-margin-top: 24px; }

@media (max-width: 1079px) {
  .article { grid-template-columns: 1fr; gap: 32px; }
  /* Le sommaire passe au-dessus du texte et cesse d'être collant */
  .article__aside { position: static; order: -1; }
  .sommaire { padding: 18px 20px; }
}
@media (max-width: 767px) {
  .article__hero-inner { padding: 30px var(--gutter) 26px; }
  .article__chapo { font-size: 16px; margin-top: 14px; }
  .article__meta { margin-top: 20px; font-size: 13px; }
}
/* Les quatre items de la colonne Modalités portent une icône : sans ça, seule
   la ligne des disponibilités en avait une et la colonne paraissait bancale. */
.footer__item-icone { display: flex; align-items: flex-start; gap: .55em; }
/* L'icône se cale sur la première ligne : si un libellé se replie, elle
   flotterait au milieu du bloc avec un centrage vertical. */
.footer__item-icone .ico { margin-top: 4px; }
.footer__item-icone .ico { flex: none; opacity: .7; color: var(--sage); }

/* Seconde ligne d'une carte de contact : les deux spans doivent s'empiler.
   Le sélecteur vise le bloc de texte et non tous les span de la carte : la
   pastille d'icône en est un, et un display:block y écrasait son display:grid,
   décollant l'icône dans le coin au lieu de la centrer. */
.contact-card > div span { display: block; }
.contact-card__sous {
  display: inline-flex !important;
  align-items: center;
  gap: .45em;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--sage-16);
  color: var(--ink-45) !important;
  font-size: 13.5px !important;
}
.contact-card__sous .ico { flex: none; opacity: .8; }

/* ==========================================================================
   Avis Google
   ========================================================================== */
.ico--plein { fill: currentColor; stroke: none; }
.avis__etoiles { display: inline-flex; gap: 2px; color: #e8b04b; }
.avis__note {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 6px 10px;
  margin: 16px 0 0 !important;
  font-size: 15px; color: var(--ink-60) !important;
}
.avis__note b { color: var(--ink); font-size: 19px; font-family: var(--serif); }

.avis-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.avis {
  display: flex; flex-direction: column;
  background: var(--glass-soft);
  border: 1px solid var(--sage-16);
  border-radius: 24px;
  padding: 26px;
}
.avis blockquote {
  margin: 14px 0 0;
  color: var(--ink-70);
  font-size: 15px;
  line-height: 1.65;
  quotes: '«\00a0' '\00a0»';
}
.avis blockquote::before { content: open-quote; color: var(--sage); }
.avis blockquote::after { content: close-quote; color: var(--sage); }
.avis__auteur {
  margin: 18px 0 0 !important;
  padding-top: 14px;
  border-top: 1px solid var(--sage-16);
  font-weight: 700; font-size: 14.5px; color: var(--ink) !important;
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
/* 3,87:1 avec --ink-45 sur le fond de la carte d'avis. */
.avis__auteur span { font-weight: 400; font-size: 13px; color: var(--ink-60); }
.avis__lien { text-align: center; margin: 26px 0 0 !important; }
.avis__lien a {
  display: inline-flex; align-items: center; gap: .5em;
  color: var(--sage); font-weight: 700; font-size: 14.5px;
}
.avis__lien a:hover { color: var(--ink); }

@media (max-width: 767px) {
  /* Même rangée défilante que les prestations, plutôt qu'un empilement */
  .avis-liste {
    display: flex; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gutter); scroll-padding-right: var(--gutter);
    margin: 0 calc(var(--gutter) * -1);
    padding: 4px var(--gutter) 10px;
    scrollbar-width: none; min-width: 0;
  }
  .avis-liste::-webkit-scrollbar { display: none; }
  .avis { flex: none; width: 280px; scroll-snap-align: start; padding: 22px; }
}