/* ==========================================================================
   BABI — base + composants réutilisables · DA « Nocturne »
   ========================================================================== */

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

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* les ancres ne passent jamais sous l'en-tête collante */
  scroll-padding-top: 90px;
  background: var(--fond);
}
/* `clip` ne crée pas de contexte de défilement : l'en-tête `sticky`
   continue de fonctionner, et rien ne déborde horizontalement. */
html, body{ overflow-x: clip; }

body{
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: var(--body);
  /* Interligne « normal » à la racine : c'est le strut des prototypes. Chaque
     texte courant porte son propre interligne via les tokens. */
  line-height: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

h1, h2, h3, p, figure, fieldset, blockquote{ margin: 0; }
h1, h2, h3{ font-weight: 500; text-wrap: pretty; }
fieldset{ border: 0; padding: 0; min-width: 0; }
legend{ padding: 0; }
/* `height:auto` indispensable : les <img> portent width/height (CLS) et
   ne doivent pas neutraliser `aspect-ratio`. */
img, video{ display: block; max-width: 100%; height: auto; }
input, textarea, button, select{ font: inherit; color: inherit; }
::placeholder{ color: var(--texte-42); opacity: 1; }
::selection{ background: var(--accent); color: var(--fond); }

a{ color: var(--accent); text-decoration: none; transition: color var(--t-rapide); }
a:hover{ color: var(--texte); }

/* Focus : toujours visible au clavier, jamais supprimé sans remplacement. */
:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

[data-scroller]{ scrollbar-width: none; }
[data-scroller]::-webkit-scrollbar{ display: none; }

.saut-contenu{
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: calc(var(--z-consent) + 10);
  background: var(--accent);
  color: var(--fond);
  padding: 14px 20px;
  font: var(--bouton);
  letter-spacing: var(--track-bouton);
  text-transform: uppercase;
}
.saut-contenu:focus{ left: 8px; top: 8px; color: var(--fond); }

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

/* --------------------------------------------------------------------------
   2. Mise en page
   -------------------------------------------------------------------------- */
.page{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fond);
  /* Le bandeau de consentement est fixé en bas : le pied de page remonte
     d'autant pour ne jamais être masqué. */
  padding-bottom: var(--consent-h, 0px);
}
main{ flex: 1; }

.section{ padding: var(--section-y) var(--gouttiere); }
.section--2{ background: var(--fond-2); }
.section--clair{ background: var(--clair); color: var(--encre-clair); }
.conteneur{ max-width: var(--conteneur); margin: 0 auto; }

/* --------------------------------------------------------------------------
   3. Typographie applicative
   -------------------------------------------------------------------------- */
.surtitre{
  display: inline-block;
  font: var(--surtitre);
  letter-spacing: var(--track-surtitre);
  text-transform: uppercase;
  color: var(--accent);
}
.surtitre--neutre{ color: var(--texte-62); }
.section--clair .surtitre{ color: var(--violet); }

.h2{ font: var(--h2); letter-spacing: var(--track-h2); }
.h2-panneau{ font: var(--h2-panneau); letter-spacing: var(--track-h3); }
.lead{ font: var(--lead); color: var(--texte-84); }
.paragraphe-fort{ font: var(--fort); color: var(--texte); }
.texte{ font: var(--body-l); color: var(--texte-76); }
.mention{ font: var(--mention); color: var(--texte-62); }

/* --------------------------------------------------------------------------
   4. Logotype — composé en texte, empilé : BABI au-dessus du descripteur
   -------------------------------------------------------------------------- */
.logo{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  width: fit-content;
  color: var(--texte);
  text-decoration: none;
  transition: color var(--t-rapide);
}
.logo:hover{ color: var(--texte); }
.logo__mot{
  display: block;
  font: 600 24px/1 var(--titre);
  letter-spacing: -.03em;
  color: inherit;
}
.logo__sous{
  display: block;
  font: 600 9px/normal var(--sans);
  letter-spacing: var(--track-sous-logo);
  color: var(--accent);
  white-space: nowrap;
}
.logo--pied .logo__mot{ font-size: 26px; }

/* --------------------------------------------------------------------------
   5. Boutons — angles droits, capitales espacées
   plein   : #A97CE8 → #F2EDE6 (texte toujours #14111A)
   second. : bordure .42 → bordure et texte #A97CE8
   -------------------------------------------------------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 16px 30px;
  border: 1px solid transparent;
  border-radius: var(--r-bouton);
  font: var(--bouton);
  letter-spacing: var(--track-bouton);
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--t-rapide), color var(--t-rapide),
              border-color var(--t-rapide);
}
.btn--primaire{ background: var(--accent); color: var(--fond); border-color: var(--accent); }
.btn--primaire:hover{ background: var(--texte); border-color: var(--texte); color: var(--fond); }

.btn--secondaire{ background: transparent; color: var(--texte); border-color: var(--filet-bouton); padding-inline: 28px; }
.btn--secondaire:hover{ border-color: var(--accent); color: var(--accent); }

/* CTA d'en-tête : clair → accent. */
.btn--clair{ background: var(--texte); color: var(--fond); border-color: var(--texte); }
.btn--clair:hover{ background: var(--accent); border-color: var(--accent); color: var(--fond); }

.btn--entete{ padding: 14px 24px; font: var(--bouton-s); letter-spacing: var(--track-bouton); }
.btn--s{ padding: 13px 22px; font: var(--bouton-s); letter-spacing: var(--track-bouton); }
.btn--m{ padding: 14px 24px; font: var(--bouton-s); letter-spacing: var(--track-bouton); }
.btn--l{ padding: 17px 32px; }
.btn--envoi{ padding: 18px 34px; }
.btn--secondaire.btn--envoi{ padding-inline: 32px; }

.btn[disabled],
.btn[aria-disabled="true"]{
  background: var(--fond-2); color: var(--texte-42);
  border-color: var(--filet-fort); cursor: not-allowed;
}

/* État chargement : largeur figée, libellé remplacé, apparence conservée. */
.btn[data-chargement="1"]{ pointer-events: none; cursor: progress; }
.btn--primaire[data-chargement="1"]{ background: var(--accent); border-color: var(--accent); color: var(--fond); }
.btn--secondaire[data-chargement="1"]{ background: transparent; color: var(--texte); border-color: var(--filet-bouton); }
.btn__spinner{
  width: 12px; height: 12px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: baby-spin .7s linear infinite;
}
@keyframes baby-spin{ to{ transform: rotate(360deg); } }

/* Lien d'action souligné d'un filet accent. */
.lien-action{
  display: inline-block;
  align-self: flex-start;
  color: var(--accent);
  border-bottom: 1px solid var(--accent-50);
  padding-bottom: 6px;
  font: 600 11.5px/normal var(--sans);
  letter-spacing: var(--track-bouton);
  text-transform: uppercase;
  transition: color var(--t-rapide), border-color var(--t-rapide);
}
.lien-action:hover{ color: var(--texte); border-bottom-color: var(--texte); }
.lien-action:focus-visible{ outline-offset: 4px; }

/* --------------------------------------------------------------------------
   6. En-tête — collante, translucide, floutée. Aucun menu, aucun burger.
   -------------------------------------------------------------------------- */
.entete{
  position: sticky;
  top: 0;
  z-index: var(--z-entete);
  background: rgba(20,17,26,.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--filet);
  padding-inline: var(--gouttiere);
  transition: border-color var(--t-rapide), box-shadow var(--t-lente);
}
/* Après défilement : le filet se renforce et une ombre détache la barre. */
.entete[data-scroll="1"]{
  border-bottom-color: var(--filet-fort);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}
.entete__barre{
  max-width: var(--conteneur);
  margin: 0 auto;
  min-height: var(--entete-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.entete__cta{ flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   7. Pied de page
   -------------------------------------------------------------------------- */
.pied{
  background: var(--fond);
  border-top: 1px solid var(--filet);
  padding: clamp(52px, 6vw, 88px) var(--gouttiere) 32px;
}
.pied__grille{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(32px, 4vw, 64px);
}
.pied__col{ display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.pied__col .surtitre,
.pied__titre{ display: block; }
.pied__signature{
  font: 400 16px/1.6 var(--sans);
  color: var(--texte-76);
  margin-top: 8px;
  max-width: 30ch;
}
.pied__titre{
  font: var(--surtitre);
  letter-spacing: var(--track-surtitre);
  text-transform: uppercase;
  color: var(--texte-62);
  margin-bottom: 4px;
}
.pied__lien{
  font: var(--pied-lien);
  color: rgba(242,237,230,.86);
}
.pied__lien:hover{ color: var(--accent); }
.pied__bas{
  margin-top: clamp(36px, 4vw, 64px);
  padding-top: 24px;
  border-top: 1px solid var(--filet-18);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.pied__copy{ font: 400 13px/normal var(--sans); color: var(--texte-62); }
/* Emplacement technique réseaux sociaux : présent, volontairement vide. */
.pied__social{ display: none; }

/* --------------------------------------------------------------------------
   8. Widget WhatsApp — remonte au-dessus du bandeau de consentement
   -------------------------------------------------------------------------- */
.wa{
  position: fixed;
  right: clamp(16px, 2vw, 28px);
  bottom: calc(clamp(16px, 2vw, 28px) + var(--consent-h, 0px));
  z-index: var(--z-flottant);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  transition: bottom var(--t-lente);
}
.wa__bouton{
  width: 56px; height: 56px;
  border: 0;
  border-radius: 999px;            /* seule exception aux angles droits */
  background: var(--whatsapp);
  color: var(--whatsapp-glyphe);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--ombre-wa);
  transition: background-color var(--t-rapide), transform var(--t-rapide);
}
.wa__bouton:hover{ background: var(--whatsapp-survol); transform: translateY(-2px); }
.wa__bouton:active{ transform: none; }
.wa__bouton svg{ width: 27px; height: 27px; fill: currentColor; }

.wa__panneau{
  width: 272px;
  max-width: calc(100vw - 2 * clamp(16px, 2vw, 28px));
  background: var(--fond-2);
  border: 1px solid var(--filet-20);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--ombre-panneau);
  animation: baby-monter .3s cubic-bezier(.2,.7,.3,1) both;
}
.wa__panneau[hidden]{ display: none; }
.wa__titre{
  font: 500 18px/normal var(--titre);
  letter-spacing: -.02em;
  color: var(--texte);
}
.wa__message{ font: var(--mention-s); color: var(--texte-62); }
.wa__num{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font: 500 15px/normal var(--sans);
  color: var(--texte);
  border-top: 1px solid var(--filet);
  padding-top: 12px;
}
.wa__num:hover{ color: var(--accent); }
.wa__role{
  font: 600 10px/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.wa__num--autre .wa__role{ color: rgba(242,237,230,.6); }

@keyframes baby-monter{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   9. Bandeau de consentement — flottant, ancré en bas de l'écran
   -------------------------------------------------------------------------- */
.consent{
  position: fixed;
  left: clamp(12px, 2vw, 24px);
  right: clamp(12px, 2vw, 24px);
  bottom: clamp(12px, 2vw, 24px);
  z-index: var(--z-consent);
  background: var(--fond-2);
  border: 1px solid var(--filet-fort);
  padding: 16px clamp(16px, 2vw, 24px);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--ombre-consent);
  animation: baby-monter .35s cubic-bezier(.2,.7,.3,1) both;
}
.consent[hidden]{ display: none; }
.consent__texte{
  flex: 1 1 320px;
  font: 400 13px/1.6 var(--sans);
  color: var(--texte-82);
  max-width: 86ch;
}
.consent__actions{ display: flex; flex-wrap: wrap; gap: 10px; }

/* --------------------------------------------------------------------------
   10. Champs de formulaire
   -------------------------------------------------------------------------- */
.champ{ display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.champ__label{
  font: var(--label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--texte-72);
  transition: color var(--t-rapide);
}
.champ:focus-within > .champ__label{ color: var(--accent); }
.champ__facultatif{
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--texte-58);
}

.champ > input,
.champ > textarea,
.champ > select{
  width: 100%;
  background: var(--fond-2);
  border: 1px solid var(--filet-fort);
  border-radius: var(--r-champ);
  color: var(--texte);
  font: 400 15.5px/1.2 var(--sans);
  padding: 15px 16px;
  outline: none;
  transition: border-color var(--t-rapide), background-color var(--t-rapide);
}
.champ > textarea{ line-height: 1.6; resize: vertical; }
.champ > input:focus,
.champ > textarea:focus{ border-color: var(--accent); }
.champ > input:disabled,
.champ > textarea:disabled{ opacity: .5; }
.champ > input[aria-invalid="true"],
.champ > textarea[aria-invalid="true"]{ border-color: var(--erreur); }
.champ__erreur{ font: 400 13.5px/1.5 var(--sans); color: var(--erreur); }
.champ__erreur:empty{ display: none; }

/* Honeypot : masqué visuellement, jamais type="hidden". */
.piege{
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   11. Pastilles de sélection — vrais radio / checkbox, input natif visible
   -------------------------------------------------------------------------- */
.pastilles{ display: flex; flex-wrap: wrap; gap: var(--gap-pastilles); }
.pastille{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 10px;
  border: 1px solid var(--filet-26);
  padding: 11px 18px;
  font: 400 13.5px/1.3 var(--sans);
  color: var(--texte-88);
  cursor: pointer;
  transition: border-color var(--t-rapide), color var(--t-rapide), background-color var(--t-rapide);
}
.pastille input{
  accent-color: var(--accent);
  width: 15px; height: 15px;
  margin: 0;
  flex: none;
  cursor: pointer;
}
.pastille:hover{ border-color: var(--accent); color: var(--texte); }
.pastille:has(input:checked){ border-color: var(--accent); background: var(--accent-12); color: var(--texte); }
.pastille:has(input:focus-visible){ outline: 2px solid var(--accent); outline-offset: 3px; }

/* Cases à cocher classiques */
.case{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font: 400 15px/1.6 var(--sans);
  color: var(--texte-88);
  cursor: pointer;
}
.case input{
  accent-color: var(--accent);
  width: 16px; height: 16px;
  margin: 3px 0 0;
  flex: 0 0 auto;
  cursor: pointer;
}
.case--compact{ font-size: 14.5px; color: var(--texte-84); }

/* --------------------------------------------------------------------------
   12. Groupes de formulaire
   -------------------------------------------------------------------------- */
.groupe{ display: flex; flex-direction: column; gap: var(--gap-champs); }
.groupe__legende{
  /* Un <legend> sort du flux du fieldset : `float` en fait un enfant normal. */
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 6px;                 /* 20 px de gap + 6 = 26 px */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
}
.groupe__num{
  font: var(--surtitre);
  letter-spacing: var(--track-surtitre);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.groupe__titre{
  font: 500 clamp(22px, 2.4vw, 32px)/1.1 var(--titre);
  letter-spacing: var(--track-h3);
  color: var(--texte);
}
.groupe--aide .groupe__legende{ margin-bottom: -6px; }  /* 14 px avant l'aide */
.groupe__aide{ font: var(--mention); color: var(--texte-66); margin-bottom: 2px; }
.duo{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--gap-champs);
}
.duo--serre{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

/* Message global de soumission */
.form__etat{
  font: 400 15px/1.6 var(--sans);
  border-left: 2px solid var(--erreur);
  padding-left: 14px;
  color: var(--erreur);
}
.form__etat[hidden]{ display: none; }

/* Emplacement Turnstile : visible seulement quand une clé est configurée. */
.cf-turnstile{ min-height: 65px; }

/* --------------------------------------------------------------------------
   13. Médias
   -------------------------------------------------------------------------- */
.media{
  position: relative;
  overflow: hidden;
  background: var(--fond-2);
}
.media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-media);
}
/* Survol : la photo avance très légèrement, la mise en page ne bouge pas. */
@media (hover: hover){
  figure:hover .media img,
  .univers-panneau:hover .media img{ transform: scale(1.035); }
}

/* --------------------------------------------------------------------------
   14. Apparition au défilement — montée douce, jamais de contenu bloqué
   L'état masqué n'existe que si JavaScript est disponible : sans JS,
   `<noscript>` neutralise la classe et tout reste visible.
   -------------------------------------------------------------------------- */
.js .reveal{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--t-reveal), transform var(--t-reveal);
  transition-delay: var(--reveal-delai, 0ms);
}
.js .reveal.est-visible{ opacity: 1; transform: none; }

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

/* --------------------------------------------------------------------------
   15. Utilitaires — volontairement peu nombreux
   -------------------------------------------------------------------------- */
.auto-gauche{ align-self: flex-start; }