/* =============================================================
   Optima Academy — feuille de style unique

   Organisation : jetons, base, primitives, composants, sections,
   animations, responsive. Aucune dépendance, aucun framework.

   La charte reprend celle des documents Optima : magenta #FF006E
   sur noir #0E0E0E, fond lavande très clair, titres en Poppins.
   ============================================================= */

/* ---------- polices servies par le site ----------
   Aucune requête vers un service tiers : le chargement est plus
   rapide et aucune adresse IP de visiteur ne part chez Google. */
@font-face { font-family:"Geist"; src:url("../fonts/geist-sans-latin-400-normal.woff2") format("woff2");
             font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Geist"; src:url("../fonts/geist-sans-latin-500-normal.woff2") format("woff2");
             font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Geist"; src:url("../fonts/geist-sans-latin-600-normal.woff2") format("woff2");
             font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Poppins"; src:url("../fonts/poppins-latin-500-normal.woff2") format("woff2");
             font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Poppins"; src:url("../fonts/poppins-latin-600-normal.woff2") format("woff2");
             font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Poppins"; src:url("../fonts/poppins-latin-700-normal.woff2") format("woff2");
             font-weight:700; font-style:normal; font-display:swap; }

/* ---------- jetons ---------- */
:root {
  --rose: #FF006E;
  --rose-fonce: #D9005E;
  --rose-voile: rgba(255, 0, 110, .12);
  --noir: #0E0E0E;
  --encre: #1B1D24;
  --texte: #4B4F5C;
  --texte-clair: #7A7F8D;
  --fond: #F5F3F8;
  --surface: #FFFFFF;
  --surface-2: #F6F7FB;
  --ligne: #E6E4EC;
  --ligne-douce: #F0EEF5;

  --r-s: 10px;
  --r: 16px;
  --r-l: 24px;
  --r-xl: 32px;

  --ombre: 0 1px 2px rgba(16, 14, 24, .04), 0 8px 24px -12px rgba(16, 14, 24, .14);
  --ombre-h: 0 2px 6px rgba(16, 14, 24, .06), 0 28px 50px -24px rgba(16, 14, 24, .28);

  --titre: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --corps: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Largeur de page. Le site respire d'un bord à l'autre ; seuls les blocs
     de texte gardent une longueur de ligne lisible, imposée en `ch` là où
     ils apparaissent. Une seule valeur à changer pour resserrer le tout. */
  --large: 1600px;
  --tres-large: 1800px;
  --etroite: 940px;
  --gout: clamp(20px, 4vw, 56px);
  --section: clamp(64px, 9vw, 120px);

  --transition: .38s cubic-bezier(.22, .9, .3, 1);
  --ressort: .55s cubic-bezier(.2, 1.1, .3, 1);
}

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

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--corps);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  font-family: var(--titre);
  color: var(--encre);
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  font-weight: 700;
}
h1 { font-size: clamp(2.4rem, 5.2vw, 5rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.85rem, 3.4vw, 3.15rem); letter-spacing: -.03em; }
h3 { font-size: clamp(1.2rem, 1.9vw, 1.55rem); }
h4 { font-size: 1.08rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

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

ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--rose); color: #fff; }

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

.saut-contenu {
  position: absolute; left: -9999px; top: 0;
  background: var(--noir); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--r-s) 0;
  z-index: 200;
}
.saut-contenu:focus { left: 0; }

/* L'en-tête est fixe : sans cette marge, une ancre (#opco, #programmes…)
   amène la section pile sous la barre de navigation, qui la recouvre. */
[id] { scroll-margin-top: 110px; }

/* ---------- primitives ---------- */
.enveloppe {
  width: 100%;
  max-width: var(--large);
  margin-inline: auto;
  padding-inline: var(--gout);
}
.enveloppe.etroite { max-width: var(--etroite); }
.enveloppe.large { max-width: var(--tres-large); }
/* Un bloc qui sort de la grille et touche les deux bords. */
.enveloppe.pleine { max-width: none; padding-inline: 0; }

.section { padding-block: var(--section); }
.section.serree { padding-block: clamp(44px, 6vw, 76px); }

.oeil {
  display: inline-flex; align-items: flex-start; gap: 8px;
  font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 18px;
}
.oeil::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px; flex: none;
  background: currentColor; opacity: .55;
  margin-top: .62em;   /* aligné sur la première ligne, même si le libellé passe à la ligne */
}
.oeil.centre { justify-content: center; }

/* La page est large, les lignes de texte ne le sont pas : au-delà d'environ
   90 caractères, l'œil perd la ligne suivante. */
.tete-section { max-width: 62ch; margin-bottom: clamp(36px, 5vw, 60px); }
.tete-section.centre { margin-inline: auto; text-align: center; }
.tete-section h2 { max-width: 22ch; }
.tete-section.centre h2 { max-width: 24ch; margin-inline: auto; }
.tete-section p { font-size: 1.06rem; color: var(--texte-clair); margin-bottom: 0; max-width: 66ch; }
.tete-section.centre p { margin-inline: auto; }

.plomb { font-size: clamp(1.02rem, 1.4vw, 1.18rem); color: var(--texte-clair); max-width: 66ch; }
.section > .enveloppe > p, .duo p { max-width: 68ch; }

/* boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--corps); font-size: .96rem; font-weight: 600;
  padding: 14px 26px; border-radius: var(--r-s); border: 1px solid transparent;
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition),
              background-color var(--transition), color var(--transition), border-color var(--transition);
}
.btn svg { width: 17px; height: 17px; flex: none; }

.btn-primaire { background: var(--rose); color: #fff; box-shadow: 0 10px 26px -12px rgba(255, 0, 110, .8); }
.btn-primaire:hover { background: var(--rose-fonce); transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(255, 0, 110, .85); }

.btn-sombre { background: var(--noir); color: #fff; }
.btn-sombre:hover { background: #26262b; transform: translateY(-2px); }

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

.btn-fantome { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .22); backdrop-filter: blur(8px); }
.btn-fantome:hover { background: rgba(255, 255, 255, .16); transform: translateY(-2px); }

.btn-lien { padding: 0; background: none; color: var(--rose); font-weight: 600; }
.btn-lien svg { transition: transform var(--transition); }
.btn-lien:hover svg { transform: translateX(4px); }

.paire-btn { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* mentions de réassurance */
.reassurance {
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  font-size: .88rem; color: var(--texte-clair); margin-top: 18px;
}
.reassurance span { display: inline-flex; align-items: center; gap: 7px; }
.reassurance svg { width: 15px; height: 15px; color: var(--rose); flex: none; }
.sombre .reassurance { color: rgba(255, 255, 255, .62); }

/* listes à coches */
.coches { display: grid; gap: 12px; margin: 22px 0; }
.coches li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; }
.coches svg {
  width: 21px; height: 21px; flex: none; margin-top: 1px;
  color: var(--rose);
}
.sombre .coches li { color: rgba(255, 255, 255, .8); }

/* ---------- en-tête ---------- */
.entete {
  position: fixed; inset: 0 0 auto; z-index: 120;   /* au-dessus du volet, pour garder le bouton de fermeture accessible */
  padding-block: 16px;
  transition: background-color var(--transition), box-shadow var(--transition), padding var(--transition);
}
.entete::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(14, 14, 14, .82);
  backdrop-filter: saturate(160%) blur(14px);
  opacity: 0; transition: opacity var(--transition);
}
.entete.compacte { padding-block: 9px; }
.entete.compacte::before { opacity: 1; }

.entete-in {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 20px;
}
.marque { display: flex; align-items: center; flex: none; }
.marque img { height: 50px; width: auto; transition: height var(--transition); }
.entete.compacte .marque img { height: 40px; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav > li { position: relative; }
.nav a {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-radius: 9px;
  color: rgba(255, 255, 255, .82); font-size: .95rem; font-weight: 500;
  transition: color var(--transition), background-color var(--transition);
}
.nav a:hover, .nav a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .09); }

/* En haut de page, l'en-tête flotte au-dessus d'un fond clair : le texte doit
   être sombre. Dès qu'on défile, la barre noire apparaît (.compacte) et tout
   repasse en blanc. Les deux logos sont dans le balisage, le CSS choisit. */
.entete:not(.compacte) .nav a { color: var(--texte); }
.entete:not(.compacte) .nav a:hover,
.entete:not(.compacte) .nav a[aria-current="page"] { color: var(--encre); background: rgba(27, 29, 36, .055); }
.entete:not(.compacte) .burger { background: rgba(27, 29, 36, .05); border-color: rgba(27, 29, 36, .12); }
.entete:not(.compacte) .burger span { background: var(--encre); }
/* Volet ouvert : le bouton se retrouve sur le fond noir, il repasse en blanc. */
.burger[aria-expanded="true"] { background: rgba(255, 255, 255, .1) !important; border-color: rgba(255, 255, 255, .18) !important; }
.burger[aria-expanded="true"] span { background: #fff !important; }

.marque .logo-clair { display: none; }
.entete.compacte .marque .logo-sombre { display: none; }
.entete.compacte .marque .logo-clair { display: block; }

/* Pages dont le haut est un bandeau photo : l'en-tête y est posé dessus, donc
   en blanc tant qu'on n'a pas défilé. Les pages sans photo gardent l'en-tête
   sombre défini plus haut. */
.entete.sur-photo:not(.compacte) .nav a { color: rgba(255, 255, 255, .86); }
.entete.sur-photo:not(.compacte) .nav a:hover,
.entete.sur-photo:not(.compacte) .nav a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .13); }
.entete.sur-photo:not(.compacte) .burger { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .2); }
.entete.sur-photo:not(.compacte) .burger span { background: #fff; }
.entete.sur-photo:not(.compacte) .marque .logo-sombre { display: none; }
.entete.sur-photo:not(.compacte) .marque .logo-clair { display: block; }
.nav svg.chevron { width: 13px; height: 13px; transition: transform var(--transition); }
.nav li:hover svg.chevron, .nav li:focus-within svg.chevron { transform: rotate(180deg); }

/* sous-menu formations */
.sous-menu {
  position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0;
  min-width: 620px;
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-l);
  box-shadow: var(--ombre-h);
  padding: 14px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px;
  opacity: 0; visibility: hidden; translate: -50% 8px;
  transition: opacity var(--transition), translate var(--transition), visibility var(--transition);
}
.nav li:hover > .sous-menu, .nav li:focus-within > .sous-menu {
  opacity: 1; visibility: visible; translate: -50% 0;
}
.sous-menu a {
  display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start;
  padding: 12px 14px; border-radius: var(--r-s); color: var(--encre);
}
.sous-menu a:hover { background: var(--surface-2); color: var(--encre); }
.sous-menu .pastille {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: var(--rose-voile); color: var(--rose);
}
.sous-menu .pastille svg { width: 19px; height: 19px; }
.sous-menu b { display: block; font-family: var(--titre); font-size: .95rem; color: var(--encre); font-weight: 600; }
.sous-menu small { display: block; font-size: .82rem; color: var(--texte-clair); line-height: 1.4; margin-top: 2px; }

.entete .btn { flex: none; }

.burger {
  display: none; width: 44px; height: 44px; border-radius: 11px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16);
  cursor: pointer; position: relative; flex: none;
}
.burger span {
  position: absolute; left: 12px; width: 20px; height: 2px; border-radius: 2px; background: #fff;
  transition: transform var(--transition), opacity var(--transition);
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* volet mobile */
.volet {
  position: fixed; inset: 0; z-index: 95;
  background: var(--noir);
  padding: 92px var(--gout) 40px;
  overflow-y: auto;
  opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition);
}
.volet.ouvert { opacity: 1; visibility: visible; }
.volet a { display: block; color: #fff; font-family: var(--titre); font-size: 1.5rem; font-weight: 600; padding: 13px 0; }
.volet .groupe { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 18px; margin-top: 18px; }
.volet .groupe > span { display: block; font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rose); margin-bottom: 6px; }
.volet .groupe a { font-size: 1.1rem; font-weight: 500; color: rgba(255, 255, 255, .8); padding: 9px 0; }
.volet .btn { width: 100%; margin-top: 26px; }

/* ---------- héros ----------
   Une bannière pleine largeur : la photo occupe tout le haut de page, le texte
   est posé dessus. Ce qui fait la différence avec un bandeau de thème tout
   fait, c'est le dégradé : dense à gauche sous le texte, presque nul à droite
   où la photo doit rester lisible. Un voile uniforme assombrit tout et donne
   cet aspect terne qu'on voit partout. */
.heros {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; align-items: center;
  min-height: clamp(470px, min(42vw, 62vh), 690px);
  padding: clamp(122px, 11vw, 158px) 0 clamp(58px, 6vw, 92px);
  background: #0A0A0C;
  color: rgba(255, 255, 255, .78);
}

.heros-fond {
  position: absolute; inset: 0; z-index: -3;
  background-size: cover; background-position: center 34%;
}

/* Dégradé de lisibilité : latéral d'abord, puis une reprise haut et bas pour
   ancrer le menu et fermer proprement sur la section suivante. */
.heros::after {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(92deg, rgba(10, 10, 12, .94) 0%, rgba(10, 10, 12, .86) 26%,
                           rgba(10, 10, 12, .52) 56%, rgba(10, 10, 12, .16) 82%,
                           rgba(10, 10, 12, .06) 100%),
    linear-gradient(180deg, rgba(10, 10, 12, .62) 0px, rgba(10, 10, 12, .28) 120px,
                            transparent 260px),
    linear-gradient(0deg, rgba(10, 10, 12, .55) 0%, transparent 34%);
}

/* Halo de marque, discret : il réchauffe la photo sans la colorer. */
.heros::before {
  content: ""; position: absolute; inset: -30% -10% auto -10%; height: 140%; z-index: -1;
  background:
    radial-gradient(880px 560px at 6% 0%, rgba(255, 0, 110, .22), transparent 62%),
    radial-gradient(760px 520px at 92% 8%, rgba(96, 60, 255, .16), transparent 60%);
  animation: aura 22s ease-in-out infinite;
  pointer-events: none;
}

.heros h1 { color: #fff; max-width: 15ch; font-size: clamp(2.5rem, 4.2vw, 4.4rem); }
.heros .plomb { color: rgba(255, 255, 255, .78); max-width: 52ch; font-size: clamp(1.04rem, 1.3vw, 1.2rem); }
.heros .paire-btn { margin-top: 30px; }
.heros .oeil { margin-bottom: 20px; }
.heros .reassurance { color: rgba(255, 255, 255, .68); }
.heros .coches li { color: rgba(255, 255, 255, .82); }

/* Pied de bannière : la certification, avec le logo officiel sur pastille
   blanche pour qu'il reste lisible sur la photo. */
.gage {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 30px; padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  max-width: 62ch;
}
.gage img { height: 44px; width: auto; flex: none; background: #fff; border-radius: 9px; padding: 5px 9px; }
.gage p { font-size: .88rem; color: rgba(255, 255, 255, .66); margin: 0; flex: 1 1 340px; }

/* Bannière des pages internes : même principe, moins haute. */
.heros.mince {
  min-height: clamp(340px, min(30vw, 46vh), 480px);
  padding: clamp(118px, 10vw, 150px) 0 clamp(44px, 5vw, 70px);
}
.heros.mince h1 { max-width: 20ch; font-size: clamp(2.1rem, 3.5vw, 3.4rem); }

/* Pages sans photo (mentions légales, CGV, confidentialité, 404) : fond de
   marque, sans photo à assombrir. */
.heros:not(:has(.heros-fond)) {
  min-height: 0; background: var(--noir);
  padding: clamp(126px, 12vw, 160px) 0 clamp(44px, 5vw, 70px);
}
.heros:not(:has(.heros-fond))::after { content: none; }

.badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px 7px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2);
  font-size: .84rem; color: rgba(255, 255, 255, .86); margin-bottom: 22px;
  backdrop-filter: blur(6px);
}
.badge b { color: #fff; font-weight: 600; }
.point {
  width: 7px; height: 7px; border-radius: 50%; background: var(--rose); flex: none;
  box-shadow: 0 0 0 0 rgba(255, 0, 110, .7);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 9px rgba(255, 0, 110, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 0, 110, 0); }
}

/* Mot qui défile dans le titre. `overflow: hidden` confine le mouvement à sa
   propre ligne ; le rembourrage compense pour ne pas rogner les jambages. */
.rotatif {
  display: inline-grid; vertical-align: bottom; overflow: hidden;
  padding-bottom: .16em; margin-bottom: -.16em;
}
.rotatif > span {
  grid-area: 1 / 1; color: var(--rose);
  opacity: 0; translate: 0 .5em;
  transition: opacity .42s ease, translate .42s cubic-bezier(.22, .9, .3, 1);
}
.rotatif > span.actif { opacity: 1; translate: 0 0; }
.rotatif > span.sortant { opacity: 0; translate: 0 -.5em; }

.fil { display: flex; gap: 8px; align-items: center; font-size: .86rem; color: rgba(255, 255, 255, .58); margin-bottom: 20px; }
.fil a:hover { color: #fff; }
.fil svg { width: 13px; height: 13px; }


/* ---------- blocs sombres ---------- */
.sombre { background: var(--noir); color: rgba(255, 255, 255, .74); }
.sombre h1, .sombre h2, .sombre h3, .sombre h4 { color: #fff; }
.sombre .tete-section p { color: rgba(255, 255, 255, .62); }

/* ---------- grilles ---------- */
.duo {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.duo.decale { grid-template-columns: 1.05fr .95fr; }
.duo .visuel { border-radius: var(--r-l); overflow: hidden; box-shadow: var(--ombre); }
.duo .visuel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* Un visuel en hauteur garde ses proportions : le rogner en paysage
   couperait les visages. */
.duo .visuel.portrait img { aspect-ratio: auto; object-fit: contain; }

.grille { display: grid; gap: clamp(18px, 1.5vw, 30px); }
.grille-2 { grid-template-columns: repeat(2, 1fr); }
.grille-3 { grid-template-columns: repeat(3, 1fr); }
.grille-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- cartes ---------- */
.carte {
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-l);
  padding: 30px; position: relative; overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.carte:hover { transform: translateY(-5px); box-shadow: var(--ombre-h); border-color: transparent; }
.carte h3 { margin-bottom: 10px; }
.carte p { color: var(--texte-clair); font-size: .96rem; margin-bottom: 0; }

.carte .icone {
  width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center;
  background: var(--rose-voile); color: var(--rose); margin-bottom: 20px;
}
.carte .icone svg { width: 24px; height: 24px; }
.carte img.vignette, .carte-theme img.vignette {
  width: 54px; height: 54px; object-fit: contain; margin-bottom: 18px;
  background: var(--surface-2); border: 1px solid var(--ligne-douce);
  border-radius: 13px; padding: 9px;
}

.sombre .carte {
  background: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .1);
}
.sombre .carte:hover { background: rgba(255, 255, 255, .075); border-color: rgba(255, 255, 255, .2); }
.sombre .carte p { color: rgba(255, 255, 255, .62); }

/* carte de thématique */
.carte-theme {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-l);
  overflow: hidden; height: 100%;
  transition: transform var(--transition), box-shadow var(--transition);
}
.carte-theme:hover { transform: translateY(-6px); box-shadow: var(--ombre-h); }
.carte-theme .media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); }
.carte-theme .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22,.9,.3,1); }
.carte-theme:hover .media img { transform: scale(1.06); }
.carte-theme .corps { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.carte-theme h3 { font-size: 1.18rem; margin-bottom: 8px; }
.carte-theme p { color: var(--texte-clair); font-size: .94rem; flex: 1; }
.carte-theme .lien-carte { margin-top: 20px; display: flex; align-items: center; gap: 8px; color: var(--rose); font-weight: 600; font-size: .92rem; }
.carte-theme .lien-carte svg { width: 16px; height: 16px; transition: transform var(--transition); }
.carte-theme:hover .lien-carte svg { transform: translateX(5px); }

.etiquettes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.etiquette {
  font-size: .76rem; font-weight: 600; padding: 5px 11px; border-radius: 999px;
  background: var(--surface-2); color: var(--texte-clair); border: 1px solid var(--ligne-douce);
}
.etiquette.accent { background: var(--rose-voile); color: var(--rose); border-color: transparent; }

/* ---------- étapes numérotées ---------- */
.etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 1.5vw, 30px); counter-reset: etape; }
.etape {
  position: relative; padding: 34px 30px 32px;
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-l);
  transition: transform var(--transition), box-shadow var(--transition);
}
.etape:hover { transform: translateY(-5px); box-shadow: var(--ombre-h); }
.etape .num {
  font-family: var(--titre); font-size: 2.6rem; font-weight: 700; line-height: 1;
  color: var(--rose); opacity: .22; letter-spacing: -.04em;
}
.etape h3 { margin: 14px 0 8px; }
.etape p { color: var(--texte-clair); font-size: .95rem; margin: 0; }
.etape::after {
  content: ""; position: absolute; top: 46px; right: -22px; width: 22px; height: 1px;
  background: linear-gradient(90deg, var(--ligne), transparent);
}
.etape:last-child::after { display: none; }

.sombre .etape { background: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .1); }
.sombre .etape p { color: rgba(255, 255, 255, .6); }
.sombre .etape::after { background: linear-gradient(90deg, rgba(255,255,255,.2), transparent); }

/* ---------- avis ---------- */
.note-globale {
  display: inline-flex; align-items: center; gap: 16px;
  background: var(--surface); border: 1px solid var(--ligne); border-radius: 999px;
  padding: 12px 24px 12px 18px; box-shadow: var(--ombre);
}
.note-globale .score { font-family: var(--titre); font-size: 1.85rem; font-weight: 700; color: var(--encre); line-height: 1; }
.note-globale .score sup { font-size: .82rem; color: var(--texte-clair); font-weight: 500; }
.etoiles { display: inline-flex; gap: 2px; color: #FFB400; }
.etoiles svg { width: 16px; height: 16px; }

.piste { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.piste-in { display: flex; gap: 20px; width: max-content; animation: defile 46s linear infinite; }
.piste:hover .piste-in { animation-play-state: paused; }
@keyframes defile { to { transform: translateX(-50%); } }

.avis {
  width: 350px; flex: none;
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-l);
  padding: 26px 28px; display: flex; flex-direction: column; gap: 14px;
}
.avis .haut { display: flex; align-items: center; justify-content: space-between; }
.avis blockquote { margin: 0; font-size: .99rem; color: var(--encre); line-height: 1.6; flex: 1; }
.avis .auteur { display: flex; align-items: center; gap: 11px; padding-top: 14px; border-top: 1px solid var(--ligne-douce); }
.avis .auteur img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.avis .auteur .initiales {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--rose-voile); color: var(--rose); font-weight: 700; font-size: .84rem; flex: none;
}
.avis .auteur b { display: block; font-size: .92rem; color: var(--encre); font-weight: 600; }
.avis .auteur span { font-size: .82rem; color: var(--texte-clair); }

/* ---------- bandeau de logos ----------
   Les logos défilent en couleur : ce sont des marques, les afficher en gris
   les rend méconnaissables, et c'est justement la reconnaissance qui rassure
   le visiteur sur le financement. Chaque logo est posé sur une tuile blanche
   de taille fixe pour que tous aient le même poids optique, quelle que soit
   la forme du fichier d'origine. */
.logos {
  display: flex; gap: 20px; align-items: stretch;
  width: max-content; padding-block: 10px;
  animation: defile var(--vitesse, 44s) linear infinite;
}
.logos .tuile {
  flex: none; width: 184px; height: 104px;
  display: grid; place-items: center; padding: 18px 22px;
  background: var(--surface); border: 1px solid var(--ligne-douce); border-radius: var(--r);
  box-shadow: 0 1px 2px rgba(16, 14, 24, .04);
  transition: transform var(--ressort), box-shadow var(--transition), border-color var(--transition);
}
.logos .tuile img {
  max-height: 58px; max-width: 100%; width: auto; object-fit: contain;
  transition: transform var(--ressort);
}
.logos .tuile:hover {
  transform: translateY(-8px);
  box-shadow: var(--ombre-h); border-color: transparent;
}
.logos .tuile:hover img { transform: scale(1.06); }

@media (max-width: 680px) {
  .logos .tuile { width: 148px; height: 86px; padding: 14px 16px; }
  .logos .tuile img { max-height: 46px; }
}

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; max-width: 880px; margin-inline: auto; }
.faq details {
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r);
  overflow: hidden; transition: border-color var(--transition), box-shadow var(--transition);
}
.faq details[open] { border-color: rgba(255, 0, 110, .3); box-shadow: var(--ombre); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 20px 56px 20px 24px; position: relative;
  font-family: var(--titre); font-weight: 600; font-size: 1.02rem; color: var(--encre);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 24px; top: 50%; translate: 0 -50%;
  width: 11px; height: 11px;
  border-right: 2px solid var(--rose); border-bottom: 2px solid var(--rose);
  rotate: 45deg; transition: rotate var(--transition);
}
.faq details[open] summary::after { rotate: -135deg; }
.faq .reponse { padding: 0 24px 22px; color: var(--texte-clair); }

/* ---------- appel à l'action ---------- */
.cta {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--noir); color: #fff;
  border-radius: var(--r-xl);
  padding: clamp(44px, 6vw, 76px);
  text-align: center;
}
.cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(760px 420px at 20% 0%, rgba(255, 0, 110, .32), transparent 60%),
    radial-gradient(620px 420px at 86% 100%, rgba(96, 60, 255, .22), transparent 62%);
}
.cta h2 { color: #fff; max-width: 18ch; margin-inline: auto; }
.cta p { color: rgba(255, 255, 255, .72); max-width: 62ch; margin-inline: auto; }
.cta .paire-btn { justify-content: center; margin-top: 28px; }
.cta .reassurance { justify-content: center; }

/* ---------- formulaire ---------- */
.formulaire { display: grid; gap: 16px; }
.champ { display: grid; gap: 7px; }
.champ > span { font-size: .84rem; font-weight: 600; color: var(--encre); }
.champ > span i { color: var(--rose); font-style: normal; }
.champ input, .champ select, .champ textarea {
  font-family: var(--corps); font-size: .97rem; color: var(--encre);
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-s);
  padding: 13px 15px; width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.champ textarea { min-height: 140px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; border-color: var(--rose); box-shadow: 0 0 0 4px var(--rose-voile);
}
.champ.duo-champ { grid-template-columns: 1fr 1fr; gap: 16px; }
.pot { position: absolute; left: -9999px; opacity: 0; height: 0; }

.assentiment { display: flex; gap: 11px; align-items: flex-start; font-size: .87rem; color: var(--texte-clair); }
.assentiment input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--rose); flex: none; }
.assentiment a { color: var(--rose); text-decoration: underline; }

.message {
  padding: 15px 18px; border-radius: var(--r-s); font-size: .94rem;
  display: flex; gap: 11px; align-items: flex-start;
}
.message svg { width: 19px; height: 19px; flex: none; margin-top: 1px; }
.message.ok { background: #E7F6EF; color: #14663F; }
.message.ko { background: #FDECEC; color: #96201F; }

/* ---------- pied de page ---------- */
.pied { background: var(--noir); color: rgba(255, 255, 255, .62); padding-top: clamp(56px, 7vw, 84px); }
.pied-grille {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px;
  padding-bottom: 48px;
}
.pied h3 {
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .42); font-weight: 600; margin-bottom: 18px;
}
.pied a { color: rgba(255, 255, 255, .66); font-size: .95rem; transition: color var(--transition); }
.pied a:hover { color: #fff; }
.pied li { margin-bottom: 11px; }
.pied .marque img { height: 40px; margin-bottom: 18px; }
.pied .accroche { font-size: .95rem; max-width: 34ch; margin-bottom: 22px; }
.pied .contact li { display: flex; gap: 11px; align-items: flex-start; }
.pied .contact svg { width: 17px; height: 17px; color: var(--rose); flex: none; margin-top: 3px; }
.pied .qualiopi { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.pied .qualiopi img { height: 52px; width: auto; background: #fff; border-radius: 8px; padding: 5px 8px; }
.pied .qualiopi small { font-size: .78rem; line-height: 1.45; color: rgba(255, 255, 255, .5); }

.pied-bas {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-block: 22px;
  display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center;
  font-size: .86rem; color: rgba(255, 255, 255, .45);
}
.pied-bas nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 20px; }
.pied-bas a { font-size: .86rem; }
.mention-legale {
  font-size: .74rem; line-height: 1.55; color: rgba(255, 255, 255, .34);
  padding-bottom: 26px; max-width: 108ch;
}

/* ---------- animations d'apparition ----------
   Toutes reposent sur le même principe : un état de départ posé en CSS, une
   classe `vu` ajoutée par l'observateur de défilement, et un `--delai` calculé
   à la volée pour échelonner les éléments d'un même groupe. Aucune ne bloque
   la lecture : le contenu est déjà dans le HTML, l'animation ne fait que le
   mettre en scène. */
.reveler, .reveler-zoom, .reveler-gauche, .reveler-droite, .reveler-flou, .reveler-volet {
  will-change: opacity, transform;
}

.js .reveler { opacity: 0; translate: 0 30px; }
.reveler.vu {
  opacity: 1; translate: 0 0;
  transition: opacity .75s cubic-bezier(.22,.9,.3,1), translate .75s cubic-bezier(.22,.9,.3,1);
  transition-delay: var(--delai, 0ms);
}

.js .reveler-zoom { opacity: 0; scale: .955; translate: 0 18px; }
.reveler-zoom.vu {
  opacity: 1; scale: 1; translate: 0 0;
  transition: opacity .85s cubic-bezier(.22,.9,.3,1), scale .85s cubic-bezier(.22,.9,.3,1),
              translate .85s cubic-bezier(.22,.9,.3,1);
  transition-delay: var(--delai, 0ms);
}

.js .reveler-gauche { opacity: 0; translate: -42px 0; }
.js .reveler-droite { opacity: 0; translate: 42px 0; }
.reveler-gauche.vu, .reveler-droite.vu {
  opacity: 1; translate: 0 0;
  transition: opacity .8s cubic-bezier(.22,.9,.3,1), translate .8s cubic-bezier(.22,.9,.3,1);
  transition-delay: var(--delai, 0ms);
}

/* Arrivée nette depuis un flou : donne de la profondeur aux visuels. */
.js .reveler-flou { opacity: 0; filter: blur(14px); scale: 1.04; }
.reveler-flou.vu {
  opacity: 1; filter: blur(0); scale: 1;
  transition: opacity .9s ease, filter .9s ease, scale .9s cubic-bezier(.22,.9,.3,1);
  transition-delay: var(--delai, 0ms);
}

/* Le visuel se dévoile derrière un volet qui remonte.
   Le découpage porte sur le contenu, pas sur le conteneur : un élément
   entièrement masqué par `clip-path` n'est plus considéré comme visible
   par l'observateur de défilement, et ne se révélerait donc jamais. */
.js .reveler-volet > * { clip-path: inset(0 0 100% 0); }
.reveler-volet.vu > * {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.05s cubic-bezier(.76, 0, .24, 1);
  transition-delay: var(--delai, 0ms);
}

/* Titres découpés mot à mot par le script : chaque mot monte à son tour. */
.mot { display: inline-block; opacity: 0; translate: 0 .55em; }
/* (les .mot ne sont créés que par le script : pas de garde-fou à prévoir) */
.vu .mot, .mot.vu {
  opacity: 1; translate: 0 0;
  transition: opacity .6s ease, translate .6s cubic-bezier(.22,.9,.3,1);
  transition-delay: calc(var(--i, 0) * 42ms + var(--delai, 0ms));
}

/* Le trait de l'œilleton se dessine quand la section entre à l'écran.
   La classe `oeil-anime` est posée par le script : sans JavaScript, le trait
   reste simplement affiché. */
.oeil.oeil-anime::before { width: 0; transition: width .7s cubic-bezier(.22,.9,.3,1) 120ms; }
.oeil.oeil-anime.vu::before { width: 22px; }

/* ---------- mouvement continu ---------- */

/* Halo du héros : deux masses colorées qui respirent lentement. */
@keyframes aura {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(2.5%, -2%, 0) scale(1.1); }
}

/* Reflet qui balaie un bouton au survol. */
.btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .34) 50%, transparent 62%);
  transform: translateX(-130%);
  transition: transform .75s cubic-bezier(.22, .9, .3, 1);
  pointer-events: none;
}
.btn:hover::after { transform: translateX(130%); }
.btn-contour::after, .btn-lien::after { display: none; }

/* Onde au clic, posée par le script à l'endroit exact du curseur. */
.onde {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(255, 255, 255, .45);
  transform: translate(-50%, -50%) scale(0); opacity: .9;
  animation: onde .6s ease-out forwards;
}
.btn-contour .onde, .btn-lien .onde { background: rgba(255, 0, 110, .22); }
@keyframes onde { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }

/* Lueur qui suit le curseur sur les cartes. */
.carte, .carte-theme, .etape { --mx: 50%; --my: 50%; }
.carte::before, .carte-theme::before, .etape::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 0, 110, .10), transparent 62%);
  opacity: 0; transition: opacity var(--transition);
}
.carte:hover::before, .carte-theme:hover::before, .etape:hover::before { opacity: 1; }
.carte > *, .carte-theme > *, .etape > * { position: relative; z-index: 1; }

/* Inclinaison au survol, pilotée par le script (pointeur fin uniquement). */
.incline { transform-style: preserve-3d; will-change: transform; }

/* ---------- finitions au survol ---------- */
/* Soulignement qui se déploie sous les liens du menu. */
.nav > li > a { position: relative; }
.nav > li > a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px;
  background: var(--rose); border-radius: 2px;
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--transition);
}
.nav > li > a:hover::after, .nav > li > a[aria-current="page"]::after { transform: scaleX(1); }

/* La vignette d'une carte pivote légèrement au survol. */
.carte:hover img.vignette { transform: rotate(-4deg) scale(1.06); }
.carte img.vignette { transition: transform var(--ressort); }

/* Le numéro d'étape s'affirme quand on survole. */
.etape .num { transition: opacity var(--transition), transform var(--ressort); }
.etape:hover .num { opacity: .5; transform: translateY(-2px); }

/* ---------- barre de progression de lecture ---------- */
.progression {
  position: fixed; top: 0; left: 0; height: 3px; z-index: 300;
  width: 100%; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--rose), #ff6ba7);
  pointer-events: none;
}

/* ---------- retour en haut ---------- */
.remonter {
  position: fixed; right: clamp(16px, 3vw, 30px); bottom: clamp(16px, 3vw, 30px); z-index: 130;
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--ligne);
  background: var(--surface); color: var(--encre); cursor: pointer;
  display: grid; place-items: center; box-shadow: var(--ombre);
  opacity: 0; visibility: hidden; translate: 0 14px;
  transition: opacity var(--transition), translate var(--transition),
              visibility var(--transition), transform var(--ressort);
}
.remonter.visible { opacity: 1; visibility: visible; translate: 0 0; }
.remonter:hover { transform: translateY(-4px); color: var(--rose); }
.remonter svg { width: 19px; height: 19px; }

@media (prefers-reduced-motion: reduce) {
  .reveler, .reveler-zoom, .reveler-gauche, .reveler-droite, .reveler-flou, .reveler-volet,
  .reveler-volet > * {
    opacity: 1; translate: none; scale: none; filter: none; clip-path: none; transition: none;
  }
  .mot { opacity: 1; translate: none; }
  .oeil.oeil-anime::before { width: 22px; transition: none; }
  .piste-in, .logos, .heros::before, .point { animation: none; }
  .btn::after, .onde { display: none; }
  .rotatif > span { opacity: 1; translate: none; }
  .rotatif > span:not(.actif) { display: none; }
  .progression { display: none; }
}

/* ---------- responsive ---------- */
/* Très grands écrans : on laisse le contenu respirer plutôt que de l'étirer. */
@media (min-width: 1500px) {
  .avis { width: 400px; }
  .carte { padding: 34px; }
  .sous-menu { min-width: 700px; }
}
@media (max-width: 1080px) {
  .pied-grille { grid-template-columns: 1fr 1fr; gap: 34px; }
  .grille-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1080px) {
  .heros h1 { max-width: 20ch; }
  /* Sur une colonne, le texte occupe toute la largeur : le dégradé latéral
     n'a plus de sens, on revient à un voile vertical. */
  .heros::after {
    background:
      linear-gradient(180deg, rgba(10, 10, 12, .82) 0px, rgba(10, 10, 12, .62) 160px,
                              rgba(10, 10, 12, .72) 70%, rgba(10, 10, 12, .9) 100%);
  }
  .heros { min-height: clamp(400px, 74vh, 620px); }
  .heros.mince { min-height: clamp(300px, 52vh, 460px); }
  .gage { gap: 14px; margin-top: 24px; padding-top: 20px; }
  .gage p { font-size: .85rem; }
}
@media (max-width: 980px) {
  .nav, .entete .btn.desktop { display: none; }
  .burger { display: block; margin-left: auto; }
  .duo, .duo.decale { grid-template-columns: 1fr; }
  .duo .visuel { order: -1; }
  .duo.visuel-apres .visuel { order: 0; }
  .etapes, .grille-3 { grid-template-columns: 1fr; }
  .etape::after { display: none; }
}
@media (max-width: 680px) {
  .grille-2, .grille-4 { grid-template-columns: 1fr; }
  /* Le badge doit rester sur une ligne : sur mobile il porte une mention
     courte, la précision passe dans le paragraphe qui suit. */
  .badge { font-size: .8rem; padding: 6px 13px 6px 8px; }
  .badge .detail { display: none; }
  .duo.decale { grid-template-columns: 1fr; }
  .carte, .etape { padding: 24px 22px; }
  .cta { padding: 34px 22px; }
  .champ.duo-champ { grid-template-columns: 1fr; }
  .avis { width: 300px; }
  .pied-grille { grid-template-columns: 1fr; }
  .pied-bas nav { margin-left: 0; }
  .btn { width: 100%; }
  .paire-btn { flex-direction: column; align-items: stretch; }
  .paire-btn .btn { width: 100%; }
}

/* ---------- corps d'article ---------- */
.corps-article { font-size: 1.06rem; line-height: 1.75; }
.corps-article p { margin-bottom: 1.35em; }
.corps-article h2 { color: var(--encre); margin-bottom: .55em; }
.corps-article .coches { margin: 26px 0 30px; }
.corps-article a { color: var(--rose); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- pages légales ---------- */
.texte-legal { font-size: 1rem; line-height: 1.75; }
.texte-legal h2 {
  font-size: clamp(1.2rem, 2vw, 1.5rem); margin: 42px 0 14px; color: var(--encre);
  padding-top: 20px; border-top: 1px solid var(--ligne);
}
.texte-legal h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.texte-legal ul { margin: 0 0 1.3em; display: grid; gap: 9px; }
.texte-legal li { display: flex; gap: 11px; }
.texte-legal li::before { content: "—"; color: var(--rose); flex: none; }
.texte-legal a { color: var(--rose); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- administration des demandes ---------- */
.tableau { width: 100%; border-collapse: collapse; font-size: .92rem; background: var(--surface); }
.tableau th, .tableau td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--ligne-douce); vertical-align: top; }
.tableau th { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-clair); background: var(--surface-2); }
.tableau tr:hover td { background: var(--surface-2); }
.tableau .enveloppe-scroll { overflow-x: auto; }