/* ==========================================================================
   CNASPP — nouvelle version du site (cahier des charges du 09/10/2026), en
   ligne depuis le 10/10/2026 : en-tête, pied, accueil et pages harmonisées.
   Chargée sur toutes les pages, après style.css.
   S'appuie sur style.css : palette, polices, boutons, en-tête, pied de page.
   Préfixe « m- » : aucune règle n'atteint les pages actuelles.
   ========================================================================== */

.maquette {
  --m-espace: clamp(64px, 8vw, 104px);
  --m-trait: #E3E8F0;
  --m-texte-doux: #46546d;
}

/* Bandeau d'avertissement de prévisualisation ------------------------------ */
.m-bandeau-maquette { margin: 0; padding: 8px 20px; background: #FFF4E5; border-bottom: 1px solid #E8B06A; color: #6E3B05; font-size: .875rem; font-weight: 700; text-align: center; }

/* Texte courant : 17 px, lignes confortables ------------------------------- */
.maquette .site-main { font-size: 1.0625rem; }
.maquette .site-main p { max-width: 68ch; }
.maquette .site-main h2 { margin-block: 0 18px; font-size: clamp(1.6rem, 2.6vw, 2.15rem); }
.maquette .site-main h3 { margin-block: 0 8px; font-size: 1.12rem; line-height: 1.3; }

.m-section { padding-block: var(--m-espace); }
.m-section-bordee { border-top: 1px solid var(--m-trait); }
.m-fond-doux { background: var(--cnaspp-soft); }
.m-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.m-centre { justify-content: center; }
.m-entete-centree { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.m-entete-centree p { margin-inline: auto; color: var(--m-texte-doux); }

/* Grille texte / visuel, avec alternance du côté de l'illustration --------- */
.m-deux-colonnes { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.m-illustration img { display: block; width: 100%; height: auto; }

/* 1. Accueil principal ------------------------------------------------------ */
.m-hero { padding-block: clamp(40px, 6vw, 80px) clamp(48px, 6vw, 88px); }
.m-hero-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.m-surtitre { margin: 0 0 18px; color: var(--texte-teal); font-family: Figtree, "Segoe UI", Arial, sans-serif; font-size: .82rem; font-weight: 800; letter-spacing: .08em; line-height: 1.5; text-transform: uppercase; }
.m-hero h1 { margin: 0 0 22px; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.12; }
.m-hero-texte p:not(.m-surtitre) { color: var(--m-texte-doux); }
.m-hero-visuel img { display: block; width: 100%; height: auto; }

/* 2. Chiffres clés ---------------------------------------------------------- */
.m-chiffres { padding-block: 40px 30px; background: var(--cnaspp-soft); border-block: 1px solid var(--m-trait); }
.m-chiffres-liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.m-chiffres-liste li { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; row-gap: 6px; align-items: center; padding-left: 20px; border-left: 3px solid var(--accent, var(--cnaspp-teal)); }
.m-chiffres-liste .m-picto { grid-row: 1; margin: 0; background: color-mix(in srgb, var(--accent) 16%, white); }
.m-chiffres-liste strong { grid-row: 1; grid-column: 2; }
.m-chiffres-liste span:not(.m-picto) { grid-column: 1 / -1; }
.m-chiffres-liste strong { color: var(--cnaspp-navy); font-family: Figtree, "Segoe UI", Arial, sans-serif; font-size: clamp(2.4rem, 4.2vw, 3.3rem); font-weight: 900; line-height: 1; letter-spacing: -.02em; }
.m-chiffres-liste span:not(.m-picto) { color: var(--cnaspp-ink); font-weight: 700; line-height: 1.35; }
.m-chiffres-source { margin: 22px 0 0; color: var(--m-texte-doux); font-size: .875rem; }

/* 3. Objectifs : trois colonnes sobres ------------------------------------- */
.m-objectifs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); margin: clamp(48px, 6vw, 72px) 0 0; padding: 0; list-style: none; }
.m-objectifs li { padding-top: 26px; border-top: 1px solid var(--m-trait); }
.m-objectifs p { margin: 0; color: var(--m-texte-doux); }
.m-picto { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: 16px; border-radius: 50%; background: color-mix(in srgb, var(--accent, var(--cnaspp-teal)) 14%, white); }
.m-picto img { width: 24px; height: 24px; }

/* 4. Réseau : carte -------------------------------------------------------- */
.m-carte { margin: 0; }
.m-carte svg { display: block; width: 100%; height: auto; max-width: 560px; }
.m-carte figcaption { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; font-size: .9375rem; }
.m-legende { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }
.m-pastille { flex: none; width: 16px; height: 16px; border-radius: 4px; background: var(--cnaspp-teal); }
.m-regions { color: var(--cnaspp-ink); }
.m-source { color: var(--m-texte-doux); font-size: .875rem; }

/* 5. Tuiles des domaines ---------------------------------------------------- */
.m-tuiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.m-tuile { display: flex; flex-direction: column; padding: 28px 22px 26px; background: #fff; border: 1px solid var(--m-trait); border-top: 4px solid var(--accent); border-radius: 12px; }
.m-tuile h3 { min-height: 2.6em; }
.m-tuile p { margin: 0; color: var(--m-texte-doux); font-size: 1rem; }
/* Toute la tuile est cliquable (lien étendu sur le titre), survol discret. */
.m-tuile { position: relative; transition: border-color .15s ease, box-shadow .15s ease; }
.m-tuile-lien { color: var(--cnaspp-navy); text-decoration: none; }
.m-tuile-lien::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.m-tuile-suite { margin-top: auto; padding-top: 16px; color: var(--cnaspp-navy); font-size: .9375rem; font-weight: 700; }
.m-tuile-suite::after { content: " →"; }
.m-tuile:hover { border-color: color-mix(in srgb, var(--accent) 55%, white); box-shadow: 0 10px 24px rgba(18, 58, 126, .08); }
.m-tuile:hover .m-tuile-lien, .m-tuile:hover .m-tuile-suite { text-decoration: underline; text-underline-offset: .18em; }
.m-tuile:focus-within { outline: 3px solid var(--cnaspp-orange); outline-offset: 3px; }
.m-tuile-lien:focus-visible { outline: none; }

/* 6. Démarche : frise ------------------------------------------------------- */
.m-frise { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: etape; }
.m-frise li { position: relative; padding-top: 64px; counter-increment: etape; }
.m-frise li::before { content: counter(etape); position: absolute; top: 0; left: 0; z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--cnaspp-navy); color: #fff; font-family: Figtree, "Segoe UI", Arial, sans-serif; font-weight: 900; font-size: 1.1rem; }
.m-frise li:not(:last-child)::after { content: ""; position: absolute; top: 22px; left: 54px; right: -10px; height: 2px; background: #B9C7D8; }
.m-frise strong { display: block; margin-bottom: 6px; color: var(--cnaspp-navy); font-family: Figtree, "Segoe UI", Arial, sans-serif; font-size: 1.1rem; }
.m-frise span { color: var(--m-texte-doux); font-size: 1rem; }
.m-note { max-width: none !important; margin: 36px 0 0; color: var(--m-texte-doux); font-size: .9375rem; text-align: center; }

/* 8. Ressources ------------------------------------------------------------- */
.m-ressources { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.m-document { display: flex; gap: 20px; padding: 28px; border: 1px solid var(--m-trait); border-radius: 12px; background: #fff; }
.m-document .m-picto { flex: none; --accent: var(--cnaspp-purple); }
.m-document p { margin: 0 0 6px; color: var(--m-texte-doux); }
.m-liens { display: flex; flex-direction: column; gap: 10px; margin-top: 14px !important; }
.m-liens a { font-weight: 700; }
.m-format { font-weight: 400; }

/* 9. Rejoindre --------------------------------------------------------------- */
.m-rejoindre { padding-block: clamp(56px, 7vw, 88px); background: linear-gradient(100deg, var(--cnaspp-navy) 0%, #15488F 100%); color: #fff; }
.m-footer { border-top: 4px solid var(--cnaspp-teal); }
.m-rejoindre-grille { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 40px; align-items: center; }
.m-rejoindre h2 { color: #fff; }
.m-rejoindre p { color: #DCE8F7; }
.m-rejoindre .m-actions { margin-top: 0; }
/* Survol du bouton orange : fond orange foncé et texte blanc (5,2:1). */
.maquette .button-orange:hover { background: #A75713; color: #fff; }
.m-bouton-clair { background: #fff; color: var(--cnaspp-navy); }
.m-bouton-clair:hover { background: #E8F0FA; color: var(--cnaspp-navy-dark); }
.m-rejoindre :focus-visible { outline-color: #F5B321; }

/* 10. Pied de page ----------------------------------------------------------- */
.m-footer-grille { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-block: 56px 40px; }
.m-footer-presentation p { margin: 18px 0 0; max-width: 42ch; color: #C9D8EC; font-size: .9375rem; }
.m-footer-titre { margin: 0 0 14px; color: #fff; font-family: Figtree, "Segoe UI", Arial, sans-serif; font-size: .95rem; font-weight: 800; }
.m-footer-colonne ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.m-footer-colonne a { display: inline-block; padding: 6px 0; color: #DCE8F7; text-decoration: none; }
.m-footer-colonne a:hover { color: #F5B321; text-decoration: underline; }

/* Effets : discrets, et désactivés si la personne le demande ------------------ */
@media (prefers-reduced-motion: no-preference) {
  .maquette .button { transition: background-color .15s ease, transform .15s ease; }
}

/* Tablette ------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .m-tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .m-footer-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .m-footer-presentation { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .m-hero-grille, .m-deux-colonnes, .m-ressources, .m-rejoindre-grille { grid-template-columns: minmax(0, 1fr); }
  .m-hero-visuel { max-width: 560px; }
  .m-illustration { max-width: 520px; }
  .m-chiffres-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .m-objectifs { grid-template-columns: minmax(0, 1fr); }
  .m-tuile h3 { min-height: 0; }
  /* Frise verticale sur petit écran. */
  .m-frise { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .m-frise li { padding: 4px 0 0 66px; min-height: 46px; }
  .m-frise li:not(:last-child)::after { top: 52px; bottom: -22px; left: 22px; right: auto; width: 2px; height: auto; }
  .m-note { text-align: left; }
}
@media (max-width: 640px) {
  .m-tuiles { grid-template-columns: minmax(0, 1fr); }
  .m-chiffres-liste { grid-template-columns: minmax(0, 1fr); }
  .m-footer-grille { grid-template-columns: minmax(0, 1fr); }
  .m-actions .button { width: 100%; }
  .m-document { flex-direction: column; }
}

/* ===========================================================================
   Menu horizontal : chaque rubrique a sa couleur de la charte au survol, et
   la garde sur la page en cours (aria-current). Texte en teinte assombrie :
   contraste d'au moins 4,7:1 sur le fond teinté.
   ========================================================================= */
.maquette .primary-menu { gap: 4px; }
.maquette .primary-menu > li:not(:last-child) > a { padding: 10px 12px; border-radius: 6px; color: var(--cnaspp-navy); }
.maquette .primary-menu > li:not(:last-child) > a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 3px; border-radius: 3px; background: var(--rubrique-texte); transform: scaleX(0); transform-origin: left; }
.maquette .primary-menu > li:not(:last-child) > a:hover,
.maquette .primary-menu > li:not(:last-child) > a[aria-current] { background: color-mix(in srgb, var(--rubrique) 10%, white); color: var(--rubrique-texte); }
.maquette .primary-menu > li:not(:last-child) > a:hover::after,
.maquette .primary-menu > li:not(:last-child) > a[aria-current]::after { transform: scaleX(1); }
.maquette .primary-menu > li:last-child { margin-left: 12px; padding-left: 20px; }
.maquette .primary-menu > li:last-child > a { border-color: transparent; }
.maquette .primary-menu > li:last-child > a[aria-current] { background: var(--cnaspp-navy-dark); box-shadow: 0 6px 16px rgba(18,58,126,.16); }
@media (prefers-reduced-motion: no-preference) {
  .maquette .primary-menu > li:not(:last-child) > a { transition: background-color .15s ease, color .15s ease; }
  .maquette .primary-menu > li:not(:last-child) > a::after { transition: transform .18s ease; }
}

/* Fil d'Ariane ------------------------------------------------------------- */
.m-ariane { border-bottom: 1px solid var(--m-trait); background: #fff; font-size: .9375rem; }
.m-ariane ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin: 0; padding: 8px 0; list-style: none; }
.m-ariane li { display: inline-flex; align-items: center; }
.m-ariane li + li::before { content: "›"; content: "›" / ""; margin: 0 10px; color: var(--m-texte-doux); }
.m-ariane a { display: inline-block; padding: 4px 0; color: var(--cnaspp-navy); }
.m-ariane [aria-current] { color: var(--cnaspp-ink); font-weight: 700; }

/* ===========================================================================
   Pages internes
   ========================================================================= */
.m-page-entete { padding-block: clamp(36px, 5vw, 64px); border-bottom: 1px solid var(--m-trait); }
.m-page-entete-grille { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.m-page-entete h1 { margin: 0 0 20px; font-size: clamp(1.9rem, 3.3vw, 2.7rem); line-height: 1.14; }
.m-chapo { color: var(--m-texte-doux); }
.m-page-entete-visuel img { display: block; width: 100%; max-width: 480px; height: auto; margin-left: auto; }

/* Sommaire de page : liens d'ancre en ligne */
.m-sommaire { border-bottom: 1px solid var(--m-trait); background: var(--cnaspp-soft); }
.m-sommaire .container { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; padding-block: 10px; }
.m-sommaire-titre { margin: 0; color: var(--m-texte-doux); font-size: .875rem; font-weight: 700; }
.m-sommaire ul { display: flex; flex-wrap: wrap; gap: 0 6px; margin: 0; padding: 0; list-style: none; }
.m-sommaire a { display: inline-block; padding: 8px 10px; border-radius: 6px; color: var(--cnaspp-navy); font-weight: 700; font-size: .9375rem; text-decoration: none; }
.m-sommaire li[style] a { display: inline-flex; align-items: center; gap: 8px; padding-left: 6px; }
.m-sommaire-picto { display: inline-grid; flex: none; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, white); }
.m-sommaire-picto img { width: 17px; height: 17px; }
.m-sommaire a:hover { background: #fff; text-decoration: underline; }
.maquette :target { scroll-margin-top: 110px; }

.m-haut { align-items: start; }
.m-sous-titre { margin: 40px 0 18px !important; color: var(--cnaspp-navy); font-size: 1.15rem !important; }
.m-sous-titre:first-of-type { margin-top: 0 !important; }
.m-lien-fleche { font-weight: 700; }
.m-lien-fleche::after { content: " →"; }
.m-note-gauche { margin-top: 22px; color: var(--m-texte-doux); font-size: .9375rem; }

/* Chronologie verticale (Le collectif) */
.m-chronologie { position: relative; margin: 0; padding: 0 0 0 28px; list-style: none; border-left: 2px solid #B9C7D8; }
.m-chronologie li { position: relative; padding-bottom: 26px; }
.m-chronologie li:last-child { padding-bottom: 0; }
.m-chronologie li::before { content: ""; position: absolute; left: -37px; top: 4px; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; background: #fff; border: 3px solid var(--cnaspp-teal); }
.m-chronologie li:last-child::before { background: var(--cnaspp-orange); border-color: var(--cnaspp-orange); }
.m-chronologie-date { margin: 0 0 2px; color: var(--texte-teal); font-size: .875rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.maquette .m-chronologie h3 { margin-bottom: 4px; }
.m-chronologie p:not(.m-chronologie-date) { margin: 0; color: var(--m-texte-doux); }

/* Objectifs numérotés : variante de la grille de l'accueil */
.m-objectifs-numerotes, .m-objectifs-sans-marge { margin-top: 0; }
.m-objectifs-numerotes li { border-top: 3px solid var(--accent); }

/* Citation du plaidoyer */
.m-citation { margin: 0; padding: 32px 32px 28px; border-left: 4px solid var(--cnaspp-orange); background: var(--cnaspp-soft); border-radius: 0 12px 12px 0; }
.maquette .m-citation p { margin: 0 0 14px; color: var(--cnaspp-navy); font-family: Figtree, "Segoe UI", Arial, sans-serif; font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 700; line-height: 1.35; }
.m-citation footer { color: var(--m-texte-doux); font-size: .9375rem; }

/* Tableau du comité restreint */
.m-tableau { width: 100%; border-collapse: collapse; font-size: 1rem; }
.m-tableau th, .m-tableau td { padding: 12px 14px; border-bottom: 1px solid var(--m-trait); text-align: left; vertical-align: top; }
.m-tableau thead th { color: var(--m-texte-doux); font-size: .875rem; font-weight: 700; border-bottom-width: 2px; }
.m-tableau tbody th { color: var(--cnaspp-navy); font-weight: 700; }

/* Grilles de logos en liste */
.m-logos { margin: 0; padding: 0; list-style: none; }
.m-logos > li { display: flex; min-width: 0; }
.m-logos .logo-card { width: 100%; }

/* Encadrés : contact, information, rubriques en préparation */
.m-encadre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding: clamp(24px, 4vw, 36px); border: 1px solid var(--m-trait); border-radius: 12px; background: #fff; }
.m-encadre > div { flex: 1 1 420px; min-width: 0; }
.maquette .m-encadre h2 { margin-bottom: 10px; font-size: clamp(1.3rem, 2vw, 1.6rem); }
.m-encadre p:last-child { margin-bottom: 0; }
.m-encadre-info { border-left: 4px solid var(--cnaspp-teal); background: #F2F9FA; }
.m-encadre-colonne { display: block; }
.maquette .m-encadre .m-titre-petit { font-size: 1.1rem; }

/* Domaines (Nos expertises) */
.m-domaines { display: grid; gap: 22px; }
.m-domaine { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; padding: clamp(24px, 3vw, 34px); border: 1px solid var(--m-trait); border-left: 5px solid var(--accent); border-radius: 12px; background: #fff; }
.maquette .m-domaine h3 { font-size: 1.3rem; }
.m-domaine p { margin: 0 0 10px; color: var(--m-texte-doux); }
.m-domaine p:last-child { margin-bottom: 0; }
.m-picto-grand { width: 64px; height: 64px; margin: 0; }
.m-picto-grand img { width: 30px; height: 30px; }

/* Repères partagés : liste numérotée en deux colonnes */
.m-reperes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 48px; margin: 0; padding: 0; list-style: none; counter-reset: repere; }
.m-reperes li { position: relative; padding-left: 58px; counter-increment: repere; }
.m-reperes li::before { content: counter(repere); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--cnaspp-navy); color: var(--cnaspp-navy); font-family: Figtree, "Segoe UI", Arial, sans-serif; font-weight: 900; }
.m-reperes p { margin: 0; color: var(--m-texte-doux); }

/* Régions : Hexagone et outre-mer sur le même plan */
.m-regions-listes { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 28px; margin-top: 26px; }
.m-regions-listes h3 { padding-bottom: 8px; border-bottom: 2px solid var(--cnaspp-teal); }
.m-liste-regions { display: grid; gap: 4px 20px; margin: 12px 0 0; padding: 0; list-style: none; }
.m-regions-listes > div:first-child .m-liste-regions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.m-liste-regions li { position: relative; padding-left: 16px; }
.m-liste-regions li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 2px; background: var(--cnaspp-teal); }

/* Rôles dans les marchés */
.m-roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; }
.m-roles > div { padding: 24px; border: 1px solid var(--m-trait); border-top: 4px solid var(--cnaspp-navy); border-radius: 12px; background: #fff; }
.m-roles dt { margin-bottom: 8px; color: var(--cnaspp-navy); font-family: Figtree, "Segoe UI", Arial, sans-serif; font-size: 1.12rem; font-weight: 800; }
.m-roles dd { margin: 0; color: var(--m-texte-doux); font-size: 1rem; }

/* Documents (Ressources) */
.m-documents { display: grid; gap: 18px; max-width: 760px; margin: 0; padding: 0; list-style: none; }

/* Frise à trois étapes (Rejoindre) */
.m-frise-trois { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 960px; margin-inline: auto; }

/* Formulaires */
.m-formulaire-largeur { width: min(var(--cnaspp-reading), calc(100% - 40px)); margin-inline: auto; }
.m-contact-grille { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.m-contact-aside { display: grid; gap: 18px; }
.maquette .form-status[role="alert"] { border-width: 2px; }
.maquette .required { color: #A3122F; }

@media (max-width: 1100px) {
  .m-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .m-page-entete-grille, .m-contact-grille { grid-template-columns: minmax(0, 1fr); }
  .m-page-entete-visuel img { max-width: 420px; margin-left: 0; }
  .m-reperes { grid-template-columns: minmax(0, 1fr); }
  .m-frise-trois { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .m-roles, .m-regions-listes, .m-regions-listes > div:first-child .m-liste-regions { grid-template-columns: minmax(0, 1fr); }
  .m-domaine { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .m-encadre .button { width: 100%; }
}

/* Plaidoyer : numéros des propositions, contraste porté à 5,6:1 (texte inchangé). */
.maquette .prop-num { color: var(--texte-gris); }

/* Pages de texte (mentions légales, confidentialité, accessibilité…) : les
   intertitres et paragraphes gardent la colonne de lecture de style.css. */
.maquette .entry-content > p { max-width: var(--cnaspp-reading); }
.maquette .entry-content h2 { margin-top: 2.1em; }
.maquette .entry-content h3 { margin-top: 1.7em; }
.maquette .entry-content > h2:first-child, .maquette .entry-content > h3:first-child { margin-top: 0; }

/* Ressources : document vedette et rubriques de la médiathèque ------------- */
.m-vedette { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(28px, 4vw, 48px); border: 2px solid var(--cnaspp-purple); border-radius: 24px; background: #fff; }
.m-vedette-visuel img { display: block; width: 100%; max-width: 480px; height: auto; margin-left: auto; }
.m-vedette-faits { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 22px 0 0; padding: 0; list-style: none; color: var(--m-texte-doux); font-size: .9375rem; }
.m-vedette-faits li { display: flex; flex-direction: column; padding-left: 14px; border-left: 3px solid var(--cnaspp-teal); }
.m-vedette-faits strong { color: var(--cnaspp-navy); font-family: Figtree, "Segoe UI", Arial, sans-serif; font-size: 1.35rem; font-weight: 900; line-height: 1.2; }
.m-rubriques { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.m-rubrique { display: flex; flex-direction: column; padding: 28px 24px 24px; border: 2px solid var(--accent); border-radius: 20px; background: #fff; }
.m-rubrique > p:not(.en-travaux) { margin: 0; color: var(--m-texte-doux); font-size: 1rem; }
.m-rubrique .en-travaux { margin-top: auto; padding-top: 18px; }
@media (max-width: 900px) {
  .m-vedette { grid-template-columns: minmax(0, 1fr); }
  .m-vedette-visuel { order: -1; }
  .m-vedette-visuel img { max-width: 420px; margin-left: 0; }
  .m-rubriques { grid-template-columns: minmax(0, 1fr); }
}
.m-encadre-plein { border: 2px solid var(--cnaspp-teal); border-radius: 20px; }

/* Cartes et encadrés de toutes les pages : contour coloré complet et angles
   arrondis, comme sur la page Ressources (demande du 10/10/2026). */
.m-tuile { border: 2px solid var(--accent); border-radius: 20px; }
.m-tuile-lien::after { border-radius: 20px; }
.m-tuile:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, white); }
.m-tuile:focus-within { border-radius: 20px; }
.m-domaine { border: 2px solid var(--accent); border-radius: 20px; }
.m-roles > div { border: 2px solid var(--cnaspp-navy); border-radius: 20px; }
.m-document { border: 2px solid var(--cnaspp-purple); border-radius: 20px; }
.m-encadre, .m-encadre-info { border: 2px solid var(--cnaspp-teal); border-radius: 20px; }
.m-citation { border: 2px solid var(--cnaspp-orange); border-radius: 20px; }
.maquette .form-card { border: 2px solid var(--cnaspp-navy); border-radius: 20px; }
.m-entete-note { margin: 16px 0 0; color: var(--m-texte-doux); font-size: .9375rem; }

/* Plaidoyer : mêmes contours colorés et arrondis que les autres pages. */
.maquette .plaidoyer-toc { border: 2px solid var(--cnaspp-navy); border-radius: 20px; }
.maquette .sources-panel { border: 2px solid var(--cnaspp-teal); border-radius: 20px; }
.maquette .trio-carte, .maquette .champ-carte { border: 2px solid var(--accent); border-radius: 20px; box-shadow: none; }
.maquette .finalite { border: 2px solid var(--cnaspp-teal); border-radius: 20px; }
.maquette .citation-bloc { border-radius: 20px; }
.maquette .plaidoyer-cta { border: 2px solid var(--cnaspp-orange); border-radius: 20px; }

/* Espace réduit entre le fil d'Ariane et le début de la page (10/10/2026). */
.m-page-entete { padding-block: clamp(18px, 2.4vw, 30px) clamp(36px, 4.5vw, 56px); }
.m-page-entete-grille { align-items: start; }
.m-page-entete .m-surtitre { margin-bottom: 12px; }
.maquette .page-hero .container { min-height: 0; padding-block: clamp(18px, 2.4vw, 30px) clamp(32px, 4vw, 48px); }
.maquette .page-hero + .content-area { padding-top: clamp(24px, 3vw, 36px); }

/* Sommaires de page (Le collectif, Nos expertises) : même langage que le
   sommaire du plaidoyer — cadre arrondi, titre, pastilles de couleur. */
.m-sommaire { padding-block: clamp(24px, 3vw, 36px) 0; border: 0; background: none; }
.m-sommaire .container { display: block; padding: 18px 26px 20px; border: 2px solid var(--cnaspp-navy); border-radius: 20px; background: #fff; }
.maquette .m-sommaire-titre { margin: 0 0 10px; color: var(--cnaspp-navy); font-family: Figtree, "Segoe UI", Arial, sans-serif; font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.m-sommaire ol, .m-sommaire ul { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; list-style: none; }
.m-sommaire a, .m-sommaire li[style] a { display: inline-flex; align-items: center; gap: 10px; padding: 7px 10px 7px 6px; border-radius: 10px; box-shadow: none; color: var(--cnaspp-navy); font-weight: 600; font-size: .95rem; text-decoration: none; }
.m-sommaire a:hover { background: var(--cnaspp-soft); text-decoration: underline; }
.m-sommaire-num { display: inline-grid; flex: none; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: color-mix(in srgb, var(--accent) 62%, black); color: #fff; font-family: Figtree, "Segoe UI", Arial, sans-serif; font-size: .8rem; font-weight: 900; }
.m-sommaire + .m-section { padding-top: clamp(40px, 5vw, 64px); }
@media (max-width: 640px) {
  .m-sommaire ol, .m-sommaire ul { flex-direction: column; gap: 2px; }
}

/* Sommaire commun : pastille carrée, chiffre, lettre ou pictogramme en blanc. */
.m-sommaire-num img { width: 16px; height: 16px; filter: brightness(0) invert(1); }
.m-sommaire-picto { display: none; }
/* Plaidoyer : sommaire accessible à gauche, comme dans le thème historique.
   En dessous de 780 px, la grille repasse en une colonne via style.css. */
.maquette .plaidoyer-layout { max-width: 1180px; }
.m-sommaire + .content-area { padding-top: clamp(32px, 4vw, 48px); }

/* ===========================================================================
   Sous-menus du menu principal (10/10/2026) : sections de chaque page.
   ========================================================================= */
.m-avec-sous-menu { position: relative; display: flex; align-items: center; }
.m-sous-menu-bouton { display: inline-grid; place-items: center; width: 26px; height: 34px; margin-left: -4px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--cnaspp-navy); cursor: pointer; }
.m-sous-menu-bouton:hover, .m-sous-menu-bouton[aria-expanded="true"] { background: color-mix(in srgb, var(--rubrique) 10%, white); color: var(--rubrique-texte); }
.m-chevron { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.m-sous-menu-bouton[aria-expanded="true"] .m-chevron { transform: translateY(2px) rotate(-135deg); }
.m-sous-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; display: none; min-width: 280px; margin: 0; padding: 10px; list-style: none; background: #fff; border: 2px solid var(--rubrique-texte); border-radius: 18px; box-shadow: 0 18px 40px rgba(18, 58, 126, .14); }
.m-sous-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.m-avec-sous-menu.ouvert > .m-sous-menu { display: block; }
@media (hover: hover) and (min-width: 1141px) {
  .m-avec-sous-menu:hover > .m-sous-menu { display: block; }
}
.maquette .primary-menu .m-sous-menu a { display: block; padding: 9px 12px; border-radius: 10px; color: var(--cnaspp-navy); font-size: .92rem; font-weight: 600; letter-spacing: 0; line-height: 1.35; text-transform: none; }
.maquette .primary-menu .m-sous-menu a::after { display: none; }
.maquette .primary-menu .m-sous-menu a:hover, .maquette .primary-menu .m-sous-menu a:focus-visible { background: color-mix(in srgb, var(--rubrique) 10%, white); color: var(--rubrique-texte); text-decoration: underline; }
@media (prefers-reduced-motion: no-preference) {
  .m-chevron { transition: transform .15s ease; }
}
@media (max-width: 1140px) {
  .m-avec-sous-menu { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .m-sous-menu-bouton { width: 44px; height: 44px; margin: 0; }
  .m-sous-menu { position: static; grid-column: 1 / -1; min-width: 0; padding: 0 0 12px 14px; border: 0; border-radius: 0; box-shadow: none; }
  .m-sous-menu::before { display: none; }
  .maquette .primary-menu .m-sous-menu li { border-bottom: 0; }
  .maquette .primary-menu .m-sous-menu a { padding: 10px 12px; }
}
/* Menu sur une seule ligne malgré les flèches des sous-menus. */
@media (min-width: 1141px) {
  .maquette .primary-menu { gap: 2px; }
  .maquette .primary-menu > li > a { white-space: nowrap; }
  .maquette .primary-menu > li:not(:last-child) > a { padding: 10px 6px 10px 10px; }
  .maquette .primary-menu > li:not(:last-child) > a::after { left: 10px; right: 6px; }
  .m-sous-menu-bouton { width: 22px; margin-left: -2px; }
  .maquette .primary-menu > li:last-child { margin-left: 8px; padding-left: 16px; }
}
/* Menu compact jusqu'à 1340 px : au-delà de 1260 px le menu complet débordait de 20 px vers 1280 px (19/10/2026). */
@media (min-width: 1141px) and (max-width: 1340px) {
  .maquette .primary-menu { font-size: .74rem; }
  .maquette .primary-menu > li:not(:last-child) > a { letter-spacing: .04em; padding-left: 7px; }
  .maquette .primary-menu > li:last-child > a { padding: 11px 16px; font-size: .88rem; }
  .maquette .site-description { display: none; }
}
@media (min-width: 1141px) {
  .m-sous-menu-bouton { width: 26px; margin-left: 0; }
}

/* Médiathèque : documents de référence ------------------------------------- */
.m-rubrique-lien { margin: auto 0 0 !important; padding-top: 18px; }
.m-references { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.m-references-groupe { padding: 26px 28px; border: 2px solid var(--cnaspp-teal); border-radius: 20px; background: #fff; }
.maquette .m-references-groupe h3 { margin-bottom: 14px; font-size: 1.15rem; }
.m-references-groupe ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.m-reference { padding: 14px 0; border-top: 1px solid var(--m-trait); }
.m-reference:first-child { padding-top: 0; border-top: 0; }
.m-reference p { margin: 4px 0 0; color: var(--m-texte-doux); font-size: .9375rem; }
.maquette .m-reference .m-reference-source { margin: 0 0 4px; color: var(--texte-teal); font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.m-reference > a { font-weight: 700; }
.m-reference-format { font-size: .875rem !important; }
@media (max-width: 900px) {
  .m-references { grid-template-columns: minmax(0, 1fr); }
}
.m-references { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .m-references { grid-template-columns: minmax(0, 1fr); } }
.m-references-large { grid-column: 1 / -1; }
.m-references-large ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.m-references-large .m-reference:nth-child(2) { padding-top: 0; border-top: 0; }
@media (max-width: 900px) {
  .m-references-large ul { grid-template-columns: minmax(0, 1fr); }
  .m-references-large .m-reference:nth-child(2) { padding-top: 14px; border-top: 1px solid var(--m-trait); }
}
@media (min-width: 1101px) { .m-references { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1101px) { .m-references { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1101px) { .m-references { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.m-references-intro { margin: -6px 0 14px; color: var(--m-texte-doux); font-size: .9375rem; }
.m-reference-titre { color: var(--cnaspp-navy); }
/* Audit d'accessibilité du 10/10/2026 : texte du plaidoyer aligné à gauche
   (le texte justifié crée des espaces irréguliers, gênants pour les lecteurs
   dyslexiques ; le contenu est inchangé). */
.maquette .plaidoyer-content .partie > p { text-align: left; hyphens: manual; }

/* Le collectif : section « Notre organisation » (10/10/2026). */
.m-chapo-section { color: var(--cnaspp-navy) !important; font-family: Figtree, "Segoe UI", Arial, sans-serif; font-size: 1.2rem; font-weight: 700; }
.m-frise-quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.m-organisation { margin-top: clamp(48px, 6vw, 72px); }
.maquette .m-organisation h3 { margin-top: 28px; font-size: 1.25rem; }
.maquette .m-organisation h3:first-child { margin-top: 0; }
@media (max-width: 900px) { .m-frise-quatre { grid-template-columns: minmax(0, 1fr); } }

/* Bouton « Revenir en haut de la page » -------------------------------------- */
#haut { position: absolute; top: 0; left: 0; width: 1px; height: 1px; outline: 0; }
.m-retour-haut { position: fixed; right: 24px; bottom: 24px; z-index: 900; display: grid; place-items: center; width: 52px; height: 52px; border: 2px solid #fff; border-radius: 50%; background: var(--cnaspp-navy); color: #fff; box-shadow: 0 8px 22px rgba(18, 58, 126, .28); }
.m-retour-haut:hover { background: var(--cnaspp-navy-dark); color: #fff; }
.m-retour-haut:focus-visible { outline: 3px solid var(--texte-orange); outline-offset: 3px; border-radius: 50%; }
.m-retour-haut.cache-au-depart:not(.visible) { visibility: hidden; opacity: 0; transform: translateY(12px); }
@media (prefers-reduced-motion: no-preference) {
  .m-retour-haut { transition: opacity .2s ease, transform .2s ease, visibility .2s, background .16s ease; }
}
body:has(.cnaspp-bandeau-apercu) .m-retour-haut { bottom: 76px; }
@media (max-width: 600px) {
  .m-retour-haut { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 48px; height: 48px; }
  .footer-bottom { padding-bottom: 80px; }
}