/* =============================================================================
   MathVaud, feuille de charte globale, version 1.5 (lot « gestes », 19.10.2026)
   Charte B « Cahier » : CLAUDE.md § 7 et SiteWeb-refonte-2026-10/E_charte/E_direction-B.md

   CHARGEMENT : une seule ligne, dans les deux emplacements <head> du « Site custom code »
   (visiteur et connecté) :
     <link rel="stylesheet" href="https://<hébergement>/mv-charte-1.5.css">
   Depuis la 1.5, deux lignes suivent celle-ci (classe html.mv-js et script mv-gestes-1.0.js),
   écrites dans head-lignes.html : voir la section 13.
   Elle est aussi chargée dans le lecteur de cours et dans les leçons construites avec l'éditeur
   de LearnWorlds ; le contenu des leçons interactives importées n'est pas atteint.

   PORTÉE : ce qui est propre à la charte est enfermé sous la classe racine .mv-charte. La section 12
   reprend, à l'identique, les styles des embeds actuels qui vivaient dans l'emplacement
   « <style> Dynamic » (contrôlé le 09.10.2026 sur la page servie : les 38 couples sélecteur et
   déclarations, hors focus, sont identiques), chacune limitée par
   :not(.mv-charte *) pour ne jamais toucher un embed de la charte. Dynamic ne garde que la règle de
   focus globale, qui atteint aussi les leçons.

   ORDRE DU COLLAGE (cadrage du lot 3, § 2, préalable 4) : ligne <link> de la 1.4 dans les deux <head>,
   contrôle en visiteur et en connecté, PUIS Dynamic réduit à sa règle de focus. Retour arrière :
   restaurer Dynamic d'abord, puis, la 1.4 encore en place, remettre les anciens embeds et l'ancien
   code de la FAQ, et seulement ensuite la ligne de la 1.3 (la 1.3 ne connaît pas les composants
   du lot 3).

   NAVIGATEURS : ceux de 2021 et après (Chrome 88, Firefox 84, Safari 14.1). Toute la charte repose
   sur les propriétés personnalisées (var(), Safari 9.1 et plus) ; :not() avec un sélecteur complexe
   demande Chrome 88, Firefox 84, Safari 9. Un navigateur plus ancien ignore les règles de la
   section 12 (boutons des anciens embeds moins contrastés). :where() n'est pas utilisé.
   Sans :focus-visible (Safari 14.1 et 15.x), un anneau sur :focus prend le relais (section 7 bis).

   CONTRAT DES EMBEDS DE LA CHARTE (CLAUDE.md § 7) : n'utiliser que les classes de cette feuille,
   sans <style> local ; en zone sombre (.mv-sombre), seuls le texte, les titres, les liens, les
   annotations et les boutons ont une variante.

   v1.5 : gestes animés (section 13), exercice de 30 secondes (section 14), vidéo en image fixe
   (section 15). Les sections 1 à 12 sont celles de la 1.4, sans changement. Retour arrière : retirer
   les deux lignes du script, puis remettre la ligne de la 1.4.
   v1.4 : composants du lot 3 (section 7 bis) ; barre du haut des visiteurs dès 991 px, prévue pour
   7 entrées avec « Blog » (section 10) ; menu téléphone, neutralisation d'une règle du thème
   (section 11) ; compatibilité des embeds actuels (section 12, reprise de Dynamic). « 0 Pages » et
   « 0:00 » ne sont pas traités ici (décision de Marc du 09.10.2026 : réglage de chaque section
   « Course contents »).
   v1.3 : section 4 ter (contrastes d'interface du chrome natif).
   v1.2 : section 4 bis (liens du thème hors charte).
   v1.1 : modificateurs de boutons effectifs, focus sombre, liens soulignés en zone sombre.

   VERSIONS : nom versionné. Toute modification = nouveau fichier et changement de la ligne <link>
   dans les deux <head>. Retour arrière : remettre l'ancienne ligne.

   Tailles en px : la racine du thème est à 10 px et les sections mettent font-size:0.
   ========================================================================== */

/* 1. Polices : servies par le proxy de polices de mathvaud.ch (même domaine que la page).
   Ce sont les familles réglées dans le thème (le thème ne propose pas Source Serif 4 ni
   Source Sans 3). Source Sans Pro n'a pas de graisse 500. */
@import url("https://www.mathvaud.ch/font-server/css?family=Source+Serif+Pro:400,400i,600,700|Source+Sans+Pro:400,400i,600,700&display=swap");

/* 2. Jetons ------------------------------------------------------------------ */
:root {
  /* Encre et papier */
  --mv-encre: #102A43;
  --mv-encre-2: #3E5368;
  --mv-encre-3: #56677A;
  --mv-nuit: #0C4A6E;
  --mv-papier: #FBFAF6;
  --mv-feuille: #FFFFFF;
  --mv-papier-2: #F3F0E7;
  --mv-filet: #E2DED3;
  --mv-filet-champ: #7F8A96;
  --mv-quadrillage: rgba(12, 74, 110, 0.08);

  /* Une seule couleur d'action */
  --mv-action: #0369A1;
  --mv-action-survol: #075985;
  --mv-sur-action: #FFFFFF;

  /* Les gestes de correction */
  --mv-surligneur: #FFE45E;
  --mv-surligneur-doux: #FFF4B8;
  --mv-correction: #B42318;
  --mv-correction-doux: #FDECEA;
  --mv-verif: #1A7346;
  --mv-verif-doux: #E7F3EC;

  /* Pied et focus */
  --mv-pied-fond: #102A43;
  --mv-pied-texte: #D5DEE7;
  --mv-pied-texte-2: #A9B8C6;
  --mv-focus: #102A43;
  --mv-focus-sombre: #FFE45E;

  /* Catégories du blog */
  --mv-cat-examens: #0C4A6E;    --mv-cat-examens-teinte: #E6EEF4;
  --mv-cat-comprendre: #276749; --mv-cat-comprendre-teinte: #E7F1EA;
  --mv-cat-methode: #9C4A0F;    --mv-cat-methode-teinte: #F6EADF;
  --mv-cat-systeme: #5B3A8E;    --mv-cat-systeme-teinte: #EEE8F6;
  --mv-cat-parents: #1D6461;    --mv-cat-parents-teinte: #E3F0EF;

  /* Tuiles de la famille (icônes seulement) */
  --mv-tuile-mathvaud: #0C4A6E;
  --mv-tuile-douze: #12615A;
  --mv-tuile-quatre: #0369A1;

  /* Polices */
  --mv-police-titre: "Source Serif Pro", "Source Serif 4", Georgia, "Times New Roman", serif;
  --mv-police-texte: "Source Sans Pro", "Source Sans 3", "Helvetica Neue", Arial, sans-serif;

  /* Échelle typographique, bureau */
  --mv-t-heros: 56px;      --mv-i-heros: 1.08;
  --mv-t-h1: 44px;         --mv-i-h1: 1.12;
  --mv-t-h2: 36px;         --mv-i-h2: 1.18;
  --mv-t-h3: 26px;         --mv-i-h3: 1.25;
  --mv-t-h4: 21px;         --mv-i-h4: 1.3;
  --mv-t-chapeau: 21px;    --mv-i-chapeau: 1.5;
  --mv-t-corps: 18px;      --mv-i-corps: 1.6;
  --mv-t-petit: 15px;      --mv-i-petit: 1.5;
  --mv-t-surtitre: 14px;
  --mv-t-annotation: 20px;
  --mv-t-prix: 46px;
  --mv-t-bouton: 17px;

  /* Espacements, grille de 4 */
  --mv-e-1: 4px;  --mv-e-2: 8px;  --mv-e-3: 12px; --mv-e-4: 16px; --mv-e-5: 24px;
  --mv-e-6: 32px; --mv-e-7: 48px; --mv-e-8: 64px; --mv-e-9: 96px;
  --mv-largeur: 1200px;
  --mv-colonne-texte: 680px;
  --mv-gouttiere: 24px;

  /* Rayons */
  --mv-r-1: 4px;
  --mv-r-2: 6px;
  --mv-r-3: 8px;

  /* Ombres */
  --mv-ombre-feuille: 0 1px 2px rgba(16, 42, 67, 0.06), 0 6px 18px -8px rgba(16, 42, 67, 0.18);
  --mv-ombre-posee: 0 2px 4px rgba(16, 42, 67, 0.06), 0 18px 40px -16px rgba(16, 42, 67, 0.28);

  /* Motifs */
  --mv-motif-quadrillage: linear-gradient(var(--mv-quadrillage) 1px, transparent 1px),
                          linear-gradient(90deg, var(--mv-quadrillage) 1px, transparent 1px);
  --mv-motif-quadrillage-pas: 20px 20px;
  --mv-motif-surligne: linear-gradient(transparent 58%, var(--mv-surligneur) 58%,
                                       var(--mv-surligneur) 92%, transparent 92%);
}

@media (max-width: 640px) {
  :root {
    --mv-t-heros: 34px; --mv-t-h1: 32px; --mv-t-h2: 28px; --mv-t-h3: 22px; --mv-t-h4: 19px;
    --mv-t-chapeau: 18px; --mv-t-corps: 17px; --mv-t-petit: 15px; --mv-t-surtitre: 14px;
    --mv-t-annotation: 18px; --mv-t-prix: 40px; --mv-t-bouton: 17px;
    --mv-gouttiere: 16px; --mv-e-9: 64px;
  }
}

/* 3. Socle de tout embed de la charte : <div class="mv-charte"> --------------- */
.mv-charte {
  font-family: var(--mv-police-texte);
  font-size: var(--mv-t-corps);
  line-height: var(--mv-i-corps);
  font-weight: 400;
  color: var(--mv-encre);
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.mv-charte *, .mv-charte *::before, .mv-charte *::after { box-sizing: border-box; }
/* contre le font-size:0 que le thème pose autour des embeds */
.mv-charte p, .mv-charte li, .mv-charte td, .mv-charte th, .mv-charte dd, .mv-charte dt,
.mv-charte blockquote, .mv-charte figcaption, .mv-charte label { font-size: inherit; }
.mv-charte p { margin: 0 0 var(--mv-e-4); }
.mv-charte ul, .mv-charte ol { margin: 0 0 var(--mv-e-4); padding-left: 1.3em; }
.mv-charte li { margin: 0 0 var(--mv-e-2); }
.mv-charte strong, .mv-charte b { font-weight: 700; }
.mv-charte img, .mv-charte svg { max-width: 100%; height: auto; }

.mv-charte h1, .mv-charte h2, .mv-charte h3, .mv-charte h4 {
  font-family: var(--mv-police-titre);
  font-weight: 600;
  color: var(--mv-encre);
  letter-spacing: -0.01em;
  margin: 0 0 var(--mv-e-4);
  text-align: left;
  text-transform: none;
}
.mv-charte h1 { font-size: var(--mv-t-h1); line-height: var(--mv-i-h1); }
.mv-charte h2 { font-size: var(--mv-t-h2); line-height: var(--mv-i-h2); }
.mv-charte h3 { font-size: var(--mv-t-h3); line-height: var(--mv-i-h3); }
.mv-charte h4 { font-size: var(--mv-t-h4); line-height: var(--mv-i-h4); }
.mv-charte .mv-heros { font-size: var(--mv-t-heros); line-height: var(--mv-i-heros); letter-spacing: -0.015em; }
.mv-charte .mv-chapeau { font-size: var(--mv-t-chapeau); line-height: var(--mv-i-chapeau); color: var(--mv-encre-2); }
.mv-charte .mv-petit { font-size: var(--mv-t-petit); line-height: var(--mv-i-petit); }
.mv-charte .mv-legende { font-size: var(--mv-t-surtitre); line-height: 1.45; color: var(--mv-encre-3); }
.mv-charte .mv-surtitre {
  display: block;
  font-size: var(--mv-t-surtitre); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--mv-encre-3); margin: 0 0 var(--mv-e-2);
}

/* Mise en page */
.mv-charte .mv-conteneur { max-width: var(--mv-largeur); margin: 0 auto; padding: 0 var(--mv-gouttiere); }
.mv-charte .mv-colonne-texte { max-width: var(--mv-colonne-texte); }
.mv-charte .mv-section { padding: var(--mv-e-8) 0; }
.mv-charte .mv-section--papier-2 { background: var(--mv-papier-2); }
.mv-charte .mv-grille { display: grid; gap: var(--mv-e-5); grid-template-columns: repeat(var(--mv-colonnes, 3), minmax(0, 1fr)); }
.mv-charte .mv-grille--2 { --mv-colonnes: 2; }
.mv-charte .mv-grille--4 { --mv-colonnes: 4; }
@media (max-width: 900px) { .mv-charte .mv-grille, .mv-charte .mv-grille--4 { --mv-colonnes: 2; } }
@media (max-width: 640px) {
  .mv-charte .mv-grille, .mv-charte .mv-grille--2, .mv-charte .mv-grille--4 { --mv-colonnes: 1; }
  .mv-charte .mv-section { padding: var(--mv-e-7) 0; }
}

/* 4. Liens : neutralise la règle du thème (#pageContainer a:not(...) { color:#0064D1 }) -- */
#pageContainer .mv-charte a:not(.mv-btn),
.mv-charte a:not(.mv-btn) {
  color: var(--mv-action) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
#pageContainer .mv-charte a:not(.mv-btn):hover,
.mv-charte a:not(.mv-btn):hover {
  color: var(--mv-encre) !important;
  background: var(--mv-surligneur-doux);
}
/* Zone sombre : liens blancs, toujours soulignés (un lien dans un paragraphe doit se distinguer
   du texte autrement que par la couleur ; décision de Marc du 08.10.2026). Survol : trait épaissi. */
#pageContainer .mv-charte .mv-sombre a:not(.mv-btn),
.mv-charte .mv-sombre a:not(.mv-btn) {
  color: #FFFFFF !important; text-decoration: underline !important;
  text-decoration-thickness: 1px; text-underline-offset: 3px; background: transparent;
}
#pageContainer .mv-charte .mv-sombre a:not(.mv-btn):hover,
.mv-charte .mv-sombre a:not(.mv-btn):hover {
  color: #FFFFFF !important; text-decoration: underline !important;
  text-decoration-thickness: 2px; background: transparent;
}

/* 4 bis. Liens du thème hors charte (v1.2, contrôle en ligne du 08.10.2026) --------------
   Même sélecteur que la règle de liens écrite par le thème jusqu'au 08.10 (spécificité 2,1,1),
   pour passer devant « .lw-page #pageContainer .learnworlds-section:not(.lw-topbar) a:not(...)
   { color:inherit } » de pages.css (1,4,1). Sans !important : les règles de la charte (section 4)
   et les correctifs de boutons de l'emplacement Dynamic, en !important, restent prioritaires. */
#pageContainer a:not(.card-link, #pageContainer .lw-topbar-option-link, #pageContainer .lw-sidebar-option-link, #pageContainer .learnworlds-button, #pageContainer .mobile-nav-menu-link, #pageContainer .lw-event-card, #pageContainer .social-incontext, #pageContainer .msg-content-name-link, #pageContainer .teal-60, #pageContainer .grey2, #pageContainer .lw-blog-card-txt, #pageContainer .fc-event) {
  color: #0369A1;
}

/* 4 ter. Chrome natif : deux contrastes d'interface (v1.3, contrôle en ligne du 08.10.2026) ------
   Seuil : 3:1 pour le contour d'un composant d'interface (WCAG 1.4.11).
   a) Champs des formulaires natifs : fenêtres d'inscription (.loginForm2), de connexion
      (.js-signin-input) et de mot de passe (#passwordResetInitForm, #passwordResetForm), formulaire
      d'achat des pages produit (.js-payment-component). Le thème leur donne un fond Light #F3F0E7
      et une bordure de la même couleur : 1,14:1 contre la fenêtre, 1,09:1 contre le papier.
      Bordure au jeton --mv-filet-champ #7F8A96 : 3,51:1 contre la fenêtre (blanc mesuré au pixel),
      3,36:1 contre le papier #FBFAF6, 3,08:1 contre le fond du champ. Le focus garde l'anneau de
      « <style> Dynamic » (3 px #1D4ED8). Envoi d'un formulaire vide (08.10) : LearnWorlds ne colore
      pas la bordure en erreur, la règle ne masque donc rien. Remplissage automatique et champ
      désactivé : non vérifiés.
   b) Icône du menu téléphone (trois barres) : #B4B4B4 sur papier #FBFAF6, 1,99:1. Barres encre
      #102A43, 14,02:1. La troisième barre est une ombre de ::before ; à l'ouverture, LearnWorlds met
      .hamburger-open sur un parent et efface l'ombre pour dessiner la croix : la dernière règle
      rétablit explicitement cet effacement, à une spécificité supérieure (review du 08.10). */
.loginForm2 input.learnworlds-input-solid-light,
input.js-signin-input.learnworlds-input-solid-light,
#passwordResetInitForm input.learnworlds-input-solid-light,
#passwordResetForm input.learnworlds-input-solid-light,
.js-payment-component input.learnworlds-input-solid-light {
  border-color: var(--mv-filet-champ);
}
.lw-topbar .lw-topbar-hamburger-button:not([class*="ham-light"]):not([class*="ham-narrow"])::before,
.lw-topbar .lw-topbar-hamburger-button:not([class*="ham-light"]):not([class*="ham-narrow"])::after {
  background-color: var(--mv-encre);
}
.lw-topbar .lw-topbar-hamburger-button:not([class*="ham-light"]):not([class*="ham-narrow"])::before {
  box-shadow: 0 20px 0 0 var(--mv-encre);
}
.lw-topbar .hamburger-open .lw-topbar-hamburger-button:not([class*="ham-light"]):not([class*="ham-narrow"])::before {
  box-shadow: 0 0 0 0 transparent;
}

/* 5. Boutons ------------------------------------------------------------------ */
.mv-charte button, .mv-charte input, .mv-charte select, .mv-charte textarea {
  font-family: inherit; font-size: inherit; line-height: inherit; color: inherit;
}
#pageContainer .mv-charte .mv-btn, .mv-charte .mv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--mv-e-2);
  min-height: 48px; padding: 14px 22px; border-radius: var(--mv-r-2);
  font-family: var(--mv-police-texte); font-size: var(--mv-t-bouton); font-weight: 600;
  line-height: 1.2; white-space: nowrap; cursor: pointer;
  text-decoration: none !important; background-image: none;
  -webkit-appearance: none; appearance: none;
}
#pageContainer .mv-charte .mv-btn--principal, .mv-charte .mv-btn--principal,
#pageContainer .mv-charte .mv-btn--principal:visited, .mv-charte .mv-btn--principal:visited {
  background-color: var(--mv-action) !important; color: var(--mv-sur-action) !important; border: 0 !important;
}
#pageContainer .mv-charte .mv-btn--principal:hover, .mv-charte .mv-btn--principal:hover {
  background-color: var(--mv-action-survol) !important; color: var(--mv-sur-action) !important;
}
#pageContainer .mv-charte .mv-btn--secondaire, .mv-charte .mv-btn--secondaire,
#pageContainer .mv-charte .mv-btn--secondaire:visited, .mv-charte .mv-btn--secondaire:visited {
  background-color: transparent !important; color: var(--mv-encre) !important; border: 1.5px solid var(--mv-encre) !important;
}
#pageContainer .mv-charte .mv-btn--secondaire:hover, .mv-charte .mv-btn--secondaire:hover {
  background-color: var(--mv-surligneur-doux) !important; color: var(--mv-encre) !important;
}
#pageContainer .mv-charte .mv-sombre .mv-btn--secondaire, .mv-charte .mv-sombre .mv-btn--secondaire,
#pageContainer .mv-charte .mv-sombre .mv-btn--secondaire:visited, .mv-charte .mv-sombre .mv-btn--secondaire:visited {
  color: #FFFFFF !important; border-color: var(--mv-pied-texte) !important;
}
#pageContainer .mv-charte .mv-sombre .mv-btn--secondaire:hover, .mv-charte .mv-sombre .mv-btn--secondaire:hover {
  background-color: var(--mv-surligneur-doux) !important; color: var(--mv-encre) !important;
}
/* Modificateurs : même spécificité que la règle de base, placés après elle */
#pageContainer .mv-charte .mv-btn--heros, .mv-charte .mv-btn--heros { min-height: 52px; font-size: 18px; padding: 15px 26px; }
@media (max-width: 640px) {
  #pageContainer .mv-charte .mv-btn--pleine, .mv-charte .mv-btn--pleine { width: 100%; white-space: normal; }
}

/* 6. Focus visible ----------------------------------------------------------- */
.mv-charte a:focus-visible, .mv-charte button:focus-visible, .mv-charte [role="button"]:focus-visible,
.mv-charte input:focus-visible, .mv-charte select:focus-visible, .mv-charte textarea:focus-visible,
.mv-charte summary:focus-visible {
  outline: 3px solid var(--mv-focus) !important; outline-offset: 2px !important;
}
.mv-charte .mv-sombre a:focus-visible, .mv-charte .mv-sombre button:focus-visible,
.mv-charte .mv-sombre [role="button"]:focus-visible, .mv-charte .mv-sombre input:focus-visible,
.mv-charte .mv-sombre select:focus-visible, .mv-charte .mv-sombre textarea:focus-visible,
.mv-charte .mv-sombre summary:focus-visible {
  outline-color: var(--mv-focus-sombre) !important;
}

/* 7. Composants -------------------------------------------------------------- */

/* Carte « feuille » */
.mv-charte .mv-feuille {
  background: var(--mv-feuille); border: 1px solid var(--mv-filet); border-radius: var(--mv-r-2);
  box-shadow: var(--mv-ombre-feuille); padding: 32px 36px;
}
.mv-charte .mv-feuille > :last-child { margin-bottom: 0; }
@media (max-width: 640px) { .mv-charte .mv-feuille { padding: 20px; } }

/* Encadrés : piège, astuce, vérification */
.mv-charte .mv-encadre {
  border-left: 4px solid var(--mv-encre); border-radius: 0 var(--mv-r-2) var(--mv-r-2) 0;
  padding: var(--mv-e-4) var(--mv-e-5); margin: 0 0 var(--mv-e-5); color: var(--mv-encre);
}
.mv-charte .mv-encadre > :last-child { margin-bottom: 0; }
.mv-charte .mv-encadre__titre {
  display: flex; align-items: center; gap: var(--mv-e-2);
  font-size: var(--mv-t-surtitre); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  margin: 0 0 var(--mv-e-2);
}
.mv-charte .mv-encadre__titre svg { width: 20px; height: 20px; flex: none; }
.mv-charte .mv-encadre--piege { background: var(--mv-correction-doux); border-left-color: var(--mv-correction); }
.mv-charte .mv-encadre--piege .mv-encadre__titre { color: var(--mv-correction); }
.mv-charte .mv-encadre--astuce { background: var(--mv-surligneur-doux); border-left-color: var(--mv-encre); }
.mv-charte .mv-encadre--astuce .mv-encadre__titre { color: var(--mv-encre); }
.mv-charte .mv-encadre--verif { background: var(--mv-verif-doux); border-left-color: var(--mv-verif); }
.mv-charte .mv-encadre--verif .mv-encadre__titre { color: var(--mv-verif); }

/* Badge de niveau et voies */
.mv-charte .mv-niveau {
  display: inline-flex; align-items: baseline; gap: 6px;
  background: var(--mv-feuille); border: 1.5px solid var(--mv-encre); border-radius: var(--mv-r-1);
  padding: 4px 10px; color: var(--mv-encre); line-height: 1.2;
}
.mv-charte .mv-niveau__annee { font-family: var(--mv-police-titre); font-weight: 700; font-size: 19px; }
.mv-charte .mv-niveau__complement { font-size: 14px; }
.mv-charte .mv-voie {
  display: inline-block; border: 1px solid var(--mv-filet); border-radius: var(--mv-r-1);
  padding: 2px 8px; font-size: 14px; color: var(--mv-encre-2); background: var(--mv-feuille);
}

/* Liste à coches (inclus, garanties) */
.mv-charte .mv-coches { list-style: none; padding: 0; margin: 0 0 var(--mv-e-4); }
.mv-charte .mv-coches li { position: relative; padding-left: 30px; }
.mv-charte .mv-coches li::before {
  content: ""; position: absolute; left: 2px; top: 0.35em; width: 16px; height: 9px;
  border-left: 3px solid var(--mv-verif); border-bottom: 3px solid var(--mv-verif);
  transform: rotate(-45deg); transform-origin: 50% 50%;
}

/* Carte de prix */
.mv-charte .mv-prix { display: flex; flex-direction: column; gap: var(--mv-e-3); }
.mv-charte .mv-prix--avant { border: 1.5px solid var(--mv-encre); }
.mv-charte .mv-prix__montant {
  font-family: var(--mv-police-titre); font-weight: 700; font-size: var(--mv-t-prix); line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--mv-encre);
}
.mv-charte .mv-prix__devise { font-family: var(--mv-police-texte); font-size: 18px; font-weight: 600; margin-left: 6px; }
.mv-charte .mv-prix__conditions { font-size: var(--mv-t-petit); color: var(--mv-encre-2); }

/* Carte d'article */
.mv-charte .mv-article { background: var(--mv-feuille); border: 1px solid var(--mv-filet); border-radius: var(--mv-r-2); overflow: hidden; }
.mv-charte .mv-article__cover { position: relative; aspect-ratio: 16 / 9; background: var(--mv-papier-2); }
.mv-charte .mv-article__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mv-charte .mv-article__categorie {
  position: absolute; left: 0; top: 0; color: #FFFFFF; background: var(--mv-cat-examens);
  font-size: 14px; font-weight: 700; padding: 4px 10px; border-radius: 0 0 var(--mv-r-1) 0;
}
.mv-charte .mv-article__corps { padding: var(--mv-e-5); }
.mv-charte .mv-article__titre { font-family: var(--mv-police-titre); font-weight: 600; font-size: 21px; line-height: 1.3; margin: 0 0 var(--mv-e-2); }
.mv-charte .mv-article__chapeau { font-size: 16px; color: var(--mv-encre-2); margin: 0 0 var(--mv-e-3); }
.mv-charte .mv-article__signature { font-size: 14px; color: var(--mv-encre-3); }
.mv-charte .mv-cat--comprendre { background: var(--mv-cat-comprendre); }
.mv-charte .mv-cat--methode { background: var(--mv-cat-methode); }
.mv-charte .mv-cat--systeme { background: var(--mv-cat-systeme); }
.mv-charte .mv-cat--parents { background: var(--mv-cat-parents); }

/* Capture posée comme une feuille, photo, vidéo */
.mv-charte .mv-capture {
  background: var(--mv-feuille); border: 1px solid var(--mv-filet); border-radius: var(--mv-r-1);
  box-shadow: var(--mv-ombre-posee); overflow: hidden;
}
.mv-charte .mv-capture img { display: block; width: 100%; height: auto; }
.mv-charte .mv-capture--inclinee { transform: rotate(-1.5deg); }
.mv-charte .mv-photo { border-radius: var(--mv-r-2); background: var(--mv-papier-2); overflow: hidden; }
.mv-charte .mv-photo img { display: block; width: 100%; height: auto; }
.mv-charte .mv-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--mv-r-2); overflow: hidden; background: var(--mv-encre); }
.mv-charte .mv-video iframe, .mv-charte .mv-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Icônes SVG en ligne, trait 1,75 px, couleur du texte */
.mv-charte .mv-icone { width: 24px; height: 24px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Zones sombres (bandeau nuit, pied propre à un embed) */
.mv-charte .mv-sombre { background: var(--mv-encre); color: var(--mv-pied-texte); }
.mv-charte .mv-sombre h1, .mv-charte .mv-sombre h2, .mv-charte .mv-sombre h3, .mv-charte .mv-sombre h4 { color: #FFFFFF; }
.mv-charte .mv-sombre .mv-chapeau, .mv-charte .mv-sombre .mv-legende, .mv-charte .mv-sombre .mv-surtitre { color: var(--mv-pied-texte); }

/* 7 bis. Composants ajoutés au lot 3 (v1.4, 09.10.2026) ------------------------------
   Pour les pages de la vitrine recollées au lot 3 : accueil, /rentree, /courses, /cantons, /about,
   méthode, fondements, FAQ, contact, masterclass, ECR 8, examens de 11e, Bilan. Même contrat que les
   autres composants : sous .mv-charte, tailles en px, aucune couleur hors jetons. */

/* Sections : fond blanc (bande des repères) et marges réduites */
.mv-charte .mv-section--feuille { background: var(--mv-feuille); border-top: 1px solid var(--mv-filet); border-bottom: 1px solid var(--mv-filet); }
.mv-charte .mv-section--serree { padding: var(--mv-e-6) 0; }
.mv-charte .mv-section > .mv-conteneur > :last-child,
.mv-charte .mv-colonne-texte > :last-child { margin-bottom: 0; }

/* Deux colonnes : texte et visuel (héros, Marc). Une seule colonne sous 900 px. */
.mv-charte .mv-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mv-e-7); align-items: center; }
.mv-charte .mv-duo--portrait { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) {
  .mv-charte .mv-duo, .mv-charte .mv-duo--portrait { grid-template-columns: minmax(0, 1fr); gap: var(--mv-e-6); }
  .mv-charte .mv-duo--portrait .mv-photo { max-width: 260px; }
}

/* Paire de captures de téléphone posées comme des feuilles ; la seconde un peu plus bas */
.mv-charte .mv-paire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mv-e-5); align-items: start; max-width: 520px; }
.mv-charte .mv-paire > :nth-child(2) { margin-top: var(--mv-e-7); }
.mv-charte .mv-paire + .mv-legende, .mv-charte .mv-capture + .mv-legende, .mv-charte .mv-feuille + .mv-legende { margin-top: var(--mv-e-4); }
@media (max-width: 640px) { .mv-charte .mv-paire { gap: var(--mv-e-4); } .mv-charte .mv-paire > :nth-child(2) { margin-top: var(--mv-e-6); } }
.mv-charte .mv-capture--seule { max-width: 300px; }

/* Rangée de boutons ou de liens d'action */
.mv-charte .mv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mv-e-3) var(--mv-e-5); margin: var(--mv-e-5) 0 var(--mv-e-4); }
.mv-charte .mv-actions > * { margin: 0; }
/* Lien d'action seul dans une rangée : cible tactile de 44 px (review du code, 09.10.2026) */
.mv-charte .mv-actions > a:not(.mv-btn) { display: inline-flex; align-items: center; min-height: 44px; }
/* Espace au-dessus d'un bloc de texte ou d'une grille (ne change pas son affichage) */
.mv-charte .mv-espace-haut { margin-top: var(--mv-e-5); }

/* Repères chiffrés (bande sous le héros) */
.mv-charte .mv-repere { margin: 0; }
.mv-charte .mv-repere__chiffre { display: block; font-family: var(--mv-police-titre); font-weight: 600; font-size: var(--mv-t-h4); line-height: 1.25; color: var(--mv-encre); margin-bottom: var(--mv-e-1); }
.mv-charte .mv-repere__texte { display: block; font-size: var(--mv-t-petit); line-height: var(--mv-i-petit); color: var(--mv-encre-2); }

/* Étapes à lettre ou à chiffre (STOP-V, les six temps, les quatre étapes du pack) */
.mv-charte .mv-etapes { list-style: none; padding: 0; margin: 0 0 var(--mv-e-5); }
.mv-charte .mv-etapes > li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--mv-e-3); align-items: start; padding: var(--mv-e-3) 0; margin: 0; border-top: 1px solid var(--mv-filet); }
.mv-charte .mv-etapes > li:last-child { border-bottom: 1px solid var(--mv-filet); }
.mv-charte .mv-etapes__lettre {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border: 1.5px solid var(--mv-encre); border-radius: var(--mv-r-1); background: var(--mv-feuille);
  font-family: var(--mv-police-titre); font-weight: 700; font-size: 17px; line-height: 1; color: var(--mv-encre);
}
.mv-charte .mv-etapes > li > div > :last-child { margin-bottom: 0; }

/* Citation signée */
.mv-charte .mv-citation { margin: var(--mv-e-5) 0; padding: 0 0 0 var(--mv-e-5); border-left: 3px solid var(--mv-surligneur); }
.mv-charte .mv-citation p { font-family: var(--mv-police-titre); font-style: italic; font-size: var(--mv-t-annotation); line-height: 1.5; color: var(--mv-encre-2); margin: 0 0 var(--mv-e-2); }
.mv-charte .mv-citation__auteur { font-size: var(--mv-t-petit); color: var(--mv-encre-3); }

/* Questions et réponses, petits titres de carte : corps h4, la hiérarchie reste celle de la balise */
.mv-charte h2.mv-question, .mv-charte h3.mv-question { font-size: var(--mv-t-h4); line-height: var(--mv-i-h4); margin: var(--mv-e-6) 0 var(--mv-e-2); }
.mv-charte h2 + .mv-question, .mv-charte .mv-surtitre + .mv-question { margin-top: 0; }

/* Tableaux : texte à gauche, filets, défilement horizontal sur téléphone si besoin */
.mv-charte .mv-tableau { overflow-x: auto; margin: 0 0 var(--mv-e-5); -webkit-overflow-scrolling: touch; }
.mv-charte table { width: 100%; border-collapse: collapse; font-size: var(--mv-t-petit); line-height: var(--mv-i-petit); }
.mv-charte th, .mv-charte td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--mv-filet); }
.mv-charte th { font-weight: 700; color: var(--mv-encre); background: var(--mv-papier-2); }
.mv-charte caption { text-align: left; font-size: var(--mv-t-surtitre); color: var(--mv-encre-3); padding: 0 0 var(--mv-e-2); }

/* Tableau qui défile sur téléphone : la zone reçoit le focus clavier (tabindex="0" dans l'embed) */
.mv-charte .mv-tableau:focus-visible { outline: 3px solid var(--mv-focus) !important; outline-offset: 2px !important; }

/* Navigateurs sans :focus-visible (Safari 14.1 et 15.x) : anneau sur :focus, embeds de la charte seulement */
@supports not selector(:focus-visible) {
  .mv-charte a:focus, .mv-charte button:focus, .mv-charte [role="button"]:focus, .mv-charte .mv-tableau:focus {
    outline: 3px solid #102A43 !important; outline-offset: 2px !important;
  }
  .mv-charte .mv-sombre a:focus, .mv-charte .mv-sombre button:focus { outline-color: #FFE45E !important; }
}

/* Références bibliographiques */
.mv-charte .mv-references { list-style: none; padding: 0; margin: 0; font-size: var(--mv-t-petit); line-height: var(--mv-i-petit); }
.mv-charte .mv-references li { padding-left: 24px; text-indent: -24px; margin: 0 0 var(--mv-e-3); }

/* Tuile d'application (Douze, Quatre) et icône en tête de carte */
.mv-charte .mv-tuile { display: block; width: 48px; height: 48px; margin: 0 0 var(--mv-e-3); }

/* Annotation posée comme une note de correcteur, sur sa propre ligne */
.mv-charte p.mv-annotation { margin: 0 0 var(--mv-e-3); }
.mv-charte .mv-feuille > .mv-question:first-child { margin-top: 0; }

/* 8. Motifs : à doser (CLAUDE.md § 7) ------------------------------------------ */
.mv-charte .mv-surligne {
  background-image: var(--mv-motif-surligne); padding: 0 0.12em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.mv-charte .mv-quadrille {
  background-color: var(--mv-papier); background-image: var(--mv-motif-quadrillage);
  background-size: var(--mv-motif-quadrillage-pas);
}
.mv-charte .mv-annotation {
  font-family: var(--mv-police-titre); font-style: italic; font-weight: 400;
  font-size: var(--mv-t-annotation); color: var(--mv-action);
}
.mv-charte .mv-sombre .mv-annotation { color: #FFFFFF; }

/* 9. Chrome LearnWorlds : filets de sécurité, si un réglage du thème ne prend pas -- */
/* Menu de la barre du haut (réglé « Fira Sans » sans être chargé : serif système) */
.lw-topbar-option-link { font-family: var(--mv-police-texte) !important; }
/* Bandeau cookies de LearnWorlds (.dataProtectionSettings, sur la couleur « Dark » du thème) :
   fond blanc, texte encre, liens et boutons bleu d'action (les boutons suivent la couleur de marque).
   Balisage relevé le 08.10.2026 : texte en p et span, deux liens a.dataProtectionSettingsDescr-link,
   deux <button class="dataProtectionSettings-btn learnworlds-button"> sans span intérieur :
   les règles ci-dessous n'atteignent pas les boutons. */
.dataProtectionSettings { box-shadow: 0 -2px 14px rgba(16, 42, 67, 0.16); }
.dataProtectionSettings-row.lw-dark-bg { background-color: #FFFFFF !important; color: var(--mv-encre) !important; }
.dataProtectionSettings-row.lw-dark-bg p, .dataProtectionSettings-row.lw-dark-bg span,
.dataProtectionSettings-row.lw-dark-bg label, .dataProtectionSettings-row.lw-dark-bg .learnworlds-icon { color: var(--mv-encre) !important; }
.dataProtectionSettings-row.lw-dark-bg a { color: var(--mv-action) !important; text-decoration: underline !important; }

/* Pied de page réglé sur la couleur « Dark » (#102A43) : liens et icônes clairs */
.lw-footer.lw-dark-bg a:not(.learnworlds-button),
.lw-footer.lw-dark-bg a:not(.learnworlds-button) * { color: var(--mv-pied-texte) !important; }
.lw-footer.lw-dark-bg a:not(.learnworlds-button):hover,
.lw-footer.lw-dark-bg a:not(.learnworlds-button):hover * { color: #FFFFFF !important; }
.lw-footer.lw-dark-bg a:focus-visible { outline: 3px solid var(--mv-focus-sombre) !important; outline-offset: 2px !important; }

/* 10. Barre du haut, plein format dès 991 px (v1.4, 09.10.2026) -------------------
   Constat (09.10.2026) : de 991 px (fin de la barre compacte de LearnWorlds) à 1200 px environ, le
   bouton « Essayer gratuitement » sort de l'écran à droite ou colle à son bord ; avec une 7e entrée
   « Blog », jusque vers 1330 à 1355 px selon la barre de défilement. Cause : chaque colonne de la
   barre et le menu central ajoutent 25 px de remplissage de chaque côté, et la barre ne rétrécit
   pas (étiquettes sur une ligne). On retire ces remplissages intérieurs puis, par paliers, on
   resserre les écarts ; les étiquettes du menu ne passent à 15 px qu'en dessous de 1023 px.
   Aucune entrée masquée. Réglé pour 7 entrées (avec « Blog ») : une 8e entrée ou des libellés plus
   longs demandent une nouvelle mesure. Vaut aussi pour la barre connecté (même structure, non
   vérifiée faute de connexion). Classes natives relevées le 09.10.2026. */

/* a) Dès 991 px (aligné aussi au-delà de 1366 px, décision de Marc du 09.10.2026) : plus de remplissage intérieur. Restent 25 px aux deux bords de la barre et
      24 px entre le logo, le menu et la colonne de droite. Les entrées gardent leurs 28 px. */
@media (min-width: 991px) {
  .lw-topbar .lw-cols > .col.lw-topbar-logo-col { padding-right: 0 !important; }
  .lw-topbar .lw-cols > .col:not(.lw-topbar-logo-col) { margin-left: 24px !important; padding-left: 0 !important; }
  .lw-topbar .lw-cols > .col:not(.lw-topbar-logo-col):not(:last-child) { padding-right: 0 !important; }
  .lw-topbar .lw-cols > .col .lw-topbar-menu-wrapper { padding-left: 0 !important; padding-right: 0 !important; }
}

/* b) De 991 à 1169 px (la barre n'a plus ses 1170 px) : bords à 16 px, 16 px entre les colonnes et
      entre « Connexion » et le bouton. L'écart entre deux entrées suit la largeur de la fenêtre :
      16 px à 1023 px, 22 px à 1065 px, 28 px (valeur d'origine) dès 1107 px. */
@media (min-width: 991px) and (max-width: 1169.9px) {
  .lw-topbar .lw-cols > .col.lw-topbar-logo-col { padding-left: 16px !important; }
  .lw-topbar .lw-cols > .col:last-child { padding-right: 16px !important; }
  .lw-topbar .lw-cols > .col:not(.lw-topbar-logo-col) { margin-left: 16px !important; }
  .lw-topbar .lw-cols > .col:nth-child(2) ul.lw-topbar-options > li.lw-topbar-option {
    margin-left: 8px !important; margin-right: 8px !important; /* repli sans clamp() (review du code) */
    margin-left: clamp(8px, calc((100vw - 911px) / 14), 14px) !important;
    margin-right: clamp(8px, calc((100vw - 911px) / 14), 14px) !important;
  }
  .lw-topbar .lw-cols > .col:last-child ul.lw-topbar-options > li.lw-topbar-option:not(:last-child) { margin-right: 16px !important; }
}

/* c) De 991 à 1022 px : étiquettes du menu central à 15 px (au lieu de 16), 16 px entre deux
      entrées, 12 px entre les colonnes et entre « Connexion » et le bouton. « Connexion » et le
      bouton gardent leurs 17 px. */
@media (min-width: 991px) and (max-width: 1022.9px) {
  .lw-topbar .lw-cols > .col:not(.lw-topbar-logo-col) { margin-left: 12px !important; }
  .lw-topbar .lw-cols > .col:nth-child(2) ul.lw-topbar-options > li.lw-topbar-option { margin-left: 8px !important; margin-right: 8px !important; }
  .lw-topbar .lw-cols > .col:nth-child(2) ul.lw-topbar-options > li.lw-topbar-option > .lw-topbar-option-link { font-size: 15px !important; }
  .lw-topbar .lw-cols > .col:last-child ul.lw-topbar-options > li.lw-topbar-option:not(:last-child) { margin-right: 12px !important; }
}

/* 11. Menu téléphone : neutralise une règle du thème LearnWorlds (v1.4, 09.10.2026) ---------------
   Le thème (bloc <style> en ligne, après « generic colors for old pages ») contient :
     @media (pointer: fine) and (max-device-width: 768px) { a span { display:none } a:hover span { display:inline-block } }
   Elle vise les appareils à petit écran (768 px de large au plus) avec souris ou stylet. Dans la
   barre, elle n'atteint que les libellés du menu téléphone, des <span> sans classe placés dans
   a.mobile-nav-menu-link : 14 entrées sur 17 (Tous les cours, 7H à 11H, Votre canton, ECR 8,
   Examens 11e, Gratuit, Tarifs, Méthode, À propos, Essayer gratuitement) deviennent des liens
   vides de 0 px, impossibles à voir, à survoler ou à toucher. Restent visibles « Les cours » et
   « Épreuves » (texte hors span), « Connexion » (div) et les chevrons (span.chevron, inline-flex).
   Les libellés de la barre pleine (span.lw-topbar-option-link-lbl) ne sont pas touchés : leur
   règle de classe passe devant. On rend aux libellés leur affichage normal, mesuré sans la règle :
   inline ; et inline-block là où la règle « haute densité » du thème (-webkit-min-device-pixel-ratio
   1.77) s'applique déjà aujourd'hui. Spécificité 0,4,2 : passe devant a span (0,0,2) et a:hover span
   (0,1,2), sans !important. */
@media (pointer: fine) and (max-device-width: 768px) {
  .lw-topbar .mobile-nav-menu a.mobile-nav-menu-link > span:not([class]) { display: inline; }
  @media screen and (-webkit-min-device-pixel-ratio: 1.77) {
    .lw-topbar .mobile-nav-menu a.mobile-nav-menu-link > span:not([class]) { display: inline-block; }
  }
}

/* 12. Compatibilité des embeds actuels (à retirer au fil du lot 4, règle par règle) ------------
   Reprise de l'emplacement « <style> Dynamic (css) » du 08.10.2026 (ancien bloc + correctif
   A1 v1.1), avec une seule différence : chaque règle exclut les éléments placés sous
   .mv-charte, pour ne jamais toucher un embed de la nouvelle charte.
   La règle de focus globale (a:focus-visible...) reste dans « <style> Dynamic », parce que
   cet emplacement atteint aussi les leçons. */

.mv-hero-cta:not(.mv-charte *), .mv-pricing-cta:not(.mv-charte *), .mv-ribbon:not(.mv-charte *) {
  background-color: #B45309 !important; color: #fff !important;
}
.mv-hero-badge:not(.mv-charte *), .mv-panel-badge.mv-badge-orange:not(.mv-charte *) { color: #92400E !important; }
.mv-art-body:not(.mv-charte *) { text-align: left; }

/* Boutons principaux orange : fond brun, texte blanc */
#pageContainer a.mv-btn:not(.mv-charte *),
#pageContainer a.hero-cta:not(.mv-charte *),
#pageContainer a.mvp-cta-1:not(.mv-charte *) {
  background-color: #B45309 !important; color: #FFFFFF !important; text-decoration: none !important; }
#pageContainer a.mv-btn:not(.mv-charte *):hover,
#pageContainer a.hero-cta:not(.mv-charte *):hover,
#pageContainer a.mvp-cta-1:not(.mv-charte *):hover { background-color: #92400E !important; }

/* Bouton e-mail de /contact */
#pageContainer a.mv-email-btn:not(.mv-charte *) {
  background-color: #0369A1 !important; color: #FFFFFF !important; text-decoration: none !important; }
#pageContainer a.mv-email-btn:not(.mv-charte *):hover { background-color: #075985 !important; }

/* Bouton de téléchargement (article cahier ECR) */
#pageContainer a.mv-dl-btn:not(.mv-charte *) {
  background-color: #047857 !important; color: #FFFFFF !important; text-decoration: none !important; }
#pageContainer a.mv-dl-btn:not(.mv-charte *):hover { background-color: #065F46 !important; }

/* Boutons secondaires */
#pageContainer a.mv-btn-ghost:not(.mv-charte *),
#pageContainer a.mvp-cta-2:not(.mv-charte *),
#pageContainer a.mv-hero-cta[style*="background: #fff"]:not(.mv-charte *) {
  background-color: #FFFFFF !important; color: #0369A1 !important; border: 2px solid #0369A1 !important; text-decoration: none !important; }
#pageContainer a.mv-btn-ghost:not(.mv-charte *):hover,
#pageContainer a.mvp-cta-2:not(.mv-charte *):hover,
#pageContainer a.mv-hero-cta[style*="background: #fff"]:not(.mv-charte *):hover { background-color: #E0F2FE !important; }

/* Bouton violet « Pack Examens 11e » de /courses */
#pageContainer a.mv-cs-cta.mv-cs-cta-purple:not(.mv-charte *) { background-color: #6D28D9 !important; }
#pageContainer a.mv-cs-cta.mv-cs-cta-purple:not(.mv-charte *):hover { background-color: #5B21B6 !important; }

/* Pas de soulignement sur les autres boutons d'embed */
#pageContainer a.mv-hero-cta:not(.mv-charte *),
#pageContainer a.mv-pricing-cta:not(.mv-charte *),
#pageContainer a.mv-cs-cta:not(.mv-charte *),
#pageContainer a.mvd-cta:not(.mv-charte *) { text-decoration: none !important; }

/* Focus clavier visible sur ces boutons */
#pageContainer a.mv-btn:not(.mv-charte *):focus-visible, #pageContainer a.hero-cta:not(.mv-charte *):focus-visible,
#pageContainer a.mvp-cta-1:not(.mv-charte *):focus-visible, #pageContainer a.mvp-cta-2:not(.mv-charte *):focus-visible,
#pageContainer a.mv-email-btn:not(.mv-charte *):focus-visible, #pageContainer a.mv-dl-btn:not(.mv-charte *):focus-visible,
#pageContainer a.mv-btn-ghost:not(.mv-charte *):focus-visible, #pageContainer a.mv-hero-cta:not(.mv-charte *):focus-visible,
#pageContainer a.mv-pricing-cta:not(.mv-charte *):focus-visible, #pageContainer a.mv-cs-cta:not(.mv-charte *):focus-visible {
  outline: 3px solid #0C4A6E !important; outline-offset: 3px !important; }

/* 13. Gestes animés (v1.5, 19.10.2026) ------------------------------------------------------
   Le surligneur se trace, le cercle au feutre et la coche se dessinent, une seule fois, à leur
   entrée dans l'écran. Pilotés par mv-gestes-1.0.js, qui pose sur l'élément .est-trace (le geste
   part) puis .est-fini (le geste est posé).
   RÈGLE : le repos est l'état final. Les états « avant le geste » n'existent que sous html.mv-js
   (classe posée par la deuxième ligne du <head>, retirée si le script n'a pas tourné quand le
   document est prêt, ou au bout de 8 s) ET sous prefers-reduced-motion: no-preference. Sans script, sans JavaScript ou avec
   « réduire les animations », tout est posé dès l'affichage.
   Dosage inchangé (CLAUDE.md § 7) : un trait jaune par écran, une annotation (cercle et sa note)
   par section, coche seulement après une vérification réelle. */
.mv-charte {
  --mv-geste-surligne: 700ms;
  --mv-geste-cercle: 850ms;
  --mv-geste-coche: 400ms;
  --mv-geste-courbe: cubic-bezier(0.25, 0.7, 0.2, 1);
}
.mv-charte .mv-surligne { background-repeat: no-repeat; background-position: 0 0; background-size: 100% 100%; }

/* Cercle au feutre : bleu stylo, 2,5 px, boucle ouverte qui dépasse son départ, autour de deux à
   quatre mots. Le tracé SVG (pathLength="1") est écrit dans l'embed ; il s'étire sur la boîte du
   texte. --bloc : autour d'un groupe qui peut passer sur deux lignes (tracé en rectangle arrondi). */
.mv-charte .mv-entoure { position: relative; display: inline-block; white-space: nowrap; padding: 0 0.15em; margin: 0 0.3em; }
.mv-charte .mv-entoure--bloc { white-space: normal; max-width: calc(100% - 0.6em); padding: 0.1em 0.3em; }
.mv-charte .mv-entoure > svg {
  position: absolute; left: -0.45em; top: -0.4em; width: calc(100% + 0.9em); height: calc(100% + 0.8em);
  max-width: none; overflow: visible; pointer-events: none;
}
.mv-charte .mv-entoure--bloc > svg { left: -0.35em; top: -0.35em; width: calc(100% + 0.7em); height: calc(100% + 0.7em); }
.mv-charte .mv-geste-trait { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mv-charte .mv-entoure .mv-geste-trait { stroke: var(--mv-action); stroke-width: 2.5; vector-effect: non-scaling-stroke; }

/* Coche dessinée : verte, 3 px */
.mv-charte .mv-coche { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex: none; overflow: visible; }
.mv-charte .mv-coche .mv-geste-trait { stroke: var(--mv-verif); stroke-width: 3; }

@media (prefers-reduced-motion: no-preference) {
  .mv-js .mv-charte .mv-surligne { transition: background-size var(--mv-geste-surligne) var(--mv-geste-courbe); }
  .mv-js .mv-charte .mv-surligne:not(.est-trace) { background-size: 0% 100%; }
  .mv-js .mv-charte .mv-entoure:not(.est-fini) .mv-geste-trait,
  .mv-js .mv-charte .mv-coche:not(.est-fini) .mv-geste-trait { stroke-dasharray: 1 1; }
  .mv-js .mv-charte .mv-entoure:not(.est-trace) .mv-geste-trait,
  .mv-js .mv-charte .mv-coche:not(.est-trace) .mv-geste-trait { stroke-dashoffset: 1; opacity: 0; }
  .mv-js .mv-charte .mv-entoure.est-trace:not(.est-fini) .mv-geste-trait {
    stroke-dashoffset: 0; transition: stroke-dashoffset var(--mv-geste-cercle) var(--mv-geste-courbe);
  }
  .mv-js .mv-charte .mv-coche.est-trace:not(.est-fini) .mv-geste-trait {
    stroke-dashoffset: 0; transition: stroke-dashoffset var(--mv-geste-coche) ease-out;
  }
}
@media print {
  .mv-charte [data-mv-exo] .mv-exo__retour { display: block !important; }
  .mv-charte [data-mv-exo] [data-mv-si] { display: none !important; }
  .mv-charte [data-mv-exo] .mv-verdict[data-mv-si="voir"] { display: flex !important; }
  .mv-charte [data-mv-exo] .mv-exo__aide, .mv-charte [data-mv-exo] .mv-exo__retour .mv-actions,
  .mv-charte .mv-video__bouton { display: none !important; }
  .mv-js .mv-charte .mv-surligne { background-size: 100% 100% !important; }
  .mv-js .mv-charte .mv-geste-trait { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; }
}

/* 14. Exercice de 30 secondes (v1.5, 19.10.2026) ----------------------------------------------
   Une question, des réponses à choisir, puis la correction : un encadré « Piège » propre à chaque
   réponse fausse, la démarche, une vérification. Balisage : .mv-feuille[data-mv-exo]
   [data-mv-juste="<valeur>"], boutons .mv-choix[data-mv-rep], blocs [data-mv-si="juste" | "voir" |
   <valeur fausse>] dans .mv-exo__retour.
   Les boutons sont livrés désactivés. Tant que le script n'a pas branché l'exercice (classe .est-arme
   posée en dernier), la correction est visible sous la question avec le bloc « voir » (la réponse) :
   la page reste complète, quoi qu'il arrive au script. Une fois armé, elle s'ouvre après une réponse. */
.mv-charte .mv-exo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--mv-e-7); align-items: start; }
@media (max-width: 900px) { .mv-charte .mv-exo { grid-template-columns: minmax(0, 1fr); gap: var(--mv-e-5); } }
.mv-charte .mv-exo__enonce {
  font-family: var(--mv-police-titre); font-weight: 600; font-size: var(--mv-t-h4); line-height: var(--mv-i-h4); color: var(--mv-encre);
}
.mv-charte .mv-exo__enonce i, .mv-charte .mv-choix i, .mv-charte .mv-calcul i, .mv-charte .mv-exo__retour i { font-family: var(--mv-police-titre); font-style: italic; }
.mv-charte .mv-exo__choix { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mv-e-3); margin: var(--mv-e-5) 0 var(--mv-e-2); }
.mv-charte .mv-exo__choix--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .mv-charte .mv-exo__choix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mv-charte .mv-exo__choix--3 { grid-template-columns: minmax(0, 1fr); }
}
#pageContainer .mv-charte .mv-choix, .mv-charte .mv-choix {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 56px; margin: 0; padding: 10px 8px; border-radius: var(--mv-r-2);
  background: var(--mv-feuille); border: 1.5px solid var(--mv-filet-champ); color: var(--mv-encre);
  font-family: var(--mv-police-titre); font-weight: 600; font-size: 22px; line-height: 1.15;
  font-variant-numeric: tabular-nums; text-align: center; cursor: pointer; opacity: 1;
  -webkit-appearance: none; appearance: none; box-shadow: none; text-transform: none; letter-spacing: 0;
}
.mv-charte .mv-choix > span { display: inline; }
.mv-charte .mv-choix small { font-family: var(--mv-police-texte); font-weight: 600; font-size: 15px; line-height: 1; color: var(--mv-encre-2); }
.mv-charte .mv-choix--mot { font-size: 19px; }
#pageContainer .mv-charte .mv-choix:hover:not(:disabled), .mv-charte .mv-choix:hover:not(:disabled) { background: var(--mv-surligneur-doux); }
#pageContainer .mv-charte .mv-choix:disabled, .mv-charte .mv-choix:disabled { cursor: default; color: var(--mv-encre-3); border-color: var(--mv-filet); background: var(--mv-feuille); }
#pageContainer .mv-charte .mv-choix[aria-pressed="true"], .mv-charte .mv-choix[aria-pressed="true"] { color: var(--mv-encre); border: 2.5px solid var(--mv-encre); }
#pageContainer .mv-charte .mv-choix.est-juste, .mv-charte .mv-choix.est-juste { color: var(--mv-encre); border: 2.5px solid var(--mv-verif); background: var(--mv-verif-doux); }
.mv-charte .mv-choix__signe { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--mv-verif); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mv-charte .mv-masque { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Bouton qui se lit comme un lien (« Voir la correction sans répondre », « Réessayer ») */
#pageContainer .mv-charte .mv-lien-bouton, .mv-charte .mv-lien-bouton {
  display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0; border: 0; background: none;
  font-family: var(--mv-police-texte); font-size: var(--mv-t-petit); font-weight: 400; line-height: 1.4;
  color: var(--mv-action); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer;
  -webkit-appearance: none; appearance: none; text-transform: none; letter-spacing: 0;
}
#pageContainer .mv-charte .mv-lien-bouton:hover, .mv-charte .mv-lien-bouton:hover { color: var(--mv-encre); background: var(--mv-surligneur-doux); }
.mv-charte .mv-exo__aide { margin: 0; }

.mv-charte .mv-exo__retour { border-top: 1px solid var(--mv-filet); margin-top: var(--mv-e-4); padding-top: var(--mv-e-5); scroll-margin-top: 96px; }
.mv-charte .mv-exo__retour:focus { outline: none; }
.mv-charte .mv-exo__retour:focus-visible { outline: 3px solid var(--mv-focus); outline-offset: 6px; border-radius: 2px; }
.mv-charte .mv-exo__retour > :last-child { margin-bottom: 0; }
.mv-charte [data-mv-exo].est-arme .mv-exo__retour:not(.est-ouvert) { display: none; }
.mv-charte [data-mv-exo]:not(.est-arme) .mv-exo__aide,
.mv-charte [data-mv-exo]:not(.est-arme) [data-mv-reessayer],
#pageContainer .mv-charte [data-mv-exo]:not(.est-arme) [data-mv-reessayer] { display: none; }

.mv-charte .mv-verdict { align-items: center; gap: var(--mv-e-2); margin: 0 0 var(--mv-e-5); font-weight: 700; color: var(--mv-encre); }
.mv-charte .mv-verdict--juste { color: var(--mv-verif); }
.mv-charte .mv-verdict .mv-coche { width: 28px; height: 28px; vertical-align: 0; }
/* Un seul bloc de correction visible : celui de la réponse donnée (placé après .mv-verdict) */
.mv-charte [data-mv-si] { display: none; }
.mv-charte [data-mv-si].est-actif { display: block; }
.mv-charte .mv-verdict[data-mv-si].est-actif { display: flex; }
.mv-charte [data-mv-exo]:not(.est-arme) [data-mv-si="voir"] { display: block; }
.mv-charte [data-mv-exo]:not(.est-arme) .mv-verdict[data-mv-si="voir"] { display: flex; }
.mv-charte .mv-exo__sous-titre {
  font-size: var(--mv-t-surtitre); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mv-encre-3); margin: 0 0 var(--mv-e-3);
}

/* La démarche, ligne par ligne : quoi, détail, résultat */
.mv-charte .mv-calcul { list-style: none; padding: 0; margin: 0 0 var(--mv-e-4); font-variant-numeric: tabular-nums; }
.mv-charte .mv-calcul > li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--mv-e-2) var(--mv-e-4); align-items: baseline;
  padding: 12px 0; margin: 0; border-top: 1px solid var(--mv-filet);
}
.mv-charte .mv-calcul > li:last-child { border-bottom: 1px solid var(--mv-filet); }
.mv-charte .mv-calcul__quoi { min-width: 0; }
.mv-charte .mv-calcul__quoi strong { display: block; font-size: var(--mv-t-petit); font-weight: 700; color: var(--mv-encre-2); }
.mv-charte .mv-calcul__detail { color: var(--mv-encre-2); text-align: right; white-space: nowrap; }
.mv-charte .mv-calcul__resultat {
  font-family: var(--mv-police-titre); font-weight: 700; font-size: 21px; color: var(--mv-encre);
  text-align: right; white-space: nowrap; min-width: 4.6em;
}
@media (max-width: 640px) {
  .mv-charte .mv-calcul > li { grid-template-columns: minmax(0, 1fr) auto; }
  .mv-charte .mv-calcul__detail { grid-column: 1; grid-row: 2; text-align: left; }
  .mv-charte .mv-calcul__resultat { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* 15. Vidéo en image fixe (v1.5, 19.10.2026) ---------------------------------------------------
   Lien vers YouTube posé sur l'image de la vidéo. Au clic, le script le remplace par le lecteur
   (youtube-nocookie.com) : rien n'est chargé depuis YouTube avant ce clic. Sans script, le lien
   ouvre la vidéo sur YouTube. Le cadre .mv-video (section 7) garde le format 16:9. */
@supports not (aspect-ratio: 16 / 9) {
  .mv-charte .mv-video::before { content: ""; display: block; padding-top: 56.25%; }
}
.mv-charte .mv-video { box-shadow: var(--mv-ombre-posee); }
#pageContainer .mv-charte a.mv-video__lien, .mv-charte a.mv-video__lien {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block;
  background: transparent !important; text-decoration: none !important;
}
.mv-charte .mv-video__lien img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Bouton de lecture posé sur le bas du portrait de l'image (ni sur le titre ni sur le visage) */
.mv-charte .mv-video__bouton {
  position: absolute; left: 80%; top: 77%; width: 64px; height: 64px; margin: -32px 0 0 -32px;
  border-radius: 50%; background: var(--mv-action); box-shadow: 0 4px 14px rgba(16, 42, 67, 0.35);
  display: flex; align-items: center; justify-content: center; transition: background-color 150ms ease, transform 150ms ease;
}
.mv-charte .mv-video__bouton svg { width: 30px; height: 30px; margin-left: 4px; fill: #FFFFFF; }
@media (max-width: 640px) {
  .mv-charte .mv-video__bouton { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
  .mv-charte .mv-video__bouton svg { width: 22px; height: 22px; margin-left: 3px; }
}
.mv-charte .mv-video__lien:hover .mv-video__bouton { background: var(--mv-action-survol); }
@media (prefers-reduced-motion: no-preference) {
  .mv-charte .mv-video__lien:hover .mv-video__bouton { transform: scale(1.06); }
}
#pageContainer .mv-charte a.mv-video__lien:focus-visible, .mv-charte a.mv-video__lien:focus-visible { outline: 3px solid var(--mv-focus) !important; outline-offset: 3px !important; }
.mv-charte .mv-video + .mv-legende { margin-top: var(--mv-e-3); }
.mv-charte .mv-colonne-texte .mv-video { margin-top: var(--mv-e-5); }

/* fin de mv-charte-1.5.css */