/* =========================================================
   abpilates Premium — système visuel (handoff « Maquette Lot 3 »)
   ---------------------------------------------------------
   Navy, encre, or, brume. Archivo pour toute l'interface,
   Cormorant Garamond italique pour les accents.

   Règle du design system : AUCUNE transition, AUCUNE animation.
   Les survols sont instantanés. Trois ombres seulement sont
   autorisées — le dropdown, la barre fixe mobile et le toast.
   ========================================================= */

:root {
  /* Couleurs */
  --navy:        #1C2B4A;
  --navy-deep:   #16233F;
  --ink:         #232F4B;
  --slate:       #4A5670;
  --grey:        #5E6A85;
  --disabled:    #B6BFD2;
  --foot-muted:  #8A97B5;
  --on-navy:     #C6CEE0;
  --on-photo:    #E8ECF4;
  --gold:        #A8874E;
  --gold-navy:   #C9A96A;
  --gold-light:  #DFC79A;
  --gold-pale:   #F0DDB4;
  --frost:       #EEF1F6;
  --white:       #FFFFFF;
  --hover-cell:  #FBFAF6;
  --terracotta:  #96422F;

  /* Placeholder « à fournir » */
  --todo-bg:     #FBF6EC;
  --todo-line:   #A8874E;
  --todo-text:   #8A6A34;

  /* Filets, en alpha du navy */
  --line-card:   rgba(28, 43, 74, .12);
  --line-list:   rgba(28, 43, 74, .15);
  --line-ctrl:   rgba(28, 43, 74, .2);
  --line-wait:   rgba(28, 43, 74, .25);
  --line-chip:   rgba(28, 43, 74, .3);
  --line-soft:   rgba(28, 43, 74, .1);
  --line-hair:   rgba(28, 43, 74, .08);
  --line-past:   rgba(28, 43, 74, .035);

  /* Filets sur navy */
  --onnavy-10:   rgba(255, 255, 255, .1);
  --onnavy-14:   rgba(255, 255, 255, .14);
  --onnavy-35:   rgba(255, 255, 255, .35);
  --onnavy-60:   rgba(255, 255, 255, .6);
  --onnavy-card: rgba(255, 255, 255, .06);

  /* Typographie */
  --font-sans:  Archivo, system-ui, sans-serif;
  --font-serif: 'Cormorant Garamond', Georgia, serif;

  /* Rayons */
  --r-sm:  6px;
  --r-md:  8px;
  --r-lg:  10px;
  --r-pill: 999px;

  /* Rythme : la gouttière horizontale du site entier.
     Il n'y a pas de conteneur centré à largeur maximale. */
  --pad-y:   clamp(56px, 8vw, 104px);
  --pad-x:   clamp(20px, 6vw, 96px);
  --pad-hero-y: clamp(48px, 7vw, 96px);
  --pad-widget: clamp(40px, 6vw, 88px);
  --pad-court: clamp(40px, 5vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; }

html { overflow-anchor: none; }

body {
  margin: 0;
  background: var(--white);
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body.menu-open { overflow: hidden; }

img { display: block; max-width: 100%; }

/* Un élément masqué le reste, quelle que soit la règle de display que
   son composant lui donne par ailleurs : sans cela, un `display:flex`
   d'auteur l'emporte sur le `display:none` de l'attribut hidden. */
[hidden] { display: none !important; }

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--gold); }

h1, h2, h3, h4, p, figure, blockquote, ul { margin: 0; }
ul { padding: 0; list-style: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: inherit;
}

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

.sect--sombre :focus-visible,
.bande-fin :focus-visible,
.site-header :focus-visible,
.footer :focus-visible,
.menu-mobile :focus-visible {
  outline-color: var(--gold-light);
}

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

/* ---------- Typographie ---------- */

/* Motif récurrent : Archivo 700 majuscules, puis un <em> en
   Cormorant italique qui prolonge le titre en or. */
.h-display {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.08;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-wrap: balance;
  hyphens: none;
  color: var(--ink);
}

.h-display em,
.h-hero em,
.h-page em,
.h-sub em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gold);
}

.h-hero {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.06;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-wrap: balance;
  hyphens: none;
}

.h-page {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.06;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-wrap: balance;
  hyphens: none;
  color: var(--ink);
}

.h-sub {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.1;
  text-transform: uppercase;
  text-wrap: balance;
  hyphens: none;
  color: var(--ink);
}

/* Sur fond navy, l'accent passe à l'or clair et le titre au blanc. */
.sect--sombre .h-display,
.sect--sombre .h-hero,
.sect--sombre .h-page,
.sect--sombre .h-sub,
.bande-fin .h-display { color: var(--white); }

.sect--sombre .h-display em,
.sect--sombre .h-hero em,
.sect--sombre .h-page em,
.sect--sombre .h-sub em,
.bande-fin .h-display em { color: var(--gold-light); }

.eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}

.sect--sombre .eyebrow,
.bande-fin .eyebrow { color: var(--gold-navy); }

.lead {
  font-size: 16.5px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--ink);
  text-wrap: pretty;
}

.prose {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--slate);
  text-wrap: pretty;
  max-width: 760px;
}

.prose p + p { margin-top: 12px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { border-bottom: 1px solid var(--gold); padding-bottom: 1px; font-weight: 600; }

.prose--etroit { max-width: 640px; }

.mention {
  font-size: 12px;
  color: var(--grey);
}

.quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(21px, 2.4vw, 29px);
  line-height: 1.42;
  color: var(--navy);
  text-wrap: pretty;
}

.num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 20px;
  color: var(--gold);
}

.serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
}

/* Le placeholder « à fournir » de la maquette. */
.todo {
  display: inline-block;
  background: var(--todo-bg);
  border: 1px dashed var(--todo-line);
  color: var(--todo-text);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.5;
  padding: 4px 8px;
  border-radius: 4px;
}

.todo--bloc { font-size: 12px; padding: 6px 10px; text-align: center; }

/* ---------- Sections ---------- */

.sect {
  /* flow-root, pour que la marge basse d'un enfant reste dans la
     section : sans lui, elle s'en échappe et laisse apparaître une
     bande du fond de page entre deux sections collées. */
  display: flow-root;
  padding: var(--pad-y) var(--pad-x);
  background: var(--white);
}

.sect--clair  { background: var(--frost); }
.sect--sombre { background: var(--navy); color: var(--on-navy); }
.sect--reduit { padding-block: var(--pad-court); }
.sect--ample  { padding-block: clamp(64px, 9vw, 128px); }

.sect--sombre .prose,
.sect--sombre .lead { color: var(--on-navy); }
.sect--sombre a { color: var(--white); }
.sect--sombre a:hover { color: var(--gold-light); }

.section-head { margin-bottom: 16px; }

/* Un en-tête avec un lien ou une note poussés à droite. */
.section-head--reparti {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

/* Les deux colonnes texte + image, sans media query. */
.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}

.duo--serre { gap: clamp(28px, 5vw, 72px); }
.duo--haut  { align-items: start; }

.duo__media {
  width: 100%;
  max-width: 460px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-lg);
  justify-self: center;
}

.duo__media--etroite { max-width: 440px; }
.duo__media--libre { max-width: none; aspect-ratio: auto; height: clamp(300px, 40vw, 560px); }

/* ---------- Boutons et liens ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  padding: 16px 24px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  text-align: center;
  cursor: pointer;
}

.btn--navy   { background: var(--navy); color: var(--white); }
.btn--navy:hover { background: var(--navy-deep); color: var(--white); }

.btn--light  { background: var(--white); color: var(--navy); }
.btn--light:hover { background: var(--gold-light); color: var(--navy); }

.btn--outline {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
  padding: 15px 23px;
}
.btn--outline:hover { background: var(--navy); color: var(--white); }

.btn--outline-clair {
  background: transparent;
  color: var(--white);
  border-color: var(--onnavy-60);
  padding: 15px 23px;
  white-space: nowrap;
}
.btn--outline-clair:hover { background: var(--white); color: var(--navy); }

.btn--bloc { display: block; width: 100%; }

/* Le lien souligné d'or, omniprésent. */
.lien {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 3px;
  cursor: pointer;
}
.lien:hover { color: var(--gold); }

.lien--petit { font-size: 14px; padding-bottom: 2px; }

.sect--sombre .lien,
.bande-fin .lien { color: var(--white); border-bottom-color: var(--gold-navy); }
.sect--sombre .lien:hover,
.bande-fin .lien:hover { color: var(--gold-light); }

/* La phrase « Première visite ? Séance découverte → ». */
.amorce { font-size: 14.5px; color: var(--slate); margin: 0; }
.amorce .lien { font-size: inherit; }

/* Chip d'ancre. */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }

.chip {
  border: 1px solid var(--line-chip);
  border-radius: var(--r-pill);
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
  background: transparent;
  cursor: pointer;
}
.chip:hover { border-color: var(--gold); color: var(--gold); }
.chip--blanc { background: var(--white); }

/* ---------- En-tête ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--navy);
  height: 76px;
  padding: 0 clamp(20px, 3.4vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo { line-height: 1; flex: none; color: var(--white); }
.logo:hover { color: var(--white); }
.logo__nom { font-weight: 700; font-size: 19px; letter-spacing: .02em; }
.logo__premium {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--gold-navy);
  font-size: 15px;
  margin-left: 7px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 30px);
  font-size: 14.5px;
  height: 100%;
}

.site-nav__lien {
  color: var(--on-navy);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.site-nav__lien:hover { color: var(--white); }
.site-nav__lien.est-actif { color: var(--white); border-bottom-color: var(--gold-navy); }

.site-nav__groupe { position: relative; height: 100%; display: flex; align-items: center; }
.site-nav__fleche { font-size: 10px; color: var(--gold-navy); }

.dropdown {
  position: absolute;
  top: 76px;
  left: -24px;
  width: 320px;
  background: var(--white);
  border: 1px solid var(--line-card);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: 8px;
  display: none;
  flex-direction: column;
  box-shadow: 0 12px 32px rgba(18, 28, 50, .18);
}

.site-nav__groupe:hover .dropdown,
.site-nav__groupe:focus-within .dropdown { display: flex; }

.dropdown__item { padding: 14px 16px; border-radius: var(--r-sm); display: block; }
.dropdown__item:hover { background: var(--frost); }
.dropdown__titre { margin: 0 0 3px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.dropdown__sous  { margin: 0; font-size: 12.5px; color: var(--slate); }

.site-header__actions { display: flex; align-items: center; gap: 20px; flex: none; }

.site-header__planning { font-size: 13.5px; color: var(--on-navy); white-space: nowrap; }
.site-header__planning:hover { color: var(--white); }
.site-header__planning strong {
  font-weight: 600;
  border-bottom: 1px solid var(--gold-navy);
  padding-bottom: 2px;
}

.site-header__cta { font-size: 14px; padding: 13px 18px; white-space: nowrap; }

/* En-tête compact : burger, logo centré, planning. */
.site-header--compact {
  display: none;
  height: 60px;
  padding: 0 8px 0 6px;
}

.burger {
  color: var(--white);
  font-size: 21px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}

.site-header--compact .logo__nom { font-size: 17px; }
.site-header--compact .logo__premium { font-size: 13px; margin-left: 6px; }

.site-header__planning--compact {
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  height: 44px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  flex: none;
}
.site-header__planning--compact span {
  border-bottom: 1px solid var(--gold-navy);
  padding-bottom: 2px;
}

.menu-mobile {
  position: fixed;
  inset: 60px 0 0 0;
  background: var(--navy);
  z-index: 39;
  padding: 12px 24px 24px;
  display: none;
  flex-direction: column;
  overflow: auto;
}
.menu-mobile.est-ouvert { display: flex; }

.menu-mobile__lien {
  color: var(--white);
  font-size: 20px;
  font-weight: 600;
  padding: 13px 0;
  border-bottom: 1px solid var(--onnavy-10);
  display: block;
}
.menu-mobile__lien:hover { color: var(--gold-light); }

.menu-mobile__groupe { padding: 13px 0 8px; border-bottom: 1px solid var(--onnavy-10); }
.menu-mobile__groupe > p { margin: 0 0 6px; color: var(--white); font-size: 20px; font-weight: 600; }
.menu-mobile__sous { display: flex; flex-direction: column; }
.menu-mobile__sous a {
  color: var(--on-navy);
  font-size: 15.5px;
  padding: 10px 0 10px 14px;
  border-left: 1px solid var(--gold-navy);
}
.menu-mobile__sous a:hover { color: var(--white); }

.menu-mobile__contacts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 20px 0 16px;
}
.menu-mobile__contacts a {
  border: 1px solid var(--onnavy-35);
  color: var(--white);
  border-radius: var(--r-sm);
  padding: 13px 0;
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
}
.menu-mobile__contacts a:hover { background: var(--white); color: var(--navy); }

@media (max-width: 1099.98px) {
  .site-header--complet { display: none; }
  .site-header--compact { display: flex; }
}

/* ---------- Hero photo ---------- */

.hero {
  position: relative;
  height: clamp(460px, 70vh, 680px);
  overflow: hidden;
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}

.hero__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(18, 28, 50, .9) 0%,
    rgba(18, 28, 50, .55) 55%,
    rgba(18, 28, 50, .12) 85%);
}

.hero__contenu {
  position: absolute;
  left: clamp(20px, 5vw, 64px);
  right: clamp(20px, 5vw, 64px);
  bottom: clamp(24px, 5vh, 56px);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
}

.hero__texte { max-width: 760px; min-width: min(100%, 280px); }

.hero__sur {
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(20px, 2vw, 24px);
  color: var(--gold-pale);
  text-shadow: 0 1px 12px rgba(12, 20, 38, .75), 0 0 2px rgba(12, 20, 38, .6);
}

.hero .h-hero { margin: 0 0 14px; color: var(--white); }
.hero .h-hero em { color: var(--gold-light); }

.hero__accroche {
  margin: 0;
  color: var(--on-photo);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.55;
  max-width: 560px;
  text-wrap: pretty;
}

.hero__ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 300px;
}

.hero__rappel { color: var(--white); font-size: 14px; text-align: center; }
.hero__rappel .lien { color: var(--white); border-bottom-color: var(--gold-navy); }
.hero__rappel .lien:hover { color: var(--gold-light); }

@media (max-width: 759.98px) {
  .hero { height: 400px; }
  .hero__img { object-position: center 20%; }
  .hero__ctas { display: none; }
}

/* En-tête de page simple (Planning). */
.entete-page {
  background: var(--frost);
  padding: clamp(44px, 6vw, 88px) var(--pad-x) 0;
}

.entete-page__grille {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}

/* Hero en deux colonnes, dont une pleine image (Armelle, Premium, Contact). */
.hero-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  background: var(--frost);
}

.hero-split--navy { background: var(--navy); }

.hero-split__media { position: relative; min-height: clamp(380px, 46vw, 640px); }
.hero-split__media--courte { min-height: clamp(260px, 34vw, 520px); }
.hero-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-split__media .todo { position: absolute; left: 16px; bottom: 16px; }

.hero-split__texte {
  padding: clamp(40px, 6vw, 88px) clamp(20px, 6vw, 88px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-split__texte .h-page,
.hero-split__texte .h-hero { margin-bottom: 20px; }

/* La dernière ligne du texte d'ouverture est la mention d'agrément :
   elle se détache en or, comme sur la maquette. */
.hero-split__texte .prose > p:last-child strong {
  color: var(--gold);
  font-size: 13.5px;
  font-weight: 600;
}

.fil-ariane { margin: 0 0 14px; font-size: 12.5px; color: var(--on-navy); }
.fil-ariane a { color: var(--on-navy); border-bottom: 1px solid var(--gold-navy); }
.fil-ariane a:hover { color: var(--white); }

/* ---------- Bandeau de confiance ---------- */

.confiance {
  display: flex;
  justify-content: center;
  gap: 10px clamp(16px, 4vw, 48px);
  padding: 18px clamp(20px, 4vw, 48px);
  border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px;
  color: var(--slate);
  flex-wrap: wrap;
  text-align: center;
}
.confiance strong { color: var(--ink); }

/* ---------- Cartes ---------- */

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 14px;
}

.grille--250 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.grille--270 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.grille--280 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 28px; }
.grille--290 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 16px; }
.grille--300 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.grille--360 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 14px 20px; }

.carte {
  background: var(--white);
  border: 1px solid var(--line-card);
  border-radius: var(--r-lg);
  padding: 24px;
}

a.carte, .carte--cliquable { display: block; }
a.carte:hover, .carte--cliquable:hover { border-color: var(--gold); }

/* Carte « format de cours » : titre + méta + flèche. */
.carte-format {
  padding: 24px 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.carte-format__titre { margin: 0 0 8px; font-size: 15.5px; font-weight: 700; text-transform: uppercase; color: var(--ink); }
.carte-format__meta  { margin: 0; font-size: 13px; color: var(--gold); font-weight: 600; }
.carte-format__fleche { color: var(--gold); font-size: 18px; flex: none; }

/* Carte à repère Cormorant (origines du Pilates). */
.carte-repere__num   { margin: 0 0 4px; font-family: var(--font-serif); font-style: italic; font-size: 21px; color: var(--gold); }
.carte-repere__titre { margin: 0 0 10px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink); }
.carte-repere__texte { margin: 0; font-size: 14px; line-height: 1.65; color: var(--slate); }

/* Colonne à filet haut épais (les vies d'Armelle). */
.colonne-filet { border-top: 2px solid var(--navy); padding-top: 18px; }
.colonne-filet__num   { margin: 0 0 4px; font-family: var(--font-serif); font-style: italic; font-size: 22px; color: var(--gold); }
.colonne-filet__titre { margin: 0 0 10px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink); }
.colonne-filet__texte { margin: 0 0 10px; font-size: 14.5px; line-height: 1.65; color: var(--slate); }
.colonne-filet__texte:last-child { margin-bottom: 0; }

/* ---------- Portes tarifaires ---------- */

.portes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-card);
  border: 1px solid var(--line-card);
  border-radius: var(--r-lg);
  overflow: hidden;
}

@media (max-width: 999.98px) { .portes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559.98px) { .portes { grid-template-columns: 1fr; } }

.porte { background: var(--white); padding: 22px 24px; display: block; }
.porte:hover { background: var(--hover-cell); }
.porte__libelle { margin: 0 0 6px; font-family: var(--font-serif); font-style: italic; font-size: 17px; color: var(--gold); }
.porte__titre   { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--ink); }
.porte__prix    { margin: 0; font-size: 14px; color: var(--slate); }
.porte__prix strong { font-size: 20px; color: var(--ink); }

.porte--navy { background: var(--navy); }
.porte--navy:hover { background: var(--navy-deep); }
.porte--navy .porte__libelle { color: var(--gold-light); }
.porte--navy .porte__titre   { color: var(--white); }
.porte--navy .porte__prix    { color: var(--on-navy); }
.porte--navy .porte__prix strong { color: var(--white); }

/* ---------- Galerie ---------- */

.figure { margin: 0; }
.figure img { width: 100%; height: clamp(210px, 25vw, 350px); object-fit: cover; border-radius: var(--r-lg); }
.figure--haute img { height: clamp(220px, 28vw, 440px); }

.figure figcaption {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink);
}

.figure--detaillee figcaption {
  margin-top: 14px;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.6;
  text-transform: none;
  letter-spacing: 0;
  color: var(--slate);
}
.figure--detaillee figcaption strong {
  display: block;
  color: var(--ink);
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: .04em;
  margin-bottom: 4px;
}

/* ---------- Listes numérotées ---------- */

.etapes { display: flex; flex-direction: column; border-top: 1px solid var(--line-list); }

.etape {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-list);
  font-size: 15px;
}
.etape__num   { font-family: var(--font-serif); font-style: italic; font-size: 20px; color: var(--gold); }
.etape__titre { margin: 0 0 3px; font-size: 15px; font-weight: 700; color: var(--ink); }
.etape__texte { margin: 0; font-size: 14px; line-height: 1.6; color: var(--slate); }

/* Variante fine, sans titre : les 3 points de « Ma différence ». */
.etapes--fines { border-top: 0; }
.etapes--fines .etape {
  align-items: baseline;
  padding: 13px 0;
  border-top: 1px solid var(--line-card);
  border-bottom: 0;
  color: var(--ink);
}
.etapes--fines .etape:last-child { border-bottom: 1px solid var(--line-card); }

/* Sous-blocs à filet haut (les miroirs, 5 personnes). */
.reperes { display: flex; flex-direction: column; gap: 20px; }
.repere  { border-top: 1px solid var(--line-list); padding-top: 16px; }
.repere__titre { margin: 0 0 6px; font-family: var(--font-serif); font-style: italic; font-size: 21px; color: var(--gold); }
.repere__texte { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--slate); }

/* ---------- Accordéon ---------- */

.accordeon { border-top: 1px solid var(--line-list); max-width: 880px; }
.accordeon__item { border-bottom: 1px solid var(--line-list); }

.accordeon__tete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 16px 0;
  min-height: 44px;
}
.accordeon__titre { font-size: 15px; font-weight: 600; color: var(--ink); }
.accordeon__signe { font-size: 20px; color: var(--navy); flex: none; }
.accordeon__corps { padding: 0 0 18px; }
.accordeon__corps p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--slate); max-width: 720px; }
.accordeon__item[hidden] { display: block; }
.accordeon__corps[hidden] { display: none; }

/* Variante numérotée (les exercices à la maison). */
.accordeon--numerote .accordeon__tete {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 24px;
  gap: 12px;
  padding: 18px 0;
}
.accordeon--numerote .accordeon__num { font-family: var(--font-serif); font-style: italic; font-size: 21px; color: var(--gold); }
.accordeon--numerote .accordeon__titre { font-size: 15.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.accordeon--numerote .accordeon__signe { text-align: right; }
.accordeon--numerote .accordeon__corps { padding: 0 0 22px 56px; }
.accordeon--numerote .accordeon__corps p { font-size: 14.5px; line-height: 1.7; margin-bottom: 12px; }
.accordeon__repere {
  margin: 0;
  font-size: 12px;
  color: var(--gold);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

@media (max-width: 559.98px) {
  .accordeon--numerote .accordeon__corps { padding-left: 0; }
}

/* ---------- Sélecteur d'équipement ---------- */

.equip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.equip__liste { display: flex; flex-direction: column; }

.equip__ligne {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 20px;
  gap: 12px;
  align-items: baseline;
  width: 100%;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-card);
  min-height: 44px;
}
.equip__num  { font-family: var(--font-serif); font-style: italic; font-size: 24px; color: var(--gold); }
.equip__nom  { font-size: 15.5px; font-weight: 600; color: var(--grey); }
.equip__mark { color: var(--gold); }
.equip__ligne.est-actif .equip__nom { color: var(--navy); }

.equip__vue {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--frost);
  height: clamp(260px, 30vw, 400px);
}
.equip__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.equip__photo[hidden] { display: none; }
.equip__absente {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* ---------- Encarts ---------- */

.encart {
  border: 1px solid var(--line-card);
  border-radius: var(--r-lg);
  padding: 20px 24px;
  display: flex;
  gap: 10px 24px;
  align-items: baseline;
  flex-wrap: wrap;
}
.encart__tag { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.encart__titre { font-size: 15px; font-weight: 700; color: var(--ink); }
.encart__texte { font-size: 14.5px; color: var(--slate); }

.encart-navy {
  background: var(--navy);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3.4vw, 44px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px 40px;
  flex-wrap: wrap;
}
.encart-navy__corps { max-width: 640px; min-width: min(100%, 280px); }
.encart-navy__sur   { margin: 0 0 8px; font-family: var(--font-serif); font-style: italic; font-size: 20px; color: var(--gold-light); }
.encart-navy__titre { margin: 0 0 10px; font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; color: var(--white); text-transform: uppercase; }
.encart-navy__texte { margin: 0; font-size: 15px; line-height: 1.6; color: var(--on-navy); }

/* Bandeau de conclusion centré (Armelle). */
.conclusion { text-align: center; }
.conclusion__phrase {
  margin: 0 0 6px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 28px);
  color: var(--navy);
  text-wrap: balance;
}
.conclusion__signature { margin: 0; font-size: 14px; font-weight: 600; color: var(--gold); letter-spacing: .04em; }

/* Les cinq principes, sur navy. */
.principes { text-align: center; padding-block: clamp(48px, 6vw, 80px); }
.principes__mots {
  margin: 0 0 14px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: clamp(20px, 2.8vw, 34px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.005em;
  color: var(--white);
}
.principes__mots span.sep { color: var(--gold-navy); }
.principes__suite {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(18px, 2vw, 24px);
  color: var(--gold-light);
}

/* Citation sur navy (Armelle). */
.citation-navy { max-width: 920px; }
.citation-navy__texte {
  margin: 0 0 28px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(23px, 2.8vw, 34px);
  line-height: 1.38;
  color: var(--white);
  text-wrap: pretty;
}
.citation-navy__suite {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px 40px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--on-navy);
}

/* Encart clair à coin arrondi (Mes formations). */
.encart-clair {
  background: var(--frost);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 36px);
}
.encart-clair .accordeon { border-top: 0; max-width: none; }
.encart-clair .accordeon__item { border-bottom: 0; border-top: 1px solid var(--line-list); }

.ligne-fixe { border-top: 1px solid var(--line-list); padding: 14px 0; }
.ligne-fixe__titre { margin: 0 0 2px; font-size: 15px; font-weight: 700; color: var(--ink); }
.ligne-fixe__sous  { margin: 0; font-size: 13.5px; color: var(--slate); }

/* ---------- Blocs alternés (accompagnements) ---------- */

.alternes { display: flex; flex-direction: column; gap: clamp(40px, 6vw, 80px); }

.alterne {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.alterne__media { position: relative; }
.alterne__media img { width: 100%; height: clamp(240px, 30vw, 440px); object-fit: cover; border-radius: var(--r-lg); }
.alterne__media .todo { position: absolute; left: 14px; bottom: 14px; }
.alterne__num   { margin: 0 0 6px; font-family: var(--font-serif); font-style: italic; font-size: 26px; color: var(--gold); }
.alterne__titre { margin: 0 0 10px; font-size: clamp(26px, 3vw, 40px); font-weight: 700; text-transform: uppercase; line-height: 1.08; color: var(--ink); }
.alterne__meta  { margin: 0 0 16px; font-size: 13.5px; color: var(--gold); font-weight: 600; }
.alterne__texte { margin: 0 0 22px; font-size: 16px; line-height: 1.65; color: var(--slate); }

/* L'ordre visuel s'inverse un bloc sur deux, sans changer le DOM. */
.alterne--inverse .alterne__media { order: 2; }

@media (max-width: 759.98px) {
  .alterne--inverse .alterne__media { order: 0; }
}

/* ---------- Tarifs ---------- */

.tarifs { display: flex; flex-direction: column; gap: clamp(44px, 6vw, 72px); }

.tarif-bloc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 20px 56px;
  align-items: start;
}
.tarif-bloc + .tarif-bloc {
  border-top: 1px solid var(--line-card);
  padding-top: clamp(36px, 5vw, 56px);
}
.tarif-bloc__sur   { margin: 0 0 8px; font-family: var(--font-serif); font-style: italic; font-size: 19px; color: var(--gold); }
.tarif-bloc__titre { margin: 0 0 12px; }
.tarif-bloc__texte { margin: 0; font-size: 15px; line-height: 1.65; color: var(--slate); }
.tarif-bloc__texte + .tarif-bloc__note { margin-top: 8px; }
.tarif-bloc__note  { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--navy); }

.prix-liste { font-size: 16px; border-top: 1px solid var(--line-card); }
.prix-ligne {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-card);
}
.prix-ligne strong { font-size: 20px; color: var(--ink); }
.prix-ligne .unite { color: var(--grey); font-size: 14px; font-weight: 400; }

.tableau-tarifs { font-size: 15px; }
.tableau-tarifs__ligne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 4px 24px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-card);
  align-items: baseline;
}
.tableau-tarifs__ligne strong { text-align: right; font-size: 18px; color: var(--ink); }
.tableau-tarifs__carnet { text-align: right; min-width: 110px; color: var(--slate); }
.tableau-tarifs__carnet small { font-size: 13px; }
.tableau-tarifs__entete {
  padding: 0 0 10px;
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grey);
  font-weight: 700;
}
.tableau-tarifs__entete span:nth-child(2),
.tableau-tarifs__entete span:nth-child(3) { text-align: right; }
.tableau-tarifs__entete span:nth-child(3) { min-width: 110px; }
.tableau-tarifs__format small { font-size: 13px; color: var(--grey); }

.etiquette-etape {
  margin: 0 0 10px;
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grey);
  font-weight: 700;
}

.abo-onglets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.abo-onglet {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--navy);
  border-radius: var(--r-pill);
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
}
.abo-onglet.est-actif { background: var(--navy); color: var(--white); }

.abo-table { border-top: 1px solid var(--line-card); font-size: 15px; }
.abo-table[hidden] { display: none; }
.abo-table .prix-ligne strong { font-size: 18px; }
.abo-avantages { margin: 16px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--slate); }

/* Le pavé Premium, dans la page Tarifs. */
.prem-resume {
  background: var(--navy);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3.4vw, 44px);
}
.prem-resume__tete {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px 32px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.prem-resume__niveaux {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  border-top: 1px solid var(--onnavy-14);
}
.prem-resume__niveau {
  padding: 18px 20px 18px 0;
  border-bottom: 1px solid var(--onnavy-14);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.prem-resume__nom  { margin: 0 0 3px; font-family: var(--font-serif); font-style: italic; font-size: 22px; color: var(--gold-light); }
.prem-resume__vol  { margin: 0; font-size: 13px; color: var(--on-navy); }
.prem-resume__prix { margin: 0; font-size: 14px; color: var(--on-navy); }
.prem-resume__prix strong { font-size: 20px; color: var(--white); }

/* ---------- Guide « Aidez-moi à choisir » ---------- */

/* Replié par défaut, le guide n'est plus qu'un bandeau : il lui faut
   donc de quoi se faire remarquer au milieu d'une page de prix. Le
   filet doré est la seule emphase du système visuel — celle qui
   signale ailleurs une carte survolée. */
.guide {
  background: var(--white);
  border: 1px solid var(--gold);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.guide__tete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px 24px;
  width: 100%;
  padding: clamp( 20px, 2.4vw, 28px ) clamp( 20px, 2.4vw, 28px );
  min-height: 44px;
  flex-wrap: wrap;
}
.guide__tete:hover { background: var(--hover-cell); }
.guide__titre { display: flex; gap: 4px 14px; align-items: baseline; flex-wrap: wrap; }
.guide__titre b { font-size: clamp( 17px, 1.6vw, 20px ); font-weight: 700; color: var(--ink); }
.guide__titre span { font-size: 14px; color: var(--slate); font-weight: 400; }

/* Le signe devient un vrai contrôle, au gabarit des flèches du
   planning : un « + » nu se lisait mal comme une chose à cliquer. */
.guide__signe {
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold);
  border-radius: var(--r-sm);
  font-size: 20px;
  color: var(--gold);
}
.guide__tete:hover .guide__signe { background: var(--gold); color: var(--white); }
.guide__corps { border-top: 1px solid var(--line-soft); padding: 22px; }
.guide__corps[hidden] { display: none; }

.guide__fil { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.guide__fil[hidden] { display: none; }
.guide__miette {
  background: var(--frost);
  border-radius: var(--r-pill);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.guide__reset { font-size: 13px; color: var(--slate); padding: 8px 4px; }

.guide__etape { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.guide__question { margin: 0 0 16px; font-size: clamp(19px, 2vw, 24px); font-weight: 700; color: var(--ink); }
.guide__options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 10px;
}
.guide__option {
  border: 1px solid var(--line-ctrl);
  border-radius: var(--r-md);
  padding: 16px 18px;
  width: 100%;
}
.guide__option:hover { border-color: var(--gold); }
.guide__option b { display: block; margin-bottom: 4px; font-size: 15px; font-weight: 600; }
.guide__option span { font-size: 13px; color: var(--slate); }

.guide__reco {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px 32px;
  align-items: end;
}
.guide__reco[hidden] { display: none; }
.guide__reco-titre { margin: 0 0 6px; font-size: clamp(20px, 2vw, 26px); font-weight: 700; }
.guide__reco-prix  { margin: 0 0 10px; font-size: 15px; color: var(--slate); }
.guide__reco-prix strong { font-size: 26px; color: var(--ink); }
.guide__reco-detail { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--slate); }
.guide__reco-aside { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.guide__reco-note { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--slate); }

/* ---------- Parcours Premium ---------- */

.principe {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 759.98px) {
  .principe { grid-template-columns: 1fr; }
}
.principe__plus { align-self: center; justify-self: center; font-family: var(--font-serif); font-size: 34px; color: var(--gold); }
.principe__carte { border: 1px solid var(--line-card); border-radius: var(--r-lg); padding: clamp(20px, 2.4vw, 30px); }
.principe__titre { margin: 0 0 4px; font-size: 15.5px; font-weight: 700; text-transform: uppercase; color: var(--ink); }
.principe__meta  { margin: 0 0 12px; font-size: 13px; color: var(--gold); font-weight: 600; }
.principe__texte { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--slate); }

.pastilles { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.pastille {
  width: 14px; height: 14px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--gold);
  border: 1.5px solid var(--gold);
}
.pastille--creuse { background: transparent; border-color: var(--navy); }

.niveau {
  background: var(--white);
  border: 1px solid var(--line-card);
  border-radius: var(--r-lg);
  padding: clamp(22px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
}
.niveau__nom { margin: 0 0 16px; font-family: var(--font-serif); font-style: italic; font-size: clamp(28px, 2.6vw, 34px); color: var(--gold); }
.niveau .pastilles { margin-bottom: 18px; min-height: 36px; align-content: flex-start; }
.niveau__detail { font-size: 15px; margin-bottom: 22px; }
.niveau__ligne {
  display: flex;
  justify-content: space-between;
  padding: 11px 0;
  border-top: 1px solid var(--line-card);
}
.niveau__ligne:last-child { border-bottom: 1px solid var(--line-card); }
.niveau__ligne span { color: var(--ink); }
.niveau__ligne--total span:first-child { color: var(--slate); }
.niveau__prix { margin: auto 0 0; font-size: 15px; color: var(--grey); }
.niveau__prix strong { font-size: clamp(28px, 2.6vw, 34px); color: var(--ink); }

.legende-pastilles {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 16px;
  font-size: 13px;
  color: var(--slate);
}
.legende-pastilles span { display: flex; gap: 8px; align-items: center; }
.legende-pastilles .pastille { width: 12px; height: 12px; }

/* ---------- Séances sur rendez-vous ---------- */

.seances { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 14px 20px; }

.seance {
  background: var(--white);
  border: 1px solid var(--line-card);
  border-radius: var(--r-lg);
  padding: 10px;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}
.seance:hover { border-color: var(--gold); }
.seance img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-sm); }
.seance__corps { display: flex; flex-direction: column; gap: 6px; padding-right: 8px; min-width: 0; }
.seance__titre { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--navy); text-wrap: balance; }
.seance__meta  { margin: 0; font-size: 13.5px; color: var(--slate); }
.seance__pied  { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.seance__prix  { font-size: 17px; font-weight: 700; color: var(--ink); }
.seance__cta   { font-size: 13px; font-weight: 600; color: var(--gold); }

.seances--compactes { display: flex; flex-direction: column; gap: 12px; }
.seances--compactes .seance { grid-template-columns: 96px minmax(0, 1fr); }

/* ---------- Page Séance découverte ---------- */

.decouverte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}

.decouverte__sur {
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(18px, 2vw, 22px);
  color: var(--gold);
}
.decouverte__meta { margin: 0 0 28px; font-size: 13.5px; font-weight: 600; color: var(--gold); }

.reservation {
  position: sticky;
  top: 96px;
  background: var(--white);
  border: 1px solid var(--line-card);
  border-radius: var(--r-lg);
  padding: clamp(20px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.reservation__titre {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.1;
  color: var(--navy);
}
.reservation__texte { margin: 0; font-size: 14px; line-height: 1.6; color: var(--slate); text-wrap: pretty; }
.reservation__pied {
  border-top: 1px solid var(--line-soft);
  padding-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13.5px;
}
.reservation__pied > span { color: var(--slate); }
.reservation__liens { display: flex; gap: 16px; font-weight: 600; }
.reservation__liens a { border-bottom: 1px solid var(--gold); }

.bandeau-adresse {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px 32px;
  flex-wrap: wrap;
  padding: clamp(28px, 4vw, 44px) var(--pad-x);
  border-bottom: 1px solid var(--line-hair);
  background: var(--white);
}
.bandeau-adresse__lieu { display: flex; gap: 16px; align-items: center; }
.bandeau-adresse__lieu img { width: 88px; height: 64px; object-fit: cover; border-radius: var(--r-sm); flex: none; }
.bandeau-adresse__titre { margin: 0 0 2px; font-size: 15px; font-weight: 700; color: var(--ink); }
.bandeau-adresse__horaires { margin: 0; font-size: 13.5px; color: var(--slate); }
.bandeau-adresse__liens { display: flex; gap: 20px; font-size: 14px; font-weight: 600; flex-wrap: wrap; }

/* ---------- Contact ---------- */

.contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.contact__texte { padding: clamp(40px, 6vw, 88px) var(--pad-x); }
.contact__ville { margin: 0 0 28px; font-size: 17px; color: var(--slate); }
.contact__itineraire { margin-bottom: 22px; padding: 16px 26px; }
.contact__liens { display: flex; gap: 10px 24px; flex-wrap: wrap; font-size: 15px; font-weight: 600; margin-bottom: 40px; }
.contact__liens a { border-bottom: 1px solid var(--gold); padding-bottom: 2px; }
.contact__colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 28px; }
.contact__soustitre { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.contact__horaires { font-size: 14.5px; line-height: 1.6; }
.contact__horaire { padding: 10px 0; border-top: 1px solid var(--line-card); display: flex; justify-content: space-between; gap: 12px; }
.contact__horaire:last-child { border-bottom: 1px solid var(--line-card); }
.contact__horaire--pile { display: block; }
.contact__horaire--pile b { display: block; }
.contact__horaire b { font-weight: 600; }
.contact__horaire span { color: var(--slate); }
.contact__acces { font-size: 14.5px; line-height: 1.6; color: var(--slate); }
.contact__acces p + p { margin-top: 6px; }
.contact__coordonnees { margin: 18px 0 0; font-size: 14px; line-height: 1.8; color: var(--slate); }
.contact__media {
  background: var(--frost);
  min-height: clamp(280px, 40vw, 640px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* Avec une vraie photo, le panneau se remplit : le retrait de 24 px
   n'est là que pour centrer la mention « à fournir ». */
.contact__media:has( img ),
.contact__media:has( iframe ) { padding: 0; position: relative; }
.contact__media img { width: 100%; height: 100%; object-fit: cover; }
.contact__carte { display: block; width: 100%; height: 100%; }

/* La carte Google remplit son panneau. `min-height` vient du panneau
   lui-même : une iframe sans hauteur explicite se réduirait à 150 px. */
.contact__carte-embed {
  display: block;
  width: 100%;
  height: 100%;
  min-height: clamp( 280px, 40vw, 640px );
  border: 0;
}

/* Le crédit du fond de plan, posé sur la carte : la licence
   d'OpenStreetMap impose de le montrer à côté d'elle. */
.contact__credit {
  position: absolute;
  right: 10px;
  bottom: 10px;
  margin: 0;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba( 255, 255, 255, .9 );
  font-size: 11px;
  color: var(--grey);
}
.contact__credit a { color: inherit; }
.contact__credit a:hover { color: var(--gold); }

/* ---------- Bandeau de fin ---------- */

.bande-fin { background: var(--navy); padding: var(--pad-y) var(--pad-x); }
.bande-fin .h-display { margin-bottom: 32px; }
.bande-fin__cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}
.bande-fin__carte {
  background: var(--onnavy-card);
  border: 1px solid var(--onnavy-14);
  border-radius: var(--r-lg);
  padding: clamp(22px, 2.6vw, 32px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.bande-fin__sur   { margin: 0 0 8px; font-family: var(--font-serif); font-style: italic; font-size: 22px; color: var(--gold-light); }
.bande-fin__texte { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: var(--on-navy); }
.bande-fin__carte .btn, .bande-fin__carte .lien { margin-top: auto; }
.bande-fin__adresse { margin: 24px 0 0; font-size: 14px; color: var(--on-navy); }

/* ---------- Barre fixe mobile ---------- */

.barre-mobile { display: none; }
.barre-mobile__espaceur { display: none; }

@media (max-width: 759.98px) {
  .barre-mobile {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--white);
    border-top: 1px solid var(--line-list);
    padding: 11px 14px;
    box-shadow: 0 -6px 20px rgba(28, 43, 74, .12);
    z-index: 38;
  }
  .barre-mobile__espaceur { display: block; height: 76px; }
  .barre-mobile .btn { padding: 15px 0; }
  .barre-mobile--duo { display: grid; grid-template-columns: 1.4fr 1fr; gap: 9px; }
  .barre-mobile--duo .btn--outline { padding: 14px 0; }
  body.menu-open .barre-mobile { display: none; }
}

/* ---------- Pied de page ---------- */

.footer {
  background: var(--navy-deep);
  padding: clamp(44px, 6vw, 72px) var(--pad-x) 0;
}

.footer__haut {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 32px;
  padding-bottom: 44px;
}

.footer__marque p { margin: 12px 0 0; font-size: 13.5px; color: var(--foot-muted); line-height: 1.6; }
.footer__marque .logo__premium { font-size: 14px; }

.footer__titre {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--foot-muted);
}

.footer__liens { display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; }
.footer__liens a { color: var(--on-navy); }
.footer__liens a:hover { color: var(--white); }

.footer__contact { margin: 0; font-size: 13.5px; line-height: 1.9; color: var(--on-navy); }
.footer__contact a { color: var(--on-navy); }
.footer__contact a:hover { color: var(--white); }

.footer__bas {
  border-top: 1px solid var(--onnavy-10);
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11.5px;
  color: var(--foot-muted);
  flex-wrap: wrap;
  align-items: center;
}

.footer__legal { display: flex; gap: 16px; flex-wrap: wrap; }
.footer__legal a { color: var(--foot-muted); }
.footer__legal a:hover { color: var(--white); }

.footer__admin { color: var(--navy-deep); font-size: 11.5px; }
.footer__admin:hover { color: var(--foot-muted); }

/* ---------- Pages légales ---------- */

.page-legale .sect { padding-block: clamp(32px, 4vw, 48px); }
.page-legale .sect:first-child { padding-top: clamp(48px, 7vw, 96px); }
.page-legale .sect:last-child  { padding-bottom: clamp(56px, 8vw, 104px); }
.page-legale .prose { max-width: 760px; }
.page-legale .h-sub { font-size: clamp(18px, 1.8vw, 22px); }

/* ---------- Emplacement réservé d'un module externe ---------- */

.eversports-slot {
  border: 1px dashed var(--line-chip);
  border-radius: var(--r-lg);
  padding: clamp(32px, 5vw, 64px) var(--pad-x);
  text-align: center;
  background: var(--frost);
}
.eversports-slot p { margin: 0 0 6px; font-size: 15.5px; font-weight: 600; color: var(--navy); }
.eversports-slot span { font-size: 13px; color: var(--grey); }

.bloc-integration__widget { min-height: 420px; }
.bloc-integration__note { margin: 14px 0 0; font-size: 12px; color: var(--grey); }

/* ---------- Rythme vertical ----------
   Les marges vivent sur les classes utilitaires, pas sur les balises :
   un bloc se compose en empilant ces briques, dans n'importe quel
   ordre, sans que l'espacement dépende de leur voisinage. */

.section-head    { margin: 0 0 16px; }
.lead            { margin: 0 0 24px; }
.bloc-intro      { margin: 0 0 28px; }
.bloc-cta        { margin-top: 26px; }
.bloc-apres      { margin-top: 22px; }
.bloc-mention    { margin-top: 18px; }
.chips           { margin-top: 4px; }
.etapes          { margin: 8px 0 26px; }
.reperes         { margin-top: 8px; }
.quote           { margin: 8px 0 18px; }
.portes          { margin-bottom: 26px; }
.guide           { margin-top: 16px; }
.tarif-bloc .bloc-cta { margin-top: 20px; }
.prix-liste + .bloc-cta { margin-top: 20px; }

.signature__nom  { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--ink); }
.signature__role { margin: 0 0 24px; font-size: 13.5px; color: var(--slate); }

.sect--hero   { padding-block: var(--pad-hero-y); }
.sect--widget { padding-block: var(--pad-widget); }
.sect--suite  { padding-top: 0; }

/* Une section « à la suite » se colle à la précédente : celle-ci perd
   donc aussi sa gouttière basse, et les deux se lisent comme un seul
   bloc — c'est le cas du hero, des portes et du guide sur Tarifs. */
.sect:has( + .sect--suite ) { padding-bottom: 0; }

.hero-colonnes__lead { margin: 18px 0 26px; }

.bloc-centre { text-align: center; }
.bloc-centre .prose,
.bloc-centre .lead { margin-inline: auto; }

.accordeon__chapo {
  margin: 0 0 22px;
  font-size: 19px;
  color: var(--slate);
}

.galerie__conclusion {
  margin: 24px 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(18px, 2vw, 22px);
  color: var(--navy);
}

.decouverte__texte { margin: 0 0 16px; font-size: 16px; }
.decouverte__apres { margin-top: 24px; font-size: 14px; line-height: 1.65; }

.guide__panneau[hidden] { display: none; }