/* ==========================================================
   AMARTE STUDIO — Design System (charte 2026)
   ----------------------------------------------------------
   SOMMAIRE
   01. Polices
   02. Tokens (couleurs, espace, typo, rayons, ombres, durées)
   03. Reset & bases
   04. Utilitaires typographiques (labels, titres, textes)
   05. Révélations au défilement
   06. En-tête & navigation
   07. Boutons
   08. Formulaires
   09. Héros (photo, page, cours) & bandeau photo
   10. Accueil
   11. Première fois
   12. Cours
   13. Calendrier
   14. Tarifs
   15. Location
   16. Contact
   17. Corpo / B2B
   18. À propos
   19. Embed Glofox
   20. Pied de page
   21. Responsive
   22. Accessibilité (mouvement réduit)
   ========================================================== */


/* ═══ 01 · POLICES ═══════════════════════════════════════ */
/* Romie — © 2022-2025 Margot Lévêque. Tous droits réservés.
   Licence commerciale achetée auprès de Claude Type (claudetype.com)
   par Amarte Studio SNC — reçu n° CL5142 du 21 août 2026.
   Romie Regular + Romie Medium, licence « S » (1-5 personnes).
   Police propriétaire : ne pas redistribuer, ne pas réutiliser hors
   des sites d'Amarte Studio. Détails : public/fonts/LICENSE.txt        */
@font-face {
  font-family: 'Romie';
  src: url('../public/fonts/Romie-Regular.woff2') format('woff2'),
       url('../public/fonts/Romie-Regular.woff')  format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Romie';
  src: url('../public/fonts/Romie-Medium.woff2') format('woff2'),
       url('../public/fonts/Romie-Medium.woff')  format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


/* ═══ 02 · TOKENS ════════════════════════════════════════ */
:root {
  /* — Fonds clairs — */
  --bg:        #f7f3ee;   /* ivoire  */
  --bg-warm:   #f0eae1;   /* crème   */
  --bg-soft:   #ede5db;   /* lin     */
  --white:     #ffffff;
  --warm:      #efe4d4;   /* beige chaud — témoignages */
  --reco-bg:   #ece2d3;   /* carte recommandée */

  /* — Profonds — */
  --text:      #2b1b1b;   /* brun nuit — titres */
  --text-body: #3f3740;   /* prune — corps       */
  --text-muted:#695f58;   /* prune grisé — secondaire (AA sur tous les fonds clairs) */

  /* — Accent sable doré — */
  --accent:      #a8957e; /* DÉCORATIF uniquement (filets, points, puces) */
  --accent-dk:   #8a7563; /* surfaces, survols */
  --accent-text: #74604b; /* TEXTE et fonds de badge — contraste AA garanti */

  /* — Bleu marine (nav, CTA primaire) — */
  --accent-blue:    #22353f;
  --accent-blue-dk: #182832;

  /* — Traits — */
  --border:     rgba(168,149,126,0.22);  /* filet discret        */
  --border-md:  rgba(168,149,126,0.40);  /* trait structurel     */
  --line-soft:  #e1d8cc;

  /* — Avatars témoignages (tous ≥ 5:1 avec du blanc) — */
  --av-a: #22353f;
  --av-b: #3f3740;
  --av-c: #74604b;
  --av-d: #4a5d66;

  /* — Typographie — */
  --font-serif: 'Romie', Georgia, 'Times New Roman', serif;
  --font-sans:  'Nunito', system-ui, -apple-system, sans-serif;

  --fs-display: clamp(2.6rem, 6.5vw, 5.5rem);  /* h1 des héros            */
  --fs-h2-lg:   clamp(2.15rem, 5vw, 3.5rem);   /* h2 « moment » (3 max/page) */
  --fs-h2:      clamp(1.9rem, 4.2vw, 3rem);    /* h2 standard             */
  --fs-h3:      clamp(1.25rem, 2.2vw, 1.5rem); /* h3 de carte             */
  --fs-h3-lg:   clamp(1.4rem, 2.6vw, 1.75rem); /* h3 mis en avant         */
  --fs-lead:    clamp(1rem, 1.4vw, 1.125rem);  /* chapô                   */
  --fs-body:    1rem;                          /* texte courant — 16px    */
  --fs-sm:      0.9375rem;                     /* secondaire — 15px       */
  --fs-xs:      0.8125rem;                     /* méta — 13px             */
  --fs-label:   0.75rem;                       /* sur-titre capitales     */

  /* — Espace — */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 2.5rem;  --sp-8: 3rem;
  --sp-9: 4rem;    --sp-10: 5rem;

  --sec-v:  clamp(3.5rem, 8vw, 7rem);          /* rythme vertical de section */
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --max-w:  1240px;
  --header-h: 5rem;

  /* — Rayons — */
  --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px;

  /* — Ombres — */
  --shadow-sm: 0 1px 2px rgba(43,27,27,0.04), 0 2px 8px rgba(43,27,27,0.05);
  --shadow-md: 0 4px 10px rgba(43,27,27,0.05), 0 12px 30px -12px rgba(34,53,63,0.22);
  --shadow-lg: 0 8px 20px rgba(43,27,27,0.06), 0 28px 60px -28px rgba(34,53,63,0.32);

  /* — Durées & courbes — */
  --dur-1: 150ms; --dur-2: 220ms; --dur-3: 320ms; --dur-4: 520ms;
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}


/* ═══ 03 · RESET & BASES ═════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  color-scheme: light;   /* le site est clair : évite l'inversion des champs natifs en mode sombre système */
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  background: var(--bg);
  color: var(--text-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Verrouillage du défilement quand le menu est ouvert (compatible iOS).
   `--sbw` (posé par main.js) compense la largeur de la barre de défilement
   qui disparaît : sans cela, la page saute latéralement à l'ouverture. */
body.menu-open { position: fixed; width: 100%; overflow: hidden; padding-right: var(--sbw, 0px); }

/* L'attribut `hidden` doit toujours l'emporter. Sans ce doublement de
   sélecteur, un composant qui déclare `display: flex` reste visible malgré
   l'attribut (c'est ce qui cassait les filtres de la page Cours). */
[hidden][hidden] { display: none; }

img, svg { max-width: 100%; display: block; }
a, button, label, summary, [role="button"] { touch-action: manipulation; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
input, select, textarea { font-family: var(--font-sans); font-size: inherit; }
ul, ol { list-style: none; }

/* Décalage d'ancre sous l'en-tête fixe */
[id] { scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }

/* Focus visible — jamais supprimé.
   L'anneau est marine par défaut : c'est la seule couleur lisible sur les
   fonds clairs, qui composent l'essentiel du site. Il ne passe au blanc
   qu'à l'intérieur des blocs à fond sombre, listés un par un. */
:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
#hero :focus-visible,
#change :focus-visible,
#cta-banner :focus-visible,
.page-hero :focus-visible,
.cours-hero :focus-visible,
.assur :focus-visible,
.defi-final :focus-visible,
.skip-link:focus-visible { outline-color: var(--white); }
/* En-tête posé sur un héros sombre, tant qu'on n'a pas défilé. */
body[data-nav-invert]:not(.menu-open) #nav-header:not(.is-scrolled) :focus-visible { outline-color: var(--white); }

/* Lien d'évitement — premier élément focusable de chaque page */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: 1200;
  transform: translateY(-150%);
  background: var(--accent-blue);
  color: var(--white);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

/* Pas d'italique sur le site : l'emphase passe par la couleur accent. */
em, i, address { font-style: normal; }

/* Évite les débordements horizontaux sur les grands titres */
h1, h2, h3, h4 { overflow-wrap: break-word; text-wrap: balance; }
p { text-wrap: pretty; }


/* ═══ 04 · UTILITAIRES TYPOGRAPHIQUES ════════════════════ */

/* Réservé aux lecteurs d'écran : présent dans le document, invisible à l'œil.
   Sert notamment aux annonces des filtres de la page Cours. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Sur-titre de section — un seul composant pour tout le site */
.section-label {
  display: block;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: var(--sp-4);
}
.section-label--on-dark { color: #d9c4a8; }

/* Titres */
.page-hero-title, .cours-hero-title, .hero-title, .defi-hero-title {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.04;
}
.section-title {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.1;
  color: var(--text);
}
.section-title--lg { font-size: var(--fs-h2-lg); }
.section-title em { color: var(--accent-text); }
.section-title--on-dark { color: var(--white); }
.section-title--on-dark em { color: #e9d8be; }

/* Chapô de section */
.section-lead {
  font-size: var(--fs-lead);
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 52ch;
  margin-top: var(--sp-4);
}

/* Deux chapôs qui se suivent : le second est un paragraphe à part
   entière, pas la suite du premier — il lui faut son propre blanc. */
.section-lead + .section-lead { margin-top: var(--sp-5); }

/* Bloc de texte client scindé à sa ponctuation d'origine. Aucun mot
   n'est touché : seul le blanc l'est. Les morceaux respirent entre eux
   sans s'éloigner autant que du bloc qui suit — d'où le conteneur, qui
   garde la marge basse de la classe d'origine. */
.prose-split { display: flex; flex-direction: column; gap: var(--sp-4); }
.prose-split > p { margin: 0; }

/* En-tête de section (label + titre + chapô) */
.section-head { margin-bottom: clamp(2.25rem, 5vw, 3.25rem); max-width: 56rem; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .section-lead { margin-inline: auto; }

/* Conteneur standard */
.wrap { max-width: var(--max-w); margin-inline: auto; }


/* ═══ 05 · RÉVÉLATIONS AU DÉFILEMENT ═════════════════════ */
/* Principe : le contenu est VISIBLE par défaut. Il n'est masqué que si
   le navigateur confirme pouvoir l'animer (classe .js-reveal posée sur
   <html> par un test en tête de page). Si le JavaScript échoue ou si
   l'utilisateur préfère moins d'animations, rien ne disparaît jamais. */
.js-reveal .gs-reveal,
.js-reveal .gs-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out);
}
.js-reveal .gs-reveal.is-in,
.js-reveal .gs-stagger > .is-in { opacity: 1; transform: none; }

/* Images : léger recadrage qui se détend à l'apparition */
.gs-img-reveal { overflow: hidden; }
.js-reveal .gs-img-inner { transform: scale(1.05); transition: transform 900ms var(--ease-out); }
.js-reveal .gs-img-reveal.is-in .gs-img-inner,
.js-reveal .gs-img-inner.is-in { transform: none; }

/* Entrée du héros d'accueil — une seule séquence, à l'ouverture */
.js-reveal #hero-img { animation: hero-img-in 1400ms var(--ease-out) both; }
.js-reveal .hero-line { animation: hero-line-in 900ms var(--ease-out) both; }
.js-reveal .hero-line-wrap:nth-child(2) .hero-line { animation-delay: 110ms; }
.js-reveal .hero-line-wrap:nth-child(3) .hero-line { animation-delay: 220ms; }
.js-reveal .hero-sub  { animation: hero-fade-in 700ms var(--ease-out) 420ms both; }
.js-reveal .hero-btns { animation: hero-fade-in 700ms var(--ease-out) 540ms both; }

@keyframes hero-img-in  { from { transform: scale(1.06); opacity: 0.6; } to { transform: none; opacity: 1; } }
@keyframes hero-line-in { from { transform: translateY(105%); } to { transform: none; } }
@keyframes hero-fade-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }


/* ═══ 06 · EN-TÊTE & NAVIGATION ══════════════════════════ */
#nav-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  padding-inline: calc(var(--gutter) + env(safe-area-inset-left)) calc(var(--gutter) + env(safe-area-inset-right));
  background: rgba(247,243,238,0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-3) var(--ease-out),
              border-color var(--dur-3) var(--ease-out);
}

/* Pages à héros sombre (marine ou photo) : voile foncé + contenu clair.
   Le dégradé garantit la lisibilité quelle que soit l'image dessous.
   `:not(.menu-open)` : dès que le panneau ivoire s'ouvre, l'en-tête
   repasse en contenu foncé — les deux états ne se disputent jamais. */
body[data-nav-invert]:not(.menu-open) #nav-header:not(.is-scrolled) {
  background: linear-gradient(to bottom, rgba(34,53,63,0.55) 0%, rgba(34,53,63,0.12) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom-color: transparent;
}

/* État défilé — identique sur les 9 pages */
#nav-header.is-scrolled {
  background: rgba(247,243,238,0.94);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--border-md);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-w);
  margin-inline: auto;
  /* La hauteur de l'en-tête EST --header-h, à la bordure près : c'est la
     seule source de vérité. Tout ce qui se cale dessous (barre de filtres
     collante, ancres, panneau de menu) tombe alors au pixel près. Un
     padding libre ferait diverger la hauteur réelle de la variable et
     rouvrirait le liseré entre l'en-tête et la barre de filtres. */
  min-height: calc(var(--header-h) - 1px);
  gap: var(--sp-5);
}

.nav-logo { display: flex; align-items: center; min-height: 49px; padding-right: var(--sp-2); }
/* Le logo est un SVG integre au HTML (voir l'en-tete des pages), pas une
   image chargee : un fichier image reste en cache navigateur meme quand la
   page change, ce qui faisait reapparaitre l'ancien trace rogne. Integre,
   il suit toujours la page.
   49 px et non 44 : le viewBox porte 18 unites de fond perdu de chaque
   cote, sans quoi le trace touchait ses quatre bords et les extremites
   fines (pointe du « A », bouts des arcs, petit point du haut) se
   faisaient raboter a l'antialiasing. Les 5 px compensent ce fond perdu :
   le dessin reste affiche a ~44 px, taille inchangee.
   La couleur passe par currentColor : une seule copie du trace sert les
   en-tetes clairs et sombres. */
.nav-logo-mark { height: 49px; width: auto; display: block; color: #344234; }
/* #344234 en dur : c'est le vert de la marque, present dans le fichier
   d'origine. Aucune variable du theme ne porte cette teinte — --text est
   un brun (#2b1b1b) et donnerait une autre couleur au logo. */

.nav-side--right { display: flex; align-items: center; gap: var(--sp-5); }

/* ── Navigation d'ordinateur ──
   À partir de 1025 px, les pages se rejoignent directement depuis la
   barre : plus de bouton à ouvrir pour changer de page. En dessous,
   ce bloc disparaît et le panneau latéral reprend seul la main —
   les deux ne coexistent jamais (voir § 21). */
.nav-desktop { display: none; }

@media (min-width: 1025px) {
  .nav-desktop {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 1.8vw, 1.9rem);
  }
}

.nav-desktop-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-body);
  white-space: nowrap;
  position: relative;
  transition: color var(--dur-2);
}
/* Le soulignement se dessine sous le libellé sans jamais déplacer la
   rangée : un `border-bottom` ferait sauter la barre d'un pixel. */
.nav-desktop-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.85rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-2) var(--ease-out);
}
.nav-desktop-link:hover { color: var(--text); }
.nav-desktop-link:hover::after { transform: scaleX(1); }
.nav-desktop-link[aria-current="page"],
.nav-desktop-toggle[data-section-current] { color: var(--accent-text); }
.nav-desktop-link[aria-current="page"]::after { transform: scaleX(1); }

/* Sous-menu « Le studio » — les trois pages qui parlent du lieu plutôt
   que de la pratique. Regroupées, elles n'allongent pas la barre. */
.nav-desktop-group { position: relative; }
.nav-desktop-caret {
  width: 0.42rem;
  height: 0.42rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur-2) var(--ease-out);
}
.nav-desktop-toggle[aria-expanded="true"] .nav-desktop-caret { transform: translateY(1px) rotate(-135deg); }

.nav-desktop-drop {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 50%;
  transform: translateX(-50%);
  min-width: 13rem;
  display: flex;
  flex-direction: column;
  padding: var(--sp-2);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: 0 18px 40px -22px rgba(34,53,63,0.45);
}
.nav-desktop-sub {
  padding: 0.6rem 0.75rem;
  border-radius: var(--r-xs);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-body);
  white-space: nowrap;
  transition: background var(--dur-2), color var(--dur-2);
}
.nav-desktop-sub:hover { background: var(--bg-soft); color: var(--text); }
.nav-desktop-sub[aria-current="page"] { color: var(--accent-text); }


.nav-login {
  /* inline-flex + min-height : la zone cliquable fait la taille d'un doigt
     sans que le lien change d'aspect (la rangée est déjà centrée). */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-body);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: color var(--dur-2), border-color var(--dur-2);
}
.nav-login:hover { color: var(--text); border-bottom-color: var(--accent-dk); }

/* Bouton menu */
.burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--r-sm);
  z-index: 1101;
}
.burger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transform-origin: center;
  transition: transform var(--dur-3) var(--ease-out),
              opacity var(--dur-1) var(--ease-out),
              background var(--dur-3) var(--ease-out);
}
.burger[aria-expanded="true"] .b1 { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] .b2 { opacity: 0; transform: scaleX(0); }
.burger[aria-expanded="true"] .b3 { transform: translateY(-6.5px) rotate(-45deg); }

/* Au-delà de 1024 px, toutes les pages sont dans la barre : le bouton du
   panneau n'a plus rien à ouvrir. */
@media (min-width: 1025px) {
  .burger { display: none; }
}

/* Contenu clair au-dessus d'un héros sombre */
body[data-nav-invert]:not(.menu-open) #nav-header:not(.is-scrolled) .nav-login { color: rgba(255,255,255,0.88); }
body[data-nav-invert]:not(.menu-open) #nav-header:not(.is-scrolled) .nav-login:hover { color: var(--white); border-bottom-color: rgba(255,255,255,0.7); }
body[data-nav-invert]:not(.menu-open) #nav-header:not(.is-scrolled) .burger span { background: var(--white); }
body[data-nav-invert]:not(.menu-open) #nav-header:not(.is-scrolled) .nav-desktop-link { color: rgba(255,255,255,0.88); }
body[data-nav-invert]:not(.menu-open) #nav-header:not(.is-scrolled) .nav-desktop-link:hover { color: var(--white); }
body[data-nav-invert]:not(.menu-open) #nav-header:not(.is-scrolled) .nav-desktop-link[aria-current="page"],
body[data-nav-invert]:not(.menu-open) #nav-header:not(.is-scrolled) .nav-desktop-toggle[data-section-current] { color: var(--white); }
body[data-nav-invert]:not(.menu-open) #nav-header:not(.is-scrolled) .nav-logo-mark { color: var(--white); }

/* Menu ouvert : l'en-tête s'efface et ne garde que le bouton de fermeture.
   Le logo et « Se connecter » disparaissent — ils chevaucheraient le panneau
   sur mobile, et ils sont repris à l'intérieur du panneau. */
body.menu-open #nav-header {
  z-index: 1200;          /* au-dessus du panneau : le bouton reste cliquable */
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  padding-right: calc(var(--gutter) + env(safe-area-inset-right) + var(--sbw, 0px));
}
.nav-logo, .nav-desktop, .nav-login { transition: opacity var(--dur-2) var(--ease-out); }
body.menu-open .nav-logo,
body.menu-open .nav-desktop,
body.menu-open .nav-login { opacity: 0; visibility: hidden; }

/* ── Panneau de navigation ── */
/* Le panneau s'ouvre en demi-largeur, jamais en plein écran : on voit la
   page continuer derrière, voilée par un fond cliquable qui referme. */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 1090;
  background: rgba(34,53,63,0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3);
}
body.menu-open .nav-scrim {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-3) var(--ease-out), visibility 0s;
}

#nav-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  width: 50%;
  min-width: 420px;
  max-width: 760px;
  background: var(--bg);
  box-shadow: -24px 0 60px -30px rgba(34,53,63,0.5);
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + var(--sp-6)) calc(var(--gutter) + env(safe-area-inset-right)) calc(var(--sp-8) + env(safe-area-inset-bottom)) var(--gutter);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur-4) var(--ease-out), visibility 0s linear var(--dur-4);
}
#nav-menu.is-open {
  transform: none;
  visibility: visible;
  transition: transform var(--dur-4) var(--ease-out), visibility 0s;
}

.nav-menu-inner {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.nav-menu-links { display: flex; flex-direction: column; }
.nav-menu-link {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 1.05rem 0;
  min-height: 56px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.nav-menu-label-wrap {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 4.4vw, 1.9rem);
  font-weight: 400;
  line-height: 1.1;
  flex: 1;
  /* transform plutôt que padding : aucun recalcul de mise en page */
  transition: transform var(--dur-3) var(--ease-out), color var(--dur-2);
}
.nav-menu-arrow {
  color: var(--border-md);
  font-size: 1.1rem;
  transition: transform var(--dur-2) var(--ease-out), color var(--dur-2);
}
.nav-menu-link:hover .nav-menu-label-wrap { transform: translateX(6px); }
.nav-menu-link:hover .nav-menu-arrow { transform: translateX(4px); color: var(--accent-dk); }
.nav-menu-link[aria-current="page"] .nav-menu-label-wrap { color: var(--accent-text); }
.nav-menu-link[aria-current="page"] .nav-menu-arrow { color: var(--accent-text); }

/* Navigation secondaire — pages « studio » */
.nav-menu-secondary { margin-top: var(--sp-7); }
.nav-menu-secondary-head {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: var(--sp-3);
}
.nav-menu-sub-links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.nav-menu-sub-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-body);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-2), border-color var(--dur-2);
}
.nav-menu-sub-link:hover { color: var(--accent-blue); border-bottom-color: var(--accent-dk); }
.nav-menu-sub-link[aria-current="page"] { color: var(--accent-text); border-bottom-color: var(--accent-text); }

.nav-menu-bottom {
  margin-top: auto;
  padding-top: var(--sp-7);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
}
.nav-menu-contact-row { display: flex; flex-direction: column; gap: var(--sp-1); }
.nav-menu-contact-row a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-body);
  transition: color var(--dur-2);
}
.nav-menu-contact-row a:hover { color: var(--accent-blue); }


/* ═══ 07 · BOUTONS ═══════════════════════════════════════ */
/* Quatre variantes, pas une de plus.
   .btn--primary   fond marine, texte blanc      → action principale
   .btn--secondary contour marine                → action secondaire
   .btn--on-dark   fond blanc, texte marine      → principale sur fond foncé
   .btn--ghost     contour blanc                 → secondaire sur fond foncé */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 0.85rem 2rem;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-align: center;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  transition: background var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out),
              color var(--dur-2) var(--ease-out),
              transform var(--dur-2) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--accent-blue); color: var(--white); }
.btn--primary:hover { background: var(--accent-blue-dk); }

.btn--secondary { background: transparent; color: var(--accent-blue); border-color: var(--accent-blue); }
.btn--secondary:hover { background: var(--accent-blue); color: var(--white); }

.btn--on-dark { background: var(--white); color: var(--accent-blue); }
.btn--on-dark:hover { background: var(--bg-warm); }

.btn--ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.55); }
.btn--ghost:hover { background: rgba(255,255,255,0.12); border-color: var(--white); }

.btn--block { width: 100%; }
.btn--lg { padding: 1rem 2.5rem; min-height: 52px; }

/* Lien fléché discret */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent-text);
  white-space: nowrap;
  transition: gap var(--dur-2) var(--ease-out), color var(--dur-2);
}
.link-arrow:hover { gap: 0.7rem; color: var(--accent-blue); }


/* ═══ 08 · FORMULAIRES ═══════════════════════════════════ */

/* Piège à robots : le champ doit rester dans le DOM et être
   soumis, mais invisible et inatteignable au clavier comme au
   lecteur d'écran. `display:none` conviendrait, mais certains
   robots l'inspectent — on le sort de l'écran à la place. */
.form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact-form { display: flex; flex-direction: column; gap: var(--sp-5); }
/* Formulaire long (demande de location) : les champs sont appariés par
   ligne et la respiration verticale se resserre d'un cran. Rien n'est
   retiré — c'est la hauteur totale qui diminue. */
.contact-form--dense { gap: var(--sp-4); }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  /* Les libellés n'ont pas tous la même hauteur (certains passent à la
     ligne) : on aligne sur le bas pour que les champs restent sur une
     même ligne. */
  align-items: end;
}
.form-row--3 { grid-template-columns: 1.2fr 1fr 1fr; gap: var(--sp-4); }
.form-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.form-label {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.form-input, .form-select, .form-textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.85rem 1rem;
  font-size: var(--fs-body);
  color: var(--text);
  background: var(--white);
  border: 1.5px solid var(--border-md);
  border-radius: var(--r-sm);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--dur-2), box-shadow var(--dur-2);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-muted); opacity: 1; }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(34,53,63,0.12);
}
.form-textarea { resize: vertical; min-height: 128px; }
.form-textarea--compact { min-height: 92px; }
/* iOS centre verticalement la valeur des champs date/heure et la décale à
   gauche : on la recale sur la même ligne de base que les autres champs. */
.form-input[type="date"], .form-input[type="time"] { text-align: left; }
.form-input::-webkit-date-and-time-value { text-align: left; margin: 0; }
.form-input::-webkit-calendar-picker-indicator { opacity: 0.55; cursor: pointer; }
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23695f58' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}
.form-note { font-size: var(--fs-xs); color: var(--text-muted); }

/* Confirmation d'envoi */
.form-success {
  padding: var(--sp-8) var(--sp-6);
  background: var(--white);
  border: 1px solid var(--border-md);
  border-radius: var(--r-md);
  text-align: center;
}
.form-success-title { font-family: var(--font-serif); font-size: var(--fs-h3-lg); color: var(--text); margin-bottom: var(--sp-2); }
.form-success-sub { font-size: var(--fs-sm); color: var(--text-muted); }
.form-success-sub a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }


/* ═══ 09 · HÉROS & BANDEAU PHOTO ═════════════════════════ */

/* ── Héros photo (accueil) ── */
#hero {
  position: relative;
  min-height: 620px;
  height: 100svh;
  max-height: 900px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
  background: var(--accent-blue);
}
#hero-img {
  position: absolute;
  inset: -8% 0 auto 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  object-position: center 35%;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(34,53,63,0.34) 0%,
    rgba(34,53,63,0.22) 38%,
    rgba(34,53,63,0.55) 100%
  );
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.hero-glass {
  max-width: 40rem;
  padding: clamp(1.5rem, 3.2vw, 2.6rem);
  background: rgba(34,53,63,0.30);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.hero-title {
  font-size: var(--fs-display);
  line-height: 0.98;
  color: var(--white);
  margin-bottom: var(--sp-5);
}
.hero-title em { color: rgba(255,255,255,0.74); }
.hero-line-wrap { display: block; overflow: hidden; padding-bottom: 0.14em; }
.hero-line { display: block; }
.hero-sub {
  font-size: var(--fs-lead);
  color: rgba(255,255,255,0.94);
  font-weight: 600;
  letter-spacing: 0.02em;
  max-width: 34rem;
  line-height: 1.5;
  margin-bottom: var(--sp-5);
}
.hero-btns { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* ── Héros de page (fond marine) ── */
.page-hero,
.cours-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(7rem, 13vw, 10rem) var(--gutter) clamp(2.75rem, 5vw, 4.5rem);
  background: var(--accent-blue);
}
.page-hero-inner, .cours-hero-content { max-width: var(--max-w); margin-inline: auto; }

.page-hero-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1rem, 4vw, 3rem);
  margin-bottom: var(--sp-5);
}
/* Page sans sous-titre (location) : pas de marge morte sous le titre. */
.page-hero-inner > .page-hero-head:last-child { margin-bottom: 0; }
.page-hero-head-text { min-width: 0; }
.page-hero-label {
  display: block;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #d9c4a8;
  margin-bottom: var(--sp-4);
}
.page-hero-title, .cours-hero-title {
  font-size: var(--fs-display);
  color: var(--white);
  margin-bottom: 0;
}
.page-hero-title em, .cours-hero-title em { color: rgba(255,255,255,0.62); }
/* `min(rem, ch)` : la borne en `ch` suit la taille réelle du texte et
   maintient la ligne sous ~65 signes, seuil au-delà duquel l'œil peine
   à retrouver le début de la ligne suivante. */
.page-hero-sub, .cours-hero-sub {
  font-size: var(--fs-lead);
  color: rgba(255,255,255,0.82);
  max-width: min(46rem, 62ch);
  line-height: 1.7;
}
.page-hero-sub em, .cours-hero-sub em { color: var(--white); }
/* Boutons sous un en-tête de page — utilisé par la page 404. */
.page-hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

/* ── Bandeau photo — la respiration ──
   Composant transversal, posé ENTRE deux <section> : une photo pleine
   largeur qui coupe un long enchaînement de texte. Rien ne se pose
   par-dessus — sa fonction est le silence, pas le message. Il n'a donc
   ni marge ni fond : la césure vient de l'image elle-même.

   Une seule photo par fichier : le recadrage se règle au cas par cas
   avec `--band-pos`, posé sur l'élément, jamais en dupliquant une
   image. C'est ce qui permet de relire la même prise de vue en
   panoramique sur une page et en cadre resserré sur une autre. */
.photo-band {
  display: block;
  position: relative;
  overflow: hidden;
  /* `width` explicite, indispensable : sans lui la largeur reste `auto`,
     et le navigateur reporte alors `max-height` sur la largeur via
     l'`aspect-ratio` — la photo s'arrêtait à 1860 px (620 × 3) au lieu
     d'atteindre le bord droit de l'écran. */
  width: 100%;
  aspect-ratio: 5 / 4;          /* mobile : la photo doit exister, pas s'effacer */
  max-height: 78svh;            /* garde-fou en paysage sur téléphone */
  background: var(--bg-soft);   /* couleur d'attente avant chargement */
}
.photo-band picture { display: block; height: 100%; }
.photo-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--band-pos, center);
}
/* Pause plus discrète, là où la section suivante doit rester proche. */
.photo-band--thin { aspect-ratio: 16 / 9; }

/* Au-delà du mobile, le bandeau s'étire en panoramique : il sépare sans
   jamais coûter un écran entier de défilement. */
@media (min-width: 769px) {
  .photo-band       { aspect-ratio: 3 / 1; max-height: 620px; }
  .photo-band--thin { aspect-ratio: 4 / 1; max-height: 440px; }
}


/* ═══ 10 · ACCUEIL ═══════════════════════════════════════ */

/* ── Ce qui change (fond marine) ── */
#change {
  background: var(--accent-blue);
  padding: var(--sec-v) var(--gutter);
}
.change-inner { max-width: var(--max-w); margin-inline: auto; }
.change-header { margin-bottom: clamp(2rem, 4vw, 3rem); }
.change-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 2.6vw, 2.25rem);
}
.change-card {
  min-width: 0;
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.change-card-head { display: flex; align-items: center; gap: var(--sp-3); }
.change-icon { flex: 0 0 auto; width: 28px; height: 28px; color: #d9c4a8; }
.change-icon svg { width: 28px; height: 28px; }
.change-card-title {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.15;
  color: var(--white);
  overflow-wrap: break-word;
}
.change-card-text { font-size: var(--fs-sm); line-height: 1.6; color: rgba(247,243,238,0.86); }

/* ── Disciplines (fond lin) ── */
#disciplines { background: var(--bg-soft); padding: var(--sec-v) var(--gutter); }
.disc2-inner { max-width: var(--max-w); margin-inline: auto; }
.disc2-header { margin-bottom: clamp(2rem, 4vw, 3rem); }
.disc2-grid { display: flex; flex-direction: column; gap: clamp(1.25rem, 3vw, 2rem); }
.disc2-card {
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  align-items: stretch;
  min-height: 320px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.disc2-card:nth-child(even) { flex-direction: row-reverse; }
.disc2-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.disc2-media { flex: 1 1 50%; overflow: hidden; background: var(--bg-warm); }
.disc2-media img { width: 100%; height: 100%; object-fit: cover; }
.disc2-body {
  flex: 1 1 50%;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-3);
}
.disc2-name { font-family: var(--font-serif); font-size: var(--fs-h3-lg); font-weight: 500; line-height: 1.1; color: var(--text); overflow-wrap: break-word; }
.disc2-desc { font-size: var(--fs-sm); line-height: 1.6; color: var(--text-body); flex: 1; }
.disc2-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-soft);
}
.disc2-teacher { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); font-weight: 700; color: var(--text); }
.disc2-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-text);
  color: var(--white);
  font-size: var(--fs-xs);
  font-weight: 800;
}
.disc2-intensity { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); }
.disc2-intensity i { width: 7px; height: 7px; border-radius: 50%; background: var(--border-md); display: inline-block; }
.disc2-intensity i + i { margin-left: -2px; }
.disc2-intensity[data-level="1"] i:nth-child(1),
.disc2-intensity[data-level="2"] i:nth-child(-n+2),
.disc2-intensity[data-level="3"] i:nth-child(-n+3) { background: var(--accent-dk); }
.disc2-cta { text-align: center; margin-top: clamp(2rem, 4vw, 3rem); }

/* ── Offres de lancement (fond blanc) ── */
.offres { background: var(--white); padding: var(--sec-v) var(--gutter); }
.offres-container { max-width: 1120px; margin-inline: auto; }
.offres-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  margin-top: clamp(2rem, 4vw, 3rem);
  align-items: stretch;
}
.offre-card {
  position: relative;
  min-width: 0;
  border-radius: var(--r-lg);
  padding: clamp(1.75rem, 3vw, 2.4rem) clamp(1.35rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
}
.offre-card--reco { background: var(--reco-bg); box-shadow: var(--shadow-md); }
.offre-card--plain { background: var(--white); border: 1.5px dashed var(--border-md); }
.offre-pill {
  position: absolute;
  top: -14px; left: 2rem;
  background: var(--accent-text);
  color: var(--white);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border-radius: var(--r-pill);
}
.offre-card-label {
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
  font-weight: 700;
  margin-bottom: var(--sp-3);
}
.offre-card-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.06;
  color: var(--text);
  overflow-wrap: break-word;
}
.offre-card-title em { color: var(--accent-text); }
.offre-core { margin-top: var(--sp-4); font-weight: 700; font-size: var(--fs-sm); color: var(--accent-blue); }
.offre-stack, .offre-bullets { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.offre-bullets { flex-grow: 1; }
.offre-stack li, .offre-bullets li { position: relative; padding-left: 1.5rem; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-body); }
.offre-stack li::before { content: "✦"; position: absolute; left: 0; top: 0.05rem; color: var(--accent-dk); font-size: 0.85rem; }
.offre-bullets li::before { content: "—"; position: absolute; left: 0; color: var(--accent-dk); }
.offre-price-row { margin-top: auto; padding-top: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); }
.offre-price { display: flex; align-items: baseline; gap: 0.3rem; }
.offre-cur { font-size: var(--fs-body); color: var(--text-muted); font-weight: 700; align-self: flex-start; margin-top: 0.4rem; }
.offre-amount { font-family: var(--font-serif); font-variant-numeric: tabular-nums; font-size: clamp(2.5rem, 5vw, 3.2rem); line-height: 0.9; color: var(--text); }
.offres-fineprint { margin-top: var(--sp-6); font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); }

/* ── Bande assurances (fond marine) ── */
.assur { background: var(--accent-blue); padding: clamp(2.5rem, 5vw, 3.5rem) var(--gutter); }
.assur-wrap {
  max-width: 1040px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
  justify-content: center;
}
.assur-badge {
  flex: 0 0 auto;
  background: var(--white);
  border-radius: var(--r-md);
  width: 118px; height: 118px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  color: var(--accent-blue);
  box-shadow: var(--shadow-md);
}
.assur-badge b { font-size: 1.05rem; letter-spacing: 0.02em; }
.assur-badge span { font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); margin-top: 3px; font-weight: 800; }
.assur-txt { flex: 1 1 360px; }
.assur-txt h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.1;
  color: var(--white);
}
.assur-txt h2 em { color: #e9d8be; }
.assur-note { margin-top: var(--sp-2); font-size: var(--fs-sm); color: rgba(247,243,238,0.82); line-height: 1.6; }

/* ── Témoignages (beige chaud) ── */
.temo { background: var(--warm); padding: var(--sec-v) var(--gutter); }
.temo-wrap { max-width: 1200px; margin-inline: auto; }
.temo-head { text-align: center; margin-bottom: clamp(2rem, 4vw, 2.8rem); }
.temo-head .section-lead { margin-inline: auto; }
.tcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); align-items: start; }
.tcard {
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-5) var(--sp-5);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.tcard .stars { color: var(--accent-text); font-size: 0.95rem; letter-spacing: 2px; }
.tcard .tq { margin-top: var(--sp-3); font-size: var(--fs-sm); line-height: 1.55; color: var(--text-body); flex: 1; }
.twho { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); }
.tav {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--white); font-weight: 800; font-size: 0.88rem;
  flex: 0 0 38px;
}
.tn { font-weight: 800; font-size: var(--fs-sm); line-height: 1.2; color: var(--text); }
.tc { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600; }
.tav-a { background: var(--av-a); } .tav-b { background: var(--av-b); }
.tav-c { background: var(--av-c); } .tav-d { background: var(--av-d); }

/* ── Bannière CTA finale (photo) ── */
#cta-banner {
  position: relative;
  min-height: clamp(360px, 50vw, 560px);
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--accent-blue);
}
#cta-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.cta-overlay { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(34,53,63,0.55) 0%, rgba(34,53,63,0.18) 70%); }
.cta-content {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  width: 100%;
  margin-inline: auto;
  padding: var(--sp-8) var(--gutter);
}
.cta-glass {
  max-width: 36rem;
  padding: clamp(1.5rem, 3.2vw, 2.6rem);
  background: rgba(34,53,63,0.34);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.cta-title {
  font-family: var(--font-serif);
  font-size: var(--fs-h2-lg);
  font-weight: 400;
  line-height: 1.08;
  color: var(--white);
  margin-bottom: var(--sp-6);
}
.cta-title em { color: rgba(255,255,255,0.74); }
.cta-btns { display: flex; flex-wrap: wrap; gap: var(--sp-3); }


/* ═══ 11 · PREMIÈRE FOIS ═════════════════════════════════ */
.defi-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(7rem, 13vw, 10rem) var(--gutter) var(--sec-v);
  background: var(--bg);
}
.defi-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(168,149,126,0.16), transparent 55%),
    radial-gradient(90% 70% at -10% 110%, rgba(34,53,63,0.05), transparent 60%);
  pointer-events: none;
}
.defi-hero-inner { position: relative; max-width: var(--max-w); margin-inline: auto; }
.defi-hero-title {
  font-size: var(--fs-display);
  color: var(--text);
  margin: 0 0 var(--sp-5);
  max-width: 18ch;
}
.defi-hero-title em { color: var(--accent-text); }
.defi-hero-title .dot { color: var(--accent-dk); }
.defi-hero-sub { font-size: var(--fs-lead); color: var(--text-body); line-height: 1.7; max-width: 38rem; margin-bottom: var(--sp-7); }

.defi-hero-cta-row { margin-top: var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; }
.defi-hero-reassure { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; color: var(--accent-text); }

/* ── Ce qu'il faut savoir ── */
.defi-know { padding: var(--sec-v) var(--gutter); background: var(--bg); }
.defi-know-inner { max-width: var(--max-w); margin-inline: auto; }
.defi-know-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.2vw, 1.75rem); }
.defi-kcard {
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: clamp(1.6rem, 2.6vw, 2.25rem);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.defi-kcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.defi-kcard-icon {
  box-sizing: content-box;
  width: 26px; height: 26px;
  padding: 13px;
  border-radius: var(--r-md);
  background: rgba(168,149,126,0.16);
  color: var(--accent-text);
  margin-bottom: var(--sp-5);
}
.defi-kcard-title { font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-h3-lg); color: var(--text); margin-bottom: var(--sp-2); line-height: 1.2; }
.defi-kcard-text { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.65; }

/* ── CTA final (fond marine) ── */
.defi-final { padding: var(--sec-v) var(--gutter); background: var(--accent-blue); text-align: center; }
.defi-final-inner { max-width: 44rem; margin-inline: auto; }
.defi-final-title { font-family: var(--font-serif); font-size: var(--fs-h2-lg); font-weight: 400; line-height: 1.05; color: var(--bg); margin-bottom: var(--sp-4); }
.defi-final-title em { color: #e9d8be; }
.defi-final-sub { font-size: var(--fs-lead); color: rgba(247,243,238,0.84); line-height: 1.7; margin-bottom: var(--sp-7); max-width: 54ch; margin-inline: auto; }
.defi-final-cta-row { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.defi-final-note { margin-top: var(--sp-5); font-size: var(--fs-sm); color: rgba(247,243,238,0.72); }
.defi-final-note a { color: var(--bg); text-decoration: underline; text-underline-offset: 3px; }

/* ── Ligne assurance sous les cartes d'offre ── */
.pf-assur-line {
  margin-top: var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--text-body);
  line-height: 1.7;
  max-width: 62ch;
}
.pf-assur-line em { color: var(--accent-text); font-weight: 700; }
.pf-assur-line a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }

/* ── Les résultats (beige chaud) ── */
.pf-results { padding: var(--sec-v) var(--gutter); background: var(--warm); }
.pf-results-inner { max-width: var(--max-w); margin-inline: auto; }

/* Chiffres traités en compteurs : la valeur d'abord, la lecture ensuite. */
.pf-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin: clamp(2rem, 4vw, 3rem) 0;
}
.pf-stat { min-width: 0; border-top: 1px solid var(--border-md); padding-top: var(--sp-5); }
.pf-stat-val {
  font-family: var(--font-serif);
  font-variant-numeric: tabular-nums;
  font-size: clamp(3rem, 7vw, 4.5rem);
  line-height: 1;
  color: var(--accent-text);
  margin-bottom: var(--sp-3);
}
.pf-stat-text { font-size: var(--fs-sm); color: var(--text-body); line-height: 1.6; }
.pf-results-close { font-size: var(--fs-lead); color: var(--text-body); line-height: 1.7; max-width: 56ch; }
.pf-results-avis { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* Mot sur la fondatrice — filet à gauche, comme les citations du site */
.pf-edith {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-left: var(--sp-5);
  border-left: 1px solid var(--accent-dk);
  font-size: var(--fs-lead);
  color: var(--text-body);
  line-height: 1.7;
  max-width: 58ch;
}

/* ── Les cours : semaine type + carrousel (fond crème) ── */
.pf-cours { padding: var(--sec-v) var(--gutter); background: var(--bg-warm); }
.pf-cours-inner { max-width: var(--max-w); margin-inline: auto; }
.pf-lead-accent { color: var(--text); font-weight: 700; }
.pf-block { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.pf-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}
.pf-block-title { font-family: var(--font-serif); font-size: var(--fs-h3-lg); font-weight: 500; color: var(--text); line-height: 1.2; }
.pf-hint { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
.pf-hint-mobile { display: none; }

/* Semaine type — desktop : lignes matin/soir × colonnes lun→dim.
   Sous 1024px (voir § 21) : une pile de jours, plus lisible au pouce. */
.pf-week-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pf-week {
  display: grid;
  grid-template-columns: auto repeat(7, minmax(0, 1fr));
  min-width: 880px;
  background: var(--bg);
  border: 1px solid var(--border-md);
  border-radius: var(--r-md);
  overflow: hidden;
}
/* Colonnes de hauteur identique : les deux créneaux se calent sur la même ligne. */
.pf-week-labels, .pf-week-col {
  min-width: 0;
  display: grid;
  grid-template-rows: auto 1fr 1fr;
  border-right: 1px solid var(--border);
}
.pf-week-col:last-child { border-right: none; }
.pf-week-dayname {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-body);
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border-md);
}
/* Cellule d'angle : garde le fond et la hauteur de la ligne d'en-tête. */
.pf-week-labels .pf-week-dayname { color: transparent; }
.pf-week-rowlabel {
  display: flex;
  align-items: center;
  padding: var(--sp-4);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
  border-bottom: 1px solid var(--border);
}
.pf-week-rowlabel:last-child { border-bottom: none; }
.pf-week-slot { padding: var(--sp-4) var(--sp-3); border-bottom: 1px solid var(--border); }
.pf-week-slot:last-child { border-bottom: none; }
.pf-week-slot--empty { color: var(--text-muted); }
/* Deux cours sur la même demi-journée : un filet les sépare dans la case. */
.pf-slot-sep {
  border: 0;
  border-top: 1px dashed var(--border);
  margin: var(--sp-3) calc(var(--sp-3) * -1);
}
.pf-slot-time { font-variant-numeric: tabular-nums; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 0.25rem; }
.pf-slot-name { font-family: var(--font-serif); font-size: var(--fs-sm); color: var(--text); line-height: 1.25; overflow-wrap: break-word; }
.pf-slot-teacher { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 0.45rem; }
/* Niveau écrit en toutes lettres dès qu'il y a la place (mobile) ;
   sur la grille desktop, seules les pastilles tiennent — la légende explique. */
.pf-level-text { display: none; }
.pf-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); margin-top: var(--sp-5); }

/* Carrousel des cours — défilement natif, calé au doigt et au clavier */
.pf-rail {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;   /* le pouce ne déclenche pas le « retour » du navigateur */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  margin-inline: calc(-1 * var(--gutter));
  padding: var(--sp-2) var(--gutter) var(--sp-5);
  scroll-padding-inline: var(--gutter);
}
.pf-rail > .cours-item {
  flex: 0 0 min(84vw, 22rem);
  background: var(--bg);
  scroll-snap-align: start;
}
.pf-rail:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -2px; border-radius: var(--r-md); }

/* ── FAQ (fond lin) ── */
.pf-faq { padding: var(--sec-v) var(--gutter); background: var(--bg-soft); }
.pf-faq-inner { max-width: 52rem; margin-inline: auto; }
.pf-faq-list { border-top: 1px solid var(--border-md); }
.pf-faq-item { border-bottom: 1px solid var(--border-md); }
.pf-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 56px;
  padding: var(--sp-4) 0;
  font-size: var(--fs-lead);
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-2);
}
.pf-faq-q::-webkit-details-marker { display: none; }
.pf-faq-q:hover { color: var(--accent-blue); }
.pf-faq-q::after {
  content: "";
  flex: 0 0 auto;
  width: 9px; height: 9px;
  margin-right: 5px;
  border-right: 1.5px solid var(--accent-dk);
  border-bottom: 1.5px solid var(--accent-dk);
  transform: translateY(-3px) rotate(45deg);
  transition: transform var(--dur-2) var(--ease-out);
}
.pf-faq-item[open] .pf-faq-q::after { transform: translateY(2px) rotate(-135deg); }
.pf-faq-a { padding-bottom: var(--sp-5); font-size: var(--fs-sm); color: var(--text-body); line-height: 1.7; max-width: 62ch; }
.pf-faq-a a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }


/* ═══ 12 · COURS ═════════════════════════════════════════ */

/* ── Héros — resserré sous l'en-tête fixe ── */
.cours-hero {
  padding-top: clamp(5.75rem, 9vw, 7rem);
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
.cours-hero .page-hero-head { margin-bottom: var(--sp-4); }
.cours-hero-sub { max-width: 44rem; }

/* ── Liste — toute la page hors héros est crème ── */
.cours-list-section { padding: var(--sec-v) var(--gutter); background: var(--bg-warm); }
.cours-list-inner { max-width: var(--max-w); margin-inline: auto; }
.cours-list-section .section-head { margin-bottom: var(--sp-5); }

/* ── Barre de filtres collante ── */
/* Sans JavaScript, la barre n'est pas affichée : les dix cours restent tous
   visibles plutôt que d'offrir des boutons inertes. La classe `.js` est
   posée en tête de page. */
.cours-filters-wrap { display: none; }
.js .cours-filters-wrap {
  display: block;
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  /* Le fond court d'un bord à l'autre pour masquer les cartes qui défilent. */
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--bg-warm);
  border-bottom: 1px solid var(--border);
}

.cours-filters-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  max-width: var(--max-w);
  margin-inline: auto;
  margin-bottom: 0;
  padding-block: var(--sp-3);
  overflow-x: auto;
  scrollbar-width: none;
}
.cours-filters-bar::-webkit-scrollbar { display: none; }
.cours-filter {
  flex: 0 0 auto;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  min-height: 44px;
  padding: 0.5rem 1.25rem;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--border-md);
  color: var(--text-body);
  background: transparent;
  transition: background var(--dur-2), border-color var(--dur-2), color var(--dur-2);
}
.cours-filter:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
.cours-filter[aria-pressed="true"] { background: var(--accent-blue); border-color: var(--accent-blue); color: var(--white); }

.cours-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.cours-item {
  min-width: 0;
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-3) var(--ease-out), border-color var(--dur-2), box-shadow var(--dur-3) var(--ease-out);
}
.cours-item:hover { border-color: var(--border-md); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.cours-item-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.cours-item-cat {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-pill);
  background: var(--bg);
  white-space: nowrap;
}
.cours-item-cat.yoga    { color: var(--accent-text); }
.cours-item-cat.pilates { color: var(--accent-blue); }
.cours-item-cat.autres  { color: var(--text-body); }
.cours-item-schedule { font-size: var(--fs-xs); font-weight: 700; color: var(--accent-text); white-space: nowrap; }
.cours-item-title { font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: 400; color: var(--text); line-height: 1.2; margin-bottom: var(--sp-1); }
.cours-item-sub { font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); margin-bottom: var(--sp-3); }
.cours-item-desc { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.65; flex: 1; margin-bottom: var(--sp-4); }
.cours-item-footer { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: auto; }
.cours-item-tag {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg);
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
}
.cours-item-link { margin-left: auto; }

/* ── Carte de cours avec photo (page Cours) ── */
/* Placée après `.cours-item` : à spécificité égale, c'est l'ordre qui tranche. */
.cours-item--photo {
  padding: 0;
  overflow: hidden;
  background: var(--white);
  border-color: var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.cours-item--photo:hover { border-color: var(--line-soft); box-shadow: var(--shadow-md); }

.cours-card-media {
  aspect-ratio: 16 / 10;
  background: var(--bg-warm);
  overflow: hidden;
}
.cours-card-media img { width: 100%; height: 100%; object-fit: cover; }

/* Cartes aérées : marges intérieures et interlignage généreux. */
.cours-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.6vw, 2rem);
}
.cours-item--photo .cours-item-head   { margin-bottom: var(--sp-4); }
.cours-item--photo .cours-item-title  { margin-bottom: var(--sp-2); line-height: 1.25; }
.cours-item--photo .cours-item-sub    { margin-bottom: var(--sp-4); }
.cours-item--photo .cours-item-desc   { line-height: 1.75; margin-bottom: var(--sp-5); }
.cours-item--photo .cours-item-footer {
  gap: var(--sp-2) var(--sp-3);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-soft);
}
/* Méta lisibles : 13px (15px en mobile) plutôt que 11px. */
.cours-item--photo .cours-item-cat,
.cours-item--photo .cours-item-tag { font-size: var(--fs-xs); }

.cours-card-btn { width: 100%; margin-top: var(--sp-5); }

/* ── Pastille d'intensité ── */
/* Trois niveaux, jamais plus. Le niveau est écrit en toutes lettres :
   la couleur ne porte jamais l'information seule. */
.cours-level {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-body);
  background: var(--bg);
  padding: 0.3rem 0.75rem 0.3rem 0.6rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.cours-level::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cours-level-dot, var(--border-md));
}
.cours-level[data-level="1"] { --cours-level-dot: var(--av-d); }
.cours-level[data-level="2"] { --cours-level-dot: var(--accent-text); }
.cours-level[data-level="3"] { --cours-level-dot: var(--text); }

/* Message « aucun cours dans ce filtre » */
.cours-empty {
  display: none;
  padding: var(--sp-8) var(--sp-5);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  border: 1px dashed var(--border-md);
  border-radius: var(--r-md);
}
.cours-empty.is-visible { display: block; }

/* ── Bon à savoir ── */
/* Liste et réassurances partagent le crème : un filet marque la césure
   sans rompre l'aplat. */
.cours-know { background: var(--bg-warm); padding: var(--sec-v) var(--gutter); border-top: 1px solid var(--border); }
.cours-know-inner { max-width: var(--max-w); margin-inline: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem); }
.cours-know-card { min-width: 0; text-align: center; }
.cours-know-icon { width: 30px; height: 30px; color: var(--accent-text); margin: 0 auto var(--sp-4); }
.cours-know-title { font-family: var(--font-serif); font-size: var(--fs-h3-lg); font-weight: 500; color: var(--text); line-height: 1.15; margin-bottom: var(--sp-2); }
.cours-know-text { font-size: var(--fs-sm); line-height: 1.6; color: var(--text-muted); max-width: 34ch; margin-inline: auto; }

/* Le bandeau final de la page Cours reprend le composant marine de
   Première fois : il tranche sur le crème au-dessus et sur le pied de page. */
.cours-final .section-label { margin-bottom: var(--sp-3); }


/* ═══ 13 · CALENDRIER ════════════════════════════════════ */

/* ── Garde-fou au-dessus du widget ── */
/* Bandeau cliquable : la personne qui n'a pas encore de formule est renvoyée
   vers « Première fois » avant de tenter de réserver. Toute la surface est
   la cible tactile (≥ 56 px). */
.cal-guard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  max-width: 980px;
  min-height: 56px;
  margin: 0 auto var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--white);
  border: 1px solid var(--border-md);
  border-radius: var(--r-md);
  color: var(--text-body);
  transition: background var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out);
}
.cal-guard:hover { background: var(--bg-warm); border-color: var(--accent-blue); }
.cal-guard-text { font-size: var(--fs-sm); line-height: 1.5; }
.cal-guard-text strong { font-weight: 800; color: var(--text); }
.cal-guard-arrow {
  flex: 0 0 auto;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--accent-text);
  transition: transform var(--dur-2) var(--ease-out);
}
.cal-guard:hover .cal-guard-arrow { transform: translateX(4px); }

/* ── Lien de secours sous le widget ── */
/* Le widget est une iframe tierce : si elle ne se charge pas (bloqueur,
   réseau, JavaScript désactivé), la réservation reste accessible ici. */
.cal-fallback {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--sp-3);
  width: 100%;
  max-width: 980px;
  margin: var(--sp-4) auto 0;
}
.cal-fallback p { font-size: var(--fs-xs); color: var(--text-muted); }
/* `.link-arrow` est en `nowrap` : ici, la formulation peut passer à la ligne. */
.cal-fallback .link-arrow { white-space: normal; }

.cal-info { padding: var(--sec-v) var(--gutter); background: var(--bg-warm); }
.cal-info-inner { max-width: var(--max-w); margin-inline: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.cal-info-card {
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-7) var(--sp-6);
}
.cal-info-num {
  display: block;
  font-family: var(--font-serif);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-h3);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--accent-text);
  margin-bottom: var(--sp-3);
}
.cal-info-title { font-family: var(--font-serif); font-size: var(--fs-h3-lg); color: var(--text); margin-bottom: var(--sp-2); }
.cal-info-text { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.65; }

.cal-app { padding: var(--sec-v) var(--gutter); background: var(--bg); }
.cal-app-inner { max-width: var(--max-w); margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
/* Tant que la capture d'écran de l'application n'est pas fournie, la section
   tient en une colonne, calée sur le bord gauche comme le reste de la page.
   Quand le visuel arrivera : retirer `--solo` et l'ajouter en second enfant
   de `.cal-app-inner` — la grille 2 colonnes reprend seule la main. */
.cal-app-inner--solo { display: block; }
.cal-app-inner--solo > * { max-width: 46rem; }
.cal-app-inner--solo .cal-app-text { max-width: 58ch; }
.cal-app-title { font-family: var(--font-serif); font-size: var(--fs-h2); font-weight: 400; line-height: 1.1; color: var(--text); margin-bottom: var(--sp-4); }
.cal-app-title em { color: var(--accent-text); }
.cal-app-text { font-size: var(--fs-lead); color: var(--text-muted); line-height: 1.7; margin-bottom: var(--sp-6); }
.cal-app-stores { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.cal-app-store {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 56px;
  padding: var(--sp-3) var(--sp-5);
  background: var(--white);
  border: 1px solid var(--border-md);
  border-radius: var(--r-sm);
  min-width: 140px;
  transition: background var(--dur-2), border-color var(--dur-2);
}
.cal-app-store:hover { background: var(--bg-warm); border-color: var(--accent-blue); }
.cal-app-store-mini { font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); display: block; margin-bottom: 0.2rem; }
.cal-app-store-name { font-size: var(--fs-sm); font-weight: 700; color: var(--text); display: block; }


/* ═══ 14 · TARIFS ════════════════════════════════════════ */
.tarifs-main-section { padding: var(--sec-v) var(--gutter); background: var(--bg); }
.tarifs-main-section.is-cream { background: var(--bg-warm); }
.tarifs-main-inner { max-width: var(--max-w); margin-inline: auto; }

/* Ligne de preuve du héros — filet à gauche, comme les citations du site */
.tarifs-hero-proof {
  margin-top: var(--sp-5);
  padding-left: var(--sp-5);
  border-left: 1px solid rgba(255,255,255,0.3);
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.8);
  line-height: 1.7;
  max-width: min(46rem, 68ch);
}
.tarifs-hero-proof strong { color: var(--white); font-weight: 700; }

/* ── Abonnements illimités — une carte par durée, achat direct ── */
.tarifs-plans {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-top: 14px;            /* dégage la pastille « Recommandé » */
  align-items: stretch;
}
.tarifs-plan {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.6vw, 2rem) clamp(1.25rem, 2.2vw, 1.75rem);
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.tarifs-plan:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.tarifs-plan--reco { background: var(--reco-bg); border-color: var(--accent-dk); box-shadow: var(--shadow-md); }
/* La pastille reprend le composant des offres d'entrée, calée sur le padding de la carte */
.tarifs-plan .offre-pill { left: clamp(1.25rem, 2.2vw, 1.75rem); }
.tarifs-plan-name { font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: 500; line-height: 1.15; color: var(--text); }
.tarifs-plan-baseline { flex: 1; margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.55; }
.tarifs-plan-price { display: flex; align-items: baseline; gap: 0.35rem; margin-top: var(--sp-5); }
.tarifs-plan-cur { font-size: var(--fs-sm); font-weight: 700; color: var(--text-muted); }
.tarifs-plan-amount { font-family: var(--font-serif); font-variant-numeric: tabular-nums; font-size: clamp(2rem, 3.4vw, 2.6rem); line-height: 1; color: var(--text); }
.tarifs-plan-rate { margin-top: 0.25rem; font-size: var(--fs-xs); color: var(--text-muted); }
.tarifs-plan .btn { margin-top: var(--sp-5); }

/* ── Packs de cours — une ligne par pack, achat direct ── */
.tarifs-packs { display: grid; gap: var(--sp-3); margin-top: clamp(1.5rem, 3vw, 2rem); }
.tarifs-pack {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--sp-3) var(--sp-6);
  padding: var(--sp-5) var(--sp-6);
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  transition: border-color var(--dur-2), box-shadow var(--dur-3) var(--ease-out);
}
.tarifs-pack:hover { border-color: var(--border-md); box-shadow: var(--shadow-sm); }
.tarifs-pack-name { font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: 400; line-height: 1.2; color: var(--text); }
.tarifs-pack-sub { margin-top: 0.15rem; font-size: var(--fs-xs); color: var(--text-muted); }
.tarifs-pack-figures { text-align: right; }
.tarifs-pack-price { font-family: var(--font-serif); font-variant-numeric: tabular-nums; font-size: var(--fs-h3); color: var(--text); white-space: nowrap; }
.tarifs-pack-rate { margin-top: 0.1rem; font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }

/* Ligne de réassurance sous les packs */
.tarifs-main-note { margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--text-muted); }
.tarifs-main-note strong { color: var(--accent-text); font-weight: 700; }

/* ── Simulateur ── */
.tarifs-calculator { padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--bg-warm); border: 1px solid var(--border-md); border-radius: var(--r-md); }
.tarifs-main-section.is-cream .tarifs-calculator { background: var(--bg); }
.tarifs-calculator-body { display: flex; flex-direction: column; gap: var(--sp-6); }
.tarifs-calculator-q { display: block; font-size: var(--fs-sm); color: var(--text-body); margin-bottom: var(--sp-3); }
.tarifs-calculator-q strong { color: var(--text); }

.tarifs-calc-tabs { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.tarifs-calc-tab {
  flex: 1;
  min-width: 84px;
  min-height: 56px;
  padding: 0.75rem;
  border: 1.5px solid var(--border-md);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-align: center;
  transition: background var(--dur-2), border-color var(--dur-2), color var(--dur-2);
}
.tarifs-calc-tab span { display: block; font-family: var(--font-serif); font-size: var(--fs-body); font-weight: 400; color: var(--accent-text); margin-top: 0.2rem; }
.tarifs-calc-tab:hover { border-color: var(--accent-blue); }
.tarifs-calc-tab[aria-pressed="true"] { border-color: var(--accent-blue); background: var(--accent-blue); color: var(--white); }
.tarifs-calc-tab[aria-pressed="true"] span { color: rgba(255,255,255,0.85); }

/* Hauteur 44px : la zone tactile fait la taille d'un doigt, le rail reste fin */
.tarifs-calculator-slider { width: 100%; height: 44px; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
.tarifs-calculator-slider::-webkit-slider-runnable-track { height: 3px; background: var(--border-md); border-radius: 2px; }
.tarifs-calculator-slider::-moz-range-track { height: 3px; background: var(--border-md); border-radius: 2px; }
.tarifs-calculator-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px; margin-top: -9.5px;
  border-radius: 50%;
  background: var(--accent-blue);
  border: 2px solid var(--white);
  box-shadow: var(--shadow-sm);
}
.tarifs-calculator-slider::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent-blue);
  border: 2px solid var(--white);
}
.tarifs-calculator-scale { display: flex; justify-content: space-between; padding-top: var(--sp-2); }
.tarifs-calculator-scale span { font-size: var(--fs-xs); color: var(--text-muted); }

.tarifs-calculator-result {
  padding: var(--sp-5) var(--sp-6);
  background: var(--white);
  border: 1px solid var(--border-md);
  border-radius: var(--r-sm);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: var(--sp-5);
}
.tarifs-calculator-result-label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.4rem; }
.tarifs-calculator-result-value { font-family: var(--font-serif); font-variant-numeric: tabular-nums; font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--text); white-space: nowrap; }
.tarifs-calculator-result-value.is-accent { color: var(--accent-text); }
.tarifs-calculator-result-unit { font-size: var(--fs-sm); font-family: var(--font-sans); color: var(--text-muted); }

/* ── Cours privés ── */
.tarifs-private { padding: var(--sec-v) var(--gutter); background: var(--bg-warm); }
.tarifs-private-inner { max-width: var(--max-w); margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.tarifs-private-title { font-family: var(--font-serif); font-size: var(--fs-h2); font-weight: 400; line-height: 1.1; color: var(--text); margin-bottom: var(--sp-4); }
.tarifs-private-title em { color: var(--accent-text); }
.tarifs-private-text { font-size: var(--fs-lead); color: var(--text-muted); line-height: 1.7; margin-bottom: var(--sp-6); }
.tarifs-private-item { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--border-md); }
.tarifs-private-item:first-of-type { border-top: 1px solid var(--border-md); }
.tarifs-private-item-name { font-size: var(--fs-sm); color: var(--text-body); }
.tarifs-private-item-price { font-family: var(--font-serif); font-size: var(--fs-lead); color: var(--accent-text); white-space: nowrap; }


/* ═══ 15 · LOCATION ══════════════════════════════════════ */
.location-space { display: grid; grid-template-columns: 1fr 1fr; }
.location-space-img { overflow: hidden; min-height: 380px; min-width: 0; }
.location-space-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-4) var(--ease-out); }
.location-space-img:hover img { transform: scale(1.03); }
.location-space-content {
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 4rem);
  background: var(--bg);
  display: flex; flex-direction: column; justify-content: center;
}
.location-space-num { font-family: var(--font-serif); font-size: clamp(2.5rem, 5vw, 3.5rem); color: var(--accent-text); line-height: 1; margin-bottom: var(--sp-2); }
.location-space-title { font-family: var(--font-serif); font-size: var(--fs-h2); font-weight: 400; color: var(--text); margin-bottom: var(--sp-2); }
.location-space-tagline { font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); margin-bottom: var(--sp-5); }
.location-space-desc { font-size: var(--fs-lead); color: var(--text-muted); line-height: 1.7; margin-bottom: var(--sp-6); }
.location-features { display: flex; flex-direction: column; gap: var(--sp-2); }
.location-feature { display: flex; align-items: baseline; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--text-body); }
.location-feature-dash { color: var(--accent-dk); flex-shrink: 0; }

.location-equipment { padding: var(--sec-v) var(--gutter); background: var(--bg-warm); }
.location-equipment-inner { max-width: var(--max-w); margin-inline: auto; }
.location-equipment-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); }
.location-equipment-card {
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  transition: border-color var(--dur-2);
}
.location-equipment-card:hover { border-color: var(--border-md); }
.location-equipment-val { font-family: var(--font-serif); font-size: clamp(2.25rem, 4vw, 3rem); color: var(--text); line-height: 1; margin-bottom: var(--sp-2); }
.location-equipment-label { font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.location-equipment-footer { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--sp-5); }

.location-pricing { padding: var(--sec-v) var(--gutter); background: var(--bg); }
.location-pricing-inner { max-width: var(--max-w); margin-inline: auto; }
.location-pricing-note { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--sp-3); }
.location-pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.location-pricing-cell {
  min-width: 0;
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  transition: border-color var(--dur-2);
}
.location-pricing-cell:hover { border-color: var(--border-md); }
.location-pricing-cell--dark { background: var(--accent-blue); border-color: var(--accent-blue); }
.location-pricing-cell--dark:hover { border-color: var(--accent-blue); }
.location-pricing-cell--dark .location-pricing-duration { color: rgba(255,255,255,0.86); }
.location-pricing-cell--dark .location-pricing-amount { color: var(--white); }
.location-pricing-cell--dark .location-pricing-currency { color: #d9c4a8; }
.location-pricing-duration { font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--sp-2); }
.location-pricing-amount { font-family: var(--font-serif); font-variant-numeric: tabular-nums; font-size: clamp(2rem, 3.6vw, 2.5rem); color: var(--text); line-height: 1; margin-bottom: 0.2rem; }
.location-pricing-currency { font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); }
.location-pricing-footer { font-size: var(--fs-sm); color: var(--text-muted); }

.location-booking { padding: var(--sec-v) var(--gutter); background: var(--bg-warm); }
.location-booking-inner { max-width: var(--max-w); margin-inline: auto; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2.5rem, 6vw, 5rem); }
.location-booking-title { font-family: var(--font-serif); font-size: var(--fs-h2); font-weight: 400; color: var(--text); margin-bottom: var(--sp-4); }
.location-booking-title em { color: var(--accent-text); }
.location-booking-sub { font-size: var(--fs-lead); color: var(--text-muted); line-height: 1.7; margin-bottom: var(--sp-6); }
.location-booking-info { display: flex; flex-direction: column; gap: var(--sp-2); }
.location-booking-row { display: flex; align-items: baseline; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--text-body); }
.location-booking-dash { color: var(--accent-dk); }


/* ═══ 16 · CONTACT ═══════════════════════════════════════ */
.contact-page-section { padding: var(--sec-v) var(--gutter); background: var(--bg-warm); }
.contact-page-inner { max-width: var(--max-w); margin-inline: auto; display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.contact-title { font-family: var(--font-serif); font-size: var(--fs-h2); font-weight: 400; color: var(--text); margin-bottom: var(--sp-7); line-height: 1.1; }
.contact-title em { color: var(--accent-text); }
.contact-info-block { margin-bottom: var(--sp-6); }
.contact-info-label { display: block; font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); margin-bottom: var(--sp-3); }
.contact-info-val { font-size: var(--fs-sm); color: var(--text-body); line-height: 1.7; display: flex; flex-direction: column; gap: var(--sp-1); }
.contact-info-val a { display: inline-flex; align-items: center; min-height: 44px; transition: color var(--dur-2); }
.contact-info-val a:hover { color: var(--accent-blue); text-decoration: underline; text-underline-offset: 3px; }
/* Ligne mise en avant sous les coordonnées — même filet que les citations du site */
.contact-fast {
  margin-top: var(--sp-3);
  padding-left: var(--sp-4);
  border-left: 1px solid var(--accent-dk);
  font-size: var(--fs-sm);
  color: var(--text-body);
  line-height: 1.5;
}
.contact-fast strong { color: var(--text); font-weight: 800; }
.contact-access { display: flex; flex-direction: column; gap: var(--sp-2); }
.contact-access-item { display: flex; align-items: baseline; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--text-body); }
.contact-access-dash { color: var(--accent-dk); }
.contact-social { display: flex; gap: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.contact-social a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em;
  color: var(--text-body); text-transform: uppercase;
  transition: color var(--dur-2);
}
.contact-social a:hover { color: var(--accent-blue); }

.contact-map-section { padding: var(--sec-v) var(--gutter); background: var(--bg); }
.contact-map-inner { max-width: var(--max-w); margin-inline: auto; }
.contact-map-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
/* Tant que le visuel d'accès n'est pas fourni, la fiche tient seule, calée à
   gauche comme le reste de la page. Quand l'image arrivera : retirer `--solo`
   et placer la <figure> en premier enfant — la grille reprend seule la main.
   (Même convention que `.cal-app-inner--solo`, page Calendrier.) */
.contact-map-grid--solo { display: block; }
/* Sans visuel, la fiche s'étale en bandeau plutôt que de laisser une moitié
   d'écran vide : adresse, accès et bouton sur une même ligne. */
.contact-map-grid--solo .contact-map-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5) clamp(2rem, 5vw, 4rem);
}
.contact-map-grid--solo .contact-map-list { flex: 1 1 20rem; margin: 0; }
.contact-map-media { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.contact-map-media img { width: 100%; height: auto; }
.contact-map-card {
  background: var(--bg-warm);
  border: 1px solid var(--border-md);
  border-radius: var(--r-md);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.contact-map-address { font-family: var(--font-serif); font-size: var(--fs-h3-lg); color: var(--text); line-height: 1.4; }
.contact-map-list { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-4) 0 var(--sp-6); }
.contact-map-list li { display: flex; align-items: baseline; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--text-body); line-height: 1.6; }


/* ═══ 17 · CORPO / B2B ═══════════════════════════════════ */
.corpo-why { padding: var(--sec-v) var(--gutter); background: var(--bg-warm); }
.corpo-why-inner { max-width: var(--max-w); margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); }
.corpo-why-title { font-family: var(--font-serif); font-size: var(--fs-h2); font-weight: 400; line-height: 1.1; color: var(--text); margin-bottom: var(--sp-6); }
.corpo-why-title em { color: var(--accent-text); }
/* Trois preuves vérifiables — pas de chiffres d'étude, des faits du studio. */
.corpo-proofs { border: 1px solid var(--border-md); border-radius: var(--r-md); overflow: hidden; background: var(--bg); }
.corpo-proof { padding: var(--sp-5); border-bottom: 1px solid var(--border); }
.corpo-proof:last-child { border-bottom: none; }
.corpo-proof-key { font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 0.35rem; }
.corpo-proof-text { font-size: var(--fs-sm); color: var(--text-body); line-height: 1.6; }
/* `align-items` : le bouton garde sa largeur naturelle dans la colonne. */
.corpo-why-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5); max-width: 56ch; font-size: var(--fs-lead); color: var(--text-muted); line-height: 1.7; }

.corpo-offers { padding: var(--sec-v) var(--gutter); background: var(--bg); }
.corpo-offers-inner { max-width: var(--max-w); margin-inline: auto; }
.corpo-offers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.corpo-offer-card {
  min-width: 0;
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-7) var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-2);
  transition: border-color var(--dur-2), box-shadow var(--dur-3) var(--ease-out);
}
.corpo-offer-card:hover { border-color: var(--border-md); box-shadow: var(--shadow-sm); }
.corpo-offer-title { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--text); line-height: 1.15; }
.corpo-offer-sub { font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); }
.corpo-offer-desc { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.65; flex: 1; padding-top: var(--sp-2); }
.corpo-offer-link { margin-top: var(--sp-3); }

.corpo-process { padding: var(--sec-v) var(--gutter); background: var(--bg-warm); }
.corpo-process-inner { max-width: var(--max-w); margin-inline: auto; }
.corpo-process-steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border-md); }
.corpo-step { min-width: 0; padding: var(--sp-7) var(--sp-6); border-right: 1px solid var(--border); }
.corpo-step:first-child { padding-left: 0; }
.corpo-step:last-child { border-right: none; padding-right: 0; }
.corpo-step-num { font-family: var(--font-serif); font-size: 2.25rem; color: var(--accent-dk); line-height: 1; margin-bottom: var(--sp-3); }
.corpo-step-title { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); margin-bottom: var(--sp-3); }
.corpo-step-text { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.65; }

.corpo-cta-section { padding: var(--sec-v) var(--gutter); background: var(--bg); }
.corpo-cta-inner { max-width: 56rem; margin-inline: auto; text-align: center; }
.corpo-cta-inner .section-label { margin-inline: auto; }
.corpo-cta-title { font-family: var(--font-serif); font-size: var(--fs-h2-lg); font-weight: 400; color: var(--text); margin-bottom: var(--sp-4); line-height: 1.1; }
.corpo-cta-title em { color: var(--accent-text); }
.corpo-cta-sub { font-size: var(--fs-lead); color: var(--text-muted); line-height: 1.7; margin-bottom: var(--sp-7); max-width: 52ch; margin-inline: auto; }
.corpo-cta-btns { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.corpo-cta-note { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--sp-5); }


/* ═══ 18 · À PROPOS ══════════════════════════════════════ */
.apropos-section { background: var(--bg); padding: var(--sec-v) var(--gutter); }
.apropos-studio  { background: var(--bg-warm); padding: var(--sec-v) var(--gutter); }
.apropos-inner { max-width: var(--max-w); margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
/* Tant que le portrait d'Edith n'est pas fourni, le témoignage tient en une
   colonne, calée à gauche comme le reste de la page. Même convention que
   `.cal-app-inner--solo` : retirer `--solo` quand l'image arrive. */
.apropos-inner--solo { display: block; }
.apropos-title { font-family: var(--font-serif); font-size: var(--fs-h2); font-weight: 400; line-height: 1.08; color: var(--text); }
.apropos-title em { color: var(--accent-text); }
.apropos-body { font-size: var(--fs-lead); line-height: 1.75; color: var(--text-body); margin-top: var(--sp-4); max-width: 58ch; }
.apropos-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.apropos-media { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/5; box-shadow: var(--shadow-lg); }
.apropos-media img { width: 100%; height: 100%; object-fit: cover; }

/* Le témoignage d'Edith — filet à gauche, première phrase en serif.
   C'est le cœur de la page : il porte sa propre échelle, pas celle du
   texte courant. */
.apropos-quote {
  margin-top: var(--sp-6);
  padding-left: clamp(1.25rem, 3vw, 2rem);
  border-left: 1px solid var(--accent-dk);
  max-width: 60ch;
}
.apropos-quote blockquote { display: flex; flex-direction: column; gap: var(--sp-5); }
.apropos-quote p { font-size: var(--fs-lead); line-height: 1.8; color: var(--text-body); }
.apropos-quote .apropos-quote-lead {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2.8vw, 1.7rem);
  line-height: 1.35;
  color: var(--text);
}
.apropos-sign {
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent-text);
}

/* Tant qu'il n'y a pas de portrait, le témoignage prend la place de l'image :
   le titre tient la colonne de gauche, le récit celle de droite. Sur mobile,
   tout se réempile dans l'ordre de lecture. */
@media (min-width: 769px) {
  .apropos-inner--solo .apropos-text {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    /* La deuxième rangée absorbe la hauteur du récit : sans cela, le titre
       serait repoussé vers le milieu de la colonne. */
    grid-template-rows: auto 1fr;
    column-gap: clamp(2rem, 6vw, 5rem);
    align-items: start;
  }
  .apropos-inner--solo .apropos-quote {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
  }
}


/* ═══ 19 · EMBED GLOFOX ══════════════════════════════════ */
.glofox-section { padding: var(--sec-v) var(--gutter); background: var(--bg); }
.glofox-section-inner { max-width: var(--max-w); margin-inline: auto; }
.glofox-header { margin-bottom: var(--sp-7); max-width: 46rem; }
.glofox-embed-wrap { position: relative; width: 100%; max-width: 980px; margin-inline: auto; min-height: 300px; }
/* L'indicateur n'existe que pendant le chargement : la classe `is-loading`
   est posée puis retirée par main.js (au chargement de l'iframe, et au plus
   tard après quelques secondes). Sans JavaScript, il ne tourne jamais. */
.glofox-embed-wrap.is-loading::before {
  content: '';
  position: absolute;
  top: 48px; left: 50%;
  width: 22px; height: 22px;
  margin-left: -11px;
  border: 2px solid rgba(168,149,126,0.28);
  border-top-color: var(--accent-dk);
  border-radius: 50%;
  animation: gf-spin 0.8s linear infinite;
  z-index: 0;
  pointer-events: none;
}
@keyframes gf-spin { to { transform: rotate(360deg); } }
.glofox-embed-wrap iframe {
  display: block;
  width: 100%;
  min-height: 300px;
  border: none;
  background: transparent;
  position: relative;
  z-index: 1;
}


/* ═══ 20 · PIED DE PAGE ══════════════════════════════════ */
footer { background: var(--bg-warm); }
.footer-main { padding: clamp(2.75rem, 6vw, 4rem) var(--gutter) var(--sp-6); border-top: 1px solid var(--border-md); }
.footer-inner { max-width: var(--max-w); margin-inline: auto; display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3rem); }
.footer-tagline { font-family: var(--font-serif); font-size: var(--fs-h2); font-weight: 400; line-height: 1.1; color: var(--text); }
.footer-tagline em { color: var(--accent-text); }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.footer-col { min-width: 0; }
.footer-col-head { font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); margin-bottom: var(--sp-3); }
.footer-col ul { display: flex; flex-direction: column; }
.footer-col li a {
  /* `flex` et non `inline-flex` : la zone cliquable occupe toute la largeur
     de la colonne, sans rien changer à l'aspect du lien. */
  display: flex; align-items: center;
  min-height: 44px;
  font-size: var(--fs-sm);
  color: var(--text-body);
  transition: color var(--dur-2);
}
.footer-col li a:hover { color: var(--accent-blue); text-decoration: underline; text-underline-offset: 3px; }
.footer-badge {
  display: inline-flex; align-items: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent-text);
  border: 1px solid var(--border-md);
  border-radius: var(--r-pill);
  padding: 0.35rem 0.8rem;
  margin-top: var(--sp-2);
}
.footer-deco { text-align: center; padding: var(--sp-2) var(--gutter); }
.footer-deco-text {
  /* Filigrane purement décoratif (conteneur en aria-hidden) */
  pointer-events: none;
  font-family: var(--font-serif);
  font-size: clamp(4rem, 14vw, 11rem);
  color: rgba(43,27,27,0.05);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1;
  user-select: none;
}
.footer-bar { max-width: var(--max-w); margin-inline: auto; padding: var(--sp-5) var(--gutter); display: flex; justify-content: center; }
.footer-copy { font-size: var(--fs-xs); color: var(--text-muted); }


/* ═══ 21 · RESPONSIVE ════════════════════════════════════
   Paliers, du plus large au plus étroit : 1024 (tablette),
   768 (mobile), 561–768 (cas de la grille de cours),
   560 et 480 (petits mobiles). Plus un cas paysage.
   L'ordre de ces blocs fait partie du réglage : ne pas les
   déplacer sans vérifier la page Cours et la page Calendrier.
   ═══════════════════════════════════════════════════════ */

/* ── ≤ 1024px — tablette ── */
@media (max-width: 1024px) {
  #nav-menu             { width: 64%; min-width: 0; max-width: 520px; }
  .change-grid          { grid-template-columns: repeat(2, 1fr); }
  .defi-know-grid       { grid-template-columns: repeat(2, 1fr); }
  .corpo-offers-grid    { grid-template-columns: repeat(2, 1fr); }
  .corpo-process-steps  { grid-template-columns: repeat(2, 1fr); }
  .corpo-step           { padding: var(--sp-6) var(--sp-5); }
  .corpo-step:first-child, .corpo-step:nth-child(3) { padding-left: 0; }
  .corpo-step:nth-child(even) { border-right: none; padding-right: 0; }
  .location-equipment-grid { grid-template-columns: repeat(3, 1fr); }
  /* Date + deux horaires : trois de front ne tiennent plus dans la
     demi-colonne du formulaire de location. */
  .form-row--3 { grid-template-columns: 1fr 1fr; }
  .form-row--3 > :first-child { grid-column: 1 / -1; }
  .cours-grid           { grid-template-columns: repeat(2, 1fr); }
  .tcards               { grid-template-columns: repeat(2, 1fr); }
  .tarifs-plans         { grid-template-columns: repeat(2, 1fr); }
  .tarifs-private-inner { grid-template-columns: 1fr; }

  /* Semaine type : on passe en pile de jours, pas de défilement latéral */
  .pf-week { display: block; min-width: 0; }
  .pf-week-labels { display: none; }
  .pf-week-col { display: block; border-right: none; border-bottom: 1px solid var(--border-md); }
  .pf-week-col:last-child { border-bottom: none; }
  .pf-week-col--off { display: none; }   /* jour sans cours : inutile de l'empiler */
  .pf-week-slot--empty { display: none; }
  .pf-week-dayname, .pf-week-slot { padding-inline: var(--sp-5); }
  .pf-slot-name { font-size: var(--fs-lead); }
  .pf-level-text { display: inline; }
}

/* ── ≤ 768px — mobile (88 % du trafic) ── */
@media (max-width: 768px) {
  :root {
    /* Le blanc entre deux sections est ce qui empêche une page longue de
       se lire comme un bloc unique : sur téléphone il ne descend jamais
       sous 60 px de part et d'autre. */
    --sec-v: clamp(3.75rem, 11vw, 5.25rem);
    --header-h: 4.25rem;
    --fs-sm: 1rem;        /* jamais sous 16px pour du texte lu */
    --fs-xs: 0.9375rem;
    --fs-label: 0.8125rem;
  }

  /* Navigation — le panneau laisse toujours voir un bord de la page */
  #nav-menu { width: 86%; min-width: 0; max-width: 420px; }
  /* Pas de padding vertical ici : la hauteur vient de --header-h (voir
     .nav-inner). Un padding s'ajouterait au logo et repousserait la barre
     de filtres collante d'un pixel sous l'en-tête. */
  .nav-logo-mark { height: 43px; }  /* 38 px de dessin + le fond perdu */
  .nav-login { display: none; }   /* repris dans le panneau */

  /* Héros */
  #hero { min-height: 540px; }
  .hero-glass { max-width: 100%; padding: 1.35rem 1.35rem 1.5rem; border-radius: var(--r-md); }
  .hero-btns { flex-direction: column; align-items: stretch; }
  .page-hero-head, .cours-hero .page-hero-head { gap: var(--sp-4); margin-bottom: var(--sp-4); }

  /* Accueil */
  .change-grid { grid-template-columns: 1fr; gap: 0; }
  .change-card { padding-top: var(--sp-5); margin-top: var(--sp-5); }
  .change-card:first-child { margin-top: 0; }
  .disc2-card, .disc2-card:nth-child(even) { flex-direction: column; min-height: 0; }
  .disc2-media { flex: none; aspect-ratio: 16/10; }
  .disc2-body { flex: none; padding: var(--sp-5); justify-content: flex-start; }
  .offres-cards { grid-template-columns: 1fr; gap: var(--sp-4); }
  .offre-pill { left: 1.35rem; }
  .assur-wrap { flex-direction: column; text-align: center; gap: var(--sp-5); }
  .assur-txt { flex: 0 0 auto; width: 100%; }
  .assur-wrap .btn { width: 100%; }
  /* Témoignages : carrousel plein écran avec aperçu de la carte suivante */
  .tcards {
    grid-template-columns: none;
    display: flex;
    gap: var(--sp-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--gutter));
    padding: var(--sp-2) var(--gutter) var(--sp-5);
    scroll-padding-left: var(--gutter);
  }
  .tcard { flex: 0 0 84vw; scroll-snap-align: center; }
  .cta-glass { max-width: 100%; }
  .cta-btns { flex-direction: column; align-items: stretch; }

  /* Première fois */
  .defi-know-grid { grid-template-columns: 1fr; }
  .defi-final-cta-row { flex-direction: column; }
  .defi-final-cta-row .btn { width: 100%; }
  .pf-stats { grid-template-columns: 1fr; gap: var(--sp-5); }
  .pf-hint-mobile { display: inline; }
  .pf-hint-desktop { display: none; }

  /* Cours — la barre suit la largeur du contenu ; le fond du bandeau
     collant, lui, continue de courir d'un bord à l'autre. */
  .cours-filters-bar { flex-wrap: nowrap; overflow-x: visible; gap: var(--sp-2); margin-inline: auto; padding: var(--sp-3) 0; }
  .cours-filter { flex: 0 0 auto; padding: 0.5rem 1rem; }
  .cours-grid { grid-template-columns: 1fr; }
  .cours-card-body { padding: var(--sp-5); }
  .cours-know-inner { grid-template-columns: 1fr; gap: var(--sp-6); }

  /* Calendrier */
  .cal-info-inner { grid-template-columns: 1fr; }
  .cal-app-inner { grid-template-columns: 1fr; }

  /* Tarifs */
  .tarifs-plans { grid-template-columns: 1fr; gap: var(--sp-5); }  /* la pastille reste au clair de la carte du dessus */
  .tarifs-pack { grid-template-columns: 1fr auto; gap: var(--sp-3) var(--sp-4); padding: var(--sp-5); }
  .tarifs-pack .btn { grid-column: 1 / -1; width: 100%; }
  .tarifs-calc-tab { flex: 1 1 calc(50% - 0.25rem); }
  .tarifs-calculator-result { grid-template-columns: 1fr 1fr; gap: var(--sp-4); padding: var(--sp-5); }

  /* Location */
  .location-space { grid-template-columns: 1fr; }
  .location-space-img { aspect-ratio: 4/3; min-height: 0; }
  .location-space-content { padding: var(--sp-7) var(--gutter); }
  .location-equipment-grid { grid-template-columns: repeat(2, 1fr); }
  .location-pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .location-booking-inner { grid-template-columns: 1fr; }

  /* Contact */
  .contact-page-inner { grid-template-columns: 1fr; }
  .form-row, .form-row--3 { grid-template-columns: 1fr; }
  .form-row--3 > :first-child { grid-column: auto; }
  .contact-map-grid { grid-template-columns: 1fr; }
  .contact-map-card .btn { width: 100%; }

  /* Corpo */
  .corpo-why-inner { grid-template-columns: 1fr; }
  .corpo-why-text .btn { width: 100%; }
  .corpo-offers-grid { grid-template-columns: 1fr; }
  .corpo-process-steps { grid-template-columns: 1fr; }
  .corpo-step { padding: var(--sp-5) 0; border-right: none; border-bottom: 1px solid var(--border); }
  .corpo-step:last-child { border-bottom: none; }
  .corpo-cta-btns { flex-direction: column; }
  .corpo-cta-btns .btn { width: 100%; }

  /* À propos */
  .apropos-inner { grid-template-columns: 1fr; gap: var(--sp-6); }
  .apropos-media { aspect-ratio: 16/11; }
  .apropos-cta .btn { flex: 1 1 100%; }

  /* Pied de page */
  .footer-links { grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-4); }
  .footer-col:last-child { grid-column: 1 / -1; }
  .footer-deco-text { font-size: clamp(2.5rem, 13vw, 5rem); }
}

/* ── 561 → 768px — grille de cours ──
   Une carte pleine largeur donnerait une photo de plus de 400px de haut :
   on reste sur deux colonnes. Ce bloc doit rester APRÈS le palier 768. */
@media (min-width: 561px) and (max-width: 768px) {
  .cours-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── ≤ 560px — mobile étroit ── */
@media (max-width: 560px) {
  /* Les quatre libellés se partagent la largeur : pas de défilement
     latéral, des cibles tactiles larges. */
  .cours-filter { flex: 1 1 0; min-width: 0; padding-inline: 0.5rem; }
  /* Boutons de téléchargement pleine largeur, plus faciles à viser. */
  .cal-app-stores { flex-direction: column; align-items: stretch; }
  .cal-app-store { min-width: 0; }
}

/* ── ≤ 480px — petit mobile ── */
@media (max-width: 480px) {
  .tcard { flex-basis: 88vw; }
  .location-equipment-grid { grid-template-columns: repeat(2, 1fr); }
  .tarifs-calculator-result { grid-template-columns: 1fr; }
  .assur-badge { width: 104px; height: 104px; }
  .pf-rail > .cours-item { flex-basis: 88vw; }
}

/* ── Téléphone en paysage ── */
@media (max-width: 896px) and (orientation: landscape) and (max-height: 500px) {
  :root { --sec-v: 2.5rem; }
  #hero { height: 100svh; min-height: 380px; }
}


/* ═══ 22 · ACCESSIBILITÉ — MOUVEMENT RÉDUIT ══════════════
   Le contenu reste visible, simplement sans mouvement. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .js-reveal .gs-reveal,
  .js-reveal .gs-stagger > * { opacity: 1 !important; transform: none !important; }
  /* Le panneau et son voile apparaissent d'un coup, sans glissement. */
  #nav-menu, .nav-scrim { transition: none; }
}