@charset "UTF-8";
/* ==========================================================================
   Feuille de style unique
   Aucune dépendance externe : pas de CDN, pas de police distante, pas de
   framework. Tout est servi depuis le domaine. Piles de polices système.
   Organisation :
     1. Jetons (:root)      7. Boutons          13. Tarifs
     2. Réinitialisation    8. Cartes           14. Accordéon
     3. Typographie         9. Bandeau          15. Formulaires
     4. Mise en page       10. Encadré          16. Questionnaire
     5. En-tête            11. Progression      17. Utilitaires
     6. Pied de page       12. Traits           18. Impression
   ========================================================================== */

/* 1. JETONS ================================================================ */
:root {
  /* Couleurs de marque — issues du logo et des rapports PDF. Ne pas modifier. */
  --mna-primaire: #27358F;
  --mna-primaire-fonce: #1D2969;
  --mna-primaire-voile: #E8EAF4;
  --mna-secondaire: #3A7CA5;
  --mna-secondaire-fonce: #2C5F80;
  --mna-secondaire-voile: #E6EFF5;
  --mna-accent: #E08A2E;
  --mna-accent-texte: #8A530F;   /* ambre lisible sur fond clair (AA) */
  --mna-accent-clair: #F0A94A;   /* ambre lisible sur fond marine (AA) */
  --mna-accent-voile: #FBF0E0;

  /* Neutres */
  --mna-encre: #1B2340;
  --mna-texte: #1B2340;
  --mna-texte-secondaire: #5A6785;
  --mna-fond: #FFFFFF;
  --mna-fond-doux: #F4F5FA;
  --mna-bordure: #D9DEEC;        /* filets décoratifs (cartes, tableaux) */
  --mna-bordure-forte: #7D88A8;  /* contour des champs : 3.5:1 sur blanc (WCAG 1.4.11) */
  --mna-blanc: #FFFFFF;
  --mna-blanc-voile: #C9D0E6;    /* texte secondaire sur fond marine */
  --mna-succes: #216B4A;
  --mna-alerte: #A32520;         /* 6.4:1 sur blanc */
  --mna-alerte-voile: #FBECEA;

  /* Polices — piles système uniquement */
  --mna-police: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --mna-police-titre: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
                      "Noto Serif", "Liberation Serif", "Times New Roman", serif;

  /* Échelle typographique fluide */
  --mna-t-xs: 0.78rem;
  --mna-t-s: 0.9rem;
  --mna-t-m: 1rem;
  --mna-t-l: 1.09rem;
  --mna-t-xl: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);
  --mna-t-2xl: clamp(1.45rem, 1.2rem + 1.1vw, 1.9rem);
  --mna-t-3xl: clamp(1.8rem, 1.4rem + 1.9vw, 2.6rem);
  --mna-t-4xl: clamp(2.1rem, 1.5rem + 2.9vw, 3.3rem);

  /* Espacements (base 4px) */
  --mna-e1: 0.25rem;
  --mna-e2: 0.5rem;
  --mna-e3: 0.75rem;
  --mna-e4: 1rem;
  --mna-e5: 1.5rem;
  --mna-e6: 2rem;
  --mna-e7: 3rem;
  --mna-e8: 4rem;
  --mna-e9: 6rem;

  /* Largeurs */
  --mna-largeur: 1120px;
  --mna-largeur-etroite: 660px;
  --mna-largeur-texte: 68ch;

  /* Rayons, ombres, transitions */
  --mna-rayon-s: 6px;
  --mna-rayon-m: 10px;
  --mna-rayon-l: 16px;
  --mna-rayon-pleine: 999px;
  --mna-ombre-1: 0 1px 2px rgba(27, 35, 64, 0.06), 0 2px 8px rgba(27, 35, 64, 0.05);
  --mna-ombre-2: 0 2px 6px rgba(27, 35, 64, 0.08), 0 12px 28px rgba(27, 35, 64, 0.09);
  --mna-transition: 140ms ease-out;

  /* Cible tactile minimale */
  --mna-cible: 48px;

  /* Mise au point clavier : le trait porteur de contraste est marine sur fond
     clair (10.5:1) et ambre clair sur fond marine (5.3:1) ; le halo ambré n'est
     que décoratif. */
  --mna-focus: var(--mna-primaire);
  --mna-focus-clair: var(--mna-accent-clair);
  --mna-focus-halo: 0 0 0 6px rgba(224, 138, 46, 0.45);
}

/* 2. RÉINITIALISATION ====================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--mna-fond);
  color: var(--mna-texte);
  font-family: var(--mna-police);
  font-size: var(--mna-t-m);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

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

/* Focus visible partout, sans exception. */
:focus-visible {
  outline: 3px solid var(--mna-focus);
  outline-offset: 2px;
  box-shadow: var(--mna-focus-halo);
  border-radius: var(--mna-rayon-s);
}
.mna-bandeau :focus-visible,
.mna-pied :focus-visible,
.mna-carte--marine :focus-visible { outline-color: var(--mna-focus-clair); }

/* Page de questions : défilement immédiat et prévisible (un défilement
   « doux » amplifiait les sauts quand la page se repositionnait). */
html:has(.mna-formulaire) { scroll-behavior: auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* 3. TYPOGRAPHIE =========================================================== */
h1, h2, h3, h4 {
  font-family: var(--mna-police-titre);
  color: var(--mna-encre);
  line-height: 1.2;
  margin: 0 0 var(--mna-e4);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: var(--mna-t-4xl); }
h2 { font-size: var(--mna-t-3xl); }
h3 { font-size: var(--mna-t-xl); }
h4 { font-size: var(--mna-t-l); font-family: var(--mna-police); letter-spacing: 0; }

p, ul, ol, dl, table, figure { margin: 0 0 var(--mna-e4); }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a {
  color: var(--mna-primaire);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--mna-primaire-fonce); }

strong, b { font-weight: 700; color: var(--mna-encre); }
small { font-size: var(--mna-t-s); }

hr {
  border: 0;
  border-top: 1px solid var(--mna-bordure);
  margin: var(--mna-e6) 0;
}

blockquote {
  margin: var(--mna-e5) 0;
  padding-left: var(--mna-e5);
  border-left: 3px solid var(--mna-accent);
  font-family: var(--mna-police-titre);
  font-size: var(--mna-t-xl);
  color: var(--mna-encre);
}

/* Éléments de texte réutilisables */
.mna-surtitre {
  display: block;
  font-family: var(--mna-police);
  font-size: var(--mna-t-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mna-secondaire-fonce);
  margin-bottom: var(--mna-e3);
}
.mna-bandeau .mna-surtitre { color: var(--mna-accent-clair); }

.mna-chapeau {
  font-size: var(--mna-t-xl);
  line-height: 1.5;
  color: var(--mna-texte-secondaire);
  max-width: 58ch;
}
.mna-bandeau .mna-chapeau { color: var(--mna-blanc-voile); }

.mna-secondaire { color: var(--mna-texte-secondaire); }
.mna-mention { font-size: var(--mna-t-s); color: var(--mna-texte-secondaire); }

.mna-etiquette {
  display: inline-block;
  padding: var(--mna-e1) var(--mna-e3);
  border-radius: var(--mna-rayon-pleine);
  background: var(--mna-primaire-voile);
  color: var(--mna-primaire-fonce);
  font-size: var(--mna-t-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.mna-etiquette--accent { background: var(--mna-accent-voile); color: var(--mna-accent-texte); }
.mna-etiquette--claire { background: rgba(255, 255, 255, 0.14); color: var(--mna-blanc); }

/* Listes à coches et à croix */
.mna-liste-coches { list-style: none; padding: 0; }
.mna-liste-coches > li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: var(--mna-e3);
}
.mna-liste-coches > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.95rem;
  height: 0.5rem;
  border-left: 2.5px solid var(--mna-secondaire);
  border-bottom: 2.5px solid var(--mna-secondaire);
  transform: rotate(-45deg);
}
.mna-liste-coches--accent > li::before { border-color: var(--mna-accent-texte); }
.mna-bandeau .mna-liste-coches > li::before { border-color: var(--mna-accent-clair); }

.mna-liste-croix { list-style: none; padding: 0; }
.mna-liste-croix > li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: var(--mna-e3);
}
.mna-liste-croix > li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--mna-texte-secondaire);
}

/* 4. MISE EN PAGE ========================================================== */
.mna-conteneur {
  width: 100%;
  max-width: var(--mna-largeur);
  margin-inline: auto;
  padding-inline: var(--mna-e4);
}
.mna-conteneur--etroit { max-width: var(--mna-largeur-etroite); }
.mna-conteneur--lecture { max-width: var(--mna-largeur-texte); }

@media (min-width: 40em) {
  .mna-conteneur { padding-inline: var(--mna-e5); }
}

.mna-principal { flex: 1 0 auto; }

.mna-section { padding-block: var(--mna-e7); }
.mna-section--doux { background: var(--mna-fond-doux); }
.mna-section--compacte { padding-block: var(--mna-e6); }
.mna-section--ample { padding-block: var(--mna-e8); }

@media (min-width: 48em) {
  .mna-section { padding-block: var(--mna-e8); }
  .mna-section--ample { padding-block: var(--mna-e9); }
}

.mna-section__entete { max-width: 62ch; margin-bottom: var(--mna-e6); }
.mna-section__entete--centre { margin-inline: auto; text-align: center; }
.mna-section__entete--centre .mna-chapeau { margin-inline: auto; }

/* Grille — mobile d'abord, une colonne puis N */
.mna-grille { display: grid; gap: var(--mna-e4); }
@media (min-width: 40em) {
  .mna-grille { gap: var(--mna-e5); }
  .mna-grille--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 60em) {
  .mna-grille--3 { grid-template-columns: repeat(3, 1fr); }
  .mna-grille--4 { grid-template-columns: repeat(4, 1fr); }
  .mna-grille--principal-annexe { grid-template-columns: 1.55fr 1fr; align-items: start; }
}

.mna-pile { display: flex; flex-direction: column; gap: var(--mna-e4); }
.mna-rangee { display: flex; flex-wrap: wrap; gap: var(--mna-e3); align-items: center; }
.mna-rangee--centre { justify-content: center; }
.mna-rangee--entre { justify-content: space-between; }

/* 5. EN-TÊTE =============================================================== */
.mna-saut {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--mna-e3) var(--mna-e4);
  background: var(--mna-primaire);
  color: var(--mna-blanc);
  border-radius: 0 0 var(--mna-rayon-m) 0;
}
.mna-saut:focus { left: 0; }

.mna-entete {
  background: var(--mna-blanc);
  border-bottom: 1px solid var(--mna-bordure);
}
.mna-entete__barre {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mna-e2);
  padding-block: var(--mna-e3);
}
.mna-entete__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.mna-entete__logo img { height: 34px; width: auto; display: block; }

/* Navigation : liste qui défile horizontalement au pouce, barre alignée à
   partir de 64em. Rien ne dépend de JavaScript.

   POURQUOI 64em (1024 px) ET NON 62em (992 px), COMME AVANT. Mesuré : entre
   992 et 1023 px, la dernière entrée du menu passait PAR-DESSUS le bouton
   « Mon compte » — de 16 px à 992. La barre s'alignait avant d'en avoir la
   place. On attend donc 1024. En dessous, la mise en page du téléphone
   s'applique : logo au-dessus, menu qui défile de gauche à droite. */
.mna-nav__liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mna-e1) var(--mna-e2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.mna-nav__lien {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--mna-e2) var(--mna-e3);
  border-radius: var(--mna-rayon-s);
  font-size: var(--mna-t-s);
  font-weight: 600;
  color: var(--mna-encre);
  text-decoration: none;
}
.mna-nav__lien:hover { background: var(--mna-fond-doux); color: var(--mna-primaire); }
.mna-nav__lien[aria-current="page"] {
  color: var(--mna-primaire);
  background: var(--mna-primaire-voile);
  box-shadow: inset 0 -3px 0 var(--mna-accent);
}

@media (min-width: 64em) {
  /* L'en-tête ne devient collant que sur grand écran : sur téléphone, il ne
     doit pas manger la hauteur utile pendant la passation. */
  .mna-entete {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.97);
    /* Filet de séparation : sans lui, le contenu qui défile dessous affleure
       l'en-tête translucide et les éléments bordés — le bouton « Mon compte »
       en particulier — paraissent coupés. */
    border-bottom: 1px solid var(--mna-bordure);
  }
  .mna-entete__barre {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--mna-e4);
    min-height: 68px;
    padding-block: var(--mna-e2);
  }
  .mna-entete__logo img { height: 42px; }
  .mna-nav__liste { flex-wrap: nowrap; }
  .mna-nav__lien { min-height: auto; white-space: nowrap; }

  /* LARGEUR DU MENU — POURQUOI IL N'Y A PLUS DE DÉFILEMENT ICI.
     Le menu débordait : à 1200 px, le bord droit du bouton « Mon compte »
     sortait à 1207. La rustine était de faire défiler le menu
     (`overflow-x: auto`). Elle ne tient plus : un sous-menu déroulant placé
     dans un conteneur qui défile est DÉCOUPÉ par ce conteneur — il faut
     choisir entre le défilement et le menu déroulant.
     On a donc supprimé la cause au lieu de la contenir : les deux tests ne
     forment plus qu'une entrée, et l'écartement se resserre sur les largeurs
     moyennes. Le menu tient sans défiler, et le sous-menu peut déborder.
     Le défilement horizontal reste en place SOUS 64em (voir plus bas) : au
     pouce, c'est le bon comportement, et aucun sous-menu ne s'y déroule. */
  .mna-entete__logo,
  .mna-entete__compte { flex: 0 0 auto; }
  .mna-nav { min-width: 0; }
}

/* Largeurs moyennes : on resserre plutôt que de faire défiler. */
@media (min-width: 64em) and (max-width: 87.5em) {
  .mna-nav__liste { gap: var(--mna-e1); }
  .mna-nav__lien { padding-inline: var(--mna-e2); }
  .mna-entete__barre { gap: var(--mna-e3); }
}

/* 5 bis. SOUS-MENU DÉROULANT ================================================
   Sans JavaScript : `:hover` pour la souris, `:focus-within` pour le clavier.
   Le lien parent reste un vrai lien — quelqu'un qui clique dessus arrive sur
   la page qui présente les deux tests, et ne dépend donc jamais du déroulé. */
.mna-nav__groupe { position: relative; }
/* Le chevron n'apparaît QUE là où le déroulé fonctionne. Au pouce, il
   promettrait un menu qui ne s'ouvre pas — l'entrée y est un lien ordinaire
   vers la page qui présente les deux tests. */
.mna-nav__chevron { display: none; }
@media (min-width: 64em) {
  .mna-nav__chevron {
    display: inline-block;
    margin-left: 0.35em;
    flex: 0 0 auto;
    transition: transform 0.15s ease;
  }
}

/* Fermé par défaut, et fermé pour de bon : `display: none` le retire aussi
   du parcours au clavier, ce qui évite de tabuler dans un menu invisible. */
.mna-sous-menu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 64em) {
  .mna-sous-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;                  /* au-dessus de l'en-tête collant (z-index 50) */
    min-width: 17rem;
    padding: var(--mna-e2);
    background: var(--mna-blanc);
    border: 1px solid var(--mna-bordure);
    border-radius: var(--mna-rayon-m);
    box-shadow: 0 12px 28px rgba(16, 24, 55, 0.13);
  }
  /* Pont invisible entre le lien et le panneau : sans lui, le menu se referme
     dès que la souris traverse l'interstice, et devient inutilisable. */
  .mna-nav__groupe::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: var(--mna-e3);
  }
  .mna-nav__groupe:hover > .mna-sous-menu,
  .mna-nav__groupe:focus-within > .mna-sous-menu { display: block; }
  .mna-nav__groupe:hover .mna-nav__chevron,
  .mna-nav__groupe:focus-within .mna-nav__chevron { transform: rotate(180deg); }
  .mna-nav__groupe:hover > .mna-nav__lien,
  .mna-nav__groupe:focus-within > .mna-nav__lien {
    background: var(--mna-fond-doux);
    color: var(--mna-primaire);
  }
}

.mna-sous-menu__lien {
  display: block;
  padding: var(--mna-e3);
  border-radius: var(--mna-rayon-s);
  text-decoration: none;
  color: var(--mna-encre);
}
.mna-sous-menu__lien:hover,
.mna-sous-menu__lien:focus-visible { background: var(--mna-primaire-voile); }
.mna-sous-menu__titre {
  display: block;
  font-weight: 700;
  font-size: var(--mna-t-s);
  color: var(--mna-encre);
}
.mna-sous-menu__lien:hover .mna-sous-menu__titre { color: var(--mna-primaire); }
.mna-sous-menu__precision {
  display: block;
  font-size: var(--mna-t-xs);
  color: var(--mna-texte-secondaire);
  margin-top: 0.1rem;
}

/* Le mouvement du chevron est un agrément, pas une information : on le retire
   pour qui demande moins d'animation. Le menu, lui, s'ouvre toujours. */
@media (prefers-reduced-motion: reduce) {
  .mna-nav__chevron { transition: none; }
}

/* 6. PIED DE PAGE ========================================================== */
.mna-pied {
  flex-shrink: 0;
  background: var(--mna-encre);
  color: var(--mna-blanc-voile);
  padding-block: var(--mna-e7) var(--mna-e5);
  font-size: var(--mna-t-s);
}
.mna-pied a { color: var(--mna-blanc); text-decoration: none; }
.mna-pied a:hover { color: var(--mna-accent-clair); text-decoration: underline; }
.mna-pied__haut {
  display: grid;
  gap: var(--mna-e6);
  padding-bottom: var(--mna-e5);
}
@media (min-width: 48em) {
  .mna-pied__haut { grid-template-columns: 1.4fr 1fr 1fr; }
}
.mna-pied__logo img { height: 46px; width: auto; }
.mna-pied__titre {
  font-family: var(--mna-police);
  font-size: var(--mna-t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mna-blanc);
  margin-bottom: var(--mna-e3);
}
.mna-pied__liste { list-style: none; margin: 0; padding: 0; }
.mna-pied__liste li { margin-bottom: var(--mna-e2); }
.mna-pied__liste a {
  display: inline-block;
  padding-block: var(--mna-e1);
}
.mna-pied__bas {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: var(--mna-e4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--mna-e3) var(--mna-e5);
  justify-content: space-between;
  font-size: var(--mna-t-xs);
}
.mna-pied__suisse {
  display: inline-flex;
  align-items: center;
  gap: var(--mna-e2);
  font-weight: 600;
  color: var(--mna-blanc);
}
.mna-pied__suisse::before {
  content: "";
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  border-radius: 2px;
  background:
    linear-gradient(to bottom, transparent 38%, #fff 38%, #fff 62%, transparent 62%),
    linear-gradient(to right, transparent 38%, #fff 38%, #fff 62%, transparent 62%),
    #D8232A;
}

/* 7. BOUTONS =============================================================== */
.mna-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mna-e2);
  min-height: var(--mna-cible);
  padding: var(--mna-e3) var(--mna-e5);
  border: 2px solid transparent;
  border-radius: var(--mna-rayon-m);
  font-family: var(--mna-police);
  font-size: var(--mna-t-m);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--mna-transition), border-color var(--mna-transition),
              transform var(--mna-transition), box-shadow var(--mna-transition);
}
.mna-bouton:active { transform: translateY(1px); }

.mna-bouton--principal {
  background: var(--mna-primaire);
  border-color: var(--mna-primaire);
  color: var(--mna-blanc);
  box-shadow: var(--mna-ombre-1);
}
.mna-bouton--principal:hover {
  background: var(--mna-primaire-fonce);
  border-color: var(--mna-primaire-fonce);
  color: var(--mna-blanc);
}

.mna-bouton--secondaire {
  background: var(--mna-blanc);
  border-color: var(--mna-primaire);
  color: var(--mna-primaire);
}
.mna-bouton--secondaire:hover { background: var(--mna-primaire-voile); color: var(--mna-primaire-fonce); }

.mna-bouton--discret {
  background: transparent;
  border-color: transparent;
  color: var(--mna-primaire);
  padding-inline: var(--mna-e3);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.mna-bouton--discret:hover { background: var(--mna-fond-doux); }

/* Variante pour fond marine */
.mna-bandeau .mna-bouton--principal,
.mna-bouton--inverse {
  background: var(--mna-blanc);
  border-color: var(--mna-blanc);
  color: var(--mna-primaire);
}
.mna-bandeau .mna-bouton--principal:hover,
.mna-bouton--inverse:hover { background: var(--mna-primaire-voile); color: var(--mna-primaire-fonce); }
.mna-bandeau .mna-bouton--secondaire {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--mna-blanc);
}
.mna-bandeau .mna-bouton--secondaire:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--mna-blanc);
  color: var(--mna-blanc);
}

.mna-bouton--large { width: 100%; }
@media (min-width: 40em) {
  .mna-bouton--large { width: auto; }
  .mna-bouton--large-toujours { width: 100%; }
}
.mna-bouton--grand { font-size: var(--mna-t-l); padding: var(--mna-e4) var(--mna-e6); min-height: 56px; }

/* 8. CARTES ================================================================ */
.mna-carte {
  display: flex;
  flex-direction: column;
  gap: var(--mna-e3);
  padding: var(--mna-e5);
  background: var(--mna-blanc);
  border: 1px solid var(--mna-bordure);
  border-radius: var(--mna-rayon-l);
  box-shadow: var(--mna-ombre-1);
}
.mna-carte__titre { margin: 0; font-size: var(--mna-t-xl); }
.mna-carte__texte { color: var(--mna-texte-secondaire); margin: 0; }
.mna-carte__pied { margin-top: auto; padding-top: var(--mna-e3); }

.mna-carte--lien { transition: box-shadow var(--mna-transition), transform var(--mna-transition); }
.mna-carte--lien:hover { box-shadow: var(--mna-ombre-2); transform: translateY(-2px); }
.mna-carte--doux { background: var(--mna-fond-doux); box-shadow: none; }
/* Le filet d'accentuation fait 4px là où les autres cartes en ont 1 : sans
   compensation, la carte accentuée descend son contenu de 3px et, mise à côté
   de ses voisines, ses prix ne sont plus sur la même ligne. On rend les 3px
   sur le rembourrage haut. */
.mna-carte--accent {
  border-top: 4px solid var(--mna-accent);
  padding-top: calc(var(--mna-e5) - 3px);
}
.mna-carte--marine {
  background: var(--mna-primaire);
  border-color: var(--mna-primaire);
  color: var(--mna-blanc);
}
.mna-carte--marine .mna-carte__titre { color: var(--mna-blanc); }
.mna-carte--marine .mna-carte__texte { color: var(--mna-blanc-voile); }
.mna-carte--marine a:not(.mna-bouton) { color: var(--mna-blanc); }
/* Les BOUTONS gardent leurs propres couleurs : la regle ci-dessus forcait du
   blanc sur un bouton deja blanc, donc un bouton vide a l'ecran. */

/* Numéro d'étape (les trois temps de la méthode) */
.mna-carte__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--mna-rayon-pleine);
  background: var(--mna-primaire-voile);
  color: var(--mna-primaire);
  font-family: var(--mna-police-titre);
  font-size: var(--mna-t-xl);
  font-weight: 700;
}

/* 9. BANDEAU DE SECTION (reprend le rendu des rapports PDF) ================= */
.mna-bandeau {
  background: var(--mna-primaire);
  color: var(--mna-blanc);
  padding-block: var(--mna-e7);
}
.mna-bandeau h1, .mna-bandeau h2, .mna-bandeau h3 { color: var(--mna-blanc); }
.mna-bandeau a:not(.mna-bouton) { color: var(--mna-accent-clair); }
.mna-bandeau--degrade {
  background: linear-gradient(160deg, var(--mna-primaire) 0%, var(--mna-primaire-fonce) 62%, #16204F 100%);
}
.mna-bandeau--mince { padding-block: var(--mna-e5); }
@media (min-width: 48em) {
  .mna-bandeau { padding-block: var(--mna-e8); }
}

/* Filet ambré signature, en haut d'un bandeau */
.mna-bandeau--filet { border-top: 4px solid var(--mna-accent); }

/* 10. ENCADRÉ D'ACCENTUATION =============================================== */
.mna-encadre {
  padding: var(--mna-e4) var(--mna-e5);
  background: var(--mna-fond-doux);
  border-left: 4px solid var(--mna-accent);
  border-radius: 0 var(--mna-rayon-m) var(--mna-rayon-m) 0;
}
.mna-encadre__titre {
  font-family: var(--mna-police);
  font-size: var(--mna-t-s);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mna-accent-texte);
  margin-bottom: var(--mna-e2);
}
.mna-encadre--info { border-left-color: var(--mna-secondaire); }
.mna-encadre--info .mna-encadre__titre { color: var(--mna-secondaire-fonce); }
/* Encadré d'alerte : réservé à ce qui exige une action, pas à ce qui informe.
   Dans l'espace de gestion, un seul cas le mérite — un paiement encaissé dont
   le rapport n'est pas parti. */
.mna-encadre--alerte {
  background: var(--mna-alerte-voile);
  border-left-color: var(--mna-alerte);
}
.mna-encadre--alerte .mna-encadre__titre { color: var(--mna-alerte); }
/* Un formulaire d'un seul bouton, aligné dans une phrase plutôt qu'en bloc. */
.mna-enligne { display: inline-block; margin-left: var(--mna-e2); }
.mna-encadre--sur-marine {
  background: rgba(255, 255, 255, 0.08);
  color: var(--mna-blanc);
}
.mna-encadre--sur-marine .mna-encadre__titre { color: var(--mna-accent-clair); }

/* 11. BARRE DE PROGRESSION ================================================= */
.mna-progression { margin-bottom: var(--mna-e5); }
.mna-progression__legende {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--mna-e3);
  font-size: var(--mna-t-s);
  color: var(--mna-texte-secondaire);
  margin-bottom: var(--mna-e2);
}
.mna-progression__etape { font-weight: 700; color: var(--mna-encre); }
.mna-progression__aide {
  margin-top: var(--mna-e2);
  font-size: var(--mna-t-s);
  line-height: 1.4;
  color: var(--mna-texte-secondaire);
}
@media (max-width: 40em) { .mna-progression__aide { font-size: .8rem; } }
.mna-progression__piste {
  height: 10px;
  background: var(--mna-primaire-voile);
  border-radius: var(--mna-rayon-pleine);
  overflow: hidden;
}
.mna-progression__valeur {
  display: block;
  height: 100%;
  min-width: 10px;
  background: linear-gradient(90deg, var(--mna-secondaire), var(--mna-primaire));
  border-radius: var(--mna-rayon-pleine);
  transition: width 300ms ease-out;
}

/* Variante fine collée en haut pendant la passation. Sur téléphone l'en-tête
   n'est pas collant : la barre se colle donc au bord de l'écran. */
.mna-progression--fixe {
  position: sticky;
  top: 0;
  z-index: 40;
  margin: 0;
  padding: var(--mna-e3) 0;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--mna-bordure);
}
@media (min-width: 64em) {
  .mna-progression--fixe { top: 68px; }
}

/* 12. TRAITS DU PORTRAIT (barres horizontales) ============================= */
.mna-traits { display: flex; flex-direction: column; gap: var(--mna-e5); margin: 0; }
.mna-trait { display: block; }
/* `dt` et `dd` restent enfants directs du div, comme l'exige la structure d'un `dl`. */
.mna-trait__entete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--mna-e3);
  margin-bottom: var(--mna-e2);
}
.mna-trait__corps { margin: 0; }
.mna-trait__nom { font-weight: 700; color: var(--mna-encre); }
.mna-trait__valeur {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--mna-primaire);
  white-space: nowrap;
}
.mna-trait__piste {
  height: 14px;
  background: var(--mna-fond-doux);
  border: 1px solid var(--mna-bordure);
  border-radius: var(--mna-rayon-pleine);
  overflow: hidden;
}
.mna-trait__remplissage {
  display: block;
  height: 100%;
  background: var(--mna-primaire);
  border-radius: var(--mna-rayon-pleine);
}
.mna-trait--accent .mna-trait__remplissage { background: var(--mna-accent); }
.mna-trait--secondaire .mna-trait__remplissage { background: var(--mna-secondaire); }
.mna-trait__description {
  margin: var(--mna-e2) 0 0;
  font-size: var(--mna-t-s);
  color: var(--mna-texte-secondaire);
  max-width: 62ch;
}

/* 13. TABLEAU DE PRIX ====================================================== */
.mna-tarifs {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.mna-tarifs caption {
  caption-side: top;
  text-align: left;
  font-size: var(--mna-t-s);
  color: var(--mna-texte-secondaire);
  padding-bottom: var(--mna-e3);
}
.mna-tarifs th, .mna-tarifs td {
  padding: var(--mna-e3) var(--mna-e3);
  border-bottom: 1px solid var(--mna-bordure);
  vertical-align: top;
}
.mna-tarifs thead th {
  font-family: var(--mna-police);
  font-size: var(--mna-t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mna-texte-secondaire);
  border-bottom: 2px solid var(--mna-bordure-forte);
}
.mna-tarifs tbody th { font-weight: 700; color: var(--mna-encre); }
.mna-tarifs td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mna-tarifs tr:last-child th, .mna-tarifs tr:last-child td { border-bottom: 0; }
.mna-tarifs .mna-tarifs__prix { font-weight: 700; color: var(--mna-primaire); }

/* Le tableau devient une pile de blocs sur petit écran */
@media (max-width: 39.99em) {
  /* La LÉGENDE doit passer en bloc elle aussi. Oubliée, elle garde son
     comportement de `caption` alors que le tableau n'en est plus un : le
     navigateur la réduit alors à la largeur de la première colonne, et elle
     reste collée à gauche sur un tiers de l'écran. */
  .mna-tarifs, .mna-tarifs caption, .mna-tarifs tbody, .mna-tarifs tr,
  .mna-tarifs th, .mna-tarifs td { display: block; width: 100%; }
  .mna-tarifs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .mna-tarifs tr {
    border: 1px solid var(--mna-bordure);
    border-radius: var(--mna-rayon-m);
    padding: var(--mna-e3);
    margin-bottom: var(--mna-e3);
  }
  .mna-tarifs th, .mna-tarifs td { border-bottom: 0; padding: var(--mna-e1) 0; }
  .mna-tarifs td:last-child { text-align: left; }
  .mna-tarifs td[data-intitule]::before {
    content: attr(data-intitule) " : ";
    font-weight: 700;
    color: var(--mna-texte-secondaire);
  }
}

/* Carte de prix mise en avant */
.mna-offre { text-align: left; }
.mna-offre__prix {
  font-family: var(--mna-police-titre);
  font-size: var(--mna-t-3xl);
  font-weight: 700;
  color: var(--mna-primaire);
  line-height: 1.1;
}
.mna-carte--marine .mna-offre__prix { color: var(--mna-blanc); }
.mna-offre__mention { font-size: var(--mna-t-s); color: var(--mna-texte-secondaire); }
.mna-carte--marine .mna-offre__mention { color: var(--mna-blanc-voile); }

/* 14. ACCORDÉON (details/summary natifs, sans JavaScript) ================== */
.mna-accordeon {
  border: 1px solid var(--mna-bordure);
  border-radius: var(--mna-rayon-m);
  background: var(--mna-blanc);
  margin-bottom: var(--mna-e3);
  overflow: hidden;
}
.mna-accordeon__question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--mna-e4);
  padding: var(--mna-e4);
  min-height: var(--mna-cible);
  font-weight: 700;
  color: var(--mna-encre);
  cursor: pointer;
  list-style: none;
}
.mna-accordeon__question::-webkit-details-marker { display: none; }
.mna-accordeon__question:hover { background: var(--mna-fond-doux); color: var(--mna-primaire); }
.mna-accordeon__question::after {
  content: "";
  flex-shrink: 0;
  width: 0.65rem;
  height: 0.65rem;
  margin-top: 0.4em;
  border-right: 2.5px solid var(--mna-accent);
  border-bottom: 2.5px solid var(--mna-accent);
  transform: rotate(45deg);
  transition: transform var(--mna-transition);
}
.mna-accordeon[open] .mna-accordeon__question::after { transform: rotate(-135deg); }
.mna-accordeon[open] .mna-accordeon__question { background: var(--mna-fond-doux); }
.mna-accordeon__reponse {
  padding: var(--mna-e4);
  border-top: 1px solid var(--mna-bordure);
  color: var(--mna-texte-secondaire);
  max-width: var(--mna-largeur-texte);
}

/* 15. FORMULAIRES ========================================================== */
.mna-formulaire { display: flex; flex-direction: column; gap: var(--mna-e5); }

.mna-champ { display: block; border: 0; padding: 0; margin: 0; min-width: 0; }
.mna-champ__intitule {
  display: block;
  font-weight: 700;
  color: var(--mna-encre);
  margin-bottom: var(--mna-e2);
}
.mna-champ__aide {
  display: block;
  font-size: var(--mna-t-s);
  color: var(--mna-texte-secondaire);
  margin-bottom: var(--mna-e2);
}

.mna-saisie,
.mna-zone-texte {
  width: 100%;
  min-height: var(--mna-cible);
  padding: var(--mna-e3);
  font-family: inherit;
  font-size: var(--mna-t-m);
  color: var(--mna-encre);
  background: var(--mna-blanc);
  border: 1.5px solid var(--mna-bordure-forte);
  border-radius: var(--mna-rayon-m);
}
.mna-zone-texte { min-height: 7rem; resize: vertical; line-height: 1.6; }
.mna-saisie:focus, .mna-zone-texte:focus { border-color: var(--mna-primaire); }
.mna-saisie::placeholder, .mna-zone-texte::placeholder { color: #8892AC; }

/* Cases à cocher : la cible tactile est la LIGNE entière, pas le carré de
   13 px que dessine le navigateur. Sur un pouce, viser ce carré est une
   source d'échec constante. */
.mna-case {
  display: flex;
  align-items: flex-start;
  gap: var(--mna-e3);
  margin: 0 0 var(--mna-e3);
  line-height: 1.5;
}
.mna-case input[type="checkbox"],
.mna-case input[type="radio"] {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.15rem 0 0;
  accent-color: var(--mna-primaire);
}
.mna-case label { cursor: pointer; }

/* Groupe de champs liés (fieldset). Sans remise à zéro, les navigateurs
   dessinent une bordure et une marge qui n'ont rien à voir avec le reste. */
.mna-groupe {
  border: 0;
  padding: 0;
  margin: 0 0 var(--mna-e5);
  min-width: 0;
}
.mna-groupe legend { padding: 0; margin-bottom: var(--mna-e3); }

/* L'astérisque des champs obligatoires. En couleur d'alerte et non en rouge
   pur : elle doit se voir sans hurler. */
.mna-obligatoire { color: var(--mna-alerte); font-weight: 700; }

/* Liste numérotée mise en forme comme les listes à coches du site. */
.mna-liste-numerotee {
  padding-left: 1.25rem;
  margin: 0 0 var(--mna-e5);
}
.mna-liste-numerotee li { margin-bottom: var(--mna-e3); padding-left: 0.25rem; }

.mna-actions {
  display: flex;
  flex-direction: column;
  gap: var(--mna-e3);
  padding-top: var(--mna-e3);
}
@media (min-width: 40em) {
  .mna-actions { flex-direction: row; align-items: center; flex-wrap: wrap; }
}

/* 16. QUESTIONNAIRE ======================================================== */
.mna-question {
  padding: var(--mna-e5) 0;
  border-bottom: 1px solid var(--mna-bordure);
}
.mna-question:last-of-type { border-bottom: 0; }
.mna-question__numero {
  display: block;
  font-size: var(--mna-t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mna-texte-secondaire);
  margin-bottom: var(--mna-e2);
}
.mna-question__texte {
  display: block;
  font-family: var(--mna-police-titre);
  font-size: var(--mna-t-xl);
  line-height: 1.35;
  color: var(--mna-encre);
  margin-bottom: var(--mna-e4);
  padding: 0;
  max-width: 46ch;
}

/* Choix simples, multiples et scénarios : une pile de grandes cibles */
.mna-choix { display: flex; flex-direction: column; gap: var(--mna-e2); }
.mna-choix__option {
  display: flex;
  align-items: center;
  gap: var(--mna-e3);
  min-height: var(--mna-cible);
  padding: var(--mna-e3) var(--mna-e4);
  background: var(--mna-blanc);
  border: 1.5px solid var(--mna-bordure-forte);
  border-radius: var(--mna-rayon-m);
  cursor: pointer;
  transition: border-color var(--mna-transition), background-color var(--mna-transition);
}
.mna-choix__option:hover { border-color: var(--mna-secondaire); background: var(--mna-secondaire-voile); }
.mna-choix__option input { flex-shrink: 0; width: 1.25rem; height: 1.25rem; accent-color: var(--mna-primaire); margin: 0; }
.mna-choix__option:has(input:checked) {
  border-color: var(--mna-primaire);
  background: var(--mna-primaire-voile);
  box-shadow: inset 0 0 0 1px var(--mna-primaire);
}
.mna-choix__option:has(input:focus-visible) {
  outline: 3px solid var(--mna-focus);
  outline-offset: 2px;
  box-shadow: var(--mna-focus-halo);
}
.mna-choix__libelle { line-height: 1.4; }

/* Choix forcé : deux propositions côte à côte sur grand écran */
@media (min-width: 48em) {
  .mna-choix--duo { flex-direction: row; }
  .mna-choix--duo .mna-choix__option { flex: 1 1 0; align-items: flex-start; }
}

/* Classement « le plus / le moins » (V19) : une ligne par proposition, deux
   colonnes de cases. Sur téléphone, les cases restent assez grandes pour le
   pouce (--mna-cible). */
.mna-classement {
  border: 1.5px solid var(--mna-bordure-forte);
  border-radius: var(--mna-rayon-m);
  overflow: hidden;
  background: var(--mna-blanc);
}
.mna-classement__entete,
.mna-classement__ligne {
  display: grid;
  grid-template-columns: 1fr 5rem 5rem;
  align-items: center;
}
.mna-classement__entete {
  background: var(--mna-fond-doux);
  font-size: var(--mna-t-s);
  font-weight: 600;
  color: var(--mna-texte-secondaire);
  padding: var(--mna-e2) 0;
  text-align: center;
}
.mna-classement__ligne { border-top: 1px solid var(--mna-bordure); }
.mna-classement__libelle { padding: var(--mna-e3) var(--mna-e3) var(--mna-e3) var(--mna-e4); line-height: 1.35; }
.mna-classement__case {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--mna-cible);
  height: 100%;
  cursor: pointer;
  border-left: 1px solid var(--mna-bordure);
}
.mna-classement__case input { width: 1.35rem; height: 1.35rem; margin: 0; }
.mna-classement__case--plus input { accent-color: var(--mna-succes); }
.mna-classement__case--moins input { accent-color: var(--mna-alerte); }
.mna-classement__case--plus:has(input:checked) { background: #E3F1EA; }
.mna-classement__case--moins:has(input:checked) { background: var(--mna-alerte-voile); }
.mna-classement__case:has(input:focus-visible) { outline: 3px solid var(--mna-focus); outline-offset: -3px; }
.mna-classement__entete span:nth-child(2) { color: var(--mna-succes); }
.mna-classement__entete span:nth-child(3) { color: var(--mna-alerte); }
@media (max-width: 30em) {
  .mna-classement__entete,
  .mna-classement__ligne { grid-template-columns: 1fr 4rem 4rem; }
  .mna-classement__entete { font-size: 0.8rem; white-space: nowrap; }
  .mna-classement__libelle { padding-left: var(--mna-e3); font-size: var(--mna-t-s); }
}

/* Likert : 5 crans, boutons radio larges, jamais un menu déroulant */
.mna-likert { display: block; }
.mna-likert__bornes {
  display: flex;
  justify-content: space-between;
  gap: var(--mna-e3);
  font-size: var(--mna-t-s);
  color: var(--mna-texte-secondaire);
  margin-bottom: var(--mna-e2);
}
.mna-likert__bornes span:last-child { text-align: right; }
.mna-likert__echelle {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--mna-e2);
}
.mna-likert__cran {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--mna-e1);
  min-height: 60px;
  padding: var(--mna-e2) var(--mna-e1);
  background: var(--mna-blanc);
  border: 1.5px solid var(--mna-bordure-forte);
  border-radius: var(--mna-rayon-m);
  font-weight: 700;
  font-size: var(--mna-t-l);
  color: var(--mna-texte-secondaire);
  cursor: pointer;
  transition: border-color var(--mna-transition), background-color var(--mna-transition),
              color var(--mna-transition);
}
.mna-likert__cran:hover { border-color: var(--mna-secondaire); background: var(--mna-secondaire-voile); }
.mna-likert__cran input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.mna-likert__cran:has(input:checked) {
  background: var(--mna-primaire);
  border-color: var(--mna-primaire);
  color: var(--mna-blanc);
}
.mna-likert__cran:has(input:focus-visible) {
  outline: 3px solid var(--mna-focus);
  outline-offset: 2px;
  box-shadow: var(--mna-focus-halo);
}
.mna-likert__mot {
  font-size: var(--mna-t-xs);
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
}
@media (min-width: 40em) {
  .mna-likert__cran { min-height: 68px; }
}

/* Bilan de compétences : une tâche, quatre niveaux (V35). Deux colonnes sur
   téléphone, quatre au-delà ; même apparence que les crans de Likert. */
.mna-niveaux {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--mna-e2);
}
@media (min-width: 40em) {
  .mna-niveaux { grid-template-columns: repeat(4, 1fr); }
}
.mna-niveaux__cran {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--mna-e2) var(--mna-e1);
  background: var(--mna-blanc);
  border: 1.5px solid var(--mna-bordure-forte);
  border-radius: var(--mna-rayon-m);
  font-weight: 600;
  font-size: var(--mna-t-s);
  line-height: 1.2;
  text-align: center;
  color: var(--mna-texte-secondaire);
  cursor: pointer;
  transition: border-color var(--mna-transition), background-color var(--mna-transition),
              color var(--mna-transition);
}
.mna-niveaux__cran:hover { border-color: var(--mna-secondaire); background: var(--mna-secondaire-voile); }
.mna-niveaux__cran input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.mna-niveaux__cran:has(input:checked) {
  background: var(--mna-primaire); border-color: var(--mna-primaire); color: var(--mna-blanc);
}
.mna-niveaux__cran:has(input:focus-visible) {
  outline: 3px solid var(--mna-focus); outline-offset: 2px; box-shadow: var(--mna-focus-halo);
}

/* 17. UTILITAIRES ========================================================== */
.visuellement-cache {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.mna-centre { text-align: center; }
.mna-mesure { max-width: 46ch; }          /* mesure d'accroche, ~46 signes */
.mna-auto-inline { margin-inline: auto; }
.mna-texte-l { font-size: var(--mna-t-l); }
.mna-liste-nue { list-style: none; padding-left: 0; margin: 0; }
.mna-liste-num { padding-left: 1.3em; }
.mna-gauche { text-align: left; }
.mna-phare {                               /* une seule phrase mise en avant */
  font-family: var(--mna-police-titre);
  font-size: var(--mna-t-2xl);
  line-height: 1.25;
  color: var(--mna-encre);
}
.mna-haut-0 { margin-top: 0; }
.mna-bas-0 { margin-bottom: 0; }
.mna-bas-3 { margin-bottom: var(--mna-e3); }
.mna-bas-4 { margin-bottom: var(--mna-e4); }
.mna-bas-5 { margin-bottom: var(--mna-e5); }
.mna-bas-6 { margin-bottom: var(--mna-e6); }
.mna-haut-5 { margin-top: var(--mna-e5); }
.mna-haut-6 { margin-top: var(--mna-e6); }

/* Article éditorial : largeur de ligne limitée, hiérarchie stable */
.mna-article {
  max-width: var(--mna-largeur-texte);
  font-size: var(--mna-t-l);
}
.mna-article > h2 {
  font-size: var(--mna-t-2xl);
  margin-top: var(--mna-e7);
  padding-top: var(--mna-e2);
  border-top: 1px solid var(--mna-bordure);
}
.mna-article > h3 { font-size: var(--mna-t-xl); margin-top: var(--mna-e6); }
.mna-article > h2:first-child, .mna-article > h3:first-child { margin-top: 0; border-top: 0; }
.mna-article > p { margin-bottom: var(--mna-e4); }
.mna-article > ul, .mna-article > ol { padding-left: 1.3em; margin-bottom: var(--mna-e4); }
.mna-article > ul > li, .mna-article > ol > li { margin-bottom: var(--mna-e2); }
.mna-article img { border-radius: var(--mna-rayon-m); }
.mna-article table { width: 100%; border-collapse: collapse; font-size: var(--mna-t-m); }
.mna-article th, .mna-article td {
  padding: var(--mna-e3);
  border-bottom: 1px solid var(--mna-bordure);
  text-align: left;
  vertical-align: top;
}

/* Fil d'Ariane discret */
.mna-fil { font-size: var(--mna-t-s); color: var(--mna-texte-secondaire); margin-bottom: var(--mna-e4); }
.mna-fil a { color: var(--mna-texte-secondaire); }
.mna-bandeau .mna-fil,
.mna-bandeau .mna-fil a,
.mna-bandeau .mna-mention { color: var(--mna-blanc-voile); }
.mna-fil span[aria-hidden] { padding-inline: var(--mna-e2); }

/* Bloc de méta-informations d'un test (durée, questions, public) */
.mna-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mna-e3) var(--mna-e5);
  padding: var(--mna-e4) 0;
  margin: 0;
  list-style: none;
}
.mna-meta__intitule {
  display: block;
  font-size: var(--mna-t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mna-texte-secondaire);
}
.mna-bandeau .mna-meta__intitule { color: var(--mna-blanc-voile); }
.mna-meta__valeur { font-weight: 700; font-size: var(--mna-t-l); color: var(--mna-encre); }
.mna-bandeau .mna-meta__valeur { color: var(--mna-blanc); }

/* 18. IMPRESSION =========================================================== */
@media print {
  .mna-entete, .mna-pied, .mna-nav, .mna-bouton, .mna-progression--fixe { display: none !important; }
  body { color: #000; background: #fff; font-size: 11pt; }
  .mna-section { padding-block: 0.5cm; }
  .mna-bandeau { background: #fff !important; color: #000 !important; }
  .mna-bandeau h1, .mna-bandeau h2 { color: #000 !important; }
  .mna-carte { box-shadow: none; border: 1px solid #999; }
  .mna-accordeon__reponse { display: block !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}


/* 19. ACCROCHE D'ACCUEIL ==================================================
   .mna-mesure limite le bloc entier a 46 signes : au corps de l'accroche,
   cela laissait la moitie droite du bandeau vide sur grand ecran, ce qui
   donnait une page inachevee. On separe donc les mesures : le titre occupe
   la largeur utile, le paragraphe garde une longueur de ligne lisible. */
.mna-heros { max-width: 54rem; }
.mna-heros h1 { max-width: 20ch; }
/* Certains titres de page dépassent largement l'accroche d'accueil : les
   contraindre à 20 signes les replie sur cinq lignes et laisse la moitié
   droite du bandeau vide. */
.mna-heros h1.mna-titre-long { max-width: 30ch; }
.mna-heros .mna-chapeau { max-width: 46ch; }

@media (min-width: 62em) {
  .mna-heros { display: grid; grid-template-columns: 1.15fr 1fr;
               gap: var(--mna-e6) var(--mna-e7); align-items: start;
               max-width: none; }
  .mna-heros .mna-surtitre { grid-column: 1 / -1; }
  .mna-heros h1 { grid-column: 1; max-width: 14ch; margin-bottom: 0; }
  .mna-heros .mna-chapeau { grid-column: 2; max-width: 42ch;
                            align-self: end; margin-bottom: 0; }
  .mna-heros .mna-rangee { grid-column: 2; margin-top: var(--mna-e4); }
  .mna-heros .mna-mention { grid-column: 2; margin-top: var(--mna-e2); }
}

/* Nom du client en marque blanche, quand il n'a pas fourni de logo. */
.mna-entete__nom { font-family: var(--mna-police-titre); font-weight: 700;
                   font-size: var(--mna-t-l); color: currentColor;
                   letter-spacing: -.01em; }

/* 20. ESPACE DE GESTION ====================================================
   Ajouté pour les quatre gabarits `gestion-*.html` (connexion, tableau de
   bord, passages, partenaires). Rien au-dessus n'a été modifié : cette
   section n'apporte que ce qu'aucun composant existant ne savait faire.
   Les tableaux de l'espace réutilisent `.mna-tarifs` (même repli en blocs
   sous 40em, via `data-intitule`), les états réutilisent `.mna-etiquette`,
   les barres d'abandon réutilisent `.mna-traits`.
   ========================================================================== */

/* Pile à chasse fixe, systèmes seulement : aucune police n'est téléchargée. */
:root {
  --mna-police-code: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                     "Liberation Mono", "Courier New", monospace;
}

/* 20.1 Page de connexion ---------------------------------------------------
   La page n'hérite pas de la navigation publique : le contenu est centré
   verticalement dans la hauteur restante. */
.mna-connexion {
  display: flex;
  align-items: center;
  background: var(--mna-fond-doux);
  padding-block: var(--mna-e7);
}
.mna-connexion__bloc { width: 100%; }
.mna-connexion__logo { text-align: center; margin-bottom: var(--mna-e5); }
.mna-connexion__logo img { height: 44px; width: auto; }

/* 20.2 Navigation interne de l'espace --------------------------------------
   Des liens `.mna-bouton--discret` posés sur le bandeau marine : le marine
   sur marine serait illisible, et la page courante doit se voir autrement
   que par la couleur seule (d'où le filet ambré sous le libellé). */
.mna-bouton--discret[aria-current="page"] {
  background: var(--mna-primaire-voile);
  color: var(--mna-primaire-fonce);
  text-decoration: none;
  box-shadow: inset 0 -3px 0 var(--mna-accent);
}
.mna-bandeau .mna-bouton--discret { color: var(--mna-blanc); }
.mna-bandeau .mna-bouton--discret:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--mna-blanc);
}
.mna-bandeau .mna-bouton--discret[aria-current="page"] {
  background: rgba(255, 255, 255, 0.14);
  color: var(--mna-blanc);
  box-shadow: inset 0 -3px 0 var(--mna-accent-clair);
}

/* 20.3 Filtre de périmètre -------------------------------------------------- */
.mna-filtre { align-items: center; gap: var(--mna-e3) var(--mna-e4); }
.mna-selection { width: auto; min-width: 16rem; max-width: 100%; }

/* 20.4 Rangée de grands chiffres -------------------------------------------
   Aucun composant existant ne portait un nombre de pilotage : `.mna-offre`
   est un prix, `.mna-meta` une méta-donnée de test. D'où ce bloc, bâti sur
   les mêmes jetons. */
.mna-chiffres {
  display: grid;
  gap: var(--mna-e3);
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  margin: 0;
}
.mna-chiffre {
  display: flex;
  flex-direction: column;
  gap: var(--mna-e1);
  padding: var(--mna-e4);
  background: var(--mna-fond-doux);
  border: 1px solid var(--mna-bordure);
  border-radius: var(--mna-rayon-m);
}
.mna-chiffre__valeur {
  font-family: var(--mna-police-titre);
  font-size: var(--mna-t-3xl);
  font-weight: 700;
  line-height: 1.05;
  color: var(--mna-primaire);
  font-variant-numeric: tabular-nums;
}
.mna-chiffre__intitule {
  font-size: var(--mna-t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mna-texte-secondaire);
}
.mna-chiffre__detail { font-size: var(--mna-t-s); color: var(--mna-texte-secondaire); }

/* Variante réduite : trois chiffres à l'intérieur d'une carte de partenaire. */
.mna-chiffres--compacts { grid-template-columns: repeat(3, 1fr); gap: var(--mna-e2); }
.mna-chiffres--compacts .mna-chiffre { padding: var(--mna-e3); background: var(--mna-blanc); }
.mna-chiffres--compacts .mna-chiffre__valeur { font-size: var(--mna-t-xl); }

/* 20.5 Enveloppe défilante horizontale --------------------------------------
   Pour un tableau large ou un graphique qui a besoin d'une largeur minimale.
   `tabindex="0"` dans le gabarit : une zone qui défile doit être atteignable
   au clavier. Le focus est déjà stylé globalement. */
.mna-defile-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--mna-e2);
}

/* Cellule d'actions d'un tableau : les liens s'empilent au lieu de forcer
   une colonne interminable (`.mna-tarifs td:last-child` est en `nowrap`). */
.mna-tarifs td.mna-cellule-actions {
  white-space: normal;
  text-align: left;
}
.mna-tarifs td.mna-cellule-actions .mna-bouton {
  display: flex;
  justify-content: flex-start;
  text-align: left;
}

/* 20.6 Courbe des 30 derniers jours -----------------------------------------
   SVG écrit à la main, sans bibliothèque. Les couleurs sont posées ici et non
   dans des attributs `fill`/`stroke` : un attribut de présentation n'accepte
   pas les jetons CSS. Les trois séries sont emboîtées (payés ⊂ terminés ⊂
   commencés), donc trois aires opaques du plus clair au plus foncé suffisent.
   L'information n'est jamais portée par la couleur seule : la légende nomme
   chaque série et le tableau dépliable donne les valeurs exactes. */
.mna-courbe { margin: 0; }
.mna-courbe__dessin {
  display: block;
  width: 100%;
  min-width: 520px;   /* en deçà, les graduations deviendraient illisibles */
  height: auto;
  background: var(--mna-fond);
  border: 1px solid var(--mna-bordure);
  border-radius: var(--mna-rayon-m);
}
.mna-courbe__grille { stroke: var(--mna-bordure); stroke-width: 1; }
.mna-courbe__axe { stroke: var(--mna-bordure-forte); stroke-width: 1.5; }
.mna-courbe__graduation {
  font-family: var(--mna-police);
  font-size: 17px;                 /* unités du viewBox, pas des pixels écran */
  fill: var(--mna-texte-secondaire);
}
.mna-courbe__vide {
  font-family: var(--mna-police);
  font-size: 20px;
  fill: var(--mna-texte-secondaire);
}
.mna-courbe__aire { stroke-width: 1.5; stroke-linejoin: round; }
.mna-courbe__aire--commences { fill: var(--mna-primaire-voile); stroke: var(--mna-bordure-forte); }
.mna-courbe__aire--termines { fill: var(--mna-secondaire); stroke: var(--mna-secondaire-fonce); }
.mna-courbe__aire--payes { fill: var(--mna-primaire); stroke: var(--mna-encre); }
.mna-courbe__point--commences { fill: var(--mna-bordure-forte); }
.mna-courbe__point--termines { fill: var(--mna-secondaire-fonce); }
.mna-courbe__point--payes { fill: var(--mna-encre); }

/* Halo clair autour des points : ils restent lisibles par-dessus une aire
   foncée comme par-dessus une aire claire. */
.mna-courbe__point { stroke: var(--mna-fond); stroke-width: 1; }

/* Légende du graphique */
.mna-legende {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mna-e2) var(--mna-e5);
  margin-top: var(--mna-e3);
  font-size: var(--mna-t-s);
  color: var(--mna-texte-secondaire);
}
.mna-legende__entree { display: inline-flex; align-items: center; gap: var(--mna-e2); }
.mna-legende__puce {
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
  border-radius: var(--mna-rayon-s);
  border: 1px solid var(--mna-bordure-forte);
}
.mna-legende__puce--commences { background: var(--mna-primaire-voile); }
.mna-legende__puce--termines { background: var(--mna-secondaire); border-color: var(--mna-secondaire-fonce); }
.mna-legende__puce--payes { background: var(--mna-primaire); border-color: var(--mna-encre); }

/* 20.7 Code à recopier ------------------------------------------------------
   La ligne d'intégration d'un partenaire : du texte, sélectionnable, jamais
   une image. Elle se replie plutôt que de déborder. */
.mna-code {
  margin: 0 0 var(--mna-e3);
  padding: var(--mna-e3);
  background: var(--mna-fond-doux);
  border: 1px solid var(--mna-bordure);
  border-left: 3px solid var(--mna-secondaire);
  border-radius: var(--mna-rayon-s);
  font-family: var(--mna-police-code);
  font-size: var(--mna-t-s);
  line-height: 1.5;
  color: var(--mna-encre);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.mna-code code { font: inherit; }
.mna-code-en-ligne {
  padding: 0.1em 0.35em;
  background: var(--mna-primaire-voile);
  border-radius: var(--mna-rayon-s);
  font-family: var(--mna-police-code);
  font-size: 0.92em;
  color: var(--mna-primaire-fonce);
}

/* 20.8 Impression : l'espace de gestion se lit à l'écran, pas sur papier.
   On évite au moins que le graphique soit coupé en deux. */
@media print {
  .mna-defile-x { overflow: visible; }
  .mna-courbe, .mna-chiffre, .mna-code { break-inside: avoid; }
}


/* ---------------------------------------------------------------------------
   Consentement expres avant le questionnaire.
   Cette case decide si un profilage a lieu : elle doit etre lisible, jamais
   precochee, et sa cible de clic assez grande sur telephone (44px minimum).
   --------------------------------------------------------------------------- */
.mna-consentement {
  margin: var(--mna-e5) 0;
  padding: var(--mna-e4);
  background: var(--mna-fond-doux);
  border: 1px solid var(--mna-bordure);
  border-radius: var(--mna-rayon-m);
}

.mna-consentement label {
  display: flex;
  gap: var(--mna-e3);
  align-items: flex-start;
  cursor: pointer;
  font-size: var(--mna-t-s);
  line-height: 1.55;
  color: var(--mna-texte);
}

.mna-consentement input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.1rem;
  accent-color: var(--mna-primaire);
  cursor: pointer;
}

.mna-consentement a { color: var(--mna-primaire); }

.mna-consentement--erreur {
  background: var(--mna-alerte-voile);
  border-color: var(--mna-alerte);
}

.mna-consentement__erreur {
  margin: var(--mna-e3) 0 0;
  font-size: var(--mna-t-s);
  font-weight: 600;
  color: var(--mna-alerte);
}

/* ---------------------------------------------------------------------------
   Accès au compte, dans l'en-tête.
   Sur téléphone il se place à côté du logo plutôt qu'en dessous : c'est la
   seule action de l'en-tête, elle ne doit pas coûter un défilement.
   --------------------------------------------------------------------------- */
.mna-entete__compte {
  display: inline-flex;
  align-items: center;
  gap: var(--mna-e2);
  padding: 0.45rem var(--mna-e3);
  border: 1px solid var(--mna-bordure-forte);
  border-radius: var(--mna-rayon-pleine);
  font-size: var(--mna-t-s);
  font-weight: 600;
  line-height: 1;
  color: var(--mna-primaire);
  text-decoration: none;
  white-space: nowrap;
  min-height: 40px;
}
.mna-entete__compte:hover,
.mna-entete__compte:focus-visible {
  background: var(--mna-primaire-voile);
  border-color: var(--mna-primaire);
}
.mna-entete__compte[aria-current="page"] {
  background: var(--mna-primaire);
  border-color: var(--mna-primaire);
  color: var(--mna-blanc);
}
.mna-entete__compte svg { flex: 0 0 auto; }

@media (max-width: 63.99em) {
  /* Le bouton remonte sur la ligne du logo : sur téléphone, l'en-tête tient
     ainsi en deux lignes au lieu de six. */
  .mna-entete__barre { position: relative; padding-right: 8.5rem; }
  .mna-entete__compte {
    position: absolute;
    top: var(--mna-e3);
    right: var(--mna-e4);
  }

  /* La navigation défile horizontalement au lieu de se replier sur cinq
     lignes. Sans cela, six entrées de menu repoussaient le premier mot de
     contenu à 550 px du haut de l'écran — mesuré, pas supposé.
     Les marges négatives font affleurer la bande aux bords de l'écran :
     on voit qu'elle continue, ce qui invite à la faire glisser. */
  .mna-nav {
    margin-inline: calc(-1 * var(--mna-e4)) calc(-1 * var(--mna-e4));
    padding-inline: var(--mna-e4);
    max-width: 100vw;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;           /* la barre n'apporte rien ici */
    -webkit-overflow-scrolling: touch;
  }
  .mna-nav::-webkit-scrollbar { display: none; }
  .mna-nav__liste { flex-wrap: nowrap; }
  .mna-nav__lien { white-space: nowrap; }
}

@media (min-width: 40em) and (max-width: 63.99em) {
  .mna-nav {
    margin-inline: calc(-1 * var(--mna-e5)) calc(-1 * var(--mna-e5));
    padding-inline: var(--mna-e5);
  }
  .mna-entete__compte { right: var(--mna-e5); }
}

/* ---------------------------------------------------------------------------
   Tableaux des pages éditoriales (CGV, confidentialité, méthode).
   Ils viennent du texte source, donc leur nombre de colonnes est imprévisible :
   le conteneur défile horizontalement plutôt que de comprimer les cellules.
   --------------------------------------------------------------------------- */
.mna-tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--mna-t-s);
  margin: var(--mna-e4) 0;
}
.mna-tableau th,
.mna-tableau td {
  padding: var(--mna-e3);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--mna-bordure);
}
.mna-tableau thead th {
  background: var(--mna-fond-doux);
  font-weight: 700;
  color: var(--mna-encre);
  border-bottom: 2px solid var(--mna-bordure-forte);
}
.mna-tableau tbody tr:last-child td { border-bottom: none; }

/* Champ leurre anti-robot : hors écran plutôt que display:none, car certains
   robots ignorent ce qui est masqué. Invisible et inatteignable au clavier. */
.mna-leurre {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ---------------------------------------------------------------------------
   Colonne annexe : elle accompagne la lecture au lieu de disparaître.
   Dans une grille « principal-annexe », la colonne de gauche est souvent trois
   fois plus longue que l'encadré de droite. Sans cette règle, la moitié droite
   de l'écran reste vide sur tout le reste de la section, ce qui donne
   l'impression d'une page mal construite sur grand écran.
   --------------------------------------------------------------------------- */
@media (min-width: 60em) {
  .mna-grille--principal-annexe > aside {
    position: sticky;
    top: calc(68px + var(--mna-e5));   /* hauteur de l'en-tête collant */
  }
}

/* ---------------------------------------------------------------------------
   Bandeau de présentation d'un test : texte et chiffres côte à côte.
   Le texte est volontairement limité à une largeur de lecture confortable ;
   sur un écran large, cela laissait la moitié droite vide. Les quatre repères
   (durée, questions, public, résultat) viennent l'occuper.
   --------------------------------------------------------------------------- */
@media (min-width: 62em) {
  .mna-heros-test {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: var(--mna-e7);
    align-items: center;
  }
  .mna-heros-test .mna-mesure { max-width: none; }
  .mna-heros-test .mna-meta {
    margin: 0;
    padding: var(--mna-e5);
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--mna-rayon-l);
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--mna-e5);
  }
}

/* ---------------------------------------------------------------------------
   Cibles d'ancre et en-tête collant.
   Sans cette marge, cliquer sur « Voir les tarifs » amène le titre visé
   EXACTEMENT sous l'en-tête, qui le recouvre. Le lecteur atterrit au milieu
   d'un paragraphe sans savoir pourquoi.
   --------------------------------------------------------------------------- */
[id] { scroll-margin-top: calc(68px + var(--mna-e5)); }

/* Zone d'édition du contenu : police à chasse fixe et hauteur généreuse.
   On écrit du Markdown, où l'alignement des tableaux et des listes compte. */
.mna-editeur {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92rem;
  line-height: 1.6;
  min-height: 60vh;
  tab-size: 2;
}

/* ---------------------------------------------------------------------------
   Bouton de paiement PayPal.
   Les couleurs et la forme sont imposées par PayPal : on ne les redessine
   pas, on les intègre proprement dans la carte d'achat.
   --------------------------------------------------------------------------- */
.mna-paypal {
  display: grid;
  justify-items: center;
  gap: var(--mna-e2);
}
.mna-paypal__bouton {
  width: 100%;
  min-width: 11.625rem;
  min-height: 2.75rem;
  padding: 0 var(--mna-e5);
  border: none;
  border-radius: var(--mna-rayon-s);
  background-color: #FFD140;
  color: #000000;
  font-family: var(--mna-police);
  font-size: var(--mna-t-m);
  font-weight: 700;
  line-height: 1.25rem;
  cursor: pointer;
}
.mna-paypal__bouton:hover { background-color: #F5C300; }
.mna-paypal img { max-width: 100%; height: auto; }
.mna-paypal__mention {
  font-size: var(--mna-t-xs);
  color: var(--mna-texte-secondaire);
}
.mna-paypal__mention img { height: 0.875rem; vertical-align: middle; }

/* Ligne réservée au badge des cartes de tarif.
   La hauteur réservée est celle d'une étiquette RÉELLE — texte + 4px de
   padding en haut et en bas — et non une valeur approchée : mesurée, une
   étiquette fait 36px, et réserver 28px laissait la carte du milieu
   8px plus bas que les deux autres. Les trois prix cessaient d'être alignés,
   ce qui gêne précisément la comparaison que le visiteur vient faire.
   `display: flex` + `align-items: center` garde le badge centré dans la
   ligne quelle que soit la taille de police héritée. */
.mna-carte__badge {
  display: flex;
  align-items: center;
  min-height: 2.25rem;   /* = 36px, hauteur mesurée d'une étiquette réelle */
  margin: 0 0 var(--mna-e2);
}


/* ==== V18i : mise en page ordinateur, texte justifié, prix du marché ===== */
/* Ordinateur et tablette seulement : le smartphone ne change pas. */
@media (min-width: 48em) {
  .mna-section__entete:not(.mna-section__entete--centre) { max-width: none; }
  .mna-section__entete:not(.mna-section__entete--centre) .mna-chapeau { max-width: none; }
}
/* Texte des cartes et listes justifié (hors smartphone, où les lignes sont trop courtes). */
@media (min-width: 40em) {
  .mna-carte__texte,
  .mna-carte > p,
  .mna-liste-coches > li,
  .mna-liste-croix > li {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}
/* Prix de la concurrence : jamais confondu avec le nôtre. */
.mna-offre--marche {
  background: var(--mna-alerte-voile);
  border-color: var(--mna-alerte);
  border-style: dashed;
  box-shadow: none;
}
.mna-etiquette--marche { background: var(--mna-alerte); color: #fff; }
.mna-offre--marche .mna-offre__prix { color: var(--mna-alerte); }
/* Listes d'avantages : puces courtes, alignées à gauche pour une lecture rapide. */
.mna-avantages { margin: 0; display: grid; gap: var(--mna-e3); }
.mna-avantages > li { margin-bottom: 0; text-align: left; hyphens: manual; }
.mna-encadre .mna-avantages { font-size: var(--mna-t-l); }
@media (min-width: 48em) {
  .mna-encadre .mna-avantages { grid-template-columns: 1fr 1fr; column-gap: var(--mna-e6); }
}
.mna-avantages--large { font-size: var(--mna-t-l); }
@media (min-width: 48em) {
  .mna-avantages--large { grid-template-columns: 1fr 1fr; column-gap: var(--mna-e6); row-gap: var(--mna-e4); }
}

/* Puce « aiguille » : la moitié orange de l'aiguille du logo, tournée vers la droite. */
.mna-liste-fleche { list-style: none; padding: 0; }
.mna-liste-fleche > li { position: relative; padding-left: 2.1rem; }
.mna-liste-fleche > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 1.3rem;
  height: 0.75rem;
  border: 0;
  transform: none;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 24'%3E%3Cpath d='M43 12 L1 24 L11 12 L1 0 Z' fill='%23E08A2E'/%3E%3C/svg%3E");
}

/* Gestion — état du rapport complet : vert = payé, rouge = non payé. */
.mna-etat {
  display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px;
  font-size: var(--mna-t-xs); font-weight: 700; color: #fff; white-space: nowrap;
}
.mna-etat--paye { background: var(--mna-succes); }
.mna-etat--non-paye { background: var(--mna-alerte); }
.mna-bouton--paye { background: var(--mna-succes); border-color: var(--mna-succes); color: #fff; }
.mna-bouton--paye:hover { filter: brightness(1.1); color: #fff; }
.mna-bouton--non-paye { background: var(--mna-alerte-voile); border: 1.5px solid var(--mna-alerte); color: var(--mna-alerte); }
.mna-bouton--non-paye:hover { background: #F6D9D6; color: var(--mna-alerte); }
.mna-bouton--non-paye:disabled { opacity: 0.6; cursor: not-allowed; }
.mna-renvoi { display: grid; gap: var(--mna-e2); width: 14rem; }
.mna-renvoi .mna-saisie { width: 100%; min-width: 0; }
.mna-renvoi__boutons { display: grid; gap: var(--mna-e2); }
.mna-renvoi__boutons .mna-bouton { width: 100%; padding-inline: var(--mna-e3); font-size: var(--mna-t-s); }
.mna-cellule-actions .mna-bouton--paye,
.mna-cellule-actions .mna-bouton--non-paye { margin-top: var(--mna-e2); font-size: var(--mna-t-s); }

/* 24. ACCUEIL — atouts en bref et tableau comparatif (V19d) ================ */
/* Les quatre atouts sous les boutons de l'accroche : lisibles en un regard,
   sur fond marine. */
.mna-preuves {
  list-style: none; margin: var(--mna-e5) 0 var(--mna-e3); padding: 0;
  display: grid; gap: var(--mna-e2) var(--mna-e5);
  grid-template-columns: 1fr;
  font-size: var(--mna-t-s); font-weight: 600; color: var(--mna-blanc);
}
.mna-preuves li { position: relative; padding-left: 1.6rem; }
.mna-preuves li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--mna-accent-clair); font-weight: 800;
}
@media (min-width: 40em) { .mna-preuves { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62em) {
  /* Sous le grand titre, dans la colonne de gauche restée vide : les atouts
     se lisent dans le même regard que le titre, sans allonger le bandeau. */
  .mna-heros .mna-preuves { grid-column: 1; grid-row: 3 / span 2; align-self: start;
                            grid-template-columns: 1fr; margin: var(--mna-e4) 0 0;
                            font-size: var(--mna-t-m); }
}

/* Tableau comparatif : notre colonne est mise en avant, les deux autres
   restent sobres. Sur téléphone, chaque critère devient une carte. */
.mna-comparatif__cadre { overflow-x: auto; }
.mna-comparatif {
  width: 100%; border-collapse: separate; border-spacing: 0;
  text-align: left; font-size: var(--mna-t-s);
}
.mna-comparatif th, .mna-comparatif td {
  padding: var(--mna-e3) var(--mna-e4);
  border-bottom: 1px solid var(--mna-bordure);
  vertical-align: top;
}
.mna-comparatif thead th {
  font-size: var(--mna-t-xs); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mna-texte-secondaire); border-bottom: 2px solid var(--mna-bordure-forte);
}
.mna-comparatif tbody th { font-weight: 400; color: var(--mna-encre); width: 32%; }
.mna-comparatif tbody th strong { font-weight: 700; }
.mna-comparatif .mna-comparatif__nous {
  background: var(--mna-primaire-voile);
  border-left: 3px solid var(--mna-primaire);
  border-right: 3px solid var(--mna-primaire);
  color: var(--mna-encre);
}
.mna-comparatif thead .mna-comparatif__nous {
  background: var(--mna-primaire); color: var(--mna-blanc);
  border-radius: var(--mna-rayon-m) var(--mna-rayon-m) 0 0;
  font-size: var(--mna-t-s); letter-spacing: 0; text-transform: none; font-weight: 700;
}
.mna-comparatif tbody tr:last-child .mna-comparatif__nous {
  border-bottom: 3px solid var(--mna-primaire);
  border-radius: 0 0 var(--mna-rayon-m) var(--mna-rayon-m);
}
.mna-comparatif tbody tr:last-child th,
.mna-comparatif tbody tr:last-child td { border-bottom-width: 0; }
.mna-comparatif__marque {
  display: inline-grid; place-items: center;
  width: 1.4rem; height: 1.4rem; margin-right: var(--mna-e1);
  border-radius: 50%; font-weight: 800; font-size: 0.85rem; line-height: 1;
  vertical-align: -0.2em;
}
.mna-comparatif__marque--oui { background: var(--mna-succes); color: var(--mna-blanc); }
.mna-comparatif__marque--non { background: var(--mna-alerte-voile); color: var(--mna-alerte); }
.mna-comparatif__marque--partiel { background: var(--mna-accent-voile); color: var(--mna-accent-texte); }
.mna-comparatif td:not(.mna-comparatif__nous) { color: var(--mna-texte-secondaire); }

@media (max-width: 47.99em) {
  .mna-comparatif__cadre { overflow: visible; }
  .mna-comparatif, .mna-comparatif tbody, .mna-comparatif tr,
  .mna-comparatif th, .mna-comparatif td { display: block; width: 100%; }
  .mna-comparatif thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .mna-comparatif tr {
    border: 1px solid var(--mna-bordure); border-radius: var(--mna-rayon-m);
    margin-bottom: var(--mna-e3); overflow: hidden; background: var(--mna-fond);
  }
  .mna-comparatif tbody th { width: 100%; font-size: var(--mna-t-m); padding-bottom: var(--mna-e2); border-bottom: 0; }
  .mna-comparatif td { border-bottom: 0; padding-block: var(--mna-e2); }
  .mna-comparatif td[data-intitule]::before {
    content: attr(data-intitule); display: block;
    font-size: var(--mna-t-xs); font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--mna-texte-secondaire); margin-bottom: 2px;
  }
  .mna-comparatif .mna-comparatif__nous,
  .mna-comparatif tbody tr:last-child .mna-comparatif__nous {
    border: 0; border-left: 4px solid var(--mna-primaire); border-radius: 0;
  }
  .mna-comparatif .mna-comparatif__nous::before { color: var(--mna-primaire); }
  .mna-comparatif tbody tr:last-child th,
  .mna-comparatif tbody tr:last-child td { border-bottom-width: 0; }
}

/* Gestion — fréquentation : barre de proportion sous chaque libellé. */
.mna-frequentation__barre {
  display: block; height: 6px; margin-top: 6px; border-radius: 3px;
  background: var(--mna-primaire-voile); overflow: hidden;
}
.mna-frequentation__barre > span { display: block; height: 100%; background: var(--mna-primaire); }

/* 25. LECTURE — texte large, deux colonnes sur grand écran (V19g) ========== */
/* La mesure de 68 signes (≈ 650 px) donnait, sur ordinateur, une colonne
   étriquée au milieu d'une page vide. Le texte occupe maintenant la largeur
   disponible, plafonnée à environ 90 signes pour rester confortable. */
.mna-article--large { max-width: 92ch; }
.mna-article--large > h2 { margin-top: var(--mna-e7); }
.mna-article--large table { display: block; overflow-x: auto; }
.mna-titre-guide { max-width: 38ch; }

.mna-lecture { display: grid; gap: var(--mna-e6); }
.mna-lecture .mna-article { max-width: none; min-width: 0; }
.mna-lecture__suite { margin-top: var(--mna-e5); }
.mna-lecture__suite ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--mna-e3); }
.mna-lecture__suite a { font-weight: 600; }
@media (min-width: 64em) {
  .mna-lecture { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--mna-e8); align-items: start; }
  .mna-lecture__cote { position: sticky; top: 6rem; }
  .mna-lecture .mna-article { font-size: 1.14rem; line-height: 1.7; }
}

/* Bandeau d'annonce (offre de lancement) ================================= */
.mna-annonce {
  background: var(--mna-accent-voile);
  border-bottom: 1px solid var(--mna-accent);
  color: var(--mna-encre);
  font-size: var(--mna-t-s);
  line-height: 1.4;
  padding: .55rem 0;
  text-align: center;
}
.mna-annonce a { color: var(--mna-accent-texte); font-weight: 700; margin-left: .35rem; }