/* =========================================================================
   Belle Étoile Fitness — feuille de styles unique
   Charte relevée sur belleetoilefitness.com :
   or #d8b14d · crème #fdfaf0 · encre #171414 · bordeaux #661717
   Titres Abril Fatface · textes Alike · UI Montserrat / Inter
   ========================================================================= */

:root {
  --gold: #d8b14d;
  /* Or lisible sur fond clair : #d8b14d ne donne que 1,95:1 sur la crème,
     très en dessous du seuil RGAA. Ces deux variantes gardent la teinte
     dorée en atteignant 4,8:1 (texte courant) et 3,9:1 (grands titres). */
  --gold-on-light: #8a6a12;
  --gold-on-light-lg: #9a7826;
  --cream: #fdfaf0;
  --ink: #171414;
  --bordeaux: #661717;
  --burgundy: #6b1426;

  --grad-dark: linear-gradient(135deg, #141313 0%, #2e0e0e 100%);
  --grad-darker: linear-gradient(135deg, #0a0a0a 0%, #30120f 100%);
  --grad-deep: linear-gradient(142deg, #080707 0%, #2e100b 100%);

  --font-display: "Abril Fatface", Georgia, "Times New Roman", serif;
  --font-body: "Alike", Georgia, "Times New Roman", serif;
  --font-ui: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-alt: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --container: 1224px;
  --header-h: 140px;
  --bar-h: 50px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 16px; line-height: 1.3; font-weight: 400; }

p { margin: 0 0 16px; }

ul { margin: 0 0 16px; padding-left: 22px; }

li { margin-bottom: 8px; }

strong { font-weight: 700; }

.gold { color: var(--gold); }
.cream { color: var(--cream); }

/* Texte réservé aux lecteurs d'écran (mentions « nouvelle fenêtre », etc.) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--gold);
  color: #222;
  padding: 12px 20px;
  font-family: var(--font-ui);
}
.skip-link:focus { left: 8px; top: 8px; }

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

/* ---------------------------------------------------------------- bandeau */

.promo-bar {
  background: var(--gold);
  color: #222;
  font-family: var(--font-ui);
  font-size: 18px;
  min-height: var(--bar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6px 16px;
}
.promo-bar s { margin-right: 6px; }

/* ---------------------------------------------------------------- en-tête */

.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--ink);
}

.site-header__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 16px;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 64px;
}

.site-header__logo { flex: 0 0 auto; }
.site-header__logo img { width: 140px; height: auto; }

.site-nav { margin-left: auto; }

.site-nav__list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 0;
  padding: 0;
}

.site-nav__list > li { margin: 0; position: relative; }
.site-nav__item--has-sub { display: flex; align-items: center; gap: 8px; }
.site-nav__cta { display: none; }

.site-nav a {
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--cream);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav [aria-current="page"] { color: var(--gold); }

.site-nav__toggle {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.site-nav__toggle:hover { color: var(--gold); }
.site-nav__caret {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  transition: transform .2s ease;
}
.site-nav__toggle[aria-expanded="true"] .site-nav__caret { transform: rotate(180deg); }

.site-nav__sub {
  list-style: none;
  margin: 0;
  padding: 12px 0;
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 240px;
  background: #383030;
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  display: none;
}
/* Le sous-menu flotte 14 px sous l'onglet : sans passerelle, la souris quitte
   la zone de survol en traversant ce vide et le menu se referme avant d'être
   atteignable. Ce pont invisible fait partie du sous-menu, donc du <li> parent :
   le survol reste actif pendant la descente. */
.site-nav__sub::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 14px;
}

.site-nav__sub li { margin: 0; }
.site-nav__sub a { display: block; padding: 10px 20px; font-size: 17px; }
.site-nav__item--has-sub:hover .site-nav__sub,
.site-nav__item--has-sub:focus-within .site-nav__sub,
.site-nav__sub.is-open { display: block; }

.header-cta { flex: 0 0 auto; }

.burger {
  display: none;
  margin-left: auto;
  width: 46px;
  height: 46px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 10px;
}
.burger span {
  display: block;
  height: 2px;
  background: var(--cream);
  margin: 5px 0;
  transition: transform .25s ease, opacity .25s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------------- boutons */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: normal;
  padding: 16px 40px;
  border: 2px solid var(--gold);
  border-radius: 8px;
  color: var(--gold);
  background: rgba(252, 250, 240, 0);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover,
.btn:focus-visible {
  background: var(--gold);
  color: var(--cream);
  border-color: var(--cream);
}

.btn--ghost {
  font-family: var(--font-alt);
  font-weight: 500;
  border-width: 1px;
  border-color: #fff;
  border-radius: 28px;
  color: #fff;
  background: rgba(255, 255, 255, 0);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--gold);
  color: #fff;
  border-color: #fff;
}

/* Bouton « Planning » posé sur la carte sombre d'une activité. Le contraste
   du doré sur crème passait déjà (6,66:1), mais en serif 15 px maigre à côté
   d'un bouton blanc sur fond sombre, il se lisait comme désactivé. Même
   famille et même graisse que .btn--ghost voisin, teinte assombrie : 8,9:1. */
.btn--planning {
  border-radius: 30px;
  background: rgba(252, 250, 240, .96);
  color: #5a4409;
  border-color: #5a4409;
  font-family: var(--font-alt);
  font-weight: 600;
}
.btn--planning:hover,
.btn--planning:focus-visible {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--ink);
}

.btn--dark { color: var(--ink); border-color: var(--ink); }
.btn--dark:hover,
.btn--dark:focus-visible { background: var(--gold); color: var(--cream); border-color: var(--gold); }

/* --------------------------------------------------------------- sections */

.section { padding: 80px 0; }
section[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
.section--tight { padding: 56px 0; }
.section--dark { background: var(--grad-dark); }
.section--darker { background: var(--grad-darker); }
.section--deep { background: var(--grad-deep); }
.section--flat { background: var(--ink); }
.section--cream { background: var(--cream); color: var(--ink); }
.section--white { background: #fafafa; color: var(--ink); }

/* Sur fond clair, tout ce qui utilise --gold bascule sur la variante
   contrastée ; les filets restent dorés, ce sont des éléments décoratifs. */
.section--cream,
.section--white { --gold: var(--gold-on-light); }

.container {
  width: min(100% - 32px, var(--container));
  margin: 0 auto;
}

.section-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(32px, 4.4vw, 56px);
  color: var(--gold);
  margin-bottom: 24px;
}
.section-title--plain { font-style: normal; }
.section-title--cream { color: var(--cream); }
.section--cream .section-title,
.section--white .section-title { color: var(--gold-on-light-lg); }

.section-lead {
  font-size: clamp(18px, 2vw, 24px);
  max-width: 78ch;
  margin-bottom: 32px;
}

.center { text-align: center; }
.center .section-lead { margin-left: auto; margin-right: auto; }

.rule {
  height: 4px;
  background: var(--gold);
  border: 0;
  margin: 0 0 32px;
}
.rule--bordeaux { background: var(--bordeaux); }
.section--cream .rule,
.section--white .rule { background: #d8b14d; }
@media (max-width: 767px) { .rule { display: none; } }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}
.actions--center { justify-content: center; }

.note {
  font-size: 16px;
  opacity: .85;
}

/* ------------------------------------------------------------------ héros */

.hero {
  position: relative;
  /* Plein écran, sous l'en-tête collant. « svh » et non « vh » : sur mobile,
     vh se calcule barre d'adresse masquée, ce qui rognerait le bas de la
     vidéo tant qu'elle est affichée. La ligne en vh sert de repli aux
     navigateurs qui ignorent svh. */
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: flex;
  align-items: center;
  text-align: center;
  overflow: hidden;
  background: var(--bordeaux);
}
.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Le voile sombre servait à rendre le texte lisible par-dessus la vidéo.
   Sans texte, il n'a plus à masquer quoi que ce soit : il ne reste qu'un
   soupçon, pour raccorder la vidéo aux fonds sombres du reste du site. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .2);
}
.hero .container { position: relative; z-index: 1; }

.page-hero {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  text-align: center;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .6);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(36px, 5.4vw, 64px);
  color: var(--gold);
  margin-bottom: 16px;
}
.page-hero__sub { font-size: clamp(18px, 2vw, 24px); color: var(--cream); }

/* ------------------------------------------------------------------ blocs */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.split--wide-left { grid-template-columns: 1.1fr .9fr; }
.split--wide-right { grid-template-columns: .9fr 1.1fr; }
.split__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }

.grid {
  display: grid;
  gap: 24px;
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.feature__title {
  font-family: var(--font-body);
  font-size: 24px;
  color: var(--gold);
  margin-bottom: 8px;
}
.feature__title--cream { color: var(--cream); }
.feature p { margin-bottom: 0; }

.media-card img {
  width: 100%;
  aspect-ratio: 20 / 14;
  object-fit: cover;
  border-radius: 20px;
  margin-bottom: 20px;
}
.media-card__title {
  font-family: var(--font-body);
  font-size: 26px;
  color: var(--gold);
  margin-bottom: 8px;
}

.icon-feature {
  display: grid;
  grid-template-columns: 91px 1fr;
  gap: 20px;
  align-items: start;
}
.icon-feature img { width: 91px; height: auto; }

.zone img {
  width: 100%;
  aspect-ratio: 400 / 344;
  object-fit: cover;
  border-radius: 20px;
}
.zone__title {
  font-family: var(--font-body);
  font-size: 26px;
  color: var(--gold);
  margin: 24px 0 8px;
}
.zone__list { font-style: italic; opacity: .9; }

.coach {
  text-align: center;
}
.coach img {
  width: 100%;
  aspect-ratio: 400 / 485;
  object-fit: cover;
  border-radius: 20px;
  margin-bottom: 24px;
}
.coach__name {
  font-family: var(--font-display);
  font-size: 40px;
  color: var(--gold);
  margin-bottom: 4px;
}
.coach__role { font-size: 20px; margin-bottom: 12px; }
.coach__quote { font-style: italic; }

/* Les deux coachs, séparés par un filet doré. La disposition vivait en style
   inline sur la page — donc plus forte que toute media query : les portraits
   restaient côte à côte et écrasés sur mobile, avec en prime la colonne du
   séparateur devenue vide. En classe, elle redevient adaptable. */
.coaches {
  grid-template-columns: 1fr 4px 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 767px) {
  /* Un coach par ligne : portrait puis texte, puis le suivant. Le filet est
     masqué juste en dessous, il ne laisse donc pas de trou. */
  .coaches { grid-template-columns: 1fr; gap: 48px; }
}

.vsep {
  width: 4px;
  background: var(--gold);
  border: 0;
  margin: 0 auto;
  align-self: stretch;
}
@media (max-width: 767px) { .vsep { display: none; } }

/* ------------------------------------------------ estimateur d'abonnement */

.pricing { max-width: 1100px; margin: 0 auto; }

.pricing fieldset { border: 0; padding: 0; margin: 0 0 32px; }

.pricing legend {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 16px;
  padding: 0;
}
.pricing legend span {
  display: block;
  font-weight: 400;
  font-size: 15px;
  opacity: .75;
  margin-top: 4px;
}

/* Choix de la formule : contrôle segmenté, l'option active est pleine.
   Remplace l'ancien interrupteur, dont l'état actif n'était pas lisible. */
.segmented {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 6px;
  border: 1px solid rgba(216, 177, 77, .45);
  border-radius: 999px;
  width: fit-content;
  margin: 0 auto;
  max-width: 100%;
}
/* Chaque paire input + label est isolée : sans ancêtre positionné, le radio
   masqué se placerait en haut de page et emporterait le focus avec lui. */
.segmented__item { position: relative; display: block; }

.segmented input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.segmented label {
  display: block;
  padding: 12px 24px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--cream);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.segmented label:hover { background: rgba(216, 177, 77, .18); }
.segmented input:checked + label {
  background: var(--gold);
  color: #171414;
}
.segmented input:focus-visible + label {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.pricing__hint {
  text-align: center;
  font-family: var(--font-ui);
  font-size: 15px;
  opacity: .8;
  margin: 16px 0 0;
}

/* Cartes d'activité */
.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

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

.service__toggle {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: 15px;
}
.service__toggle:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

.service__media {
  position: relative;
  display: block;
  width: 100%;
  height: 340px;
  border-radius: 15px;
  overflow: hidden;
  border: 3px solid rgba(253, 250, 240, .28);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.service__toggle:hover .service__media {
  border-color: rgba(216, 177, 77, .75);
  transform: translateY(-4px);
}
.service__media img { width: 100%; height: 100%; object-fit: cover; }
.service__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(23, 20, 20, .45);
  transition: background-color .2s ease;
}

.service__title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 88%;
  font-family: var(--font-ui);
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .8);
}

/* État de sélection : pastille + libellé + cadre, jamais la couleur seule. */
.service__check {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: rgba(23, 20, 20, .55);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.service__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 16px;
  border: 2px solid rgba(253, 250, 240, .4);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--cream);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.service.is-selected .service__media {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(216, 177, 77, .28);
}
.service.is-selected .service__media::after { background: rgba(23, 20, 20, .2); }
.service.is-selected .service__check {
  background: var(--gold);
  border-color: var(--gold);
  color: #171414;
}
.service.is-selected .service__badge {
  background: var(--gold);
  border-color: var(--gold);
  color: #171414;
}

.service__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.service__actions .btn { flex: 1 1 140px; padding: 12px 20px; font-size: 15px; }

/* Récapitulatif : ce qui est sélectionné et ce que ça coûte, toujours visible */
.pricing__recap {
  position: sticky;
  bottom: 12px;
  /* Les titres et les pastilles « + » des cartes sont en z-index 2. Sans
     valeur ici, le panneau collant reste à « auto » et passe dessous : son
     texte se retrouve masqué par « Bike » ou « Cours Collectifs » dès qu'il
     chevauche les cartes. On reste sous l'en-tête collant (90). */
  z-index: 10;
  margin-top: 32px;
  padding: 24px;
  border: 2px solid rgba(216, 177, 77, .5);
  border-radius: 16px;
  background: rgba(23, 20, 20, .92);
  backdrop-filter: blur(8px);
  text-align: center;
}

.pricing__empty {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 16px;
  opacity: .85;
}

.pricing__chips {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.pricing__chips li {
  margin: 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--gold);
  color: #171414;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
}

/* Paliers tarifaires : le prix dépend du NOMBRE d'activités, on le montre. */
.pricing__tiers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 20px;
}
.pricing__tier {
  padding: 8px 16px;
  border: 1px solid rgba(253, 250, 240, .28);
  border-radius: 10px;
  font-family: var(--font-ui);
  font-size: 14px;
  opacity: .7;
}
.pricing__tier[data-active="true"] {
  border-color: var(--gold);
  background: rgba(216, 177, 77, .16);
  opacity: 1;
  font-weight: 700;
}

.total-price {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 600;
}
.total-price strong {
  display: inline-block;
  font-size: 40px;
  line-height: 1.1;
  color: var(--gold);
}
.total-price .total-price__unit { font-size: 15px; font-weight: 400; opacity: .8; }

/* ------------------------------------------------------------ témoignages */

.quote { text-align: center; max-width: 900px; margin: 0 auto; }
.quote__stars { color: var(--gold); font-size: 24px; letter-spacing: 4px; }
.quote__text { font-size: clamp(20px, 2.2vw, 26px); font-style: italic; }
.quote__author { font-family: var(--font-ui); font-weight: 600; }
.quote img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  margin: 24px auto 12px;
}

/* -------------------------------------------------------------- accordéon */

.faq { border-top: 1px solid rgba(23, 20, 20, .15); }
.faq__item { border-bottom: 1px solid rgba(23, 20, 20, .15); }
.faq__q {
  width: 100%;
  background: none;
  border: 0;
  padding: 22px 40px 22px 0;
  text-align: left;
  font-family: var(--font-body);
  font-size: 20px;
  color: inherit;
  cursor: pointer;
  position: relative;
}
.faq__q::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 26px;
  color: var(--gold);
}
.faq__q[aria-expanded="true"]::after { content: "–"; }
.faq__a { padding: 0 0 22px; }
.faq__a[hidden] { display: none; }

/* --------------------------------------------------------------- contact  */

.contact-line {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.contact-line dt { color: var(--gold); }
.contact-line dd { margin: 0; }

.form { display: grid; gap: 16px; }
.form__row { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.form label { display: block; font-size: 14px; margin-bottom: 6px; font-family: var(--font-ui); }
.form input,
.form textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(23, 20, 20, .25);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}
.form textarea { min-height: 140px; resize: vertical; }
.form__status { font-family: var(--font-ui); font-size: 15px; }
.form__status--error { color: #b3261e; }

/* Champ leurre anti-spam : sorti du flux et de la tabulation, sans display:none
   ni visibility:hidden — un robot ignore ces deux propriétés, pas la position. */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form button[disabled] { opacity: .6; cursor: progress; }

.map iframe,
.map {
  width: 100%;
  min-height: 504px;
  border: 0;
  border-radius: 20px;
}

/* ---------------------------------------------------------------- juridique */

.legal { max-width: 900px; }
.legal h2 {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold);
  font-size: clamp(28px, 3.4vw, 40px);
  margin-top: 56px;
}
.legal h3 {
  font-family: var(--font-body);
  font-size: 24px;
  color: var(--gold);
  margin-top: 32px;
}
.legal p, .legal li { font-size: 17px; }

/* ------------------------------------------------------------------ pied  */

.site-footer {
  background: var(--ink);
  padding: 64px 0 32px;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}
.site-footer__logo { width: 204px; margin-bottom: 24px; }
.site-footer__tagline { font-size: 16px; }
.site-footer h2 {
  font-family: var(--font-body);
  font-size: 22px;
  color: var(--cream);
  font-weight: 700;
  margin-bottom: 16px;
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--gold); }
/* Un lien noyé dans un paragraphe doit rester repérable sans la couleur. */
.site-footer__copy a { text-decoration: underline; }
.site-footer__hours p { font-size: 16px; margin-bottom: 12px; }
.site-footer__hours u { text-decoration: underline; }
.site-footer__socials {
  display: flex;
  gap: 32px;
  margin-top: 24px;
}
.site-footer__socials a { color: var(--cream); transition: color .2s ease; }
.site-footer__socials a:hover { color: var(--gold); }
.site-footer__socials svg { width: 24px; height: 24px; display: block; }
.site-footer__bottom {
  text-align: center;
  margin-top: 48px;
  font-size: 16px;
}
.site-footer__bottom a { color: var(--cream); }
.site-footer__legal { margin-bottom: 12px; }
.site-footer__copy { color: var(--gold); }

/* ------------------------------------------------------------- modale promo */

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: rgba(12, 9, 9, .72);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .modal {
    background: rgba(12, 9, 9, .58);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    backdrop-filter: blur(16px) saturate(130%);
  }
}
.modal.is-open { opacity: 1; visibility: visible; }

.modal__box {
  position: relative;
  width: 100%;
  max-width: 520px;
  padding: 48px 40px 40px;
  border: 2px solid var(--gold);
  border-radius: 22px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(216, 177, 77, .22) 0%, rgba(216, 177, 77, 0) 60%),
    linear-gradient(150deg, rgba(30, 24, 22, .96) 0%, rgba(52, 18, 14, .96) 100%);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6), 0 0 0 1px rgba(216, 177, 77, .25) inset;
  color: var(--cream);
  text-align: center;
  overflow: hidden;
  transform: translateY(24px) scale(.94);
  transition: transform .4s cubic-bezier(.2, .9, .3, 1.2);
}
.modal.is-open .modal__box { transform: none; }

/* Reflet qui balaie la carte à l'ouverture */
.modal__box::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 55%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
.modal.is-open .modal__box::before { animation: modal-shine 1.5s ease .5s 1; }
@keyframes modal-shine { to { left: 115%; } }

.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: rgba(253, 250, 240, .1);
  border: 1px solid rgba(253, 250, 240, .35);
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  color: var(--cream);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.modal__close:hover,
.modal__close:focus-visible { background: var(--gold); color: #171414; }

.modal__badge {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--burgundy);
  color: var(--gold);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.modal__box h2 {
  margin: 22px 0 8px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(28px, 5vw, 38px);
  color: var(--gold);
}

.modal__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 18px;
  margin: 24px 0 8px;
}
.modal__old {
  font-family: var(--font-ui);
  font-size: 30px;
  font-weight: 600;
  color: rgba(253, 250, 240, .55);
  text-decoration: line-through;
  text-decoration-thickness: 3px;
}
.modal__new {
  font-family: var(--font-ui);
  font-size: clamp(56px, 12vw, 76px);
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
  text-shadow: 0 0 28px rgba(216, 177, 77, .5);
}

.modal__text {
  margin: 0 0 8px;
  font-family: var(--font-ui);
  font-size: 17px;
}
.modal__deadline {
  margin: 0 0 12px;
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--gold);
  font-weight: 600;
}

/* Condition de l'offre : lisible, pas une mention en bas de page. */
.modal__terms {
  margin: 0 auto 28px;
  padding: 10px 16px;
  max-width: 34ch;
  border: 1px solid rgba(216, 177, 77, .45);
  border-radius: 10px;
  background: rgba(216, 177, 77, .1);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.45;
  color: #f0eadd;
}

.modal__cta {
  display: inline-block;
  width: 100%;
  padding: 18px 28px;
  border: 0;
  border-radius: 12px;
  background: var(--gold);
  color: #171414;
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.modal__cta:hover,
.modal__cta:focus-visible { background: #eac35d; transform: translateY(-2px); }

.modal__dismiss {
  display: inline-block;
  margin-top: 16px;
  background: none;
  border: 0;
  padding: 8px;
  color: rgba(253, 250, 240, .75);
  font-family: var(--font-ui);
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}
.modal__dismiss:hover, .modal__dismiss:focus-visible { color: var(--cream); }

/* --------------------------------------------------------- bandeau cookies */

.cookie-bar {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 150;
  display: none;
  padding: 24px;
  border: 1px solid rgba(216, 177, 77, .5);
  border-radius: 16px;
  background: rgba(20, 17, 17, .97);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
  color: var(--cream);
}
@supports (backdrop-filter: blur(1px)) {
  .cookie-bar { background: rgba(20, 17, 17, .9); backdrop-filter: blur(10px); }
}
.cookie-bar.is-open { display: block; }

.cookie-bar__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}
.cookie-bar__text { flex: 1 1 360px; margin: 0; font-family: var(--font-ui); font-size: 15px; }
.cookie-bar__text a { color: var(--gold); }
.cookie-bar__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cookie-bar .btn,
.cookie-panel .btn { padding: 12px 26px; font-family: var(--font-ui); font-size: 15px; }
.cookie-bar .btn--accept,
.cookie-panel .btn--accept { background: var(--gold); color: #171414; border-color: var(--gold); font-weight: 600; }
.cookie-bar .btn--accept:hover, .cookie-bar .btn--accept:focus-visible,
.cookie-panel .btn--accept:hover, .cookie-panel .btn--accept:focus-visible { background: #eac35d; color: #171414; }

/* Troisième action (« Personnaliser », « Enregistrer ») : lisible mais en
   retrait, pour que refuser reste aussi visible qu'accepter (CNIL). */
.btn--quiet {
  border-color: rgba(253, 250, 240, .45);
  color: var(--cream);
}
.btn--quiet:hover,
.btn--quiet:focus-visible { background: rgba(253, 250, 240, .12); color: var(--cream); border-color: var(--cream); }

/* ------------------------------------------- panneau de gestion des cookies */

.cookie-panel {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: rgba(12, 9, 9, .72);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .cookie-panel {
    background: rgba(12, 9, 9, .58);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    backdrop-filter: blur(16px) saturate(130%);
  }
}
.cookie-panel.is-open { opacity: 1; visibility: visible; }

.cookie-panel__box {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 680px;
  max-height: calc(100vh - 48px);
  border: 1px solid rgba(216, 177, 77, .5);
  border-radius: 18px;
  background: linear-gradient(150deg, rgba(30, 24, 22, .98) 0%, rgba(46, 18, 16, .98) 100%);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6);
  color: var(--cream);
  overflow: hidden;
  transform: translateY(18px);
  transition: transform .3s cubic-bezier(.2, .9, .3, 1.1);
}
.cookie-panel.is-open .cookie-panel__box { transform: none; }

.cookie-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(253, 250, 240, .14);
}
.cookie-panel__title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 19px;
  font-weight: 600;
}
.cookie-panel__close {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: rgba(253, 250, 240, .1);
  border: 1px solid rgba(253, 250, 240, .35);
  border-radius: 10px;
  font-size: 18px;
  line-height: 1;
  color: var(--cream);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.cookie-panel__close:hover,
.cookie-panel__close:focus-visible { background: var(--gold); color: #171414; }

.cookie-panel__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 22px 24px;
}
.cookie-panel__intro {
  margin: 0 0 20px;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(253, 250, 240, .82);
}

.cookie-panel__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 24px;
  border-top: 1px solid rgba(253, 250, 240, .14);
  background: rgba(0, 0, 0, .22);
}
.cookie-panel__foot .btn { flex: 1 1 auto; }

/* ---------------------------------------------- finalités (accordéon) */

.cookie-cat__list { margin: 0; padding: 0; list-style: none; }
.cookie-cat {
  margin-bottom: 10px;
  border: 1px solid rgba(253, 250, 240, .16);
  border-radius: 12px;
  background: rgba(253, 250, 240, .05);
}
.cookie-cat:last-child { margin-bottom: 0; }

.cookie-cat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 16px 6px 6px;
}
.cookie-cat__toggle {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 10px;
  background: none;
  border: 0;
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  color: var(--cream);
  cursor: pointer;
}
.cookie-cat__toggle:hover .cookie-cat__name,
.cookie-cat__toggle:focus-visible .cookie-cat__name { color: var(--gold); }

.cookie-cat__chevron {
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
.cookie-cat__toggle[aria-expanded="true"] .cookie-cat__chevron {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.cookie-cat__always {
  flex: none;
  font-family: var(--font-ui);
  font-size: 13px;
  color: rgba(253, 250, 240, .6);
}

.cookie-cat__detail {
  padding: 0 16px 18px 42px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(253, 250, 240, .8);
}
.cookie-cat__detail p { margin: 0 0 14px; }
.cookie-cat__host { margin-bottom: 0; font-size: 13px; color: rgba(253, 250, 240, .6); }

.cookie-table {
  width: 100%;
  margin-bottom: 14px;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;
}
.cookie-table th,
.cookie-table td {
  padding: 8px 10px;
  border: 1px solid rgba(253, 250, 240, .14);
  vertical-align: top;
}
.cookie-table th { font-weight: 600; color: var(--cream); background: rgba(253, 250, 240, .06); }
.cookie-table code { font-size: 12px; color: var(--gold); word-break: break-word; }

/* ------------------------------------------------ interrupteur d'une finalité */

.switch {
  flex: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.switch__track {
  width: 52px;
  height: 30px;
  padding: 3px;
  border: 1px solid rgba(253, 250, 240, .4);
  border-radius: 999px;
  background: rgba(253, 250, 240, .12);
  transition: background-color .2s ease, border-color .2s ease;
}
.switch__track::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cream);
  transition: transform .2s ease, background-color .2s ease;
}
.switch input:checked + .switch__track {
  background: var(--gold);
  border-color: var(--gold);
}
.switch input:checked + .switch__track::before {
  transform: translateX(22px);
  background: #171414;
}
.switch input:focus-visible + .switch__track {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Sans animation si l'internaute l'a demandé (RGAA / prefers-reduced-motion) */
@media (prefers-reduced-motion: reduce) {
  .cookie-panel,
  .cookie-panel__box,
  .cookie-cat__chevron,
  .switch__track,
  .switch__track::before { transition: none; }
}

/* --------------------------------------- contenu tiers en attente d'accord */

.map__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 504px;
  padding: 32px 24px;
  border: 1px dashed rgba(23, 20, 20, .3);
  border-radius: 20px;
  background: rgba(23, 20, 20, .05);
  text-align: center;
}
.map__text {
  max-width: 40ch;
  margin: 0;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}
.map__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.map.is-loaded .map__placeholder { display: none; }

.cookie-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--cream);
  text-decoration: underline;
  cursor: pointer;
}
.cookie-link:hover, .cookie-link:focus-visible { color: var(--gold); }

/* --------------------------------------------------------------- animations */

/* Le masquage initial n'est appliqué que si le script tourne : sans JS,
   la classe « js » est absente et tout le contenu reste visible. */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ------------------------------------------------------------------- 404   */

.error-page { min-height: 60vh; display: grid; place-items: center; text-align: center; }
.error-page__code {
  font-family: var(--font-display);
  font-size: clamp(72px, 14vw, 160px);
  color: var(--gold);
  line-height: 1;
  margin-bottom: 16px;
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 1023px) {
  :root { --header-h: 111px; }

  .site-header__inner { gap: 16px; }
  .site-header__logo img { width: 111px; }
  .burger { display: block; }
  .header-cta { display: none; }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--header-h));
    background: var(--ink);
    padding: 24px 16px 64px;
    overflow-y: auto;
    display: none;
    margin-left: 0;
    box-shadow: 0 24px 40px rgba(0, 0, 0, .5);
  }
  .site-nav.is-open { display: block; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__list > li { border-bottom: 1px solid rgba(253, 250, 240, .12); }
  .site-nav a { padding: 16px 4px; font-size: 20px; }
  .site-nav__toggle { padding: 16px 4px; }
  .site-nav__sub {
    position: static;
    transform: none;
    background: none;
    box-shadow: none;
    padding: 0 0 12px 16px;
    min-width: 0;
  }
  /* En colonne, le sous-menu est collé à son onglet : la passerelle n'a plus
     lieu d'être et fausserait la hauteur du bloc. */
  .site-nav__sub::before { content: none; }
  .site-nav__item--has-sub:hover .site-nav__sub { display: none; }
  .site-nav .site-nav__sub.is-open { display: block; }
  .site-nav__cta { display: block; border-bottom: 0; }
  .site-nav__cta .btn { display: block; margin-top: 24px; }
  .site-nav__item--has-sub { flex-wrap: wrap; }
  .site-nav__item--has-sub > a { flex: 1; }
  .site-nav__item--has-sub > .site-nav__sub { flex: 1 0 100%; }
}

@media (max-width: 900px) {
  .split,
  .split--wide-left,
  .split--wide-right { grid-template-columns: 1fr; gap: 32px; }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .services { grid-template-columns: 1fr; }
  .service__media { height: 240px; }
  .form__row { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 40px; }
  .cookie-bar__actions { width: 100%; }
  .cookie-bar__actions .btn { flex: 1 1 auto; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .section { padding: 56px 0; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  /* Rien à surcharger : la hauteur du héros suit déjà celle de l'écran. */
  .page-hero { min-height: 380px; }
  .promo-bar { font-size: 16px; }
  .actions .btn { width: 100%; }
  .segmented { flex-direction: column; border-radius: 20px; width: 100%; }
  .segmented label { text-align: center; }
  .pricing__recap { padding: 20px 16px; }
  .total-price strong { font-size: 34px; }
  .modal__box { padding: 44px 22px 28px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .modal__box { transform: none; }
  .modal.is-open .modal__box::before { animation: none; }
}