/**
 * 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(--ottone);
}

.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);
  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-sante {
  background-color: var(--adriatico);
  color: var(--sale);
}

.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(--ottone);
  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(--ottone);
  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: 16px;
  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);
  }
}

.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;
  background-color: var(--calce);
  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(--ottone);
  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(--ottone);
  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: 16px;
  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: 16px;
}

.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;
  }
}

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

.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: 16px;
  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);
}

/* ==========================================================================
   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: 19px;
  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: 16px;
}

.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(--ottone);
}

.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(--ottone);
}

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

.prix-table tr.is-featured td:first-child {
  border-left: 1px solid var(--theme-accent);
}

.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;
}

.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;
}

/* Grille du pôle santé — accent adriatique */
.sante-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background-color: var(--border-light);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
}

.sante-card {
  display: block;
  background-color: var(--calce);
  padding: 32px 28px;
  border-top: 2px solid var(--adriatico);
  transition: opacity var(--dur-fast) ease;
}

.sante-card:hover { opacity: 0.88; }

/* Bulle d'image de service. Tant que la photographie n'est pas livrée, la
   bulle porte l'aplat rayé des autres emplacements manquants : elle tient sa
   place dans la grille au lieu de la faire bouger le jour de la livraison.
   Pour poser l'image, remplacer le contenu du span par
   <img src="/assets/photos/service-<slug>.webp" alt="" width="320" height="320">
   et retirer la classe --vide. */
.service-bulle {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 20px;
  background-color: var(--sale);
}

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

.service-bulle img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-bulle--vide {
  border: 1px solid var(--border-light);
  background-image: repeating-linear-gradient(
    135deg,
    var(--calce) 0 8px,
    rgba(47, 111, 115, 0.12) 8px 16px
  );
}

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

/* Variante non cliquable : même dessin, sans l'affordance de survol. */
.sante-card-statique:hover { opacity: 1; }

.sante-card h2,
.sante-card h3 { font-size: var(--text-xl); margin-bottom: 10px; }

.sante-card p {
  font-size: var(--text-base);
  color: var(--text-muted);
  margin-bottom: 18px;
}

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

.sante-link {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--adriatico);
}

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

  .mega-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--sale);
    border-top: 1px solid var(--border-light);
    /* Le filet bas marque la limite du calque. À 12 % d'opacité sur un hero en
       chaux — deux blancs cassés voisins — il était invisible, et le panneau
       donnait l'impression de trancher la page. */
    border-bottom: 1px solid var(--border-medium);
    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; }

  .mega-inner {
    display: grid;
    grid-template-columns: 1fr 1fr 320px;
    gap: 48px;
    padding-top: 40px;
    padding-bottom: 40px;
    align-items: start;
  }

  .mega-inner-2 { grid-template-columns: 1fr 320px; }

  .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-sante .mega-title { color: var(--adriatico); }

  .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-sante .mega-list a::after { background-color: var(--adriatico); }
  .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-sante .mega-feature-texte { border-top-color: var(--adriatico); }

  .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-sante .mega-feature-eyebrow { color: var(--adriatico); }

  .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 — Bodoni Moda
   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);
  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;
}