/* ==========================================================================
   BABI — mises en page propres à chaque écran · DA « Nocturne »
   Valeurs reprises une à une des prototypes design/*.dc.html.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Bandes photographiques — photo plein cadre, dégradé vertical, voile 96deg
   -------------------------------------------------------------------------- */
.bande{ position: relative; overflow: hidden; isolation: isolate; background: var(--fond-2); }
.bande__photo{ position: absolute; inset: 0; z-index: 0; }
.bande__photo img{ width: 100%; height: 100%; object-fit: cover; }
.bande::before,
.bande::after{ content: ""; position: absolute; inset: 0; pointer-events: none; }
.bande::before{ z-index: 1; }
.bande::after{ z-index: 2; background: var(--voile-photo); }
.bande__contenu{ position: relative; z-index: 3; }

/* --------------------------------------------------------------------------
   Accueil — Hero : contenu en flux, ancré en bas ; la section grandit
   avec son contenu, le CTA reste donc visible sur les écrans courts.
   -------------------------------------------------------------------------- */
.hero{
  min-height: clamp(360px, 56vh, 640px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hero::before{ background: var(--voile-hero); }
.hero .bande__photo img{ object-position: 50% 34%; }
/* La vidéo se superpose à l'affiche (même cadrage) et n'apparaît qu'une fois
   la lecture lancée par main.js : aucun écran noir, aucun saut. */
.hero__video{
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 34%;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero__video[data-lecture="1"]{ opacity: 1; }
@media (prefers-reduced-motion: reduce){ .hero__video{ display: none; } }
.hero__contenu{ padding: clamp(28px, 4vw, 64px) var(--gouttiere-hero); }
.hero__contenu > .conteneur{ width: 100%; }
.hero__lieu{
  display: flex;
  align-items: center;
  gap: 12px;
  font: var(--surtitre);
  letter-spacing: var(--track-surtitre);
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.1;
}
.hero__trait{ width: 30px; height: 1px; background: var(--accent-60); }
.hero__titre{
  font: var(--h1-hero);
  letter-spacing: var(--track-h1);
  margin-top: 20px;
  color: var(--texte);
  max-width: 18ch;
}
.hero__accent{ color: var(--accent); }
.hero__suite{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  margin-top: 34px;
}
.hero__chapo{ font: var(--chapo); color: var(--texte-88); max-width: 48ch; }
.hero__actions{ display: flex; flex-wrap: wrap; gap: 12px; }

/* Séquence d'ouverture : la photo se pose, le contenu monte en cascade.
   Tout est en `both` : l'état final est l'état de repos. */
.js .hero .bande__photo img,
.js .hero__video{ animation: baby-hero-photo 1.8s cubic-bezier(.2,.7,.3,1) both; }
.js .hero__lieu,
.js .hero__titre,
.js .hero__suite{ animation: baby-monter .9s cubic-bezier(.2,.7,.3,1) both; }
.js .hero__lieu{ animation-delay: .15s; }
.js .hero__titre{ animation-delay: .28s; }
.js .hero__suite{ animation-delay: .44s; }
.js .hero__trait{ animation: baby-trait .9s cubic-bezier(.2,.7,.3,1) .5s both; }
@keyframes baby-hero-photo{ from{ transform: scale(1.06); } to{ transform: none; } }
@keyframes baby-trait{ from{ width: 0; } to{ width: 30px; } }

/* --------------------------------------------------------------------------
   Accueil — 01 / La communauté
   -------------------------------------------------------------------------- */
.duo-section{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--gap-colonnes);
}
.duo-section__titre .h2{ margin-top: 20px; max-width: 20ch; }
.duo-section__corps{
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 58ch;
  border-top: 1px solid var(--filet-18);
  padding-top: 26px;
}
.citation{ font: 400 15px/1.7 var(--sans); color: var(--accent); margin-top: 6px; }

/* --------------------------------------------------------------------------
   Accueil — Les deux univers
   Le filet vertical n'existe qu'entre deux colonnes : il est porté par la
   gouttière de 1 px de la grille, jamais par un bord de panneau.
   -------------------------------------------------------------------------- */
.univers-duo{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr));
  column-gap: 1px;
  background: var(--filet);
  border-top: 1px solid var(--filet);
}
.univers-panneau{ background: var(--fond); display: flex; flex-direction: column; }
.univers-panneau .media{ height: clamp(190px, 22vw, 280px); }
/* Chaque panneau a son point d'intérêt : sans cela, le bandeau coupe les visages. */
#pilates .media img{ object-position: 46% 58%; }
#community .media img{ object-position: 50% 62%; }
.univers-panneau__corps{ padding: clamp(26px, 3vw, 48px); }
.univers-panneau__corps .h2-panneau{ margin-top: 18px; }
.univers-panneau__texte{ font: var(--body); color: var(--texte-76); margin-top: 16px; max-width: 44ch; }

/* --------------------------------------------------------------------------
   Accueil — 02 / Nos univers (seule section claire de la page)
   -------------------------------------------------------------------------- */
.bloc__entete .h2{ margin-top: 20px; }
.bloc__entete--28{ max-width: 28ch; }
.bloc__entete--32{ max-width: 32ch; }

.index{ margin-top: clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--filet-clair); }
.index__ligne{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 28px;
  padding: 24px 0;
  border-top: 1px solid var(--filet-clair);
}
.index__num{
  flex: 0 0 48px;
  font: 600 11px/1.1 var(--sans);
  letter-spacing: .16em;
  color: var(--violet);
  font-variant-numeric: tabular-nums;
}
.index__titre{
  flex: 1 1 180px;
  font: var(--h3-univers);
  letter-spacing: var(--track-h3);
  transition: transform var(--t-lente);
}
.index__texte{ flex: 1 1 260px; font: 400 15.5px/1.65 var(--sans); color: var(--encre-clair-2); }
@media (hover: hover){
  .index__ligne:hover .index__titre{ transform: translateX(6px); }
}

/* --------------------------------------------------------------------------
   Accueil — 03 / Pourquoi rejoindre BABI
   -------------------------------------------------------------------------- */
.raisons{
  margin-top: clamp(32px, 4vw, 56px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--gap-cartes);
}
.raison{ border-top: 1px solid var(--filet-fort); padding-top: 20px; transition: border-color var(--t-lente); }
.raison__titre{ font: var(--h3-raison); letter-spacing: var(--track-h3); }
.raison__texte{ font: var(--body-s); color: var(--texte-76); margin-top: 12px; }
@media (hover: hover){ .raison:hover{ border-top-color: var(--accent); } }
.bloc__cta{ margin-top: clamp(32px, 4vw, 52px); }

/* --------------------------------------------------------------------------
   Accueil — 04 / Comment ça marche
   -------------------------------------------------------------------------- */
.etapes{
  margin-top: clamp(32px, 4vw, 56px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(28px, 3vw, 48px);
}
.etape{ border-top: 1px solid var(--filet-fort); padding-top: 22px; transition: border-color var(--t-lente); }
.etape__num{
  display: block;
  font: var(--num-etape);
  letter-spacing: -.04em;
  color: var(--accent);
}
.etape__titre{ font: var(--h3-etape); letter-spacing: var(--track-h3); margin-top: 18px; }
.etape__texte{ font: var(--body); color: var(--texte-76); margin-top: 12px; max-width: 34ch; }
@media (hover: hover){ .etape:hover{ border-top-color: var(--accent); } }

/* --------------------------------------------------------------------------
   Accueil — 05 / Expériences (carrousel débordant dans la gouttière)
   -------------------------------------------------------------------------- */
.section--experiences{
  padding: clamp(40px, 5vw, 80px) 0 var(--section-y);
  border-top: 1px solid var(--filet);
}
.section--experiences > .conteneur{ padding: 0 var(--gouttiere); }
.experiences__entete{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 28px;
  align-items: end;
}
.experiences__entete .h2{ max-width: 22ch; }
.experiences__intro{ font: var(--body); color: var(--texte-76); max-width: 46ch; }

.carrousel{
  margin-top: clamp(30px, 3.6vw, 48px);
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Même bord gauche que le conteneur, y compris au-delà de 1440 px. */
  padding: 0 max(var(--gouttiere), calc((100% - var(--conteneur)) / 2)) 4px;
  /* Les points d'accroche s'alignent sur la gouttière : la première carte
     part du même bord gauche que le titre, au repos comme après un pas. */
  scroll-padding-inline: max(var(--gouttiere), calc((100% - var(--conteneur)) / 2));
  cursor: grab;
}
.carrousel:active{ cursor: grabbing; }
.carrousel__carte{
  flex: 0 0 clamp(230px, 25vw, 320px);
  scroll-snap-align: start;
  position: relative;
}
.carrousel__carte .media{ aspect-ratio: 3 / 4; }
.carrousel__legende{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px;
  background: var(--voile-legende);
  font: var(--legende);
  letter-spacing: -.02em;
  color: var(--texte);
  transition: padding-bottom var(--t-lente);
}
@media (hover: hover){ .carrousel__carte:hover .carrousel__legende{ padding-bottom: 24px; } }
.carrousel__mention{ font: var(--mention); color: var(--texte-66); margin-top: 26px; }

/* --------------------------------------------------------------------------
   Accueil — 06 / Les adresses BABI
   -------------------------------------------------------------------------- */
.adresses__entete{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(28px, 3.4vw, 64px);
  align-items: end;
}
.adresses__entete .h2{ max-width: 20ch; }
.adresses__intro{ font: var(--body-l); color: var(--texte-76); max-width: 52ch; }
.adresses__module{
  margin-top: clamp(28px, 3.4vw, 48px);
  border: 1px solid var(--filet-20);
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
  transition: border-color var(--t-lente);
}
@media (hover: hover){ .adresses__module:hover{ border-color: var(--accent-50); } }
.adresses__annonce{ font: var(--annonce); letter-spacing: var(--track-h3); margin-top: 14px; }
.adresses__champs{
  flex: 1 1 280px;
  font: 400 13px/1.9 var(--sans);
  letter-spacing: .02em;
  color: var(--texte-66);
  max-width: 34ch;
}

/* --------------------------------------------------------------------------
   Accueil — 07 / Membre — la carte BABI
   -------------------------------------------------------------------------- */
.carte-section{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(36px, 4.5vw, 80px);
  align-items: center;
}
.carte-section__texte .h2{ margin-top: 20px; }
.carte-section__intro{ font: var(--body-l); color: var(--texte-76); margin-top: 22px; max-width: 52ch; }
.carte-section__texte .mention{ margin-top: 18px; max-width: 48ch; }

.carte-membre{
  width: min(430px, 100%);
  justify-self: end;
  aspect-ratio: 85.6 / 54;
  background: var(--violet);
  padding: clamp(22px, 2.4vw, 30px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--ombre-carte);
  transform-style: preserve-3d;
  transition: transform var(--t-lente), box-shadow var(--t-lente);
}
/* Au survol, la carte se soulève et s'incline comme un objet réel. */
@media (hover: hover){
  .carte-membre:hover,
  .js .carte-membre.reveal.est-visible:hover{
    transform: perspective(900px) rotateX(4deg) rotateY(-6deg) translateY(-4px);
    box-shadow: 0 34px 64px rgba(0,0,0,.55);
  }
}
.carte-membre .logo{ gap: 6px; }
.carte-membre .logo__mot{ font-size: clamp(24px, 2.4vw, 30px); color: var(--texte); }
.carte-membre .logo__sous{ color: rgba(242,237,230,.82); }
.carte-membre__signature{
  font: 400 14px/1.5 var(--sans);
  color: var(--texte-88);
  max-width: 26ch;
}

/* --------------------------------------------------------------------------
   Accueil — Construire ensemble / Partenaires
   -------------------------------------------------------------------------- */
.section--paire{ padding-top: 0; }
.paire{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(32px, 4vw, 72px);
}
.paire__bloc{ border-top: 1px solid var(--filet-fort); padding-top: 24px; }
.paire__bloc .h2{ font: var(--h2-paire); letter-spacing: var(--track-h3); margin-top: 18px; }
.paire__bloc p{ font: 400 16px/1.75 var(--sans); color: var(--texte-76); margin-top: 16px; max-width: 48ch; }
.paire__bloc .lien-action{ margin-top: 22px; }

/* --------------------------------------------------------------------------
   Accueil — CTA final
   -------------------------------------------------------------------------- */
.final{
  height: clamp(440px, 62vh, 620px);
  border-top: 1px solid var(--filet);
}
.final::before{ background: var(--voile-final); }
.final .bande__photo img{ object-position: 50% 42%; }
.final__inner{
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  padding: clamp(24px, 4vw, 64px);
}
.final__inner > .conteneur{ width: 100%; }
.final__titre{
  font: var(--h2-final);
  letter-spacing: -.04em;
  color: var(--texte);
  max-width: 20ch;
}
.final__texte{ font: var(--chapo); color: var(--texte-88); margin-top: 22px; max-width: 46ch; }
.final .btn{ margin-top: 28px; }

/* --------------------------------------------------------------------------
   Rejoindre — hero photo court + formulaire
   -------------------------------------------------------------------------- */
.hero-image{
  min-height: clamp(300px, 46vh, 460px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hero-image::before{ background: var(--voile-rejoindre); }
.hero-image .bande__photo img{ object-position: 50% 44%; }
.hero-image__contenu{ padding: clamp(40px, 8vh, 110px) clamp(24px, 4vw, 56px) clamp(24px, 4vw, 56px); }
.hero-image__contenu > .conteneur{ width: 100%; }
.hero-image__titre{
  font: var(--h1-interne);
  letter-spacing: var(--track-h1-int);
  margin-top: 18px;
  color: var(--texte);
  max-width: 20ch;
}
.hero-image__chapo{ font: var(--chapo); color: var(--texte-88); margin-top: 20px; max-width: 52ch; }
.js .hero-image .surtitre,
.js .hero-image__titre,
.js .hero-image__chapo{ animation: baby-monter .9s cubic-bezier(.2,.7,.3,1) both; }
.js .hero-image__titre{ animation-delay: .12s; }
.js .hero-image__chapo{ animation-delay: .24s; }

.section--formulaire{ padding: clamp(48px, 6vw, 96px) var(--gouttiere) var(--section-y); }
.form-inscription{
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 72px);
}
.groupe--cases{
  border-top: 1px solid var(--filet-20);
  padding-top: clamp(28px, 3vw, 40px);
  gap: 18px;
}
.form__envoi{ display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.form__note{ font: 400 13.5px/1.7 var(--sans); color: var(--texte-62); max-width: 56ch; }

/* --------------------------------------------------------------------------
   Pages internes — hero texte seul
   -------------------------------------------------------------------------- */
.hero-texte{ padding: clamp(56px, 8vw, 120px) var(--gouttiere) clamp(36px, 4vw, 64px); }
.hero-texte__titre{
  font: var(--h1-contact);
  letter-spacing: var(--track-h1);
  margin-top: 20px;
  color: var(--texte);
}
.hero-texte .lead{ margin-top: 24px; max-width: 44ch; line-height: 1.6; }
.hero-texte--legal{ padding: clamp(56px, 8vw, 116px) var(--gouttiere) clamp(32px, 4vw, 56px); }
.hero-texte--legal .hero-texte__titre{
  font: 500 clamp(34px, 5.4vw, 82px)/.94 var(--titre);
  letter-spacing: var(--track-h1-int);
  max-width: 22ch;
}
.legal__maj{ font: 400 14px/1.7 var(--sans); letter-spacing: .02em; color: var(--texte-66); margin-top: 24px; }
.js .hero-texte .surtitre,
.js .hero-texte__titre,
.js .hero-texte .lead,
.js .hero-texte .legal__maj{ animation: baby-monter .9s cubic-bezier(.2,.7,.3,1) both; }
.js .hero-texte__titre{ animation-delay: .12s; }
.js .hero-texte .lead,
.js .hero-texte .legal__maj{ animation-delay: .24s; }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.section--contact{
  padding: clamp(32px, 4vw, 56px) var(--gouttiere) clamp(56px, 7vw, 104px);
  border-top: 1px solid var(--filet);
}
.form-contact{
  max-width: var(--conteneur);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--gap-colonnes);
  padding-top: clamp(32px, 4vw, 56px);
}
.contact__aside .h2{ font: var(--h2-contact); letter-spacing: var(--track-h2); margin-top: 20px; }
.contact__aside > p{ font: var(--body-l); color: var(--texte-76); margin-top: 18px; max-width: 42ch; }
.contact__wa{
  margin-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--filet-20);
  padding-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.contact__num{
  font: 500 clamp(22px, 2.2vw, 30px)/normal var(--titre);
  letter-spacing: -.03em;
  color: var(--texte);
}
.contact__num:hover{ color: var(--accent); }
.contact__num--secondaire{ font: 400 17px/normal var(--sans); letter-spacing: 0; color: var(--texte-82); }
.contact__champs{ display: flex; flex-direction: column; gap: 20px; }

.section--partenariat{ padding: clamp(56px, 7vw, 104px) var(--gouttiere); }
.form-partenariat{
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  scroll-margin-top: 90px;
}
.form-partenariat__entete{ max-width: 44ch; margin-bottom: clamp(12px, calc(4vw - 20px), 32px); }
.form-partenariat__entete .h2{ font: var(--h2-contact); letter-spacing: var(--track-h2); margin-top: 20px; }
.form-partenariat__entete p{ font: var(--body-l); color: var(--texte-76); margin-top: 20px; }
.form-partenariat .champ > input,
.form-partenariat .champ > textarea{ background: var(--fond); }
.form-partenariat .champ--case{ margin-top: 2px; }
.form-partenariat .form__envoi{ margin-top: 6px; }

/* --------------------------------------------------------------------------
   Merci · 404
   -------------------------------------------------------------------------- */
.merci{
  min-height: 100%;
  display: flex;
  align-items: center;
  padding: clamp(64px, 10vw, 160px) var(--gouttiere);
}
main:has(> .merci){ display: flex; flex-direction: column; }
main > .merci{ flex: 1; }
.merci__inner{ max-width: var(--conteneur); margin: 0 auto; width: 100%; }
/* Le prototype pose 22ch sur le conteneur (mesuré en Archivo 16 px : le titre
   y déborde mot à mot). La mesure est portée par le titre lui-même. */
.merci__titre{
  font: var(--h1-merci);
  letter-spacing: var(--track-h1);
  margin-top: 20px;
  color: var(--texte);
  max-width: 22ch;
}
.merci .lead{ margin-top: 26px; max-width: 52ch; }
.merci .btn,
.merci__actions{ margin-top: 34px; }
.merci__actions{ display: flex; flex-wrap: wrap; gap: 12px; }
.merci__actions .btn{ margin-top: 0; }
.js .merci__inner > *{ animation: baby-monter .9s cubic-bezier(.2,.7,.3,1) both; }
.js .merci__inner > :nth-child(2){ animation-delay: .12s; }
.js .merci__inner > :nth-child(3){ animation-delay: .24s; }

/* --------------------------------------------------------------------------
   Confidentialité
   -------------------------------------------------------------------------- */
.legal{ padding: 0 var(--gouttiere) var(--section-y); }
.legal__inner{ max-width: 820px; margin: 0 auto; }
.legal__intro{
  font: 400 17px/1.8 var(--sans);
  color: var(--texte-84);
  margin-bottom: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(32px, 4vw, 48px);
  border-bottom: 1px solid var(--filet-18);
}
.legal__sections{ display: flex; flex-direction: column; gap: clamp(36px, 4.4vw, 56px); }
.legal__section h2{ font: var(--h2-legal); letter-spacing: var(--track-h3); margin-bottom: 16px; }
.legal__section h3{
  font: 600 11px/1.4 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 24px 0 10px;
}
.legal__section h3:first-of-type{ margin-top: 28px; }
.legal__section p{ font: var(--legal); color: var(--texte-78); }
.legal__section p + p{ margin-top: 16px; }
/* Marqueur juridique non arrêté — doit rester visible jusqu'à arbitrage client. */
.a-completer{ color: var(--accent); border-bottom: 1px solid var(--accent-60); }
.legal__actions{
  margin-top: 28px;
  border: 1px solid var(--filet-20);
  padding: clamp(20px, 2.4vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.legal__actions[hidden]{ display: none; }
.legal__etat{ font: 400 15px/1.6 var(--sans); color: var(--texte-84); }
.legal__boutons{ display: flex; flex-wrap: wrap; gap: 12px; }