/* ============================================================
   AYANI FORMATION & COIFFURE — FEUILLE DE STYLE
   ------------------------------------------------------------
   Système de design dérivé du logo existant :
   · le serif à fort contraste du sceau devient la typographie des titres
   · le champagne doré devient une couleur d'interface, plus une simple texture
   · les textes longs sont alignés à gauche, jamais centrés
   · un seul bouton principal par page, franchement contrasté
   ============================================================ */

/* ---------- 1. JETONS ---------- */

:root {
  /* Fonds et surfaces */
  --papier: #FCFAF6;
  --surface: #F4F0E8;
  --surface-forte: #EAE3D6;
  --bord: #E0D8C8;
  --bord-fort: #CBBFA8;

  /* Textes */
  --encre: #17140F;
  --encre-douce: #4A4338;
  --encre-faible: #6E6555;

  /* Accent — or ancien, lisible sur fond clair */
  --or: #8A6A24;
  --or-vif: #B08D3C;
  --or-voile: #F2E9D5;

  /* Contraste inverse */
  --nuit: #17140F;
  --nuit-douce: #221E17;
  --sur-nuit: #F6F1E7;

  /* Sémantique */
  --valide: #2C6248;
  --valide-fond: #E4EFE9;
  --alerte: #8A5A14;
  --alerte-fond: #F6EDDB;

  /* Typographies — Jost pour les titres, Source Sans 3 pour les textes */
  --titre: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --texte: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Rythme — volontairement large */
  --lisiere: clamp(20px, 5vw, 56px);
  --colonne: 1240px;
  --colonne-texte: 66ch;
  --respiration: clamp(72px, 11vw, 148px);
  --respiration-courte: clamp(48px, 7vw, 92px);

  --ombre: 0 1px 2px rgba(23, 20, 15, .04), 0 12px 32px -20px rgba(23, 20, 15, .28);
  --ombre-forte: 0 2px 4px rgba(23, 20, 15, .06), 0 24px 48px -28px rgba(23, 20, 15, .38);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #14120E;
    --surface: #1C1913;
    --surface-forte: #262218;
    --bord: #322C21;
    --bord-fort: #4A4232;

    --encre: #F5F0E5;
    --encre-douce: #C9C0AE;
    --encre-faible: #9A9080;

    --or: #D2B172;
    --or-vif: #E3C88F;
    --or-voile: #2A2318;

    --nuit: #F5F0E5;
    --nuit-douce: #E8E1D2;
    --sur-nuit: #14120E;

    --valide: #6BB894;
    --valide-fond: #16281F;
    --alerte: #D2A857;
    --alerte-fond: #2A2317;

    --ombre: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 32px -20px rgba(0, 0, 0, .9);
    --ombre-forte: 0 2px 4px rgba(0, 0, 0, .6), 0 24px 48px -28px rgba(0, 0, 0, 1);
  }
}

:root[data-theme="dark"] {
  --papier: #14120E;
  --surface: #1C1913;
  --surface-forte: #262218;
  --bord: #322C21;
  --bord-fort: #4A4232;

  --encre: #F5F0E5;
  --encre-douce: #C9C0AE;
  --encre-faible: #9A9080;

  --or: #D2B172;
  --or-vif: #E3C88F;
  --or-voile: #2A2318;

  --nuit: #F5F0E5;
  --nuit-douce: #E8E1D2;
  --sur-nuit: #14120E;

  --valide: #6BB894;
  --valide-fond: #16281F;
  --alerte: #D2A857;
  --alerte-fond: #2A2317;

  --ombre: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 32px -20px rgba(0, 0, 0, .9);
  --ombre-forte: 0 2px 4px rgba(0, 0, 0, .6), 0 24px 48px -28px rgba(0, 0, 0, 1);
}

/* ---------- 2. BASE ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--or); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--or-vif); }

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

.saut-contenu {
  position: absolute; left: -9999px; top: 0;
  background: var(--nuit); color: var(--sur-nuit);
  padding: 12px 20px; z-index: 200; border-radius: 0 0 4px 0;
}
.saut-contenu:focus { left: 0; }

/* ---------- 3. TYPOGRAPHIE ---------- */

h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.008em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(38px, 6.4vw, 72px); font-weight: 300; }
h2 { font-size: clamp(28px, 4.2vw, 46px); font-weight: 300; }
h3 { font-size: clamp(21px, 2.5vw, 27px); font-weight: 400; }
h4 { font-family: var(--titre); font-size: 18px; font-weight: 500; letter-spacing: 0; }

p { margin: 0 0 1.15em; max-width: var(--colonne-texte); }
p:last-child { margin-bottom: 0; }

.chapeau {
  font-size: clamp(18.5px, 2.2vw, 21px);
  line-height: 1.68;
  color: var(--encre-douce);
  max-width: 58ch;
}

.surtitre {
  font-family: var(--titre);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--or);
  margin: 0 0 18px;
}

.mention { font-size: 14.5px; color: var(--encre-faible); }

strong, b { font-weight: 600; }

/* ---------- 4. STRUCTURE ---------- */

.enveloppe {
  max-width: var(--colonne);
  margin-inline: auto;
  padding-inline: var(--lisiere);
}

.section { padding-block: var(--respiration); }
.section--serree { padding-block: var(--respiration-courte); }
.section--teintee { background: var(--surface); }
.section--nuit { background: var(--nuit); color: var(--sur-nuit); }
.section--nuit h1, .section--nuit h2, .section--nuit h3 { color: var(--sur-nuit); }
.section--nuit .chapeau { color: var(--sur-nuit); opacity: .82; }
.section--nuit .surtitre { color: var(--or-vif); }

.entete-section { margin-bottom: clamp(34px, 5vw, 60px); }
h1 + .chapeau, h2 + .chapeau, h3 + .chapeau { margin-top: 20px; }
h2 + p, h3 + p, h4 + p, h2 + ul, h2 + ol, h3 + ul, h3 + ol { margin-top: 18px; }

.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(36px, 6vw, 88px);
  align-items: start;
}
.duo--texte-dabord > *:first-child { order: -1; }

/* ---------- 5. EN-TÊTE ---------- */

.entete {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--papier) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--bord);
}

.entete__interieur {
  max-width: var(--colonne);
  margin-inline: auto;
  padding: 14px var(--lisiere);
  display: flex; align-items: center; gap: 24px;
}

.marque { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; flex-shrink: 0; }
.marque__sceau {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--or); flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--or-voile);
}
.marque__sceau span {
  font-family: var(--titre); font-size: 17px; line-height: 1;
  color: var(--encre); letter-spacing: .02em;
}
.marque__nom { display: flex; flex-direction: column; line-height: 1.15; }
.marque__nom b { font-family: var(--titre); font-weight: 500; font-size: 19px; letter-spacing: .04em; }
.marque__nom small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-faible); }

.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav a:not(.bouton) {
  color: var(--encre-douce); text-decoration: none;
  font-size: 15.5px; padding: 8px 12px; border-radius: 3px;
  white-space: nowrap;
}
.nav a:not(.bouton):hover { color: var(--encre); background: var(--surface); }
.nav a:not(.bouton)[aria-current="page"] { color: var(--encre); font-weight: 600; }
.nav .bouton { margin-left: 10px; padding: 11px 20px; font-size: 15px; }

.bascule-menu {
  display: none; margin-left: auto;
  background: none; border: 1px solid var(--bord-fort);
  color: var(--encre); border-radius: 3px;
  padding: 9px 14px; font-family: var(--texte); font-size: 14px; cursor: pointer;
}

@media (max-width: 1000px) {
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--papier); border-bottom: 1px solid var(--bord);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--lisiere) 20px;
    box-shadow: var(--ombre);
  }
  .nav.est-ouvert { display: flex; }
  .nav a { padding: 13px 4px; border-bottom: 1px solid var(--bord); font-size: 17px; }
  .nav .bouton { margin-top: 14px; justify-content: center; border-bottom: none; }
  .bascule-menu { display: block; }
}

/* ---------- 6. BOUTONS ---------- */
/* Un seul bouton principal par page. Le reste est secondaire ou textuel. */

.bouton {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--texte); font-size: 16px; font-weight: 600;
  padding: 14px 26px; border-radius: 3px;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.bouton:active { transform: translateY(1px); }

.bouton--principal {
  background: var(--nuit); color: var(--sur-nuit);
  border-color: var(--nuit);
}
.bouton--principal:hover { background: var(--or); border-color: var(--or); color: #17140F; }

.bouton--or {
  background: var(--or); color: #FFFDF8; border-color: var(--or);
}
.bouton--or:hover { background: var(--or-vif); border-color: var(--or-vif); }

.bouton--second {
  background: transparent; color: var(--encre); border-color: var(--bord-fort);
}
.bouton--second:hover { border-color: var(--encre); background: var(--surface); }

.section--nuit .bouton--second { color: var(--sur-nuit); border-color: rgba(246,241,231,.35); }
.section--nuit .bouton--second:hover { border-color: var(--sur-nuit); background: rgba(246,241,231,.08); }
.section--nuit .bouton--principal { background: var(--or); border-color: var(--or); color: #17140F; }
.section--nuit .bouton--principal:hover { background: var(--or-vif); border-color: var(--or-vif); }

.groupe-boutons { display: flex; flex-wrap: wrap; gap: 14px; }

.lien-fleche {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; text-decoration: none; font-size: 16px;
}
.lien-fleche::after { content: "→"; transition: transform .18s ease; }
.lien-fleche:hover::after { transform: translateX(4px); }

/* ---------- 7. BANNIÈRE D'ACCUEIL ---------- */
/* Le satin champagne est reconstitué en CSS : pas d'image, pas de poids. */

.banniere { position: relative; overflow: hidden; background: var(--papier); }

.banniere__satin {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(104deg, transparent 0%, rgba(210,177,114,.30) 18%, transparent 34%),
    linear-gradient(84deg, transparent 30%, rgba(232,210,160,.34) 52%, transparent 68%),
    linear-gradient(122deg, transparent 55%, rgba(196,160,96,.22) 76%, transparent 92%),
    linear-gradient(160deg, var(--or-voile) 0%, var(--papier) 62%);
  opacity: .85;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .banniere__satin { opacity: .5; }
}
:root[data-theme="dark"] .banniere__satin { opacity: .5; }

.banniere__contenu {
  position: relative; z-index: 1;
  max-width: var(--colonne); margin-inline: auto;
  padding: clamp(64px, 11vw, 128px) var(--lisiere) clamp(48px, 8vw, 88px);
}
.banniere h1 { max-width: 17ch; margin-bottom: 22px; }
.banniere .chapeau { margin-bottom: 32px; }

.banniere__preuves {
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  margin-top: 38px; padding-top: 26px;
  border-top: 1px solid var(--bord-fort);
  font-size: 14.5px; color: var(--encre-douce);
}
.banniere__preuves span { display: inline-flex; align-items: center; gap: 8px; }
.banniere__preuves span::before { content: "—"; color: var(--or); }

/* ---------- 8. PORTES D'ENTRÉE ---------- */

.portes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }

.porte {
  display: flex; flex-direction: column; gap: 12px;
  padding: 30px 30px 34px;
  background: var(--papier);
  border: 1px solid var(--bord);
  border-top: 3px solid var(--or);
  border-radius: 0 0 4px 4px;
  text-decoration: none; color: inherit;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.porte:hover { box-shadow: var(--ombre-forte); transform: translateY(-3px); border-color: var(--bord-fort); border-top-color: var(--or); }
.porte h3 { color: var(--encre); }
.porte p { color: var(--encre-douce); font-size: 16px; margin: 0; }
.porte .lien-fleche { margin-top: auto; padding-top: 10px; color: var(--or); }

/* ---------- 9. CARTES FORMATION ---------- */

.grille-formations { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }

.carte {
  display: flex; flex-direction: column;
  background: var(--papier); border: 1px solid var(--bord); border-radius: 4px;
  overflow: hidden; text-decoration: none; color: inherit;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.carte:hover { border-color: var(--bord-fort); box-shadow: var(--ombre-forte); transform: translateY(-3px); }
.carte__corps { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.carte__famille {
  font-size: 11.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--or);
}
.carte h3 { font-size: 23px; }
.carte__accroche { color: var(--encre-douce); font-size: 15.5px; margin: 0; flex: 1; }
.carte__pied {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--bord);
  font-size: 14px; color: var(--encre-faible);
  font-variant-numeric: tabular-nums;
}
.carte__pied b { color: var(--encre); font-weight: 600; }

/* ---------- 10. EMPLACEMENTS PHOTO ---------- */
/* Visibles, documentés, et remplaçables par une simple balise <img>. */

.photo {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: var(--ratio, 4 / 3);
  background:
    repeating-linear-gradient(135deg, var(--surface) 0 14px, var(--surface-forte) 14px 28px);
  border: 1px dashed var(--bord-fort);
  border-radius: 3px;
  padding: 24px;
  overflow: hidden;
}
.photo__note {
  font-size: 13px; line-height: 1.5; color: var(--encre-faible);
  text-align: center; max-width: 34ch;
}
.photo__note b {
  display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--or); margin-bottom: 6px;
}
.photo--portrait { --ratio: 3 / 4; }
.photo--large { --ratio: 16 / 9; }
.photo--carre { --ratio: 1 / 1; }

/* ---------- 11. FICHE FORMATION ---------- */

.fiche-entete { background: var(--surface); border-bottom: 1px solid var(--bord); }
.fiche-entete .enveloppe { padding-block: clamp(40px, 6vw, 68px); }
.fiche-entete h1 { max-width: 20ch; margin-bottom: 18px; }
.fiche-entete .surtitre { margin-bottom: 12px; }

.reperes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--bord);
  border: 1px solid var(--bord); border-radius: 4px; overflow: hidden;
  margin-top: 32px;
}
.repere { background: var(--papier); padding: 16px 18px; }
.repere dt {
  font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--encre-faible); margin-bottom: 5px;
}
.repere dd { margin: 0; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.repere dd small { display: block; font-size: 13.5px; font-weight: 400; color: var(--encre-faible); }

.bloc-programme { display: flex; flex-direction: column; gap: 22px; }
.demi-journee {
  border-left: 2px solid var(--or);
  padding: 2px 0 2px 22px;
}
.demi-journee h3 { font-family: var(--texte); font-size: 17px; font-weight: 600; margin-bottom: 10px; }
.demi-journee ul { margin: 0; padding-left: 20px; }
.demi-journee li { margin-bottom: 7px; color: var(--encre-douce); }

.liste-objectifs { list-style: none; margin: 0; padding: 0; counter-reset: obj; }
.liste-objectifs li {
  counter-increment: obj;
  display: grid; grid-template-columns: 34px 1fr; gap: 14px;
  padding: 16px 0; border-bottom: 1px solid var(--bord);
}
.liste-objectifs li:last-child { border-bottom: none; }
.liste-objectifs li::before {
  content: counter(obj);
  font-family: var(--titre); font-size: 22px; color: var(--or); line-height: 1.1;
}

.liste-cochee { list-style: none; margin: 0; padding: 0; }
.liste-cochee li {
  position: relative; padding-left: 26px; margin-bottom: 9px; color: var(--encre-douce);
}
.liste-cochee li::before {
  content: ""; position: absolute; left: 4px; top: .62em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--or);
}

/* ---------- 12. TABLEAUX ---------- */

.tableau-defilant { overflow-x: auto; border: 1px solid var(--bord); border-radius: 4px; }
table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 15.5px; }
th, td { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--bord); vertical-align: top; }
th {
  background: var(--surface); font-weight: 600; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--encre-faible);
}
tr:last-child td { border-bottom: none; }

.etat { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 3px; white-space: nowrap; }
.etat--ok { background: var(--valide-fond); color: var(--valide); }
.etat--attente { background: var(--alerte-fond); color: var(--alerte); }

/* ---------- 13. ACCORDÉON (FAQ) ---------- */

.accordeon { border-top: 1px solid var(--bord); }
.accordeon details { border-bottom: 1px solid var(--bord); }
.accordeon summary {
  cursor: pointer; list-style: none;
  padding: 20px 40px 20px 0; position: relative;
  font-weight: 600; font-size: 17.5px;
}
.accordeon summary::-webkit-details-marker { display: none; }
.accordeon summary::after {
  content: "+"; position: absolute; right: 6px; top: 17px;
  font-size: 24px; font-weight: 400; color: var(--or); line-height: 1;
  transition: transform .18s ease;
}
.accordeon details[open] summary::after { transform: rotate(45deg); }
.accordeon summary:hover { color: var(--or); }
.accordeon__reponse { padding: 0 40px 22px 0; color: var(--encre-douce); }

/* ---------- 14. SIMULATEUR DE BUDGET ---------- */

.simulateur {
  display: grid; grid-template-columns: minmax(280px, 1fr) minmax(280px, 400px);
  gap: 0; border: 1px solid var(--bord); border-radius: 4px; overflow: hidden;
  box-shadow: var(--ombre);
}
@media (max-width: 860px) { .simulateur { grid-template-columns: 1fr; } }

.simulateur__reglages { padding: 30px clamp(22px, 3vw, 34px); background: var(--papier); }
.simulateur__resultat {
  padding: 30px clamp(22px, 3vw, 34px);
  background: var(--nuit); color: var(--sur-nuit);
  display: flex; flex-direction: column; gap: 18px;
}

.champ { margin-bottom: 22px; }
.champ:last-child { margin-bottom: 0; }
.champ > label, .champ > .champ__intitule {
  display: block; font-weight: 600; font-size: 15px; margin-bottom: 8px;
}
.champ__aide { font-size: 13.5px; color: var(--encre-faible); margin: 6px 0 0; }

select, input[type="text"], input[type="email"], input[type="tel"], textarea {
  width: 100%; font-family: var(--texte); font-size: 16px;
  padding: 12px 14px; border-radius: 3px;
  border: 1px solid var(--bord-fort); background: var(--papier); color: var(--encre);
}
select:focus, input:focus, textarea:focus { border-color: var(--or); outline: none; box-shadow: 0 0 0 3px var(--or-voile); }
textarea { min-height: 130px; resize: vertical; }

input[type="range"] { width: 100%; accent-color: var(--or); }

.segments { display: flex; flex-wrap: wrap; gap: 6px; }
.segments input { position: absolute; opacity: 0; pointer-events: none; }
.segments label {
  padding: 9px 15px; border: 1px solid var(--bord-fort); border-radius: 3px;
  font-size: 15px; cursor: pointer; font-variant-numeric: tabular-nums;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.segments label:hover { border-color: var(--encre); }
.segments input:checked + label { background: var(--nuit); color: var(--sur-nuit); border-color: var(--nuit); }
.segments input:focus-visible + label { outline: 2px solid var(--or); outline-offset: 2px; }

.ligne-resultat {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding-bottom: 14px; border-bottom: 1px solid rgba(246,241,231,.16);
  font-variant-numeric: tabular-nums;
}
.ligne-resultat span { font-size: 15px; opacity: .8; }
.ligne-resultat b { font-size: 19px; font-weight: 600; }
.ligne-resultat--total { border-bottom: none; padding-bottom: 0; }
.ligne-resultat--total span { opacity: 1; font-weight: 600; }
.ligne-resultat--total b { font-family: var(--titre); font-size: 36px; font-weight: 500; color: var(--or-vif); }

.simulateur__resultat .bouton--principal {
  background: var(--or); border-color: var(--or); color: #17140F;
  justify-content: center; width: 100%;
}
.simulateur__resultat .bouton--principal:hover { background: var(--or-vif); border-color: var(--or-vif); color: #17140F; }

.avertissement {
  font-size: 13.5px; line-height: 1.55; opacity: .75;
  border-top: 1px solid rgba(246,241,231,.16); padding-top: 14px;
}

/* ---------- 15. ENCARTS ---------- */

.encart {
  border-left: 3px solid var(--or);
  background: var(--or-voile);
  padding: 20px 24px; border-radius: 0 4px 4px 0;
}
.encart h3 { font-family: var(--texte); font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.encart p { color: var(--encre-douce); }

.encart--alerte { border-left-color: var(--alerte); background: var(--alerte-fond); }

.bandeau-qualiopi {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px;
  padding: 22px 26px; border: 1px solid var(--bord); border-radius: 4px;
  background: var(--papier);
}
.bandeau-qualiopi__logo {
  flex-shrink: 0; width: 92px; height: 56px;
  display: grid; place-items: center; text-align: center;
  border: 1px dashed var(--bord-fort); border-radius: 3px;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-faible);
  line-height: 1.3; padding: 4px;
}
.bandeau-qualiopi p { margin: 0; font-size: 15.5px; }

/* ---------- 16. APPEL FINAL ---------- */

.appel { text-align: left; }
.appel h2 { max-width: 20ch; margin-bottom: 16px; }
.appel .chapeau { margin-bottom: 28px; }

/* ---------- 17. PIED DE PAGE ---------- */

.pied { background: var(--surface); border-top: 1px solid var(--bord); }
.pied__grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 36px; padding-block: clamp(44px, 6vw, 64px);
}
.pied h4 {
  font-size: 12px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--encre-faible); margin-bottom: 14px; font-weight: 600;
}
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 9px; }
.pied a { color: var(--encre-douce); text-decoration: none; font-size: 15.5px; }
.pied a:hover { color: var(--or); text-decoration: underline; }
.pied address { font-style: normal; font-size: 15.5px; color: var(--encre-douce); }

.reseaux { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.reseaux a {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--bord-fort);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  color: var(--encre-douce); text-decoration: none;
}
.reseaux a:hover { border-color: var(--or); color: var(--or); }

.pied__bas {
  border-top: 1px solid var(--bord);
  padding-block: 22px;
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  font-size: 14px; color: var(--encre-faible);
}

/* ---------- 18. MÉDIAS : GRANDES PHOTOS ET VIDÉOS ---------- */
/* Le contenu visuel occupe la page. C'est ce qu'un coiffeur regarde en premier. */

.media-pleine { width: 100%; margin-block: var(--respiration-courte); }
.media-pleine .photo { border-radius: 0; border-inline: none; }
.media-pleine--bord { padding-inline: var(--lisiere); max-width: var(--colonne); margin-inline: auto; }
.media-pleine--bord .photo { border-radius: 4px; border-inline: 1px dashed var(--bord-fort); }

.photo--bandeau { --ratio: 21 / 9; }
.photo--haute { --ratio: 4 / 5; }

.video {
  position: relative; aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  background: var(--nuit); border-radius: 4px; overflow: hidden; padding: 28px;
}
.video__note { text-align: center; color: var(--sur-nuit); max-width: 40ch; font-size: 14px; line-height: 1.6; opacity: .82; }
.video__note b {
  display: block; font-family: var(--titre); font-size: 11px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--or-vif);
  margin-bottom: 8px; opacity: 1;
}
.video__lecture {
  width: 72px; height: 72px; border-radius: 50%;
  border: 1px solid rgba(210, 177, 114, .5);
  display: grid; place-items: center; margin: 0 auto 18px;
  transition: transform .3s ease, border-color .3s ease;
}
.video__lecture::after {
  content: ""; width: 0; height: 0;
  border-left: 17px solid var(--or-vif);
  border-top: 11px solid transparent; border-bottom: 11px solid transparent;
  margin-left: 5px;
}
.video:hover .video__lecture { transform: scale(1.06); border-color: var(--or-vif); }

.galerie { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.galerie .photo { --ratio: 3 / 4; }
.galerie > *:first-child { grid-column: span 2; }
.galerie > *:first-child.photo { --ratio: 3 / 2; }
@media (max-width: 720px) {
  .galerie > *:first-child { grid-column: span 1; }
  .galerie > *:first-child.photo { --ratio: 3 / 4; }
}

.legende { font-size: 14px; color: var(--encre-faible); margin-top: 12px; max-width: 60ch; }

/* ---------- 19. ANIMATIONS ---------- */
/* Chaque animation confirme une action ou guide le regard. Rien de décoratif. */

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

.banniere .surtitre,
.banniere h1,
.banniere .chapeau,
.banniere .groupe-boutons,
.banniere__preuves {
  animation: monter .7s cubic-bezier(.22, .8, .3, 1) backwards;
}
.banniere .surtitre       { animation-delay: .05s; }
.banniere h1              { animation-delay: .14s; }
.banniere .chapeau        { animation-delay: .26s; }
.banniere .groupe-boutons { animation-delay: .38s; }
.banniere__preuves        { animation-delay: .50s; }

.revele {
  opacity: 0; transform: translateY(26px);
  transition: opacity .75s cubic-bezier(.22, .8, .3, 1), transform .75s cubic-bezier(.22, .8, .3, 1);
}
.revele.est-visible { opacity: 1; transform: none; }
.revele--d1 { transition-delay: .09s; }
.revele--d2 { transition-delay: .18s; }
.revele--d3 { transition-delay: .27s; }

/* Sans JavaScript, tout reste visible */
.sans-js .revele { opacity: 1; transform: none; }

.entete { transition: box-shadow .3s ease; }
.entete.est-defilee { box-shadow: var(--ombre); }

.nav a:not(.bouton) { position: relative; }
.nav a:not(.bouton)::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px;
  height: 1px; background: var(--or);
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s cubic-bezier(.22, .8, .3, 1);
}
.nav a:not(.bouton):hover::after,
.nav a:not(.bouton)[aria-current="page"]::after { transform: scaleX(1); }
@media (max-width: 1000px) { .nav a:not(.bouton)::after { display: none; } }

.carte, .porte { transition: border-color .3s ease, box-shadow .4s ease, transform .4s cubic-bezier(.22, .8, .3, 1); }

/* ---------- 20. DIVERS ---------- */

.visuellement-cache {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.a-remplacer {
  background: var(--alerte-fond); color: var(--alerte);
  padding: 1px 7px; border-radius: 3px;
  font-size: .92em; font-weight: 600;
}

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

@media print {
  .entete, .pied, .bascule-menu, .simulateur__reglages { display: none; }
  body { font-size: 12pt; }
}

/* ---------- 21. CITATION DE RÉFÉRENCE ---------- */

.citation { margin: 0; max-width: 72ch; }
.citation__texte {
  font-family: var(--titre); font-weight: 300;
  font-size: clamp(23px, 3.2vw, 34px); line-height: 1.32;
  margin: 0 0 28px; max-width: none; text-wrap: pretty;
}
.citation__texte::before { content: "« "; color: var(--or-vif); }
.citation__texte::after { content: " »"; color: var(--or-vif); }
.citation__auteur { display: flex; flex-direction: column; gap: 2px; font-size: 15.5px; }
.citation__auteur b { font-weight: 600; }
.citation__auteur span { opacity: .72; }
.section--nuit .citation__texte { color: var(--sur-nuit); }

/* ---------- 22. CHAMP PIÈGE ANTI-SPAM ---------- */

.pot-de-miel {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

/* ---------- 23. BULLE « ÊTRE RAPPELÉ » ---------- */
/* Construite avec <details> : fonctionne sans JavaScript. */

.rappel {
  position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px);
  z-index: 80;
}

.rappel__bulle {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--nuit); color: var(--sur-nuit);
  padding: 14px 22px; border-radius: 999px;
  font-family: var(--titre); font-weight: 500; font-size: 15.5px;
  box-shadow: var(--ombre-forte);
  transition: transform .2s ease, background-color .2s ease;
  user-select: none;
}
.rappel__bulle::-webkit-details-marker { display: none; }
.rappel__bulle:hover { transform: translateY(-2px); background: var(--or); color: #17140F; }
.rappel__icone { font-size: 18px; line-height: 1; }
.rappel[open] .rappel__bulle { background: var(--or); color: #17140F; }

.rappel__panneau {
  position: absolute; right: 0; bottom: calc(100% + 14px);
  width: min(340px, calc(100vw - 32px));
  background: var(--papier); color: var(--encre);
  border: 1px solid var(--bord); border-radius: 8px;
  box-shadow: var(--ombre-forte);
  padding: 24px 24px 26px;
  animation: monter .28s cubic-bezier(.22, .8, .3, 1);
}
.rappel__titre { font-size: 22px; font-weight: 400; margin: 0 0 8px; }
.rappel__intro { font-size: 15px; color: var(--encre-douce); margin: 0 0 18px; }
.rappel__panneau .champ { margin-bottom: 14px; }
.rappel__panneau .champ label { font-size: 14px; margin-bottom: 6px; }
.rappel__panneau input { padding: 10px 12px; font-size: 15px; }
.rappel__note { font-size: 13.5px; color: var(--encre-faible); margin: 14px 0 0; text-align: center; }

@media (max-width: 520px) {
  .rappel__label { display: none; }
  .rappel__bulle { padding: 15px; }
  .rappel__icone { font-size: 20px; }
}
@media print { .rappel { display: none; } }

/* ---------- 24. ARTICLE (BLOG) ---------- */

.article { max-width: 720px; }
.article h2 {
  font-size: clamp(23px, 3vw, 30px); font-weight: 300;
  margin: 40px 0 4px;
}
.article p { font-size: 18px; line-height: 1.78; margin: 0 0 1.15em; }
.article .liste-cochee { margin: 4px 0 20px; }
.article .liste-cochee li { font-size: 18px; }
.article .encart { margin: 28px 0; }
.article__signature {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--bord);
}
.article__signature p { font-size: 15.5px; color: var(--encre-faible); }

/* ---------- 25. LE CLUB (NEWSLETTER) ---------- */

.club {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
@media (max-width: 820px) { .club { grid-template-columns: 1fr; } }

.club__texte h2 { font-size: clamp(24px, 3.2vw, 34px); font-weight: 300; margin-top: 4px; }
.club__rythme { color: var(--encre-douce); margin-top: 14px; }

.club__form { display: flex; flex-direction: column; gap: 14px; }
.club__form .champ { margin: 0; }
.club__consent {
  display: grid; grid-template-columns: auto 1fr; gap: 10px;
  align-items: start; font-size: 14px; color: var(--encre-douce); line-height: 1.5;
  cursor: pointer;
}
.club__consent input { margin-top: 3px; accent-color: var(--or); width: 17px; height: 17px; }
.club__form .bouton { justify-content: center; }
.club__confid { font-size: 13px; color: var(--encre-faible); margin: 0; }

.club--sombre { color: var(--sur-nuit); }
.club--sombre h2 { color: var(--sur-nuit); }
.club--sombre .club__rythme { color: var(--sur-nuit); opacity: .8; }
.club--sombre .surtitre { color: var(--or-vif); }
.club--sombre .club__consent { color: var(--sur-nuit); opacity: .85; }
.club--sombre input[type="email"] { background: rgba(246,241,231,.06); color: var(--sur-nuit); border-color: rgba(246,241,231,.28); }