/*
 * nouvelle-vitrine.css — la vitrine (étape 11, refaite en v3 le 29 octobre 2026), et ce que
 * reprennent les pages créateurs, guides et juridiques (polices, couleurs, en-tête, boutons, FAQ,
 * pied).
 *
 *   1. Polices et variables      5. Formules, FAQ, parents, appel final, pied
 *   2. Base, accessibilité        6. Téléphone (≤ 900 px)
 *   3. Signatures de la charte    7. Réduire les animations
 *   4. En-tête                    8. Programme créateurs, UX lot 1, puis VITRINE V3 (le haut de
 *                                    page, comment ça marche, réviser, la science)
 */

/* === 1. Polices et variables === */
/* Servies depuis le projet, comme dans l'app : rien n'est demandé à Google ni à un CDN. Seules
   les graisses utilisées ; 800, 700 et 500 (le titre, le bouton, le sous-titre) sont préchargées. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('nouvelle-app/polices/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('nouvelle-app/polices/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('nouvelle-app/polices/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('nouvelle-app/polices/poppins-700.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('nouvelle-app/polices/poppins-800.woff2') format('woff2'); }
/* La note manuscrite (charte : vitrine seulement, 2 ou 3 fois). Caveat 700, réduite aux
   caractères des notes de la page (tests-locaux/vitrine-construire.js), licence OFL à côté. */
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap; src: url('nouvelle-vitrine/polices/caveat-700.woff') format('woff'); }

:root {
  /* La vitrine (refonte du 25 octobre 2026) : noir, crème, blanc, des gris chauds et QUATRE
     violets — --violet (sur-titres, puces, coches), --violet-pale (« Le prof a insisté »),
     --surligne (le surligneur, 3 fois dans la page) et --magenta (le logo). Le vert et le rouge
     ne servent qu'à la réponse du quiz du haut de page (charte). */
  --noir: #16161A;
  --noir-4: #2E2E34;
  --creme: #F5F1E8;
  --blanc: #FFFFFF;
  --beige: #EFE9DC;
  --bordure: #E4DDCC;
  --bordure-2: #D8D0BE;
  --texte-2: #5C574A;
  --texte-3: #6B6558;
  --texte-4: #4A463D;
  --texte-nav: #3D3A33;
  --texte-lecture: #2E2C27;
  --gris-clair: #B8B2A6;
  /* Gris des réponses écartées : #8E887C dans la maquette, assombri pour tenir 4,5:1 sur blanc. */
  --gris-ecarte: #6E695C;
  --violet: #6D28D9;
  --violet-pale: #EFE6FD;
  --surligne: #D9C8FB;          /* le surligneur lavande de la charte et des maquettes */
  --magenta: #C04BD8;
  --voyant: #E0457B;
  --rose: #F2A7C3;
  --vert: #1D7A5A;
  --vert-fonce: #0B4D38;
  --vert-pale: #E3F3EA;
  --rouge: #B4323A;
  --rouge-fonce: #7A1F26;
  --rouge-pale: #FBE7E9;
  --jaune-lecture: #FCE58A;     /* le surligneur jaune de la fiche dans l'app (charte : surligneurs de lecture) */
  /* Les pages créateurs, guides et juridiques (nouvelle-vitrine/*.css) lisent aussi ces
     variables : gardées pour elles, la vitrine ne s'en sert plus. */
  --noir-2: #1F1F24;
  --noir-3: #26262C;
  --fond-clair: #FBF9F4;
  --papier: #FBF7EC;
  --gris-sombre: #CFC9BD;
  --violet-2: #7C3AED;
  --violet-fonce: #4C1D95;
  --violet-nuit: #3B2470;
  --violet-doux: #C9B6FB;
  --violet-profond: #5B3FA8;
  --violet-encre: #2A2240;
  --police: 'Poppins', 'Avenir Next', Avenir, 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;
  --main: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  --focus: #6D28D9;
  --hauteur-barre: 0px;
}

/* === 2. Base, accessibilité === */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; background: var(--creme); color: var(--noir); font-family: var(--police); }
a { color: var(--noir); }
a:hover { color: var(--violet); }
img, svg { display: block; }
button { font-family: inherit; }
h1, h2, h3, p { margin: 0; }
.racine { overflow-x: clip; background: var(--creme); padding-bottom: var(--hauteur-barre); }
.chiffres { font-variant-numeric: tabular-nums; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.evitement { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--noir); color: var(--creme); padding: 12px 16px; border-radius: 12px; font-weight: 700; text-decoration: none; }
.evitement:focus { top: 12px; color: var(--creme); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
.cta-final-bloc :focus-visible { outline-color: var(--surligne); }
[hidden] { display: none !important; }

/* === 3. Signatures de la charte === */
@keyframes chevrons { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
.chevrons { display: inline-block; animation: chevrons 1.6s ease-in-out infinite; }
@keyframes voyant { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.voyant { animation: voyant 1.4s ease-in-out infinite; }
@keyframes flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.flotte-tel { animation: flotte 7s ease-in-out -1s infinite; }
@keyframes flotte-doux { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.flotte-doux { animation: flotte-doux 4.5s ease-in-out infinite; }
.flotte-doux-2 { animation: flotte-doux 5.5s ease-in-out -2s infinite; }
@keyframes onde { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
.barre-onde { display: block; transform-origin: center; animation: onde 1.1s ease-in-out infinite; border-radius: 2px; }
@keyframes remplir { from { width: 0; } to { width: 64%; } }
.remplir { width: 67%; height: 8px; background: var(--noir); border-radius: 4px; }
.vu .remplir, .remplir.vu { animation: remplir 0.8s cubic-bezier(.2, .7, .2, 1) both; }
/* Le surligneur : se dessine de gauche à droite, 0,7 s, une fois à l'apparition. */
@keyframes surligne { from { background-size: 0% 34%; } to { background-size: 100% 34%; } }
.surligne { background-image: linear-gradient(var(--surligne), var(--surligne)); background-repeat: no-repeat; background-position: 0 88%; background-size: 100% 34%; }
.js .surligne:not(.vu) { background-size: 0% 34%; }
.js .surligne.vu { animation: surligne 0.7s cubic-bezier(.2, .7, .2, 1) both; }
.marque { background: linear-gradient(transparent 58%, var(--surligne) 58%, var(--surligne) 92%, transparent 92%); padding: 0 6px; }
/* Sur le bloc noir, le surligneur prend le violet plein (le lavande y virait au gris). */
.surligne--sombre { background-image: linear-gradient(var(--violet), var(--violet)); }
.titre-section .surligne, .t-cta .surligne { padding: 0 6px; }
.cle { font-weight: 700; background: linear-gradient(transparent 55%, var(--surligne) 55%, var(--surligne) 92%, transparent 92%); }
.ligne { border-radius: 6px; padding: 1px 4px; margin: 0 -4px; }
@keyframes lueur { 0%, 100% { background-color: transparent; } 8%, 24% { background-color: rgba(217, 200, 251, 0.6); } 34% { background-color: transparent; } }
.l1 { animation: lueur 7.5s ease-in-out infinite; }
.l2 { animation: lueur 7.5s ease-in-out 2.5s infinite; }
.l3 { animation: lueur 7.5s ease-in-out 5s infinite; }
@keyframes pulse-violet { 0%, 100% { box-shadow: 0 0 0 0 rgba(109, 40, 217, 0.35); } 60% { box-shadow: 0 0 0 9px rgba(109, 40, 217, 0); } }
.pulse-violet { animation: pulse-violet 2.8s ease-out infinite; }
@keyframes pulse-vert { 0%, 40% { box-shadow: 0 0 0 0 rgba(29, 122, 90, 0.45); } 70% { box-shadow: 0 0 0 12px rgba(29, 122, 90, 0); } 100% { box-shadow: 0 0 0 0 rgba(29, 122, 90, 0); } }
.pulse-vert { animation: pulse-vert 2.4s ease-out infinite; }
.note-main { font-family: var(--main); font-weight: 700; color: var(--violet); }

/* Les boutons : noir, texte crème ; au survol un peu plus clair et les ›› glissent ; appuyé, 97 %. */
.btn { display: inline-block; vertical-align: middle; text-decoration: none; line-height: 1.25; font-weight: 700; border: none; cursor: pointer; transition: background-color .2s, transform .1s, color .2s; text-align: center; }
.btn-noir { background: var(--noir); color: var(--creme); }
.btn-noir:hover { background: var(--noir-4); color: var(--creme); }
.btn-creme { background: var(--creme); color: var(--noir); }
.btn-creme:hover { background: var(--blanc); color: var(--noir); }
.btn-clair { background: var(--blanc); color: var(--noir); border: 1px solid var(--bordure-2); }
.btn-clair:hover { border-color: var(--noir); color: var(--noir); }
.btn:active { transform: scale(0.97); }
.btn .chevrons { animation: none; transition: transform .2s; }
.btn:hover .chevrons { transform: translateX(5px); }
.coche { flex-shrink: 0; color: var(--violet); }

/* Les étiquettes de section « ›› Avant / après ». */
.label { font-size: 13px; font-weight: 600; color: var(--violet); }
.centre { text-align: center; }
.t-h2 { font-size: 52px; font-weight: 800; letter-spacing: -0.04em; line-height: normal; }
/* Le rythme : chaque section a le même espace au-dessus, le même sur-titre, le même titre. */
.section { max-width: 1248px; margin: 0 auto; padding: 112px 24px 0; }
.titre-section { margin: 14px 0 48px; line-height: 1.08; }
.titre-section .marque, .titre-section .surligne, .titre-section .insecable { white-space: nowrap; }


/* === 4. En-tête === */
.annonce { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 5px; min-height: 44px; text-decoration: none; background: var(--noir); color: var(--creme); text-align: center; padding: 11px 16px; font-size: 14px; font-weight: 600; line-height: 1.4; }
.annonce:hover { color: var(--creme); }
.annonce-mot { color: var(--surligne); font-weight: 700; }
.annonce-m { display: none; }
.entete-colle { position: sticky; top: 0; z-index: 30; background: var(--creme); }
.entete { max-width: 1248px; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--bordure); }
.logo { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--noir); }
.logo:hover { color: var(--noir); }
.logo-marque { width: 40px; height: 40px; border-radius: 10px; background: var(--noir); display: flex; align-items: center; justify-content: center; }
.logo-texte { font-size: 21px; font-weight: 800; letter-spacing: -0.03em; }
.nav { display: flex; align-items: center; gap: 26px; font-size: 15px; font-weight: 500; }
.nav-liens { display: flex; gap: 26px; align-items: center; }
.nav-liens a { text-decoration: none; color: var(--texte-nav); padding: 10px 0; }
.nav-liens a:hover { color: var(--violet); }
.connexion-m { display: none; text-decoration: none; color: var(--noir); border: 1.5px solid var(--bordure-2); padding: 11px 14px; border-radius: 12px; font-weight: 600; font-size: 14px; min-height: 44px; }
.entete--vitrine .connexion-m { display: inline-flex; align-items: center; }
.entete--vitrine .connexion-m:hover { border-color: var(--noir); color: var(--noir); }
.btn-entete { display: inline-flex; align-items: center; gap: 5px; padding: 11px 16px; border-radius: 12px; font-size: 15px; white-space: nowrap; min-height: 44px; }

/* La preuve sociale : l'emplacement existe, CACHÉ tant que contenus/avis.md n'a pas d'avis réel. */
.avis { max-width: 1248px; margin: 0 auto; padding: 0 24px 36px; }
.avis-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 14px; list-style: none; padding: 0; margin: 0; }
.avis-carte { background: var(--blanc); border: 1px solid var(--bordure); border-radius: 18px; padding: 18px 20px; }
.avis-texte { font-size: 15px; line-height: 1.55; color: var(--texte-4); }
.avis-qui { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--noir); }

/* === 5. Formules, FAQ, parents, appel final, pied === */
/* Les formules (v2, retour de Maxens) : le rendu d'avant — l'Essentiel en carte noire mise en avant,
   Gratuit et Intensif en blanc — sur des gabarits alignés ligne à ligne (sous-grille). */
.formules-section { text-align: center; }
.bascule { display: inline-flex; gap: 4px; background: var(--blanc); border: 1px solid var(--bordure); border-radius: 14px; padding: 5px; margin-bottom: 40px; }
.bascule-choix { font-size: 15px; font-weight: 600; border: none; border-radius: 10px; padding: 10px 20px; min-height: 44px; cursor: pointer; background: transparent; color: var(--texte-2); }
.bascule-choix[aria-pressed="true"] { background: var(--noir); color: var(--creme); }
.grille-formules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr auto; column-gap: 16px; max-width: 1160px; margin: 0 auto; text-align: left; }
.formule { grid-row: span 3; display: grid; grid-template-rows: subgrid; row-gap: 22px; background: var(--blanc); border: 1px solid var(--bordure); border-radius: 28px; padding: 32px; position: relative; }
.formule--sombre { background: var(--noir); color: var(--creme); border-color: var(--noir); }
.formule-badge { position: absolute; top: -13px; left: 32px; background: var(--violet); color: var(--blanc); font-size: 12px; font-weight: 700; padding: 5px 14px; border-radius: 20px; }
.formule-tete { display: flex; flex-direction: column; }
.formule-nom { font-size: 21px; font-weight: 800; }
.formule-pour { font-size: 14px; color: var(--texte-2); margin-top: 2px; }
.formule--sombre .formule-pour { color: var(--gris-clair); }
.formule-prix { font-size: 46px; font-weight: 800; letter-spacing: -0.03em; margin: 14px 0 2px; }
.formule-unite { font-size: 16px; font-weight: 500; color: var(--texte-2); letter-spacing: 0; }
.formule--sombre .formule-unite { color: var(--gris-clair); }
.formule-sous { font-size: 14px; color: var(--texte-2); }
.formule--sombre .formule-sous { color: var(--beige); }
.formule-sous s { color: var(--texte-3); }
.formule--sombre .formule-sous s { color: var(--gris-clair); }
.formule-sous b { color: var(--noir); }
.formule--sombre .formule-sous b { color: var(--creme); }
.formule-jour { font-size: 13px; font-weight: 600; color: var(--surligne); margin-top: 4px; }
.formule-garantie { font-size: 13px; color: var(--texte-2); margin-top: 6px; }
.formule--sombre .formule-garantie { color: var(--gris-clair); }
.formule-fondateur { font-size: 13px; font-weight: 600; background: var(--noir-4); color: var(--surligne); border-radius: 10px; padding: 9px 12px; margin-top: 14px; }
.formule-avantages { display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--texte-nav); list-style: none; padding: 22px 0 0; margin: 0; border-top: 1px solid var(--beige); }
.formule--sombre .formule-avantages { color: var(--creme); border-top-color: var(--noir-4); }
.formule--sombre .puce { color: var(--surligne); }
.formule-avantages li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; }
.formule-bouton { font-size: 16px; border-radius: 14px; padding: 15px; min-height: 52px; }
.recharge { margin-top: 26px; font-size: 14px; color: var(--texte-2); }
.reassurance { display: flex; gap: 8px 20px; justify-content: center; margin: 10px 0 0; font-size: 14px; color: var(--texte-nav); flex-wrap: wrap; list-style: none; padding: 0; }
.reassurance li { display: inline-flex; align-items: center; gap: 6px; }
[data-rythme="annuel"] .seul-mensuel, [data-rythme="mensuel"] .seul-annuel { display: none !important; }

/* Les questions : 2 colonnes de 3, toutes fermées. */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; align-items: start; max-width: 1080px; margin: 0 auto; }
.faq-item { background: var(--blanc); border: 1px solid var(--bordure); border-radius: 18px; }
.faq-item h3 { font-size: 17px; }
.faq-question { width: 100%; background: transparent; border: none; padding: 20px 24px; min-height: 44px; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; font-size: 17px; font-weight: 700; color: var(--noir); cursor: pointer; border-radius: 18px; }
.faq-signe { color: var(--violet); font-size: 22px; flex-shrink: 0; width: 22px; text-align: center; }
.faq-reponse { padding: 0 24px 20px; font-size: 15px; line-height: 1.6; color: var(--texte-4); }

/* Les parents : un bandeau d'une ligne. */
.parents-section { padding-top: 64px; }
.bandeau-parents { max-width: 1080px; margin: 0 auto; background: var(--blanc); border: 1px solid var(--bordure); border-radius: 28px; padding: 24px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; }
.bandeau-parents-titre { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.bandeau-parents-texte p { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--texte-2); }
.parents-note { display: block; font-size: 13px; color: var(--texte-3); }
.bandeau-parents-action { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cta-parent { font-size: 16px; border-radius: 14px; padding: 14px 22px; min-height: 52px; }
.partage-message { font-size: 14px; font-weight: 600; color: var(--vert-fonce); }
.partage-message:empty { display: none; }

/* L'appel final : le seul bloc noir de la page. */
.final-section { max-width: 1248px; margin: 0 auto; padding: 64px 24px 72px; }
.cta-final-bloc { background: var(--noir); color: var(--creme); border-radius: 32px; padding: 72px 28px; text-align: center; }
.pastille-offre { display: inline-block; font-size: 13px; font-weight: 600; background: var(--noir-4); color: var(--surligne); border-radius: 999px; padding: 7px 14px; margin-bottom: 22px; }
.t-cta { font-size: 56px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.06; }
.cta-final { margin-top: 32px; font-size: 18px; border-radius: 16px; padding: 19px 30px; min-height: 56px; }
.final-sous { margin-top: 16px; font-size: 14px; color: var(--gris-clair); }
.qr-final { display: inline-flex; align-items: center; gap: 16px; margin-top: 30px; background: var(--creme); color: var(--noir); border-radius: 18px; padding: 12px 22px 12px 12px; text-align: left; }
.qr-code { background: var(--blanc); border-radius: 10px; flex-shrink: 0; }
.qr-final .qr-code { width: 84px; height: 84px; padding: 4px; }
.qr-final-titre { font-size: 15px; font-weight: 800; }
.qr-final-texte { font-size: 13.5px; line-height: 1.45; color: var(--texte-4); margin-top: 3px; max-width: 230px; }

/* Le pied (commun aux pages statiques) ; sur la vitrine, en colonnes (.pied--vitrine). */
.pied { border-top: 1px solid var(--bordure); }
.pied-dedans { max-width: 1248px; margin: 0 auto; padding: 28px 24px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 14px; color: var(--texte-2); }
.pied-marque { display: flex; align-items: center; gap: 10px; }
.pied-logo { width: 28px; height: 28px; border-radius: 7px; background: var(--noir); display: flex; align-items: center; justify-content: center; }
.pied-nom { font-weight: 700; color: var(--noir); }
.pied-liens { display: flex; gap: 4px 18px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.pied-liens a { text-decoration: none; color: var(--texte-2); display: inline-flex; align-items: center; min-height: 44px; }
.pied-liens a:hover { color: var(--violet); text-decoration: underline; }
/* Les guides (23 octobre 2026) : une ligne de liens sous le pied, sur la vitrine et les guides. */
.pied-guides { max-width: 1248px; margin: 0 auto; padding: 0 24px 24px; display: flex; align-items: center; gap: 4px 18px; flex-wrap: wrap; font-size: 14px; color: var(--texte-2); }
.pied-guides-titre { font-weight: 700; color: var(--noir); }
.pied-guides ul { display: flex; gap: 0 18px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.pied-guides a { text-decoration: none; color: var(--texte-2); display: inline-flex; align-items: center; min-height: 44px; }
.pied-guides a:hover { color: var(--violet); text-decoration: underline; }
.pied--vitrine .pied-dedans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; gap: 24px 40px; padding: 40px 24px 32px; }
.pied--vitrine .pied-marque { flex-wrap: wrap; min-height: 44px; }
.pied--vitrine .pied-liens { display: grid; grid-template-rows: repeat(5, auto); grid-auto-flow: column; gap: 0 32px; }
.pied--vitrine .pied-guides { display: block; max-width: none; margin: 0; padding: 0; }
.pied--vitrine .pied-guides-titre { display: flex; align-items: center; min-height: 44px; }
.pied--vitrine .pied-guides ul { flex-direction: column; }

.barre-mobile { display: none; }
.d-seul { }

/* === 6. Téléphone (≤ 900 px) === */
@media (max-width: 900px) {
  html { scroll-padding-top: 84px; }
  .m-cache { display: none !important; }
  .d-seul { display: none !important; }
  .annonce { font-size: 12.5px; padding: 10px 14px; }
  .annonce-d { display: none; }
  .annonce-m { display: inline; }
  .btn-entete, .nav-liens { display: none !important; }
  .connexion-m { display: inline-flex; align-items: center; }
  .entete { padding: 12px 24px; }
  .t-h2 { font-size: 34px; }
  .t-cta { font-size: 32px; }
  .titre-section { margin: 12px 0 28px; }
  .grille-formules { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 22px; }
  .formule { grid-row: auto; display: flex; flex-direction: column; gap: 20px; padding: 26px 24px; border-radius: 24px; }
  .formule-badge { left: 24px; }
  .bascule { margin-bottom: 28px; }
  .bascule-choix { padding: 10px 13px; font-size: 14px; }
  .reassurance { flex-direction: column; align-items: flex-start; width: fit-content; max-width: 100%; margin: 16px auto 0; gap: 8px; font-size: 13.5px; text-align: left; }
  .reassurance li { align-items: flex-start; }

  .faq { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .faq-question { padding: 18px 20px; font-size: 16px; }
  .faq-reponse { padding: 0 20px 18px; }

  .parents-section { padding-top: 48px; }
  .bandeau-parents { padding: 22px; border-radius: 24px; }
  .bandeau-parents-action { align-items: stretch; width: 100%; }
  .cta-parent { display: block; width: 100%; }

  .final-section { padding: 48px 16px 56px; }
  .cta-final-bloc { padding: 44px 10px; border-radius: 28px; }
  .cta-final { display: block; width: 100%; font-size: 15.5px; padding: 18px 10px; white-space: nowrap; }

  .pied--vitrine .pied-dedans { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 32px 24px; }
  .pied--vitrine .pied-liens { grid-template-rows: repeat(5, auto); gap: 0 20px; }
  .pied--vitrine .pied-guides ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
  /* e2e du 25 octobre 2026 : les colonnes du pied se décalaient (un lien sur deux lignes était
     centré, son voisin aussi). Tout part du haut de sa case : les lignes s'alignent. */
  .pied--vitrine .pied-liens, .pied--vitrine .pied-guides ul { align-items: start; }
  .pied--vitrine .pied-liens a, .pied--vitrine .pied-guides a { align-items: flex-start; padding: 11px 0; min-height: 44px; box-sizing: border-box; line-height: 1.35; }

  /* La barre fixe : visible pendant le défilement, sauf sur le haut de page et l'appel final. */
  .racine { --hauteur-barre: 84px; }
  .barre-mobile { display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 40; justify-content: center; transform: translateY(140%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
  .barre-mobile.barre--visible { transform: translateY(0); visibility: visible; transition: transform .25s ease, visibility 0s; }
  .barre-mobile .btn { display: block; width: 100%; font-size: 17px; border-radius: 14px; padding: 16px; min-height: 56px; box-shadow: 0 12px 28px rgba(22, 22, 26, 0.3); white-space: nowrap; }
}
@keyframes rail-v { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* Parcours final (20 octobre 2026) : « Commencer avec mon prochain cours ›› » sortait de son bouton
   sur iPhone — de 15 px dans la barre fixe à 390 px (les « ›› » collés au bord), et hors de l'écran
   à 375 px (barre fixe ; héros et milieu : 11 px). La police descend juste assez pour tenir. */
@media (max-width: 413px) {
  .barre-mobile .btn { font-size: 16px; padding: 16px 12px; }
  .cta-final { font-size: 15px; }
}
@media (max-width: 389px) {
  .cta-final { font-size: 14px; }
  .barre-mobile .btn { font-size: 15px; }
}
@media (max-width: 374px) {
  .barre-mobile .btn, .cta-final { white-space: normal; }
}

/* === 7. Réduire les animations === */
@media (prefers-reduced-motion: reduce) {
  .chevrons, .voyant, .flotte-tel, .flotte-doux, .flotte-doux-2, .barre-onde, .l1, .l2, .l3, .pulse-violet, .pulse-vert, .opt--bonne { animation: none !important; }
  .js .surligne:not(.vu), .js .surligne.vu { background-size: 100% 34%; animation: none !important; }
  .vu .remplir, .remplir.vu { animation: none !important; }
  .barre-mobile, .barre-mobile.barre--visible, .btn { transition: none !important; }
  .btn .chevrons, .btn:hover .chevrons { transform: none; }
}

/* ===== Programme créateurs (17 octobre 2026) ===== */
/* « [Prénom] t'envoie SkipTheNotes ›› … » : le bandeau fin, fond lavande, à la place de celui de
   l'offre fondateur quand le lien de la visite est celui d'un créateur actif. */
.annonce--createur { background: var(--surligne); color: var(--noir); }
.annonce--createur:hover { color: var(--noir); }
.annonce--createur b { font-weight: 800; }
.annonce--createur .chevrons { color: var(--violet); }
/* Le cadeau du code, sous le prix d'une carte annuelle : jamais un autre prix. */
.formule-cadeau { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; font-weight: 700; color: var(--violet); }
.formule--sombre .formule-cadeau { color: var(--surligne); }

/* === UX LOT 1 (27 octobre 2026) — audit n° 12 : Essentiel, Intensif, puis le Gratuit replié === */
.grille-formules--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 840px; }
.formule-gratuite {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  max-width: 840px; margin: 18px auto 0; padding: 18px 22px; text-align: left;
  border: 1px solid var(--bordure); border-radius: 20px; background: transparent;
}
.formule-gratuite-texte { margin: 0; font-size: 15px; line-height: 1.5; color: var(--texte-nav); }
.formule-gratuite-bouton { flex-shrink: 0; font-size: 15px; border-radius: 14px; padding: 12px 18px; min-height: 48px; }
@media (max-width: 900px) {
  .grille-formules--deux { grid-template-columns: minmax(0, 1fr); }
  .formule-gratuite { flex-direction: column; align-items: stretch; gap: 12px; padding: 18px; }
  .formule-gratuite-bouton { text-align: center; }
}
/* === fin UX LOT 1 n° 12 === */

/* ==========================================================================
   VITRINE V3 (29 octobre 2026)
   Le haut de page refait (le vrai moment SkipTheNotes, en boucle douce), « Comment ça marche »
   (3 étapes, 3 morceaux d'écran), « Réviser sans t'ennuyer » (les 3 modes), la science resserrée.
   Une seule audace : la maquette du haut. Autour, du calme : des filets fins, beaucoup d'air, des
   titres alignés à gauche, un seul bloc noir (l'appel final) en plus de l'Essentiel et de l'écran
   « Vrai ou faux » (sombre dans l'app). Tout est scopé sous .page-vitrine : les pages créateurs,
   guides et juridiques gardent leurs règles.
   ========================================================================== */
.page-vitrine { --courbe: cubic-bezier(.2, .7, .2, 1); --ressort: cubic-bezier(.34, 1.45, .55, 1); --gris-ligne: #EAE4D7; --ombre-carte: 0 1px 0 rgba(22, 22, 26, 0.03), 0 24px 48px -20px rgba(22, 22, 26, 0.16); }

/* --- En-tête : plus fin --------------------------------------------------- */
.page-vitrine .entete { padding: 12px 24px; }
.page-vitrine .logo-marque { width: 36px; height: 36px; border-radius: 9px; }
.page-vitrine .logo-texte { font-size: 19px; }
.page-vitrine .nav { gap: 22px; font-size: 14.5px; }
.page-vitrine .nav-liens { gap: 24px; }
.page-vitrine .nav-liens a { color: var(--texte-2); }
.page-vitrine .connexion-m { font-size: 14px; padding: 10px 14px; border-width: 1px; }
.page-vitrine .btn-entete { font-size: 14.5px; padding: 11px 16px; }

/* --- Rythme commun ------------------------------------------------------- */
.page-vitrine .section { padding: 128px 24px 0; }
.tete { max-width: 760px; margin: 0 0 44px; }
.page-vitrine .insecable { white-space: nowrap; }
.page-vitrine .t-h2 { font-size: 48px; line-height: 1.04; letter-spacing: -0.045em; }
.tete-ligne { margin-top: 16px; max-width: 34em; font-size: 18px; line-height: 1.55; color: var(--texte-2); font-weight: 500; }

/* --- Le haut de page ----------------------------------------------------- */
.hero { max-width: 1248px; margin: 0 auto; padding: 64px 24px 16px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: 64px; align-items: center; }
.t-h1 { margin: 0; font-size: 84px; line-height: 0.94; font-weight: 800; letter-spacing: -0.058em; }
.t-h1 .surligne { padding: 0 8px 0 0; white-space: nowrap; }
.t-sub { margin: 28px 0 0; max-width: 25em; font-size: 19px; line-height: 1.5; color: var(--texte-2); font-weight: 500; }
.vacances-ligne { margin: 14px 0 0; max-width: 470px; font-size: 16px; line-height: 1.45; font-weight: 700; color: var(--violet); }
.hero-actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }
.cta-hero { font-size: 17px; border-radius: 14px; padding: 18px 28px; min-height: 58px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 14px 30px -10px rgba(22, 22, 26, 0.45); }
.cta-pdf-vacances { font-size: 17px; border-radius: 14px; padding: 17px 24px; min-height: 58px; border: 1.5px solid var(--noir); }
.garanties { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 14px; font-weight: 500; color: var(--texte-2); }
.garanties li { display: inline-flex; align-items: center; gap: 6px; }
.liens-hero { margin-top: 18px; font-size: 14px; }
.liens-hero a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--noir); font-weight: 600; text-decoration: none; }
.liens-hero .lien-texte { text-decoration: underline; text-decoration-color: var(--bordure-2); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.liens-hero a:hover { color: var(--violet); }
.liens-hero a:hover .lien-texte { text-decoration-color: currentColor; }
/* Hero v4/v5 : le sous-titre est une seule phrase (plus deux lignes forcées). */

/* La maquette du haut de page : voir le bloc « Hero v5 » en fin de fichier. */

/* --- Comment ça marche : un seul panneau, trois colonnes séparées par un filet --- */
.etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--blanc); border: 1px solid var(--bordure); border-radius: 30px; overflow: hidden; }
.etape { display: flex; flex-direction: column; padding: 14px 14px 30px; }
.etape + .etape { border-left: 1px solid var(--bordure); }
.etape-visuel { position: relative; height: 260px; border-radius: 20px; background: var(--creme); display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 22px; overflow: hidden; }
.etape-tete { display: flex; align-items: center; gap: 12px; margin: 26px 14px 0; }
.etape-num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--noir); color: var(--creme); font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.etape-nom { font-size: 21px; font-weight: 800; letter-spacing: -0.03em; }
.etape-texte { margin: 8px 14px 0 52px; font-size: 15.5px; line-height: 1.5; color: var(--texte-2); }
.etape-texte .lien-fort { display: inline-flex; min-height: 44px; margin: -11px 0; padding: 0 2px; font-size: 15px; vertical-align: baseline; }
.lien-fort { font-weight: 600; color: var(--noir); display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }

/* ① L'enregistrement : le chrono, « Important », « J'ai décroché », le résumé. */
.v-enr { background: var(--blanc); border: 1px solid var(--bordure); border-radius: 16px; padding: 14px 16px; box-shadow: var(--ombre-carte); }
.v-enr-haut { display: flex; align-items: center; gap: 10px; }
.v-enr-haut b { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.v-enr-etat { margin-left: auto; font-size: 12px; color: var(--texte-3); }
.v-enr-boutons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.v-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 12px; border-radius: 11px; border: 1.5px solid transparent; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.v-btn--important { background: var(--violet-pale); color: var(--violet); }
.v-btn--decroche { background: #E4DCCB; color: var(--noir); }
.v-btn--noir { background: var(--noir); color: var(--creme); }
.v-btn--revoir { background: var(--blanc); border-color: var(--bordure); color: var(--rouge-fonce); }
.v-resume { margin-left: 26px; background: var(--blanc); border: 1px solid var(--bordure); border-radius: 14px; padding: 12px 14px; box-shadow: var(--ombre-carte); }
.v-resume-titre { font-size: 11.5px; font-weight: 700; color: var(--violet); }
.v-resume-texte { margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--texte-4); }
@keyframes appui { 0%, 66% { transform: none; } 70% { transform: scale(0.94); } 76%, 100% { transform: none; } }
@keyframes resume { 0%, 56% { opacity: 1; transform: none; } 62%, 72% { opacity: 0; transform: translateY(10px); } 82%, 100% { opacity: 1; transform: none; } }
.etapes.vu .v-btn--decroche { animation: appui 6s ease-out infinite; }
.etapes.vu .v-resume { animation: resume 6s var(--courbe) infinite; }

/* ② La carte mentale qui se construit sur la fiche (waouh.js), en petit. */
.etape-visuel--carte { padding: 0; background-color: var(--creme); background-image: radial-gradient(rgba(22, 22, 26, 0.09) 1px, transparent 1.5px); background-size: 14px 14px; }
.v-carte { position: absolute; inset: 0; }
.v-carte-liens { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.v-carte-liens path { fill: none; stroke: var(--violet-doux); stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.v-noeud { position: absolute; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; background: var(--blanc); border: 1px solid var(--bordure); border-radius: 12px; padding: 8px 10px; font-size: 11px; box-shadow: var(--ombre-carte); }
.v-noeud b { width: 100%; font-size: 12.5px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.v-noeud--1 { left: 5%; top: 13%; width: 42%; padding-top: 16px; border-color: var(--violet); background: var(--violet-pale); }
.v-noeud--2 { right: 5%; top: 9%; width: 42%; }
.v-noeud--3 { left: 50%; bottom: 7%; transform: translateX(-50%); white-space: nowrap; }
.v-cle { background: var(--surligne); border-radius: 6px; padding: 1px 6px; font-size: 11px; font-weight: 600; }
.v-centre { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -38%); background: var(--noir); color: var(--creme); border-radius: 14px; padding: 9px 14px; text-align: center; font-size: 13px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; white-space: nowrap; box-shadow: 0 14px 28px -12px rgba(22, 22, 26, 0.5); }
.v-centre span { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0; color: var(--surligne); }
.v-partiel { position: absolute; left: 6px; top: -12px; display: inline-flex; align-items: center; gap: 4px; background: var(--violet); color: var(--blanc); border-radius: 7px; padding: 2px 8px; font-size: 10.5px; font-weight: 700; white-space: nowrap; transform: rotate(-3deg); }
.v-partiel--grand { position: static; transform: none; background: var(--violet-pale); color: var(--violet); font-size: 12px; padding: 3px 10px; }
@keyframes carte-trait { 0% { stroke-dashoffset: 1; } 22%, 100% { stroke-dashoffset: 0; } }
@keyframes carte-noeud { 0%, 8% { opacity: 0; transform: translateY(8px) scale(0.92); } 18%, 100% { opacity: 1; transform: none; } }
@keyframes carte-noeud-centre { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.9); } 8%, 100% { opacity: 1; transform: translate(-50%, -38%); } }
@keyframes carte-noeud-bas { 0%, 14% { opacity: 0; transform: translate(-50%, 8px); } 24%, 100% { opacity: 1; transform: translateX(-50%); } }
@keyframes carte-badge { 0%, 30% { opacity: 0; transform: translateY(-10px) rotate(-3deg) scale(0.8); } 36% { opacity: 1; transform: translateY(1px) rotate(-3deg) scale(1.06); } 40%, 100% { opacity: 1; transform: rotate(-3deg); } }
.etapes.vu .v-carte-liens path { stroke-dasharray: 1; animation: carte-trait 9s var(--courbe) infinite; }
.etapes.vu .v-centre { animation: carte-noeud-centre 9s var(--courbe) infinite; }
.etapes.vu .v-noeud--1, .etapes.vu .v-noeud--2 { animation: carte-noeud 9s var(--courbe) infinite; }
.etapes.vu .v-noeud--2 { animation-delay: 0.25s; }
.etapes.vu .v-noeud--3 { animation: carte-noeud-bas 9s var(--courbe) infinite; }
.etapes.vu .v-noeud--1 .v-partiel { animation: carte-badge 9s var(--courbe) infinite; }

/* ③ La flashcard qui se retourne. */
.v-jeu { perspective: 900px; }
.v-jeu-tourne { position: relative; height: 128px; transform-style: preserve-3d; }
.v-jeu-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 14px 18px; background: var(--blanc); border: 1px solid var(--bordure); border-top: 4px solid var(--violet); border-radius: 16px; box-shadow: var(--ombre-carte); }
.v-jeu-face--verso { background: var(--noir); color: var(--creme); border-color: var(--noir); border-top-color: var(--violet); transform: rotateY(180deg); }
.v-jeu-matiere { font-size: 11px; font-weight: 700; color: var(--violet); }
.v-jeu-face--verso .v-jeu-matiere { color: var(--surligne); }
.v-jeu-texte { font-size: 15.5px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.v-jeu-boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@keyframes retourner { 0%, 40% { transform: rotateY(0); } 48%, 90% { transform: rotateY(180deg); } 98%, 100% { transform: rotateY(360deg); } }
.etapes.vu .v-jeu-tourne { animation: retourner 6s cubic-bezier(.4, .1, .2, 1) infinite; }

/* Les imports, en une ligne d'icônes. */
.imports { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; padding: 14px 16px 14px 24px; border: 1px solid var(--bordure); border-radius: 22px; }
.imports-titre { font-size: 15px; font-weight: 700; }
.imports-liste { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.imports-liste li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 7px 10px; border-radius: 999px; background: var(--blanc); border: 1px solid var(--bordure); font-size: 13.5px; font-weight: 600; color: var(--texte-nav); }
.imports-liste svg { color: var(--violet); flex: none; }
.imports .lien-fort { margin-left: auto; font-size: 15px; padding: 0 8px; }

/* --- Réviser sans t'ennuyer : trois écrans de l'app --------------------- */
.modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.mode-ecran { position: relative; min-height: 330px; border-radius: 24px; padding: 18px; overflow: hidden; display: flex; flex-direction: column; }
.mode-nom { margin-top: 20px; font-size: 21px; font-weight: 800; letter-spacing: -0.03em; }
.mode-texte { margin-top: 6px; font-size: 15.5px; line-height: 1.5; color: var(--texte-2); }

/* Vrai ou faux : sombre, le chrono en anneau, la carte qui part à droite. */
.mode-ecran--vf { background: var(--noir); color: var(--creme); }
.vf-haut { display: flex; justify-content: space-between; align-items: center; }
.vf-anneau { position: relative; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; }
.vf-anneau svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.vf-anneau-fond { fill: none; stroke: rgba(245, 241, 232, 0.14); stroke-width: 4; }
.vf-anneau-trait { fill: none; stroke: var(--surligne); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 107; stroke-dashoffset: 5; }
.vf-anneau b { position: relative; font-size: 15px; font-weight: 800; }
.vf-score { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; background: rgba(245, 241, 232, 0.1); font-size: 13px; font-weight: 800; }
.vf-score svg { color: #7FD1AE; }
.vf-pile { position: relative; flex: 1; margin: 16px 0; }
.vf-carte { position: absolute; inset: 0; background: var(--creme); color: var(--noir); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.vf-carte--dessous { transform: translateY(8px) scale(0.94); opacity: 0.4; }
.vf-matiere { position: absolute; top: 14px; left: 16px; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--texte-3); }
.vf-matiere i { width: 7px; height: 7px; border-radius: 50%; background: var(--violet); }
.vf-carte p { font-size: 17px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.25; }
.vf-k { background-image: linear-gradient(var(--surligne), var(--surligne)); background-repeat: no-repeat; background-position: 0 88%; background-size: 100% 40%; }
.vf-boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vf-btn { display: flex; align-items: center; justify-content: center; height: 42px; border-radius: 12px; font-size: 14px; font-weight: 800; }
.vf-btn--faux { border: 1.5px solid rgba(245, 241, 232, 0.24); color: var(--creme); }
.vf-btn--vrai { background: var(--creme); color: var(--noir); }
@keyframes vf-part { 0%, 46% { transform: none; opacity: 1; } 58% { transform: translateX(120%) rotate(14deg); opacity: 0; } 59%, 66% { transform: translateY(8px) scale(0.94); opacity: 0; } 78%, 100% { transform: none; opacity: 1; } }
@keyframes vf-vrai { 0%, 40%, 56%, 100% { box-shadow: none; } 46% { box-shadow: 0 0 0 4px rgba(127, 209, 174, 0.55); } }
@keyframes vf-temps { from { stroke-dashoffset: 5; } to { stroke-dashoffset: 40; } }
.modes.vu .mode-ecran--vf .vf-carte:not(.vf-carte--dessous) { animation: vf-part 4.6s var(--courbe) infinite; }
.modes.vu .vf-btn--vrai { animation: vf-vrai 4.6s ease-out infinite; }
.modes.vu .vf-anneau-trait { animation: vf-temps 24s linear infinite; }

/* Veille de partiel : ce que le prof a répété, en texte à trous. */
.mode-ecran--prof, .mode-ecran--defi { background: var(--fond-clair); border: 1px solid var(--bordure); }
.prof-haut, .defi-haut { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; }
.prof-haut b, .defi-haut b { font-weight: 800; }
.prof-haut span, .defi-haut span { padding: 3px 9px; border-radius: 999px; border: 1px solid var(--bordure); background: var(--blanc); font-size: 12px; font-weight: 700; }
.prof-jauge { height: 4px; margin: 12px 0 16px; border-radius: 2px; background: var(--beige); overflow: hidden; }
.prof-jauge i { display: block; width: 25%; height: 100%; border-radius: inherit; background: var(--violet); }
.prof-jauge--defi i { width: 50%; }
.prof-carte { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 14px; background: var(--blanc); border: 1px solid var(--bordure); border-top: 4px solid #B8902A; border-radius: 18px; padding: 18px; }
.prof-carte p { font-size: 17px; font-weight: 600; line-height: 1.45; letter-spacing: -0.015em; }
.prof-pied { margin-top: auto; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--texte-3); }
.prof-pied span { display: inline-flex; align-items: center; gap: 6px; }
.prof-pied i { width: 7px; height: 7px; border-radius: 50%; background: #B8902A; }
.prof-pied b { color: var(--violet); font-weight: 700; }
.prof-trou { display: inline-block; position: relative; border-radius: 6px; background: var(--violet-pale); box-shadow: inset 0 -2px 0 var(--violet); padding: 0 4px; }
.prof-trou-mot { color: var(--noir); font-weight: 700; }
@keyframes trou { 0%, 54% { opacity: 1; } 60%, 74% { opacity: 0; } 82%, 100% { opacity: 1; } }
.modes.vu .prof-trou-mot { animation: trou 5s ease-out infinite; }

/* Défie ton binôme : l'écran du pote — la question se joue ici. */
.mode-ecran--defi .quiz { display: flex; flex-direction: column; gap: 8px; }
.quiz-question { font-size: 15.5px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; margin-bottom: 4px; }
.quiz-choix { display: flex; flex-direction: column; gap: 7px; }
.opt { text-align: left; width: 100%; border-radius: 12px; padding: 10px 12px; min-height: 44px; font-size: 13px; font-weight: 600; line-height: 1.35; cursor: pointer; background: var(--blanc); border: 1.5px solid var(--bordure); color: var(--noir); transition: background-color .2s, border-color .2s; }
.opt:hover:not([aria-disabled="true"]) { border-color: var(--noir); }
.opt--bonne { background: var(--vert-pale); border-color: var(--vert); color: var(--vert-fonce); animation: pulse-vert 2.4s ease-out 1; }
.opt--faux { background: var(--rouge-pale); border-color: var(--rouge); color: var(--rouge-fonce); }
.opt--ecartee { border-color: var(--beige); color: var(--gris-ecarte); }
.opt[aria-disabled="true"] { cursor: default; }
.explication { font-size: 12.5px; line-height: 1.45; border-radius: 10px; padding: 9px 11px; }
.explication--ok { color: var(--vert-fonce); background: var(--vert-pale); }
.explication--ko { color: var(--texte-lecture); background: var(--blanc); border: 1px solid var(--bordure); }

.milieu { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 56px; }
.cta-milieu { font-size: 17px; border-radius: 14px; padding: 18px 28px; min-height: 58px; box-shadow: 0 14px 30px -10px rgba(22, 22, 26, 0.45); }
.cta-sous { font-size: 14px; color: var(--texte-2); text-align: center; }

/* --- Ce que dit la science, resserrée ---------------------------------- */
.science { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px 56px; align-items: center; }
.science-courbe { margin: 0; background: var(--blanc); border: 1px solid var(--bordure); border-radius: 28px; padding: 32px 36px 28px; }
.science-schema { display: block; width: 100%; height: auto; overflow: visible; }
.science-axe { fill: none; stroke: var(--bordure-2); stroke-width: 1.6; stroke-linecap: round; }
.science-axe-texte { font-family: inherit; font-size: 8.5px; font-weight: 500; fill: var(--texte-3); }
.science-oubli { fill: none; stroke: var(--gris-clair); stroke-width: 2.2; stroke-dasharray: 7 7; stroke-linecap: round; }
.science-espace { fill: none; stroke: var(--violet); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 760; stroke-dashoffset: 0; }
.science-point { fill: var(--blanc); stroke: var(--violet); stroke-width: 2; }
.science-legende { font-family: inherit; font-size: 9.5px; font-weight: 700; }
.science-legende--oubli { fill: var(--texte-3); }
.science-legende--espace { fill: var(--violet); }
.science-liste { list-style: none; margin: 0; padding: 0; }
.science-liste li { padding: 18px 0; border-top: 1px solid var(--bordure); }
.science-liste li:first-child { border-top: 0; padding-top: 0; }
.science-titre { font-size: 21px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; }
.science-ref { margin-top: 4px; font-size: 13.5px; color: var(--texte-3); }
.science-liste .science-app { margin-top: 6px; padding: 14px 18px; border: 0; border-radius: 16px; background: var(--violet-pale); font-size: 15px; line-height: 1.5; color: var(--texte-nav); }
.science-app b { color: var(--violet); }
.js .science:not(.vu) .science-espace { stroke-dashoffset: 760; }
.js .science.vu .science-espace { transition: stroke-dashoffset 1.6s cubic-bezier(.2, .7, .2, 1) .2s; }
.js .science:not(.vu) .science-point { opacity: 0; }
.js .science.vu .science-point { transition: opacity .3s ease-out 1.2s; }

/* --- Formules, parents, questions : le même alignement à gauche pour les titres -- */
.page-vitrine .formules-section .titre-section { margin: 0 0 40px; }
.page-vitrine .parents-section { padding-top: 72px; }
.page-vitrine .bandeau-parents { max-width: none; border-radius: 24px; padding: 24px 28px; }
.page-vitrine .bandeau-parents-texte p { max-width: 40em; }
.page-vitrine .faq { max-width: none; }

/* --- 901 à 1219 px ------------------------------------------------------ */
@media (min-width: 901px) and (max-width: 1219px) {
  .page-vitrine .nav-liens a[href="#reviser"] { display: none; }
  .hero-grid { gap: 40px; }
  .t-h1 { font-size: 64px; }
  .t-sub { font-size: 17.5px; }
  .etape-visuel { height: 240px; padding: 16px; }
  .v-btn { padding: 8px 9px; font-size: 12px; }
  .modes { gap: 16px; }
  .mode-ecran { min-height: 340px; }
}

/* --- Téléphone (≤ 900 px) ----------------------------------------------- */
@media (max-width: 900px) {
  .page-vitrine .entete { padding: 10px 16px; }
  .page-vitrine .logo-marque { width: 34px; height: 34px; }
  .page-vitrine .logo-texte { font-size: 18px; }
  .page-vitrine .connexion-m { min-height: 44px; }
  .page-vitrine .section { padding: 88px 20px 0; }
  .tete { margin-bottom: 28px; }
  .page-vitrine .t-h2 { font-size: 34px; line-height: 1.06; }
  .tete-ligne { margin-top: 12px; font-size: 16px; }

  .hero { padding: 22px 20px 8px; }
  .hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hero-texte { display: contents; }
  .t-h1 { order: 0; font-size: 46px; line-height: 0.96; letter-spacing: -0.055em; }
  .t-sub { order: 1; margin-top: 14px; font-size: 16px; line-height: 1.45; }
  .vacances-ligne { order: 2; font-size: 15px; }
  .hero-actions { order: 3; margin-top: 20px; flex-direction: column; gap: 10px; }
  .cta-hero, .cta-pdf-vacances { display: block; width: 100%; text-align: center; font-size: 16px; padding: 17px 10px; min-height: 56px; white-space: nowrap; }
  .garanties { order: 4; margin-top: 10px; justify-content: center; gap: 4px 14px; font-size: 13px; }
  .hero-visuel { order: 5; margin-top: 18px; }
  .liens-hero { order: 6; margin-top: 8px; text-align: center; }


  .etapes { grid-template-columns: minmax(0, 1fr); border-radius: 26px; }
  .etape { padding: 10px 10px 24px; }
  .etape + .etape { border-left: 0; border-top: 1px solid var(--bordure); }
  .etape-visuel { height: auto; min-height: 204px; padding: 16px; border-radius: 18px; }
  .etape-visuel--carte { height: 236px; }
  .v-noeud { padding: 7px 9px; }
  .v-noeud--1 { top: 10%; padding-top: 14px; }
  .v-noeud--2 { top: 7%; }
  .v-centre { top: 56%; }
  .etape-tete { margin: 20px 10px 0; }
  .etape-nom { font-size: 20px; }
  .etape-texte { margin: 6px 10px 0 48px; font-size: 15px; }
  .imports { padding: 16px 16px 8px; gap: 10px; }
  .imports-titre { width: 100%; }
  .imports-liste { gap: 6px; }
  .imports-liste li { padding: 5px 10px 5px 8px; font-size: 12.5px; gap: 5px; }
  .imports-liste svg { width: 15px; height: 15px; }
  .imports .lien-fort { margin-left: 0; padding: 0; }

  .modes { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .mode-ecran { min-height: 268px; border-radius: 22px; }
  .mode-nom { margin-top: 16px; font-size: 20px; }
  .milieu { margin-top: 44px; }
  .cta-milieu { display: block; width: 100%; text-align: center; font-size: 16px; padding: 17px 10px; white-space: nowrap; }

  .science { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .science-courbe { padding: 22px 18px 18px; border-radius: 22px; }
  .science-axe-texte { font-size: 11px; }
  .science-legende { font-size: 12.5px; }
  .science-titre { font-size: 19px; }
  .science-liste li { padding: 14px 0; }

  .page-vitrine .parents-section { padding-top: 56px; }
  .page-vitrine .bandeau-parents { padding: 22px 20px; }
}
@media (max-width: 389px) {
  .t-h1 { font-size: 42px; }
  .cta-hero, .cta-milieu, .cta-pdf-vacances { font-size: 15px; }
  .imports-liste li { font-size: 13px; }
}
@media (max-width: 374px) {
  .t-h1 { font-size: 40px; }
  .v-btn { padding: 8px 8px; font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .mq-voyant, .mq-onde i, .etapes.vu .v-btn--decroche, .etapes.vu .v-resume, .etapes.vu .v-carte-liens path, .etapes.vu .v-centre,
  .etapes.vu .v-noeud--1, .etapes.vu .v-noeud--2, .etapes.vu .v-noeud--3, .etapes.vu .v-noeud--1 .v-partiel, .etapes.vu .v-jeu-tourne,
  .modes.vu .mode-ecran--vf .vf-carte, .modes.vu .vf-btn--vrai, .modes.vu .vf-anneau-trait, .modes.vu .prof-trou-mot, .opt--bonne { animation: none !important; }
  .mq *, .mq *::before { transition: none !important; }
  .js .science:not(.vu) .science-espace, .js .science .science-espace { stroke-dashoffset: 0; transition: none; }
  .js .science:not(.vu) .science-point, .js .science .science-point { opacity: 1; transition: none; }
}
/* === fin VITRINE V3 === */

/* ===== Corrections vitrine — revue indépendante (29 octobre 2026) ===== */
/* Couleurs de sens (décision de l'équipe) : violet = « Le prof a insisté » / important ; framboise =
   l'enregistrement et « À revoir » seulement. Plus de moutarde, d'olive ni de vert en pastille. */
.page-vitrine { --framboise: #B42358; --framboise-bord: #F2C4D4; }
.v-btn--revoir { color: var(--framboise); border-color: var(--framboise-bord); }
.prof-carte { border-top-color: var(--violet); }
.prof-pied i { background: var(--violet); }
.vf-score svg { color: var(--surligne); }
@keyframes vf-vrai { 0%, 40%, 56%, 100% { box-shadow: none; } 46% { box-shadow: 0 0 0 4px rgba(217, 200, 251, 0.6); } }

/* Réviser : le nom et la ligne de chaque mode au-dessus de sa démo ; sur ordinateur, les trois
   démos partent de la même ligne même si une ligne de texte passe à la ligne (sous-grille). */
.modes { grid-template-rows: auto auto 1fr; row-gap: 0; }
.mode-v { grid-row: span 3; display: grid; grid-template-rows: subgrid; }
.mode-nom { margin-top: 0; }
.mode-texte { margin-top: 4px; }
.mode-v .mode-ecran { margin-top: 18px; }

/* Formules : « Mensuel | Annuel » sur une ligne, l'économie en euros dans une petite pastille. */
.bascule { flex-wrap: nowrap; max-width: 100%; }
.bascule-choix { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.bascule-eco { display: inline-block; padding: 3px 8px; border-radius: 999px; background: var(--violet-pale); color: var(--violet); font-size: 12px; font-weight: 700; line-height: 1.35; letter-spacing: 0; }
.bascule-choix[aria-pressed="true"] .bascule-eco { background: var(--surligne); color: var(--noir); }
/* La résiliation, une seule fois : la première coche sous les cartes (la phrase du rythme choisi). */
.reassurance .formule-garantie { margin: 0; font-size: inherit; color: inherit; }
/* Sur ordinateur, les 4 coches en 2 × 2 sous les cartes (plus de coche orpheline sur une 2e ligne). */
@media (min-width: 901px) {
  .reassurance { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; gap: 8px 36px; margin: 14px auto 0; text-align: left; }
}
@media (max-width: 900px) {
  .bascule-choix { padding: 10px 11px; gap: 6px; }
  .bascule-eco { padding: 2px 7px; font-size: 11.5px; }
  .modes { grid-template-rows: none; row-gap: 40px; }
  .mode-v { grid-row: auto; display: block; }
  .mode-v .mode-ecran { margin-top: 14px; }
}
@media (max-width: 379px) {
  /* Trop étroit pour une ligne : la pastille passe sous « Annuel », dans le même bouton. */
  .bascule-choix { white-space: normal; flex-wrap: wrap; row-gap: 3px; padding: 8px 10px; }
  .bascule-eco { white-space: nowrap; font-size: 11px; padding: 2px 6px; }
}

/* Le pied : chaque colonne a son titre, et toutes les listes partent de la même ligne. */
.pied--vitrine .pied-dedans { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); }
.pied--vitrine .pied-titre, .pied--vitrine .pied-guides-titre { display: flex; align-items: center; min-height: 44px; margin: 0; font-size: 14px; font-weight: 700; color: var(--noir); }
.pied-infos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
.pied--vitrine .pied-liens { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); grid-auto-flow: column; gap: 0 32px; }
.pied--vitrine .pied-liens a { overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .pied--vitrine .pied-dedans { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  /* La 1re colonne un peu plus large : l'adresse de contact tient sur une ligne à 390 px. Les
     guides reprennent les mêmes colonnes (alignées sur celles du dessus). */
  .pied-infos, .pied--vitrine .pied-liens, .pied--vitrine .pied-guides ul { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: 16px; }
}
/* ===== fin Corrections vitrine (29 octobre 2026) ===== */

/* ===== Hero v5 (29 octobre 2026) ===== */
/* Le haut de page dit tout l'outil en trois temps (pendant le cours, à la sortie, jusqu'au
   partiel). Une seule audace : la scène en 3D. Un téléphone générique (aucune marque : coins
   doux, petite caméra ronde, une tranche métal, un bouton latéral) qui montre le VRAI écran
   d'enregistrement de l'app ; autour de lui, à d'autres profondeurs, la fiche qui sort, l'écran
   « Vrai ou faux » de l'app et les imports. Une seule lumière, en haut à gauche : la tranche du
   haut est claire, celle de droite dans l'ombre, les ombres tombent en bas à droite.
   Tout en CSS (perspective, preserve-3d) : la tranche est un empilement de 6 plaques, rien
   d'autre ne bouge que transform et opacity. Les mesures suivent --u (1 px à la taille de
   référence, calculé sur la colonne) : la scène se réduit d'un bloc.
   Les transformations de placement passent par « transform » ; les mouvements (flottement,
   états de la boucle) par les propriétés « translate » et « scale », qui s'y ajoutent. */

/* Le titre attend sa version du test A/B (vitrine.js le libère dès qu'il a tranché, avant le
   premier dessin en pratique) : jamais le titre A qui clignote avant le B. Si le script ne vient
   pas, le titre apparaît quand même au bout d'une seconde. */
@keyframes titre-secours { to { visibility: visible; } }
.js [data-titre]:not(.titre-pret) { visibility: hidden; animation: titre-secours 0s linear 1s forwards; }
/* Le titre court sur deux lignes au surligneur : chaque morceau garde le sien. */
.t-h1 .surligne { white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.t-h1 { font-size: 76px; }

.t-sub.sous-normal { max-width: 24em; text-wrap: balance; }
.t-sub .insecable { white-space: nowrap; }
.hero-visuel { container-type: inline-size; position: relative; z-index: 0; }

/* --- La scène --- */
.mq {
  --u: min(1px, calc(100cqw / 690));
  --bord: calc(var(--u) * 9);
  --chanfrein: calc(var(--u) * 2.5);
  --rayon-tel: calc(var(--u) * 47);
  --rayon-ecran: calc(var(--u) * 35.5);
  --statut: calc(var(--u) * 28);
  --metal: linear-gradient(162deg, #F2EFE8 0%, #C9C4BA 5%, #8C877E 16%, #5B5853 34%, #3B3A3E 62%, #2A292E 100%);
  --metal-clair: linear-gradient(162deg, #FFFFFF 0%, #E2DED6 6%, #ABA69C 18%, #7A766F 38%, #55535A 70%, #3C3B40 100%);
  position: relative; display: block; height: calc(var(--u) * 720);
  font-family: var(--police); color: var(--noir); -webkit-font-smoothing: antialiased;
  perspective: calc(var(--u) * 1900); perspective-origin: 34% 38%;
}
/* Le fond : la lumière qui vient d'en haut à gauche, une lueur lavande derrière le téléphone, et
   la trame pointillée (celle de la carte mentale de l'app) qui s'efface vers les bords. */
.mq::before, .mq::after { content: ''; position: absolute; z-index: -1; pointer-events: none; }
.mq::before {
  /* Chaque lueur tient dans la boîte (rayon < distance au bord) : aucune arête visible. */
  left: calc(var(--u) * -240); top: calc(var(--u) * -160); width: calc(var(--u) * 1180); height: calc(var(--u) * 1040);
  background:
    radial-gradient(calc(var(--u) * 300) calc(var(--u) * 340) at calc(var(--u) * 416) calc(var(--u) * 500), rgba(190, 164, 250, 0.40), rgba(190, 164, 250, 0)),
    radial-gradient(calc(var(--u) * 290) calc(var(--u) * 200) at calc(var(--u) * 300) calc(var(--u) * 200), rgba(255, 253, 248, 0.9), rgba(255, 253, 248, 0)),
    radial-gradient(calc(var(--u) * 260) calc(var(--u) * 200) at calc(var(--u) * 780) calc(var(--u) * 600), rgba(217, 200, 251, 0.26), rgba(217, 200, 251, 0));
}
.mq::after {
  left: calc(var(--u) * -60); top: calc(var(--u) * 0); width: calc(var(--u) * 780); height: calc(var(--u) * 700);
  background: radial-gradient(rgba(22, 22, 26, 0.10) 1px, transparent 1.6px) 0 0 / calc(var(--u) * 20) calc(var(--u) * 20);
  -webkit-mask-image: radial-gradient(ellipse 46% 44% at 46% 48%, #000 20%, transparent 74%); mask-image: radial-gradient(ellipse 46% 44% at 46% 48%, #000 20%, transparent 74%);
}
/* L'ombre de contact, sous le téléphone (il flotte : elle respire avec lui). */
.mq-ombre {
  position: absolute; z-index: -1; left: calc(var(--u) * 52); top: calc(var(--u) * 640); width: calc(var(--u) * 300); height: calc(var(--u) * 44);
  background: radial-gradient(closest-side, rgba(36, 28, 56, 0.34), rgba(36, 28, 56, 0.12) 55%, rgba(36, 28, 56, 0)); pointer-events: none;
}
.mq-monde { position: absolute; inset: 0; transform-style: preserve-3d; }
.mq-pose {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform-origin: calc(var(--u) * 176) calc(var(--u) * 330);
  transform: rotateX(4deg) rotateY(-7deg);
}

/* --- Le téléphone --- */
.mq-tel-flotte {
  position: absolute; left: calc(var(--u) * 24); top: calc(var(--u) * 14); transform-style: preserve-3d;
  transform: rotateY(-8deg) rotateZ(-0.6deg);
}
.mq-tel {
  position: relative; width: calc(var(--u) * 305); padding: var(--bord); transform-style: preserve-3d;
  border: var(--chanfrein) solid transparent; border-radius: var(--rayon-tel);
}
/* La façade : le verre noir, et le chanfrein poli tout autour (clair en haut à gauche). Une plaque
   à part, pas le fond de .mq-tel : Chrome trie mal le fond d'un parent en preserve-3d avec ses
   enfants (le noir disparaissait par endroits pendant le flottement). */
.mq-facade {
  position: absolute; inset: calc(var(--chanfrein) * -1); border-radius: var(--rayon-tel); border: var(--chanfrein) solid transparent;
  background: linear-gradient(var(--noir), var(--noir)) padding-box,
    linear-gradient(140deg, #FBF9F4 0%, #BDB8AE 14%, #6E6B66 34%, #2E2D32 58%, #55534F 82%, #A9A49A 100%) border-box;
  box-shadow: inset 0 0 0 calc(var(--u) * 1) rgba(255, 255, 255, 0.07);
  transform: translateZ(0);
}
/* La tranche : 6 plaques empilées vers l'arrière (assez pour une tranche lisse, peu de calques à
   composer). On en voit le haut (éclairé) et la droite. */
.mq-tranches { position: absolute; inset: calc(var(--chanfrein) * -1); border-radius: var(--rayon-tel); transform-style: preserve-3d; pointer-events: none; }
.mq-tranches i {
  --o: 0; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(rgba(14, 12, 20, var(--o)), rgba(14, 12, 20, var(--o))), var(--metal);
}
.mq-tranches i:nth-child(1) { transform: translateZ(calc(var(--u) * -2.4)); background: linear-gradient(162deg, #FFFFFF 0%, #DAD6CD 8%, #9C978E 22%, #5E5B56 50%, #3E3D41 100%); }
.mq-tranches i:nth-child(2) { transform: translateZ(calc(var(--u) * -7.2)); background: var(--metal-clair); }
.mq-tranches i:nth-child(3) { transform: translateZ(calc(var(--u) * -12)); --o: 0.06; }
.mq-tranches i:nth-child(4) { transform: translateZ(calc(var(--u) * -16.8)); --o: 0.02; }
.mq-tranches i:nth-child(5) { transform: translateZ(calc(var(--u) * -22)); --o: 0.14; }
/* La dernière plaque, le dos : elle porte l'ombre portée (vers le bas à droite). */
.mq-tranches i:nth-child(6) {
  transform: translateZ(calc(var(--u) * -28.6)); --o: 0.3;
  box-shadow: calc(var(--u) * 46) calc(var(--u) * 54) calc(var(--u) * 80) calc(var(--u) * -12) rgba(40, 28, 72, 0.32),
    calc(var(--u) * 14) calc(var(--u) * 18) calc(var(--u) * 26) calc(var(--u) * -8) rgba(22, 22, 26, 0.28);
}
/* Le bouton latéral (côté droit, dans la lumière rasante) : quelques plaques dépassent. */
.mq-tranches i:nth-child(n+2):nth-child(-n+5)::after {
  content: ''; position: absolute; right: calc(var(--u) * -2.6); top: 27%; width: calc(var(--u) * 4); height: calc(var(--u) * 74);
  border-radius: calc(var(--u) * 3); background: linear-gradient(180deg, #A7A299, #57554F 40%, #36353A);
}
.mq-ecran {
  position: relative; overflow: hidden; border-radius: var(--rayon-ecran); background: var(--creme);
  transform: translateZ(calc(var(--u) * 0.8));
}
/* La barre d'état : l'heure, la caméra (un simple rond), le réseau, la batterie. */
.mq-statut {
  position: relative; display: flex; align-items: center; justify-content: space-between; height: var(--statut);
  padding: calc(var(--u) * 4) calc(var(--u) * 20) 0 calc(var(--u) * 26); font-size: calc(var(--u) * 12.5); font-weight: 700; letter-spacing: -0.01em; color: var(--noir);
  transition: color 0.4s ease-out, background-color 0.4s ease-out;
}
.mq-camera {
  position: absolute; left: 50%; top: calc(var(--u) * 9); width: calc(var(--u) * 13); height: calc(var(--u) * 13); margin-left: calc(var(--u) * -6.5);
  border-radius: 50%; background: radial-gradient(circle at 36% 34%, #4A4A58 0 12%, #121216 30%, #050507 70%); box-shadow: 0 0 0 calc(var(--u) * 1.5) rgba(0, 0, 0, 0.85);
}
.mq-statut-icones { display: inline-flex; align-items: center; gap: calc(var(--u) * 5); }
.mq-statut-icones svg:first-child { width: calc(var(--u) * 15); height: calc(var(--u) * 10); }
.mq-statut-icones svg:last-child { width: calc(var(--u) * 23); height: calc(var(--u) * 11); }
/* Le verre : un reflet doux qui glisse (et suit l'inclinaison), une lueur dans le coin éclairé. */
.mq-verre {
  position: absolute; inset: var(--bord); border-radius: var(--rayon-ecran); overflow: hidden; pointer-events: none;
  transform: translateZ(calc(var(--u) * 3));
  background: radial-gradient(120% 50% at 0% 0%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%);
  box-shadow: inset 0 0 0 calc(var(--u) * 1) rgba(0, 0, 0, 0.35);
}
.mq-reflet {
  position: absolute; top: -10%; left: -70%; width: 240%; height: 120%;
  background: linear-gradient(114deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.26) 47.5%, rgba(255, 255, 255, 0.07) 51%, rgba(255, 255, 255, 0) 56%);
}

/* --- L'écran d'enregistrement (enregistrement.js · enr-tel) --- */
.mq-ecoute {
  display: flex; flex-direction: column; min-height: calc(var(--u) * 574);
  padding: calc(var(--u) * 10) calc(var(--u) * 14) calc(var(--u) * 20);
}
.mq-tel-haut { display: flex; align-items: center; justify-content: space-between; }
.mq-retour {
  display: inline-flex; align-items: center; justify-content: center; width: calc(var(--u) * 28); height: calc(var(--u) * 28);
  border-radius: calc(var(--u) * 9); background: var(--blanc); border: 1px solid var(--bordure);
}
.mq-retour svg { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
.mq-retour--vide { visibility: hidden; }
.mq-matiere { display: inline-flex; align-items: center; gap: calc(var(--u) * 5); font-size: calc(var(--u) * 12); font-weight: 600; color: var(--texte-2); }
.mq-pastille-matiere { width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; background: #696DB1; }
.mq-tel-titre { margin: calc(var(--u) * 12) 0 0; text-align: center; font-size: calc(var(--u) * 15.5); font-weight: 800; letter-spacing: -0.02em; }
.mq-barre { display: flex; flex-direction: column; align-items: center; margin-top: calc(var(--u) * 16); }
.mq-etat {
  display: inline-flex; align-items: center; gap: calc(var(--u) * 6); padding: calc(var(--u) * 3) calc(var(--u) * 10);
  border-radius: 999px; background: var(--rouge-pale); color: var(--framboise, #B42358); font-size: calc(var(--u) * 11.5); font-weight: 700;
}
.mq-voyant { flex: none; width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; background: var(--voyant); animation: voyant 1.4s ease-in-out infinite; }
.mq-chrono { margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 40); line-height: 1.05; font-weight: 800; letter-spacing: -0.04em; }
.mq-onde { display: flex; align-items: center; gap: calc(var(--u) * 3.5); height: calc(var(--u) * 28); margin-top: calc(var(--u) * 6); }
.mq-onde i { display: block; width: calc(var(--u) * 3.5); height: calc(var(--u) * 16); border-radius: calc(var(--u) * 2); background: var(--noir); transform-origin: center; animation: onde 1.1s ease-in-out infinite; }
.mq-onde i:nth-child(3n) { animation-delay: -0.3s; } .mq-onde i:nth-child(3n+1) { animation-delay: -0.75s; } .mq-onde i:nth-child(4n) { animation-delay: -0.5s; }
/* Des hauteurs différentes : l'onde reste une onde, même immobile (réduire les animations). */
.mq-onde i:nth-child(2n) { height: calc(var(--u) * 10); } .mq-onde i:nth-child(3n) { height: calc(var(--u) * 22); } .mq-onde i:nth-child(5n) { height: calc(var(--u) * 7); } .mq-onde i:nth-child(7n) { height: calc(var(--u) * 26); }
/* La frise des repères de l'écran (enregistrement.js) : chaque « Important » y plante un drapeau.
   Ordinateur seulement : au téléphone, la phrase du prof reste dans le premier écran. */
.mq-reperes { margin-top: calc(var(--u) * 16); }
.mq-reperes-ligne { position: relative; height: calc(var(--u) * 20); border-bottom: calc(var(--u) * 2) solid var(--bordure-2); }
.mq-repere { position: absolute; bottom: calc(var(--u) * 2); color: var(--violet); line-height: 0; }
.mq-repere svg { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.mq-repere--1 { left: 38%; }
.mq-repere--2 { left: 93%; transition: opacity 0.3s ease-out, transform 0.45s var(--ressort); transform-origin: bottom left; }
.mq--joue:not(.mq--insiste) .mq-repere--2 { opacity: 0; transform: scale(0.4); }
.mq-reperes-bornes { display: flex; justify-content: space-between; margin: calc(var(--u) * 5) 0 0; font-size: calc(var(--u) * 11.5); font-weight: 500; color: var(--texte-3); }
.mq-direct {
  margin-top: calc(var(--u) * 18); padding: calc(var(--u) * 12) calc(var(--u) * 14) calc(var(--u) * 14); min-height: calc(var(--u) * 156);
  background: var(--blanc); border: 1px solid var(--bordure); border-radius: calc(var(--u) * 18);
}
.mq-direct-titre { margin: 0 0 calc(var(--u) * 6); font-size: calc(var(--u) * 11.5); font-weight: 600; color: var(--texte-3); }
.mq-fil { font-size: calc(var(--u) * 12.5); line-height: 1.45; }
.mq-phrase { margin: 0; }
.mq-phrase--avant { color: var(--texte-3); }
.mq-phrase + .mq-phrase--avant { margin-top: calc(var(--u) * 4); }
.mq-phrase--ancienne { max-height: 1.45em; overflow: hidden; opacity: 0.55; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 85%); mask-image: linear-gradient(to bottom, transparent, #000 85%); }
.mq-phrase--recente { margin-top: calc(var(--u) * 6); font-size: calc(var(--u) * 14.5); line-height: 1.42; font-weight: 600; letter-spacing: -0.01em; color: var(--noir); }
.mq-insiste {
  display: inline-block; max-width: 12em; margin-right: calc(var(--u) * 6); padding: calc(var(--u) * 1) calc(var(--u) * 7); vertical-align: calc(var(--u) * -4);
  border-radius: calc(var(--u) * 6); background: var(--violet); color: var(--blanc); font-size: calc(var(--u) * 11.5); font-weight: 700; line-height: 1.5; letter-spacing: 0; white-space: nowrap; overflow: hidden; transform-origin: left center;
}
.mq-k {
  color: var(--noir); background-image: linear-gradient(var(--surligne), var(--surligne)); background-repeat: no-repeat;
  background-position: 0 92%; background-size: 100% 40%; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.mq-gestes { display: flex; align-items: flex-end; justify-content: space-between; margin-top: auto; padding: calc(var(--u) * 18) calc(var(--u) * 2) 0; }
.mq-geste { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 6); width: calc(var(--u) * 84); }
.mq-geste-nom { font-size: calc(var(--u) * 11.5); font-weight: 600; white-space: nowrap; }
.mq-geste--important .mq-geste-nom { color: var(--violet); font-weight: 700; }
.mq-rond { position: relative; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.mq-rond--clair { width: calc(var(--u) * 46); height: calc(var(--u) * 46); background: var(--blanc); border: 1.5px solid var(--noir); }
.mq-rond--clair svg { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }
.mq-rond--violet { width: calc(var(--u) * 64); height: calc(var(--u) * 64); background: var(--violet); color: var(--blanc); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 22) calc(var(--u) * -8) rgba(109, 40, 217, 0.55); }
.mq-rond--violet svg { width: calc(var(--u) * 24); height: calc(var(--u) * 24); }
.mq-rond--terminer { width: calc(var(--u) * 42); height: calc(var(--u) * 42); background: var(--beige); border: 1px solid var(--bordure); }
.mq-rond--terminer svg { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
.mq-compte {
  position: absolute; top: calc(var(--u) * -3); right: calc(var(--u) * -3); min-width: calc(var(--u) * 20); height: calc(var(--u) * 20); padding: 0 calc(var(--u) * 5);
  display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--noir); color: var(--blanc);
  border: calc(var(--u) * 2) solid var(--creme); font-size: calc(var(--u) * 11); font-weight: 700; line-height: 1;
}

/* --- La fiche (à la sortie) : derrière le téléphone, elle en sort vers la droite --- */
.mq-fiche-cadre {
  position: absolute; left: calc(var(--u) * 312); top: calc(var(--u) * 58); width: calc(var(--u) * 340);
  transform: translateZ(calc(var(--u) * -46)) rotateY(5deg);
}
.mq-fiche {
  position: relative; padding: calc(var(--u) * 20) calc(var(--u) * 22) calc(var(--u) * 20) calc(var(--u) * 40);
  background: var(--blanc); border: 1px solid var(--bordure); border-radius: calc(var(--u) * 22);
  box-shadow: 0 1px 0 rgba(22, 22, 26, 0.03), calc(var(--u) * 26) calc(var(--u) * 36) calc(var(--u) * 64) calc(var(--u) * -24) rgba(59, 36, 112, 0.30), calc(var(--u) * 6) calc(var(--u) * 10) calc(var(--u) * 22) calc(var(--u) * -12) rgba(22, 22, 26, 0.14);
}
.mq-onglets, .mq-fiche-tete { display: none; }
.mq-fiche-haut { display: flex; justify-content: space-between; align-items: baseline; gap: calc(var(--u) * 8); }
.mq-fiche-label { font-size: calc(var(--u) * 12); font-weight: 600; color: var(--violet); }
.mq-fiche-duree { font-size: calc(var(--u) * 11.5); color: var(--texte-3); white-space: nowrap; }
.mq-fiche-titre { margin: calc(var(--u) * 6) 0 calc(var(--u) * 12); font-size: calc(var(--u) * 23); line-height: 1.12; font-weight: 800; letter-spacing: -0.035em; }
.mq-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 10); font-size: calc(var(--u) * 13); line-height: 1.48; color: var(--texte-lecture); }
/* Le plan du prof (I., II., III.), comme sur la fiche de l'app. */
.mq-plan { display: block; margin-bottom: calc(var(--u) * 2); font-size: calc(var(--u) * 13.5); font-weight: 700; letter-spacing: -0.01em; color: var(--noir); }
.mq-puce { color: var(--violet); font-weight: 800; }
.mq-sur {
  font-weight: 600; color: var(--noir); background-image: linear-gradient(var(--surligne), var(--surligne)); background-repeat: no-repeat;
  background-position: 0 88%; background-size: 100% 40%; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.mq-partiel {
  display: inline-flex; align-items: center; gap: calc(var(--u) * 5); margin-top: calc(var(--u) * 5); padding: calc(var(--u) * 1) calc(var(--u) * 8);
  border-radius: calc(var(--u) * 7); background: var(--violet-pale); color: var(--violet); border: 1px solid var(--surligne);
  font-size: calc(var(--u) * 11.5); font-weight: 700; line-height: 1.5; white-space: nowrap;
}
.mq-partiel svg { width: calc(var(--u) * 10); height: calc(var(--u) * 10); }
.mq-moment { margin-top: calc(var(--u) * 14); padding-top: calc(var(--u) * 12); border-top: 1px solid var(--beige); }
.mq-moment-titre { margin: 0; font-size: calc(var(--u) * 12.5); font-weight: 700; color: var(--noir); }
.mq-moment-ligne { display: flex; gap: calc(var(--u) * 8); margin: calc(var(--u) * 5) 0 0; font-size: calc(var(--u) * 12.5); line-height: 1.45; color: var(--texte-2); }
.mq-moment-heure { flex: none; font-weight: 700; color: var(--violet); }

/* --- Jusqu'au partiel : l'écran « Vrai ou faux » de l'app (modes.js), au premier plan --- */
.mq-vf-cadre {
  position: absolute; left: calc(var(--u) * 396); top: calc(var(--u) * 392); width: calc(var(--u) * 252);
  transform: translateZ(calc(var(--u) * 64)) rotateY(4deg) rotateZ(1.5deg);
}
.mq-vf {
  display: flex; flex-direction: column; padding: calc(var(--u) * 14); border-radius: calc(var(--u) * 26); color: var(--creme);
  background: radial-gradient(ellipse 90% 46% at 50% 0%, rgba(109, 40, 217, 0.5), rgba(109, 40, 217, 0) 100%), var(--noir);
  box-shadow: inset 0 calc(var(--u) * 1) 0 rgba(255, 255, 255, 0.08), calc(var(--u) * 30) calc(var(--u) * 44) calc(var(--u) * 70) calc(var(--u) * -22) rgba(30, 20, 60, 0.5), calc(var(--u) * 8) calc(var(--u) * 12) calc(var(--u) * 24) calc(var(--u) * -10) rgba(22, 22, 26, 0.4);
}
.mq-vf-haut { display: flex; align-items: center; justify-content: space-between; }
.mq-vf-anneau { position: relative; width: calc(var(--u) * 38); height: calc(var(--u) * 38); display: inline-flex; align-items: center; justify-content: center; }
.mq-vf-anneau svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.mq-vf-anneau-fond { fill: none; stroke: rgba(245, 241, 232, 0.16); stroke-width: 3.5; }
.mq-vf-anneau-trait { fill: none; stroke: var(--surligne); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 107; stroke-dashoffset: 6; }
.mq-vf-anneau b { position: relative; font-size: calc(var(--u) * 13); font-weight: 800; }
.mq-vf-nom { font-size: calc(var(--u) * 12.5); font-weight: 700; color: rgba(245, 241, 232, 0.86); }
.mq-vf-score { display: inline-flex; align-items: center; gap: calc(var(--u) * 4); padding: calc(var(--u) * 4) calc(var(--u) * 9); border-radius: 999px; background: rgba(245, 241, 232, 0.12); font-size: calc(var(--u) * 12.5); font-weight: 800; }
.mq-vf-score svg { width: calc(var(--u) * 11); height: calc(var(--u) * 11); color: #7FD1AE; }
.mq-vf-pile { position: relative; display: grid; margin: calc(var(--u) * 12) 0; }
.mq-vf-carte {
  grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; gap: calc(var(--u) * 10); padding: calc(var(--u) * 14) calc(var(--u) * 15) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 16); background: var(--creme); color: var(--noir);
}
.mq-vf-carte--dessous { translate: 0 calc(var(--u) * 7); scale: 0.93; opacity: 0.22; }
.mq-vf-matiere { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); font-size: calc(var(--u) * 11); font-weight: 700; color: var(--texte-3); }
.mq-vf-matiere i { width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; background: var(--violet); }
.mq-vf-carte p { margin: 0; font-size: calc(var(--u) * 15.5); font-weight: 800; letter-spacing: -0.025em; line-height: 1.24; }
.mq-vf-k { background-image: linear-gradient(var(--surligne), var(--surligne)); background-repeat: no-repeat; background-position: 0 88%; background-size: 100% 40%; }
.mq-vf-boutons { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 8); }
.mq-vf-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 6); height: calc(var(--u) * 38); border-radius: calc(var(--u) * 12); font-size: calc(var(--u) * 13.5); font-weight: 800; }
.mq-vf-btn svg { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.mq-vf-btn--faux { border: 1.5px solid rgba(245, 241, 232, 0.24); color: var(--creme); }
.mq-vf-btn--faux svg { color: var(--rose); }
.mq-vf-btn--vrai { background: var(--creme); color: var(--noir); }
.mq-vf-btn--vrai svg { color: var(--vert); }

/* --- Les imports : tes PDF, diapos et Word deviennent aussi des fiches (au fond) --- */
.mq-import {
  position: absolute; left: calc(var(--u) * 404); top: calc(var(--u) * 2); display: flex; align-items: center; gap: calc(var(--u) * 6);
  padding: calc(var(--u) * 7) calc(var(--u) * 8) calc(var(--u) * 7) calc(var(--u) * 7); border-radius: calc(var(--u) * 14);
  background: var(--blanc); border: 1px solid var(--bordure); white-space: nowrap;
  box-shadow: calc(var(--u) * 14) calc(var(--u) * 20) calc(var(--u) * 36) calc(var(--u) * -18) rgba(59, 36, 112, 0.28);
  transform: translateZ(calc(var(--u) * -96)) rotateY(6deg) rotateZ(-2deg);
}
.mq-fichier {
  display: inline-flex; align-items: center; gap: calc(var(--u) * 4); padding: calc(var(--u) * 4) calc(var(--u) * 7) calc(var(--u) * 4) calc(var(--u) * 5);
  border-radius: calc(var(--u) * 8); background: var(--creme); font-size: calc(var(--u) * 12); font-weight: 700; color: var(--noir);
}
.mq-fichier svg { width: calc(var(--u) * 14); height: calc(var(--u) * 14); color: var(--texte-2); }
.mq-import-vers { font-size: calc(var(--u) * 13); font-weight: 800; color: var(--violet); }
.mq-import-fiche { padding: calc(var(--u) * 4) calc(var(--u) * 9); border-radius: calc(var(--u) * 8); background: var(--violet); color: var(--blanc); font-size: calc(var(--u) * 12); font-weight: 700; }

/* --- La frise : les trois temps, sous la scène --- */
.mq-frise {
  position: absolute; left: calc(var(--u) * 30); right: calc(var(--u) * 40); top: calc(var(--u) * 682); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 14);
  margin: 0; padding: 0; list-style: none; font-size: max(12.5px, calc(var(--u) * 13)); font-weight: 600; color: var(--texte-3);
}
.mq-temps { display: flex; flex-direction: column; gap: calc(var(--u) * 8); transition: color 0.35s ease-out; }
.mq-temps i { display: block; height: 3px; border-radius: 2px; background: var(--bordure-2); transform-origin: left center; transition: background-color 0.35s ease-out; }
/* Image complète (sans script, réduire les animations) : les trois temps à égalité. */
.mq:not(.mq--joue) .mq-temps { color: var(--noir); }
.mq:not(.mq--joue) .mq-temps i { background: var(--violet); }
.mq--p1 .mq-temps--1, .mq--p2 .mq-temps--2, .mq--p3 .mq-temps--3 { color: var(--noir); }
.mq--p1 .mq-temps--1 i, .mq--p2 .mq-temps--2 i, .mq--p3 .mq-temps--3 i { background: var(--violet); }
.mq--p2 .mq-temps--1 i, .mq--p3 .mq-temps--1 i, .mq--p3 .mq-temps--2 i { background: var(--surligne); }

/* --- Le flottement (ordinateur) : chaque objet à son rythme, l'ombre respire avec le téléphone --- */
@keyframes mq-flotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(var(--u) * -9); } }
@keyframes mq-flotte-doux { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(var(--u) * -5); } }
@keyframes mq-ombre { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: 0.9; opacity: 0.72; } }
@keyframes mq-reflet { from { translate: -5% 0; } to { translate: 9% 0; } }
.mq-reflet { animation: mq-reflet 9s ease-in-out infinite alternate; }

/* --- La boucle (vitrine.js · maquette) : .mq--joue cache ce qui reste à faire ; chaque étape le
   rend. Sans .mq--joue (première image, « réduire les animations »), tout est là. --- */
[data-mq-etape] { position: relative; }
[data-mq-etape] > * { transition: opacity 0.42s var(--courbe), transform 0.42s var(--courbe); }
[data-mq-etape]::before {
  content: ''; position: absolute; left: 0; top: 0.42em; right: 12%; height: calc(100% - 0.6em); pointer-events: none; opacity: 0; transition: opacity 0.16s ease-out;
  background-image: linear-gradient(var(--gris-ligne), var(--gris-ligne)), linear-gradient(var(--gris-ligne), var(--gris-ligne));
  background-repeat: no-repeat; background-size: 100% 0.62em, 62% 0.62em; background-position: 0 0, 0 1.55em; border-radius: 4px;
}
.mq-fiche-titre[data-mq-etape]::before { right: 30%; top: 0.24em; background-size: 100% 0.7em, 0 0; }
.mq--joue [data-mq-etape]:not(.mq-ecrit) > * { opacity: 0; transform: translateY(8px); }
.mq--joue [data-mq-etape]:not(.mq-ecrit)::before { opacity: 1; }
.mq .m { transition: opacity 0.2s ease-out; }
.mq--joue .m:not(.m--dit) { opacity: 0; }
.mq-k, .mq-sur { transition: background-size 0.7s var(--courbe), color 0.3s ease-out; }
.mq--joue:not(.mq--k) .mq-k { background-size: 0% 40%; color: inherit; transition-duration: 0.15s; }
.mq--joue:not(.mq--sur) .mq-sur { background-size: 0% 40%; }
.mq-insiste { transition: max-width 0.4s var(--courbe), margin 0.4s var(--courbe), padding 0.4s var(--courbe), opacity 0.3s ease-out; }
.mq--joue:not(.mq--insiste) .mq-insiste { max-width: 0; margin-right: 0; padding-left: 0; padding-right: 0; opacity: 0; }
.mq-compte { transition: transform 0.4s var(--ressort), opacity 0.2s ease-out; }
.mq--joue:not(.mq--insiste) .mq-compte { transform: scale(0.3); opacity: 0; }
.mq-rond--violet { transition: transform 0.16s var(--courbe); }
.mq--tape .mq-rond--violet { transform: scale(0.9); box-shadow: 0 0 0 calc(var(--u) * 8) rgba(217, 200, 251, 0.7); }
.mq-partiel { transition: opacity 0.3s ease-out, transform 0.45s var(--ressort); transform-origin: left center; }
.mq--joue:not(.mq--badge) .mq-partiel { opacity: 0; transform: translateY(-6px) scale(0.86); }
.mq-fiche-haut { transition: opacity 0.3s ease-out; }
.mq--joue:not(.mq--fiche) .mq-fiche-haut { opacity: 0; }
/* Le « Vrai ou faux » : « Vrai » touché, le point tombe dans le score. */
.mq-vf-btn--vrai { transition: transform 0.16s var(--courbe), box-shadow 0.3s ease-out; }
.mq--vrai .mq-vf-btn--vrai { transform: scale(0.95); box-shadow: 0 0 0 calc(var(--u) * 5) rgba(127, 209, 174, 0.45); }
.mq-vf-score { transition: transform 0.4s var(--ressort), background-color 0.3s ease-out; }
.mq--point .mq-vf-score { transform: scale(1.14); background: rgba(127, 209, 174, 0.28); }
.mq-vf-carte:not(.mq-vf-carte--dessous) { transition: translate 0.5s var(--courbe), rotate 0.5s var(--courbe), opacity 0.4s ease-out; }
.mq--suivante .mq-vf-carte:not(.mq-vf-carte--dessous) { translate: calc(var(--u) * 60) calc(var(--u) * -6); rotate: 8deg; opacity: 0; }
/* Le moment fort (vitrine.js · impact) : la marque se pose d'un coup franc — elle arrive pleine
   (violet, texte blanc), un peu grande, s'écrase et se range dans sa couleur de fiche. */
@keyframes mq-impact {
  0% { transform: scale(1.4); background-color: var(--violet); color: var(--blanc); box-shadow: 0 0 0 0 rgba(109, 40, 217, 0.55); }
  35% { transform: scale(0.94); background-color: var(--violet); color: var(--blanc); }
  60% { transform: scale(1.04); box-shadow: 0 0 0 calc(var(--u) * 14) rgba(109, 40, 217, 0); }
  100% { transform: none; box-shadow: 0 0 0 0 rgba(109, 40, 217, 0); }
}
@keyframes mq-impact-plein {
  0% { transform: scale(1.3); box-shadow: 0 0 0 0 rgba(109, 40, 217, 0.55); }
  40% { transform: scale(0.95); }
  65% { transform: scale(1.03); box-shadow: 0 0 0 calc(var(--u) * 12) rgba(109, 40, 217, 0); }
  100% { transform: none; box-shadow: 0 0 0 0 rgba(109, 40, 217, 0); }
}
@keyframes mq-onde-ronde { from { box-shadow: 0 0 0 0 rgba(109, 40, 217, 0.45); } to { box-shadow: 0 0 0 calc(var(--u) * 22) rgba(109, 40, 217, 0); } }
@keyframes mq-heure { 0%, 100% { background-color: transparent; } 30% { background-color: var(--violet-pale); } }
.mq--impact.mq--badge .mq-partiel { animation: mq-impact 0.85s cubic-bezier(.2, .7, .2, 1) both; }
.mq--impact.mq--badge .mq-moment-heure { animation: mq-heure 1.1s ease-out 0.25s both; border-radius: 4px; }
.mq--impact .mq-insiste { animation: mq-impact-plein 0.7s cubic-bezier(.2, .7, .2, 1) both; }
.mq--impact .mq-rond--violet { animation: mq-onde-ronde 0.9s ease-out both; }
@keyframes mq-trait { from { background-size: 0% 40%; } to { background-size: 100% 40%; } }
.mq--impact:not(.mq--joue) .mq-sur, .mq--impact .mq-k { animation: mq-trait 0.6s cubic-bezier(.2, .7, .2, 1) both; }
.mq--impact:not(.mq--joue).mq--badge .mq-partiel, .mq--impact:not(.mq--joue) .mq-insiste { animation-delay: 0.4s; }
@media (min-width: 901px) { .mq--impact:not(.mq--joue) .mq-insiste, .mq--impact:not(.mq--joue) .mq-rond--violet, .mq--impact:not(.mq--joue) .mq-k { animation: none; } }
@media (max-width: 900px) { .mq--impact:not(.mq--fiche) .mq-partiel, .mq--impact:not(.mq--fiche) .mq-sur { animation: none; } }

/* --- Ordinateur : les trois objets autour du téléphone --- */
@media (min-width: 901px) {
  .mq-tel-flotte { animation: mq-flotte 6.4s ease-in-out infinite; }
  .mq-ombre { animation: mq-ombre 6.4s ease-in-out infinite; }
  .mq-vf { animation: mq-flotte-doux 7.6s ease-in-out -2.4s infinite; }
  .mq-import { animation: mq-flotte-doux 8.4s ease-in-out -5s infinite; }
  /* Pendant le cours, la fiche attend, rentrée derrière le téléphone (ses lignes encore grises). */
  .mq-fiche-cadre { transition: translate 0.8s var(--courbe), scale 0.8s var(--courbe); }
  .mq--joue:not(.mq--fiche) .mq-fiche-cadre { translate: -52% 0; scale: 0.9; }
  /* Le vrai ou faux attend en retrait, plus bas ; il monte au premier plan jusqu'au partiel. */
  .mq-vf-cadre { transition: translate 0.8s var(--courbe), scale 0.8s var(--courbe), opacity 0.3s ease-out; }
  .mq--joue:not(.mq--vf) .mq-vf-cadre { translate: calc(var(--u) * -24) calc(var(--u) * 46); scale: 0.88; opacity: 0; }
  .mq-import { transition: opacity 0.5s ease-out; }
  /* La fiche courte (le badge « Le prof a insisté » suffit) : le vrai ou faux ne la cache pas. */
  .mq-moment { display: none; }
  .mq-fichier { transition: background-color 0.4s ease-out; }
  .mq--p2 .mq-fichier { background: var(--violet-pale); }
}

/* Un appareil qui peine (vitrine.js · sobriete) : plus de flottement continu. */
.mq--sobre .mq-tel-flotte, .mq--sobre .mq-ombre, .mq--sobre .mq-vf, .mq--sobre .mq-import, .mq--sobre .mq-reflet { animation: none !important; }
/* Hors de l'écran (ou onglet caché) : rien ne tourne. */
.mq--pause, .mq--pause * { animation-play-state: paused !important; }

/* --- « Vu sur TikTok » : 2 ou 3 vignettes 9:16, lues au toucher (cachée tant que la liste est vide) --- */
.videos { max-width: 1248px; margin: 0 auto; padding: 56px 24px 0; }
.videos-titre { margin: 0 0 18px; font-size: 22px; font-weight: 800; letter-spacing: -0.03em; }
.videos-liste { display: flex; flex-wrap: wrap; gap: 20px; margin: 0; padding: 0; list-style: none; }
.video-carte { width: 236px; }
.video-cadre { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 20px; background: var(--noir); box-shadow: 0 18px 36px -22px rgba(22, 22, 26, 0.45); }
.video-lecture { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.video-lecture:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: 20px; }
.video-poster, .video-fichier { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-lire {
  position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255, 255, 255, 0.94); color: var(--noir); box-shadow: 0 8px 20px rgba(22, 22, 26, 0.3); transition: transform 0.2s var(--courbe);
}
.video-lire svg { margin-left: 3px; }
.video-lecture:hover .video-lire { transform: scale(1.06); }
.video-mention {
  position: absolute; left: 10px; top: 10px; z-index: 1; padding: 4px 9px; border-radius: 999px; pointer-events: none;
  background: rgba(22, 22, 26, 0.72); color: var(--blanc); font-size: 11.5px; font-weight: 600; line-height: 1.3;
}
.video-auteur { margin: 10px 2px 0; font-size: 14px; line-height: 1.35; color: var(--texte-2); }
.video-auteur b { color: var(--noir); font-weight: 700; }

/* --- Grands écrans : la scène déborde un peu de la colonne, vers le bord de l'écran --- */
@media (min-width: 1360px) { .hero-visuel { margin-right: -64px; } }
@media (min-width: 1700px) {
  .hero-visuel { margin-right: -110px; }
  .mq { --u: min(1.14px, calc(100cqw / 690)); }
}

/* --- 901 à 1219 px : la même composition, réduite (--u suit la colonne) --- */
@media (min-width: 901px) and (max-width: 1219px) {
  .hero-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .t-h1 { font-size: 62px; }
}

/* --- Téléphone (≤ 900 px) : la scène se resserre sur le téléphone, dont l'écran passe d'un temps
   à l'autre (le cours, la fiche, le vrai ou faux) ; les imports flottent à son pied. --- */
@media (max-width: 900px) {
  .t-h1 { font-size: 42px; }
  .videos { padding: 44px 20px 0; }
  .videos-titre { font-size: 20px; }
  .videos-liste { gap: 14px; justify-content: center; }
  .video-carte { width: calc(50% - 7px); }
  .video-mention { left: 8px; top: 8px; padding: 3px 7px; font-size: 11px; white-space: nowrap; }
  .t-sub.sous-normal { max-width: 22em; }
  .hero-visuel { margin-top: 20px; }
  .mq { --u: min(1px, calc(100cqw / 318)); height: auto; display: grid; justify-items: center; perspective: calc(var(--u) * 1500); perspective-origin: 50% 30%; }
  .mq::before { left: 50%; top: calc(var(--u) * -40); width: calc(var(--u) * 640); height: calc(var(--u) * 720); margin-left: calc(var(--u) * -320); }
  .mq::after { left: 50%; top: 0; width: calc(var(--u) * 520); height: calc(var(--u) * 640); margin-left: calc(var(--u) * -260); }
  .mq-ombre { left: 50%; top: auto; bottom: calc(var(--u) * 26); width: calc(var(--u) * 290); margin-left: calc(var(--u) * -145); }
  .mq-monde { position: relative; inset: auto; }
  .mq-pose {
    position: relative; inset: auto; display: grid; grid-template-columns: calc(var(--u) * 305);
    transform-origin: 50% 40%; transform: rotateX(3deg) rotateY(-10deg);
  }
  .mq-tel-flotte, .mq-fiche-cadre, .mq-vf-cadre { grid-area: 1 / 1; }
  .mq-tel-flotte { position: relative; left: auto; top: auto; transform: none; }
  /* La fiche et le vrai ou faux : les pages suivantes de l'app, posées sur l'écran sous la barre
     d'état ; elles arrivent de la droite. */
  .mq-fiche-cadre, .mq-vf-cadre {
    position: relative; left: auto; top: auto; width: auto; align-self: stretch;
    margin: calc(var(--bord) + var(--chanfrein) + var(--statut)) calc(var(--bord) + var(--chanfrein)) calc(var(--bord) + var(--chanfrein));
    border-radius: 0 0 var(--rayon-ecran) var(--rayon-ecran); overflow: hidden; pointer-events: none;
    contain: size;   /* la hauteur est celle du téléphone : l'écran ne l'agrandit jamais */
  }
  .mq-fiche-cadre { transform: translateZ(calc(var(--u) * 1)); }
  .mq-vf-cadre { transform: translateZ(calc(var(--u) * 2)); }
  .mq-ecoute { transition: translate 0.6s var(--courbe), opacity 0.6s ease-out; }
  .mq-reperes { display: none; }
  .mq-fiche {
    height: 100%; padding: calc(var(--u) * 10) calc(var(--u) * 14) calc(var(--u) * 18);
    background: var(--creme); border: 0; border-radius: 0; box-shadow: none;
    translate: 101% 0; transition: translate 0.6s var(--courbe), opacity 0.6s ease-out;
  }
  .mq--fiche .mq-fiche { translate: 0 0; }
  .mq--fiche .mq-ecoute, .mq--vf .mq-ecoute { translate: -28% 0; opacity: 0.4; }
  .mq--vf .mq-fiche { translate: -28% 0; opacity: 0.4; }
  .mq-fiche-tete { display: flex; }
  .mq-fiche-haut { margin-top: calc(var(--u) * 14); }
  .mq-fiche-label { display: none; }
  .mq-fiche-duree { font-size: calc(var(--u) * 12); font-weight: 500; color: var(--texte-2); }
  .mq-fiche-titre { margin: calc(var(--u) * 2) 0 0; font-size: calc(var(--u) * 21); }
  .mq-onglets {
    display: flex; gap: calc(var(--u) * 16); margin: calc(var(--u) * 12) 0 0; border-bottom: 1px solid var(--bordure);
    font-size: calc(var(--u) * 12.5); color: var(--texte-2); font-weight: 500;
  }
  .mq-onglets span { padding-bottom: calc(var(--u) * 7); }
  .mq-onglet--actif { color: var(--noir); font-weight: 700; box-shadow: 0 2px 0 var(--noir); }
  .mq-points {
    margin-top: calc(var(--u) * 12); padding: calc(var(--u) * 13) calc(var(--u) * 14) calc(var(--u) * 14);
    background: var(--blanc); border: 1px solid var(--bordure); border-radius: calc(var(--u) * 18); gap: calc(var(--u) * 9);
  }
  .mq-moment {
    margin-top: calc(var(--u) * 10); padding: calc(var(--u) * 12) calc(var(--u) * 14) calc(var(--u) * 14);
    background: var(--blanc); border: 1px solid var(--bordure); border-radius: calc(var(--u) * 18);
  }
  .mq-vf {
    height: 100%; padding: calc(var(--u) * 14) calc(var(--u) * 14) calc(var(--u) * 18); border-radius: 0; box-shadow: none;
    translate: 101% 0; transition: translate 0.6s var(--courbe);
  }
  .mq--vf .mq-vf { translate: 0 0; }
  .mq-vf-pile { flex: 1; align-content: center; margin: calc(var(--u) * 16) 0; }
  .mq-vf-carte { min-height: calc(var(--u) * 250); justify-content: center; padding: calc(var(--u) * 18); }
  .mq-vf-matiere { position: absolute; top: calc(var(--u) * 16); left: calc(var(--u) * 18); }
  .mq-vf-carte p { font-size: calc(var(--u) * 19); }
  .mq-vf-btn { height: calc(var(--u) * 50); font-size: calc(var(--u) * 15); border-radius: calc(var(--u) * 14); }
  .mq--vf .mq-statut { color: var(--creme); background: var(--noir); }
  /* Les imports : au pied du téléphone, devant lui (« et tes fichiers aussi »). */
  .mq-import {
    position: relative; left: auto; top: auto; grid-area: 1 / 1; align-self: end; justify-self: center;
    margin: 0 0 calc(var(--u) * -22); transform: translateZ(calc(var(--u) * 40)) rotateZ(-1.5deg);
  }
  /* Pas de flottement continu au téléphone (moins de calques 3D à recomposer à chaque image sur
     les petits appareils) : le relief vient du défilement (vitrine.js · relief). */
  .mq-reflet { animation: none; }
  .mq-frise { position: relative; left: auto; right: auto; top: auto; width: calc(var(--u) * 330); margin-top: calc(var(--u) * 40); gap: 8px; font-size: 12px; letter-spacing: -0.01em; white-space: nowrap; }
}
@media (max-width: 389px) { .t-h1 { font-size: 39px; } }
@media (max-width: 374px) { .t-h1 { font-size: 36px; } }
/* Une variante à ligne longue (aucune aujourd'hui) : le titre un cran plus petit. */
.t-h1.t-h1--long { font-size: 64px; }
@media (max-width: 900px) { .t-h1.t-h1--long { font-size: 36px; } }
@media (prefers-reduced-motion: reduce) {
  .mq *, .mq *::before, .mq *::after { transition: none !important; animation: none !important; }
  .mq-pose, .mq-ombre { animation: none !important; }
  .video-lire { transition: none; }
}
/* ===== fin Hero v5 (29 octobre 2026) ===== */

/* ===== Fin de vitrine — revue finale (29 octobre 2026) ===== */
/* B1 : les grands titres sont serrés (lettres à -0,058 em à 84 px) — l'espace entre les mots
   était avalée (« Ducours », « aupartiel »). L'espace se rouvre sans desserrer les lettres. */
.t-h1 { word-spacing: 0.14em; }
.page-vitrine .t-h2, .t-cta { word-spacing: 0.08em; }

/* B2 : la remise à zéro de la scène est un fondu — jamais la fiche qui glisse derrière le téléphone. */
@media (min-width: 901px) {
  .mq-fiche-cadre { transition: opacity 0.55s ease-out, scale 0.7s var(--courbe); }
  .mq--joue:not(.mq--fiche) .mq-fiche-cadre { translate: 0 0; scale: 0.97; opacity: 0; }
  .mq-vf-cadre { transition: opacity 0.5s ease-out, translate 0.7s var(--courbe), scale 0.7s var(--courbe); }
  .mq--joue:not(.mq--vf) .mq-vf-cadre { translate: 0 calc(var(--u) * 12); scale: 0.98; opacity: 0; }
}
@media (max-width: 900px) {
  /* Retour à l'écran du cours : la page du dessus s'efface, l'écran du cours est déjà dessous. */
  .mq--retour .mq-fiche, .mq--retour .mq-vf { opacity: 0; transition: opacity 0.5s ease-out; }
  .mq--retour .mq-ecoute { translate: 0 0; opacity: 1; transition: none; }
  .mq-statut { transition: color 0.4s ease-out, background-color 0.4s ease-out; }
}

/* N° 1 : sous le bouton, deux liens — voir une vraie fiche (d'abord), ou essayer avec un PDF. */
.liens-hero { display: flex; flex-direction: column; align-items: flex-start; }
.liens-hero a[hidden] { display: none; }
.liens-hero .lien-question { color: var(--texte-2); font-weight: 500; }
.liens-hero .lien-hero-pdf { color: var(--texte-2); font-weight: 500; }
@media (max-width: 900px) {
  .liens-hero { align-items: center; }
}

/* N° 3 : la carte Intensif ne répète pas l'Essentiel — « Tout l'Essentiel, plus : », puis ses écarts. */
.formule-avantages .formule-plus { display: block; font-weight: 700; color: var(--noir); }

/* N° 4 : la pastille d'économie sous le prix de l'annuel (la même que dans l'app). */
.formule-economie { margin-top: 10px; }
.formule-economie[hidden] { display: none; }
.economie-pastille {
  display: inline-flex; align-items: center; white-space: nowrap; border-radius: 99px; padding: 3px 10px;
  font-size: 12.5px; font-weight: 700; line-height: 1.5; color: var(--violet); background: var(--violet-pale);
}
.formule--sombre .economie-pastille { color: var(--noir); background: var(--surligne); }
/* L'offre fondateur de l'appel final : sa date entière, aussi au téléphone, sur deux lignes nettes. */
@media (max-width: 760px) {
  .pastille-offre { border-radius: 16px; padding: 8px 14px; line-height: 1.5; }
  .pastille-offre .pastille-ligne { display: block; }
  .pastille-offre .pastille-sep { display: none; }
}
/* Le titre du haut (a3 / b3, décision du fondateur) : 3 ou 4 lignes, plus longues que « Du cours »
   — une taille commune, calée sur la plus longue ligne (« Ne rate plus rien. », 8,1 em) pour que
   rien ne se recoupe (jamais un mot seul sur une ligne). Ordinateur : 58 px au plus, suivant la
   colonne ; téléphone : 42 px au plus, suivant la largeur de l'écran. */
.t-h1, .t-h1.t-h1--long { font-size: min(58px, 4.6vw); line-height: 1.02; }
@media (max-width: 900px) { .t-h1, .t-h1.t-h1--long { font-size: min(42px, calc((100vw - 48px) / 8.4)); line-height: 1.02; } }

/* Les tarifs : « 2 cours offerts. / Ensuite, choisis ta formule. », et la règle du gratuit dessous. */
.page-vitrine .formules-section .titre-section { margin-bottom: 12px; }
.formules-ligne { margin: 0 0 32px; font-size: 17px; line-height: 1.45; font-weight: 500; color: var(--texte-2); }
@media (max-width: 900px) { .formules-ligne { margin-bottom: 24px; font-size: 15px; } }
/* Le sous-titre du fondateur est plus long : au téléphone, le haut se resserre d'autant, pour que le
   geste du cours (« Important · 42:05 ») reste dans le premier écran. */
@media (max-width: 900px) {
  .hero { padding-top: 16px; }
  .t-sub { margin-top: 12px; }
  .hero-actions { margin-top: 16px; }
  .hero-visuel { margin-top: 4px; }
}
/* N° 7 (audit conversion) : sur l'annuel, le prix au mois en gros, et juste dessous ce qui est
   facturé — bien visible (le total annuel se lit sans effort). */
.formule-sous--total { margin-top: 2px; font-size: 15px; font-weight: 600; color: var(--noir); }
.formule--sombre .formule-sous--total { color: var(--creme); }

/* Audit conversion (n° 4) : sous 480 px, le lien « Vois une vraie fiche » juste sous la
   réassurance, puis la frise des trois temps, puis le téléphone ; le PDF reste sous le téléphone. */
@media (max-width: 479px) {
  .liens-hero { display: contents; }
  .liens-hero .lien-hero-fiche { order: 5; align-self: center; margin-top: 2px; }
  .hero-visuel { order: 6; margin-top: 2px; }
  .liens-hero .lien-hero-pdf { order: 7; align-self: center; margin-top: 6px; }
  .mq-frise { order: -1; margin: 0 0 calc(var(--u) * 12); }
}
/* Petits écrans : la question au-dessus, « Vois une vraie fiche ›› » dessous, centrés ; la frise
   un cran plus petite (ses trois temps ne se touchent plus). */
@media (max-width: 374px) {
  .liens-hero .lien-hero-fiche { display: block; text-align: center; padding: 4px 0; }
  .liens-hero .lien-hero-fiche .lien-question { display: block; text-decoration: none; }
  .mq-frise { font-size: 11px; letter-spacing: -0.02em; gap: 6px; }
}
/* ===== fin Fin de vitrine ===== */