/* =============================================================================
   COUCHE COMPOSANTS
   -----------------
   Motifs qui reviennent d'une page à l'autre dans les maquettes. Ils y étaient
   réécrits en style en ligne à chaque occurrence : le même en-tête de section
   (surtitre + titre + chapô) apparaissait cinq fois par page, avec à chaque
   fois ses vingt déclarations recopiées. Toute correction devait donc être
   faite autant de fois qu'il y avait de sections — et c'est comme ça qu'on
   retrouve, dans un seul fichier, trois gris de texte différents pour le même
   usage.

   Règle de tenue de ce fichier : un motif n'y entre qu'à partir du moment où
   il sert à DEUX pages. En dessous, il reste dans la feuille de la page.
   ========================================================================== */

:root {
    /* Vert d'appoint. Il n'appartient PAS à la charte : le design l'a ajouté à
       la main sur la seule page Entraide, pour le badge « réservé SOLIDUM
       PLUS ». Il est isolé ici en attendant l'arbitrage — soit il rejoint la
       charte, soit il disparaît, et dans les deux cas ça se règle sur cette
       ligne. */
    --mpn-vert: #5FAB48;

    /* Couleurs d'ETAT. Nommees par ce qu'elles disent, pas par leur teinte :
       en theme sombre, `--vert-clair` vaudrait #0E2A1C, ce qui ne veut plus
       rien dire. Chaque paire fond/texte est redefinie plus bas. */
    --mpn-succes-fond: #E7F3EA;
    --mpn-succes-texte: #17804A;
    --mpn-alerte-fond: rgba(225, 0, 15, .08);
    --mpn-alerte-texte: #B3000C;
    /* Colonne mise en avant dans un tableau (la formule du milieu). */
    --mpn-colonne-avant: #F6FAFE;
    --mpn-colonne-avant-alt: #EFF6FD;
    /* Carte en verre depoli posee sur une photo. */
    --mpn-verre: rgba(255, 255, 255, .92);
    --mpn-verre-bord: rgba(255, 255, 255, .7);
    --mpn-verre-texte: #5C6B82;

    --mpn-etapes-gap: 18px;
}

/* ------------------------------------------------------- en-tête de section --- */

.mpn-titre-bloc { max-width: 780px; }
.mpn-titre-bloc h2 { margin: .35rem 0 0; }
.mpn-titre-bloc__chapo {
    margin: .9rem 0 0;
    font-size: 1.06rem;
    line-height: 1.55;
    color: var(--mpn-ink-soft);
    max-width: 46em;
    text-wrap: pretty;
}
.mpn-section--navy .mpn-titre-bloc__chapo { color: var(--mpn-bloc-ink-soft); }

/* ------------------------------------------------------------ fil d'Ariane --- */

.mpn-fil {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .84rem;
    margin-bottom: 1.4rem;
    color: var(--mpn-ink-mute);
}
.mpn-fil a { color: inherit; }
.mpn-fil a:hover { color: var(--mpn-ink); }
.mpn-fil [aria-current] { font-weight: 600; color: var(--mpn-ink); }
.mpn-hero--navy .mpn-fil { color: var(--mpn-bloc-ink-mute); justify-content: center; }
.mpn-hero--navy .mpn-fil a:hover,
.mpn-hero--navy .mpn-fil [aria-current] { color: var(--mpn-bloc-ink); }

/* ------------------------------------------------------------------- hero --- */

.mpn-hero { position: relative; overflow: hidden; padding: clamp(48px, 6vw, 78px) 0 clamp(44px, 5vw, 64px); }
.mpn-hero--navy { background: var(--mpn-bloc); color: var(--mpn-bloc-ink); }
.mpn-hero--navy h1 { color: var(--mpn-bloc-ink); }
.mpn-hero--centre { text-align: center; }
.mpn-hero--centre .mpn-hero__corps { max-width: 900px; margin: 0 auto; }

.mpn-hero h1 { letter-spacing: -.035em; font-weight: 800; text-wrap: balance; }
/* L'accent du titre. `--mpn-bleu-clair` est un bleu pale calibre pour du
   navy : sur un bloc clair il tombe a 1,9 contre 1. */
.mpn-hero__accent { color: var(--mpn-bloc-accent); }
/* Sauf dans un hero a photo, ou le fond est bien l'image. */
.mpn-hero--image .mpn-hero__accent { color: var(--mpn-bleu-clair); }
.mpn-hero__chapo {
    margin: 1.4rem auto 0;
    max-width: 34em;
    font-size: 1.14rem;
    line-height: 1.6;
    color: var(--mpn-bloc-ink-soft);
    text-wrap: pretty;
}
.mpn-hero__chapo strong { color: var(--mpn-bloc-ink); }
/* Hero a photo : le texte est sur l'image, il reste blanc. */
.mpn-hero--image .mpn-hero__chapo { color: rgba(255, 255, 255, .78); }
.mpn-hero--image .mpn-hero__chapo strong { color: #fff; }
.mpn-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }
.mpn-hero--centre .mpn-hero__actions { justify-content: center; }

/* Halo décoratif du fond. Purement d'agrément : il ne porte aucune information
   et ne doit jamais intercepter le pointeur. */
.mpn-hero__halo {
    position: absolute;
    right: -140px;
    top: -160px;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 91, 172, .28) 0%, rgba(0, 91, 172, .08) 45%, rgba(0, 91, 172, 0) 70%);
    /* `opacity()` se compose avec l'opacite animee des images cles : la
       variable regle l'intensite selon le theme sans toucher a l'animation. */
    filter: blur(10px) opacity(var(--mpn-halo-op, 1));
    animation: mpn-halo 15s ease-in-out infinite;
    pointer-events: none;
}
.mpn-hero__halo--bleu {
    background: radial-gradient(circle, rgba(0, 91, 172, .35) 0%, rgba(0, 91, 172, .1) 45%, rgba(0, 91, 172, 0) 70%);
}

@keyframes mpn-halo {
    0%, 100% { opacity: .5; transform: translate(0, 0) scale(1); }
    50% { opacity: .85; transform: translate(3%, -4%) scale(1.12); }
}

/* -------------------------------------------------- bandeau de trois chiffres --- */

.mpn-chiffres {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 760px;
    margin: clamp(32px, 4vw, 56px) auto 0;
    border-top: 1px solid var(--mpn-bloc-line);
    border-bottom: 1px solid var(--mpn-bloc-line);
}
.mpn-chiffres > div { padding: 22px 10px; text-align: center; border-right: 1px solid var(--mpn-bloc-line); }
.mpn-chiffres > div:last-child { border-right: 0; }
.mpn-chiffres__val { font-size: 1.6rem; font-weight: 800; line-height: 1.2; }
.mpn-chiffres__lib { margin-top: 4px; font-size: .82rem; color: var(--mpn-bloc-ink-mute); }

/* ------------------------------------------------------------------ badge --- */

/* Le badge « reserve aux adherents » : un etat, donc les couleurs d'etat
   deja definies, qui ont leur equivalent dans les deux themes. */
.mpn-badge--vert {
    background: var(--mpn-succes-fond);
    border: 1px solid var(--mpn-succes-texte);
    color: var(--mpn-succes-texte);
}
.mpn-badge--vert .mpn-badge__point { background: var(--mpn-succes-texte); }

/* --------------------------------------------------- bouton sur fond sombre --- */
/* Utilisé partout où un second bouton doit rester lisible sur du navy ou du
   bleu plein, sans voler la vedette au bouton principal. */
/* Version de base : sur une photo ou un aplat bleu, donc blanche. */
.mpn-btn--fantome {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
}
.mpn-btn--fantome:hover { background: rgba(255, 255, 255, .2); color: #fff; }

/* Dans un bloc de contraste, qui est CLAIR en theme clair, la version
   blanche disparaitrait. Les deux boutons y reprennent le vocabulaire du
   bloc : le principal devient un bouton bleu plein, le second un contour. */
.mpn-hero--navy .mpn-btn--fantome,
.mpn-bandeau:not(.mpn-bandeau--pleine) .mpn-btn--fantome {
    background: var(--mpn-bloc-voile);
    border-color: var(--mpn-bloc-line);
    color: var(--mpn-bloc-ink);
}
.mpn-hero--navy .mpn-btn--fantome:hover,
.mpn-bandeau:not(.mpn-bandeau--pleine) .mpn-btn--fantome:hover {
    background: var(--mpn-bloc-voile-fort);
    color: var(--mpn-bloc-ink);
}
.mpn-hero--navy .mpn-btn--clair,
.mpn-bandeau:not(.mpn-bandeau--pleine) .mpn-btn--clair {
    background: var(--mpn-bleu-plein);
    color: #fff;
}
.mpn-hero--navy .mpn-btn--clair:hover,
.mpn-bandeau:not(.mpn-bandeau--pleine) .mpn-btn--clair:hover {
    background: var(--mpn-bleu-hover);
    color: #fff;
}

/* ------------------------------------------------ deux colonnes texte/média --- */

.mpn-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: clamp(24px, 3.4vw, 48px);
    align-items: start;
}
.mpn-split--media-gauche { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
.mpn-split--centre { align-items: center; }
/* L'ordre du DOM suit toujours l'ordre de lecture : le texte d'abord. Quand le
   média doit apparaître à gauche à l'écran, c'est la grille qui le déplace —
   pas le balisage, sinon un lecteur d'écran annonce l'image avant le titre. */
.mpn-split--media-gauche > .mpn-media { grid-column: 1; grid-row: 1; }

/* ------------------------------------------------------------------ média --- */

.mpn-media {
    position: relative;
    margin: 0;
    border-radius: var(--mpn-radius);
    overflow: hidden;
    background: var(--mpn-navy);
    min-height: var(--mpn-media-h, 320px);
}
.mpn-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Repère affiché à la place de la photo tant que le fichier n'est pas fourni.
   Un cadre vide mais dimensionné vaut mieux qu'une image cassée : la page garde
   sa mise en page, et on voit d'un coup d'œil ce qui reste à livrer. */
.mpn-media__vide {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;
    font-size: .74rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .35);
}
.mpn-media.is-vide .mpn-media__vide { display: flex; }

/* ------------------------------------------------ liste numérotée en lignes --- */

.mpn-liste-num { display: grid; }
.mpn-liste-num__item {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 22px;
    padding: 22px 0;
    border-bottom: 1px solid var(--mpn-line-soft);
}
.mpn-liste-num__item:last-child { border-bottom: 0; }
.mpn-liste-num__num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1;
    color: var(--mpn-line-strong);
}
.mpn-liste-num__titre { font-size: 1.18rem; font-weight: 700; }
.mpn-liste-num__texte { margin: .4rem 0 0; font-size: .95rem; line-height: 1.55; color: var(--mpn-ink-soft); max-width: 42em; }

/* ------------------------------------------------------- parcours en étapes --- */

.mpn-etapes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--mpn-etapes-gap);
    margin: 2.6rem 0 0;
    /* Balisé en <ol> : quatre étapes dans un ordre imposé, ça se lit comme une
       liste ordonnée, y compris à la voix. Les puces natives sont retirées, les
       numéros étant déjà rendus par les pastilles. */
    list-style: none;
    padding: 0;
}
.mpn-etape { position: relative; text-align: center; }
.mpn-etape__num {
    position: relative;
    z-index: 1;
    width: 44px;
    height: 44px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--mpn-bleu-plein);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.06rem;
    font-weight: 800;
}
.mpn-etape--fin .mpn-etape__num { background: var(--mpn-rouge); }
.mpn-etape__titre { margin-top: 1.1rem; font-size: 1.06rem; font-weight: 700; }
.mpn-etape__texte { margin-top: .5rem; font-size: .88rem; line-height: 1.5; color: var(--mpn-ink-soft); }

/* Le trait de liaison est porté par CHAQUE étape, et non tendu d'un bord à
   l'autre de la grille. La maquette le posait en `calc(12,5 % + 22 px)`, une
   valeur qui ne vaut que pour quatre colonnes exactement : dès que la grille se
   réduit, le trait part dans le vide. Porté par l'étape, il suit la colonne
   quelle que soit sa largeur, et il suffit de le masquer quand la grille
   s'empile. */
.mpn-etape:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 21px;
    left: calc(50% + 30px);
    right: calc(30px - 50% - var(--mpn-etapes-gap));
    height: 2px;
    background: var(--mpn-line);
}

/* ------------------------------------------------------- cartes numérotées --- */

.mpn-cartes-num { display: flex; flex-direction: column; gap: 16px; }
.mpn-carte-num {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
    border-radius: 16px;
    background: var(--mpn-surface-soft);
    border: 1px solid var(--mpn-line);
}
.mpn-carte-num__num {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--mpn-navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 800;
}
.mpn-carte-num__titre { font-size: 1.03rem; font-weight: 700; }
.mpn-carte-num__texte { margin: .15rem 0 0; font-size: .85rem; line-height: 1.45; color: var(--mpn-ink-soft); }

/* -------------------------------------------------------- bandeau d'appel --- */

.mpn-bandeau {
    border-radius: 22px;
    padding: clamp(28px, 3.4vw, 44px);
    background: var(--mpn-bloc);
    color: var(--mpn-bloc-ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}
.mpn-bandeau h2 { color: var(--mpn-bloc-ink); margin: .35rem 0 0; max-width: 16em; }
.mpn-bandeau p { margin: .9rem 0 0; max-width: 36em; color: var(--mpn-bloc-ink-soft); line-height: 1.55; }
.mpn-bandeau .mpn-eyebrow { color: var(--mpn-bloc-accent); }
.mpn-bandeau__actions { display: flex; gap: 12px; flex-wrap: wrap; }
/* La variante PLEINE reste sur un aplat bleu : ses boutons restent blancs. */
.mpn-bandeau--pleine .mpn-btn--fantome {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
}
.mpn-bandeau--pleine .mpn-btn--fantome:hover { background: rgba(255, 255, 255, .2); color: #fff; }

/* Variante pleine largeur, sur fond bleu, sans coins arrondis. */
.mpn-bandeau--pleine {
    border-radius: 0;
    background: var(--mpn-bleu-plein);
    padding: clamp(48px, 5vw, 80px) 0;
    display: block;
}
.mpn-bandeau--pleine .mpn-bandeau__in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    flex-wrap: wrap;
}
.mpn-bandeau--pleine h2 { color: #fff; margin: 0; font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 800; }
.mpn-bandeau--pleine p { color: rgba(255, 255, 255, .86); }
.mpn-bandeau--pleine .mpn-eyebrow { color: rgba(255, 255, 255, .8); }

/* ------------------------------------------------------------- responsive --- */

@media (max-width: 900px) {
    .mpn-split,
    .mpn-split--media-gauche { grid-template-columns: 1fr; }
    /* Le média repasse SOUS le texte : sur une seule colonne, une photo en tête
       repousse le titre hors de l'écran. */
    .mpn-split--media-gauche > .mpn-media { grid-column: auto; grid-row: auto; }

    .mpn-etapes { grid-template-columns: 1fr; gap: 26px; }
    .mpn-etape:not(:last-child)::after { display: none; }

    .mpn-chiffres { grid-template-columns: 1fr; }
    .mpn-chiffres > div { border-right: 0; border-bottom: 1px solid var(--mpn-bloc-line); }
    .mpn-chiffres > div:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .mpn-hero__halo { animation: none; }
}

/* ------------------------------------------------------- note sous un bloc --- */
/* Porte l'hypothèse de calcul d'un tarif. Obligatoire dès qu'un montant est
   affiché : « à partir de 44,75 € » ne veut rien dire sans dire pour qui. */
.mpn-note {
    margin: 1.6rem 0 0;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--mpn-ink-mute);
    max-width: 58em;
}

/* ------------------------------------------------------- bascule de thème --- */
/* Port CSS pur (sans styled-components/React -- la vitrine est Twig + CSS
   classique) du switch jour/nuit envoye par Jordan : memes nuages, etoiles et
   lune a cratere qui glisse, mais piloté par [aria-pressed] au lieu d'un
   :checked, pour rester un <button> et ne RIEN changer au script
   (mpn-public.js pose deja aria-pressed + le libelle + localStorage + l'etat
   initial, cf. plus bas).

   --toggle-size regle toute la taille (chaque em du bloc est relatif a cette
   valeur, portee sur tous les descendants) : reduite ici pour tenir dans
   l'en-tete -- a la taille d'origine du modele envoye (30px), le switch
   ferait 169x75px, beaucoup trop grand pour une barre de navigation. */
.mpn-theme {
    --toggle-size: 14px;
    --container-width: 5.625em;
    --container-height: 2.5em;
    --container-radius: 6.25em;
    --container-light-bg: #3D7EAE;
    --container-night-bg: #1D1F2C;
    --circle-container-diameter: 3.375em;
    --sun-moon-diameter: 2.125em;
    --sun-bg: #ECCA2F;
    --moon-bg: #C4C9D1;
    --spot-color: #959DB1;
    --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
    --stars-color: #fff;
    --clouds-color: #F3FDFF;
    --back-clouds-color: #AACADF;
    --switch-transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25);

    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    flex: none;
}
.mpn-theme, .mpn-theme * { box-sizing: border-box; font-size: var(--toggle-size); }
.mpn-theme:hover .mpn-theme__container { filter: brightness(1.05); }

.mpn-theme__container {
    display: block;
    width: var(--container-width);
    height: var(--container-height);
    background-color: var(--container-light-bg);
    border-radius: var(--container-radius);
    overflow: hidden;
    box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, .25), 0em 0.062em 0.125em rgba(255, 255, 255, .94);
    transition: var(--switch-transition);
    position: relative;
}
.mpn-theme__container::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, .25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, .25) inset;
    border-radius: var(--container-radius);
}
.mpn-theme[aria-pressed="true"] .mpn-theme__container { background-color: var(--container-night-bg); }

.mpn-theme__circle {
    width: var(--circle-container-diameter);
    height: var(--circle-container-diameter);
    background-color: rgba(255, 255, 255, .1);
    position: absolute;
    left: var(--circle-container-offset);
    top: var(--circle-container-offset);
    border-radius: var(--container-radius);
    box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, .1), 0 0 0 .625em rgba(255, 255, 255, .1), 0 0 0 1.25em rgba(255, 255, 255, .1);
    display: flex;
    transition: .3s cubic-bezier(0, -0.02, 0.35, 1.17);
    pointer-events: none;
}
.mpn-theme[aria-pressed="true"] .mpn-theme__circle {
    left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter));
}

.mpn-theme__sun-moon {
    display: block;
    position: relative;
    z-index: 2;
    width: var(--sun-moon-diameter);
    height: var(--sun-moon-diameter);
    margin: auto;
    border-radius: var(--container-radius);
    background-color: var(--sun-bg);
    box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, .61) inset, 0em -0.062em 0.062em 0em #a1872a inset;
    filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, .25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, .25));
    overflow: hidden;
    transition: var(--switch-transition);
}

.mpn-theme__moon {
    display: block;
    position: relative;
    transform: translateX(100%);
    width: 100%;
    height: 100%;
    background-color: var(--moon-bg);
    border-radius: inherit;
    box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, .61) inset, 0em -0.062em 0.062em 0em #969696 inset;
    transition: var(--switch-transition);
}
.mpn-theme[aria-pressed="true"] .mpn-theme__moon { transform: translate(0); }

.mpn-theme__spot {
    position: absolute;
    top: 0.75em;
    left: 0.312em;
    width: 0.75em;
    height: 0.75em;
    border-radius: var(--container-radius);
    background-color: var(--spot-color);
    box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, .25) inset;
}
.mpn-theme__spot:nth-of-type(2) { width: 0.375em; height: 0.375em; top: 0.937em; left: 1.375em; }
.mpn-theme__spot:nth-of-type(3) { width: 0.25em; height: 0.25em; top: 0.312em; left: 0.812em; }

.mpn-theme__clouds {
    display: block;
    width: 1.25em;
    height: 1.25em;
    background-color: var(--clouds-color);
    border-radius: var(--container-radius);
    position: absolute;
    bottom: -0.625em;
    left: 0.312em;
    box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);
    transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25);
}
.mpn-theme[aria-pressed="true"] .mpn-theme__clouds { bottom: -4.062em; }

.mpn-theme__stars {
    display: block;
    position: absolute;
    color: var(--stars-color);
    top: -100%;
    left: 0.312em;
    width: 2.75em;
    height: auto;
    transition: var(--switch-transition);
}
.mpn-theme__stars svg { display: block; width: 100%; height: auto; }
.mpn-theme[aria-pressed="true"] .mpn-theme__stars {
    top: 50%;
    transform: translateY(-50%);
}

/* ---- boutons de l'en-tête, contour indigo + icone : distinct du style
   neutre que .mpn-btn--secondaire porte ailleurs sur les pages (voir usages
   dans prevoyance.html.twig etc, qui doivent rester neutres). ---- */
.mpn-header .mpn-btn--secondaire {
    color: var(--mpn-bleu-plein);
    border-color: var(--mpn-bleu-plein);
}
.mpn-header .mpn-btn--secondaire:hover {
    background: var(--mpn-pill-hover);
    color: var(--mpn-bleu-hover);
    border-color: var(--mpn-bleu-hover);
}
.mpn-header .mpn-btn svg { width: 16px; height: 16px; flex: none; }
.mpn-header .mpn-btn {
    min-height: 40px;
    padding: 0 16px;
    font-size: .85rem;
    gap: 6px;
}
/* Groupe Espace/telephone/devis : serres entre eux, separes du reste par le
   gap (24px) du conteneur -- .mpn-header__in ne les traite plus comme 3
   elements individuels au meme titre que le logo ou la nav. */
.mpn-header__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
}
@media (max-width: 1150px) {
    .mpn-header__texte {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }
    /* Ne vise QUE les deux boutons à icône, dont le libellé passe en
       `.mpn-header__texte` masqué. Le bouton primaire n'a pas d'icône : réduit
       à 40 px, il devenait un rond vide avec « Obtenir mon devis » qui
       débordait. Défaut du dépôt — voir CHARTE.md. */
    .mpn-header .mpn-btn:not(.mpn-btn--primaire) { padding: 0; width: 40px; justify-content: center; }
}

/* =============================================================================
   THÈME SOMBRE
   ------------
   Le prototype ne le portait que sur l'accueil, et l'état du projet le note
   comme « à propager » sur les neuf autres pages. Il n'y a rien à propager : le
   socle ne connaît que des variables, il suffit donc de les redéfinir une fois
   pour que TOUTES les pages basculent, y compris celles qui n'existent pas
   encore.

   Le thème est posé sur <html> par un script minuscule placé dans <head>, avant
   le premier affichage — sinon le visiteur voit la page en clair pendant une
   fraction de seconde avant qu'elle ne passe en sombre.
   ========================================================================== */

:root[data-theme='sombre'] {
    --mpn-page: #0A1220;
    --mpn-surface: #122132;
    --mpn-surface-soft: #0F1C2B;
    --mpn-surface-blue: #0F1C2B;
    --mpn-surface-alt: #0F1C2B;
    --mpn-pill-hover: rgba(255, 255, 255, .1);
    --mpn-tint: #16283C;
    --mpn-track: #16283C;

    --mpn-line: rgba(255, 255, 255, .13);
    --mpn-line-soft: rgba(255, 255, 255, .07);
    --mpn-line-strong: rgba(255, 255, 255, .2);
    --mpn-line-hover: rgba(255, 255, 255, .3);

    --mpn-ink: #EAF1FA;
    --mpn-ink-body: #C8D6E6;
    --mpn-ink-soft: #B4C4D8;
    --mpn-ink-nav: #B4C4D8;
    --mpn-ink-mute: #7F92A8;
    --mpn-ink-faint: #6B7C91;
    --mpn-ink-dim: #8CA0B6;

    /* Le bleu de marque n'a pas assez de contraste sur du sombre : on l'éclaircit
       pour les liens et les accents, sans toucher au bleu des fonds pleins. */
    --mpn-bleu: #6FB0EC;
    --mpn-bleu-hover: #9CCBF5;
    /* L'aplat, lui, reste profond : c'est ce qui porte le texte blanc. L'indigo
       de marque garde a lui seul assez de contraste (6,6 contre 1 sous du
       blanc) pour rester identique aux deux themes -- l'ancien bleu
       institutionnel avait besoin d'un aplat plus fonce en sombre, celui-ci non. */
    --mpn-bleu-plein: #004A8C;

    --mpn-header-bg: rgba(10, 18, 32, .88);
    --mpn-header-line: rgba(255, 255, 255, .1);

    /* Les memes etats, en sombre. Le vert et le rouge restent lisibles
       parce qu'ils sont eclaircis, pas parce que le fond est eclairci. */
    --mpn-succes-fond: rgba(23, 128, 74, .18);
    --mpn-succes-texte: #6ADFA0;
    --mpn-alerte-fond: rgba(225, 0, 15, .16);
    --mpn-alerte-texte: #FF8A93;
    --mpn-colonne-avant: rgba(143, 194, 240, .1);
    --mpn-colonne-avant-alt: rgba(143, 194, 240, .16);
    --mpn-verre: rgba(18, 33, 50, .88);
    --mpn-verre-bord: rgba(255, 255, 255, .16);
    --mpn-verre-texte: #B4C4D8;

    /* Le bloc de contraste en sombre : plus PROFOND que la page, la ou il
       est plus soutenu qu'elle en clair. Dans les deux cas il se detache. */
    --mpn-bloc: #071018;
    --mpn-bloc-ink: #EAF1FA;
    --mpn-bloc-ink-soft: rgba(234, 241, 250, .74);
    --mpn-bloc-ink-mute: rgba(234, 241, 250, .5);
    --mpn-bloc-accent: #8FC2F0;
    --mpn-bloc-line: rgba(255, 255, 255, .14);
    --mpn-bloc-voile: rgba(255, 255, 255, .07);
    --mpn-bloc-voile-fort: rgba(255, 255, 255, .14);
    --mpn-halo-op: 1;
}


/* Le passage d'un thème à l'autre se voit : on l'adoucit, sauf demande contraire. */
body { transition: background-color .35s, color .35s; }
@media (prefers-reduced-motion: reduce) {
    body { transition: none; }
}

/* ------------------------------------------------- réservé aux lecteurs --- */
/* Texte présent pour ce qui LIT la page — lecteurs d'écran, moteurs — et
   invisible à l'œil. Ce n'est pas `display:none`, qui le retirerait aussi de
   l'arbre d'accessibilité et le rendrait donc inutile. */
.mpn-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------- en-tête sur les petits écrans --- */
/* Quatre éléments se disputent la barre à 375 px : logo, menu, bascule de
   thème et bouton de devis. Le bouton de devis débordait de l'écran -- la
   bascule de thème, elle, est un petit switch de taille fixe, il ne bouge
   plus d'une résolution à l'autre. Reste à resserrer l'espacement général. */
@media (max-width: 900px) {
    .mpn-header__in { gap: 12px; }
}
@media (max-width: 560px) {
    .mpn-header__in { gap: 8px; }
    .mpn-header .mpn-btn { min-height: 40px; padding: 0 14px; font-size: .85rem; }
    .mpn-logo span { display: none; }
}

/* -------------------------------- En-tête : tenir sur un écran de 375px --- */
/*
   L'en-tête ne rentrait pas, et personne ne pouvait le voir.
   Mesuré à 375px, son contenu réclame 430px :
     24+24 de marges + logo 40 + burger 42 + « Espace adhérent » 40
     + « Obtenir mon devis » 147 + bascule de thème 79 + les écarts.
   Le navigateur tranchait tout seul en comprimant le seul élément qui acceptait
   de céder — le lien du logo, réduit à 0px de large. Rien ne débordait, donc
   rien ne signalait l'anomalie : le logo disparaissait simplement des petits
   écrans. Trouvé par l'audit « rapport largeur/hauteur » de Lighthouse, qui
   comparait 22x46 affichés à 120x138 réels.

   On rend donc sa largeur au logo (`flex-shrink: 0`), et on récupère les pixels
   manquants sur les espacements plutôt qu'en masquant quoi que ce soit :
     - marges latérales de l'en-tête   24 -> 10   (28px)
     - écart entre groupes              8 -> 4    ( 8px)
     - bascule de thème, via son jeton de taille  79 -> ~56  (23px)
   soit ~59px récupérés pour les 30 qui manquaient une fois le logo figé.

   La bascule de thème se redimensionne d'une seule valeur : tout le composant
   est exprimé en `em` de `--toggle-size`. La réduire garde ses proportions et
   son animation, là où lui imposer une largeur l'aurait déformée. Elle n'est
   pas descendue plus bas que 10px : à 9 elle mesurerait 22px de haut, sous les
   24px que demande WCAG 2.2 pour une cible tactile.

   Rien n'est masqué, volontairement : ni la bascule (le gabarit rappelle
   qu'elle doit rester atteignable sur TOUTES les pages, sans quoi un visiteur
   passé en thème sombre n'en sort plus), ni le bouton de devis, qui est
   l'action que les campagnes viennent chercher.

   Ces règles sont ici et non dans mpn-public.css : ce dernier est chargé AVANT
   celui-ci, et ses règles de même spécificité perdent contre celles du bloc
   560px ci-dessus. Vérifié en le mesurant. */
@media (max-width: 479px) {
    .mpn-logo { flex-shrink: 0; }
    .mpn-header__in { padding-left: 10px; padding-right: 10px; gap: 4px; }
    .mpn-theme { --toggle-size: 10px; }
}

/* =============================================================================
   Motifs apparus avec « La mutuelle », et destinés aux pages suivantes.
   ========================================================================== */

/* ------------------------------------------------------ hero pleine image --- */
/* Photo plein cadre, texte posé en bas sur un dégradé. C'est la signature de la
   page « La mutuelle » — l'état du projet demande explicitement de NE PAS
   réharmoniser les heros des trois pages institutionnelles sur un seul gabarit. */

.mpn-hero--image {
    min-height: 640px;
    display: flex;
    align-items: flex-end;
    background: var(--mpn-navy);
    color: #fff;
    padding: 0;
}
.mpn-hero--image > .mpn-media {
    position: absolute;
    inset: 0;
    border-radius: 0;
    min-height: 0;
}
.mpn-hero__ombre {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* Voile allege : .92 en bas ecrasait la video, on ne voyait plus la scene.
       .62 garde le contraste necessaire au texte blanc pose dessus sans
       eteindre l image. Le haut passe de .1 a .05 : rien n y est ecrit. */
    background: linear-gradient(to top, rgba(4, 18, 38, .62) 0%, rgba(4, 18, 38, .20) 55%, rgba(4, 18, 38, .05) 100%);
}
.mpn-hero--image .mpn-hero__corps {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: clamp(48px, 6vw, 64px);
    padding-bottom: clamp(40px, 5vw, 56px);
}
.mpn-hero--image h1 { max-width: 16em; }
.mpn-hero--image .mpn-hero__chapo { margin-left: 0; max-width: 30em; }

/* Trait de surlignage sous un morceau de titre. */
.mpn-souligne {
    display: inline-block;
    position: relative;
    /* `--mpn-bleu-clair` est prevu POUR UN FOND NAVY : sur la page claire il
       tombe a 1,8 contre 1, et ce sont les mots-cles du H1. Le bleu de marque
       tient 6,3 contre 1 et garde l'accent. */
    color: var(--mpn-bleu);
    /* Le trait doit s'arreter avec le texte. Dans les titres de page segment,
       `.seg-hero__texte h1 span { display: block }` l'emporte sur le
       `inline-block` ci-dessus — deux elements et une classe contre une classe
       seule — et le trait prenait alors toute la largeur de la ligne.
       `fit-content` retablit la largeur du contenu sans toucher au retour a la
       ligne, qui lui est voulu. */
    width: fit-content;
    /* Le trait ci-dessous est un pseudo-element POSITIONNE : sans contexte
       d'empilement propre il se peint APRES le contenu en ligne du parent,
       donc PAR-DESSUS les lettres, qu'il barrait. `isolation` cree ce contexte
       pour que le `z-index: -1` du trait le renvoie derriere le texte — et non
       derriere le fond de la page, ou il deviendrait invisible. */
    isolation: isolate;
}
/* Sauf dans un hero a photo : le fond y est l image assombrie, pas la page
   claire. Le bleu de marque, qui tient 6,3:1 sur clair, y devient illisible.
   Meme correctif que .mpn-hero--image .mpn-hero__accent (l.87). */
.mpn-hero--image .mpn-souligne { color: var(--mpn-bleu-clair); }

.mpn-souligne::after {
    content: '';
    position: absolute;
    z-index: -1;
    left: 0;
    right: 4px;
    bottom: 4px;
    height: 7px;
    border-radius: 99px;
    background: linear-gradient(90deg, rgba(143, 194, 240, .4), rgba(225, 0, 15, .4));
    transform: scaleX(0);
    transform-origin: 0 50%;
    animation: mpn-souligne .9s cubic-bezier(.2, .8, .2, 1) .9s both;
}
@keyframes mpn-souligne { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Petits gages de confiance sous le hero. */
.mpn-gages { display: flex; flex-wrap: wrap; gap: 22px; margin: 2.2rem 0 0; padding: 0; list-style: none; }
.mpn-gages li { display: flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 600; color: rgba(255, 255, 255, .86); }
.mpn-gages li::before { content: '✓'; color: var(--mpn-bleu-clair); font-weight: 800; }

/* ----------------------------------------------------- carte à filet haut --- */

.mpn-carte--filet { background: var(--mpn-surface-soft); transition: transform .3s, box-shadow .3s, border-color .3s; }
.mpn-carte--filet:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 50px -28px rgba(4, 18, 38, .4);
    border-color: var(--mpn-bleu);
}
.mpn-carte__filet { width: 36px; height: 4px; border-radius: 99px; background: var(--mpn-bleu-plein); }
.mpn-carte__titre { margin: .85rem 0 0; font-size: 1.06rem; font-weight: 700; }
.mpn-carte__texte { margin: .5rem 0 0; font-size: .9rem; line-height: 1.5; color: var(--mpn-ink-soft); }

/* -------------------------------------------------------- bande de chiffres --- */
/* Quatre valeurs séparées par un filet d'un pixel. Le filet est obtenu par
   l'écart de la grille sur un fond coloré : une bordure par cellule laisserait
   un double trait au milieu. */

.mpn-bande {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin-top: 18px;
    background: var(--mpn-line);
    border-radius: 16px;
    overflow: hidden;
}
.mpn-bande > div { background: var(--mpn-surface); padding: 22px 20px; text-align: center; }
.mpn-bande__val { font-size: 1.85rem; font-weight: 800; letter-spacing: -.03em; color: var(--mpn-bleu); line-height: 1.1; }
.mpn-bande__lib { margin-top: 4px; font-size: .8rem; color: var(--mpn-ink-mute); }

/* ------------------------------------------------------------------ frise --- */

.mpn-frise { position: relative; margin: 2.6rem 0 0; padding: 0 0 0 28px; list-style: none; }
.mpn-frise::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--mpn-line);
}
.mpn-frise li { position: relative; padding-bottom: 30px; }
.mpn-frise li:last-child { padding-bottom: 0; }
.mpn-frise li::before {
    content: '';
    position: absolute;
    left: -28px;
    top: 8px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--mpn-bleu-plein);
    /* Le halo isole la pastille du trait : sans lui, le trait la traverse. */
    box-shadow: 0 0 0 4px var(--mpn-page);
}
.mpn-frise li.est-dernier::before { background: var(--mpn-rouge); }
.mpn-frise__an {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .82rem;
    font-weight: 700;
    color: var(--mpn-bleu);
}
.mpn-frise li.est-dernier .mpn-frise__an { color: var(--mpn-rouge); }
.mpn-frise__titre { margin: .25rem 0 0; font-size: 1.12rem; font-weight: 700; }
.mpn-frise__texte { margin: .25rem 0 0; max-width: 44em; font-size: .95rem; line-height: 1.55; color: var(--mpn-ink-soft); }

/* --------------------------------------------------------------- citation --- */

.mpn-citation { position: relative; margin: 3rem 0 0; border-radius: var(--mpn-radius-lg); overflow: hidden; }
.mpn-citation .mpn-media { border-radius: 0; }
.mpn-citation__voile {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(4, 18, 38, .72) 0%, rgba(4, 18, 38, 0) 60%);
}
.mpn-citation blockquote {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 24px;
    margin: 0;
    color: #fff;
    font-size: 1.15rem;
    font-style: italic;
    font-weight: 600;
    text-wrap: balance;
}

/* ------------------------------------------------------------- comparatif --- */

.mpn-comparatif { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 2.2rem; align-items: stretch; }
.mpn-colonne { border: 1px solid var(--mpn-line); border-radius: var(--mpn-radius-lg); padding: 30px 28px; background: var(--mpn-surface-soft); }
.mpn-colonne--nous { border-color: var(--mpn-bleu); background: var(--mpn-surface-blue); }
.mpn-colonne__titre { margin: .5rem 0 0; font-size: 1.3rem; font-weight: 700; }
.mpn-colonne--eux .mpn-colonne__titre { color: var(--mpn-ink-nav); }
.mpn-colonne ul { display: grid; gap: 11px; margin: 1.3rem 0 0; padding: 0; list-style: none; }
.mpn-colonne li { display: flex; align-items: flex-start; gap: 9px; font-size: .95rem; line-height: 1.45; color: var(--mpn-ink-body); }
.mpn-colonne li::before { flex: 0 0 auto; margin-top: 1px; font-weight: 800; }
.mpn-colonne--nous li::before { content: '✓'; color: var(--mpn-bleu); }
.mpn-colonne--eux li { color: var(--mpn-ink-dim); }
.mpn-colonne--eux li::before { content: '–'; color: var(--mpn-ink-faint); }

/* ---------------------------------------------------------------- valeurs --- */

.mpn-valeurs { margin: 2.8rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mpn-valeurs li { padding: 0 26px; border-right: 1px solid var(--mpn-bloc-line); }
.mpn-valeurs li:first-child { padding-left: 0; }
.mpn-valeurs li:last-child { padding-right: 0; border-right: 0; }
.mpn-valeurs__num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 2.1rem; font-weight: 700; color: var(--mpn-bloc-line); line-height: 1; }
.mpn-valeurs__titre { margin: .85rem 0 0; font-size: 1.25rem; font-weight: 700; }
.mpn-valeurs__texte { margin: .5rem 0 0; font-size: .9rem; line-height: 1.55; color: var(--mpn-bloc-ink-soft); }

/* --------------------------------------------------------------- personnes --- */

.mpn-personnes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 2.2rem 0 0; padding: 0; list-style: none; }
.mpn-personne {
    text-align: center;
    padding: 26px 14px;
    border: 1px solid var(--mpn-line);
    border-radius: var(--mpn-radius);
    background: var(--mpn-surface-soft);
    transition: transform .3s, box-shadow .3s;
}
.mpn-personne:hover { transform: translateY(-6px); box-shadow: 0 26px 46px -28px rgba(4, 18, 38, .4); }
.mpn-personne__initiales {
    width: 64px;
    height: 64px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--mpn-bleu-plein);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: .02em;
}
.mpn-personne__initiales--navy { background: var(--mpn-navy); }
.mpn-personne__initiales--pale { background: var(--mpn-prelude); }
.mpn-personne__nom { margin: .85rem 0 0; font-size: .97rem; font-weight: 700; }
.mpn-personne__role { margin: .2rem 0 0; font-size: .8rem; color: var(--mpn-ink-mute); }

@media (max-width: 900px) {
    .mpn-bande { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mpn-comparatif { grid-template-columns: 1fr; }
    .mpn-valeurs { grid-template-columns: 1fr; gap: 26px; }
    .mpn-valeurs li { padding: 0 0 26px; border-right: 0; border-bottom: 1px solid var(--mpn-bloc-line); }
    .mpn-valeurs li:last-child { padding-bottom: 0; border-bottom: 0; }
    .mpn-personnes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mpn-hero--image { min-height: 520px; }
}

@media (prefers-reduced-motion: reduce) {
    .mpn-souligne::after { animation: none; transform: scaleX(1); }
    .mpn-carte--filet:hover,
    .mpn-personne:hover { transform: none; }
}

/* Badge posé sur une photo sombre : verre dépoli, texte blanc. */
.mpn-badge--clair {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}