/* =============================================================================
   Socle visuel des pages publiques MPN.

   Les maquettes n'utilisaient AUCUNE variable CSS : chaque couleur y était
   réécrite à la main, à chaque occurrence, dans neuf fichiers. C'est ce qui
   rendait toute retouche de charte impossible sans repasser partout — et ce qui
   a laissé passer des variantes involontaires (deux bleus clairs presque
   identiques, trois gris de texte différents pour le même usage).

   Tout est donc ramené ici, en variables. Changer la charte se fait dans ce
   bloc, et nulle part ailleurs.
   ========================================================================== */

:root {
    /* ---- couleurs de marque ---- */
    /* Charte MPN. Le bleu est celui de la marque depuis toujours : il est
       publie dans config/formules.yaml comme couleur de PRIMUM, il est celui
       de l'espace adherent et du parcours de devis. Un prospect qui passe du
       site au devis puis a son espace doit voir LA MEME couleur. */
    --mpn-navy: #0B1B33;
    --mpn-bleu: #005BAC;
    /* Le bleu qui REMPLIT, sous du texte blanc. Distinct du precedent :
       en theme sombre, --mpn-bleu s'eclaircit pour que les liens restent
       lisibles, et un aplat de cette teinte sous du blanc tombe a 2,3
       contre 1. Celui-ci reste profond dans les deux themes. */
    --mpn-bleu-plein: #005BAC;
    --mpn-bleu-hover: #003E75;
    --mpn-rouge: #E1000F;            /* accents seulement : badges, rubans */
    --mpn-bleu-clair: #8FC2F0;       /* sur fond navy */
    --mpn-bleu-clair-alt: #7FA8D4;

    /* ---- teal secondaire et touche ambre : accents ponctuels, jamais des fonds ---- */
    /* Repris du code couleur de l'espace adherent : vert = arrive sur le
       compte, ambre = en cours. Jamais un fond, jamais un titre. */
    --mpn-teal: #0FA06E;
    --mpn-ambre: #C77700;

    /* ---- échelle des formules (du plus clair au navy) ---- */
    --mpn-prelude: #6B8CAE;
    --mpn-primum: #005BAC;
    --mpn-solidum: #0B1B33;

    /* ---- surfaces ---- */
    --mpn-page: #F5F8FC;
    --mpn-surface: #ffffff;
    --mpn-surface-soft: #F8FAFD;
    --mpn-surface-blue: #F6FAFE;
    --mpn-surface-alt: #FCFDFE;      /* zébrure des tableaux */
    --mpn-pill-hover: #E8F0F9;
    --mpn-tint: #EEF4FB;
    --mpn-track: #E7EEF6;

    /* ---- filets ---- */
    --mpn-line: #E2EAF3;
    --mpn-line-soft: #E9EFF6;
    --mpn-line-strong: #CFDCEC;
    --mpn-line-hover: #B9CCE2;

    /* ---- textes, du plus soutenu au plus effacé ---- */
    --mpn-ink: #0B1B33;
    --mpn-ink-body: #3E4C63;
    --mpn-ink-soft: #4A5870;
    --mpn-ink-nav: #55637A;
    /* Assombris le 2026-07-27 pour le contraste (WCAG AA, 4.5:1).
       Mesure sur #F5F8FC, le fond le plus clair du site, donc le cas le plus
       defavorable — et non sur du blanc, ou ils auraient paru passer de justesse.
         --mpn-ink-mute : #8494AC donnait 2.89:1  ->  #61738F donne 4.52:1
         --mpn-ink-dim  : #7A879C donnait 3.41:1  ->  #667389 donne 4.50:1
       Teinte et saturation conservees, seule la luminosite baisse : la palette
       ne change pas de famille, elle cesse juste d'etre illisible en petit corps.
       Le theme sombre, lui, etait deja conforme (5.10:1 et 6.06:1) : il n'a pas
       ete touche. */
    --mpn-ink-mute: #61738F;
    /* Sert uniquement au tiret decoratif des puces (.mpn-colonne--eux li::before) :
       ce n'est pas du texte informatif, le seuil AA ne s'y applique pas. */
    --mpn-ink-faint: #A9B6C7;
    --mpn-ink-dim: #667389;

    /* ---- en-tête collant ---- */
    --mpn-header-bg: rgba(245, 248, 252, .88);
    --mpn-header-line: rgba(11, 27, 51, .07);
    --mpn-header-h: 82px;

    /* ---- bloc de contraste ---- */
    /* Le NEGATIF de la page : hero pleine largeur, sections « nos valeurs » et
       « entraide », bandeau d'appel, bandeau defilant, en-tetes de tableau,
       cartes vedettes, pied de page.

       Ces blocs etaient peints en `--mpn-navy`, qui est une couleur de MARQUE :
       elle ne bouge pas d'un theme a l'autre, et ils restaient donc sombres en
       theme clair. Nommes par ce qu'ils SONT, ils suivent maintenant le theme
       comme le reste de la page.

       A ne pas confondre avec le blanc pose SUR UNE PHOTO ou SUR UN APLAT : ce
       blanc-la est du a l'image ou a l'aplat, pas au theme, et il reste blanc
       dans les deux. */
    --mpn-bloc: #E4EDF8;
    --mpn-bloc-ink: #0B1B33;
    --mpn-bloc-ink-soft: #46566E;
    /* 5,0 contre 1 sur le fond du bloc. Le ton d'origine tombait a 4,1,
       et il sert a des textes de 11 a 13 px : fil d'Ariane, libelles de
       chiffres, tarifs sous les en-tetes de tableau. */
    --mpn-bloc-ink-mute: #54657E;
    --mpn-bloc-accent: #005BAC;
    --mpn-bloc-line: rgba(11, 27, 51, .12);
    --mpn-bloc-voile: rgba(11, 27, 51, .05);
    --mpn-bloc-voile-fort: rgba(11, 27, 51, .1);
    /* Les halos decoratifs des heros ont ete regles pour du navy : sur un fond
       clair, la meme intensite donne une tache rose — d'ou l'attenuation, et
       la variante `--bleu` a poser sur les heros clairs. */
    --mpn-halo-op: .45;

    /* ---- formes ---- */
    --mpn-radius: 20px;
    --mpn-radius-lg: 24px;
    --mpn-ombre: 0 20px 44px -26px rgba(0, 91, 172, .34);
}

/* ------------------------------------------------------------------ base --- */

* { box-sizing: border-box; }

/* Anneau de focus au clavier.
   Le site ne masquait le focus nulle part (aucun `outline: none`), donc la
   navigation au clavier fonctionnait deja — mais elle s'appuyait sur l'anneau
   par defaut du navigateur, fin et sombre, qui se perd sur les aplats bleus et
   sur le pied de page fonce. Celui-ci est epais et decolle du bord, donc lisible
   quel que soit le fond.
   `:focus-visible` et non `:focus` : le navigateur ne le declenche qu'a la
   navigation clavier, jamais au clic souris — poser cet anneau sur `:focus`
   l'afficherait a chaque clic sur un bouton. */
:focus-visible {
    outline: 3px solid var(--mpn-bleu);
    outline-offset: 2px;
    border-radius: 3px;
}

body {
    margin: 0;
    background: var(--mpn-page);
    color: var(--mpn-ink);
    font-family: Archivo, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--mpn-bleu); text-decoration: none; }
a:hover { color: var(--mpn-bleu-hover); }

img, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { margin: 0 0 .6em; line-height: 1.12; letter-spacing: -.025em; font-weight: 700; }
h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }

/* Lien d'évitement : premier élément focusable, invisible tant qu'il n'a pas
   le focus. Sans lui, un visiteur au clavier retraverse toute la navigation
   à chaque page. */
.mpn-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--mpn-navy);
    color: #fff;
    padding: 12px 18px;
    border-radius: 0 0 12px 0;
    z-index: 100;
}
.mpn-skip:focus { left: 0; color: #fff; }

/* ---------------------------------------------------------------- layout --- */

.mpn-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.mpn-container--etroit { max-width: 900px; }

.mpn-section { padding: clamp(48px, 7vw, 96px) 0; }
.mpn-section--surface { background: var(--mpn-surface); }
.mpn-section--navy { background: var(--mpn-bloc); color: var(--mpn-bloc-ink); }
.mpn-section--navy h1,
.mpn-section--navy h2,
.mpn-section--navy h3 { color: var(--mpn-bloc-ink); }

/* Eyebrow : petite étiquette en capitales espacées au-dessus des titres. */
.mpn-eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mpn-ink-mute);
    margin-bottom: .6rem;
    display: block;
}
.mpn-section--navy .mpn-eyebrow { color: var(--mpn-bleu-clair); }

/* ---------------------------------------------------- barre de progression --- */
/* Frère immédiat de l'en-tête dans les maquettes : les deux vont ensemble. */

.mpn-progress {
    position: fixed;
    inset: 0 auto auto 0;
    height: 3px;
    width: 100%;
    z-index: 60;
    background: transparent;
    pointer-events: none;
}
.mpn-progress__fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--mpn-bleu), var(--mpn-rouge));
    transform-origin: 0 50%;
}

/* -------------------------------------------------------------- en-tête --- */

.mpn-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--mpn-header-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--mpn-header-line);
}
.mpn-header__in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: var(--mpn-header-h);
    /* Le header a sa propre largeur max, plus genereuse que .mpn-container
       (1200px, partagee par tout le site) : sur les grands ecrans,
       justify-content:space-between a alors vraiment de la place a
       distribuer entre les groupes. Demande Jordan (2026-07-27) : header
       "qui prend plus de place". Le "gap" ci-dessus n'est qu'un plancher
       pour les ecrans etroits, il ne joue quasi aucun role au-dela. */
    max-width: 1440px;
}
.mpn-logo { display: flex; align-items: center; gap: 12px; font-weight: 800; color: var(--mpn-ink); letter-spacing: .02em; }
.mpn-logo img { height: 46px; width: auto; }
.mpn-logo span { font-size: 1.5rem; }

.mpn-nav { display: flex; align-items: center; gap: 4px; }
.mpn-nav a {
    padding: 8px 14px;
    border-radius: 99px;
    color: var(--mpn-ink-nav);
    font-size: .95rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background .2s, color .2s;
}
.mpn-nav a:hover { background: var(--mpn-pill-hover); color: var(--mpn-ink); }
.mpn-nav a[aria-current='page'] { background: var(--mpn-pill-hover); color: var(--mpn-ink); font-weight: 700; }

/* ---- sous-menu "Nos offres" : les 5 pages situation, injoignables
   ailleurs que par le carrousel de l'accueil ---- */
.mpn-nav__dropdown { position: relative; }
.mpn-nav__lien {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    border-radius: 99px;
    background: none;
    border: none;
    font-family: inherit;
    color: var(--mpn-ink-nav);
    font-size: .95rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.mpn-nav__lien:hover,
.mpn-nav__dropdown:focus-within .mpn-nav__lien { background: var(--mpn-pill-hover); color: var(--mpn-ink); }
.mpn-nav__lien--actif { background: var(--mpn-pill-hover); color: var(--mpn-ink); font-weight: 700; }
.mpn-nav__caret { width: 14px; height: 14px; flex: none; transition: transform .2s; }
.mpn-nav__dropdown:hover .mpn-nav__caret,
.mpn-nav__dropdown:focus-within .mpn-nav__caret { transform: rotate(180deg); }
.mpn-nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    padding: 8px;
    min-width: 220px;
    background: var(--mpn-surface);
    border: 1px solid var(--mpn-line);
    border-radius: 16px;
    box-shadow: 0 20px 44px -26px rgba(11, 27, 51, .4);
    display: grid;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s, transform .18s, visibility .18s;
    z-index: 40;
}
.mpn-nav__menu a {
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--mpn-ink-nav);
    font-size: .92rem;
    font-weight: 500;
    white-space: nowrap;
}
.mpn-nav__menu a:hover,
.mpn-nav__menu a[aria-current='page'] { background: var(--mpn-pill-hover); color: var(--mpn-ink); }
.mpn-nav__dropdown:hover .mpn-nav__menu,
.mpn-nav__dropdown:focus-within .mpn-nav__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .mpn-nav__caret,
    .mpn-nav__menu { transition: none; }
}

/* Bouton d'ouverture du menu sur petit écran. Aucune maquette n'en proposait :
   sans lui, la navigation disparaît purement et simplement sous 900 px. */
.mpn-burger {
    display: none;
    appearance: none;
    border: 1px solid var(--mpn-line-strong);
    background: var(--mpn-surface);
    border-radius: 12px;
    padding: 9px 11px;
    cursor: pointer;
}
.mpn-burger span { display: block; width: 18px; height: 2px; background: var(--mpn-ink); margin: 3px 0; border-radius: 2px; }

/* -------------------------------------------------------------- boutons --- */

.mpn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 24px;
    border-radius: 99px;
    font-weight: 700;
    font-size: .98rem;
    white-space: nowrap;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s, background .2s;
}
.mpn-btn:hover { transform: translateY(-2px); }
.mpn-btn--primaire { background: var(--mpn-bleu-plein); color: #fff; }
.mpn-btn--primaire:hover { background: var(--mpn-bleu-hover); color: #fff; box-shadow: 0 14px 28px -16px rgba(0, 91, 172, .8); }
.mpn-btn--secondaire { background: var(--mpn-surface); color: var(--mpn-ink); border-color: var(--mpn-line-strong); }
.mpn-btn--secondaire:hover { background: var(--mpn-pill-hover); color: var(--mpn-ink); }
/* Bouton pose sur un aplat de couleur : le bandeau bleu pleine largeur et
   les heros a photo. Il y reste blanc. Dans les blocs de contraste, qui
   sont clairs en theme clair, un bouton blanc disparaitrait : il y devient
   le bouton principal (voir composants.css). */
.mpn-btn--clair { background: #fff; color: var(--mpn-navy); }
.mpn-btn--clair:hover { color: var(--mpn-navy); }

/* --------------------------------------------------------------- cartes --- */

.mpn-carte {
    background: var(--mpn-surface);
    border: 1px solid var(--mpn-line);
    border-radius: var(--mpn-radius);
    padding: 24px;
}
.mpn-carte--douce { background: var(--mpn-surface-soft); }
.mpn-grille { display: grid; gap: 20px; }
.mpn-grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mpn-grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mpn-grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --------------------------------------------------------------- badges --- */

.mpn-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 13px;
    border-radius: 99px;
    background: var(--mpn-pill-hover);
    color: var(--mpn-bleu);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.mpn-badge__point {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--mpn-rouge);
    animation: mpn-pouls 2.6s ease-in-out infinite;
}

/* ------------------------------------------------------------- tableaux --- */

.mpn-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.mpn-table th,
.mpn-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--mpn-line-soft); }
.mpn-table thead th { color: var(--mpn-ink-nav); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.mpn-table tbody tr:nth-child(odd) { background: var(--mpn-surface-alt); }

/* Un tableau ne doit jamais élargir la page : il défile dans son propre cadre. */
.mpn-table-wrap { overflow-x: auto; border: 1px solid var(--mpn-line); border-radius: var(--mpn-radius); }

/* Tableaux sans classe : ceux de la page Confidentialité (bases légales,
   cookies), écrits en HTML nu parce qu'ils relèvent du texte réglementaire et
   non d'un composant.

   Leurs trois colonnes de texte réclament 360px au minimum. Sur un écran de
   375px il ne reste que 327px une fois le padding du conteneur retiré : le
   tableau dépasse, et c'est TOUTE la page qui se met à glisser latéralement de
   9px — le symptôme classique, où un seul élément trop large décale tout le
   reste. Mesuré cinq fois de suite avant correction, systématique.

   On rend donc ce tableau défilable pour lui seul. La règle est enfermée dans
   un `@media max-width` et ne cible que `:not([class])` : les quatre autres
   tableaux du site (nos-offres, prévoyance, sénior) portent tous une classe et
   ne sont pas touchés — pas plus que l'affichage bureau, qui reste tel quel.

   560px et non 408px (la largeur exacte où le débordement commence) : c'est le
   seuil déjà employé ailleurs dans la feuille, et entre les deux la règle ne
   change rien puisque le tableau rentre. */
@media (max-width: 560px) {
    main table:not([class]) { display: block; width: 100%; overflow-x: auto; }
}

/* Logo écrasé sur les petits écrans.
   L'en-tête est une boîte flexible. En dessous de ~420px son contenu ne rentre
   plus, et le navigateur comprime ce qui accepte de l'être : ici le lien
   `.mpn-logo`, mesuré à 0px de large sur un écran de 375px. L'image à
   l'intérieur suit — elle ne peut pas être plus large que son parent — et le
   logo disparaissait purement et simplement, sans rien faire déborder, donc
   sans que rien ne le signale.

   Trouvé par l'audit « rapport largeur/hauteur » de Lighthouse, qui comparait
   22x46 affichés à 120x138 réels. Le premier essai posait `flex-shrink: 0` sur
   l'image : sans effet, puisque ce n'était pas elle qui cédait. C'est le LIEN
   qu'il faut figer ; le texte « MPN » à côté prend alors le rétrécissement,
   ce qu'il sait faire proprement.

   Vérifié ensuite à 375px : logo 40x46, et aucun débordement de page. */
/* La correction de l'en-tête sous 480px vit dans composants.css, et non ici :
   ce fichier est chargé AVANT composants.css, qui redéfinit `gap` et le
   remplissage des boutons dans ses propres media queries. Une règle posée ici
   serait écrasée à spécificité égale — c'est arrivé, et la mesure l'a montré :
   le padding passait bien à 14px, le `gap` restait à 8. Voir « En-tête : tenir
   sur un écran de 375px » dans composants.css. */

/* ------------------------------------------------------------ pied de page --- */

/* ============================================================
   Pied de page
   Composition dissymétrique : bloc d'identité large à gauche,
   rail de navigation serré et aligné à droite.
   Couleurs : uniquement les variables du bloc de contraste,
   elles suivent déjà le thème clair / sombre.
   ============================================================ */

.mpn-footer {
    background: var(--mpn-bloc);
    color: var(--mpn-bloc-ink-mute);
    border-top: 1px solid var(--mpn-bloc-line);
    padding: 64px 0 32px;
    font-size: .9rem;
}

.mpn-footer a { color: var(--mpn-bloc-ink-soft); }
.mpn-footer a:hover { color: var(--mpn-bloc-ink); }

.mpn-footer a:focus-visible {
    outline: 2px solid var(--mpn-bloc-ink);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Rangée haute : toute la largeur restante va au bloc d'identité,
   la navigation ne prend que la largeur de ses libellés. */
.mpn-footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: clamp(32px, 4vw, 72px);
    align-items: start;
    margin-bottom: 40px;
}

/* ---------- Identité ---------- */

.mpn-footer__brand { max-width: 34rem; }

.mpn-footer__ident {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
}

.mpn-footer__logo {
    height: 40px;
    width: auto;
    display: block;
}

.mpn-footer__name {
    color: var(--mpn-bloc-ink);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: .02em;
}

/* Ligne d'affiche : c'est elle qui tient la largeur du bloc. */
.mpn-footer__baseline {
    margin: 0;
    color: var(--mpn-bloc-ink);
    font-weight: 600;
    line-height: 1.25;
    font-size: clamp(1.35rem, 2.2vw, 2rem);
}

.mpn-footer__origin {
    margin: 12px 0 0;
    max-width: 46ch;
}

/* ---------- Actions ---------- */

.mpn-footer__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.mpn-footer a.mpn-footer__cta,
.mpn-footer a.mpn-footer__ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 22px;
    border-radius: 999px;
    font-weight: 600;
    font-size: .9rem;
    line-height: 1;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

/* Le pavé plein reprend le couple encre / fond du bloc, inversé :
   le contraste est donc le même que celui du texte courant. */
.mpn-footer a.mpn-footer__cta {
    border: 1px solid var(--mpn-bloc-ink);
    background: var(--mpn-bloc-ink);
    color: var(--mpn-bloc);
}

.mpn-footer a.mpn-footer__cta:hover {
    background: transparent;
    color: var(--mpn-bloc-ink);
}

.mpn-footer a.mpn-footer__ghost {
    border: 1px solid var(--mpn-bloc-line);
    color: var(--mpn-bloc-ink-soft);
}

.mpn-footer a.mpn-footer__ghost:hover {
    border-color: var(--mpn-bloc-ink);
    color: var(--mpn-bloc-ink);
}

/* ---------- Coordonnées ---------- */

.mpn-footer__contact {
    margin: 22px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    color: var(--mpn-bloc-ink-mute);
}

.mpn-footer__sep { color: var(--mpn-bloc-ink-mute); }

/* ---------- Navigation ---------- */

.mpn-footer__nav {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    column-gap: clamp(28px, 3vw, 56px);
    padding-left: clamp(24px, 3vw, 48px);
    border-left: 1px solid var(--mpn-bloc-line);
}

.mpn-footer__title {
    margin: 0 0 14px;
    color: var(--mpn-bloc-ink);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mpn-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.mpn-footer__nav li { line-height: 1.3; }
.mpn-footer__nav a { display: inline-block; }

/* ---------- Coordonnees ----------
   Troisieme bloc du haut. Meme filet que le rail, pour que les trois blocs se
   lisent comme trois colonnes et non comme deux plus un appendice. */

.mpn-footer__joindre {
    padding-left: clamp(24px, 3vw, 48px);
    border-left: 1px solid var(--mpn-bloc-line);
    min-width: 13rem;
}

.mpn-footer__adresse {
    font-style: normal;
    line-height: 1.5;
    margin: 0 0 10px;
}

.mpn-footer__ligne { margin: 0 0 8px; }
.mpn-footer__ligne:last-child { margin-bottom: 0; }

/* ---------- Bandeau reglementaire ---------- */

.mpn-footer__legal {
    border-top: 1px solid var(--mpn-bloc-line);
    padding-top: 20px;
    font-size: .82rem;
    line-height: 1.6;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 32px;
}

.mpn-footer__legal p { margin: 0; }
.mpn-footer__legal-text { max-width: 78ch; }

.mpn-footer__legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
}

/* ---------- Une colonne ---------- */

@media (max-width: 999px) {
    .mpn-footer { padding-top: 48px; }

    .mpn-footer__top {
        grid-template-columns: 1fr;
        row-gap: 36px;
    }

    .mpn-footer__brand { max-width: none; }

    .mpn-footer__nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
        column-gap: 24px;
        border-left: 0;
        padding-left: 0;
        border-top: 1px solid var(--mpn-bloc-line);
        padding-top: 28px;
    }

    .mpn-footer__joindre {
        border-left: 0;
        padding-left: 0;
        border-top: 1px solid var(--mpn-bloc-line);
        padding-top: 28px;
    }

    .mpn-footer__legal { justify-content: flex-start; }
}

@media (max-width: 559px) {
    .mpn-footer__nav {
        grid-template-columns: 1fr;
        row-gap: 28px;
    }

    /* Sous 560 px, chaque action prend sa propre ligne. */
    .mpn-footer a.mpn-footer__cta,
    .mpn-footer a.mpn-footer__ghost { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .mpn-footer a.mpn-footer__cta,
    .mpn-footer a.mpn-footer__ghost { transition: none; }
}

/* ------------------------------------------------------------ animations --- */

@keyframes mpn-pouls {
    0%, 72%, 100% { transform: scale(1); opacity: .85; }
    78% { transform: scale(1.5); opacity: 1; }
    84% { transform: scale(1); opacity: .85; }
}

@keyframes mpn-monte {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}

/* Entrée en cascade : posée par le script au passage dans le champ de vision. */
.mpn-anim { opacity: 0; }
.mpn-anim.is-visible { animation: mpn-monte .55s cubic-bezier(.22, .8, .3, 1) both; }

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

@media (max-width: 900px) {
    .mpn-grille--2,
    .mpn-grille--3,
    .mpn-grille--4 { grid-template-columns: 1fr; }
    .mpn-footer__cols { grid-template-columns: 1fr; }
}

/* Nav desktop -> menu burger : seuil aligne sur celui deja utilise par
   composants.css pour compacter les boutons d'action (icone seule), pas
   un nouveau chiffre invente. En dessous, la nav a 5 items ne tient plus
   a cote du logo agrandi et du groupe d'actions. */
@media (max-width: 1150px) {
    .mpn-burger { display: block; }
    .mpn-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--mpn-surface);
        border-bottom: 1px solid var(--mpn-line);
        padding: 8px;
    }
    .mpn-nav.is-open { display: flex; }
    .mpn-nav a,
    .mpn-nav__lien { border-radius: 12px; padding: 12px 14px; }

    /* Pas de survol au doigt : le sous-menu "Nos offres" reste toujours
       deplie, en retrait, dans la liste verticale du menu mobile. */
    .mpn-nav__dropdown { display: contents; }
    .mpn-nav__caret { display: none; }
    .mpn-nav__menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        border-radius: 0;
        background: none;
        margin: 0 0 4px 14px;
        padding: 0;
    }
    .mpn-nav__menu a { padding: 10px 14px; font-size: .9rem; }
}

/* Réglage système « réduire les animations » : on ne l'ignore pas. */
@media (prefers-reduced-motion: reduce) {
    .mpn-anim,
    .mpn-anim.is-visible { opacity: 1; animation: none; }
    .mpn-badge__point { animation: none; }
    .mpn-btn:hover { transform: none; }
    html { scroll-behavior: auto; }
}