/* ============================================================================
   LANGOURBEAUTY ACADÉMIE — site.css
   Composants du site. Dépend de tokens.css (à charger AVANT).
   Règle absolue : aucune couleur, taille, espacement, rayon ou ombre en dur ici.
   Tout passe par une variable de tokens.css.

   v1.0 — 2026-07-27. Points de rupture : 1080 / 880 / 640.
   ========================================================================= */

/* ------------------------------------------------------------------- BASE -- */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--f-body); font-weight:var(--fw-normal);
  font-size:var(--fs-body); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
/* `height:auto` est obligatoire dès qu'on met les attributs width/height sur
   les <img> (ce qu'on fait pour éviter le décalage de mise en page) : sans lui,
   l'attribut `height` s'applique et écrase le ratio. Les images de cadre
   redéfinissent height:100%, plus spécifique. */
img{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }
:where(a,button,input,textarea,summary):focus-visible{
  outline:2px solid var(--blush-deep); outline-offset:2px; border-radius:var(--r-field);
}

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--sp-gutter) }
section{ padding-block:var(--sp-section) }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ----------------------------------------------------------------- HEADER -- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--ink);
}
.nav{
  max-width:var(--wrap); margin-inline:auto;
  padding:var(--sp-3) var(--sp-gutter);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--sp-5);
}
.nav__group{ display:flex; align-items:center; gap:var(--sp-5) }
.nav__group--right{ justify-content:flex-end }
.nav__link{ font-size:var(--fs-ui); color:var(--ink); padding-block:var(--sp-1); transition:color var(--dur) var(--ease) }
.nav__link:hover{ color:var(--ink-soft) }
.nav__link[aria-current="page"]{ border-bottom:1px solid var(--ink) }
/* 2,6rem = plafond de ce rôle : au-delà, les déliés d'Abramo Script touchent le
   filet de l'en-tête (--header-h 74px). Voir SYNC.md. */
.nav__brand{ font-family:var(--f-script); font-size:2.6rem; text-align:center; white-space:nowrap }
.nav__sep{ width:1px; height:18px; background:var(--ink); opacity:.5 }

.burger{
  display:none; background:none; border:0; cursor:pointer;
  flex-direction:column; gap:5px; padding:var(--sp-1);
}
.burger span{ width:24px; height:1.5px; background:var(--ink); display:block }
.mobile-nav{ display:none }
.mobile-nav.is-open{
  display:flex; flex-direction:column;
  padding:var(--sp-2) var(--sp-gutter) var(--sp-5);
  border-top:1px solid var(--line-strong);
}
.mobile-nav a{ padding-block:var(--sp-3); font-size:1rem; border-bottom:1px solid var(--line) }

/* --------------------------------------------------------------- BOUTONS -- */
.btn{
  font-family:var(--f-body); font-weight:500; font-size:var(--fs-btn);
  letter-spacing:var(--ls-btn); text-transform:uppercase;
  padding:15px var(--sp-6); border-radius:var(--r-btn);
  border:1px solid transparent; cursor:pointer; display:inline-block;
  color:var(--ink); background:var(--blush); transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover{ background:var(--blush-deep) }
.btn--ghost{ background:transparent; border-color:var(--ink) }
.btn--ghost:hover{ background:var(--ink); color:var(--ground) }
.btn--link{ background:transparent; border:0; border-bottom:1px solid var(--ink); padding:var(--sp-1) 2px; border-radius:0 }
.btn--link:hover{ background:transparent; color:var(--ink-soft); border-color:var(--ink-soft) }

.pill{
  display:inline-block; background:var(--blush); color:var(--ink);
  font-size:var(--fs-caption); letter-spacing:.1em; text-transform:uppercase;
  padding:7px var(--sp-4); border-radius:var(--r-pill);
}
.pill--quiet{ background:var(--surface-2); border:1px solid var(--line-strong) }

.chev{
  width:34px; height:34px; border:1px solid var(--ink); border-radius:var(--r-pill);
  display:grid; place-items:center; color:var(--ink); animation:bob 2s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }

/* ------------------------------------------------------------------ HERO -- */
.hero{ display:grid; grid-template-columns:1fr 1fr; min-height:min(84vh,760px); padding:0 }
.hero__text{
  position:relative; display:flex; flex-direction:column; justify-content:center;
  padding:var(--sp-9) var(--sp-8) var(--sp-9) 0; background:var(--ground);
}
.hero__inner{ max-width:none; margin:0; padding-left:var(--sp-gutter) }
.hero__ghost{
  position:absolute; right:2%; top:50%; transform:translateY(-50%);
  width:min(360px,42%); opacity:.12; pointer-events:none;
}
.hero__title{
  position:relative; font-family:var(--f-serif); font-style:italic; font-weight:var(--fw-hero);
  letter-spacing:var(--ls-hero); font-size:var(--fs-hero); line-height:var(--lh-hero);
  margin:0; max-width:12ch; text-wrap:balance;
}
.hero__sub{ position:relative; margin:var(--sp-5) 0 0; color:var(--ink-soft); font-size:var(--fs-lead); max-width:32ch }
.hero__cta{ position:relative; margin-top:var(--sp-6); display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap }
.hero__media{ position:relative; background:var(--blush); display:flex; align-items:flex-end; overflow:hidden }
/* La photo est un DÉTOURAGE sur fond transparent : `contain` + calage en bas
   laisse le blush respirer au-dessus du sujet, comme sur la maquette Canva.
   Surtout pas `cover` — il rognerait le sujet sur les côtés. */
.hero__media img{ width:100%; height:100%; object-fit:contain; object-position:center bottom }

/* Variante pour les pages intérieures (Formations, Avis, Contact) */
.hero--compact{ display:block; min-height:0; padding:var(--sp-9) 0 var(--sp-7); text-align:center }
.hero--compact .hero__title{ max-width:none; margin-inline:auto }
.hero--compact .hero__sub{ margin-inline:auto; text-align:center; max-width:52ch }

/* -------------------------------------------------------------- SECTIONS -- */
/* Le kicker se compose de deux lignes indépendantes de leur balise : selon la
   page, c'est la ligne CAPS ou la ligne script qui porte le <h2>. D'où des
   sélecteurs de CLASSE — un `.kicker h2` capturerait les deux. */
.kicker{ text-align:center; margin-bottom:var(--sp-7) }
.kicker__title{
  font-family:var(--f-caps); font-weight:var(--fw-normal); text-transform:uppercase;
  letter-spacing:var(--ls-caps); font-size:var(--fs-h2); margin:0; text-wrap:balance;
}
.kicker__script{
  display:block; font-family:var(--f-script); font-size:var(--fs-script);
  color:var(--ink-soft); margin:var(--sp-1) 0 0; line-height:1; font-weight:var(--fw-normal);
}

/* Sommaire d'ancres en tête de la page Formations */
.formation__index{
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-3) var(--sp-5);
  margin-top:var(--sp-6);
}

.split{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-grid); align-items:center }
.split p{ font-size:var(--fs-body); color:var(--ink-body); max-width:46ch }

.frames{ display:grid; grid-template-columns:1.35fr .85fr; gap:var(--sp-4); align-items:center }
.frame{
  border-radius:var(--r-card); overflow:hidden; background:var(--surface);
  border:var(--bw-frame) solid var(--surface); box-shadow:var(--shadow-frame);
}
.frame img{ width:100%; height:100%; object-fit:cover }
.frame--wide img{ aspect-ratio:3/4 }
.frame--tall{ border-radius:var(--r-frame); border-width:var(--bw-frame-lg) }
.frame--tall img{ aspect-ratio:9/19 }

.section--alt{ background:var(--surface-2) }

.cols-2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-7) var(--sp-8); max-width:1000px; margin-inline:auto }
.cols-2 h3{ font-weight:var(--fw-bold); font-size:var(--fs-h3); margin:0 0 var(--sp-5) }

.blist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-4) }
.blist li{ display:flex; gap:var(--sp-3); align-items:flex-start; color:var(--ink-body) }
.blist li::before{
  content:"✓"; color:var(--blush-deep); font-weight:var(--fw-bold); flex:none;
  width:24px; height:24px; border-radius:var(--r-pill); background:var(--ground);
  display:grid; place-items:center; font-size:var(--fs-caption); margin-top:2px;
}

.band{ text-align:center }
.band__script{ font-family:var(--f-script); font-size:clamp(3.2rem,7.25vw,4.65rem); color:var(--ink); line-height:1 }
.band p{ color:var(--ink-soft); max-width:46ch; margin:var(--sp-3) auto var(--sp-6) }

/* ------------------------------------------------------ CARTE FORMATION -- */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:var(--sp-5) }
.fcard{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  overflow:hidden; box-shadow:var(--shadow-card); display:flex; flex-direction:column;
}
.fcard__media{
  aspect-ratio:16/10; background:linear-gradient(135deg,var(--blush),var(--surface-2));
  display:flex; align-items:flex-end; padding:var(--sp-3);
}
.fcard__media img{ width:100%; height:100%; object-fit:cover }
.fcard__body{ padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-2); flex:1 }
.fcard__cat{ font-family:var(--f-caps); font-size:var(--fs-label); letter-spacing:.22em; text-transform:uppercase; color:var(--blush-deep) }
.fcard__title{
  margin:0; font-family:var(--f-caps); font-weight:var(--fw-normal);
  text-transform:uppercase; letter-spacing:.12em; font-size:1.15rem;
}
/* Cormorant sort des chiffres elzéviriens par défaut : le « 1 » ressemble à un
   « I » et les prix deviennent ambigus. On force les chiffres alignés et de
   chasse fixe pour que les montants s'alignent d'une carte à l'autre. */
.fcard__price{
  font-family:var(--f-serif); font-size:1.6rem; margin-top:auto; padding-top:var(--sp-3);
  font-variant-numeric:lining-nums tabular-nums;
}
.fcard__meta{ font-size:var(--fs-caption); color:var(--ink-soft) }

/* ----------------------------------------------- SECTION FORMATION (long) --
   Bloc de la page Formations : colonne de spécifications à gauche, mockups
   d'appareils à droite. Relevé sur la maquette Canva `formations.png`.
   ⚠️ Ce bloc — et NON `.fcard` — est la présentation retenue pour cette page.
   ------------------------------------------------------------------------ */
.formation__body{ display:grid; grid-template-columns:1fr .8fr; gap:var(--sp-grid); align-items:center }
.formation__specs p{ color:var(--ink-body); margin:0 0 var(--sp-5); max-width:52ch }

/* Étiquette de rubrique : « PROGRAMME », « PROFIL ET PRÉREQUIS », « AVANTAGE ».
   Entre le titre de section et le corps — n'existait pas dans le kit. */
.spec-label{
  font-family:var(--f-caps); font-weight:var(--fw-light); text-transform:uppercase;
  letter-spacing:var(--ls-caps); font-size:1.15rem; color:var(--ink);
  margin:0 0 var(--sp-4);
}
.spec-label + .spec-label{ margin-top:var(--sp-5) }

/* Liste sans puce ni pastille — la maquette aligne des lignes nues.
   (`.blist` ajoute un ✓ : réservé aux listes de bénéfices.) */
.plainlist{
  list-style:none; margin:0 0 var(--sp-6); padding:0;
  display:flex; flex-direction:column; gap:var(--sp-2);
  color:var(--ink-body);
}

/* Page légale (politique de confidentialité, mentions) : colonne de lecture étroite.
   Le corps du site tient dans --wrap (1180px) : beaucoup trop large pour du texte
   suivi. 68ch garde des lignes lisibles — même intention que le 52ch que
   `.hero--compact .hero__sub` applique déjà au chapô. */
.legal{ max-width:68ch }
.legal p{ color:var(--ink-body); margin:0 0 var(--sp-4) }
.legal .spec-label{ margin-top:var(--sp-7) }
.legal .spec-label:first-child{ margin-top:0 }
.legal__meta{ color:var(--ink-soft); font-size:var(--fs-caption) }

/* Mockups d'appareils — cadre noir, contrairement à `.frame` qui est blanc. */
.devices{ display:flex; align-items:flex-end; justify-content:center; gap:var(--sp-4) }
.device{ background:var(--ink); overflow:hidden; box-shadow:var(--shadow-frame); flex:none }
.device img{ display:block; width:100%; height:100%; object-fit:cover }
.device--tablet{ border-radius:16px; padding:9px; width:min(62%,340px) }
.device--tablet img{ border-radius:7px; aspect-ratio:3/4 }
.device--phone{ border-radius:26px; padding:6px; width:min(30%,150px) }
.device--phone img{ border-radius:20px; aspect-ratio:9/19 }

/* Pied de bloc : durée + inscription */
.formation__foot{
  display:flex; align-items:center; gap:var(--sp-4);
  margin-top:var(--sp-6); flex-wrap:wrap;
}

/* ------------------------------------------------------------------ AVIS --
   Structure relevée sur `avis élèves.png` : formation + dates en tête, puis une
   carte BLANCHE (photo + prénom + étoiles), puis la citation **hors** de la
   carte, à même le fond. Ne pas tout enfermer dans la carte.
   ------------------------------------------------------------------------ */
.avis-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-6); align-items:start }
.avis{ display:flex; flex-direction:column }
.avis__formation{
  font-family:var(--f-caps); font-weight:var(--fw-normal); text-transform:uppercase;
  letter-spacing:var(--ls-caps); font-size:1.15rem; line-height:1.35;
  margin:0; text-wrap:balance;
}
.avis__dates{
  margin:var(--sp-2) 0 var(--sp-4); color:var(--ink); font-size:var(--fs-ui);
  font-variant-numeric:lining-nums tabular-nums;
}
.avis__card{
  background:var(--surface); border-radius:2px; box-shadow:var(--shadow-card);
  padding:var(--sp-3) var(--sp-3) var(--sp-4); text-align:center;
}
.avis__photo{ width:100%; aspect-ratio:3/4; object-fit:cover; display:block }
.avis__name{
  font-family:var(--f-caps); text-transform:uppercase; letter-spacing:var(--ls-caps);
  font-size:1.05rem; margin-top:var(--sp-4);
}
.stars{ color:var(--gold); font-size:1.15rem; letter-spacing:.14em; margin-top:var(--sp-1) }
.avis__quote{ margin:var(--sp-4) 0 0; color:var(--ink-body); font-size:var(--fs-ui) }

/* --------------------------------------------------------------- CONTACT --
   Page Contact : logo, titre en SERIF capitales — c'est le seul endroit du site
   où ce rôle typographique est employé (`.t-serif-caps`) — puis deux colonnes.
   Les intitulés réutilisent `.spec-label`.
   ------------------------------------------------------------------------ */
.contact{ text-align:center }
.contact__logo{ width:min(180px,40vw); margin:0 auto var(--sp-7) }
.contact__title{
  font-family:var(--f-serif); font-weight:600; text-transform:uppercase;
  letter-spacing:var(--ls-caps); font-size:clamp(1.8rem,5vw,2.4rem); margin:0 0 var(--sp-7);
}
.contact-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-7);
  max-width:720px; margin-inline:auto; text-align:left;
}
.contact-grid p{ margin:0 0 var(--sp-5); color:var(--ink-body) }
.contact-grid a{ border-bottom:1px solid var(--line-strong) }
.contact-grid a:hover{ border-color:var(--ink) }

/* ------------------------------------------------------------ FORMULAIRE -- */
.form{ display:flex; flex-direction:column; gap:var(--sp-5); max-width:560px }
.field{ display:flex; flex-direction:column; gap:7px }
.field label{
  font-family:var(--f-caps); font-size:var(--fs-label); text-transform:uppercase;
  letter-spacing:var(--ls-label); color:var(--ink-soft);
}
.field input, .field select, .field textarea{
  font-family:var(--f-body); font-weight:var(--fw-normal); font-size:var(--fs-ui);
  color:var(--ink); background:var(--surface-2);
  border:1px solid var(--line-strong); border-radius:var(--r-field); padding:13px 15px;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-soft); opacity:.7 }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:2px solid var(--blush-deep); outline-offset:1px; border-color:transparent;
}
.field--error input{ border-color:#B4453A }
.field__hint{ font-size:var(--fs-caption); color:var(--ink-soft) }
.form__status{
  margin:0; padding:var(--sp-4) var(--sp-5); border-radius:var(--r-field);
  font-size:var(--fs-ui); display:none;
}
.form__status.is-visible{ display:block }
.form__status--ok{ background:var(--blush); color:var(--ink) }
.form__status--ko{ background:var(--surface-2); border:1px solid #B4453A; color:#8C2F26 }
.form fieldset{ border:0; padding:0; margin:0; display:contents }
.consent{ display:flex; gap:var(--sp-3); align-items:flex-start; font-size:var(--fs-caption); color:var(--ink-soft) }
.consent input{ margin-top:3px; accent-color:var(--blush-deep); flex:none }
/* Piège à robots — doit rester invisible ET hors du flux de tabulation. */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

/* ---------------------------------------------------------------- FOOTER -- */
.site-footer{ background:var(--ground); border-top:1px solid var(--ink); padding:var(--sp-8) 0 var(--sp-7) }
.foot{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:var(--sp-7) }
.foot__brand{ font-family:var(--f-script); font-size:3.1rem; line-height:1 }
.foot__logo{ width:70px; margin-bottom:var(--sp-3) }
.foot h4{
  font-family:var(--f-caps); font-weight:var(--fw-normal); text-transform:uppercase;
  letter-spacing:var(--ls-label); font-size:var(--fs-caption); color:var(--ink-soft); margin:0 0 var(--sp-3);
}
.foot p, .foot a{ font-size:var(--fs-ui); color:var(--ink-body); margin:0 0 var(--sp-2) }
.foot a:hover{ color:var(--ink-soft) }
.foot__tagline{ color:var(--ink-soft) }
/* Le pied de page n'a plus de bouton d'appel (retiré le 2026-07-29, décision de Marc) :
   la règle .foot__cta qui l'espaçait a été supprimée avec lui. */
.copyright{
  max-width:var(--wrap); margin:var(--sp-7) auto 0;
  padding:var(--sp-5) var(--sp-gutter) 0; border-top:1px solid var(--line-strong);
  color:var(--ink-soft); font-size:var(--fs-caption);
  display:flex; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap;
}

/* =========================================================== RESPONSIVE == */

/* — 1080 : on resserre les grilles larges avant que le texte ne s'étire — */
@media (max-width:1080px){
  .split{ gap:var(--sp-6) }
  .cols-2{ gap:var(--sp-6) var(--sp-7) }
  .hero__text{ padding-right:var(--sp-6) }
}

/* — 880 : bascule mobile (nav burger, colonnes empilées) — */
@media (max-width:880px){
  .nav{ grid-template-columns:auto 1fr auto }
  .nav__group{ display:none }
  .nav__brand{ text-align:left }
  .burger{ display:flex }

  .hero{ grid-template-columns:1fr }
  .hero__text{ padding:var(--sp-8) 0 var(--sp-7); text-align:left }
  .hero__inner{ padding-inline:var(--sp-gutter) }
  .hero__media{ min-height:360px; order:-1 }
  .hero__ghost{ width:200px; opacity:.1 }

  .split{ grid-template-columns:1fr; gap:var(--sp-6) }
  .frames{ max-width:440px; margin-inline:auto }
  .formation__body{ grid-template-columns:1fr; gap:var(--sp-6) }
  .devices{ max-width:420px; margin-inline:auto }
  .cols-2{ grid-template-columns:1fr; gap:var(--sp-6) }
  .foot{ grid-template-columns:1fr; gap:var(--sp-6) }
  .avis-grid{ grid-template-columns:1fr; gap:var(--sp-7); max-width:460px; margin-inline:auto }
  .contact-grid{ grid-template-columns:1fr; gap:var(--sp-6) }
}

/* — 640 : petit mobile — on protège la lisibilité des titres très espacés — */
@media (max-width:640px){
  /* Sélecteur de CLASSE, jamais `.kicker h2` : selon la page, le <h2> est la
     ligne CAPS (Accueil) ou la ligne script (Formations) — un sélecteur de
     balise appliquait ce tracking au script, qui n'en veut pas. */
  .kicker__title{ letter-spacing:.16em }
  .frames{ grid-template-columns:1fr }
  .frame--tall{ display:none }        /* le mockup téléphone n'apporte rien en 1 colonne */
  .card-grid{ grid-template-columns:1fr }
  .copyright{ flex-direction:column; gap:var(--sp-2) }
  .btn{ width:100%; text-align:center }
  .hero__cta .btn{ width:auto }
}