/**
 * APULIA HEALTH CENTER — Feuilles de style globales et composants
 * Agence : Roots Agency · Version : 1.0 (Août 2026)
 */

/* ==========================================================================
   1. TOPBAR & NAVIGATION GLOBALE
   ========================================================================== */

.topbar {
  background-color: var(--inchiostro);
  color: var(--calce);
  font-size: var(--text-sm);
  height: 42px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border-dark);
  position: relative;
  z-index: 100;
}

.topbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.topbar-infos {
  display: flex;
  align-items: center;
  gap: 20px;
}

.topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(251, 250, 248, 0.82);
}

.topbar-sep {
  opacity: 0.3;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.topbar-link {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--brun-clair);
}

.topbar-lang {
  display: flex;
  gap: 6px;
  font-weight: 500;
}

.topbar-lang .active {
  color: var(--sale);
  font-weight: 600;
}

.topbar-lang .disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 860px) {
  .topbar {
    display: none;
  }
}

/* Header Sticky */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  z-index: 90;
  transition: background-color var(--dur-medium) ease, border-color var(--dur-medium) ease;
  background-color: transparent;
  display: flex;
  align-items: center;
}

.site-header.header-opaque {
  background-color: var(--sale);
  border-bottom: 1px solid var(--border-light);
}

.site-header.header-opaque .nav-link {
  color: var(--inchiostro);
}

.site-header.header-opaque .burger-bar {
  background-color: var(--inchiostro);
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Logo de barre — signature complète, arbre compris.
   La largeur est calée sur la hauteur de barre disponible (80 px) plutôt que
   sur le plancher de 180 px de la charte : à 180 px la signature remplit la
   barre de bord à bord. 132 px sur mobile et 148 px sur desktop donnent 47 et
   52 px de haut, ce qui laisse respirer au-dessus et en dessous.
   Deux fichiers superposés : le blanc pour la barre transparente posée sur le
   hero, le brun dès qu'elle devient opaque. Le fondu remplace le changement de
   couleur que permettait l'ancien lettrage en texte. */
.brand-logo {
  position: relative;
  display: block;
  width: 132px;
  line-height: 0;
  text-decoration: none;
}

@media (min-width: 1024px) {
  .brand-logo { width: 148px; }
}

.brand-mark {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity var(--dur-medium) ease;
}

.brand-mark--brun {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.site-header.header-opaque .brand-mark--blanc,
body.page-light .brand-mark--blanc { opacity: 0; }

.site-header.header-opaque .brand-mark--brun,
body.page-light .brand-mark--brun { opacity: 1; }

/* Le tiroir mobile s'ouvre sur fond encre : il ne connaît que la version
   blanche, quelle que soit l'apparence de la barre au moment de l'ouverture. */
.mobile-drawer .brand-mark--blanc { opacity: 1; }
.mobile-drawer .brand-mark--brun { opacity: 0; }

/* Navigation Desktop */
.nav-desktop {
  display: none;
}

@media (min-width: 1024px) {
  .nav-desktop {
    display: flex;
    align-items: center;
    gap: 32px;
  }

  .nav-menu {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 24px;
  }

  .nav-item {
    position: relative;
  }

  .nav-link {
    font-size: var(--text-base);
    font-weight: 500;
    color: rgba(251, 250, 248, 0.9);
    padding: 8px 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color var(--dur-fast) ease;
  }

  .nav-link:hover,
  .nav-link:focus {
    color: var(--theme-accent);
  }

  /* Dropdowns */
  .dropdown-menu {
    position: absolute;
    top: 100%;
    left: -16px;
    min-width: 260px;
    background-color: var(--sale);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius);
    padding: 12px 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--dur-medium) ease, transform var(--dur-medium) ease, visibility var(--dur-medium);
  }

  .nav-item:hover .dropdown-menu,
  .nav-item:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .dropdown-link {
    display: block;
    padding: 10px 20px;
    font-size: var(--text-base);
    color: var(--inchiostro);
    line-height: 1.4;
  }

  .dropdown-link:hover,
  .dropdown-link:focus {
    background-color: var(--calce);
    color: var(--theme-accent);
  }
}

/* Boutons d'action */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 17px 26px;
  min-height: 48px;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: opacity var(--dur-fast) ease, background-color var(--dur-fast) ease;
  white-space: nowrap;
  line-height: 1;
}

.btn:hover {
  opacity: 0.88;
}

.btn-primary {
  background-color: var(--theme-accent);
  color: var(--theme-accent-contrast);
}

.btn-secondary {
  background-color: var(--inchiostro);
  color: var(--sale);
}

.btn-outline {
  border: 1px solid var(--border-medium);
  color: var(--inchiostro);
  background-color: transparent;
}

.btn-outline-light {
  border: 1px solid rgba(251, 250, 248, 0.4);
  color: var(--sale);
  background-color: transparent;
}

.btn-outline-light:hover {
  opacity: 0.88;
}

.btn-sm {
  padding: 10px 18px;
  font-size: var(--text-xs);
}

/* Header sur page claire initiale */
body.page-light .site-header {
  background-color: var(--sale);
  border-bottom: 1px solid var(--border-light);
}
body.page-light .nav-link {
  color: var(--inchiostro);
}
body.page-light .burger-bar {
  background-color: var(--inchiostro);
}

/* ==========================================================================
   2. BURGER & MENU MOBILE LATÉRAL (Gaucherie 80%)
   ========================================================================== */

.burger-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 120;
}

@media (min-width: 1024px) {
  .burger-btn {
    display: none;
  }
}

.burger-bar {
  width: 24px;
  height: 1.5px;
  background-color: var(--sale);
  transition: transform var(--dur-medium) ease, opacity var(--dur-medium) ease, background-color var(--dur-medium) ease;
}

.burger-btn.is-active .burger-bar:first-child {
  transform: translateY(7.5px) rotate(45deg);
  background-color: var(--sale);
}

.burger-btn.is-active .burger-bar:last-child {
  transform: translateY(-0px) rotate(-45deg);
  background-color: var(--sale);
}

/* Drawer Mobile */
.mobile-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(23, 28, 25, 0.65);
  backdrop-filter: blur(4px);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-medium) ease, visibility var(--dur-medium);
}

.mobile-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.mobile-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 80%;
  max-width: 380px;
  background-color: var(--inchiostro);
  border-right: 1px solid var(--brun-clair);
  z-index: 110;
  transform: translateX(-100%);
  transition: transform var(--dur-drawer) var(--ease-standard);
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.mobile-drawer.is-active {
  transform: translateX(0);
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.drawer-cta {
  margin-bottom: 28px;
}

.drawer-cta .btn {
  width: 100%;
}

.mobile-nav-list {
  list-style: none;
  border-top: 1px solid var(--border-dark);
}

.mobile-nav-item {
  border-bottom: 1px solid var(--border-dark);
}

.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 0;
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--sale);
  text-align: left;
}

.mobile-nav-toggle {
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--brun-clair);
  font-weight: 300;
  transition: transform var(--dur-fast) ease;
}

.mobile-sub-menu {
  display: none;
  list-style: none;
  padding: 0 0 16px 12px;
}

.mobile-sub-menu.is-open {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mobile-sub-link {
  font-size: var(--text-md);
  color: rgba(251, 250, 248, 0.78);
  display: block;
  padding: 4px 0;
}

.drawer-footer {
  margin-top: auto;
  padding-top: 32px;
  font-size: var(--text-sm);
  color: rgba(251, 250, 248, 0.6);
  line-height: 1.6;
}

/* Barre Fixe Basse Mobile */
.mobile-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background-color: var(--sale);
  border-top: 1px solid var(--border-light);
  z-index: 85;
}

@media (min-width: 768px) {
  .mobile-sticky-bar {
    display: none;
  }
}

.mobile-sticky-bar .btn {
  flex: 1;
  border-radius: 0;
  padding: 16px;
  font-size: 12px;
}

/* ==========================================================================
   3. SECTIONS HERO & ACCUEIL
   ========================================================================== */

.hero-home {
  position: relative;
  height: 100svh;
  min-height: 600px;
  background-color: var(--inchiostro);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--sale);
  overflow: hidden;
  margin-top: -80px; /* Fusionne avec le header transparent */
  padding-bottom: 60px;
}

.hero-media-container {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 28, 25, 0.42) 0%, rgba(23, 28, 25, 0.30) 38%, rgba(23, 28, 25, 0.88) 100%);
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 3;
}

.hero-title {
  font-size: clamp(38px, 5.6vw, var(--text-5xl));
  color: var(--sale);
  margin-bottom: 20px;
  max-width: 18ch;
}

.hero-sub {
  font-size: clamp(16px, 2vw, 18px);
  color: rgba(251, 250, 248, 0.88);
  margin-bottom: 32px;
  max-width: 54ch;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* Hero standard (pages internes)
   Le header est en flux (position: sticky, pas fixed) : sa hauteur est déjà
   réservée au-dessus du hero. La recompter dans le padding poussait le fil
   d'Ariane et le titre 200 px plus bas sur les pages services. */
.page-hero {
  background-color: var(--inchiostro);
  color: var(--sale);
  padding: var(--sp-hero) 0;
  position: relative;
}

.page-hero.hero-light {
  background-color: var(--calce);
  color: var(--inchiostro);
}

.page-hero.hero-light h1 {
  color: var(--inchiostro);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.breadcrumb a {
  color: inherit;
}

.breadcrumb-active {
  color: var(--inchiostro);
  font-weight: 500;
}

/* Bandeau de Réassurance */
.reassurance-bar {
  background-color: var(--sale);
  border-bottom: 1px solid var(--border-light);
}

.reassurance-grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .reassurance-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .reassurance-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Icône du bandeau de réassurance. Dessin au trait plutôt qu'émoji : le trait
   fin reprend celui de l'arbre du logo, et la couleur suit le libellé au lieu
   d'imposer la palette d'un jeu d'émoji système. Le SVG est en ligne — ni
   police d'icônes ni requête supplémentaire, et rien à autoriser dans la CSP.
   Masquée aux lecteurs d'écran : « cadenas » lu avant « spa entièrement
   privatisé » n'apporte rien à qui écoute la page.
   La charte §5 excluait tout pictogramme décoratif ici ; l'ajout est fait à la
   demande de la direction. */
.reassurance-icone {
  flex: none;
  display: inline-flex;
  color: var(--theme-accent);
}

.reassurance-icone svg {
  display: block;
  width: 20px;
  height: 20px;
}

.reassurance-item {
  padding: 24px 20px;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oliva);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (min-width: 1024px) {
  .reassurance-item {
    border-bottom: none;
    border-left: 1px solid var(--border-light);
    padding: 30px 24px;
  }
  .reassurance-item:first-child {
    border-left: none;
  }
}

/* ==========================================================================
   4. SÉLECTEUR D'INTENTION (ÉLÉMENT SIGNATURE)
   ========================================================================== */

.intention-section {
  padding: var(--section-gap) 0;
  background-color: var(--sale);
}

.intention-header {
  margin-bottom: 40px;
}

/* Panneaux Desktop */
.intention-grid {
  display: flex;
  gap: 12px;
  height: 62vh;
  min-height: 480px;
  max-height: 640px;
}

.intention-panel {
  flex: 1;
  position: relative;
  overflow: hidden;
  /* Fond de repli en encre, pas en chaux. Le panneau porte un titre en blanc
     de sel : quand la photographie manque — « Sur mesure » n'en a pas — le
     titre se retrouvait à 1,16:1 sur un gris clair, donc illisible. La photo,
     lorsqu'elle existe, couvre entièrement ce fond : rien ne change pour les
     autres panneaux. */
  background-color: var(--inchiostro);
  border-radius: var(--radius);
  transition: flex var(--dur-signature) var(--ease-standard);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px 28px;
  text-decoration: none;
  color: var(--sale);
}

.intention-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.65) brightness(0.85);
  transition: filter var(--dur-signature) var(--ease-standard), transform var(--dur-signature) var(--ease-standard);
  z-index: 1;
}

.intention-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 28, 25, 0.1) 0%, rgba(23, 28, 25, 0.8) 100%);
  z-index: 2;
}

.intention-border {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--brun-clair);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-signature) var(--ease-standard);
  z-index: 4;
}

.intention-content {
  position: relative;
  z-index: 3;
}

.intention-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.5vw, 40px);
  color: var(--sale);
  margin-bottom: 8px;
  line-height: 1.1;
}

.intention-meta {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brun-clair);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.intention-arrow {
  transition: transform var(--dur-fast) ease;
}

@media (min-width: 1024px) {
  .intention-panel:hover {
    flex: 1.6;
  }

  .intention-panel:hover .intention-bg {
    filter: saturate(1) brightness(0.95);
  }

  .intention-panel:hover .intention-border {
    transform: scaleX(1);
  }

  .intention-panel:hover .intention-arrow {
    transform: translateX(4px);
  }
}

/* Mobile Scroll-Snap */
@media (max-width: 1023px) {
  .intention-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    height: 420px;
    gap: 16px;
    padding-bottom: 16px;
    -webkit-overflow-scrolling: touch;
  }

  .intention-panel {
    flex: 0 0 280px;
    scroll-snap-align: start;
  }

  .intention-border {
    transform: scaleX(1);
  }
}

/* ==========================================================================
   5. SECTIONS FORMULES & TARIFS
   ========================================================================== */

.section-formules {
  padding: var(--section-gap-lg) 0;
  background-color: var(--sale);
}

.formules-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 48px;
}

@media (min-width: 768px) {
  .formules-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .formules-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.carte-formule {
  background-color: var(--sale);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 36px 30px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.carte-formule.carte-vedette {
  background-color: var(--calce);
  border-color: var(--theme-accent);
}

.carte-badge {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oliva);
  background-color: rgba(78, 91, 69, 0.1);
  padding: 4px 8px;
  border-radius: var(--radius);
}

.carte-duree {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oliva);
  margin-bottom: 8px;
}

.carte-titre {
  font-size: 28px;
  margin-bottom: 12px;
}

.carte-desc {
  font-size: var(--text-md);
  color: var(--text-muted);
  margin-bottom: 24px;
  line-height: 1.5;
}

.carte-inclus {
  list-style: none;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.carte-inclus li {
  font-size: 14px;
  color: var(--inchiostro);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.carte-inclus li::before {
  content: '✓';
  color: var(--oliva);
  font-weight: 600;
}

.carte-tarifs {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.prix-ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.prix-montant {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--inchiostro);
}

.carte-vedette .prix-montant {
  color: #8f6e34;
}

.prix-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* Tableau Comparatif de Tarifs */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  margin: 40px 0;
}

.grille-tarifs {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-md);
}

.grille-tarifs th,
.grille-tarifs td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--border-light);
}

.grille-tarifs th {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  background-color: var(--calce);
}

.grille-tarifs tr:hover td {
  background-color: rgba(233, 234, 229, 0.4);
}

/* ==========================================================================
   6. SECTIONS IMMERSIVES & NUITÉE
   ========================================================================== */

.section-sombre {
  background-color: var(--inchiostro);
  color: var(--sale);
  padding: var(--section-gap) 0;
}

.section-sombre h2,
.section-sombre h3 {
  color: var(--sale);
}

.split-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}

@media (min-width: 1024px) {
  .split-layout {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }
}

/* --- Règlement d'ordre intérieur ---------------------------------------
   Un article par section, numéroté en marge. Le numéro est décoratif : il est
   déjà porté par le titre, on ne le lit pas deux fois. */
.roi-article + .roi-article { margin-top: 48px; }

.roi-article h2 {
  font-size: var(--text-xl);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}

.roi-num {
  display: inline-block;
  margin-right: 12px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--theme-accent);
  vertical-align: 3px;
}

.roi-article p { font-size: var(--text-base); color: var(--text-muted); }
.roi-article p strong { color: var(--inchiostro); font-weight: 600; }

/* --- Les occasions en vidéo --------------------------------------------
   Trois formats verticaux 9:16, ceux des reels. Sur desktop ils tiennent en
   trois colonnes ; sous 900 px la rangée devient un carrousel à accroche,
   comme le sélecteur d'intention — c'est le seul geste qui garde trois
   vidéos lisibles sur un téléphone sans les réduire à des timbres-poste.
   La lecture ne démarre qu'une fois la vidéo à l'écran, et jamais si le
   visiteur a demandé moins de mouvement. */
.occasions-videos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}

@media (max-width: 899px) {
  .occasions-videos {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding-bottom: 16px;
    -webkit-overflow-scrolling: touch;
    /* Le carrousel déborde volontairement de la gouttière pour que la vidéo
       suivante s'amorce au bord de l'écran. */
    margin-inline: calc(var(--page-padding) * -1);
    padding-inline: var(--page-padding);
  }

  .occasion-video {
    flex: 0 0 min(74vw, 300px);
    scroll-snap-align: start;
  }
}

.occasion-video-lien {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background-color: var(--calce);
}

.occasion-video-media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
}

/* Le texte se pose sur la vidéo : le dégradé lui garantit son contraste quelle
   que soit l'image derrière. */
.occasion-video-texte {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  padding: 72px 24px 24px;
  background: linear-gradient(180deg, rgba(23, 28, 25, 0) 0%, rgba(23, 28, 25, 0.82) 62%);
}

.occasion-video-titre {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.25;
  color: var(--sale);
}

.occasion-video-note {
  display: block;
  margin-top: 6px;
  font-size: var(--text-base);
  color: rgba(251, 250, 248, 0.82);
}

.occasion-video-lien-libelle {
  display: block;
  margin-top: 14px;
  color: var(--brun-clair);
}

@media (hover: hover) {
  .occasion-video-lien:hover .occasion-video-media { transform: scale(1.03); }
  .occasion-video-media { transition: transform var(--dur-signature) var(--ease-standard); }
}

@media (prefers-reduced-motion: reduce) {
  .occasion-video-media { transition: none; }
  .occasion-video-lien:hover .occasion-video-media { transform: none; }
}

/* --- La carte : boissons et restauration --------------------------------
   Trois colonnes de listes, chaque ligne tenant l'intitulé à gauche et le
   prix à droite, séparés par un filet en pointillé. Les lignes sont écrites
   par le liant de données : aucun prix ne vit dans le HTML. */
.carte-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px 64px;
}

@media (min-width: 640px)  { .carte-grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .carte-grille { grid-template-columns: repeat(3, 1fr); } }

.carte-groupe h3 {
  font-size: var(--text-xl);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--theme-accent);
}

.carte-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.carte-ligne {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-light);
}

.carte-ligne:last-child { border-bottom: none; }

.carte-item {
  font-size: var(--text-base);
  color: var(--inchiostro);
}

.carte-prix {
  margin-left: auto;
  flex: none;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
  color: var(--theme-accent);
}

/* --- Modèle de page de service santé -----------------------------------
   Deux composants, et rien d'autre :

   .bloc-alterne        texte / image, puis image / texte au bloc suivant.
                        L'alternance est portée par --inverse, pas par l'ordre
                        du markup : le mobile empile toujours le texte d'abord,
                        quel que soit le sens choisi sur desktop.
   .bloc-paragraphe     titre, texte, bouton. Sans image, pour les passages
                        qui n'ont rien à montrer.
   ----------------------------------------------------------------------- */

.bloc-alterne {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

@media (min-width: 1024px) {
  .bloc-alterne {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }

  /* Image à gauche, texte à droite — sans toucher à l'ordre du DOM, donc sans
     rien casser au clavier ni sur mobile. */
  .bloc-alterne--inverse .bloc-alterne-texte { order: 2; }
  .bloc-alterne--inverse .bloc-alterne-media { order: 1; }
}

.bloc-alterne + .bloc-alterne { margin-top: var(--section-gap); }

.bloc-alterne-texte > h2,
.bloc-alterne-texte > h3 { margin-bottom: 16px; }

.bloc-alterne-texte p { margin-bottom: 16px; }
.bloc-alterne-texte p:last-of-type { margin-bottom: 0; }
.bloc-alterne-texte .btn,
.bloc-alterne-texte .link-underline { margin-top: 24px; }

.bloc-alterne-media img {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  border-radius: var(--radius);
}

.bloc-paragraphe {
  max-width: 62ch;
}

.bloc-paragraphe h2,
.bloc-paragraphe h3 { margin-bottom: 16px; }
.bloc-paragraphe p { margin-bottom: 16px; }
.bloc-paragraphe .btn { margin-top: 24px; }

/* Note de source : d'où vient une donnée chiffrée, ou ce qui reste à faire
   valider. Sur une page de santé, l'origine d'un chiffre fait partie du
   contenu. */
.note-clinique {
  margin-top: 20px;
  padding-left: 16px;
  border-left: 2px solid var(--theme-accent);
  font-size: var(--text-base);
  color: var(--text-muted);
}

.split-media {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}

.split-media img {
  width: 100%;
  height: 100%;
  max-height: 540px;
  object-fit: cover;
}

/* ==========================================================================
   7. FORMULAIRE DE CONTACT & PRISES DE RENDEZ-VOUS
   ========================================================================== */

/* --- Formulaire de devis : image à gauche, formulaire à droite ----------
   Le duo tient dans la gouttière de page comme n'importe quelle autre
   section : le `minmax(0, …)` empêche la colonne de formulaire de gonfler
   au-delà de sa part de grille — sans lui, un <select> ou un mot long
   pousse la colonne et fait déborder l'ensemble hors des marges. */
.form-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: stretch;
}

@media (min-width: 900px) {
  .form-duo {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 48px;
  }
}

/* Sur la page contact, le formulaire est seul : les coordonnées et la carte
   sont déjà au-dessus, une image de plus ne dirait rien. La grille repasse à
   une colonne, calée sur une largeur de lecture plutôt qu'étirée d'un bord à
   l'autre. */
.form-duo--seul { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 900px) {
  .form-duo--seul { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
}

.form-duo-media {
  position: relative;
  min-height: 260px;
  border-radius: var(--radius);
  overflow: hidden;
}

.form-duo-media img,
.form-duo-media picture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.form-duo-media .media-placeholder {
  height: 100%;
  aspect-ratio: auto;
}

/* Le formulaire ne déborde jamais de sa colonne, quel que soit son contenu. */
.form-duo .form-container { min-width: 0; }
.form-apulia { min-width: 0; }
.form-input,
.form-select,
.form-textarea { max-width: 100%; }

.form-container {
  background-color: var(--sale);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 40px;
}

@media (max-width: 640px) {
  .form-container {
    padding: 24px 20px;
  }
}

.form-group {
  margin-bottom: 24px;
}

.form-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oliva);
  margin-bottom: 8px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 14px 16px;
  background-color: #ffffff;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius);
  color: var(--inchiostro);
  font-size: var(--text-md);
  transition: border-color var(--dur-fast) ease, outline var(--dur-fast) ease;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--theme-accent);
  outline: 2px solid var(--theme-accent);
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 640px) {
  .form-grid-2 {
    grid-template-columns: 1fr 1fr;
  }
}

.form-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--text-muted);
  cursor: pointer;
}

.form-checkbox-label input {
  margin-top: 4px;
}

/* Honeypot Masqué */
.antispam-field {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
  z-index: -1;
}

/* Messages d'état de formulaire */
.form-status {
  padding: 16px;
  border-radius: var(--radius);
  margin-bottom: 24px;
  font-size: 14px;
  display: none;
}

.form-status.status-error {
  display: block;
  background-color: #fde8e8;
  color: #9b1c1c;
  border: 1px solid #f8b4b4;
}

.form-status.status-loading {
  display: block;
  background-color: var(--calce);
  color: var(--inchiostro);
}

/* Accueil d'une demande de réservation arrivée depuis un bouton « Réserver » :
   une note de contexte, pas une alerte. Le liseré brun la rattache au parcours
   de réservation sans emprunter le rouge de l'erreur. */
.form-status.status-info {
  display: block;
  background-color: var(--calce);
  color: var(--inchiostro);
  border-left: 3px solid var(--brun-apulia);
}

/* ==========================================================================
   8. ACCORDÉONS FAQ
   ========================================================================== */

/* FAQ — liste de filets, pas de cartes (maquette 2l).
   Chaque question est une ligne fine séparée par un filet ; sur desktop la
   liste passe à deux colonnes, chaque ligne s'ouvrant sans déplacer la
   colonne voisine puisque les cellules sont alignées en haut. */
.faq-list {
  margin-top: 32px;
  border-bottom: 1px solid var(--border-light);
}

/* Deux colonnes seulement là où la liste est longue et le conteneur large :
   la page FAQ et le contact. Dans un conteneur étroit — le rappel de cinq
   questions en accueil — la colonne unique reste la bonne largeur de lecture. */
@media (min-width: 900px) {
  .faq-list--deux-colonnes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    column-gap: 64px;
  }
}

.faq-item {
  border-top: 1px solid var(--border-light);
}

/* En deux colonnes, la première ligne de la colonne de droite doit garder son
   filet haut : elle n'est pas la suite de la colonne de gauche. */
.faq-question {
  width: 100%;
  padding: 22px 0;
  text-align: left;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  cursor: pointer;
  background: none;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.3;
  color: var(--inchiostro);
  transition: color var(--dur-fast) ease;
}

.faq-question:hover { color: var(--theme-accent); }

.faq-icon {
  flex: none;
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  color: var(--theme-accent);
  transition: transform var(--dur-medium) ease;
}

.faq-item.is-open .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-medium) ease, padding var(--dur-medium) ease;
  padding: 0;
  color: var(--text-muted);
  font-size: var(--text-md);
}

.faq-item.is-open .faq-answer {
  max-height: 400px;
  padding: 0 48px 24px 0;
}

.faq-answer p { margin-bottom: 0; }

/* ==========================================================================
   9. BANDEAU DE CONSENTEMENT (Consent Mode v2)
   ========================================================================== */

.cookie-banner {
  position: fixed;
  bottom: 24px;
  left: 24px;
  right: 24px;
  max-width: 520px;
  background-color: var(--sale);
  border: 1px solid var(--border-medium);
  border-top: 2px solid var(--theme-accent);
  border-radius: var(--radius);
  padding: 24px;
  z-index: 200;
  display: none;
}

.cookie-banner.is-visible {
  display: block;
}

.cookie-title {
  font-family: var(--font-display);
  font-size: 18px;
  margin-bottom: 8px;
}

.cookie-text {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.cookie-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ==========================================================================
   10. FOOTER GLOBAL & MAILLAGE LOCAL
   ========================================================================== */

.site-footer {
  background-color: var(--inchiostro);
  color: var(--calce);
  padding: 80px 0 40px;
  margin-top: auto;
  border-top: 1px solid var(--border-dark);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-bottom: 60px;
}

@media (min-width: 640px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  }
}

.footer-title {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--sale);
  margin-bottom: 20px;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
}

.footer-links a {
  color: rgba(251, 250, 248, 0.75);
}

.footer-links a:hover {
  color: var(--brun-clair);
}

.footer-seo-links {
  border-top: 1px solid var(--border-dark);
  padding-top: 32px;
  margin-bottom: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  color: rgba(251, 250, 248, 0.5);
}

.footer-seo-links a {
  color: inherit;
}

.footer-bottom {
  border-top: 1px solid var(--border-dark);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 12px;
  color: rgba(251, 250, 248, 0.5);
}

@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* ==========================================================================
   11. ANIMATIONS & SCROLL REVEAL
   ========================================================================== */

.reveal-on-scroll.reveal-armed {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-reveal) ease, transform var(--dur-reveal) ease;
}

.reveal-on-scroll.reveal-armed.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   12. CARROUSEL DU HERO (charte §6.5 — fondu croisé 800 ms, avance 7 s)
   ========================================================================== */

.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--dur-slow) ease-in-out;
}

.hero-slide.is-active {
  opacity: 1;
}

.hero-slide video,
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-dots {
  position: absolute;
  right: var(--page-padding);
  bottom: 34px;
  z-index: 4;
  display: flex;
  gap: 10px;
}

.hero-dot {
  width: 40px;
  height: 2px;
  background-color: rgba(251, 250, 248, 0.4);
  border-radius: 0;
  cursor: pointer;
  padding: 12px 0;
  background-clip: content-box;
  transition: background-color var(--dur-medium) ease;
}

.hero-dot.is-active {
  background-color: var(--brun-clair);
}

/* ==========================================================================
   13. SÉQUENCE DE CHARGEMENT DE L'ACCUEIL (charte §6.1 — 900 ms, une fois)
   ========================================================================== */

.seq-run .hero-slide.is-active { animation: seqMedia 600ms ease both; }
.seq-run .hero-title           { animation: seqTitle 700ms cubic-bezier(.16,1,.3,1) 200ms both; }
.seq-run .hero-sub,
.seq-run .hero-actions         { animation: seqRise 450ms ease-out 450ms both; }
.seq-run .site-header          { animation: seqFade 300ms ease 600ms both; }

@keyframes seqMedia { from { opacity: 0 } to { opacity: 1 } }
@keyframes seqTitle {
  from { clip-path: inset(100% 0 0 0) }
  to   { clip-path: inset(0 0 0 0) }
}
@keyframes seqRise  { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }
@keyframes seqFade  { from { opacity: 0 } to { opacity: 1 } }

/* ==========================================================================
   14. APLAT DE REMPLACEMENT (charte §5 — « tant qu'une photo manque »)
   ========================================================================== */

.media-placeholder {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  background-image: repeating-linear-gradient(
    135deg,
    var(--calce) 0 10px,
    rgba(78, 91, 69, 0.10) 10px 20px
  );
}

/* Carte Google — cadre 16:9 sur desktop, plus haut sur mobile où une carte
   large et basse ne montre plus rien d'utile. Le filet reprend celui des
   médias voisins pour que l'iframe ne tranche pas dans la page. */
.carte-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  overflow: hidden;
  background-color: var(--calce);
}

.carte-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (max-width: 767px) {
  .carte-embed { aspect-ratio: 4 / 3; }
}

.carte-legende {
  margin-top: 16px;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.media-placeholder[data-ratio="3:4"] { aspect-ratio: 3 / 4; }
.media-placeholder[data-ratio="4:5"] { aspect-ratio: 4 / 5; }
.media-placeholder[data-ratio="16:9"] { aspect-ratio: 16 / 9; }

.media-placeholder span {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--oliva);
  background-color: var(--sale);
  border: 1px solid var(--border-light);
  padding: 6px 10px;
  margin: 16px;
  max-width: calc(100% - 32px);
}

/* ==========================================================================
   15. TABLEAU DE PRIX ET EXTRAS (charte §5)
   ========================================================================== */

.prix-table-wrap { overflow-x: visible; }

.prix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}

.prix-table th,
.prix-table td {
  text-align: left;
  padding: 18px 16px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: top;
}

.prix-table thead th {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oliva);
  border-bottom: 1px solid var(--border-medium);
}

.prix-table .col-prix {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.prix-table tr.is-featured {
  background-color: var(--calce);
}

/* La ligne mise en avant se signale par son fond et par son badge « la plus
   demandée ». Elle portait en plus un filet d'un pixel sur sa seule première
   cellule : dans un tableau sans bordure verticale, ce trait isolé ne se
   lisait pas comme une mise en avant mais comme un défaut d'affichage. */

.formule-nom {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  display: block;
  margin-bottom: 4px;
}

.formule-duree {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oliva);
}

.badge-signature {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oliva);
  border: 1px solid var(--theme-accent);
  padding: 3px 8px;
  border-radius: var(--radius);
  margin-left: 8px;
}

/* Sous 640 px, le tableau devient des cartes empilées — jamais un défilement */
@media (max-width: 639px) {
  .prix-table, .prix-table tbody, .prix-table tr, .prix-table td { display: block; width: 100%; }
  .prix-table thead { display: none; }
  .prix-table tr {
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 18px;
    margin-bottom: 16px;
  }
  .prix-table td { border-bottom: none; padding: 4px 0; }
  .prix-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--oliva);
    margin-top: 10px;
  }
}

/* ==========================================================================
   16. ÉQUIPEMENTS AVEC STATUT (planche 2f)
   ========================================================================== */

.equipement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background-color: var(--border-light);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
}

.equipement-item {
  background-color: var(--sale);
  padding: 24px;
}

/* Intertitre de groupe : il sépare ce qui est compris dans le spa de ce qui
   n'existe que dans la Suite Riposo. La distinction est commerciale avant
   d'être décorative — elle ne doit jamais passer inaperçue. */
.equipement-groupe {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin-bottom: 8px;
}

.equipement-grid + .equipement-groupe {
  margin-top: 48px;
}

.equipement-groupe-note {
  font-size: var(--text-base);
  color: var(--text-muted);
  max-width: 68ch;
  margin-bottom: 20px;
}

.equipement-groupe + .equipement-grid {
  margin-top: 20px;
}

.equipement-item h3 {
  font-size: var(--text-xl);
  margin-bottom: 6px;
}

.equipement-item p {
  font-size: var(--text-base);
  color: var(--text-muted);
  margin-bottom: 12px;
}

.statut {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oliva);
  border: 1px solid var(--border-medium);
  padding: 3px 8px;
  border-radius: var(--radius);
}

/* ==========================================================================
   17. SÉLECTEUR DE MONTANT — CHÈQUE CADEAU (planche 1b)
   ========================================================================== */

.gift-amounts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.gift-amount {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0.06em;
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius);
  background-color: transparent;
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, opacity var(--dur-fast) ease;
}

.gift-amount:hover { opacity: 0.88; }

.gift-amount.is-active {
  border-color: var(--theme-accent);
  border-width: 2px;
}

.gift-custom {
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius);
  background-color: var(--sale);
  width: 180px;
  margin-bottom: 20px;
}

.gift-total {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  display: block;
  margin-bottom: 20px;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   18. DIVERS
   ========================================================================== */

body.is-locked { overflow: hidden; }

.mobile-nav-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  cursor: pointer;
  text-align: left;
}

/* Deuxième ligne d'une cellule de tableau : le sous-titre du soin, sous son
   nom, sans peser autant que lui. */
.soin-desc {
  display: block;
  margin-top: 4px;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.note-source {
  font-size: var(--text-base);
  color: var(--text-muted);
  border-left: 2px solid var(--border-medium);
  padding-left: 16px;
  margin-top: 24px;
}

/* Mouvement réduit — charte §6.7 :
   largeurs du sélecteur figées, seul le filet d'accent apparaît. */
@media (prefers-reduced-motion: reduce) {
  .intention-panel:hover { flex: 1; }
  .intention-panel:hover .intention-bg { filter: saturate(0.65) brightness(0.85); }
  .hero-slide { transition: none; }
  .seq-run .hero-slide.is-active,
  .seq-run .hero-title,
  .seq-run .hero-sub,
  .seq-run .hero-actions,
  .seq-run .site-header { animation: none; }
}

/* ==========================================================================
   19. PIED DE PAGE — classes du gabarit partagé
   ========================================================================== */

/* Le pied de page porte la signature complète, arbre compris : c'est le seul
   endroit du site qui lui donne la largeur minimale demandée par la charte. */
.footer-brand {
  display: block;
  width: 148px;
  max-width: 100%;
  margin-bottom: 24px;
  line-height: 0;
}

@media (min-width: 1024px) {
  .footer-brand { width: 176px; }
}

.footer-brand img {
  display: block;
  width: 100%;
  height: auto;
}

.footer-baseline {
  font-size: var(--text-base);
  color: var(--text-muted-dark);
  margin-bottom: 20px;
}

.footer-coords {
  font-size: var(--text-base);
  color: var(--text-muted-dark);
  line-height: 1.9;
}

.footer-coords a:hover { opacity: 0.88; }

.footer-lang {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
}

.cookie-details {
  font-size: var(--text-sm);
  color: var(--text-muted);
  align-self: center;
  text-decoration: underline;
}

.drawer-close {
  color: var(--sale);
  font-size: var(--text-xl);
  cursor: pointer;
  min-width: 48px;
  min-height: 48px;
}

.drawer-footer a:hover { opacity: 0.88; }

/* ==========================================================================
   20. GABARITS DE SECTION
   ========================================================================== */

/* --- Rythme vertical ------------------------------------------------------
   Règle unique : c'est toujours la section qui S'OUVRE qui pose le pas.
   Une section transparente ne referme rien en bas ; un bandeau coloré, si,
   parce qu'il dessine un bord visible. Deux paddings ne se cumulent donc
   jamais, et aucun titre ne peut se retrouver collé au bord de son bandeau.
   ------------------------------------------------------------------------- */

.section {
  padding-top: var(--section-gap);
  padding-bottom: 0;
}

/* Fonds de bandeau — en classes, jamais en style en ligne : c'est ce qui
   permet aux garde-fous ci-dessous de faire leur travail. */
.bg-sale        { background-color: var(--sale); }
.bg-calce       { background-color: var(--calce); }
.bg-inchiostro  { background-color: var(--inchiostro); color: var(--sale); }
.bg-inchiostro h2,
.bg-inchiostro h3 { color: var(--sale); }

/* La section qui suit immédiatement le hero d'une page reprend au demi-pas :
   le hero a déjà donné sa respiration basse. */
.page-hero + .section { padding-top: var(--section-gap-sm); }

/* GARDE-FOU DE RYTHME — ne pas retirer.
   Un bandeau qui porte son propre fond garde sa respiration complète, en haut
   comme en bas, quelle que soit sa position dans la page. C'est ce qui empêche
   « Les extras » — ou n'importe quel autre titre de bandeau — de se coller au
   bord de son aplat de couleur. */
.section.bg-sale,
.section.bg-calce,
.section.bg-inchiostro,
.page-hero + .section.bg-sale,
.page-hero + .section.bg-calce,
.page-hero + .section.bg-inchiostro {
  padding-top: var(--section-gap-lg);
  padding-bottom: var(--section-gap-lg);
}

/* Les bandeaux qui ne passent pas par .section suivent la même règle : ils
   portent une couleur, ils prennent le pas large. (.section-formules et
   .section-cta portent la leur sur leur propre déclaration, plus bas dans le
   fichier — la déclarer ici ne servirait à rien.) */
.section-sombre,
.intention-section { padding: var(--section-gap-lg) 0; }

/* Une section transparente qui précède un bandeau doit se refermer : sans
   cela, son dernier élément vient buter contre l'aplat de couleur et les deux
   sections se lisent comme une seule. Le :not() empêche la règle de retomber
   sur un bandeau — il a déjà son pas large ci-dessus. */
.section:not(.bg-sale):not(.bg-calce):not(.bg-inchiostro):has(+ .section.bg-sale),
.section:not(.bg-sale):not(.bg-calce):not(.bg-inchiostro):has(+ .section.bg-calce),
.section:not(.bg-sale):not(.bg-calce):not(.bg-inchiostro):has(+ .section.bg-inchiostro),
.section:not(.bg-sale):not(.bg-calce):not(.bg-inchiostro):has(+ .section-sombre),
.section:not(.bg-sale):not(.bg-calce):not(.bg-inchiostro):has(+ .section-formules),
.section:not(.bg-sale):not(.bg-calce):not(.bg-inchiostro):has(+ .section-cta) {
  padding-bottom: var(--section-gap);
}

/* Après un bandeau, le fond change : le demi-pas suffit à marquer la reprise.
   Le :where() garde ce sélecteur à une spécificité de simple classe, pour que
   le garde-fou ci-dessus reste prioritaire quand deux bandeaux se suivent. */
:where(.section.bg-sale,
       .section.bg-calce,
       .section.bg-inchiostro,
       .section-sombre,
       .section-formules) + .section { padding-top: var(--section-gap-sm); }

/* Une dernière section transparente doit quand même se refermer avant le pied
   de page, si aucun bandeau de conversion ne la suit. */
main > .section:last-child { padding-bottom: var(--section-gap); }

/* Dernier filet de sécurité, si un style en ligne réintroduit le problème
   qu'on vient de corriger sur l'ensemble du site. */
.section[style*="background"][style*="padding-top: 0"],
.section[style*="background"][style*="padding-top:0"] {
  padding-top: var(--section-gap) !important;
}

/* Les ancres internes ne doivent pas atterrir sous la barre collante. */
main [id],
section[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

.section-head { margin-bottom: 48px; }
.section-head h2 { margin-bottom: 20px; }

.split-media-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
  align-items: start;
}

.split-media-duo picture:last-child { margin-top: 40px; }

.split-media-duo img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
}

/* Lien de texte : filet d'accent de gauche à droite (charte §6.5) */
/* Lien dans le fil du texte. `.link-underline` est un lien de bloc — capitales,
   graisse 600, marge à gauche : il ne peut pas se glisser au milieu d'une
   phrase sans en casser la ligne. */
.lien-inline {
  color: var(--theme-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(190, 154, 92, 0.5);
}

.lien-inline:hover { text-decoration-color: currentColor; }

.link-underline {
  position: relative;
  display: inline-block;
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-left: 24px;
  padding-bottom: 3px;
}

.link-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: var(--theme-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease-out;
}

.link-underline:hover::after,
.link-underline:focus-visible::after { transform: scaleX(1); }

@media (max-width: 639px) {
  .link-underline { margin-left: 0; margin-top: 16px; display: block; }
}

/* Prix en ligne dans un bloc éditorial */
.prix-inline {
  margin: 28px 0;
  padding: 18px 0;
  border-top: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-dark);
}

.prix-inline-montant {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--sale);
  font-variant-numeric: tabular-nums;
}

.prix-inline-note {
  font-size: var(--text-base);
  color: var(--text-muted-dark);
  margin-left: 12px;
}

/* Carte produit (massage) */
.produit-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  background-color: var(--calce);
  border-radius: var(--radius);
  padding: 24px;
  margin: 28px 0;
}

.produit-nom {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
}

.produit-meta {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oliva);
}

.produit-prix {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Étiquette de lien en display. Tout ce qui est petit était en sans, en
   capitales, à +0,14 em : net, mais administratif. Le serif descendu à 15 px,
   sans capitales et sans interlettrage, rend le ton éditorial sans changer la
   hiérarchie. Les surtitres, eux, restent en sans capitales : ce sont des
   étiquettes de rubrique, pas des mots à lire. */
.libelle-display {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.3;
}

/* Étiquette de lien des vignettes vidéo. Elle portait l'accent adriatique du
   pôle santé ; elle reprend l'accent de la maison. */
.lien-libelle {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--theme-accent);
}

/* Liste d'informations pratiques */
.infos-list {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  max-width: 44ch;
}

.infos-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: var(--text-base);
}

.infos-list li:last-child { border-bottom: none; }

/* Bandeau de conversion final */
.section-cta {
  padding: var(--section-gap-lg) 0;
  background-color: var(--inchiostro);
  color: var(--sale);
  text-align: center;
}

.section-cta h2 { color: var(--sale); margin-bottom: 20px; }

.section-cta p {
  color: var(--text-muted-dark);
  max-width: 52ch;
  margin: 0 auto 36px;
}

.cta-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.faq-more { margin-top: 32px; }

/* Bandeau de réassurance — sans pictogramme décoratif (charte §5) */
.reassurance-item {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Cadrage des panneaux du sélecteur : le sujet reste dans le champ */
.intention-bg { object-position: center 45%; }

/* ==========================================================================
   21. ÉTAPES NUMÉROTÉES — uniquement pour une séquence réelle
   ========================================================================== */

.etapes {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background-color: var(--border-light);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  margin: 0;
  padding: 0;
  counter-reset: none;
}

@media (min-width: 640px)  { .etapes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .etapes { grid-template-columns: repeat(4, 1fr); } }

.etapes li {
  background-color: var(--sale);
  padding: 28px 24px;
}

.etape-no {
  display: block;
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  letter-spacing: 0.14em;
  color: var(--theme-accent);
  margin-bottom: 14px;
}

.etapes h3 { font-size: var(--text-xl); margin-bottom: 8px; }

.etapes p {
  font-size: var(--text-base);
  color: var(--text-muted);
  margin: 0;
}

.lede {
  font-size: var(--text-lg);
  color: var(--text-muted);
  max-width: 62ch;
  margin-bottom: 28px;
}

.breadcrumb {
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 28px;
}

.breadcrumb a:hover { opacity: 0.88; }
.breadcrumb-active { color: var(--inchiostro); }

/* ==========================================================================
   22. GALERIE
   ========================================================================== */

.galerie {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}

@media (min-width: 640px)  { .galerie { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .galerie { grid-template-columns: repeat(3, 1fr); } }

.galerie figure { margin: 0; }

@media (min-width: 640px) {
  .galerie-large { grid-column: span 2; }
}

.galerie img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}

.galerie-large img { aspect-ratio: 16 / 9; }

.galerie figcaption {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oliva);
  margin-top: 10px;
}

/* Visuel principal de page */
.media-lead-inner img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
}

/* La barre fixe mobile ne doit pas recouvrir le second CTA du hero */
@media (max-width: 767px) {
  .hero-home { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  main { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   23. MÉGA-MENU (desktop ≥ 1024 px)
   Panneau pleine largeur ancré sous la barre. Aucune ombre, filet 1 px,
   rayon 2 px, fondu + translation de 8 px en 200 ms (charte §6.4).
   ========================================================================== */

@media (min-width: 1024px) {

  /* Le panneau s'ancre sur la barre, pas sur l'item : il occupe toute la largeur */
  .nav-item.has-mega { position: static; }

  /* Le lien s'arrête 20 px au-dessus du bas de la barre, et le panneau commence
     exactement à ce bas : entre les deux, une bande morte qui n'appartient ni à
     l'un ni à l'autre. Le curseur qui descendait vers le panneau y perdait le
     survol, et le panneau se refermait en route. Ce prolongement invisible du
     lien relie les deux zones ; le panneau, déclaré après dans le DOM, reste
     peint au-dessus et garde ses liens cliquables. */
  .nav-item.has-mega > .nav-link { position: relative; }

  .nav-item.has-mega > .nav-link::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -16px;
    right: -16px;
    height: 22px;
  }

  /* Le panneau n'occupe plus toute la largeur : c'est une carte, calée sur la
     marge droite de la page et large de ce que son contenu demande, pas de ce
     que l'écran permet. Elle reste solidaire du bas de la barre — aucun écart
     à franchir, donc le survol ne se perd pas en chemin — et ne dépasse jamais
     la gouttière, quelle que soit la largeur d'écran. */
  .mega-panel {
    position: absolute;
    top: 100%;
    left: auto;
    right: var(--page-padding);
    width: min(880px, calc(100vw - var(--page-padding) * 2));
    border: 1px solid var(--border-light);
    border-top-color: transparent;
    border-radius: 0 0 var(--radius-btn) var(--radius-btn);
    box-shadow: 0 24px 48px -24px rgba(23, 28, 25, 0.22);
    background-color: var(--sale);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--dur-medium) ease,
                transform var(--dur-medium) ease,
                visibility var(--dur-medium);
    /* Fermeture retardée : le passage d'un item à l'autre, ou un écart de
       quelques pixels, ne doit pas faire clignoter le panneau. */
    transition-delay: 140ms;
  }

  .nav-item.has-mega:hover .mega-panel,
  .nav-item.has-mega:focus-within .mega-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
  }

  /* Fermé à Escape : le :focus-within ci-dessus garderait sinon le panneau
     ouvert, le focus revenant sur le lien. Même spécificité, déclaré après. */
  .nav-item.has-mega.is-dismissed .mega-panel {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
  }

  /* La barre devient opaque tant qu'un panneau est ouvert */
  .site-header.mega-open {
    background-color: var(--sale);
  }

  /* Voile de mise à distance — la charte interdit l'ombre portée (§6.4), c'est
     donc l'assombrissement de la page qui dit que le méga-menu est un calque
     posé par-dessus, et non un morceau du contenu. Même principe que la
     surface d'occultation du tiroir mobile.
     z-index 86 : sous la barre (90), au-dessus du contenu et du socle
     d'actions flottantes (80). */
  body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-color: rgba(23, 28, 25, 0.34);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 86;
    transition: opacity var(--dur-medium) ease, visibility var(--dur-medium);
  }

  body.mega-open::after {
    opacity: 1;
    visibility: visible;
  }

  /* Rien ne flotte devant le voile. */
  body.mega-open .floating-actions {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .site-header.mega-open .nav-link { color: var(--inchiostro); }
  /* Barre opaque tant que le panneau est ouvert : la signature passe au brun. */
  .site-header.mega-open .brand-mark--blanc { opacity: 0; }
  .site-header.mega-open .brand-mark--brun { opacity: 1; }

  /* Dans la carte, le conteneur de page n'a plus lieu d'être : il rajouterait
     sa propre gouttière à celle de la carte. */
  .mega-panel .container {
    max-width: none;
    padding-left: 32px;
    padding-right: 32px;
  }

  .mega-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 240px;
    gap: 36px;
    padding-top: 32px;
    padding-bottom: 32px;
    align-items: start;
  }

  .mega-inner-2 { grid-template-columns: minmax(0, 1fr) 240px; }

  /* Deux colonnes de liens seulement : la carte se resserre d'autant. */
  .mega-panel:has(.mega-inner-2) { width: min(620px, calc(100vw - var(--page-padding) * 2)); }

  .mega-title {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--oliva);
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-light);
  }


  .mega-list { list-style: none; margin: 0; padding: 0; }

  .mega-list a {
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid var(--rule-hair, rgba(23, 28, 25, 0.06));
    transition: opacity var(--dur-fast) ease;
  }

  .mega-list li:last-child a { border-bottom: none; }
  .mega-list a:hover { opacity: 0.88; }

  .mega-nom {
    display: block;
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--inchiostro);
    line-height: 1.3;
  }

  .mega-note {
    display: block;
    font-size: var(--text-base);
    color: var(--text-muted);
    margin-top: 3px;
    line-height: 1.45;
  }

  /* Filet d'accent qui monte sous l'intitulé survolé */
  .mega-list a { position: relative; }
  .mega-list a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    background-color: var(--theme-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 200ms ease-out;
  }
  .mega-list a:hover::after,
  .mega-list a:focus-visible::after { transform: scaleX(1); }

  /* Carte mise en avant */
  .mega-feature {
    display: block;
    background-color: var(--calce);
    border-radius: var(--radius);
    padding: 20px;
    transition: opacity var(--dur-fast) ease;
  }

  .mega-feature:hover { opacity: 0.88; }

  .mega-feature img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius);
    margin-bottom: 16px;
  }

  .mega-feature-texte {
    border-top: 2px solid var(--theme-accent);
  }


  .mega-feature-eyebrow {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--oliva);
    margin-bottom: 8px;
  }


  .mega-feature-titre {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: 1.15;
    color: var(--inchiostro);
  }

  .mega-feature-note {
    display: block;
    font-size: var(--text-base);
    color: var(--text-muted);
    margin-top: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mega-panel { transition: none; transform: none; }
  .mega-list a::after { transition: none; }
}

/* ==========================================================================
   24. LISIBILITÉ DES TITRES — Playfair Display
   Poids 500 partout où le caractère display est employé. Combiné à
   l'axe optique figé dans tokens.css, cela épaissit les déliés qui
   disparaissaient sur fond sombre.
   ========================================================================== */

.footer-brand,
.footer-title,
.cookie-title,
.formule-nom,
.gift-total,
.intention-title,
.prix-inline-montant,
.prix-montant,
.produit-nom,
.produit-prix,
.prix-table .col-prix,
.mega-feature-titre,
.carte-titre,
.hero-title,
[style*="--font-display"] {
  font-weight: 500;
}

/* ==========================================================================
   25. ACTIONS FLOTTANTES & RETOUR EN HAUT DE PAGE
   ========================================================================== */

/* Le socle est toujours présent dans le DOM : c'est lui qui se montre au
   scroll, jamais ses enfants un par un. Sans JavaScript, le lien de retour
   fonctionne quand même — c'est une ancre vers #haut-de-page. */
.floating-actions {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}

.floating-actions > * {
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--dur-medium) var(--ease-standard),
              transform var(--dur-medium) var(--ease-standard),
              visibility var(--dur-medium);
}

.floating-actions.is-visible > * {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Réserver et Appeler ne s'affichent qu'à partir du desktop : en dessous,
   c'est la barre fixe basse qui porte les deux mêmes actions. */
.floating-cta { display: none; }

@media (min-width: 768px) {
  .floating-actions { right: 32px; bottom: 32px; }
  .floating-cta {
    display: inline-flex;
    min-width: 176px;
    box-shadow: 0 8px 28px rgba(23, 28, 25, 0.20);
  }
}

/* Appeler est encre sur encre : au-dessus d'un bandeau sombre, le bouton se
   confondait avec le fond et il ne restait que son texte en l'air. Le filet
   clair lui rend un bord sur les fonds foncés, sans rien changer sur clair. */
.floating-cta.btn-secondary { border: 1px solid var(--border-dark); }

.back-to-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-btn);
  background-color: var(--inchiostro);
  color: var(--sale);
  border: 1px solid var(--border-dark);
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(23, 28, 25, 0.20);
}

.back-to-top:hover { background-color: var(--theme-accent); color: var(--theme-accent-contrast); }

/* Sur mobile, le socle se pose au-dessus de la barre fixe basse. */
@media (max-width: 767px) {
  .floating-actions { bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* Rien ne flotte par-dessus le tiroir de navigation ni le bandeau cookies. */
body.is-locked .floating-actions,
body.has-cookie-banner .floating-actions {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ==========================================================================
   26. GRILLE À TROIS COLONNES & ENCADRÉS PRATIQUES
   ========================================================================== */

.grille-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}

@media (min-width: 640px)  { .grille-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grille-3 { grid-template-columns: repeat(3, 1fr); } }

/* Encadré d'appui : un fait, une phrase. Pas une carte de service. */
/* Le filet complet garantit que la carte se détache aussi bien sur le fond
   sel que sur le fond chaux : elle n'est jamais invisible. */
.carte-point {
  background-color: var(--sale);
  border: 1px solid var(--border-light);
  border-top: 2px solid var(--theme-accent);
  border-radius: var(--radius);
  padding: 28px 24px;
}

.carte-point h3 {
  font-size: var(--text-xl);
  color: var(--theme-accent);
  margin-bottom: 10px;
}

.carte-point p {
  font-size: var(--text-base);
  color: var(--text-muted);
  margin: 0;
}

/* Les CTA d'un hero s'alignent sur le texte, pas au centre comme en bandeau. */
.cta-actions-gauche { justify-content: flex-start; }

/* Encadré tarifaire adossé à un bloc éditorial */
.encadre-tarifs {
  background-color: var(--calce);
  border-radius: var(--radius);
  border-left: 2px solid var(--theme-accent);
  padding: 28px 24px;
}

.encadre-tarifs h2,
.encadre-tarifs h3 {
  font-size: var(--text-xl);
  color: var(--theme-accent);
  margin-bottom: 12px;
}

.encadre-tarifs p {
  font-size: var(--text-base);
  color: var(--text-muted);
}

.encadre-tarifs-lien { margin-top: 20px; }

/* Maillage latéral entre services : des pastilles, pas des cartes. */
.liens-services {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.liens-services a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  background-color: var(--sale);
  font-size: var(--text-base);
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.liens-services a:hover {
  border-color: var(--theme-accent);
  color: var(--theme-accent);
  opacity: 1;
}
/* ==========================================================================
   APULIA — COMPOSANTS DE LA REFONTE VISUELLE (août 2026)
   À concaténer à la fin de css/style.css, ou à charger après lui.
   Aucun jeton nouveau : tout vient de css/tokens.css.
   HTML/CSS/JS vanilla. Aucune librairie.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. EN-TÊTE DE PAGE IMMERSIF — remplace .page-hero sur les pages intérieures
   -------------------------------------------------------------------------- */

.hero-immersif {
  position: relative;
  height: 50vh;
  min-height: 420px;
  overflow: hidden;
  background-color: var(--inchiostro);
  color: var(--sale);
  /* La barre collante est en flux au-dessus : ne pas recompter --header-h. */
}

@media (min-width: 1024px) {
  .hero-immersif { height: 60vh; min-height: 560px; max-height: 720px; }
}

/* Le média : vidéo quand la page en a une, sinon <picture>. Même règle. */
.hero-immersif-media,
.hero-immersif-media img,
.hero-immersif-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-immersif-media img,
.hero-immersif-media video { filter: saturate(0.8); }

/* Voile dégradé bas → haut. Le titre doit tenir 4,5:1 minimum ; la butée
   haute à 0,45 est ce qui permet à la barre transparente et à son logo blanc
   de rester lisibles sur un plafond clair. */
.hero-immersif::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    0deg,
    rgba(23, 28, 25, 0.88) 0%,
    rgba(23, 28, 25, 0.55) 42%,
    rgba(23, 28, 25, 0.45) 100%
  );
}

.hero-immersif-contenu {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 28px;
}

@media (min-width: 1024px) {
  .hero-immersif-contenu { padding-bottom: 64px; }
}

.hero-immersif .breadcrumb {
  color: rgba(251, 250, 248, 0.76);
  margin-bottom: 16px;
}

.hero-immersif .breadcrumb-active { color: var(--sale); }

.hero-immersif .eyebrow { color: var(--brun-clair); margin-bottom: 12px; }

.hero-immersif h1 {
  color: var(--sale);
  max-width: 16ch;
  margin-bottom: 12px;
}

@media (min-width: 1024px) {
  .hero-immersif .breadcrumb { margin-bottom: 28px; }
  .hero-immersif .eyebrow { margin-bottom: 16px; }
  .hero-immersif h1 { margin-bottom: 20px; }
}

.hero-immersif .lede {
  color: rgba(251, 250, 248, 0.86);
  max-width: 56ch;
  margin-bottom: 20px;
}

.hero-immersif-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 640px) {
  .hero-immersif-actions { flex-direction: row; gap: 16px; }
}

/* Ancre de défilement */
.hero-ancre {
  position: absolute;
  left: 50%;
  bottom: 20px;
  z-index: 3;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(251, 250, 248, 0.7);
}

.hero-ancre::before {
  content: '';
  width: 1px;
  height: 26px;
  background: linear-gradient(180deg, rgba(251, 250, 248, 0), rgba(251, 250, 248, 0.6));
}

.hero-ancre svg { width: 16px; height: 10px; }

@media (max-width: 767px) { .hero-ancre { display: none; } }

/* En-tête compact — /contact/ uniquement. Cette page sert, elle ne séduit pas. */
.hero-compact {
  background-color: var(--calce);
  color: var(--inchiostro);
  padding: var(--sp-hero) 0;
  min-height: 0;
  max-height: 30vh;
}


/* --------------------------------------------------------------------------
   2. BULLE DE SERVICE — remplace .equipement-grid et les listes à puces
   -------------------------------------------------------------------------- */

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 640px)  { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }

/* Le rayon de 10 px des boutons est levé ici, et ici seulement, pour les
   cartes de service. La levée est systématique : toutes les cartes de service
   du site, sur toutes les pages, ou aucune. */
.service-card {
  background-color: var(--sale);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-btn);
  padding: 26px 22px;
  transition: border-color var(--dur-medium) ease;
  /* Pas d'ombre. */
}

@media (min-width: 1024px) { .service-card { padding: 32px 28px; } }

.service-card:hover,
.service-card:focus-within { border-color: var(--theme-accent); }

.service-bulle {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--theme-accent);
  margin-bottom: 18px;
}

.service-bulle svg { width: 36px; height: 36px; }

@media (min-width: 1024px) {
  .service-bulle { width: 96px; height: 96px; margin-bottom: 22px; }
  .service-bulle svg { width: 40px; height: 40px; }
}

.service-card h3,
.service-card h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: 1.25;
  margin-bottom: 8px;
}

.service-card p {
  font-size: var(--text-md);
  color: var(--text-muted);
  margin-bottom: 16px;
}

.service-pied {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--border-light);
  padding-top: 14px;
}

.service-statut {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oliva);
}

.service-prix {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Variante fond sombre — utilisée pour le groupe « Suite Riposo » sur
   /le-lieu/. L'accent bascule sur le brun clair : même teinte, seule valeur
   qui tienne le contraste sur l'encre. Pas de seconde couleur. */
.bg-inchiostro .service-card,
.services-sombre .service-card {
  background-color: rgba(251, 250, 248, 0.04);
  border-color: var(--border-dark);
}

.bg-inchiostro .service-card:hover,
.services-sombre .service-card:hover { border-color: var(--brun-clair); }

.bg-inchiostro .service-bulle,
.services-sombre .service-bulle {
  border-color: var(--border-dark);
  color: var(--brun-clair);
}

.bg-inchiostro .service-card h3,
.bg-inchiostro .service-card h4,
.services-sombre .service-card h3,
.services-sombre .service-card h4 { color: var(--sale); }

.bg-inchiostro .service-card p,
.services-sombre .service-card p { color: var(--text-muted-dark); }

.bg-inchiostro .service-pied,
.services-sombre .service-pied { border-top-color: var(--border-dark); }

.bg-inchiostro .service-statut,
.services-sombre .service-statut { color: var(--brun-clair); }

.bg-inchiostro .service-prix,
.services-sombre .service-prix { color: var(--sale); }


/* --------------------------------------------------------------------------
   3. CARTE D'OCCASION — déclinaison compacte du sélecteur d'intention.
      Le sélecteur d'accueil n'est pas touché.
   -------------------------------------------------------------------------- */

.occasions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 1023px) {
  .occasions-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    padding-bottom: 12px;
    -webkit-overflow-scrolling: touch;
  }
  .occasions-grid > .occasion-card { flex: 0 0 68%; scroll-snap-align: start; }
}

.occasion-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-btn);
  overflow: hidden;
  background-color: var(--inchiostro);
  text-decoration: none;
}

.occasion-card img,
.occasion-card video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.75) brightness(0.9);
  transition: transform var(--dur-signature) var(--ease-standard);
}

/* Au survol : le fond se rapproche de 3 %. Rien d'autre ne bouge. */
@media (min-width: 1024px) {
  .occasion-card:hover img,
  .occasion-card:hover video { transform: scale(1.03); }
}

.occasion-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 28, 25, 0.08) 0%, rgba(23, 28, 25, 0.82) 100%);
}

.occasion-contenu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 22px 20px;
}

@media (min-width: 1024px) { .occasion-contenu { padding: 28px 24px; } }

.occasion-titre {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 2.2vw, var(--text-2xl));
  line-height: 1.1;
  color: var(--sale);
  margin-bottom: 10px;
}

.occasion-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brun-clair);
}


/* --------------------------------------------------------------------------
   4. GALERIE SANS LÉGENDE — mosaïque de projection
      Utilisée sur /le-lieu/, les pages d'occasion et la nuitée.
   -------------------------------------------------------------------------- */

.galerie-mosaique {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 1024px) {
  .galerie-mosaique { grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
}

.galerie-mosaique img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}

.galerie-mosaique .large { grid-column: span 2; }
.galerie-mosaique .large img { aspect-ratio: 16 / 9; }

/* Les légendes sautent : on regarde, on ne lit pas encore. Le lieu n'est
   nommé qu'une fois, dans la section équipements. */
.galerie-mosaique figcaption { display: none; }


/* --------------------------------------------------------------------------
   5. LIGNE D'EXTRA — levier de panier sur les pages d'occasion
   -------------------------------------------------------------------------- */

.extras-liste {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.extra-ligne {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-btn);
  padding: 16px 18px;
}

@media (min-width: 1024px) { .extra-ligne { padding: 18px 20px; } }

.extra-ligne > span:first-child { flex: 1; min-width: 0; }

.extra-nom {
  display: block;
  font-size: var(--text-md);
  font-weight: 500;
  line-height: 1.4;
}

.extra-detail {
  display: block;
  font-size: var(--text-base);
  color: var(--text-muted);
  line-height: 1.4;
}

.extra-prix {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   6. CARTE DE FORMULE RECOMMANDÉE
   -------------------------------------------------------------------------- */

.formule-reco {
  border: 1px solid var(--theme-accent);
  border-radius: var(--radius-btn);
  background-color: var(--sale);
  padding: 28px 24px;
}

@media (min-width: 1024px) { .formule-reco { padding: 40px 36px; } }

.formule-reco-nom {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.1;
  margin-bottom: 4px;
}

.formule-reco-duree {
  display: block;
  font-size: var(--text-md);
  color: var(--text-muted);
}

.formule-reco-prix {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-variant-numeric: tabular-nums;
}

.formule-reco-inclus {
  list-style: none;
  margin: 20px 0 28px;
  padding: 20px 0 0;
  border-top: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: var(--text-md);
}


/* --------------------------------------------------------------------------
   7. BLOC DE CONTACT EN TROIS COLONNES — /contact/, sous l'en-tête compact
   -------------------------------------------------------------------------- */

.contact-triptyque {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background-color: var(--border-light);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
}

@media (min-width: 768px) {
  .contact-triptyque { grid-template-columns: repeat(3, 1fr); }
}

.contact-colonne {
  background-color: var(--sale);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 1024px) { .contact-colonne { padding: 36px 32px; } }

.contact-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oliva);
}

/* Le téléphone en gros : c'est la première action de la page. */
.contact-tel {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.15;
  color: var(--theme-accent);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.contact-tel:hover { color: var(--theme-accent-hover); }

/* Formulaire et carte à parts égales : la carte cesse d'occuper la pleine
   largeur, et le formulaire remonte d'un écran. */
.contact-duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}

@media (min-width: 1024px) {
  .contact-duo { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* Bandeau de repère d'arrivée, en bas de page */
.contact-bandeau img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--radius);
}

@media (min-width: 1024px) { .contact-bandeau img { height: 300px; } }


/* --------------------------------------------------------------------------
   8. CADRE DE REPÉRAGE — média à commander, jamais une image d'ambiance
      générique. Reprend .media-placeholder existant, en 16:9 par défaut.
   -------------------------------------------------------------------------- */

.repere { aspect-ratio: 16 / 9; }


/* --------------------------------------------------------------------------
   9. MOUVEMENT
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .occasion-card img,
  .occasion-card video { transition: none; }
  .occasion-card:hover img,
  .occasion-card:hover video { transform: none; }
}

/* Icônes de service — sprite SVG collé après <body>, cf. livraison/icones/. */
.service-icone {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 1024px) {
  .service-icone { width: 40px; height: 40px; }
}

/* Correction mesurée sur /spa-privatif/le-lieu/ : le surtitre en brun clair
   tient 4,9:1 sur l'encre pleine, mais retombe à 1,89:1 sur le voile d'une
   affiche claire — le titre, lui, tient 6,4:1. Dans un en-tête immersif, le
   surtitre et le fil d'Ariane passent donc au blanc de sel. L'accent reste
   porté par les boutons, qui ont leur propre fond. */
.hero-immersif .eyebrow,
.hero-immersif .eyebrow-light {
  color: var(--sale);
  opacity: 0.92;
}

/* Sur fond clair, le statut est en olive : un label discret, jamais l'accent.
   La variante sombre le passait au brun clair, à 4,38:1 sur la carte — sous
   les 4,5:1 exigés pour un texte de 12 px. Il reprend ici son rôle neutre,
   avec le jeton prévu pour le texte secondaire sur fond sombre. */
.bg-inchiostro .service-statut,
.services-sombre .service-statut {
  color: var(--text-muted-dark);
}

/* --------------------------------------------------------------------------
   MÉDIA CLIENT — séquences tournées au téléphone, 640 px de large au plus.
   Elles ne peuvent pas tenir un bandeau : cadrées en portrait et plafonnées,
   elles restent nettes et gardent leur registre — quelqu'un, pas un décor.
   -------------------------------------------------------------------------- */

.media-client {
  position: relative;
  border-radius: var(--radius-btn);
  overflow: hidden;
  background-color: var(--calce);
  max-width: 360px;
}

.media-client video,
.media-client img {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  filter: saturate(0.85);
}

.media-client figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 32px 18px 14px;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--sale);
  background: linear-gradient(180deg, rgba(23, 28, 25, 0), rgba(23, 28, 25, 0.78));
}

@media (min-width: 1024px) {
  .media-client { max-width: 340px; margin-left: auto; }
  .split-layout > .media-client { align-self: center; }
}

/* Cartes des deux formules de nuitée : contenus inégaux, boutons alignés.
   La carte s'étire en colonne et pousse son bouton en pied — les deux
   « Réserver » tombent sur la même ligne quelle que soit la longueur des
   listes au-dessus. */
.carte-nuitee {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border-radius: var(--radius);
}

.carte-nuitee > a.btn {
  margin-top: auto;
  align-self: stretch;
}

/* --------------------------------------------------------------------------
   LISTE D'INCLUS — les « features » d'une formule.
   Remplace les ✓ tapés en texte : une pastille au trait porte la coche, le
   libellé respire, et le tout tient l'alignement sur deux lignes.
   -------------------------------------------------------------------------- */

.liste-inclus {
  list-style: none;
  margin: 24px 0 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.liste-inclus li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--inchiostro);
}

.liste-inclus li::before {
  content: '';
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border: 1px solid var(--border-medium);
  border-radius: 50%;
  background-color: var(--sale);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6' fill='none' stroke='%23694117' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
}

/* Sur fond sombre, la coche passe au brun clair et la pastille s'éteint. */
.section-sombre .liste-inclus li,
.bg-inchiostro .liste-inclus li { color: var(--sale); }

.section-sombre .liste-inclus li::before,
.bg-inchiostro .liste-inclus li::before {
  border-color: var(--border-dark);
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6' fill='none' stroke='%23C0772A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Le montant « inline » est blanc parce qu'il est né dans la section sombre
   de l'accueil. Posé dans un encadré tarifaire — fond chaux — il devenait
   invisible : dans ce contexte, il reprend l'encre. */
.encadre-tarifs .prix-inline-montant,
.bg-calce .encadre-tarifs .prix-inline-montant,
.bg-sale .prix-inline-montant {
  color: var(--inchiostro);
}

/* Variante courte de l'en-tête immersif — la page contact sert avant de
   séduire : 40vh suffisent à poser le lieu sans repousser le téléphone. */
.hero-immersif--court { height: 40vh; min-height: 340px; }
@media (min-width: 1024px) { .hero-immersif--court { height: 42vh; min-height: 380px; max-height: 480px; } }