/* ==========================================================================
   MAISON INNERBLOOM PILATES · STYLES v4
   Mobile-first. Variables : tokens.css. Parti pris et catalogue des animations :
   docs/08-design-v2.md (sections « v4 » et « v3 » en tête).

   Système typographique v3 (sobre, maîtrisé)
     Titres  : Cormorant Garamond 400, romain. Italique réservé à la signature finale.
     Texte   : Jost 400/500, casse normale. Plus de capitales espacées décoratives.
     Repères : un « kicker » en casse normale (moka texte) quand le titre ne nomme pas la section.
     Filets  : seulement pour séparer des lignes d'information (listes, coordonnées).

   Sommaire
     1. Base, typographie, utilitaires
     2. Boutons et liens
     3. Bandeau d'annonce et en-tête (+ menu mobile)
     4. Hero
     5. La Maison (image, grande phrase, citation, valeurs) · 5 bis. Les fondatrices (v4)
     6. Le studio (grande image, chiffres et pièces, matériel, paire d'images, repères)
     7. Les cours
     8. Horaire, agenda (maquette autonome) et carte Réservation
     9. L'équipe
    10. Membres fondateurs
    11. Événements
    12. Nous trouver (bandeau Magog) et formulaire
    13. Suivez-nous et pied de page
    14. Mouvement + reduced-motion + ?static
    15. Outils de maquette (À RETIRER À L'INTÉGRATION)
   ========================================================================== */


/* ==========================================================================
   1. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background-color: var(--ib-bg);
  scroll-padding-top: calc(var(--ib-header-h) + var(--ib-frame) + 1rem);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  background-color: var(--ib-bg);
  font-family: var(--ib-font-text);
  font-size: var(--ib-fs-body);
  font-weight: 400;
  line-height: var(--ib-lh-body);
  color: var(--ib-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  --focus: var(--ib-focus);
}

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p, ul, ol, dl, dd, figure, blockquote, h1, h2, h3, h4 { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
sup { font-size: .62em; line-height: 0; vertical-align: .55em; }
h2 sup { font-size: .42em; vertical-align: 1.1em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
main:focus { outline: none; }

h1, h2, h3, h4 {
  font-family: var(--ib-font-display);
  font-weight: 400;
  line-height: var(--ib-lh-title);
  letter-spacing: -.01em;
  text-wrap: balance;
}
h2 { font-size: var(--ib-fs-h2); max-width: 15ch; }
p { text-wrap: pretty; }

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

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

.skip-link {
  position: absolute; left: 1rem; top: .75rem; z-index: 100;
  padding: .75rem 1.25rem; border-radius: var(--ib-radius-pill);
  background: var(--ib-espresso); color: var(--ib-on-dark); text-decoration: none;
  font-size: var(--ib-fs-small); font-weight: 500;
  transform: translateY(-160%);
  transition: transform var(--ib-dur-fast) var(--ib-ease-out);
}
.skip-link:focus { transform: none; }

.container {
  width: min(100% - 2 * var(--ib-gutter), var(--ib-max));
  margin-inline: auto;
}

.section { padding-block: var(--ib-section); }

[id] { scroll-margin-top: calc(var(--ib-header-h) + var(--ib-frame) + 1rem); }

/* Repère de section : casse normale, sans filet ni capitales (remplace l'ancien surtitre) */
.kicker {
  margin-bottom: 1rem;
  font-family: var(--ib-font-text);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .01em;
  color: var(--ib-accent-text);
}
.kicker--dark { color: var(--ib-on-dark); }

.lead {
  font-size: var(--ib-fs-lead);
  line-height: 1.6;
  color: var(--ib-text-muted);
  max-width: 34rem;
}
.note { font-size: var(--ib-fs-small); color: var(--ib-text-muted); }

.icon { width: 1.15em; height: 1.15em; flex: none; }

/* En-tête de section : repère à gauche, titre à droite (≥ 1024 px), alignés sur la grille 12 colonnes */
.section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head .lead { margin-top: var(--ib-space-5); }
@media (min-width: 64em) {
  .section-head--split {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
  }
  .section-head--split .kicker { grid-column: 1 / 5; align-self: start; margin-top: 1rem; }
  .section-head--split h2 { grid-column: 5 / 13; }
  .section-head--split .lead { grid-column: 5 / 11; }
}

/* Cadre photo : coins arrondis, image en cover (marge de 8 % pour la parallaxe) */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--ib-radius-lg);
  background: var(--ib-sable);
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: 1.08;             /* propriété individuelle : compose avec `translate` (parallaxe) */
}
.frame--portrait  { aspect-ratio: 4 / 5; }
.frame--landscape { aspect-ratio: 3 / 2; }
.frame--flat img { scale: 1; }   /* photos de basse définition ou photos réelles : aucun agrandissement ni parallaxe */


/* ==========================================================================
   2. BOUTONS ET LIENS
   ========================================================================== */
.btn {
  --btn-bg: var(--ib-espresso);
  --btn-fg: var(--ib-on-dark);
  --btn-border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 3rem;
  max-width: 100%;
  padding: 0 1.5rem;
  border: 1px solid var(--btn-border);
  border-radius: var(--ib-radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--ib-font-text);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    transform var(--ib-dur-press) var(--ib-ease-out),
    background-color var(--ib-dur-fast) var(--ib-ease-hover),
    color var(--ib-dur-fast) var(--ib-ease-hover),
    border-color var(--ib-dur-fast) var(--ib-ease-hover);
}
.btn:active { transform: scale(.97); }
@media (max-width: 22.49em) {
  .btn { white-space: normal; text-align: center; padding-inline: 1.25rem; }
}
.btn .icon { width: 1.2em; height: 1.2em; }
.btn--dark   { --btn-bg: var(--ib-espresso); --btn-fg: var(--ib-on-dark); }
.btn--light  { --btn-bg: #FFFFFF; --btn-fg: var(--ib-espresso); }
.btn--cream  { --btn-bg: var(--ib-on-dark); --btn-fg: var(--ib-espresso); }
.btn--ghost-light { --btn-bg: rgba(255, 255, 255, .06); --btn-fg: #FFFFFF; --btn-border: rgba(255, 255, 255, .72); }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--ib-encre); --btn-border: var(--ib-espresso); }
.btn--small { min-height: 2.75rem; padding: 0 1.25rem; font-size: .875rem; }
.btn--block { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .btn--dark:hover { --btn-bg: var(--ib-encre); }
  .btn--light:hover, .btn--cream:hover { --btn-bg: var(--ib-beige); }
  .btn--ghost-light:hover { --btn-bg: rgba(255, 255, 255, .16); --btn-border: #FFFFFF; }
  .btn--outline:hover { --btn-bg: var(--ib-espresso); --btn-fg: var(--ib-on-dark); }
}

/* Lien éditorial : filet léger au repos, filet plein qui se dessine au survol */
.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  color: var(--ib-accent-text);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
}
.link::before, .link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .55rem;
  height: 1px;
  background: currentColor;
}
.link::before { opacity: .3; }
.link::after {
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 300ms var(--ib-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .link:hover::after { transform: scaleX(1); transform-origin: left center; }
}


/* ==========================================================================
   3. BANDEAU D'ANNONCE ET EN-TÊTE
   ========================================================================== */
[data-phase="pre"]  [data-phase-only="open"],
[data-phase="open"] [data-phase-only="pre"] { display: none !important; }

.announce {
  --focus: var(--ib-moka-light);
  background: var(--ib-espresso);
  color: var(--ib-on-dark);
}
.announce__text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .25rem .9rem;
  min-height: var(--ib-announce-h);
  padding: .35rem var(--ib-gutter);
  font-size: .8125rem;
  font-weight: 400;
  letter-spacing: .01em;
  text-align: center;
}
.announce__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  color: var(--ib-moka-light);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
}
.announce__link::after { content: ""; position: absolute; inset: -.375rem -.5rem; }   /* cible 44 px */

/* En-tête collant posé sur la carte du hero (marge négative = hauteur occupée nulle) */
.site-header {
  --focus: #FFFFFF;
  position: sticky;
  top: 0;
  z-index: var(--ib-z-header);
  padding: var(--ib-frame) var(--ib-frame) 0;
  margin-bottom: calc(-1 * (var(--ib-header-h) + var(--ib-frame)));
  color: #FFFFFF;
  pointer-events: none;
  transition: color var(--ib-dur-base) var(--ib-ease-hover);
}
.site-header__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--ib-header-h);
  padding-inline: var(--ib-card-pad);
  pointer-events: auto;
}
.site-header__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--ib-radius-lg);
  background: rgba(251, 248, 243, .95);
  box-shadow: var(--ib-shadow-float), inset 0 0 0 1px rgba(59, 42, 32, .06);
  opacity: 0;
  transform: translateY(-.5rem);
  transition:
    opacity var(--ib-dur-base) var(--ib-ease-out),
    transform var(--ib-dur-base) var(--ib-ease-out);
}
.site-header.is-scrolled,
html:not(.js) .site-header,
.menu-open .site-header { color: var(--ib-encre); --focus: var(--ib-focus); }
.site-header.is-scrolled .site-header__bar::before,
html:not(.js) .site-header__bar::before { opacity: 1; transform: none; }
html:not(.js) .brand__logo--light { opacity: 0; }
html:not(.js) .brand__logo--dark { opacity: 1; }
html:not(.js) .btn--header { --btn-bg: var(--ib-espresso); --btn-fg: var(--ib-on-dark); --btn-border: var(--ib-espresso); }
html:not(.js) .burger { display: none; }
/* QA4-04 : sans JavaScript, sous 1024 px le menu plein écran restait caché (visibility:hidden) ET sans bouton : plus aucune navigation.
   On affiche alors les liens en rangée sous le logo, l'en-tête n'est plus collant et ne chevauche plus le hero. */
@media (max-width: 63.99em) {
  html:not(.js) .site-header { position: relative; margin-bottom: 0; padding-bottom: .5rem; background: var(--ib-creme); }
  html:not(.js) .site-header__bar { flex-wrap: wrap; height: auto; padding-block: .25rem; }
  html:not(.js) .site-nav { position: static; order: 3; flex-basis: 100%; padding: 0; background: none; visibility: visible; opacity: 1; transition: none; }
  html:not(.js) .site-nav__list { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
  html:not(.js) .site-nav__list li { opacity: 1; transform: none; transition: none; }
  html:not(.js) .site-nav__link { min-height: 2.75rem; border: 0; font-family: var(--ib-font-text); font-size: .9375rem; font-weight: 500; }
  html:not(.js) .site-nav__foot { display: none; }
  html:not(.js) .hero__inner { padding-top: 1.5rem; }
}

.brand {
  position: relative;
  z-index: 2;
  display: block;
  width: clamp(9rem, 16vw, 15rem);   /* v5 : logo nettement plus grand (retour des clientes) */
  aspect-ratio: 720 / 309;
  margin-left: -.6rem;   /* compense la marge transparente du fichier logo */
  transform-origin: left center;
  transition: transform var(--ib-dur-base) var(--ib-ease-out);
}
.brand__logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity var(--ib-dur-base) var(--ib-ease-hover);
}
.brand__logo--dark { opacity: 0; }
.site-header.is-scrolled .brand { transform: scale(.72); }
.site-header.is-scrolled .brand__logo--light,
.menu-open .brand__logo--light { opacity: 0; }
.site-header.is-scrolled .brand__logo--dark,
.menu-open .brand__logo--dark { opacity: 1; }

.site-header__actions {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.btn--header {
  --btn-bg: transparent;
  --btn-fg: currentColor;
  --btn-border: currentColor;
  min-height: 2.75rem;
  padding: 0 1.15rem;
  font-size: .875rem;
}
.site-header.is-scrolled .btn--header,
.menu-open .btn--header { --btn-bg: var(--ib-espresso); --btn-fg: var(--ib-on-dark); --btn-border: var(--ib-espresso); }

.burger {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: currentColor;
  -webkit-tap-highlight-color: transparent;
}
.burger__bar {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.4rem;
  height: 1px;
  margin-left: -.7rem;
  background: currentColor;
  transition: transform var(--ib-dur-base) var(--ib-ease-out);
}
.burger__bar:nth-child(1) { transform: translateY(-4px); }
.burger__bar:nth-child(2) { transform: translateY(4px); }
.burger[aria-expanded="true"] .burger__bar:nth-child(1) { transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar:nth-child(2) { transform: rotate(-45deg); }

/* Menu mobile : panneau plein écran crème, liens en grande typo */
.site-nav {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--ib-header-h) + var(--ib-frame) + 2.5rem) var(--ib-gutter) 2rem;
  background: var(--ib-creme);
  color: var(--ib-encre);
  visibility: hidden;
  opacity: 0;
  transition: opacity 200ms var(--ib-ease-out), visibility 0s linear 200ms;
}
.site-nav.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 280ms var(--ib-ease-out), visibility 0s;
}
.site-nav__list { display: grid; }
.site-nav__list li {
  opacity: 0;
  transform: translateY(.75rem);
  transition: opacity 200ms var(--ib-ease-out), transform 200ms var(--ib-ease-out);
}
.site-nav.is-open .site-nav__list li {
  opacity: 1;
  transform: none;
  transition-duration: 400ms;
  transition-delay: calc(40ms + var(--i, 0) * 40ms);
}
.site-nav__link {
  display: flex;
  align-items: center;
  min-height: 3.5rem;
  border-bottom: 1px solid var(--ib-line);
  font-family: var(--ib-font-display);
  font-size: clamp(2rem, 8vw, 2.75rem);
  line-height: 1.1;
  text-decoration: none;
}
.site-nav__link[aria-current] { color: var(--ib-accent-text); }
.site-nav__foot {
  font-family: var(--ib-font-display);
  font-size: 1.5rem;
  color: var(--ib-accent-text);
}
.menu-open, .menu-open body { overflow: hidden; }

@media (min-width: 64em) {
  .burger { display: none; }
  .site-nav {
    position: static;
    z-index: 2;
    display: block;
    padding: 0;
    background: none;
    color: inherit;
    visibility: visible;
    opacity: 1;
    transition: none;
  }
  .site-nav__list { display: flex; gap: clamp(1.25rem, 2.4vw, 2.5rem); }
  .site-nav__list li { opacity: 1; transform: none; transition: none; }
  .site-nav__link {
    position: relative;
    min-height: 2.75rem;
    border: 0;
    font-family: var(--ib-font-text);
    font-size: .9375rem;
    font-weight: 500;
    letter-spacing: .01em;
  }
  .site-nav__link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: .55rem;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 300ms var(--ib-ease-out);
  }
  .site-nav__link[aria-current] { color: inherit; }
  .site-nav__link[aria-current]::after { transform: scaleX(1); }
  .site-nav__foot { display: none; }
}
@media (min-width: 64em) and (hover: hover) and (pointer: fine) {
  .site-nav__link:hover::after { transform: scaleX(1); transform-origin: left center; }
}


/* ==========================================================================
   4. HERO · photo plein cadre dans une carte arrondie, texte en bas à gauche
   Voile mesuré (scripts/qa2/imgcontrast.cjs) : haut pour l'en-tête, bas + gauche pour le texte.
   ========================================================================== */
.hero { padding: var(--ib-frame) var(--ib-frame) 0; }
.hero__card {
  --focus: #FFFFFF;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: clamp(36rem, calc(100svh - var(--ib-announce-h) - 2 * var(--ib-frame)), 60rem);
  overflow: hidden;
  border-radius: var(--ib-radius-xl);
  background: #6B5645;     /* teinte moyenne de la photo : aucun flash au chargement */
  color: #FFFFFF;
}
.hero__media {
  position: absolute;
  inset: -9% 0 0;          /* marge haute pour la parallaxe (translate vers le bas) */
  z-index: -2;
  overflow: hidden;
}
.hero__media picture, .hero__img { width: 100%; height: 100%; }
/* Cadrage (QA4-02, photo v4c) : la femme (tête ≈ 57 % de la largeur et 27 % de la hauteur) fait une extension de jambe à genoux sur un
   Reformer qui occupe 30–95 % de la largeur et le bas du cadre ; la jambe tendue va de 35 à 73 %. Paysage : on garde le bas (plancher et
   Reformer) en biais vers le bas quand la carte est plus large que 16:9, et le dézoom part du bas pour que le Reformer ne soit jamais rogné.
   Portrait (< 768 px, ou portrait < 1024 px) : recadrage portrait fourni, centré sur la femme (≈ 55 %). Vérifié de 320 à 1920 px
   (scripts/qa4/frame.cjs). */
.hero__img { object-fit: cover; object-position: 60% 70%; transform-origin: 66% 60%; }   /* v5 : fente basse, sujet à ~65 % */
@media (max-width: 47.99em), (max-aspect-ratio: 1/1) and (max-width: 63.99em) {
  .hero__img { object-position: 50% 40%; transform-origin: 50% 30%; }
}
/* QA4-01 · Voile allégé et chaud, refait pour la photo v4c (femme à genoux sur un Reformer, studio aux arches et aux oliviers).
   Avant (v4) : noir rgb(28 19 13) jusqu'à .9, carte du hero ramenée à ~80/255 de luminance moyenne (« boueux »).
   Après : brun chaud rgb(36 24 16), local. Paysage : une poche d'ombre en bas à gauche, là où le titre passe sur les rideaux clairs, un
   ruban léger en haut pour la navigation (et un coin sombre pour le logo, blanc sur les rideaux : 2,4:1 sans lui), une petite poche en bas à droite pour l'adresse ; la femme, le Reformer et la lumière de droite
   restent intacts (luminance moyenne ~86-94/255 ; photo sans voile : 105-115). Portrait : dégradé vertical court (~65-75/255 ; sans voile : 89),
   palier plus haut sous 23 em (le kicker y monte dans la photo).
   Mesuré au pixel (scripts/qa4/herocontrast.cjs, 320 à 1920 px, texte rendu transparent) : texte normal ≥ 4,5:1 et grand texte ≥ 3:1
   sur la moyenne du fond sous chaque boîte de texte. */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(36, 24, 16, .58) 0%, rgba(36, 24, 16, .30) 14%, rgba(36, 24, 16, 0) 26%),
    linear-gradient(180deg, rgba(36, 24, 16, 0) 28%, rgba(36, 24, 16, .46) 44%, rgba(36, 24, 16, .34) 68%, rgba(36, 24, 16, .46) 100%);
}
@media (max-width: 23em) {
  .hero__veil {
    background:
      linear-gradient(180deg, rgba(36, 24, 16, .58) 0%, rgba(36, 24, 16, .30) 14%, rgba(36, 24, 16, 0) 26%),
      linear-gradient(180deg, rgba(36, 24, 16, 0) 14%, rgba(36, 24, 16, .48) 28%, rgba(36, 24, 16, .36) 68%, rgba(36, 24, 16, .48) 100%);
  }
}
@media (min-width: 64em), (min-width: 48em) and (min-aspect-ratio: 1/1) {
  .hero__veil {
    /* v5 : mur beige clair à gauche -> voile brun horizontal derrière le titre ; la femme (à droite) et la lumière restent intactes */
    background:
      radial-gradient(ellipse 30% 22% at 0% 0%, rgba(36, 24, 16, .50) 0%, rgba(36, 24, 16, .28) 50%, rgba(36, 24, 16, 0) 100%),
      linear-gradient(180deg, rgba(36, 24, 16, .58) 0%, rgba(36, 24, 16, .32) 14%, rgba(36, 24, 16, 0) 28%),
      linear-gradient(90deg, rgba(36, 24, 16, .66) 0%, rgba(36, 24, 16, .60) 30%, rgba(36, 24, 16, .30) 50%, rgba(36, 24, 16, 0) 62%),
      radial-gradient(ellipse 46% 40% at 100% 100%, rgba(36, 24, 16, .72) 0%, rgba(36, 24, 16, .40) 55%, rgba(36, 24, 16, 0) 100%);
  }
}
.hero__inner {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--ib-header-h) + var(--ib-frame) + 1.5rem) var(--ib-card-pad) var(--ib-card-pad);
}
.hero__kicker {
  margin-bottom: 1.25rem;
  text-shadow: 0 1px 14px rgba(20, 12, 8, .45);   /* halo discret : points clairs du rideau */
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: #FFFFFF;
}
.hero__title {
  max-width: none;
  font-size: clamp(3.25rem, 14vw, 6rem);
  line-height: .92;
  letter-spacing: -.025em;
  text-wrap: nowrap;
}
.mask {
  display: block;
  overflow: hidden;
  padding-bottom: .1em;
  margin-bottom: -.1em;
}
.mask__inner { display: inline-block; }
@media (min-width: 48em) {
  .mask--indent { padding-left: .62em; }
}

.hero__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
  align-items: end;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.hero__lead {
  max-width: 22ch;
  font-family: var(--ib-font-display);
  font-size: clamp(1.5rem, 2.2vw, 2.125rem);
  line-height: 1.2;
  color: #FFFFFF;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.75rem;
}
.hero__meta {
  display: grid;
  gap: .15rem;
  font-size: .875rem;
  line-height: 1.5;
  color: #FFFFFF;
}
.scroll-sentinel { position: absolute; top: 9rem; left: 0; width: 1px; height: 1px; }
@media (min-width: 64em) {
  /* Taille du titre bornée par la largeur ET la hauteur : il reste sous le sujet de la photo */
  .hero__title { font-size: var(--ib-fs-hero); }
  .hero__lead { max-width: none; }
  .hero__bottom { grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; }
  .hero__meta { text-align: right; }
}


/* ==========================================================================
   5. LA MAISON
   ========================================================================== */
.maison__grid { display: grid; gap: 2.5rem; }
.maison__media { order: 2; }
.maison__title { max-width: 14ch; }
.statement {
  margin-top: clamp(1.25rem, 2.4vw, 2rem);
  max-width: 30ch;
  font-family: var(--ib-font-display);
  font-size: var(--ib-fs-statement);
  line-height: 1.25;
  color: var(--ib-encre);
}
.maison__sub { margin-top: clamp(1.5rem, 3vw, 2.25rem); max-width: 34rem; color: var(--ib-text-muted); }
.maison__sub--next { margin-top: 1rem; }
.maison__links { display: flex; flex-wrap: wrap; gap: 0 1.75rem; margin-top: 1rem; }
@media (min-width: 48em) and (max-width: 63.99em) {
  .maison__media { max-width: 26rem; }
}
@media (min-width: 64em) {
  .maison__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
    align-items: center;
  }
  .maison__media { order: 0; grid-column: 1 / 6; }
  .maison__text { grid-column: 7 / 13; }
}

/* Citation des affiches : une respiration, centrée */
.quote {
  margin-block: var(--ib-section);
  text-align: center;
}
.quote blockquote p {
  max-width: 20ch;
  margin-inline: auto;
  font-family: var(--ib-font-display);
  font-size: clamp(2rem, 5vw, 4.25rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  text-wrap: balance;
}

/* Valeurs : un seul filet au-dessus de la rangée, aucune numérotation */
.values__title {
  margin-bottom: 1.25rem;
  font-family: var(--ib-font-text);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--ib-accent-text);
}
.values__list { display: grid; }
.values__item { padding-block: 1.25rem; border-top: 1px solid var(--ib-line); }
.values__name {
  font-family: var(--ib-font-display);
  font-size: var(--ib-fs-h4);
  line-height: 1.2;
}
.values__text { margin-top: .35rem; max-width: 22rem; font-size: .9375rem; color: var(--ib-text-muted); }
@media (min-width: 64em) {
  .values__list { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 2rem; border-top: 1px solid var(--ib-line-strong); }
  .values__item { padding-top: 1.5rem; border-top: 0; }
}


/* ==========================================================================
   5 bis. LES FONDATRICES (v4)
   ========================================================================== */
/* Les fondatrices (v4) : une carte photo 3:2 (520 px maximum : la source mesure 640 px), le « nous » du site,
   deux signatures. Aucune parallaxe : une image douce qui bouge paraîtrait encore plus floue. */
.fondatrices { padding-top: 0; }
.fondatrices h2 { max-width: none; }
.fondatrices .section-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.fondatrices__grid { display: grid; gap: 2.25rem; }
.fondatrices__media { max-width: 32.5rem; }
.fondatrices__media .frame { aspect-ratio: 3 / 2; border-radius: var(--ib-radius-xl); }
.fondatrices__media img { object-position: 50% 40%; }
.fondatrices__media figcaption { margin-top: .75rem; font-size: .875rem; color: var(--ib-text-muted); }
.fondatrices__text .lead {
  max-width: 30rem;
  font-family: var(--ib-font-display);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.25;
  color: var(--ib-encre);
}
.fondatrices__body { margin-top: 1.25rem; max-width: 30rem; color: var(--ib-text-muted); }
.signatures { margin-top: 2rem; border-top: 1px solid var(--ib-line-strong); }
.signature-item { padding-block: 1.25rem; border-bottom: 1px solid var(--ib-line); }
.signature-item__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .1rem 1.5rem; }
.signature-item__name { font-size: 1.625rem; line-height: 1.2; }
.signature-item__role { font-size: .9375rem; font-weight: 500; color: var(--ib-accent-text); }
.signature-item__bio { margin-top: .5rem; max-width: 28rem; font-size: .9375rem; color: var(--ib-text-muted); }
.fondatrices__text > p:last-child { margin-top: 1.25rem; }
@media (min-width: 64em) {
  .fondatrices__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; align-items: start; }
  .fondatrices__media { grid-column: 1 / 7; }
  .fondatrices__text { grid-column: 8 / 13; }
}


/* ==========================================================================
   6. LE STUDIO
   ========================================================================== */
.studio { padding-top: 0; }
.studio__wide { padding-inline: var(--ib-frame); }
.frame--wide {
  aspect-ratio: 4 / 3;
  border-radius: var(--ib-radius-xl);
}
.frame--wide img { object-position: 30% 50%; }
@media (min-width: 48em) {
  .frame--wide { aspect-ratio: 16 / 9; max-height: 88svh; width: 100%; }
  .frame--wide img { object-position: 50% 50%; }
}

/* Chiffres et pièces : l'information du plan, sous forme éditoriale */
.spaces {
  display: grid;
  gap: 2.5rem;
  margin-top: clamp(3rem, 6vw, 5rem);
}
.figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.figures__value {
  font-family: var(--ib-font-display);
  font-size: clamp(3.25rem, 7vw, 6rem);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.figures__pm { font-size: .6em; }
.figures__label { margin-top: .4rem; font-size: .9375rem; color: var(--ib-text-muted); }

.rooms { border-bottom: 1px solid var(--ib-line); }
.rooms__row {
  display: grid;
  gap: .2rem;
  padding-block: 1.1rem;
  border-top: 1px solid var(--ib-line);
}
.rooms dt { font-family: var(--ib-font-display); font-size: 1.375rem; line-height: 1.25; }
.rooms dd { max-width: 30rem; font-size: .9375rem; color: var(--ib-text-muted); }
@media (min-width: 30em) {
  .rooms__row { grid-template-columns: 11rem minmax(0, 1fr); column-gap: 1.5rem; align-items: baseline; }
}
@media (min-width: 64em) {
  .spaces { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; align-items: start; }
  .figures { grid-column: 1 / 5; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .rooms { grid-column: 5 / 13; }
  .rooms__row { grid-template-columns: 14rem minmax(0, 1fr); }
}

/* Le matériel (v4) : photo RÉELLE des Reformers Innerbloom, montrée telle quelle et petite (source : 1500 px) */
.material { display: grid; gap: 1.75rem; margin-top: clamp(4rem, 8vw, 7rem); }
.material__title { max-width: 14ch; font-size: var(--ib-fs-h3); }
.material__body { margin-top: 1rem; max-width: 26rem; color: var(--ib-text-muted); }
.material__fig .frame { aspect-ratio: 3 / 2; }
.material__fig img { object-position: 12% 60%; }
.material__fig figcaption { margin-top: .75rem; font-size: .875rem; color: var(--ib-text-muted); }
@media (min-width: 48em) {
  .material__fig .frame { aspect-ratio: 1500 / 560; }
  .material__fig img { object-position: 50% 50%; }
}
@media (min-width: 64em) {
  .material { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; align-items: end; }
  .material__text { grid-column: 1 / 5; }
  .material__fig { grid-column: 5 / 13; }
}

/* Deux images verticales, en quinconce */
.pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  align-items: start;
  margin-top: clamp(4rem, 8vw, 7rem);
}
.pair__item--offset { margin-top: 3rem; }
.pair figcaption {
  margin-top: .75rem;
  font-family: var(--ib-font-display);
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  line-height: 1.2;
}
.pair__item:first-child .frame img { object-position: 30% 50%; }
@media (min-width: 64em) {
  .pair { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; }
  .pair__item:first-child { grid-column: 1 / 6; }
  .pair__item--offset { grid-column: 7 / 11; margin-top: 9rem; }
}

/* Repères pratiques : quatre lignes de texte, un seul filet */
.assets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem 1.5rem;
  margin-top: clamp(3.5rem, 7vw, 6rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--ib-line-strong);
  font-size: .9375rem;
  color: var(--ib-text);
}
@media (min-width: 64em) { .assets { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 2rem; } }


/* ==========================================================================
   7. LES COURS
   ========================================================================== */
.cours { padding: 0 var(--ib-frame); }
.cours__panel {
  padding-block: var(--ib-section);
  border-radius: var(--ib-radius-xl);
  background: var(--ib-beige);
}
.cours__sticky .lead { margin-top: 1.5rem; }
.cours__media { margin-top: 2.5rem; }
.cours__media .frame { aspect-ratio: 3 / 2; }
.cours__media .frame img { object-position: 50% 45%; }
@media (min-width: 48em) and (max-width: 63.99em) { .cours__media { max-width: 30rem; } }
@media (min-width: 64em) {
  .cours__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
    align-items: start;
  }
  .cours__aside { grid-column: 1 / 6; height: 100%; }
  .cours__sticky { position: sticky; top: calc(var(--ib-header-h) + var(--ib-frame) + 2rem); }
  .cours__media { width: min(100%, 22rem); }
  .cours__media .frame { aspect-ratio: 4 / 5; }
  .cours__main { grid-column: 7 / 13; }
}

.courses { margin-top: 2.5rem; border-top: 1px solid var(--ib-line-strong); }
@media (min-width: 64em) { .courses { margin-top: 0; } }
.course article { padding-block: clamp(1.5rem, 2.6vw, 2.25rem); border-bottom: 1px solid var(--ib-line); }
.course__name {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.1;
}
.course__tag {
  margin-top: .35rem;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--ib-accent-text);
}
.course__text { margin-top: .75rem; max-width: 34rem; color: var(--ib-text-muted); }
.course--soon .course__name { color: var(--ib-text-muted); }
.course--soon .link { margin-top: .5rem; }
.cours__foot { margin-top: 2.5rem; }


/* ==========================================================================
   8. HORAIRE ET AGENDA
   ========================================================================== */
.horaire__head { display: grid; gap: 2.5rem; }
.horaire__head .lead { margin-top: 1.5rem; }
.rhythm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; border-top: 1px solid var(--ib-line-strong); }
.rhythm__item { display: grid; gap: .5rem; align-content: start; padding-top: 1.5rem; }
.rhythm__num {
  font-variant-numeric: lining-nums;
  font-family: var(--ib-font-display);
  font-size: var(--ib-fs-display);
  line-height: .9;
}
.rhythm__label { max-width: 13rem; font-size: .9375rem; line-height: 1.5; color: var(--ib-text-muted); }
@media (min-width: 64em) {
  .horaire__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; align-items: end; }
}
.horaire__note { margin-top: 2rem; }

.wl-grid { display: grid; gap: 1rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 64em) { .wl-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 1.25rem; align-items: start; } }
.wl {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--ib-radius-lg);
  background: var(--ib-surface);
  box-shadow: inset 0 0 0 1px var(--ib-line);
}
.wl__title {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--ib-line);
  font-size: var(--ib-fs-h4);
}
.wl__state-title { max-width: 24rem; font-family: var(--ib-font-display); font-size: 1.5rem; line-height: 1.25; }
.wl__state-text { max-width: 26rem; font-size: .9375rem; color: var(--ib-text-muted); }
.wl__error { display: flex; gap: .6rem; align-items: flex-start; color: var(--ib-error); }
.wl__error .icon { margin-top: .2rem; }
.wl__error a { color: inherit; }
.wl__widget:empty { display: none; }
.wl__mention { margin-top: .9rem; font-size: .8125rem; color: var(--ib-text-muted); }

/* Carte « Réserver un cours » (#reservation) : un message court. Sur mobile elle passe AVANT l'agenda,
   pour que le bouton « Réserver » de l'en-tête dépose le visiteur devant l'agenda. */
.wl--booking { order: -1; }
@media (min-width: 64em) { .wl--booking { order: 0; } }
.wl--booking .wl__body { display: grid; padding-top: 1.25rem; }
.wl--booking .wl__body > div:not(.wl__widget) { display: grid; justify-items: start; gap: .65rem; }
.wl--booking .link { margin-top: .25rem; }

/* --- AGENDA (maquette autonome) ------------------------------------------------------------------
   Calendrier mensuel role="grid" + panneau du jour. Aucune heure, aucune date d'ouverture.
   Le conteneur est un « container » : deux colonnes (calendrier | panneau) seulement s'il y a la place. */
/* QA4-06 : marge intérieure réduite sous 30 em → cases de jour ≥ 44 px dès 360 px de large (43 px avant) ; à 320 px elles font 39 px (AA : 24 px). */
.agenda { container-type: inline-size; padding: 1.5rem .25rem 1.25rem; }
@media (min-width: 30em) { .agenda { padding: clamp(1.5rem, 3vw, 2.5rem); } }
.agenda__head { padding-inline: 1rem; }
@media (min-width: 30em) { .agenda__head { padding-inline: 0; } }
.agenda__help { margin-top: 1rem; font-size: .9375rem; color: var(--ib-text-muted); }

.agenda__banner {
  display: none;
  margin-top: 1.25rem;
  padding: .7rem 1rem;
  border-radius: var(--ib-radius-md);
  background: var(--ib-beige);
  font-size: .875rem;
  line-height: 1.5;
  color: var(--ib-encre);
}
.agenda[data-state="empty"] .agenda__banner--empty,
.agenda[data-state="ready"] .agenda__banner--demo { display: block; }
.agenda:not([data-state="empty"]):not([data-state="ready"]) .agenda__mock { display: none; }

.agenda__layout { display: grid; gap: 1.75rem; margin-top: 1.25rem; }
@container (min-width: 38rem) {
  .agenda__layout { grid-template-columns: minmax(0, 21.5rem) minmax(0, 1fr); column-gap: 1.5rem; }
  .agenda__panel { padding-left: 1.5rem; border-left: 1px solid var(--ib-line); }
}
@container (max-width: 37.99rem) { .agenda__cal { max-width: 26rem; } }

.agenda__nav { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .35rem; }
.agenda__month, .agenda__panel-title { font-variant-numeric: lining-nums; }
.agenda__month { flex: 1; font-size: 1.75rem; line-height: 1.1; text-align: center; text-transform: capitalize; }
.agenda__arrow {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--ib-line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--ib-encre);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform var(--ib-dur-press) var(--ib-ease-out), background-color var(--ib-dur-fast) var(--ib-ease-hover), opacity var(--ib-dur-fast) var(--ib-ease-hover);
}
.agenda__arrow:active { transform: scale(.94); }
.agenda__arrow[aria-disabled="true"] { opacity: .35; cursor: default; }
.agenda__arrow[aria-disabled="true"]:active { transform: none; }
.agenda__arrow-icon--prev { transform: scaleX(-1); }
@media (hover: hover) and (pointer: fine) {
  .agenda__arrow:not([aria-disabled="true"]):hover { background: var(--ib-beige); }
}

.agenda__grid { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: center; }
.agenda__grid th { padding: .6rem 0 .4rem; font-size: .8125rem; font-weight: 500; color: var(--ib-text-muted); }
.agenda__grid td { height: 2.75rem; padding: 0; }
.agenda__grid tbody { transition: opacity 160ms var(--ib-ease-out); }
.agenda__grid.is-swapping tbody { opacity: 0; }
.agenda__day {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: .75rem;
  background: transparent;
  color: var(--ib-text-muted);
  font-size: 1rem;
  font-variant-numeric: lining-nums tabular-nums;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform var(--ib-dur-press) var(--ib-ease-out), background-color var(--ib-dur-fast) var(--ib-ease-hover), color var(--ib-dur-fast) var(--ib-ease-hover);
}
.agenda__day:active { transform: scale(.94); }
.agenda__day[data-avail="some"] { color: var(--ib-encre); }
.agenda__day[data-avail="some"]::after {
  content: "";
  position: absolute;
  bottom: .4rem;
  width: .25rem;
  height: .25rem;
  border-radius: 50%;
  background: currentColor;
}
.agenda__day[aria-current="date"] { box-shadow: inset 0 0 0 1px var(--ib-line-strong); }
@media (hover: hover) and (pointer: fine) {
  .agenda__day:hover { background: var(--ib-beige); color: var(--ib-encre); }
}
.agenda__grid td[aria-selected="true"] .agenda__day { background: var(--ib-espresso); color: var(--ib-on-dark); }
.agenda__day:focus-visible { outline: 2px solid var(--ib-focus); outline-offset: 2px; }
.agenda__nojs { margin-top: 1rem; font-size: .9375rem; color: var(--ib-text-muted); }
html:not(.js) .agenda__nav, html:not(.js) .agenda__grid, html:not(.js) .agenda__help,
html:not(.js) .agenda__panel-title, html:not(.js) .agenda__panel-body { display: none; }

.agenda__panel { display: flex; flex-direction: column; min-height: 14rem; }
.agenda__panel-title { font-size: 1.5rem; line-height: 1.2; }
.agenda__panel-body { display: grid; gap: .75rem; margin-top: .75rem; max-width: 28rem; font-size: .9375rem; color: var(--ib-text-muted); }
.agenda__panel-body strong { font-weight: 500; color: var(--ib-encre); }
.agenda__plages { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .1rem; }
.agenda__plage {
  padding: .3rem .8rem;
  border: 1px solid var(--ib-line-strong);
  border-radius: var(--ib-radius-pill);
  font-size: .875rem;
  line-height: 1.4;
  color: var(--ib-encre);
}
.agenda__cta { margin-top: auto; padding-top: 1.5rem; font-size: .9375rem; }
.agenda__cta > div, .agenda__cta > p { padding-top: 1.1rem; border-top: 1px solid var(--ib-line); }
.agenda__cta p { max-width: 26rem; color: var(--ib-text-muted); }
.agenda__cta .link { margin-top: .15rem; }

.agenda__state { display: none; align-content: start; gap: 1rem; min-height: 22rem; margin-top: 1.5rem; }
.agenda[data-state="loading"] .agenda__state--loading,
.agenda[data-state="error"] .agenda__state--error { display: grid; }
.agenda__state--error .btn { justify-self: start; }
.agenda__state-text { font-size: .9375rem; color: var(--ib-text-muted); }

/* Calendly : réservé (masqué tant que data-provider="mock") */
.agenda__embed { min-height: 44rem; margin-top: 1.5rem; }
.agenda__consent { display: grid; justify-items: start; gap: 1rem; max-width: 30rem; padding: 1.5rem; border-radius: var(--ib-radius-md); background: var(--ib-beige); font-size: .9375rem; }
.agenda__mount { width: 100%; min-width: 320px; }
.agenda__mount:empty { display: none; }
.agenda__alt { margin-top: 1rem; font-size: .9375rem; }

.skeleton { display: grid; gap: .8rem; }
.skeleton span {
  display: block;
  width: var(--w, 100%);
  height: .75rem;
  border-radius: .5rem;
  background: var(--ib-sable);
}
.skeleton .skeleton__field { height: 2.75rem; }
@media (prefers-reduced-motion: no-preference) {
  .skeleton span { animation: ib-pulse 1.2s ease-in-out infinite alternate; }
  .skeleton span:nth-child(2) { animation-delay: .15s; }
  .skeleton span:nth-child(3) { animation-delay: .3s; }
  .skeleton span:nth-child(4) { animation-delay: .45s; }
}
@keyframes ib-pulse { from { opacity: .45; } to { opacity: 1; } }


/* ==========================================================================
   9. L'ÉQUIPE
   ========================================================================== */
.equipe { padding-top: 0; }
.equipe__grid { display: grid; gap: 1.5rem; }
.equipe__text { display: grid; gap: 1.25rem; }
.equipe__text > p:last-child { max-width: 34rem; color: var(--ib-text-muted); }
.pillars { display: grid; margin-top: 2rem; }
.pillar { padding-block: 1.5rem; border-top: 1px solid var(--ib-line); }
.pillar__title { font-size: var(--ib-fs-h4); }
.pillar p { margin-top: .4rem; font-size: .9375rem; color: var(--ib-text-muted); max-width: 22rem; }
@media (min-width: 48em) {
  .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2rem; border-top: 1px solid var(--ib-line-strong); }
  .pillar { border-top: 0; }
}
@media (min-width: 64em) {
  .equipe__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; row-gap: 0; align-items: start; }
  .equipe__head { grid-column: 1 / 6; }
  .equipe__text { grid-column: 7 / 13; padding-top: 2.5rem; }
  .pillars { grid-column: 1 / 13; margin-top: clamp(3.5rem, 6vw, 5rem); }
}


/* ==========================================================================
   10. MEMBRES FONDATEURS VIP (bloc taupe profond, arche : motif des affiches)
   ========================================================================== */
.members { padding: 0 var(--ib-frame); }
.members__card {
  --focus: var(--ib-on-dark);
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(.75rem, 3vw, 3rem) clamp(.75rem, 3vw, 3rem) clamp(2.5rem, 5vw, 4rem);
  border-radius: var(--ib-radius-xl);
  background: var(--ib-taupe-deep);
  color: var(--ib-on-dark);
}
.arch {
  --arch-v: 40%;          /* rayon vertical = 1/2 largeur pour un ratio 4:5 */
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 50% 50% var(--ib-radius-lg) var(--ib-radius-lg) / var(--arch-v) var(--arch-v) var(--ib-radius-lg) var(--ib-radius-lg);
  background: var(--ib-taupe);
}
.arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; scale: 1.08; }
.members__content { padding: .5rem clamp(.5rem, 2vw, 1rem) 0; }
.members h2 { color: var(--ib-on-dark); }
.members__intro { margin-top: 1.25rem; max-width: 32rem; font-size: var(--ib-fs-lead); }
.perks { margin-top: 1.75rem; border-bottom: 1px solid var(--ib-line-dark); }
.perks__item {
  padding-block: .85rem;
  border-top: 1px solid var(--ib-line-dark);
  font-size: 1rem;
  line-height: 1.5;
}
.members__how { margin-top: 1.75rem; max-width: 32rem; }
.members__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.5rem; }
.members__actions .btn--ghost-light { --btn-border: rgba(244, 237, 228, .72); --btn-fg: var(--ib-on-dark); --btn-bg: transparent; }
.members__alt { margin-top: 1.25rem; font-size: .9375rem; }
.members__alt a { color: inherit; text-underline-offset: .25em; }
@media (min-width: 48em) {
  .members__media { max-width: 30rem; }
  .arch { --arch-v: 37.5%; aspect-ratio: 3 / 4; }
}
@media (min-width: 64em) {
  .members__card { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; padding: clamp(1rem, 2.4vw, 2.5rem); }
  .members__media { max-width: none; }
  .members__content { padding: 2rem clamp(1rem, 4vw, 4rem) 2rem 1rem; }
}


/* ==========================================================================
   11. ÉVÉNEMENTS
   ========================================================================== */
.evenements__grid { display: grid; gap: 2.5rem; }
.evenements__head .lead { margin-top: 1.5rem; }
.evenements__empty { margin-top: 1.75rem; max-width: 30rem; }
.evenements__actions { display: flex; flex-wrap: wrap; gap: 0 1.75rem; margin-top: .25rem; }
.themes { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.themes__title {
  margin-bottom: 1rem;
  font-family: var(--ib-font-text);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--ib-accent-text);
}
.themes__list { border-top: 1px solid var(--ib-line-strong); }
.theme {
  padding-block: .9rem;
  border-bottom: 1px solid var(--ib-line);
  font-family: var(--ib-font-display);
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  line-height: 1.2;
}
@media (min-width: 64em) {
  .evenements__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; align-items: start; }
  .evenements__head { grid-column: 1 / 6; position: sticky; top: calc(var(--ib-header-h) + var(--ib-frame) + 2rem); }
  .evenements__body { grid-column: 7 / 13; }
}


/* ==========================================================================
   12. NOUS TROUVER : bandeau « Magog » (lac Memphrémagog) + coordonnées et formulaire
   Texte espresso sur la brume claire du lac (mesuré), léger voile crème en haut à gauche.
   ========================================================================== */
.trouver { padding: 0 var(--ib-frame); }
.lac {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: clamp(30rem, 80svh, 50rem);
  margin-bottom: var(--ib-frame);
  overflow: hidden;
  border-radius: var(--ib-radius-xl);
  background: #D8C6AE;
  color: var(--ib-espresso);
}
.lac__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.lac__media img { width: 100%; height: 100%; object-fit: cover; object-position: 74% 50%; scale: 1.08; }
.lac__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(246, 241, 234, .5) 0%, rgba(246, 241, 234, .18) 30%, rgba(246, 241, 234, 0) 46%),
    linear-gradient(0deg, rgba(246, 241, 234, .55) 0%, rgba(246, 241, 234, 0) 32%);
}
.lac__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  padding: clamp(2rem, 5vw, 4.5rem) var(--ib-card-pad) var(--ib-card-pad);
}
.lac__place {
  font-family: var(--ib-font-display);
  font-size: clamp(4.5rem, 17vw, 13rem);
  line-height: .9;
  letter-spacing: -.03em;
}
.lac__line {
  max-width: 30rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.55;
}
@media (min-width: 48em) {
  .lac__media img { object-position: 50% 22%; }   /* plus de ciel : « Magog » se pose au-dessus des collines */
}

.trouver__panel {
  padding-block: var(--ib-section);
  border-radius: var(--ib-radius-xl);
  background: var(--ib-beige);
}
.trouver__grid { display: grid; gap: 3rem; }
.coords { margin-top: 2rem; border-bottom: 1px solid var(--ib-line); }
.coords__row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1rem;
  padding-block: .95rem;
  border-top: 1px solid var(--ib-line);
}
.coords dt { font-size: .9375rem; font-weight: 500; color: var(--ib-accent-text); }
.coords dd { font-size: .9375rem; }
.trouver__info > p:last-child { margin-top: .75rem; }

.form {
  padding: clamp(1.5rem, 3.4vw, 3rem);
  border-radius: var(--ib-radius-lg);
  background: var(--ib-ivoire);
  box-shadow: var(--ib-shadow-soft);
}
.form__title { font-size: var(--ib-fs-h3); }
.form__intro { margin-top: .6rem; color: var(--ib-text-muted); }
.form__required { margin: 1.25rem 0 .5rem; font-size: .8125rem; color: var(--ib-text-muted); }
.form__row { display: grid; gap: 0 1rem; }
@media (min-width: 48em) { .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { margin-top: 1.1rem; }
.field__label {
  display: block;
  margin-bottom: .45rem;
  font-size: .9375rem;
  font-weight: 500;
}
.field__control {
  display: block;
  width: 100%;
  min-height: 3.25rem;
  padding: 0 1rem;
  border: 1px solid var(--ib-field-border);
  border-radius: .875rem;
  background: #FFFFFF;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ib-encre);
  transition: border-color var(--ib-dur-fast) var(--ib-ease-hover), box-shadow var(--ib-dur-fast) var(--ib-ease-hover);
}
.field__control::placeholder { color: #75675C; opacity: 1; }
.field__control:focus { outline: none; border-color: var(--ib-espresso); box-shadow: 0 0 0 3px rgba(126, 91, 64, .28); }
.field__control:focus-visible { outline: 2px solid var(--ib-focus); outline-offset: 2px; }
.field__control--area { min-height: 9rem; padding-block: .9rem; resize: vertical; }
.field__select { position: relative; }
.field__select select { appearance: none; -webkit-appearance: none; padding-right: 2.75rem; cursor: pointer; }
.field__select::after {
  content: "";
  position: absolute;
  right: 1.15rem;
  top: 50%;
  width: .5rem;
  height: .5rem;
  margin-top: -.4rem;
  border-right: 1.25px solid var(--ib-espresso);
  border-bottom: 1.25px solid var(--ib-espresso);
  transform: rotate(45deg);
  pointer-events: none;
}
.field__control[aria-invalid="true"] { border-color: var(--ib-error); border-width: 2px; }
.field__error {
  display: flex;
  gap: .45rem;
  align-items: flex-start;
  margin-top: .45rem;
  font-size: .875rem;
  color: var(--ib-error);
}
.field__error .icon { margin-top: .15rem; }
.form-summary {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--ib-error);
  border-radius: var(--ib-radius-md);
  background: #FBEFEC;
  color: var(--ib-error);
}
.form-summary:focus-visible { outline: 2px solid var(--ib-error); outline-offset: 3px; }
.form-summary__title { display: flex; gap: .5rem; align-items: flex-start; font-weight: 500; }
.form-summary__title .icon { margin-top: .2rem; }
.form-summary__list { margin-top: .5rem; padding-left: 1.75rem; font-size: .9375rem; }
.form-summary__list a { color: inherit; }
.form__submit { margin-top: 1.75rem; }
.btn[aria-disabled="true"] { opacity: .6; cursor: progress; }
.form-status:empty { display: none; }
.form-status { margin-top: 1rem; }
.form-status__msg { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .9375rem; }
.form-status__msg--success { color: var(--ib-success); }
.form-status__msg--error { color: var(--ib-error); }
.form-status__msg--info { color: var(--ib-text-muted); }
.form__note { margin-top: 1rem; font-size: .8125rem; color: var(--ib-text-muted); }
@media (min-width: 64em) {
  .trouver__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; align-items: start; }
  .trouver__info { grid-column: 1 / 6; }
  .trouver__form { grid-column: 7 / 13; }
}


/* ==========================================================================
   13. SUIVEZ-NOUS ET PIED DE PAGE (un seul grand bloc espresso)
   ========================================================================== */
.suivre, .site-footer {
  --focus: var(--ib-moka-light);
  margin-inline: var(--ib-frame);
  background: var(--ib-espresso);
  color: var(--ib-on-dark);
}
.suivre {
  margin-top: var(--ib-section);
  padding-top: clamp(4rem, 9vw, 8rem);
  border-radius: var(--ib-radius-xl) var(--ib-radius-xl) 0 0;
}
/* Signature : le seul italique de la page, en écho au h1 */
.signature {
  font-family: var(--ib-font-display);
  font-size: var(--ib-fs-giant);
  line-height: .92;
  letter-spacing: -.03em;
}
.signature__a, .signature__b { display: block; }
.signature__b { font-style: italic; color: var(--ib-moka); }
@media (min-width: 48em) { .signature__b { padding-left: .62em; } }
.suivre__row {
  display: grid;
  gap: 1.25rem;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--ib-line-dark);
}
.suivre h2 { font-size: var(--ib-fs-h3); color: var(--ib-on-dark); }
.suivre__text { max-width: 30rem; color: var(--ib-on-dark-muted); }
.suivre__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.suivre .btn--ghost-light { --btn-border: rgba(244, 237, 228, .6); --btn-fg: var(--ib-on-dark); --btn-bg: transparent; }
@media (min-width: 64em) {
  .suivre__row { grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr); align-items: center; gap: 2rem; }
  .suivre__actions { justify-content: flex-end; }
}

.site-footer {
  margin-bottom: var(--ib-frame);
  padding-bottom: 1.5rem;
  border-radius: 0 0 var(--ib-radius-xl) var(--ib-radius-xl);
}
.site-footer__grid {
  display: grid;
  gap: 2.5rem;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--ib-line-dark);
}
.site-footer__brand img { width: 11rem; margin-left: -.9rem; }
.site-footer__title {
  margin-bottom: .75rem;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--ib-on-dark-muted);
}
.site-footer__col ul { display: grid; gap: 0; font-size: .9375rem; }
.site-footer__address { padding-block: .6rem; }
.site-footer__col a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  text-decoration: underline;
  text-decoration-color: rgba(244, 237, 228, .3);
  text-underline-offset: .3em;
  transition: text-decoration-color var(--ib-dur-fast) var(--ib-ease-hover);
}
@media (hover: hover) and (pointer: fine) { .site-footer__col a:hover { text-decoration-color: currentColor; } }
.site-footer__legal {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ib-line-dark);
  font-size: .8125rem;
  color: var(--ib-on-dark-muted);
}
.site-footer__legal a { color: inherit; text-underline-offset: .25em; }
.site-footer__legal p > a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.to-top {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(244, 237, 228, .45);
  border-radius: 50%;
  color: var(--ib-on-dark);
  transition: transform var(--ib-dur-press) var(--ib-ease-out), border-color var(--ib-dur-fast) var(--ib-ease-hover);
}
.to-top:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .to-top:hover { border-color: var(--ib-on-dark); } }
@media (min-width: 48em) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .site-footer__grid { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); } }


/* ==========================================================================
   14. MOUVEMENT
   Règles : transform / opacity (+ clip-path pour les dévoilements d'images).
   Entrées 500–600 ms en ease-out fort ; interactions ≤ 300 ms.
   Exception assumée : dézoom de la photo du hero sur 18 s (presque imperceptible, une seule fois).
   Les états masqués n'existent que sous .js ET sans réduction de mouvement ET hors ?static.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* --- Hero : arrivée (une seule fois) puis respiration lente de la photo --- */
  .js:not(.reveal-all) .hero__card { animation: ib-card-in var(--ib-dur-hero) var(--ib-ease-expo) both; }
  .js:not(.reveal-all) .hero__img  { animation: ib-kenburns var(--ib-dur-kenburns) cubic-bezier(.25, .6, .3, 1) both; }
  .js:not(.reveal-all) .mask__inner {
    animation: ib-rise var(--ib-dur-hero) var(--ib-ease-expo) both;
    animation-delay: calc(180ms + var(--d, 0) * 90ms);
  }
  .js:not(.reveal-all) .hero__fade {
    animation: ib-fade-up 500ms var(--ib-ease-out) both;
    animation-delay: calc(420ms + var(--d, 0) * 70ms);
  }
  .js:not(.reveal-all) .site-header__bar { animation: ib-fade 500ms ease both 300ms; }

  /* --- Révélations au défilement (cascade via --i, 60 ms) --- */
  .js:not(.reveal-all) .reveal {
    opacity: 0;
    transform: translate3d(0, 1rem, 0);
    transition:
      opacity var(--ib-dur-reveal) var(--ib-ease-out),
      transform var(--ib-dur-reveal) var(--ib-ease-out);
    transition-delay: calc(var(--i, 0) * var(--ib-stagger));
  }
  .js:not(.reveal-all) .reveal.is-visible { opacity: 1; transform: none; }

  /* --- Dévoilement d'images : rideau qui monte + léger dézoom --- */
  .js:not(.reveal-all) .frame--reveal {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 600ms var(--ib-ease-expo);
  }
  .js:not(.reveal-all) .frame--reveal img {
    scale: 1.16;
    transition: scale 600ms var(--ib-ease-out);
  }
  .js:not(.reveal-all) .frame--reveal.is-visible { clip-path: inset(0 0 0 0); }
  .js:not(.reveal-all) .frame--reveal.is-visible img { scale: 1.08; }
  .js:not(.reveal-all) .frame--reveal.frame--flat img { scale: 1.05; }
  .js:not(.reveal-all) .frame--reveal.frame--flat.is-visible img { scale: 1; }
}

@keyframes ib-card-in {
  from { clip-path: inset(2% 1.5% 2% 1.5% round var(--ib-radius-xl)); }
  to   { clip-path: inset(0 0 0 0 round var(--ib-radius-xl)); }
}
@keyframes ib-kenburns { from { transform: scale(1.09); } to { transform: none; } }
@keyframes ib-rise    { from { transform: translate3d(0, 108%, 0); } to { transform: none; } }
@keyframes ib-fade-up { from { opacity: 0; transform: translate3d(0, .75rem, 0); } to { opacity: 1; transform: none; } }
@keyframes ib-fade    { from { opacity: 0; } to { opacity: 1; } }

/* Réduction de mouvement : tout est statique et lisible (les transitions de couleur restent) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .site-nav, .site-nav__list li, .site-header__bar::before, .brand, .burger__bar, .link::after, .site-nav__link::after { transition-duration: 1ms !important; }
}

/* Mode capture ?static : tout visible, aucune animation */
.reveal-all *, .reveal-all *::before, .reveal-all *::after {
  animation: none !important;
  transition: none !important;
}


/* QA4-07 · Couleurs forcées (Windows contraste élevé) : le jour sélectionné de l'agenda n'avait AUCUNE marque distincte
   (fond remplacé par la couleur du système, texte identique aux autres jours). Sélection = couleurs système Highlight ; aujourd'hui = pointillé ;
   point de disponibilité en CanvasText (les fonds d'origine sont neutralisés). */
@media (forced-colors: active) {
  .agenda__grid td[aria-selected="true"] .agenda__day { forced-color-adjust: none; background: Highlight; color: HighlightText; border: 2px solid Highlight; }
  .agenda__day[aria-current="date"] { border: 1px dotted CanvasText; }
  .agenda__day[data-avail="some"]::after { forced-color-adjust: none; background: CanvasText; }
  .agenda__grid td[aria-selected="true"] .agenda__day[data-avail="some"]::after { background: HighlightText; }
  .agenda__day:focus-visible, .agenda__arrow:focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; }
  .agenda__banner { border: 1px solid CanvasText; }
}


/* ==========================================================================
   15. OUTILS DE MAQUETTE · À RETIRER À L'INTÉGRATION WORDPRESS
   ========================================================================== */
body:has(.maquette-tools) { padding-bottom: 3.75rem; }
.reveal-all .maquette-tools { display: none; }   /* captures ?static sans l'outil */
.reveal-all body { padding-bottom: 0; }
.maquette-tools {
  position: fixed;
  left: .75rem;
  bottom: .75rem;
  z-index: var(--ib-z-tools);
  font-size: .8125rem;
  --focus: var(--ib-focus);
}
.menu-open .maquette-tools { display: none; }
/* < 1024 px : à droite, pour ne pas couvrir l'adresse du hero (alignée à gauche en mobile) */
@media (max-width: 63.99em) {
  .maquette-tools { left: auto; right: .75rem; }
  .maquette-tools__panel { left: auto; right: 0; }
}
.maquette-tools__summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border-radius: var(--ib-radius-pill);
  background: var(--ib-espresso);
  color: var(--ib-on-dark);
  list-style: none;
  cursor: pointer;
  box-shadow: var(--ib-shadow-float);
  opacity: .82;
}
.maquette-tools__summary::-webkit-details-marker { display: none; }
.maquette-tools__summary::before { content: "+"; font-size: 1.25rem; line-height: 1; }
.maquette-tools__details[open] .maquette-tools__summary { opacity: 1; }
.maquette-tools__details[open] .maquette-tools__summary::before { content: "−"; }
.maquette-tools__summary:focus-visible { outline: 2px solid var(--ib-focus); outline-offset: 3px; }
.maquette-tools__panel {
  position: absolute;
  left: 0;
  bottom: calc(100% + .5rem);
  display: grid;
  gap: .45rem;
  width: min(18rem, calc(100vw - 1.5rem));
  padding: 1rem;
  border-radius: var(--ib-radius-md);
  background: var(--ib-ivoire);
  color: var(--ib-encre);
  box-shadow: var(--ib-shadow-float), inset 0 0 0 1px var(--ib-line);
}
.maquette-tools__panel label { font-weight: 500; margin-top: .35rem; }
.maquette-tools__panel select {
  min-height: 2.75rem;
  padding: 0 .75rem;
  border: 1px solid var(--ib-field-border);
  border-radius: .625rem;
  background: #FFFFFF;
}
.maquette-tools__check { display: flex; gap: .5rem; align-items: center; font-weight: 400 !important; }
.maquette-tools__check input { width: 1.1rem; height: 1.1rem; accent-color: var(--ib-espresso); }

@media print {
  .maquette-tools, .announce, .site-header { display: none !important; }
}


/* v5 · Fiches professeurs (retour des clientes : photo + parcours, formations, expérience de chacun).
   Gabarit : 1 colonne mobile, 2 colonnes dès 36 em, 3 dès 64 em. Photo 4:5, coins arrondis ; tant que la photo manque, fond sable + monogramme. */
.profs { display: grid; gap: 2.5rem 2rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.prof__photo { margin: 0; aspect-ratio: 4 / 5; border-radius: var(--ib-radius-xl); overflow: hidden; background: var(--ib-sable, #E4D5C3); display: grid; place-items: center; }
.prof__photo img { width: 100%; height: 100%; object-fit: cover; }
.prof__photo img[src*="logo-innerbloom"] { width: 28%; height: auto; opacity: .55; object-fit: contain; }
.prof__name { margin-top: 1.1rem; font-size: 1.625rem; line-height: 1.2; }
.prof__role { margin-top: .15rem; font-size: .9375rem; font-weight: 500; color: var(--ib-accent-text); }
.prof__facts { margin-top: .9rem; display: grid; gap: .65rem; }
.prof__facts div { display: grid; gap: .1rem; }
.prof__facts dt { font-size: .8125rem; font-weight: 500; letter-spacing: .02em; color: var(--ib-text-muted); }
.prof__facts dd { margin: 0; font-size: .9375rem; max-width: 26rem; }
@media (min-width: 36em) { .profs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .profs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.equipe__grid > .profs { grid-column: 1 / -1; }   /* la grille #equipe a 12 colonnes dès 64 em : les fiches occupent toute la largeur */