/* ANDIES MAKEUP — socle visuel du site pro
   ------------------------------------------------------------------
   Un seul fichier, partagé par toutes les pages. Il tient trois rôles :
   la palette d'Andies, l'échelle typographique, et les composants qui
   reviennent d'une page à l'autre (en-tête, pied, cartes, boutons).

   CE QUI EST IMPOSÉ ET NE SE DISCUTE PAS
   Les cinq couleurs viennent de l'image qu'Andies a envoyée le 04/08/2026
   à 00h30, avec leurs usages nommés (CDC §2). On ne les réinterprète pas,
   on ne les « harmonise » pas, et il n'y a PAS de mode sombre : une marque
   garde sa palette quel que soit le réglage du visiteur.

   CONTRASTES MESURÉS (WCAG 2.1, calcul du 05/08/2026 — pas une estimation)
     Vanilla Custard + encre ....... 14,06:1   tout texte
     Princeton Orange + encre .......  7,13:1   tout texte
     Tomato Jam + blanc .............  5,61:1   tout texte
     Olive + encre ..................  5,43:1   tout texte
     Olive + blanc ..................  3,13:1   GROS TITRES SEULEMENT
     Blush Rose + encre .............  4,41:1   gros titres, et corps court
     Blush Rose + blanc .............  3,85:1   GROS TITRES SEULEMENT

   D'où deux règles qui gouvernent tout le fichier :
     — sur Olive et Blush Rose, le corps de texte est en ENCRE, jamais en blanc ;
     — le blanc sur ces deux fonds n'est autorisé qu'au-delà de 24px, en gras.
   Le seuil de 3:1 pour le gros texte est celui de la norme, pas un arrangement.
   ------------------------------------------------------------------ */

:root {
  /* Palette V3 — le MOODBOARD d'Andies (Drive « Moodboard cours »,
     29/07/2026) : « Fond Blanc », « dégradé hybiscus », « la mer, les
     palmiers », et sa « petite palette de couleurs » (5 pastilles :
     orange brûlé, orange, bordeaux, rouge, jaune doré). Les noms de
     variables sont conservés pour ne pas casser les composants ; leurs
     RÔLES sont réaffectés à la palette du moodboard. */
  --blush: #dd2a26; /* rouge hibiscus — citation, accents forts */
  --tomato: #7f1618; /* bordeaux — aplats profonds */
  --custard: #fbfaf7; /* FOND BLANC du moodboard (blanc cassé chaud) */
  --orange: #e07f16; /* orange hibiscus — accents, numéros */
  --olive: #a9cfc5; /* lagon — la mer et les palmiers, bloc « bonne fée » */
  --dore: #f4b63f; /* jaune doré — touches */

  /* Neutres */
  --sable: #f6f1ea;
  --creme: #fffaf0;
  --encre: #2a1810; /* texte principal — 15,4:1 sur le fond blanc */
  --brun: #6b5b49; /* texte secondaire — 7,2:1 sur le fond blanc */
  --blanc: #ffffff;

  /* Typographie — un display + un texte, pas davantage.
     Le display est un serif à très fort contraste (Didot, Bodoni) : c'est la
     lettre de la presse mode depuis Harper's Bazaar, elle porte à elle seule
     le registre « éditorial premium » qu'Andies demande.
     Le corps est Jost, un géométrique de la famille des Futura — chaleureux,
     féminin sans être mièvre, et surtout PAS Inter ni Roboto : ces deux-là
     sont les polices par défaut de la moitié du web, elles font instantanément
     « site fabriqué à la chaîne ». Elles étaient dans ma première version de ce
     fichier ; elles en sont retirées volontairement. */
  --serif:
    'Didot', 'Bodoni 72', 'Playfair Display', 'Cormorant Garamond', Georgia, 'Times New Roman',
    serif;
  --sans: 'Jost', 'Futura', 'Avenir Next', 'Century Gothic', 'Trebuchet MS', sans-serif;

  /* Échelle : 12 / 14 / 16 / 20 / 24 / 32 / 48 / 64 */
  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-lg: 1.25rem;
  --t-xl: 1.5rem;
  --t-2xl: 2rem;
  --t-3xl: 3rem;
  --t-4xl: 4rem;

  /* Espacement — multiples de 4 */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-6: 1.5rem;
  --e-8: 2rem;
  --e-12: 3rem;
  --e-16: 4rem;
  --e-24: 6rem;

  --rayon: 20px;
  --rayon-sm: 12px;
  --largeur: 1180px;

  /* Empilement : modale > menu > barre collante */
  --z-collant: 10;
  --z-menu: 100;
  --z-modale: 1000;
}

/* ── Socle ─────────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* Le fond n'est pas un aplat. Un beige parfaitement uniforme sur 4000 pixels
   de haut a l'air d'un calque de remplissage ; un grain très faible lui donne
   la matière d'un papier, ce qui est exactement le registre d'une marque
   beauté. Le grain est un SVG en ligne (zéro requête réseau) et deux halos
   très dilués posent une lumière, sans jamais fabriquer de dégradé coloré.
   Opacité du grain : 3,5 % — au-delà on le voit, et il devient un motif. */
body {
  background-color: var(--custard);
  background-image:
    radial-gradient(ellipse 80% 50% at 15% 0%, rgba(224, 127, 22, 0.09), transparent 60%),
    radial-gradient(ellipse 70% 45% at 95% 12%, rgba(169, 207, 197, 0.14), transparent 62%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.035'/%3E%3C/svg%3E");
  background-attachment: fixed, fixed, fixed;
  color: var(--encre);
  font-family: var(--sans);
  font-size: var(--t-base); /* 16px plancher, y compris mobile */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: inherit;
}

/* Un contour de focus VISIBLE partout. Le retirer sans le remplacer
   rend le site inutilisable au clavier — c'est non négociable. */
:focus-visible {
  outline: 3px solid var(--tomato);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Mise en page ──────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--e-6);
}

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

.section--serre {
  padding-block: var(--e-16);
}

/* Longueur de ligne : 65-75 caractères, au-delà l'œil perd la ligne suivante */
.prose p {
  max-width: 68ch;
  margin-bottom: var(--e-4);
}

/* ── Titres ────────────────────────────────────────────────────── */

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(2.5rem, 7vw, var(--t-4xl));
}

h2 {
  font-size: clamp(2rem, 5vw, var(--t-3xl));
}

h3 {
  font-size: var(--t-xl);
  line-height: 1.25;
}

.surtitre {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-base);
  color: var(--tomato);
  margin-bottom: var(--e-3);
  display: block;
}

.chapo {
  font-size: var(--t-lg);
  color: var(--brun);
  max-width: 60ch;
  margin-top: var(--e-4);
}

/* ── Boutons ───────────────────────────────────────────────────── */
/* 44x44 minimum : c'est la taille d'un doigt, pas une préférence. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 48px;
  padding: var(--e-3) var(--e-8);
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.15s ease-out,
    box-shadow 0.2s ease-out,
    background-color 0.2s ease-out;
}

.btn--principal {
  background: var(--encre);
  color: var(--custard);
}

.btn--principal:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(42, 24, 16, 0.24);
}

/* Le contour est en encre, pas en blush : le blush sur custard donne 1,9:1,
   une bordure qu'on ne distingue pas est une bordure absente. */
.btn--ligne {
  background: transparent;
  color: var(--encre);
  border-color: var(--encre);
}

.btn--ligne:hover {
  background: var(--encre);
  color: var(--custard);
  transform: translateY(-2px);
}

.btn--clair {
  background: var(--blanc);
  color: var(--encre);
}

.btn--clair:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

/* ── En-tête et navigation ─────────────────────────────────────── */

.entete {
  position: sticky;
  top: 0;
  z-index: var(--z-collant);
  background: rgba(251, 250, 247, 0.94);
  border-bottom: 1px solid rgba(42, 24, 16, 0.1);
}

@supports (backdrop-filter: blur(8px)) {
  .entete {
    backdrop-filter: blur(8px);
  }
}

.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-6);
  min-height: 68px;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  font-family: var(--serif);
  font-size: var(--t-lg);
  letter-spacing: 0.1em;
  text-decoration: none;
}

.marque img {
  height: 30px;
  width: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--e-6);
}

.nav a {
  position: relative;
  padding-block: var(--e-2);
  font-size: var(--t-sm);
  letter-spacing: 0.05em;
  text-decoration: none;
  color: var(--encre);
  white-space: nowrap;
}

/* Le soulignement se dessine sous le texte sans pousser la ligne :
   un survol qui déplace la mise en page fait fuir le curseur. */
.nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--tomato);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease-out;
}

.nav a:hover::after,
.nav a[aria-current='page']::after {
  transform: scaleX(1);
}

.nav a[aria-current='page'] {
  font-weight: 600;
}

/* ⚠️ Un bouton placé DANS la navigation est d'abord un `.nav a`, et `.nav a`
   l'emporte en spécificité sur `.btn--principal` : le texte repassait donc en
   encre sur un fond encre. Constaté à l'écran le 05/08 — bouton « Me contacter »
   parfaitement noir sur noir, invisible, alors que le HTML était juste.
   Aucune lecture du code ne l'aurait montré : les deux règles sont correctes
   séparément, c'est leur rencontre qui produit la faute. On rétablit ici, et on
   neutralise le soulignement animé qui n'a pas de sens sur un bouton plein. */
.nav a.btn--principal {
  color: var(--custard);
}

.nav a.btn--ligne {
  color: var(--encre);
}

.nav a.btn::after {
  content: none;
}

.nav__bouton {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--encre);
}

@media (max-width: 900px) {
  .nav__bouton {
    display: inline-flex;
  }

  .nav {
    position: fixed;
    inset: 68px 0 auto 0;
    z-index: var(--z-menu);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--e-4) var(--e-6) var(--e-8);
    background: var(--custard);
    border-bottom: 1px solid rgba(42, 24, 16, 0.12);
    transform: translateY(-120%);
    transition: transform 0.28s ease-out;
  }

  .nav[data-ouvert='true'] {
    transform: translateY(0);
  }

  .nav a {
    padding-block: var(--e-4);
    font-size: var(--t-lg);
    border-bottom: 1px solid rgba(42, 24, 16, 0.08);
  }

  .nav .btn {
    margin-top: var(--e-4);
  }
}

/* ── Blocs de couleur ──────────────────────────────────────────── */

.bandeau {
  padding-block: var(--e-24);
  text-align: center;
}

.bandeau--blush {
  /* Le « dégradé hybiscus » du moodboard : orange -> rouge -> bordeaux */
  background: linear-gradient(115deg, #e07f16, #dd2a26 55%, #7f1618);
  color: var(--blanc);
}

.bandeau--olive {
  background: var(--olive);
}

.bandeau--tomato {
  background: var(--tomato);
  color: var(--blanc);
}

.bandeau--sable {
  background: var(--sable);
}

/* Sur le lagon, le corps de texte reste en encre. Sur le dégradé
   hibiscus, seul du texte >24px en gras est posé (la citation). */
.bandeau--olive {
  color: var(--encre);
}

.bandeau__citation {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.75rem, 4.5vw, var(--t-3xl));
  font-weight: 500;
  line-height: 1.25;
  color: var(--blanc);
  max-width: 20ch;
  margin-inline: auto;
}

/* ── Ouverture de page (hero éditorial) ────────────────────────── */
/* Une grille de 12 colonnes où le texte et l'image se CHEVAUCHENT : c'est
   la mise en page d'un magazine, pas d'un gabarit. Deux blocs côte à côte
   parfaitement alignés, c'est ce que produit n'importe quel générateur ;
   le léger décalage est ce qui donne l'impression d'une page composée. */

.hero {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  gap: var(--e-8);
  padding-block: var(--e-24) var(--e-16);
}

.hero__texte {
  grid-column: 1 / 7;
  grid-row: 1;
  z-index: 2;
}

.hero__image {
  grid-column: 6 / 13;
  grid-row: 1;
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--rayon);
  overflow: hidden;
  background: linear-gradient(160deg, var(--sable), rgba(224, 127, 22, 0.16));
}

.hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Le filet de couleur qui déborde derrière l'image : un aplat décalé, hérité
   de la mise en page imprimée. Décoratif, donc masqué aux lecteurs d'écran. */
.hero__filet {
  position: absolute;
  inset: auto -14px -14px auto;
  width: 62%;
  height: 46%;
  border-radius: var(--rayon);
  background: linear-gradient(115deg, #e07f16, #dd2a26 70%);
  z-index: -1;
}

/* Le titre d'ouverture porte le dégradé hibiscus. Pas de build ici :
   le fichier est servi tel quel, les deux écritures sont nécessaires. */
.hero h1 {
  background: linear-gradient(100deg, #c2571b, #dd2a26 60%, #7f1618);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #7f1618;
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    padding-block: var(--e-12) var(--e-8);
  }

  .hero__texte,
  .hero__image {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .hero__image {
    aspect-ratio: 4 / 3;
  }
}

/* Bloc éditorial : texte et image en quinconce, alternés d'une section à
   l'autre par .edito--inverse. */
.edito {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  gap: var(--e-12);
}

.edito__media {
  grid-column: 1 / 7;
  aspect-ratio: 5 / 4;
  border-radius: var(--rayon);
  overflow: hidden;
  background: linear-gradient(150deg, var(--sable), rgba(145, 152, 32, 0.18));
}

.edito__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.edito__texte {
  grid-column: 8 / 13;
}

.edito--inverse .edito__media {
  grid-column: 7 / 13;
  order: 2;
}

.edito--inverse .edito__texte {
  grid-column: 1 / 6;
  order: 1;
}

@media (max-width: 900px) {
  .edito {
    grid-template-columns: 1fr;
    gap: var(--e-8);
  }

  .edito__media,
  .edito__texte,
  .edito--inverse .edito__media,
  .edito--inverse .edito__texte {
    grid-column: 1 / -1;
    order: initial;
  }
}

/* ── Cartes ────────────────────────────────────────────────────── */

.grille {
  display: grid;
  gap: var(--e-8);
  margin-top: var(--e-12);
}

.grille--2 {
  grid-template-columns: repeat(2, 1fr);
}

.grille--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grille--4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Le parcours compte CINQ étapes ordonnées : on déclare cinq colonnes.
   Un auto-fit laisserait la dernière seule sur la ligne suivante, détachée
   du parcours qu'elle termine. */
.grille--5 {
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1040px) {
  .grille--4,
  .grille--5 {
    grid-template-columns: repeat(3, 1fr);
    row-gap: var(--e-12);
  }
}

@media (max-width: 820px) {
  .grille--2,
  .grille--3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .grille--4,
  .grille--5 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.carte {
  background: var(--blanc);
  border-radius: var(--rayon);
  padding: var(--e-8);
  height: 100%;
}

.carte__titre {
  font-family: var(--serif);
  font-size: var(--t-lg);
  margin-bottom: var(--e-3);
}

.carte__texte {
  color: var(--brun);
  font-size: var(--t-sm);
}

/* ── Thèmes de cours ───────────────────────────────────────────────
   Les quatre thèmes et leurs photos viennent d'Andies elle-même :
   intitulés donnés à BRiAN le 04/08/2026, photos déposées dans son
   Drive « MINI SITE COURS » le 05/08/2026, une par thème, nommées par
   elle. Rien n'est inventé ici. Portraits 3:4 — les photos sont des
   portraits beauté, on ne les recadre pas en paysage. */

.theme {
  background: var(--blanc);
  border-radius: var(--rayon);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.theme__media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.theme__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.5s ease-out;
}

.theme:hover .theme__media img {
  transform: scale(1.04);
}

.theme__corps {
  padding: var(--e-6);
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  flex: 1;
}

.theme__titre {
  font-family: var(--serif);
  font-size: var(--t-lg);
  line-height: 1.25;
}

.theme__public {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tomato);
}

.theme__texte {
  color: var(--brun);
  font-size: var(--t-sm);
}

/* Bandeau des repères pratiques (durée, groupe, tarif de lancement) */
.reperes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-4) var(--e-8);
  margin-top: var(--e-12);
}

.repere {
  text-align: center;
  min-width: 130px;
}

.repere__valeur {
  font-family: var(--serif);
  font-size: var(--t-2xl);
  display: block;
  line-height: 1.1;
}

.repere__nom {
  color: var(--brun);
  font-size: var(--t-sm);
}

/* ── Étapes numérotées ─────────────────────────────────────────── */

.etape {
  text-align: center;
}

.etape__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-2xl);
  color: var(--orange);
  display: block;
  margin-bottom: var(--e-3);
}

.etape__titre {
  font-family: var(--serif);
  font-size: var(--t-lg);
  margin-bottom: var(--e-2);
}

.etape__texte {
  color: var(--brun);
  font-size: var(--t-sm);
  max-width: 30ch;
  margin-inline: auto;
}

/* ── Pied de page ──────────────────────────────────────────────── */

.pied {
  background: var(--encre);
  color: var(--sable);
  padding-block: var(--e-16) var(--e-8);
}

.pied a {
  color: var(--sable);
  text-decoration: none;
  border-bottom: 1px solid rgba(247, 240, 228, 0.35);
}

.pied a:hover {
  border-bottom-color: var(--sable);
}

.pied__grille {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--e-12);
}

@media (max-width: 820px) {
  .pied__grille {
    grid-template-columns: 1fr;
    gap: var(--e-8);
  }
}

.pied__titre {
  font-family: var(--serif);
  font-size: var(--t-base);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--e-4);
  color: var(--custard);
}

.pied__liens {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  font-size: var(--t-sm);
}

.pied__bas {
  margin-top: var(--e-12);
  padding-top: var(--e-6);
  border-top: 1px solid rgba(247, 240, 228, 0.2);
  font-size: var(--t-xs);
  color: rgba(247, 240, 228, 0.7);
  display: flex;
  justify-content: space-between;
  gap: var(--e-4);
  flex-wrap: wrap;
}

/* ── Apparition au défilement ──────────────────────────────────── */
/* Révélée en amont par andies.js : un bloc encore invisible quand le
   visiteur arrive dessus ne se lit pas comme une animation, mais comme
   une page cassée. */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}

.reveal.vu {
  opacity: 1;
  transform: none;
}

/* Certains visiteurs ont le mal des transports, d'autres des troubles
   vestibulaires : le système le signale, on l'écoute. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn:hover {
    transform: none;
  }
}

/* ── Utilitaires ───────────────────────────────────────────────── */

.centre {
  text-align: center;
}

.pile {
  display: flex;
  gap: var(--e-4);
  flex-wrap: wrap;
}

.pile--centre {
  justify-content: center;
}

/* Visible seulement au lecteur d'écran — sert au lien d'évitement et
   aux libellés d'icônes. */
.lecteur-seul {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.evitement {
  position: absolute;
  top: -60px;
  left: var(--e-4);
  z-index: var(--z-modale);
  background: var(--encre);
  color: var(--custard);
  padding: var(--e-3) var(--e-6);
  border-radius: 0 0 var(--rayon-sm) var(--rayon-sm);
  text-decoration: none;
  transition: top 0.2s ease-out;
}

.evitement:focus {
  top: 0;
}