/* ==========================================================================
   La Classe de Carine — Design System
   Style : « Éditorial chaleureux » — papier rosé, Calibri, accent rose vif
   Thème clair uniquement (pas de bascule automatique en mode sombre)
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Le site n'existe qu'en clair : on l'annonce au navigateur pour qu'il
     n'assombrisse ni les champs de formulaire ni les barres de défilement. */
  color-scheme: only light;

  /* Couleurs — mode clair.
     Le rose principal est le plus vif possible tout en gardant 4,5:1 dans les deux
     sens : blanc sur bouton (4,74) et texte rose sur fond (4,50). Plus vif que
     #DB1E70, le texte des boutons passe sous le seuil d'accessibilité. */
  --paper:        #FFF8FB;
  --paper-2:      #FFFFFF;
  --paper-3:      #FFEFF6;
  --blush:        #FFE3F0;
  --ink:          #2A1520;
  --ink-2:        #57394A;
  --ink-3:        #8A6376;
  --rose:         #DB1E70;
  --rose-deep:    #A81254;
  --rose-soft:    #FBBFDB;
  --rose-num:     #E063A0;   /* chiffres décoratifs : 3,1:1 sur le papier, seuil AA des grands textes */
  --terracotta:   #B84A2E;  /* contrepoint chaud, lisible en petit corps */
  --gold:         #CE7A0F;  /* ambre des étoiles — 3,1:1 sur le fond, seuil des éléments graphiques */
  --line:         #F7DAE8;
  --line-strong:  #EFBED8;
  --on-accent:    #FFFFFF;
  --ring:         #DB1E70;
  --shadow-color: 330 45% 35%;

  /* Ombres — « soft UI evolution » : douces mais lisibles */
  --shadow-xs: 0 1px 2px hsl(var(--shadow-color) / .06);
  --shadow-sm: 0 2px 6px hsl(var(--shadow-color) / .07), 0 1px 2px hsl(var(--shadow-color) / .05);
  --shadow-md: 0 8px 24px -8px hsl(var(--shadow-color) / .16), 0 2px 6px hsl(var(--shadow-color) / .06);
  --shadow-lg: 0 24px 48px -20px hsl(var(--shadow-color) / .24), 0 4px 12px hsl(var(--shadow-color) / .08);

  /* Typo — Calibri.
     Calibri n'est installée que sous Windows et sur les Mac équipés d'Office.
     Carlito, chargée depuis Google Fonts, en est le clone libre aux métriques
     identiques : le rendu est le même partout, sans décalage de mise en page. */
  --font-display: Calibri, Carlito, "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: Calibri, Carlito, "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-hand: "Caveat", "Bradley Hand", cursive;

  /* Échelle typographique fluide — relevée d'environ 8 % : la hauteur d'œil de
     Calibri est plus petite que celle d'Inter, elle a besoin de plus de corps. */
  /* Pentes calées sur deux points : 390 px (téléphone) et 1366 px (ordinateur).
     Le mobile est nettement réduit, le rendu sur grand écran reste identique. */
  --step--1: clamp(0.86rem, 0.83rem + 0.14vw, 0.95rem);
  --step-0:  clamp(1.00rem, 0.94rem + 0.26vw, 1.16rem);
  --step-1:  clamp(1.15rem, 1.00rem + 0.59vw, 1.51rem);
  --step-2:  clamp(1.34rem, 1.07rem + 1.11vw, 2.02rem);
  --step-3:  clamp(1.60rem, 1.18rem + 1.72vw, 2.69rem);
  --step-4:  clamp(1.72rem, 1.11rem + 2.48vw, 3.50rem);
  --step-5:  clamp(2.10rem, 1.19rem + 3.72vw, 4.50rem);

  /* Couleurs de marque (usage strictement officiel) */
  --brand-google-blue:   #4285F4;
  --brand-google-star:   #FBBC04;
  --brand-whatsapp:      #25D366;
  --brand-superprof:     #FF6363;
  --brand-instagram:     #E4405F;
  --brand-facebook:      #1877F2;

  /* Espacement — échelle « spacious » (base 4) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --section-y: clamp(3.25rem, 2.4rem + 3.6vw, 7.5rem);

  /* Divers */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 24px;
  --radius-xl: 36px;
  --container: 1180px;
  --measure: 68ch;
  --dur: 220ms;
  --dur-slow: 420ms;
  --ease: cubic-bezier(.22,.61,.36,1);

  /* Z-index */
  --z-base: 0;
  --z-sticky: 40;
  --z-drawer: 90;
  --z-header: 95;   /* au-dessus du tiroir : le bouton « fermer » doit rester atteignable */
  --z-top: 100;
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink-2);
  background-color: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-wrap: break-word;   /* « professionnalisation », « recontacter »… ne débordent jamais */
}

/* Grain de papier — reserve aux ecrans larges avec souris.
   En mix-blend-mode sur un calque fixe plein ecran, il forcait le navigateur a
   recomposer toute la page a chaque image du defilement : principale source de
   saccade sur telephone. Le blend est supprime, le grain aussi sur mobile. */
@media (min-width: 1024px) and (hover: hover) {
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-top);
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  opacity: .38;
}
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
/* Les SVG n'ont pas de taille intrinsèque utilisable : on en impose une par défaut. */
svg.icon, svg.logo { width: 1.25em; height: 1.25em; flex: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.14;   /* Calibri a de longues hampes : elle respire moins serré */
  letter-spacing: -0.02em;
  font-weight: 700;    /* Calibri/Carlito n'ont que 400 et 700 : pas de faux gras */
}
/* text-wrap: balance oblige le navigateur à recalculer plusieurs fois les coupures
   de ligne. Le gain est visible sur les titres larges, pas sur un écran étroit où
   ils tiennent déjà en peu de mots : on le réserve aux grands écrans. */
@media (min-width: 768px) {
  h1, h2, h3, h4 { text-wrap: balance; }
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { text-wrap: pretty; }

a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

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

::selection { background: var(--rose); color: var(--on-accent); }

/* ---------- 3. Utilitaires ---------- */
.container {
  width: min(100% - 2.25rem, var(--container));
  margin-inline: auto;
}
@media (min-width: 400px) { .container { width: min(100% - 2.75rem, var(--container)); } }
@media (min-width: 768px) { .container { width: min(100% - 4rem, var(--container)); } }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * .62); }

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

.skip-link {
  position: absolute;
  left: 1rem; top: -6rem;
  z-index: var(--z-top);
  background: var(--ink);
  color: var(--paper);
  padding: .75rem 1.25rem;
  border-radius: var(--radius-sm);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 1rem; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rose);
  font-feature-settings: "case" 1;
}
.eyebrow::before {
  content: "";
  width: 1.75rem; height: 1px;
  background: currentColor;
  opacity: .55;
}
.eyebrow--center::after {
  content: "";
  width: 1.75rem; height: 1px;
  background: currentColor;
  opacity: .55;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 56ch;
}
.muted { color: var(--ink-3); }
.measure { max-width: var(--measure); }
.center { text-align: center; }
.center .lede, .center .measure { margin-inline: auto; }

/* Trait manuscrit sous un mot-clé */
.mark {
  position: relative;
  display: inline-block;
  color: var(--rose);
  font-style: italic;
}
.mark::after {
  content: "";
  position: absolute;
  left: -2%; right: -2%;
  bottom: -.06em;
  height: .28em;
  background: no-repeat center/100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5C34 3.2 96 1.8 198 5.4' stroke='%23DB1E70' stroke-width='3.2' fill='none' stroke-linecap='round' opacity='.42'/%3E%3C/svg%3E");
  pointer-events: none;
}

.note-hand {
  font-family: var(--font-hand);
  font-size: 1.45rem;
  line-height: 1.3;
  color: var(--terracotta);
  transform: rotate(-1.6deg);
}

/* ---------- 4. Boutons ---------- */
.btn {
  --btn-bg: var(--rose);
  --btn-fg: var(--on-accent);
  --btn-bd: var(--rose);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 52px;
  padding: .9rem 1.6rem;
  border: 1.5px solid var(--btn-bd);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: .975rem;
  font-weight: 600;
  letter-spacing: .005em;
  text-decoration: none;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
  touch-action: manipulation;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); background: var(--rose-deep); border-color: var(--rose-deep); }
.btn:active { transform: translateY(0) scale(.985); box-shadow: var(--shadow-xs); }
.btn .icon { width: 1.15em; height: 1.15em; flex: none; }
.btn .logo { width: 1.35em; height: 1.35em; flex: none; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--line-strong);
  box-shadow: none;
}
.btn--ghost:hover {
  background: var(--paper-2);
  border-color: var(--ink);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.btn--ink { --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-bd: var(--ink); }
.btn--ink:hover { background: var(--ink); border-color: var(--ink); filter: brightness(1.25); }

.btn--sm { min-height: 44px; padding: .6rem 1.15rem; font-size: .9rem; }
.btn--block { width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  color: var(--rose);
  text-decoration: none;
  min-height: 44px;
}
.link-arrow span { border-bottom: 1.5px solid currentColor; padding-bottom: 1px; }
.link-arrow .icon { width: 1.05em; height: 1.05em; transition: transform var(--dur) var(--ease); }
.link-arrow:hover .icon { transform: translateX(4px); }

/* ---------- 5. En-tête ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  /* Fond opaque par defaut : le flou d'arriere-plan oblige le navigateur a
     reflouter la page sous l'en-tete a chaque image du defilement. */
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.header.is-stuck { border-bottom-color: var(--line); box-shadow: var(--shadow-xs); }
/* Le flou reste sur les grands ecrans, ou il ne coute rien. */
@media (min-width: 1024px) {
  .header {
    background: color-mix(in srgb, var(--paper) 86%, transparent);
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
  }
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 66px;
}
@media (min-width: 768px) { .header__inner { gap: var(--space-3); min-height: 76px; } }

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: var(--ink);
}
.brand__img {
  width: 42px; height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--paper-2);
  box-shadow: var(--shadow-sm);
  background: var(--blush);
}
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .98rem;
  line-height: 1.05;
  letter-spacing: -.015em;
}
@media (min-width: 480px) { .brand__img { width: 46px; height: 46px; } .brand__name { font-size: 1.06rem; } }
.brand__tag {
  display: block;
  font-family: var(--font-body);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: .2rem;
}

.nav { display: none; }
@media (min-width: 1024px) {
  .nav { display: flex; align-items: center; gap: .35rem; }
}
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 .85rem;
  font-size: .95rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav__link:hover { color: var(--ink); background: var(--paper-3); }
.nav__link[aria-current="page"] { color: var(--rose-deep); font-weight: 600; }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: .85rem; right: .85rem; bottom: 6px;
  height: 2px; border-radius: 2px;
  background: var(--rose);
}

.header__actions { display: flex; align-items: center; gap: .6rem; }
.header__cta { display: none; }
@media (min-width: 1024px) { .header__cta { display: inline-flex; } }

.burger {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink);
  background: var(--paper-2);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.burger:hover { border-color: var(--ink); }
.burger .icon { width: 22px; height: 22px; }
.burger .icon--close { display: none; }
.burger[aria-expanded="true"] .icon--open { display: none; }
.burger[aria-expanded="true"] .icon--close { display: block; }
@media (min-width: 1024px) { .burger { display: none; } }

/* Tiroir mobile */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: grid;
  grid-template-rows: 1fr;
  background: var(--paper);
  padding: 5.5rem 1.25rem calc(2rem + env(safe-area-inset-bottom));
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.25rem);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.drawer[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
.drawer__nav { display: flex; flex-direction: column; gap: .25rem; align-content: start; }
.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  padding: .5rem .5rem;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.drawer__link[aria-current="page"] { color: var(--rose); }
.drawer__link .icon { width: 1rem; height: 1rem; color: var(--ink-3); }
.drawer__footer { margin-top: auto; padding-top: var(--space-4); display: grid; gap: .75rem; }
.drawer__meta { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; font-size: .9rem; }
.drawer__meta a { color: var(--ink-2); text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; }
.drawer__meta a:hover { color: var(--rose); }
.drawer__meta .icon { width: 1.05em; height: 1.05em; }

body.is-locked { overflow: hidden; }

/* ---------- 6. Hero ---------- */
.hero {
  position: relative;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(3rem, 2rem + 4vw, 5.5rem);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  top: -18%; right: -12%;
  width: min(58vw, 640px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--blush), transparent 68%);
  opacity: .9;
  z-index: -1;
  pointer-events: none;
}

.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.06fr .94fr; }
}

.hero__title { margin-block: 1.25rem 0; }
.hero__title em {
  font-style: italic;
  color: var(--rose);
}
.hero__lede { margin-top: 1.5rem; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: var(--space-4);
}
@media (max-width: 479px) { .hero__actions .btn { width: 100%; } }

.hero__proof {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem 1.5rem;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--ink-2);
}
.hero__proof-item { display: inline-flex; align-items: center; gap: .5rem; }
.hero__proof-item .icon { width: 1.15rem; height: 1.15rem; color: var(--rose); flex: none; }
.hero__proof-item b { color: var(--ink); font-weight: 600; }

/* Portrait */
.portrait { position: relative; }
.portrait__frame {
  position: relative;
  width: 100%;   /* l'image étant en position absolue, le cadre doit porter la largeur */
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--blush);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 1 / 1;
  isolation: isolate;
}
/* L'image déborde volontairement du cadre : la parallaxe a de la marge, aucun vide n'apparaît. */
.portrait__frame img {
  position: absolute;
  inset: -10% 0;
  width: 100%;
  height: 120%;
  object-fit: cover;
}
.portrait__frame::after {
  content: "";
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px hsl(var(--shadow-color) / .10);
  border-radius: inherit;
  pointer-events: none;
}
.portrait__badge {
  position: absolute;
  left: 0; bottom: -1.25rem;
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .85rem 1.15rem;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  max-width: 17rem;
}
.portrait__badge .icon { width: 1.75rem; height: 1.75rem; color: var(--rose); flex: none; }
.portrait__badge strong { display: block; font-family: var(--font-display); font-size: 1.35rem; color: var(--ink); line-height: 1; }
.portrait__badge span { font-size: .82rem; color: var(--ink-3); line-height: 1.35; display: block; margin-top: .25rem; }
/* Macaron « 5/5 Superprof » posé sur le portrait.
   Placé dans le coin haut-droit, à l'intérieur du cadre : la citation manuscrite
   occupe l'espace juste au-dessus, la carte « 10 ans » le bas-gauche. */
.seal {
  position: absolute;
  top: .9rem; right: .9rem;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: .15rem;
  padding: .75rem .9rem .7rem;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
  overflow: hidden;                 /* borne le reflet */
  transform: rotate(-7deg);
  transition: transform .25s ease, box-shadow .25s ease;
}
.seal:hover { transform: rotate(-7deg) scale(1.04); }
.seal:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
.seal__stars { display: flex; gap: .08rem; }
.seal__star { width: .8rem; height: .8rem; color: var(--gold); flex: none; }
.seal__score {
  font-family: var(--font-display);
  font-size: 1.55rem;
  line-height: 1;
  color: var(--ink);
}
.seal__score span { font-size: .8rem; color: var(--ink-3); }
.seal__src {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.seal__src .logo { width: .8rem; height: .8rem; color: var(--brand-superprof); flex: none; }

/* L'animation raconte quelque chose : les cinq étoiles s'allument une à une,
   puis un reflet balaie le macaron. Une seule fois, au chargement — pas de
   boucle qui distrairait pendant la lecture. */
@media (prefers-reduced-motion: no-preference) {
  .seal__star { animation: seal-pop .34s cubic-bezier(.34, 1.56, .64, 1) backwards; }
  .seal__star:nth-child(1) { animation-delay: .50s; }
  .seal__star:nth-child(2) { animation-delay: .57s; }
  .seal__star:nth-child(3) { animation-delay: .64s; }
  .seal__star:nth-child(4) { animation-delay: .71s; }
  .seal__star:nth-child(5) { animation-delay: .78s; }
  .seal::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.9) 50%, transparent 62%);
    transform: translateX(-130%);
    animation: seal-shine 1s ease-in-out 1.05s backwards;
  }
}
@keyframes seal-pop {
  from { opacity: 0; transform: scale(.3) rotate(-30deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes seal-shine {
  to { transform: translateX(130%); }
}

.portrait__note {
  position: absolute;
  right: .5rem;
  bottom: calc(100% + .5rem);
  max-width: 16rem;
  text-align: right;
}
@media (max-width: 899px) {
  .portrait { width: 100%; max-width: 24rem; margin-inline: auto; }
  .portrait__note { display: none; }
  .portrait__badge { left: -.35rem; padding: .7rem .9rem; gap: .65rem; max-width: 15rem; }
  .portrait__badge .icon { width: 1.5rem; height: 1.5rem; }
  .portrait__badge strong { font-size: 1.2rem; }
  .portrait__badge span { font-size: .76rem; }
  .seal { top: .6rem; right: .6rem; padding: .6rem .72rem .55rem; border-radius: 15px; }
  .seal__score { font-size: 1.3rem; }
  .seal__star { width: .7rem; height: .7rem; }
  .seal__src { font-size: .58rem; }
}

/* ---------- 7. Bandeau de spécialités ---------- */
.strip {
  border-block: 1px solid var(--line);
  background: var(--paper-2);
  padding-block: 1.15rem;
  overflow: hidden;
}
.strip__track {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  width: max-content;
  animation: slide 34s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .strip__track { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; }
}
.strip:hover .strip__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.strip__item {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}
.strip__item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rose); flex: none; }

/* ---------- 8. Cartes génériques ---------- */
.card {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card__icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border-radius: 16px;
  background: var(--blush);
  color: var(--rose);
  margin-bottom: var(--space-2);
}
.card__icon .icon { width: 26px; height: 26px; }
.card h3 { margin-bottom: .6rem; }
.card p { color: var(--ink-2); }

.grid { display: grid; gap: var(--space-3); }
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.section__head { margin-bottom: var(--space-5); }
.section__head h2 { margin-block: .85rem .9rem; }

/* ---------- 9. Méthode (étapes) ---------- */
.steps { counter-reset: step; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
@media (min-width: 700px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step {
  background: var(--paper-2);
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  transition: background-color var(--dur) var(--ease);
}
.step:hover { background: var(--paper-3); }
.step__num {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--rose-num);
  display: block;
  margin-bottom: .75rem;
}
.step h3 { font-size: var(--step-1); margin-bottom: .5rem; }
.step p { font-size: var(--step--1); line-height: 1.6; }

/* ---------- 10. Cours ---------- */
.course {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.course:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.course__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.course__num {
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--rose);
  padding: .3rem .7rem;
  border: 1px solid var(--rose-soft);
  border-radius: 999px;
  white-space: nowrap;
}
.course__icon { color: var(--rose); }
.course__icon .icon { width: 30px; height: 30px; }
.course h3 { font-size: var(--step-2); }
.course p { color: var(--ink-2); font-size: var(--step--1); }
.course__list { list-style: none; padding: 0; display: grid; gap: .55rem; font-size: var(--step--1); }
.course__list li { display: flex; gap: .6rem; align-items: flex-start; }
.course__list .icon { width: 1.1em; height: 1.1em; color: var(--rose); flex: none; margin-top: .35em; }
.course__foot { margin-top: auto; padding-top: var(--space-2); border-top: 1px solid var(--line); }
.course__tag {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--terracotta);
}

/* ---------- 11. Chiffres ---------- */
.stats {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-xl);
  padding: clamp(2rem, 1.5rem + 3vw, 3.5rem) clamp(1.5rem, 1rem + 3vw, 3.5rem);
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 360px) { .stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-4) var(--space-3); } }
@media (min-width: 1000px) { .stats { grid-template-columns: repeat(4, 1fr); gap: var(--space-3); } }
.stat { text-align: center; }
.stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.9rem + 2.2vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.stat__label { display: block; margin-top: .65rem; font-size: var(--step--1); color: color-mix(in srgb, var(--paper) 72%, transparent); line-height: 1.45; }

/* ---------- 12. À propos ---------- */
.about__grid { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4rem); align-items: center; }
@media (min-width: 900px) { .about__grid { grid-template-columns: .85fr 1.15fr; } }
.about__media { position: relative; }
.about__media img {
  width: 100%;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  background: var(--blush);
}
.about__quote {
  position: absolute;
  right: -1rem; bottom: -1.5rem;
  max-width: 14rem;
  padding: 1rem 1.25rem;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  font-family: var(--font-hand);
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--terracotta);
}
@media (max-width: 899px) { .about__quote { position: static; margin-top: 1rem; max-width: none; } }

.creds { list-style: none; padding: 0; display: grid; gap: 1rem; margin-top: var(--space-3); }
.creds li { display: flex; gap: .9rem; align-items: flex-start; }
.creds .icon { width: 1.35rem; height: 1.35rem; color: var(--rose); flex: none; margin-top: .2rem; }
.creds b { color: var(--ink); font-weight: 600; }

.signature {
  font-family: var(--font-hand);
  font-size: 2.1rem;
  color: var(--ink);
  margin-top: var(--space-3);
  transform: rotate(-2deg);
  transform-origin: left center;
  display: inline-block;
}

/* ---------- 13. Témoignages ---------- */
.testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  box-shadow: var(--shadow-xs);
}
.testimonial blockquote {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
}
.testimonial__author { margin-top: auto; display: flex; align-items: center; gap: .75rem; padding-top: var(--space-1); }
.testimonial__avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blush);
  color: var(--rose-deep);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  flex: none;
}
.testimonial__author b { display: block; color: var(--ink); font-size: .95rem; font-weight: 600; }
/* :not() indispensable — cette règle (0,1,1) est plus spécifique que
   .testimonial__avatar (0,1,0) et écrasait sa couleur et sa taille. */
.testimonial__author span:not(.testimonial__avatar) { font-size: .82rem; color: var(--ink-3); }

/* ---------- 14. FAQ ---------- */
.faq { display: grid; gap: .75rem; max-width: 52rem; margin-inline: auto; }
.faq__item {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.faq__item[open] { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 60px;
  padding: 1rem 1.35rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--rose); }
.faq__q .icon {
  width: 1.25rem; height: 1.25rem;
  flex: none;
  color: var(--rose);
  transition: transform var(--dur) var(--ease);
}
.faq__item[open] .faq__q .icon { transform: rotate(45deg); }
.faq__a { padding: 0 1.35rem 1.35rem; font-size: var(--step--1); line-height: 1.7; max-width: 62ch; overflow: hidden; }
.faq__a p + p { margin-top: .75rem; }

/* ---------- 15. Contact / formulaire ---------- */
.contact {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: grid;
  box-shadow: var(--shadow-md);
}
@media (min-width: 900px) { .contact { grid-template-columns: .92fr 1.08fr; } }
/* Sans min-width:0, une adresse e-mail longue élargit la grille au-delà de l'écran. */
.contact > *, .form > *, .form__row > *, .contact__ways a > span { min-width: 0; }
.contact__ways a > span { overflow-wrap: anywhere; }
.contact__aside {
  background: var(--blush);
  padding: clamp(1.75rem, 1.4rem + 2vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
/* Sur fond blush, le rose vif descend à 3,95:1 : le libellé passe en rose profond. */
.contact__aside .eyebrow { color: var(--rose-deep); }
.contact__aside h2 { font-size: var(--step-3); }
.contact__ways { list-style: none; padding: 0; display: grid; gap: .5rem; margin-top: auto; }
.contact__ways a {
  display: flex;
  align-items: center;
  gap: .9rem;
  min-height: 56px;
  padding: .6rem .9rem;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  font-weight: 500;
  background: color-mix(in srgb, var(--paper-2) 60%, transparent);
  border: 1px solid transparent;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.contact__ways a:hover { background: var(--paper-2); border-color: var(--line-strong); transform: translateX(3px); }
.contact__ways .icon,
.contact__ways .logo { width: 1.35rem; height: 1.35rem; color: var(--rose); flex: none; }
.contact__ways small { display: block; font-size: .78rem; font-weight: 400; color: var(--ink-3); }
.contact__ways .logo--wa { color: var(--brand-whatsapp); }

.form { padding: clamp(1.75rem, 1.4rem + 2vw, 3rem); display: grid; gap: var(--space-2); }
.field { display: grid; gap: .4rem; }
.field label { font-size: .875rem; font-weight: 600; color: var(--ink); }
.field .req { color: var(--rose); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 52px;
  padding: .8rem 1rem;
  background: var(--paper);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 16px; /* évite le zoom auto iOS */
  color: var(--ink);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A6376' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.15rem; padding-right: 2.75rem; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--rose);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rose) 22%, transparent);
}
.field .hint { font-size: .8rem; color: var(--ink-3); }
.field .error { display: none; font-size: .82rem; font-weight: 500; color: var(--rose-deep); align-items: flex-start; gap: .35rem; }
.field .error .icon { margin-top: .18em; }
.field .error .icon { width: 1em; height: 1em; flex: none; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: var(--rose-deep); }
.field[data-invalid="true"] .error { display: flex; }
.form__row { display: grid; gap: var(--space-2); }
@media (min-width: 560px) { .form__row { grid-template-columns: 1fr 1fr; } }
.form__consent { display: flex; gap: .75rem; align-items: flex-start; font-size: .85rem; color: var(--ink-3); }
.form__consent input { width: 22px; height: 22px; min-height: 0; flex: none; margin-top: .1rem; accent-color: var(--rose); }
.form__consent a { color: var(--rose); }
.form__status {
  display: none;
  gap: .6rem;
  align-items: flex-start;
  padding: .9rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  border: 1.5px solid;
}
.form__status[data-state="success"] { display: flex; background: color-mix(in srgb, #1E7A4C 12%, transparent); border-color: #1E7A4C; color: var(--ink); }
.form__status[data-state="error"] { display: flex; background: color-mix(in srgb, var(--rose) 12%, transparent); border-color: var(--rose-deep); color: var(--ink); }
.form__status .icon { width: 1.25rem; height: 1.25rem; flex: none; margin-top: .1rem; }

.spinner {
  width: 1.1em; height: 1.1em;
  border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: none;
}
.btn.is-loading .spinner { display: block; }
.btn.is-loading .btn__label { opacity: .8; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 16. CTA final ---------- */
.cta-band {
  position: relative;
  border-radius: var(--radius-xl);
  /* Le rose vif domine ; le fondé ne s'assombrit que dans l'angle, pour que le blanc
     conserve 4,7:1 partout. */
  background: linear-gradient(140deg, var(--rose) 0%, var(--rose) 48%, var(--rose-deep) 100%);
  color: #fff;
  padding: clamp(2.25rem, 1.8rem + 3vw, 4rem);
  overflow: hidden;
  text-align: center;
}
.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% -20%, rgba(255,255,255,.22), transparent 55%);
  pointer-events: none;
}
.cta-band h2 { color: #fff; position: relative; }
/* Blanc opaque, pas translucide : sur l'extrémité claire du dégradé rose
   (#DB1E70), le blanc à 90 % tombait à 4,07 et à 85 % à 3,75 — sous le seuil
   AA de 4,5. En pleine opacité on atteint 4,74. */
.cta-band p { color: #fff; position: relative; margin-inline: auto; }
.cta-band .eyebrow { color: #fff; position: relative; }
.cta-band__actions { position: relative; display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; margin-top: var(--space-3); }
.cta-band .btn--light { --btn-bg: #fff; --btn-fg: var(--rose-deep); --btn-bd: #fff; }
.cta-band .btn--light:hover { --btn-bg: #fff; --btn-bd: #fff; filter: brightness(.96); }
.cta-band .btn--outline { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.6); box-shadow: none; }
.cta-band .btn--outline:hover { --btn-bg: rgba(255,255,255,.14); --btn-bd: #fff; }

/* ---------- 17. Pied de page ---------- */
.footer {
  border-top: 1px solid var(--line);
  background: var(--paper-2);
  padding-block: var(--space-5) var(--space-4);
  margin-top: var(--section-y);
}
.footer__grid { display: grid; gap: var(--space-4); }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer h3 { font-family: var(--font-body); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1rem; font-weight: 600; }
.footer ul { list-style: none; padding: 0; display: grid; gap: .1rem; }
/* 44px : minimum tactile Apple HIG / Material. Les liens étaient à 40. */
.footer a { color: var(--ink-2); text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; }
.footer a:hover { color: var(--rose); }
.footer__about p { font-size: var(--step--1); max-width: 34ch; margin-top: 1rem; }
.footer__social { display: flex; gap: .6rem; margin-top: 1.25rem; }
.footer__social a {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.footer__social a:hover { color: var(--rose); border-color: var(--rose); background: var(--blush); }
.footer__social .icon,
.footer__social .logo { width: 20px; height: 20px; }
/* Les logos de marque gardent leurs couleurs officielles au survol. */
.footer__social a:hover .logo--wa { color: var(--brand-whatsapp); }
.footer__social a:hover .logo--sp { color: var(--brand-superprof); }
.footer__social a:hover .logo--ig { color: var(--brand-instagram); }
.footer__social a:hover .logo--fb { color: var(--brand-facebook); }
.footer__bottom {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: .82rem;
  color: var(--ink-3);
}
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.footer__bottom a { font-size: .82rem; }

/* ---------- 18. Barre CTA mobile ---------- */
.mobile-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  gap: .6rem;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform var(--dur-slow) var(--ease);
}
.mobile-cta.is-visible { transform: none; }
.mobile-cta .btn { flex: 1; white-space: nowrap; padding-inline: 1rem; font-size: .93rem; }
.mobile-cta .btn--ghost { flex: 0 0 auto; width: 52px; padding: 0; background: var(--paper-2); }
.mobile-cta .btn--wa { color: var(--brand-whatsapp); border-color: color-mix(in srgb, var(--brand-whatsapp) 45%, var(--line-strong)); }
.mobile-cta .btn--wa:hover { border-color: var(--brand-whatsapp); color: var(--brand-whatsapp); background: color-mix(in srgb, var(--brand-whatsapp) 12%, var(--paper-2)); }
@media (max-width: 359px) { .mobile-cta .btn--tel { display: none; } }
@media (min-width: 1024px) { .mobile-cta { display: none; } }
/* Espace réservé en permanence : la barre apparaît sans provoquer de saut de mise en page. */
@media (max-width: 1023px) { body { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); } }

/* ---------- 19. Pages internes ---------- */
.page-hero {
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(2rem, 1.5rem + 2vw, 3rem);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--blush) 0%, var(--paper) 100%);
}
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .82rem; color: var(--ink-3); margin-bottom: 1rem; }
.breadcrumb a { color: var(--ink-3); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.breadcrumb a:hover { color: var(--rose); text-decoration: underline; }
.breadcrumb .icon { width: .9rem; height: .9rem; opacity: .6; }

.prose { max-width: 68ch; }
.prose h2 { font-size: var(--step-2); margin-top: var(--space-5); margin-bottom: var(--space-2); }
.prose h3 { font-size: var(--step-1); margin-top: var(--space-4); margin-bottom: .6rem; }
.prose p, .prose ul, .prose ol { margin-bottom: 1rem; }
.prose ul, .prose ol { padding-left: 1.35rem; }
.prose li { margin-bottom: .4rem; }
.prose a { color: var(--rose); }
.prose strong { color: var(--ink); }

/* Fiche cours détaillée */
.course-detail {
  display: grid;
  gap: clamp(1.75rem, 1.4rem + 2vw, 3rem);
  padding-block: clamp(2.5rem, 2rem + 3vw, 4rem);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 6rem;
}
@media (min-width: 900px) { .course-detail { grid-template-columns: .8fr 1.2fr; } }
.course-detail:last-of-type { border-bottom: none; }
.course-detail__aside { position: relative; }
@media (min-width: 900px) { .course-detail__aside { position: sticky; top: 7rem; align-self: start; } }
.course-detail__num {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 3rem + 3vw, 5.5rem);
  font-weight: 700;
  line-height: .9;
  color: var(--rose-num);
  display: block;
}
.course-detail h2 { margin-top: .5rem; font-size: var(--step-3); }
.course-detail__meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
/* min-height 44px : ces pastilles servent d'ancres cliquables, elles étaient
   à 35 px, sous le minimum tactile. */
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px;
  padding: .4rem .85rem;
  font-size: .8rem; font-weight: 600;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink-2);
  background: var(--paper-2);
}
.chip .icon { width: .95rem; height: .95rem; color: var(--rose); }
.check-list { list-style: none; padding: 0; display: grid; gap: .85rem; margin-top: var(--space-2); }
.check-list li { display: flex; gap: .85rem; align-items: flex-start; }
.check-list .icon { width: 1.3rem; height: 1.3rem; color: var(--rose); flex: none; margin-top: .15rem; }

/* ---------- 20. Bandeau de logos (marques réelles) ---------- */
.logos {
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
  padding-block: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
}
.logos__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
}
.logos__label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
}
/* Grille plutôt que flex-wrap : en flex, les pastilles ont des largeurs
   différentes et la dernière se retrouvait seule, décalée à droite. En grille
   elles sont d'égale largeur et forment toujours des rangées pleines. */
.logos__row {
  list-style: none;
  padding: 0;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;
  width: 100%;
  max-width: 640px;
}
.logos__row > li { display: grid; }
@media (min-width: 900px) {
  .logos__row { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1000px; }
}
.logo-chip {
  display: flex;
  width: 100%;
  align-items: center;
  gap: .6rem;
  min-height: 52px;
  padding: .5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.2;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.logo-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--line-strong); }
.logo-chip:active { transform: translateY(0) scale(.985); }
.logo-chip .logo { width: 22px; height: 22px; flex: none; }
.logo-chip small { display: block; font-size: .74rem; font-weight: 500; color: var(--ink-3); margin-top: .1rem; }
.logo-chip .stars { margin-top: .15rem; }
.logo-chip .stars .icon { width: .8rem; height: .8rem; }
@media (max-width: 479px) {
  .logo-chip { padding-inline: .7rem; font-size: .85rem; gap: .45rem; }
  .logo-chip small { font-size: .68rem; }
}

/* Étoiles Google */
.stars { display: flex; gap: .15rem; color: var(--gold); }
.stars--google { color: var(--brand-google-star); }
.stars .icon { width: 1.15rem; height: 1.15rem; }

/* Badge de note Google */
.rating {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  padding: .7rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-2);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.rating:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.rating .logo { width: 26px; height: 26px; flex: none; }
.rating__score {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rating__meta { text-align: left; }
.rating__meta small { display: block; font-size: .76rem; color: var(--ink-3); margin-top: .2rem; }
@media (max-width: 419px) { .rating { gap: .6rem; padding-inline: .9rem; } .rating__score { font-size: 1.3rem; } }

/* Source de l'avis dans une carte */
.testimonial__source {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .74rem;
  font-weight: 500;
  color: var(--ink-3);
}
.testimonial__source .logo { width: 14px; height: 14px; flex: none; }

/* ---------- 21. Animations d'apparition ---------- */
/* L'état masqué n'est appliqué que si JavaScript tourne : sans JS, tout reste lisible. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  /* Pas de will-change ici : il creerait un calque GPU permanent pour chacun des
     37 elements reveles, ce qui sature la memoire video d'un telephone et hache
     le defilement. GSAP promeut le calque le temps du tween, puis le libere. */
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* Quand GSAP pilote le mouvement, la transition CSS doit s'effacer pour ne pas le freiner. */
.js.gsap-motion [data-reveal] { transition: none; }

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

@media print {
  .header, .mobile-cta, .drawer, .cta-band, body::before { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---------- 22. Ajustements telephone ----------
   Le rythme concu pour un grand ecran devient etouffant une fois empile sur
   390 px : marges reduites, cartes plus compactes, titres moins espaces.
   Objectif : la meme densite de lecture que sur ordinateur. */
@media (max-width: 640px) {
  .section__head { margin-bottom: var(--space-4); }
  .section__head h2 { margin-block: .6rem .7rem; }

  .card, .course, .testimonial, .step { padding: 1.35rem 1.25rem; }
  .course { gap: .75rem; }
  .course__foot { padding-top: .85rem; }
  .card__icon { width: 44px; height: 44px; border-radius: 13px; margin-bottom: .75rem; }
  .card__icon .icon { width: 22px; height: 22px; }
  .card h3, .course h3 { margin-bottom: .45rem; }

  .grid { gap: 1rem; }
  .hero__lede { margin-top: 1.1rem; }
  .hero__actions { margin-top: 1.5rem; gap: .65rem; }
  .hero__proof { margin-top: 1.5rem; padding-top: 1.25rem; gap: .55rem 1.25rem; }

  .step__num { font-size: 2rem; margin-bottom: .5rem; }
  .stat__value { font-size: 2.1rem; }
  .stats { padding: 1.75rem 1.25rem; }

  .faq__q { padding: .85rem 1.1rem; min-height: 54px; }
  .faq__a { padding: 0 1.1rem 1.1rem; }

  .contact__aside, .form { padding: 1.5rem 1.25rem; }
  .contact__ways a { min-height: 52px; padding: .5rem .75rem; }

  .cta-band { padding: 2rem 1.35rem; }
  .logos { padding-block: 1.25rem; }
  .logos__inner { gap: .85rem; }

  .footer { padding-block: var(--space-4) var(--space-3); }
  .footer__grid { gap: var(--space-3); }
}

/* ---------- 23. Preuves : vidéo et captures d'élèves ----------
   Section volontairement placée juste après les avis, sur la page d'accueil :
   c'est la preuve la plus convaincante, elle ne doit pas se mériter. */
/* Galerie de témoignages vidéo.
   auto-fit + minmax : une seule vidéo occupe toute la largeur, deux se placent
   côte à côte, trois ou plus se répartissent d'elles-mêmes. Rien à retoucher
   quand une vidéo s'ajoute — seul le HTML change. */
.proof__videos {
  list-style: none;
  padding: 0;
  margin-inline: auto;
  max-width: 1100px;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
}
/* Un nombre impair de vidéos laisse la dernière seule sur sa ligne, collée à
   gauche — ça donne l'impression d'un bug. On la centre : la grille reste
   équilibrée quel que soit le nombre. Le :not(:first-child) protège le cas
   d'une vidéo unique, qui doit garder toute la largeur. */
@media (min-width: 860px) {
  .proof__videos > .vtem:last-child:nth-child(odd):not(:first-child) {
    grid-column: 1 / -1;
    max-width: 534px;
    margin-inline: auto;
  }
}
.vtem { margin: 0; }
.vtem__frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
}
/* width/height sont déclarés sur <video> : la place est réservée avant
   le chargement, donc aucun saut de mise en page (CLS). */
.vtem__frame video { display: block; width: 100%; height: auto; }
.vtem__cap {
  margin-top: .85rem;
  font-size: var(--step--1);
  color: var(--ink-3);
  line-height: 1.5;
}
.vtem__who {
  display: block;
  font-weight: 700;
  color: var(--ink);
}
.vtem__who .icon {
  width: 1.05em; height: 1.05em;
  vertical-align: -.16em;
  color: var(--rose);
  margin-right: .4rem;
}
.vtem__meta { display: block; margin-top: .1rem; }

/* Accroche du hero vers les témoignages vidéo.
   Un lien, pas un troisième bouton : le hero ne garde qu'une action principale.
   Le fond plein d'origine faisait une tache rose qui rivalisait avec les deux
   boutons juste au-dessus — ici seule la pastille de lecture porte la couleur,
   le texte reste sobre. */
.hero__video-cue {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin-top: 1.15rem;
  min-height: 44px;                 /* cible tactile, même sans fond visible */
  color: var(--rose-deep);
  font-size: var(--step--1);
  font-weight: 500;
  text-decoration: none;
}
.hero__video-cue-text b { font-weight: 700; }
.hero__video-cue-play {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--rose);
  color: #fff;
  box-shadow: 0 6px 14px -6px var(--rose);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.hero__video-cue-play .icon { width: .8rem; height: .8rem; margin-left: 1px; }
.hero__video-cue-arrow {
  width: .95rem; height: .95rem;
  color: var(--rose);
  transition: transform .25s var(--ease);
}
/* Le soulignement n'apparaît qu'au survol : au repos la ligne alourdissait
   une zone déjà chargée (deux boutons au-dessus, quatre garanties en dessous). */
.hero__video-cue:hover .hero__video-cue-text { text-decoration: underline; text-underline-offset: .22em; }
.hero__video-cue:focus-visible { outline: 2px solid var(--rose); outline-offset: 4px; border-radius: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .hero__video-cue:hover .hero__video-cue-play { transform: scale(1.08); box-shadow: 0 8px 18px -6px var(--rose); }
  .hero__video-cue:hover .hero__video-cue-arrow { transform: translateX(3px); }
}
.proof__caption {
  margin-top: 1rem;
  font-size: var(--step--1);
  color: var(--ink-3);
  text-align: center;
  max-width: 48ch;
  margin-inline: auto;
}
/* Icône en ligne : en flex, elle se retrouvait seule à gauche dès que
   la légende passait sur deux lignes. */
.proof__caption .icon {
  display: inline-block;
  vertical-align: -.18em;
  width: 1.1em; height: 1.1em;
  color: var(--rose);
  margin-right: .35rem;
}

.proof__shots {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .85rem;
  margin-top: var(--space-5);
}
/* Six captures : trois colonnes donnent deux rangées pleines, quatre en laissaient
   une bancale. */
@media (min-width: 700px)  { .proof__shots { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
/* Les captures qui prolongent une conversation sont cadrées par le bas :
   sinon leur vignette montre le même début que la précédente. */
.shot--suite img { object-position: bottom center; }

.shot {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: var(--shadow-sm);
  cursor: zoom-in;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.shot:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.shot:active { transform: translateY(0) scale(.99); }
.shot img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;   /* le début de la conversation reste visible */
}
.shot__tag {
  display: block;
  padding: .6rem .75rem;
  font-size: .8rem;
  font-weight: 700;
  color: var(--rose-deep);
  text-align: center;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
}
.shot__loupe {
  position: absolute;
  top: .5rem; right: .5rem;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 62%, transparent);
  color: #fff;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.shot:hover .shot__loupe, .shot:focus-visible .shot__loupe { opacity: 1; }
.shot__loupe .icon { width: 16px; height: 16px; }

/* Agrandissement au clic */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-top);
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.lightbox[data-open="true"] { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: min(100%, 460px);
  max-height: 88vh;
  width: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.lightbox__close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--ink);
  box-shadow: var(--shadow-md);
}
.lightbox__close .icon { width: 22px; height: 22px; }
body.is-locked { overflow: hidden; }