/* ==========================================================================
   mpe-local.css — Habillage des PAGES LOCALES (référencement)
   Région · Département · Annuaire de ville · Créer un site à {ville}

   Ces pages sont rendues côté serveur par app.py (concaténation de chaînes).
   Elles reprennent EXACTEMENT la coquille de l'application principale :
     · rail sombre  #0f1622  (comme la barre de l'accueil et de l'espace client)
     · page claire  #f7f8fa  (comme le contenu de l'espace client)
     · UN seul accent : le bleu Klein #002FA7
     · le filet prisme (cyan → magenta → jaune → vert) en signature
     · Bricolage Grotesque pour le titrage, Instrument Sans pour le texte
   Voir :root de mpe-home.css et d'espace-client-accueil.html : mêmes valeurs.

   Servi en statique (Cache-Control: public, max-age=86400) : une seule
   feuille pour les 4 gabarits, mise en cache dès la première page vue.
   ========================================================================== */

/* ------------------------------------------------------------ typographie */
@font-face{
  font-family:'Bricolage Grotesque';
  src:url(/fonts/bricolage-grotesque.woff2) format('woff2');
  font-weight:200 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Instrument Sans';
  src:url(/fonts/instrument-sans.woff2) format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
}

/* --------------------------------------------------------------- jetons */
:root{
  /* couleurs de marque — identiques à mpe-home.css */
  --blue:#002FA7; --blue-700:#00248a; --blue-300:#5b86ff; --blue-050:#eef2ff;
  --cyan:#00CBE4; --magenta:#D622C6; --yellow:#FACC15; --green:#23935E;
  --prism:linear-gradient(90deg in oklch,var(--cyan),var(--magenta),var(--yellow),var(--green),var(--cyan));

  /* coquille — identiques à espace-client-accueil.html */
  --rail:#0f1622; --rail-2:#1b2635; --rail-tx:#94a3b8; --rail-line:#243043;
  --page:#f7f8fa; --surface:#fff; --line:#e6e9ef; --line-2:#d7dce6;

  /* texte */
  --ink:#0f172a; --slate:#334155; --muted:#5b6779; --paper:#f6f6f2;

  /* états */
  --ok:#0e9f6e; --warn:#b45309;

  /* profondeur */
  --sh-1:0 1px 2px rgba(16,24,40,.05);
  --sh-2:0 1px 2px rgba(16,24,40,.05),0 8px 22px -14px rgba(15,23,42,.28);
  --sh-3:0 18px 44px -22px rgba(15,23,42,.42);
  --ring:0 0 0 3px rgba(0,47,167,.22);

  /* rayons */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;

  /* rythme */
  --gap:14px; --pad:22px; --wrap:1160px; --wrap-tight:820px;

  /* mouvement */
  --t-fast:.14s; --t-med:.24s;

  /* polices */
  --disp:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

/* ------------------------------------------------------------- socle ---- */
*,*::before,*::after{box-sizing:border-box}
/* Les cartes et pastilles imposent display:flex — sans cette règle, une classe
   d'auteur l'emporte sur la feuille du navigateur et [hidden] ne masque plus
   rien (c'est ce que pose le filtre instantané de mpe-local.js). */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
html,body{margin:0}
body{
  background:var(--page); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
img,svg{max-width:100%}
h1,h2,h3,h4{margin:0; font-family:var(--disp); line-height:1.1; letter-spacing:-.022em; text-wrap:balance}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
button{font:inherit; color:inherit}

/* Anneau de focus visible et homogène partout (clavier). */
:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:6px}
.mpe-rail :focus-visible,.mpe-band :focus-visible,.mpe-foot :focus-visible{outline-color:var(--blue-300)}

/* Lien d'évitement : premier élément tabulable de chaque page. */
.mpe-skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--surface); color:var(--ink); font-weight:700;
  padding:12px 18px; border-radius:0 0 var(--r-md) 0; box-shadow:var(--sh-3);
}
.mpe-skip:focus{left:0}

.mpe-wrap{width:min(var(--wrap),100% - 40px); margin-inline:auto}
@media(max-width:640px){.mpe-wrap{width:min(var(--wrap),100% - 32px)}}

/* ====================================================== BARRE APPLICATION */
/* Reprend la barre de l'accueil : rail sombre, marque à gauche, liens de
   section, pastille « Espace client », filet prisme en dessous. */
.mpe-rail{position:sticky; top:0; z-index:50; background:var(--rail)}
.mpe-rail-in{
  display:flex; align-items:center; flex-wrap:wrap; gap:18px; height:64px;
  width:min(var(--wrap),100% - 40px); margin-inline:auto;
}
.mpe-brand{
  display:flex; align-items:center; gap:11px; flex:none;
  font-family:var(--disp); font-weight:700; font-size:19px;
  letter-spacing:-.02em; color:#fff;
}
.mpe-mark{
  width:34px; height:34px; border-radius:3px; background:var(--blue); flex:none;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,47,167,.32);
}
.mpe-mark i{display:block; width:13px; height:13px; border-radius:4px; border:3px solid #fff}
.mpe-rail-sp{flex:1}
.mpe-nav{display:flex; align-items:center; gap:24px}
.mpe-nav a{
  font-size:13.5px; font-weight:600; color:#c9cad4;
  transition:color var(--t-fast);
}
.mpe-nav a:hover{color:#fff}
.mpe-cta-pill{
  display:inline-flex; align-items:center; min-height:38px; padding:9px 17px;
  background:var(--paper); color:var(--rail); border-radius:var(--r-pill);
  font-weight:700; font-size:14px; white-space:nowrap;
  transition:transform var(--t-fast),filter var(--t-fast);
}
.mpe-cta-pill:hover{transform:translateY(-1px); filter:brightness(1.06)}

/* Filet prisme : la signature colorée de la marque. */
.mpe-prism{
  height:3px; background:var(--prism); background-size:200% 100%;
  animation:mpe-flow 8s linear infinite;
}
@keyframes mpe-flow{to{background-position:200% 0}}

/* ------------------------------------------------------------- hamburger --
   Le menu est un <details>/<summary> : c'est le navigateur qui l'ouvre et le
   ferme, donc il fonctionne SANS JavaScript, au clavier comme au doigt, et
   l'état déplié est annoncé nativement aux lecteurs d'écran. Un bouton piloté
   en JS aurait exigé aria-expanded, la gestion du focus et un repli — pour un
   résultat moins fiable.

   Sur grand écran le bouton disparaît et le <nav> est réaffiché en ligne :
   une seule structure, jamais dupliquée. La règle ci-dessous prime sur la
   feuille du navigateur, qui masque le contenu d'un <details> fermé. */
/* Le <nav> est VOISIN du <details>, pas son enfant : Chromium masque le contenu
   d'un <details> fermé via content-visibility, que `display` ne peut pas
   outrepasser — le menu serait resté invisible sur grand écran. En le plaçant à
   côté, le sélecteur d'adjacence `[open] + .mpe-nav` suffit, et le <nav> reste
   affiché en ligne sur bureau sans dépendre de l'état du <details>. */
.mpe-burger{display:none}                       /* bouton : téléphone seulement */

@media(max-width:860px){
  .mpe-rail-in{height:58px; gap:12px; position:relative}
  .mpe-brand{font-size:17px}
  .mpe-mark{width:30px; height:30px}

  .mpe-burger{display:flex; align-items:center}
  .mpe-burger>summary{
    display:grid; place-items:center; width:44px; height:44px;   /* cible tactile */
    border-radius:var(--r-md); border:1px solid var(--rail-line);
    background:var(--rail-2); color:#fff; cursor:pointer;
    list-style:none; transition:background var(--t-fast);
  }
  .mpe-burger>summary::-webkit-details-marker{display:none}      /* triangle par défaut */
  .mpe-burger>summary:hover,.mpe-burger[open]>summary{background:#243043}
  .mpe-burger .i-close{display:none}
  .mpe-burger[open] .i-open{display:none}
  .mpe-burger[open] .i-close{display:block}

  /* Panneau déroulant, ancré sous le bouton. */
  .mpe-nav{
    display:none;
    /* 100 % = bas de la rangée ; +11px passe sous le filet prisme (3px) et
       laisse 8px de respiration, pour que la signature colorée reste entière. */
    position:absolute; right:0; top:calc(100% + 11px); z-index:60;
    flex-direction:column; align-items:stretch; gap:3px;
    min-width:min(268px,calc(100vw - 32px)); padding:9px;
    background:var(--rail-2); border:1px solid var(--rail-line);
    border-radius:var(--r-lg); box-shadow:0 22px 48px -20px rgba(0,0,0,.75);
  }
  .mpe-burger[open]+.mpe-nav{display:flex}
  .mpe-nav a{
    display:flex; align-items:center; min-height:46px; padding:11px 14px;
    font-size:15px; border-radius:var(--r-md); color:#e2e8f0;
  }
  .mpe-nav a:hover{background:rgba(255,255,255,.07); color:#fff}
  /* « Espace client » reprend toute la largeur du panneau, mais aplatie :
     40 px au lieu de 48, pour ne plus dominer les quatre liens au-dessus.
     C'est en deçà de la cible tactile de 44 px retenue ailleurs dans ces
     pages — choix assumé, la pastille reste large donc facile à viser. */
  .mpe-nav .mpe-cta-pill{
    justify-content:center;
    min-height:40px; padding:0 16px; margin:9px 0 2px;
    font-size:15px; border-radius:var(--r-md); color:var(--rail);
  }
  .mpe-nav .mpe-cta-pill:hover{background:#fff; color:var(--rail); transform:none}
}

/* ============================================================ FIL D'ARIANE */
.mpe-crumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  padding:16px 0 0; font-size:13px; color:var(--muted);
}
.mpe-crumb a{border-bottom:1px solid transparent; transition:color var(--t-fast),border-color var(--t-fast)}
.mpe-crumb a:hover{color:var(--blue); border-bottom-color:var(--blue)}
.mpe-crumb .sep{color:var(--line-2)}
.mpe-crumb [aria-current]{color:var(--ink); font-weight:600}

/* ================================================================== HÉROS */
.mpe-hero{padding:24px 0 34px}
.mpe-badge{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:700; letter-spacing:.01em;
  color:var(--blue); background:var(--blue-050);
  border:1px solid #dbe3ff; padding:6px 13px; border-radius:var(--r-pill);
}
.mpe-badge .code{
  font-variant-numeric:tabular-nums; font-weight:800;
  padding-left:8px; margin-left:2px; border-left:1px solid #c7d3ff;
}
.mpe-hero h1{
  font-size:clamp(29px,5vw,50px); font-weight:800; margin:16px 0 0;
}
.mpe-hero h1 .hl{color:var(--blue)}
.mpe-lede{
  color:var(--slate); font-size:clamp(16px,1.6vw,18.5px);
  margin-top:16px; max-width:62ch;
}
.mpe-lede strong{color:var(--ink); font-weight:700}
.mpe-actions{display:flex; flex-wrap:wrap; gap:11px; margin-top:24px}
.mpe-trust{
  display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:20px;
  font-size:13.5px; color:var(--muted);
}
/* Enfants DIRECTS uniquement : appliqué à tous les descendants, l'espacement
   de la rangée s'insérerait aussi entre « unique » et la virgule qui suit. */
.mpe-trust>span{display:inline-flex; align-items:center; gap:7px}
.mpe-trust b{color:var(--ink); font-weight:700}
.mpe-trust svg{color:var(--green); flex:none}

/* ================================================================ BOUTONS */
.mpe-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:13px 24px; border-radius:var(--r-pill);
  font-family:var(--body); font-weight:700; font-size:15.5px;
  border:1px solid transparent; cursor:pointer; text-align:center;
  transition:transform var(--t-fast),filter var(--t-fast),
             border-color var(--t-fast),background var(--t-fast);
}
.mpe-btn-1{background:var(--blue); color:#fff; box-shadow:0 8px 20px -12px rgba(0,47,167,.7)}
.mpe-btn-1:hover{transform:translateY(-1px); filter:brightness(1.12)}
.mpe-btn-2{background:var(--surface); color:var(--ink); border-color:var(--line-2)}
.mpe-btn-2:hover{border-color:var(--blue); color:var(--blue)}
.mpe-btn-3{background:var(--paper); color:var(--rail)}
.mpe-btn-3:hover{transform:translateY(-1px); filter:brightness(1.06)}
.mpe-btn-sm{min-height:40px; padding:9px 17px; font-size:14px}

/* Sur téléphone, tous les boutons d'action s'alignent sur 40 px — la hauteur
   retenue pour la pastille du menu. Le remplissage vertical passe à 0 : gardé
   à 13 px, il aurait imposé 15,5 + 26 = 41,5 px et la consigne de min-height
   n'aurait rien changé. Même largeur, même rayon : seule la hauteur bouge. */
@media(max-width:860px){
  .mpe-btn{min-height:40px; padding:0 20px}
}

/* ================================================================ SECTIONS */
.mpe-sect{padding:40px 0; border-top:1px solid var(--line)}
.mpe-sect:first-of-type{border-top:0}
.mpe-eyebrow{
  display:block; font-size:11.5px; font-weight:800;
  letter-spacing:.15em; text-transform:uppercase; color:var(--blue);
}
.mpe-sect h2{font-size:clamp(21px,3vw,31px); font-weight:800; margin-top:9px}
.mpe-sect .mpe-sub{color:var(--slate); margin-top:11px; max-width:66ch}
.mpe-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:18px; flex-wrap:wrap;
}
.mpe-head .mpe-more{
  font-size:14px; font-weight:700; color:var(--blue); white-space:nowrap;
  border-bottom:1px solid transparent;
}
.mpe-head .mpe-more:hover{border-bottom-color:var(--blue)}
/* Décompte non cliquable : gris et sans soulignement, pour qu'il ne se fasse
   jamais passer pour le lien « Tout l'annuaire » qui occupe la même place. */
.mpe-head .mpe-tally{
  font-size:13px; font-weight:700; color:var(--muted); white-space:nowrap;
  font-variant-numeric:tabular-nums; padding:5px 11px;
  border:1px solid var(--line); border-radius:var(--r-pill); background:var(--surface);
}

/* ================================================================= OUTILS */
/* Champ de recherche instantanée (départements, villes, entreprises). */
.mpe-tools{display:flex; flex-wrap:wrap; gap:11px; align-items:center; margin-top:20px}
.mpe-search{
  position:relative; flex:1 1 300px; min-width:0; max-width:460px;
}
.mpe-search svg{
  position:absolute; left:15px; top:50%; transform:translateY(-50%);
  color:var(--muted); pointer-events:none;
}
.mpe-search input{
  width:100%; min-height:48px; padding:12px 16px 12px 43px;
  font:inherit; font-size:15px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--r-pill); transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.mpe-search input::placeholder{color:var(--muted)}
.mpe-search input:focus{outline:none; border-color:var(--blue); box-shadow:var(--ring)}
.mpe-count{font-size:14px; color:var(--muted); font-variant-numeric:tabular-nums}
.mpe-count b{color:var(--ink); font-weight:700}

/* Pastilles de filtre (activités réellement présentes). */
.mpe-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.mpe-chip{
  display:inline-flex; align-items:center; gap:7px; min-height:38px;
  padding:8px 14px; border-radius:var(--r-pill);
  border:1px solid var(--line-2); background:var(--surface);
  font-size:13.5px; font-weight:600; color:var(--slate); cursor:pointer;
  transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast);
}
.mpe-chip:hover{border-color:var(--blue); color:var(--blue)}
.mpe-chip[aria-pressed="true"]{background:var(--blue); border-color:var(--blue); color:#fff}
.mpe-chip .n{
  font-variant-numeric:tabular-nums; font-size:12px; font-weight:700;
  color:var(--muted); padding:1px 6px; border-radius:var(--r-pill);
  background:rgba(15,23,42,.06);
}
.mpe-chip[aria-pressed="true"] .n{background:rgba(255,255,255,.22); color:#fff}

/* ================================================================= GRILLES */
.mpe-grid{display:grid; gap:var(--gap); margin-top:22px}
.mpe-grid-3{grid-template-columns:repeat(auto-fill,minmax(272px,1fr))}
.mpe-grid-4{grid-template-columns:repeat(auto-fill,minmax(216px,1fr))}
@media(max-width:520px){.mpe-grid-3,.mpe-grid-4{grid-template-columns:1fr}}

/* Carte générique : département, ville, entreprise. */
.mpe-card{
  display:flex; align-items:center; gap:13px; min-height:74px;
  padding:14px 16px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  transition:transform var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);
}
.mpe-card:hover{transform:translateY(-2px); border-color:var(--blue); box-shadow:var(--sh-2)}
.mpe-card .av{
  width:44px; height:44px; border-radius:var(--r-md); flex:none;
  display:grid; place-items:center; background:var(--blue); color:#fff;
  font-family:var(--disp); font-weight:800; font-size:16px;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.mpe-card .av-soft{background:var(--blue-050); color:var(--blue)}
.mpe-card .tx{min-width:0; flex:1}
.mpe-card .t{
  display:block; font-weight:700; font-size:15.5px; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mpe-card .s{
  display:block; font-size:13px; color:var(--muted); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mpe-card .go{
  margin-left:auto; flex:none; color:var(--blue);
  transition:transform var(--t-fast);
}
.mpe-card:hover .go{transform:translateX(3px)}

/* Liste dense (villes d'un département, régions voisines). */
.mpe-pills{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.mpe-pill{
  display:inline-flex; align-items:center; gap:8px; min-height:40px;
  padding:9px 15px; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--line);
  font-size:14px; font-weight:600; color:var(--slate);
  transition:border-color var(--t-fast),color var(--t-fast),transform var(--t-fast);
}
.mpe-pill:hover{border-color:var(--blue); color:var(--blue); transform:translateY(-1px)}
.mpe-pill[aria-current="page"]{background:var(--blue); border-color:var(--blue); color:#fff}
.mpe-pill .code{
  font-variant-numeric:tabular-nums; font-weight:800; font-size:12px;
  color:var(--blue); background:var(--blue-050);
  padding:2px 7px; border-radius:var(--r-sm);
}
.mpe-pill:hover .code{background:#dbe3ff}
.mpe-pill[aria-current="page"] .code{background:rgba(255,255,255,.18); color:#fff}

/* Quartiers réels d'une ville : étiquettes non cliquables. */
.mpe-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.mpe-tag{
  font-size:13.5px; font-weight:600; color:var(--slate);
  padding:7px 13px; border-radius:var(--r-sm);
  background:var(--surface); border:1px solid var(--line);
}

/* ================================================================= CHIFFRES */
.mpe-stats{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gap); margin-top:24px;
}
@media(max-width:620px){.mpe-stats{grid-template-columns:1fr}}
.mpe-stat{
  padding:20px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1);
}
.mpe-stat .n{
  font-family:var(--disp); font-size:clamp(26px,3.4vw,34px); font-weight:800;
  color:var(--blue); line-height:1.05; letter-spacing:-.03em;
}
.mpe-stat .l{font-size:13.5px; color:var(--muted); margin-top:7px}

/* ================================================================== ÉTAPES */
.mpe-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); margin-top:24px}
@media(max-width:760px){.mpe-steps{grid-template-columns:1fr}}
.mpe-step{
  position:relative; padding:22px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1);
}
.mpe-step .n{
  width:34px; height:34px; border-radius:var(--r-pill);
  display:grid; place-items:center; background:var(--blue); color:#fff;
  font-family:var(--disp); font-weight:800; font-size:15px;
}
.mpe-step h3{font-size:17.5px; font-weight:700; margin-top:14px}
.mpe-step p{color:var(--muted); font-size:14.5px; margin-top:7px}

/* ===================================================================== FAQ */
.mpe-faq{display:flex; flex-direction:column; gap:10px; margin-top:22px; max-width:840px}
.mpe-faq details{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:0 18px;
  transition:border-color var(--t-fast);
}
.mpe-faq details[open]{border-color:var(--blue)}
.mpe-faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 0; min-height:52px; font-weight:700; font-size:15.5px;
  cursor:pointer; list-style:none;
}
.mpe-faq summary::-webkit-details-marker{display:none}
.mpe-faq summary svg{flex:none; color:var(--blue); transition:transform var(--t-med)}
.mpe-faq details[open] summary svg{transform:rotate(180deg)}
.mpe-faq .ans{color:var(--slate); font-size:14.5px; padding:0 0 18px}

/* ============================================================== PAGINATION */
.mpe-pager{
  display:flex; flex-wrap:wrap; gap:7px; justify-content:center;
  align-items:center; margin-top:28px;
}
.mpe-pager a,.mpe-pager span{
  min-width:44px; height:44px; padding:0 13px; border-radius:var(--r-md);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14.5px; font-weight:700; font-variant-numeric:tabular-nums;
  background:var(--surface); border:1px solid var(--line); color:var(--slate);
  transition:border-color var(--t-fast),color var(--t-fast);
}
.mpe-pager a:hover{border-color:var(--blue); color:var(--blue)}
.mpe-pager [aria-current="page"]{background:var(--blue); border-color:var(--blue); color:#fff}
.mpe-pager .gap{border:0; background:none; min-width:20px; padding:0; color:var(--muted)}

/* ============================================================ BANDE D'APPEL */
/* Bloc de conversion : rail sombre + filet prisme, comme la barre du produit. */
.mpe-band{
  position:relative; overflow:hidden; margin:8px 0 0;
  background:var(--rail); color:var(--paper);
  border-radius:var(--r-xl); padding:32px;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.mpe-band::before{
  content:""; position:absolute; inset:0 0 auto; height:3px;
  background:var(--prism); background-size:200% 100%;
  animation:mpe-flow 8s linear infinite;
}
.mpe-band .mpe-eyebrow{color:var(--blue-300)}
.mpe-band h2{font-size:clamp(20px,2.6vw,27px); font-weight:800; color:#fff; margin-top:8px}
.mpe-band p{color:#c9cad4; margin-top:9px; max-width:48ch; font-size:15px}
.mpe-band .mpe-price{
  display:inline-flex; align-items:baseline; gap:8px; margin-top:14px;
  font-family:var(--disp); font-weight:800; font-size:23px; color:#fff;
}
.mpe-band .mpe-price small{font-family:var(--body); font-size:13.5px; font-weight:600; color:var(--rail-tx)}
@media(max-width:620px){.mpe-band{padding:26px 22px}.mpe-band .mpe-btn{width:100%}}

/* ============================================================== ÉTAT VIDE */
.mpe-empty{
  text-align:center; padding:44px 26px; margin-top:8px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-xl); box-shadow:var(--sh-1);
}
.mpe-empty .art{margin:0 auto 20px; display:block}
.mpe-empty h2{font-size:clamp(21px,3vw,28px); font-weight:800}
.mpe-empty p{color:var(--slate); margin:12px auto 0; max-width:52ch}
.mpe-empty .mpe-actions{justify-content:center}
.mpe-empty-inline{
  display:none; text-align:center; padding:34px 22px; margin-top:var(--gap);
  color:var(--muted); background:var(--surface);
  border:1px dashed var(--line-2); border-radius:var(--r-lg);
}
.mpe-empty-inline b{color:var(--ink)}

/* ====================================================== BARRE D'ACTION MOBILE */
/* Sur téléphone, l'offre reste atteignable en permanence (réflexe applicatif). */
.mpe-dock{display:none}
@media(max-width:760px){
  .mpe-dock{
    position:fixed; left:0; right:0; bottom:0; z-index:45;
    display:flex; align-items:center; gap:12px;
    padding:11px 16px calc(11px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.94); backdrop-filter:blur(10px);
    border-top:1px solid var(--line); box-shadow:0 -8px 26px -18px rgba(15,23,42,.5);
  }
  .mpe-dock .tx{min-width:0; flex:1; line-height:1.25}
  .mpe-dock .t{display:block; font-weight:700; font-size:14.5px; color:var(--ink)}
  .mpe-dock .s{display:block; font-size:12.5px; color:var(--muted)}
  /* La barre basse porte aussi un « Commencer » : même hauteur que les autres. */
  .mpe-dock .mpe-btn{flex:none; min-height:40px; padding:0 20px; font-size:14.5px}
  body.has-dock{padding-bottom:78px}
}

/* ============================================================== PIED DE PAGE */
.mpe-foot{margin-top:48px; background:var(--rail); color:var(--rail-tx); font-size:14px}
.mpe-foot .mpe-prism{opacity:.9}
.mpe-foot-in{padding:34px 0 30px}
.mpe-foot-top{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:22px; flex-wrap:wrap; padding-bottom:22px; border-bottom:1px solid var(--rail-line);
}
.mpe-foot-top .mpe-eyebrow{color:var(--rail-tx); letter-spacing:.14em}
.mpe-foot h3{
  font-family:var(--body); font-size:12px; font-weight:800; color:#fff;
  letter-spacing:.12em; text-transform:uppercase;
}
.mpe-foot-cols{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:26px; padding:24px 0;
}
.mpe-foot-cols ul{display:flex; flex-direction:column; gap:9px; margin-top:13px}
.mpe-foot-cols a{color:var(--rail-tx); transition:color var(--t-fast)}
.mpe-foot-cols a:hover{color:#fff}
.mpe-foot .villes{color:var(--rail-tx); line-height:1.9; padding:4px 0 22px}
.mpe-foot .villes a{
  color:#e2e8f0; border-bottom:1px solid var(--rail-line);
  transition:color var(--t-fast),border-color var(--t-fast);
}
.mpe-foot .villes a:hover{color:#fff; border-bottom-color:var(--blue-300)}
.mpe-foot-bot{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding-top:20px; border-top:1px solid var(--rail-line); font-size:13px;
}
.mpe-foot-bot a{color:var(--rail-tx)}
.mpe-foot-bot a:hover{color:#fff}

/* ============================================================== MOUVEMENT */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important;
                       transition-duration:.001ms!important; scroll-behavior:auto!important}
  .mpe-btn:hover,.mpe-card:hover,.mpe-pill:hover,.mpe-cta-pill:hover{transform:none}
}

/* ============================================================== IMPRESSION */
@media print{
  .mpe-rail,.mpe-nav-mob,.mpe-dock,.mpe-band,.mpe-tools,.mpe-chips{display:none!important}
  body{background:#fff}
  .mpe-card{break-inside:avoid; box-shadow:none}
}