/* =====================================================================
   ÉLAN — Spa & institut de soins · direction « Spa minéral »
   Feuille de style principale (refonte du 02/09/2026, maquette
   _maquettes/bien-etre-spa-mineral retenue par Charles).

   Esprit : fond os, encre douce, filets fins, beaucoup d'air, photos
   découpées en galets, titres Cormorant Garamond italiques, texte Manrope.
   Zéro carte arrondie, zéro ombre portée ; un seul dégradé, le voile du hero
   photo plein cadre (body.hero-photo, §7).

   Revue couleur du 10/09/2026 (Charles : « beaucoup trop blanc ») : le header
   et le hero forment un bloc sauge, le pied de page passe en sauge nuit, deux
   bandes sauge pâle rythment la page (chiffres, lieu, avis), la carte « Le
   plus choisi » s'inverse. Et quand le bot dispose d'une VRAIE photo assez
   grande (prospect ou pack, 1200 x 640 px au moins, render_bien_etre), il pose
   body.hero-photo : la photo passe bord à bord derrière le titre, sous un
   voile sauge, header transparent.

   Sommaire :
   1.  Design system (variables)
   2.  Reset & bases
   3.  Utilitaires (conteneur, libellés, galets, photos)
   4.  Boutons & liens
   5.  Header & navigation
   6.  Sélecteur de langue FR | NL
   7.  Hero
   8.  Ligne de chiffres
   9.  Sections génériques / titres
   10. Rituels (liste à filets)
   11. Le lieu / approche
   12. Formules & cartes cadeaux
   13. Équipe
   14. Galerie
   15. Témoignages
   16. Réservation & formulaire
   17. FAQ
   18. CTA final
   19. Footer
   20. Bouton retour haut
   21. Animations (reveal) & accessibilité
   22. Responsive
   23. Champ date jj-mm-aaaa
   ===================================================================== */

/* ===================== 1. DESIGN SYSTEM ===================== */
:root {
  /* Minéral : os, galets, pierre, encre */
  --os:        #F4F1EB;   /* fond principal (blanc cassé « os ») */
  --os-2:      #ECE7DF;   /* bandes, footer, halos */
  --os-3:      #FAF8F4;   /* panneau du formulaire */
  --galet:     #DCD6CB;   /* filets, puces */
  --galet-2:   #CFC8BB;   /* filets appuyés */
  --pierre:    #8C857B;   /* traits, texte tertiaire (4,1:1 sur os) */
  --pierre-2:  #6B655C;   /* libellés (5,9:1 sur os) */
  --encre:     #2F2D2A;   /* titres */
  --encre-2:   #4E4A44;   /* texte courant */
  --encre-3:   #5A554E;   /* texte secondaire */

  /* Sauge : la palette FIXE du template (revue 02/09/2026 — Charles :
     « palette sauge fixe »). Le bot n'injecte PLUS de couleur de marque
     automatiquement sur ce template : seule une demande explicite du client
     (produce.py --accent) surcharge --accent / --accent-deep / --accent-soft /
     --accent-text — et l'accent reste CONFINÉ : boutons principaux hors hero,
     bande CTA, liens, focus. Fond, encre, filets et les surfaces sauge
     ci-dessous (header, hero, carte inversée, pied de page) ne bougent jamais.
     Depuis la revue du 10/09/2026 le mot du titre est posé sur sauge : il ne
     suit plus l'accent. */
  --sauge:       #5E6E58;
  --sauge-2:     #4A5945;
  --sauge-soft:  #8E9C88;
  --accent:      var(--sauge);      /* mot du titre, liens, focus */
  --accent-deep: var(--sauge-2);    /* bouton principal, bande CTA */
  --accent-soft: var(--sauge-soft); /* survols discrets */
  --accent-text: var(--sauge-2);    /* accent posé en texte courant */
  --accent-ink:  #F4F1EB;           /* texte posé SUR l'accent */

  /* Surfaces sauge (revue couleur du 10/09/2026) : fixes, jamais injectées */
  --sauge-nuit:      #3B4738;   /* pied de page */
  --sauge-claire:    #C3CFBB;   /* mot du titre posé sur sauge */
  --sauge-pale:      #E4EADF;   /* bandes claires : chiffres, lieu, avis */
  --sauge-pale-line: #CBD4C4;   /* filets sur sauge pâle */
  /* Os translucide : texte, puces et filets posés sur sauge */
  --os-a90: rgba(244, 241, 235, .9);
  --os-a85: rgba(244, 241, 235, .85);
  --os-a75: rgba(244, 241, 235, .75);
  --os-a70: rgba(244, 241, 235, .7);
  --os-a60: rgba(244, 241, 235, .6);
  --os-a50: rgba(244, 241, 235, .5);
  --os-a35: rgba(244, 241, 235, .35);
  --os-a25: rgba(244, 241, 235, .25);
  --os-a15: rgba(244, 241, 235, .15);

  --error: #8A2A1E;                 /* fixe, jamais injecté (7:1 sur os) */

  /* Filets */
  --line: var(--galet);
  --line-strong: var(--pierre);

  /* Typographie */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Galets : trois découpes organiques (border-radius à 8 valeurs) */
  --galet-a: 56% 44% 52% 48% / 48% 42% 58% 52%;
  --galet-b: 44% 56% 48% 52% / 52% 58% 42% 48%;
  --galet-c: 50% 50% 46% 54% / 58% 56% 44% 42%;

  /* Rythme */
  --wrap: 1160px;
  --pad: 24px;
  --header-h: 88px;
  --t-fast: .18s ease;
  --t:      .3s cubic-bezier(.22, .61, .36, 1);
  --t-slow: .7s cubic-bezier(.22, .61, .36, 1);
}

/* ===================== 2. RESET & BASES ===================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: var(--encre-2);
  background-color: var(--os);
  background-image:
    radial-gradient(60% 40% at 88% 6%, var(--os-2), transparent 70%),
    radial-gradient(40% 30% at 4% 70%, var(--os-2), transparent 70%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
b, strong { font-weight: 600; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.08;
  color: var(--encre);
  letter-spacing: -.005em;
}
h1, h2 { font-style: italic; }
h3 { font-weight: 500; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

::selection { background: var(--accent-deep); color: var(--accent-ink); }

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

/* Lien d'évitement */
.skip-link {
  position: fixed;
  top: -100px;
  left: var(--pad);
  z-index: 200;
  background: var(--encre);
  color: var(--os);
  padding: .75rem 1.2rem;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: top var(--t);
}
.skip-link:focus { top: var(--pad); }

/* ===================== 3. UTILITAIRES ===================== */
.container {
  width: min(100% - 2 * var(--pad), var(--wrap));
  margin-inline: auto;
}

.section { padding-block: clamp(4.5rem, 8vw, 7rem); }

/* Libellé : capitales espacées, petit corps, pierre */
.label,
.eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--pierre-2);
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 44px; height: 1px;
  background: var(--pierre);
}

.inline-link {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--accent-soft);
  transition: text-decoration-color var(--t-fast), color var(--t-fast);
}
.inline-link:hover { text-decoration-color: var(--accent); color: var(--accent); }

/* Galet : photo découpée + trait décalé */
.stone {
  position: relative;
  aspect-ratio: 4 / 5;
}
.stone img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--galet-a);
  position: relative;
  z-index: 1;
}
.stone::before {
  content: "";
  position: absolute;
  inset: -20px 20px 20px -20px;
  border: 1px solid var(--pierre);
  border-radius: var(--galet-b);
  opacity: .55;
  pointer-events: none;
}
.stone-b img { border-radius: var(--galet-b); }
.stone-b::before { border-radius: var(--galet-c); inset: -20px -20px 20px 20px; }
.stone-c img { border-radius: var(--galet-c); }
.stone-c::before { border-radius: var(--galet-a); inset: 20px -20px -20px 20px; }

/* Voile minéral : photos d'ILLUSTRATION seulement (classe ph-stock, retirée
   par le bot quand la photo est celle du client — retour Charles 02/09/2026 :
   « galet oui, filtre seulement sur le stock »). */
.ph-stock { filter: saturate(.72) contrast(.97) sepia(.12); }

/* ===================== 4. BOUTONS & LIENS ===================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 17px 34px;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--accent-deep);
  color: var(--accent-ink);
  border-color: var(--accent-deep);
}
.btn-primary:hover { background: var(--encre); border-color: var(--encre); }

/* Lien italique souligné (second geste du hero) */
.btn-ghost {
  padding: 0 0 3px;
  border: 0;
  border-bottom: 1px solid var(--pierre);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 21px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--encre);
  background: transparent;
}
.btn-ghost:hover { color: var(--accent); border-bottom-color: var(--accent); }

.btn-outline {
  background: transparent;
  color: var(--encre);
  border-color: var(--pierre);
}
.btn-outline:hover { border-color: var(--encre); background: var(--encre); color: var(--os); }

.btn-light {
  background: var(--os);
  color: var(--accent-deep);
  border-color: var(--os);
}
.btn-light:hover { background: transparent; color: var(--os); border-color: var(--os); }

.btn-block { width: 100%; }

/* ===================== 5. HEADER & NAVIGATION ===================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(244, 241, 235, .86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--galet);
  transition: background var(--t);
}
.site-header.scrolled { background: rgba(244, 241, 235, .96); }

/* En haut de page, le header prend la couleur du hero : sauge sur le bloc du
   template, transparent sur le hero photo plein cadre (body.hero-photo). Dès
   24 px de défilement (classe .scrolled posée par main.js) ou menu mobile
   ouvert (html.menu-open : le tiroir est os), il repasse en os. */
html:not(.menu-open) .site-header:not(.scrolled) {
  background: var(--sauge-2);
  border-bottom-color: var(--os-a15);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html:not(.menu-open) body.hero-photo .site-header:not(.scrolled) {
  background: transparent;
  border-bottom-color: var(--os-a25);
}
html:not(.menu-open) .site-header:not(.scrolled) .brand-name { color: var(--os); }
html:not(.menu-open) .site-header:not(.scrolled) .brand-sub { color: var(--os-a70); }
html:not(.menu-open) .site-header:not(.scrolled) .burger { border-color: var(--os-a35); }
html:not(.menu-open) .site-header:not(.scrolled) .burger span { background: var(--os); }
@media (min-width: 1025px) {
  html:not(.menu-open) .site-header:not(.scrolled) .nav-link { color: var(--os-a85); }
  html:not(.menu-open) .site-header:not(.scrolled) .nav-link:hover { color: var(--os); }
  html:not(.menu-open) .site-header:not(.scrolled) .nav-phone { color: var(--os-a85); }
  html:not(.menu-open) .site-header:not(.scrolled) .nav-cta { color: var(--os); border-bottom-color: var(--os-a70); }
  html:not(.menu-open) .site-header:not(.scrolled) .lang-btn { color: var(--os-a60); }
  html:not(.menu-open) .site-header:not(.scrolled) .lang-btn.active { color: var(--os); border-bottom-color: var(--os); }
}

.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  height: var(--header-h);
}

.brand { display: inline-flex; align-items: baseline; gap: 14px; }
.brand-text { display: flex; align-items: baseline; gap: 14px; }
.brand-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 34px;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--encre);
}
.brand-sub {
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pierre-2);
  white-space: nowrap;
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
}
.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.6vw, 2.1rem);
}
.nav-link {
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pierre-2);
  padding: .4rem 0;
  white-space: nowrap;
  transition: color var(--t-fast);
}
.nav-link:hover { color: var(--encre); }

.nav-phone {
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--encre-3);
  white-space: nowrap;
  transition: color var(--t-fast);
}
.nav-phone:hover { color: var(--encre); }

.nav-cta {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-text);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--accent);
  white-space: nowrap;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.nav-cta:hover { color: var(--encre); border-bottom-color: var(--encre); }

.header-side { display: inline-flex; align-items: center; gap: 18px; justify-self: end; }

/* Burger */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px; height: 44px;
  border: 1px solid var(--galet-2);
  background: transparent;
  cursor: pointer;
  position: relative;
  z-index: 101;
  touch-action: manipulation;
  transition: border-color var(--t-fast);
}
.burger[aria-expanded="true"] { border-color: var(--encre); }
.burger span {
  display: block;
  width: 20px; height: 1px;
  margin-inline: auto;
  background: var(--encre);
  transition: transform var(--t), opacity var(--t);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===================== 6. SÉLECTEUR DE LANGUE FR | NL ===================== */
.lang-switch { display: inline-flex; align-items: center; gap: 2px; }
.lang-btn {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--pierre);
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: .35rem .3rem .25rem;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.lang-btn:hover { color: var(--encre); }
.lang-btn.active { color: var(--encre); border-bottom-color: var(--encre); }
.lang-switch-mobile { display: none; }

/* ===================== 7. HERO ===================== */
/* Bloc sauge (revue couleur du 10/09/2026) : texte os, mot du titre sauge
   claire, bouton principal inversé (os), galet cerclé d'os. */
.hero {
  padding: clamp(3rem, 6vw, 4.75rem) 0 clamp(3rem, 6vw, 4rem);
  background: var(--sauge-2);
  color: var(--os);
}
.hero .eyebrow { color: var(--os-a70); }
.hero .eyebrow::before { background: var(--os-a50); }
.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
}

.hero-content h1 {
  font-size: clamp(46px, 7.2vw, 100px);
  line-height: 1.02;
  letter-spacing: -.01em;
  margin-top: 28px;
  color: var(--os);
}
.hero-content h1 em {
  font-style: normal;
  color: var(--sauge-claire);
}
.hero-lead {
  max-width: 32rem;
  margin-top: 30px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--os-a85);
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 34px;
  flex-wrap: wrap;
  margin-top: 40px;
}
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin-top: 44px;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--os-a75);
}
.hero-badges li { display: inline-flex; align-items: center; gap: 10px; }
.hero-badges li::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--os-a70);
  flex: none;
}
/* Boutons posés sur la sauge : le principal s'inverse (os), le lien italique passe en os */
.hero .btn-primary { background: var(--os); color: var(--sauge-2); border-color: var(--os); }
.hero .btn-primary:hover { background: transparent; color: var(--os); border-color: var(--os); }
.hero .btn-ghost { color: var(--os); border-bottom-color: var(--os-a60); }
.hero .btn-ghost:hover { color: var(--sauge-claire); border-bottom-color: var(--sauge-claire); }

/* Visuel hero : galet cerclé d'os + légende verticale */
.hero-visual { position: relative; }
.hero-image {
  max-width: 440px;
  margin-left: auto;
}
.hero .stone::before { border-color: var(--os-a60); opacity: 1; }
.hero-image-fallback,
.approach-image-fallback {
  position: absolute; inset: 0;
  z-index: 0;
  background: linear-gradient(160deg, var(--os-2), var(--galet));
  border-radius: var(--galet-a);
}
.hero-image-fallback { background: linear-gradient(160deg, #55654F, var(--sauge-nuit)); }
.hero-cap {
  position: absolute;
  right: -14px;
  bottom: 150px;
  transform: rotate(90deg);
  transform-origin: right bottom;
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--os-a70);
}

/* --- Hero photo PLEIN CADRE : body.hero-photo ---
   Posé par le bot (render_bien_etre.render) quand la photo du hero est une
   VRAIE photo (prospect ou pack) d'au moins 1200 x 640 px. Le DOM ne change
   pas : .hero-image passe en absolu derrière le texte, le galet et son trait
   disparaissent, un voile sauge (plus dense à gauche derrière le titre et en
   bas vers la page) garantit la lecture, le header devient transparent (§5).
   Le stock 620 px du template et les petites photos scannées gardent le galet. */
body.hero-photo main { margin-top: calc(-1 * var(--header-h)); }
body.hero-photo .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(88vh, 800px);
  display: flex;
  align-items: flex-end;
  padding: calc(var(--header-h) + clamp(4rem, 8vw, 6rem)) 0 clamp(3rem, 6vw, 4.5rem);
}
body.hero-photo .hero-inner {
  grid-template-columns: 1fr;
  width: min(100% - 2 * var(--pad), var(--wrap));
  margin-inline: auto;
}
body.hero-photo .hero-content { position: relative; z-index: 2; max-width: 44rem; }
body.hero-photo .hero-content h1 { font-size: clamp(44px, 6.6vw, 92px); }
body.hero-photo .hero-content h1 em { color: #D6DFCF; }
body.hero-photo .hero-lead { max-width: 34rem; color: var(--os-a90); }
/* Le conteneur du visuel ne doit plus ni se déplacer ni s'estomper (reveal) :
   un transform en ferait le bloc conteneur de la photo absolue. */
body.hero-photo .hero-visual { position: static; max-width: none; opacity: 1; transform: none; transition: none; }
body.hero-photo .hero-image {
  position: absolute; inset: 0;
  z-index: 0;
  max-width: none;
  margin: 0;
  aspect-ratio: auto;
}
body.hero-photo .hero-image img { border-radius: 0; object-position: 72% 40%; }
body.hero-photo .hero-image::before { display: none; }
body.hero-photo .hero-image-fallback { border-radius: 0; }
body.hero-photo .hero::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(43, 52, 40, .8) 0%, rgba(43, 52, 40, .58) 45%, rgba(43, 52, 40, .3) 100%),
    linear-gradient(180deg, rgba(43, 52, 40, .25) 0%, rgba(43, 52, 40, 0) 40%, rgba(43, 52, 40, .55) 100%);
}
body.hero-photo .hero-cap {
  position: absolute;
  z-index: 2;
  right: var(--pad);
  bottom: clamp(1.2rem, 3vw, 2rem);
  transform: none;
}

/* ===================== 8. LIGNE DE CHIFFRES ===================== */
.stats {
  background: var(--sauge-pale);
  border-bottom: 1px solid var(--sauge-pale-line);
  padding: 32px 0;
  text-align: center;
}
.stats-line {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.45;
  color: var(--encre-2);
}
.stats-line b { font-weight: 500; color: var(--encre); }

/* ===================== 9. SECTIONS GÉNÉRIQUES ===================== */
.section-head { max-width: 34rem; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head h2,
.services-head h2,
.approach-content h2,
.booking-info h2,
.faq-head h2 {
  font-size: clamp(40px, 4.4vw, 60px);
  line-height: 1.05;
  margin-top: 22px;
}
.section-intro {
  margin-top: 22px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--encre-3);
}

.pricing, .booking { position: relative; isolation: isolate; }
.pricing::before, .booking::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--os-2);
  z-index: -1;
}

/* ===================== 10. RITUELS (liste à filets) ===================== */
.services-inner {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(3rem, 7vw, 5.5rem);
  align-items: start;
}
.services-head { position: sticky; top: calc(var(--header-h) + 40px); }
.services-head > .section-intro { max-width: 26rem; }

.services-voice {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 44px;
}
.services-voice img {
  width: 124px; height: 150px;
  object-fit: cover;
  border-radius: var(--galet-c);
  flex: none;
}
.services-voice p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.4;
  color: var(--encre-2);
  max-width: 16rem;
}
.services-voice small {
  display: block;
  margin-top: 8px;
  font-family: var(--sans);
  font-style: normal;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pierre-2);
}

.services-list { list-style: none; }
.service-card {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 0 24px;
  padding: 28px 0;
  border-top: 1px solid var(--galet);
  align-items: baseline;
}
.service-card:last-child { border-bottom: 1px solid var(--galet); }
.service-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1;
  color: var(--pierre-2);
  transition: color var(--t-fast);
}
.service-card:hover .service-num { color: var(--accent); }
.service-card h3 { font-size: 27px; line-height: 1.15; }
.service-card p {
  grid-column: 2;
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--encre-3);
  max-width: 34rem;
}
.service-card .service-price {
  grid-column: 3;
  grid-row: 1;
  margin-top: 0;
  text-align: right;
  font-size: 15px;
  line-height: 1.3;
  color: var(--encre);
  white-space: nowrap;
  max-width: none;
}
.service-price small {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pierre-2);
}
.services-note {
  margin-top: 26px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  color: var(--encre-3);
}

/* ===================== 11. LE LIEU / APPROCHE ===================== */
.approach { background: var(--sauge-pale); }
.approach-inner {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(3rem, 7vw, 5.5rem);
  align-items: center;
}
.approach-image { max-width: 400px; }
.approach-lead {
  margin-top: 26px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--encre-2);
  max-width: 32rem;
}
.approach-list { display: grid; gap: 0; margin-top: 36px; }
.approach-list li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  padding: 20px 0;
  border-top: 1px solid var(--sauge-pale-line);
}
.approach-list li:last-child { border-bottom: 1px solid var(--sauge-pale-line); }
.approach-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--pierre-2);
  padding-top: 4px;
}
.approach-list h3 { font-size: 22px; }
.approach-list p { margin-top: 6px; font-size: 14.5px; line-height: 1.65; color: var(--encre-3); }

/* ===================== 12. FORMULES & CARTES CADEAUX ===================== */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--galet);
  border-bottom: 1px solid var(--galet);
}
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 40px clamp(20px, 3vw, 40px);
}
.price-card + .price-card { border-left: 1px solid var(--galet); }
.price-badge {
  position: absolute;
  top: -1px;
  left: clamp(20px, 3vw, 40px);
  padding-top: 12px;
  border-top: 1px solid var(--accent);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.price-head { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--galet); }
.price-head h3 { font-size: 26px; }
.price-tag { display: flex; align-items: baseline; gap: .3rem; margin-top: 14px; }
.price-amount {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(38px, 3.6vw, 48px);
  line-height: 1;
  color: var(--encre);
}
.price-period { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--pierre-2); }
.price-sub { margin-top: 10px; font-size: 13px; color: var(--pierre-2); }
.price-feats { display: grid; gap: 10px; margin-bottom: 30px; }
.price-feats li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--encre-3);
}
.price-feats li::before {
  content: "";
  position: absolute;
  left: 0; top: .6em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--galet);
  border: 1px solid var(--pierre);
}
.price-cta { margin-top: auto; align-self: flex-start; }

/* Carte « Le plus choisi » inversée en sauge (revue couleur du 10/09/2026) :
   un peu plus haute que ses voisines sur desktop, pleine largeur d'écran sur
   mobile (§22). */
.price-card-featured { background: var(--sauge-2); color: var(--os); margin-block: -20px; padding-block: 60px; }
.price-card-featured h3, .price-card-featured .price-amount { color: var(--os); }
.price-card-featured .price-sub, .price-card-featured .price-feats li { color: var(--os-a85); }
.price-card-featured .price-head { border-bottom-color: var(--os-a25); }
.price-card-featured .price-feats li::before { background: transparent; border-color: var(--os-a70); }
.price-card-featured .price-badge { top: 19px; color: var(--os); border-top-color: var(--os); }
.price-card-featured .btn-primary { background: var(--os); color: var(--sauge-2); border-color: var(--os); }
.price-card-featured .btn-primary:hover { background: transparent; color: var(--os); }
.pricing-note {
  margin-top: 30px;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  color: var(--encre-3);
  max-width: 40rem;
  margin-inline: auto;
}

/* ===================== 13. ÉQUIPE ===================== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.team-photo { max-width: 260px; }
.team-photo-fallback {
  position: absolute; inset: 0;
  align-items: center; justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 40px;
  color: var(--pierre-2);
  background: var(--os-2);
  border-radius: var(--galet-a);
}
.team-body { padding-top: 26px; }
.team-body h3 { font-size: 24px; }
.team-role {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.team-cert {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--galet);
  font-size: 12.5px;
  color: var(--pierre-2);
}
.team-bio { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--encre-3); }

/* ===================== 14. GALERIE ===================== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 250px;
  gap: 18px;
}
.gallery-item { position: relative; overflow: hidden; }
.gallery-tall { grid-row: span 2; }
.gallery-wide { grid-column: span 2; }
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow), filter var(--t-slow);
}
.gallery-item:hover img { transform: scale(1.03); filter: none; }
.gallery-cap {
  position: absolute;
  left: 18px; bottom: 16px;
  padding: 7px 12px;
  background: rgba(244, 241, 235, .9);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--encre);
}

/* ===================== 15. TÉMOIGNAGES ===================== */
.testimonials { background: var(--sauge-pale); }
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--sauge-pale-line);
  border-bottom: 1px solid var(--sauge-pale-line);
}
.testi-card {
  display: flex;
  flex-direction: column;
  padding: 40px clamp(20px, 3vw, 40px);
}
.testi-card + .testi-card { border-left: 1px solid var(--sauge-pale-line); }
.testi-stars { display: inline-flex; gap: 3px; color: var(--sauge); margin-bottom: 22px; }
.testi-card blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 21px;
  line-height: 1.45;
  color: var(--encre-2);
  flex-grow: 1;
  margin-bottom: 28px;
}
.testi-author { display: flex; align-items: center; gap: 14px; }
.testi-avatar {
  flex: none;
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--os);
  border: 1px solid var(--sauge-pale-line);
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--encre);
}
.testi-author strong { display: block; font-size: 13.5px; font-weight: 500; color: var(--encre); }
.testi-role {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pierre-2);
}

/* ===================== 16. RÉSERVATION & FORMULAIRE ===================== */
.booking-inner {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
.booking-lead { margin-top: 22px; font-size: 15.5px; line-height: 1.7; color: var(--encre-3); max-width: 28rem; }

.info-list { display: grid; gap: 22px; margin-top: 36px; }
.info-list li { display: grid; grid-template-columns: 20px 1fr; gap: 16px; align-items: start; }
.info-icon { color: var(--accent); padding-top: 3px; }
.info-list strong {
  display: block;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pierre-2);
  margin-bottom: 4px;
}
.info-list span, .info-list .info-link { font-size: 15px; line-height: 1.55; color: var(--encre-2); }
.info-link { border-bottom: 1px solid var(--galet-2); transition: border-color var(--t-fast), color var(--t-fast); }
.info-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

.hours-card { margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--galet); }
.hours-card h3 { font-size: 24px; margin-bottom: 14px; }
.hours-list { display: grid; }
.hours-list > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--galet);
}
.hours-list dt { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--pierre-2); }
.hours-list dd { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 19px; color: var(--encre); }
.hours-access { margin-top: 14px; font-size: 12.5px; color: var(--pierre-2); }

/* Formulaire : panneau clair à filet, champs soulignés */
.booking-form-wrap {
  background: var(--os-3);
  border: 1px solid var(--galet);
  padding: clamp(1.6rem, 3.5vw, 2.75rem);
}
.form-title { font-style: italic; font-weight: 400; font-size: 32px; }
.form-sub { margin: 6px 0 26px; font-size: 14px; color: var(--pierre-2); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
.field { display: flex; flex-direction: column; margin-bottom: 22px; }
.field label {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pierre-2);
  margin-bottom: 4px;
}
.field label .optional, .optional { letter-spacing: .06em; text-transform: none; color: var(--pierre); }
.field input, .field select, .field textarea {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--encre);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--pierre);
  border-radius: 0;
  padding: 12px 0;
  width: 100%;
  transition: border-color var(--t-fast);
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%236B655C' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center / 18px no-repeat;
  cursor: pointer;
}
.field textarea { resize: vertical; min-height: 96px; }
.field input::placeholder, .field textarea::placeholder { color: var(--pierre); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-bottom-color: var(--accent);
  box-shadow: 0 1px 0 0 var(--accent);
}
.field.invalid input, .field.invalid select, .field.invalid textarea { border-bottom-color: var(--error); }

.error { color: var(--error); font-size: 12.5px; margin-top: 6px; min-height: 1em; }

.checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  align-items: start;
  margin: 4px 0 26px;
}
.checkbox input {
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: var(--accent-deep);
  cursor: pointer;
}
.checkbox label { font-size: 13px; line-height: 1.55; color: var(--encre-3); }
.checkbox .error { grid-column: 1 / -1; }
.checkbox.invalid input { outline: 1px solid var(--error); outline-offset: 2px; }

.form-note { margin-top: 16px; font-size: 12.5px; text-align: center; color: var(--pierre-2); }

/* Message de succès */
.form-success { text-align: center; padding: clamp(1.5rem, 4vw, 2.5rem) 1rem; }
.success-icon {
  display: inline-flex;
  width: 60px; height: 60px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--accent);
  color: var(--accent);
  margin-bottom: 18px;
  animation: pop .5s cubic-bezier(.18, .89, .32, 1.28);
}
.form-success h3 { font-style: italic; font-weight: 400; font-size: 30px; margin-bottom: 8px; }
.form-success p { color: var(--encre-3); max-width: 34ch; margin-inline: auto; font-size: 15px; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ===================== 17. FAQ ===================== */
.faq-inner {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(3rem, 7vw, 5.5rem);
  align-items: start;
}
.faq-head { position: sticky; top: calc(var(--header-h) + 40px); }
.faq-intro { margin-top: 22px; font-size: 15.5px; line-height: 1.7; color: var(--encre-3); max-width: 24rem; }

.faq-list { border-top: 1px solid var(--galet); }
.faq-item { border-bottom: 1px solid var(--galet); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  cursor: pointer;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 23px;
  line-height: 1.2;
  color: var(--encre);
  list-style: none;
  transition: color var(--t-fast);
}
.faq-item summary:hover { color: var(--accent-text); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon { position: relative; flex: none; width: 22px; height: 22px; }
.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: var(--accent);
  transition: transform var(--t);
}
.faq-icon::before { width: 14px; height: 1px; transform: translate(-50%, -50%); }
.faq-icon::after { width: 1px; height: 14px; transform: translate(-50%, -50%); }
.faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) scaleY(0); }
.faq-answer { padding: 0 44px 24px 0; }
.faq-answer p { font-size: 15px; line-height: 1.7; color: var(--encre-3); }

/* ===================== 18. CTA FINAL ===================== */
.cta-band { background: var(--accent-deep); color: var(--os); }
.cta-inner {
  text-align: center;
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
  max-width: 40rem;
}
.cta-inner h2 { color: var(--os); font-size: clamp(38px, 4.6vw, 60px); }
.cta-inner p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 21px;
  color: rgba(244, 241, 235, .82);
  margin: 18px 0 34px;
}

/* ===================== 19. FOOTER ===================== */
/* Sauge nuit dans la continuité de la bande CTA (revue couleur du 10/09/2026) */
.site-footer { background: var(--sauge-nuit); border-top: 1px solid var(--os-a15); color: var(--os-a85); }
.site-footer .brand-name { color: var(--os); }
.site-footer .brand-sub { color: var(--os-a60); }
.site-footer .info-link { border-bottom-color: var(--os-a35); }
.site-footer .info-link:hover { color: var(--os); border-bottom-color: var(--os); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(3rem, 6vw, 4.5rem) clamp(2.5rem, 5vw, 3.5rem);
}
.footer-brand .brand-name { font-size: 30px; }
.footer-desc { margin: 20px 0 24px; font-size: 14.5px; line-height: 1.7; max-width: 26rem; }
.footer-social { display: flex; gap: 10px; }
.social-link {
  display: inline-flex;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--os-a35);
  color: var(--os);
  transition: border-color var(--t), color var(--t), background var(--t);
}
.social-link:hover { border-color: var(--os); background: var(--os); color: var(--sauge-nuit); }

.footer-col h3 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--os-a60);
  margin-bottom: 18px;
}
.footer-col ul { display: grid; gap: 10px; }
.footer-col a { font-size: 14.5px; color: var(--os-a85); transition: color var(--t-fast); }
.footer-col a:hover { color: var(--os); }

.footer-newsletter p { font-size: 14px; line-height: 1.65; margin-bottom: 16px; }
.news-row { display: flex; align-items: flex-end; gap: 12px; }
.news-row input {
  flex-grow: 1;
  min-width: 0;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--os);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--os-a50);
  border-radius: 0;
  padding: 10px 0;
  transition: border-color var(--t-fast);
}
.news-row input::placeholder { color: var(--os-a50); }
.news-row input:focus { outline: none; border-bottom-color: var(--os); box-shadow: 0 1px 0 0 var(--os); }
.news-row input.invalid { border-bottom-color: #F0B9B0; }   /* erreur lisible sur sauge nuit */
.news-btn { padding: 12px 14px; flex: none; background: var(--os); color: var(--sauge-nuit); border-color: var(--os); }
.news-btn:hover { background: var(--sauge-claire); border-color: var(--sauge-claire); color: var(--sauge-nuit); }
.news-msg { display: block; font-size: 12.5px; margin-top: 8px; min-height: 1em; }
.news-msg.ok { color: var(--sauge-claire); }
.news-msg.error { color: #F0B9B0; }

.footer-contact { font-style: normal; display: grid; gap: 6px; margin-top: 26px; font-size: 14.5px; line-height: 1.6; }
.footer-contact .info-link { justify-self: start; }

.footer-bottom { border-top: 1px solid var(--os-a15); }
.footer-bottom-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;
  align-items: center;
  padding-block: 22px;
}
.footer-copy { font-size: 12.5px; color: var(--os-a60); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-legal a { font-size: 12.5px; color: var(--os-a60); transition: color var(--t-fast); }
.footer-legal a:hover { color: var(--os); }

/* ===================== 20. BOUTON RETOUR HAUT ===================== */
.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  width: 46px; height: 46px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border: 2px solid var(--os);   /* anneau os : visible sur le pied de page sauge nuit */
  border-radius: 50%;
  background: var(--accent-deep);
  color: var(--accent-ink);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--t), visibility var(--t), transform var(--t), background var(--t);
}
.to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--encre); }

/* ===================== 21. ANIMATIONS (reveal) & ACCESSIBILITÉ ===================== */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--t-slow), transform var(--t-slow);
}
.reveal.in-view { opacity: 1; transform: none; }

.services-list .reveal:nth-child(2), .team-grid .reveal:nth-child(2), .testi-grid .reveal:nth-child(2), .pricing-grid .reveal:nth-child(2) { transition-delay: .08s; }
.services-list .reveal:nth-child(3), .team-grid .reveal:nth-child(3), .testi-grid .reveal:nth-child(3), .pricing-grid .reveal:nth-child(3) { transition-delay: .16s; }
.services-list .reveal:nth-child(4), .team-grid .reveal:nth-child(4) { transition-delay: .24s; }
.services-list .reveal:nth-child(5) { transition-delay: .32s; }
.services-list .reveal:nth-child(6) { transition-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ===================== 22. RESPONSIVE ===================== */
@media (max-width: 1180px) {
  .nav-phone { display: none; }
}

@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 1024px) {
  :root { --header-h: 72px; }
  .header-inner { grid-template-columns: 1fr auto; }
  .brand-name { font-size: 28px; }
  .burger { display: inline-flex; }
  .lang-switch-desktop { display: none; }
  .lang-switch-mobile { display: inline-flex; }
  .nav-phone { display: inline-flex; }

  /* --- Menu mobile : OVERLAY plein écran ---
     Jamais positionné hors-écran (pas de translateX) pour éviter tout
     scroll horizontal : largeur bornée au viewport, masqué via
     opacity/visibility/pointer-events. Le header (z-index 100) reste
     au-dessus, donc le burger demeure cliquable pour fermer. */
  .main-nav {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 22px;
    padding: calc(var(--header-h) + 2rem) var(--pad) calc(2rem + env(safe-area-inset-bottom, 0px));
    background: var(--os);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity var(--t), visibility var(--t), transform var(--t);
    z-index: 90;
  }
  @supports not (height: 100dvh) {
    .main-nav { height: 100vh; }
  }
  .main-nav.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; border-top: 1px solid var(--galet); }
  .nav-list li { width: 100%; }
  .nav-link {
    display: flex;
    align-items: center;
    min-height: 56px;
    width: 100%;
    padding: .6rem 0;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 30px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--encre);
    border-bottom: 1px solid var(--galet);
  }
  .nav-link:hover, .nav-link:focus-visible, .nav-link:active { color: var(--accent); }
  .nav-phone { min-height: 44px; align-items: center; margin-top: 8px; font-size: 14px; }
  .nav-cta { align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; font-size: 13px; }
  .lang-switch-mobile { margin-top: 8px; gap: 6px; }
  .lang-switch-mobile .lang-btn { min-height: 40px; padding: .5rem .6rem; font-size: 12px; }

  /* Entrée en cascade des éléments du menu */
  .main-nav.open .nav-list li,
  .main-nav.open .nav-phone,
  .main-nav.open .nav-cta,
  .main-nav.open .lang-switch-mobile { animation: navItemIn var(--t) both; }
  .main-nav.open .nav-list li:nth-child(1) { animation-delay: .04s; }
  .main-nav.open .nav-list li:nth-child(2) { animation-delay: .08s; }
  .main-nav.open .nav-list li:nth-child(3) { animation-delay: .12s; }
  .main-nav.open .nav-list li:nth-child(4) { animation-delay: .16s; }
  .main-nav.open .nav-list li:nth-child(5) { animation-delay: .20s; }
  .main-nav.open .nav-phone { animation-delay: .24s; }
  .main-nav.open .nav-cta { animation-delay: .28s; }
  .main-nav.open .lang-switch-mobile { animation-delay: .32s; }
  @keyframes navItemIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .hero-inner { grid-template-columns: 1fr; gap: 3rem; }
  .hero-visual { max-width: 420px; width: 100%; margin-inline: auto; }
  .hero-image { margin-inline: auto; }
  .hero-cap { display: none; }
  .hero-lead { max-width: none; }
  /* Hero photo plein cadre : pleine hauteur d'écran, voile vertical */
  body.hero-photo .hero { min-height: 92vh; min-height: 92svh; padding-bottom: 2.5rem; }
  body.hero-photo .hero-inner { gap: 0; }
  body.hero-photo .hero-visual { margin: 0; width: auto; max-width: none; }
  body.hero-photo .hero-image img { object-position: 70% center; }
  body.hero-photo .hero::after { background: linear-gradient(180deg, rgba(43, 52, 40, .5) 0%, rgba(43, 52, 40, .38) 40%, rgba(43, 52, 40, .86) 100%); }

  .services-inner, .approach-inner, .faq-inner { grid-template-columns: 1fr; gap: 2.75rem; }
  .services-head, .faq-head { position: static; }
  .approach-visual { max-width: 400px; width: 100%; }
  .approach-image { max-width: none; }

  .pricing-grid { grid-template-columns: 1fr; border-top: 0; }
  .price-card { border-top: 1px solid var(--galet); padding: 40px 0; }
  .price-card + .price-card { border-left: 0; }
  .price-badge { left: 0; }
  .price-card-featured { margin-block: 0; padding: 44px var(--pad); margin-inline: calc(-1 * var(--pad)); border-top: 0; }
  .price-card-featured .price-badge { top: -1px; left: var(--pad); }

  .testi-grid { grid-template-columns: 1fr; border-top: 0; }
  .testi-card { border-top: 1px solid var(--galet); padding: 32px 0; }
  .testi-card + .testi-card { border-left: 0; }

  .booking-inner { grid-template-columns: 1fr; }
}

/* --- Verrou de scroll renforcé (header sticky) --- */
html.menu-open { overflow: hidden; }

/* --- Voile (backdrop) du tiroir tablette : masqué partout par défaut --- */
.nav-scrim { display: none; }

/* --- Menu mobile en TIROIR LATÉRAL sur TABLETTE (601px → 1024px) --- */
@media (min-width: 601px) and (max-width: 1024px) {
  .main-nav {
    left: auto;
    right: 0;
    width: min(80vw, 400px);
    border-left: 1px solid var(--galet);
  }
  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 89;
    background: rgba(47, 45, 42, .45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--t), visibility var(--t);
  }
  .nav-scrim.open { opacity: 1; visibility: visible; pointer-events: auto; }
}

@media (max-width: 768px) {
  .hero { padding-top: 2.5rem; }
  .hero-content h1 { margin-top: 20px; }
  .hero-actions { gap: 24px; }
  .hero-visual { max-width: 100%; }
  .hero-image { max-width: 100%; aspect-ratio: 4 / 4.2; }
  body.hero-photo .hero-image { aspect-ratio: auto; }
  body.hero-photo .hero-content h1 { font-size: clamp(42px, 11vw, 56px); }
  .stats { padding: 26px 0; }
  .section-head h2, .services-head h2, .approach-content h2, .booking-info h2, .faq-head h2 { font-size: clamp(34px, 9vw, 44px); }

  .service-card { grid-template-columns: 36px 1fr; padding: 22px 0; }
  .service-card .service-price { grid-column: 2; grid-row: auto; text-align: left; margin-top: 12px; }
  .service-price small { display: inline; margin-left: 8px; }
  .services-voice { margin-top: 32px; }

  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .gallery-tall { grid-row: span 2; }
  .gallery-wide { grid-column: span 2; }

  .form-row { grid-template-columns: 1fr; gap: 0; }
  .booking-form-wrap { padding: 1.5rem 1.2rem; }
  .form-title { font-size: 28px; }
  .faq-item summary { font-size: 20px; }
  .faq-answer { padding-right: 0; }
}

@media (max-width: 760px) {
  .team-grid { grid-template-columns: 1fr; gap: 2.5rem; max-width: 380px; }
  .team-photo { max-width: 220px; }
}

@media (max-width: 560px) {
  .team-body h3 { font-size: 22px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom-inner { flex-direction: column; align-items: flex-start; }
  .hero-actions .btn-primary { width: 100%; }
  .price-cta { width: 100%; }
}

@media (max-width: 380px) {
  .brand-sub { display: none; }
  .gallery-grid { grid-auto-rows: 150px; }
}

/* ===================== 23. CHAMP DATE EN JJ-MM-AAAA =====================
   Champ texte masqué + bouton calendrier. Un <input type="date"> s'affiche
   dans la locale du NAVIGATEUR, pas dans celle du site : un visiteur dont le
   navigateur est en anglais lisait « 08/27/2026 » sur un site belge. Le champ
   date natif reste dans le DOM, transparent et neutralisé au clic —
   showPicker() refuse de s'ouvrir sur un display:none. Couleurs en
   currentColor + opacité : aucun jeton de palette. */
.field-date { position: relative; }
.field-date > input[type="text"] { padding-right: 2.6rem; cursor: pointer; }
.field-date__btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  opacity: .6;
  cursor: pointer;
  transition: opacity var(--t-fast);
}
.field-date__btn:hover,
.field-date__btn:focus-visible { opacity: 1; }
/* Sélecteur porté à 2 classes : la règle d'input du template l'emporterait
   sinon et rendrait au champ natif sa largeur 100 % et son padding. */
.field-date > input.field-date__native {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  pointer-events: none;
}