/*
Theme Name: MusiProf
*/
@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400;600;700;900&family=Alegreya:ital,wght@0,400;0,500;0,700;1,400;1,700&family=Chivo+Mono:wght@400;600&display=swap');

/* ==========================================================================
   MUSIPROF — registre « feutre et ébène »
   Thème CLAIR uniquement. Aucun basculeur, aucune règle prefers-color-scheme
   qui repeindrait le site (CM-0575). Les bandes --ebene et --drap sont un
   PROCÉDÉ GRAPHIQUE, pas un thème sombre : elles sont fixes, dans les deux
   sens de lecture système.
   ========================================================================== */

:root{
  /* -- jetons de couleur ----------------------------------------------------
     Refonte Superprof×Wiplay (18/09) : fond général BLANC (brief §1), le rose
     très pâle --feutre devient l'aplat des bandes hero/plateau/alternance —
     il reste dérivé du drap (cramoisi musiprof), jamais le corail Superprof. */
  --blanc:#FFFFFF;       /* fond général de toutes les pages, désormais */
  --feutre:#F4F4FA;      /* rose très pâle dérivé du drap — hero, plateau, bandes alternées */
  --feutre-fort:#E7E6F6; /* rose un cran plus soutenu — tuiles/plateau, badges */
  --ivoire:#FBFBFE;      /* cartes, champs, encadrés — quasi blanc, légèrement chaud */
  --ebene:#17153B;       /* encre courante + bandes sombres, noir pourpré */
  --encre-douce:#4A4868; /* texte secondaire, légendes, crédits */
  --drap:#3F37C9;        /* accent UNIQUE, positif : boutons, liens, logo */
  --drap-sombre:#2E279E; /* survol du drap */
  --craie:#D3D2EA;       /* filets et bordures UNIQUEMENT — jamais du texte */
  --verifie:#1F6B4A;
  --laiton:#F4B63F;      /* accent UNIQUE chaud (cuivres) : CTA, soulignés, pastilles — 28/09 Roxane : palette simplifiée blanc + nuit/indigo + laiton */
  --laiton-sombre:#D99A1E;     /* seule couleur sémantique : école recensée / fiche vérifiée */

  /* texte sur fond ébène / drap */
  --sur-ebene:#F5F5FF;
  --sur-drap:#FFFFFF;

  color-scheme:light;

  /* -- typographie ----------------------------------------------------------- */
  --f-titre:'Gabarito', 'Segoe UI', sans-serif;
  --f-texte:'Alegreya', Georgia, serif;
  --f-mono:'Chivo Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* -- grille et rythme -------------------------------------------------------- */
  --contenu:1180px;
  --gout:32px;
  --r-champ:12px;
  --r-carte:18px;
  --r-photo:18px;   /* coins de photo, code visuel Superprof (16-20px) */
  --r-pille:999px;  /* boutons/champs en pilule, code visuel Superprof */
  --barre-h:68px;

  /* grain de feutre — SEULE texture du site (procédé 7a), posée uniquement
     sur les aplats rose pâle (hero, plateau), jamais sur le blanc général */
  --mp-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (max-width:760px){ :root{ --gout:16px; } }

/* ---------- reset / socle ---------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--blanc);color:var(--ebene);font-family:var(--f-texte);
  font-size:18.5px;line-height:1.70;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* html.js posé en tête de <head> (header.php) : amélioration progressive du lutrin en étapes */
html:not(.js) .mp-lutrin-etape{display:block!important}
html:not(.js) .mp-lutrin-suivant,html:not(.js) .mp-lutrin-precedent,html:not(.js) .mp-lutrin-progress{display:none!important}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--drap);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--f-titre);font-weight:700;margin:0;line-height:1.1;
  text-transform:none;text-wrap:balance;letter-spacing:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit}
table{border-collapse:collapse}

.mp-oeil{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}
.mp-oeil:focus{left:1rem;top:1rem;width:auto;height:auto;padding:.6rem 1rem;
  background:var(--ebene);color:var(--ivoire);z-index:200;border-radius:var(--r-champ)}
.mp-oeil-txt{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.mp-wrap{width:min(var(--contenu),100% - var(--gout) * 2);margin-inline:auto}
.mp-grain{background-image:var(--mp-grain);background-size:160px 160px}

/* coin bas-droit abattu (procédé récurrent : cartes, vignettes, lutrin) */
.mp-abattu-14{clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
.mp-abattu-22{clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%)}

/* ---------- 1. BANDES --------------------------------------------------------- */
.mp-bande{padding-block:3.4rem}
.mp-bande--feutre{background:var(--feutre)}
.mp-bande--ivoire{background:var(--ivoire)}
.mp-bande--blanc{background:var(--blanc)}
.mp-bande--ebene{background:var(--ebene);color:var(--sur-ebene)}
.mp-bande--ebene .mp-encre-douce{color:#B9B8DA}
.mp-bande--drap{background:var(--drap);color:var(--sur-drap)}
@media (max-width:760px){ .mp-bande{padding-block:2.2rem} }

.mp-encre-douce{color:var(--encre-douce)}

/* ---------- titre de section à deux tons (refonte Superprof) ------------------ */
.mp-section-tete{padding-block:0 1.5rem}
.mp-titre-section{font-size:32px;line-height:1.2}
.mp-accent-mot{color:var(--drap)}
@media (max-width:760px){ .mp-titre-section{font-size:25px} }

/* ---------- 2. LA PORTÉE — charnière de bande (procédé 1) --------------------- */
/* ⚠️ dosage : au plus 4 par page, JAMAIS à l'intérieur d'une carte. */
.mp-portee{position:relative;height:24px;width:100%;
  background-image:repeating-linear-gradient(to bottom, var(--craie) 0 1px, transparent 1px 6px);
  background-size:100% 24px;background-repeat:no-repeat}
.mp-portee-in{position:relative;max-width:var(--contenu);width:min(var(--contenu),100% - var(--gout) * 2);
  margin-inline:auto;height:24px;display:flex;align-items:flex-end}
.mp-note{position:absolute;left:0;width:11px;height:30px;color:var(--drap);transform-origin:50% 100%}
.mp-note svg{display:block;width:100%;height:100%}
.mp-charniere{position:relative;padding-top:8px}
.mp-charniere-titre{display:flex;align-items:center;min-height:24px;padding-block:.5rem 0;
  max-width:var(--contenu);width:min(var(--contenu),100% - var(--gout) * 2);margin-inline:auto}
.mp-charniere-titre h2{font-size:34px;line-height:1.15;margin-left:2.4rem}
.mp-charniere--l0 .mp-note{top:-6px}
.mp-charniere--l1 .mp-note{top:0px}
.mp-charniere--l2 .mp-note{top:6px}
.mp-charniere--l3 .mp-note{top:12px}
.mp-charniere--sur-ebene{background-image:repeating-linear-gradient(to bottom, #4A4868 0 1px, transparent 1px 6px)}
@media (max-width:760px){
  .mp-charniere-titre{flex-direction:column;align-items:flex-start;gap:.3rem}
  .mp-charniere-titre h2{margin-left:0;font-size:24px}
  .mp-note{position:static;margin-bottom:.2rem}
}

/* ---------- 3. ÉTIQUETTES, CHAPÔS, MESURES ------------------------------------ */
.mp-etiq{font-family:var(--f-mono);font-size:12.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--encre-douce)}
.mp-etiq--drap{color:var(--drap)}
.mp-etiq--clair{color:#C9C8EA}
.mp-chapo{font-family:var(--f-texte);font-style:italic;font-size:21px;line-height:1.55;color:var(--encre-douce)}
.mp-mesure{font-family:var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.mp-nowrap{white-space:nowrap}
@media (max-width:760px){ .mp-chapo{font-size:18px} }

/* ---------- 4. EN-TÊTE -------------------------------------------------------- */
.mp-entete{position:sticky;top:0;z-index:60;background:var(--blanc);border-bottom:1px solid var(--craie)}
.mp-entete-in{width:min(var(--contenu),100% - var(--gout) * 2);margin-inline:auto;
  min-height:var(--barre-h);display:flex;align-items:center;gap:1.6rem}
.mp-logo{display:flex;align-items:center;gap:.6rem}
.mp-logo:hover{text-decoration:none}
.mp-logo-symbole{width:38px;height:38px;flex:0 0 auto}
.mp-logo-mot{font-family:var(--f-titre);font-weight:700;font-size:23px;color:var(--ebene);letter-spacing:-.01em}
.mp-nav{display:flex;align-items:center;gap:1.6rem;margin-left:auto}
.mp-nav a{font-family:var(--f-titre);font-weight:600;font-size:15.5px;color:var(--ebene);white-space:nowrap}
.mp-nav a:hover{color:var(--drap)}
.mp-nav-cta{background:var(--drap);color:var(--ivoire)!important;padding:.6rem 1.3rem;border-radius:var(--r-pille)}
.mp-nav-cta:hover{background:var(--drap-sombre);text-decoration:none!important}
.mp-burger{display:none;background:none;border:1px solid var(--craie);border-radius:var(--r-pille);
  padding:.5rem .6rem;margin-left:auto}
.mp-burger span{display:block;width:18px;height:2px;background:var(--ebene);margin:3.5px 0;border-radius:1px}
.mp-nav-mobile{display:none}

/* bandeau de tempo (procédé 7b) — 3 faits calculés, jamais inventés */
.mp-tempo{background:var(--ebene);color:var(--sur-ebene);height:40px;display:flex;align-items:center;overflow:hidden}
.mp-tempo-in{width:min(var(--contenu),100% - var(--gout) * 2);margin-inline:auto;
  display:flex;align-items:center;gap:1.4rem;font-family:var(--f-mono);font-size:12px;
  letter-spacing:.02em;white-space:nowrap;overflow:hidden}
.mp-tempo-note{width:9px;height:22px;color:var(--drap);flex:0 0 auto}
.mp-tempo-note svg{width:100%;height:100%}
@media (max-width:960px){
  .mp-nav{display:none}
  .mp-burger{display:block}
  .mp-nav-mobile.is-ouvert{display:flex}
  .mp-nav-mobile{display:none;position:absolute;left:0;right:0;top:100%;background:var(--ivoire);
    border-bottom:1px solid var(--craie);flex-direction:column;padding:.4rem 0}
  .mp-nav-mobile a{font-family:var(--f-titre);font-weight:600;font-size:16px;color:var(--ebene);
    padding:.8rem var(--gout);border-top:1px solid var(--craie)}
  .mp-nav-mobile a:first-child{border-top:0}
  .mp-tempo-in{gap:1rem;font-size:10.5px}
}

/* ---------- 5. LE PLATEAU — rangée d'instruments en photos (Superprof §4, ------
   transposé : tuiles PHOTO macro plutôt que pictogrammes, voir DA §8) --------- */
.mp-plateau{position:relative;background:var(--feutre);border-radius:32px;padding:1.6rem 1.4rem}
.mp-plateau-fleche{display:none;position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:40px;height:40px;border-radius:50%;border:0;background:var(--blanc);color:var(--ebene);
  font-size:18px;line-height:1;box-shadow:0 4px 14px rgba(23,21,59,.16);align-items:center;justify-content:center}
.mp-plateau-fleche--g{left:-4px}
.mp-plateau-fleche--d{right:-4px}
@media (min-width:761px){ .mp-plateau-fleche{display:flex} .mp-plateau{padding-inline:3.2rem} }
.mp-rail-instru{display:flex;gap:1.3rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding-bottom:.2rem}
.mp-rail-instru::-webkit-scrollbar{display:none}
.mp-instru{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.55rem;min-width:0;
  flex:0 0 auto;width:110px;scroll-snap-align:start}
.mp-instru-vign{width:96px;height:96px;border-radius:50%;overflow:hidden;border:3px solid var(--blanc);
  box-shadow:0 2px 10px rgba(23,21,59,.10)}
.mp-instru-vign img{width:100%;height:100%;object-fit:cover}
.mp-instru-nom{font-family:var(--f-titre);font-weight:600;font-size:14px;color:var(--ebene)}
.mp-instru-n{font-family:var(--f-mono);font-size:11px;color:var(--encre-douce)}
@media (max-width:760px){
  .mp-plateau{border-radius:24px;padding:1.3rem 1rem}
  .mp-rail-instru{margin:0 calc(var(--gout) * -1);padding-inline:var(--gout)}
  .mp-instru{width:84px}
  .mp-instru-vign{width:84px;height:84px}
}

/* ---------- 6. CARTE PHOTO — gabarit de carte unique (Superprof §5, transposé) */
/* Grande photo, dégradé sombre en bas avec le nom en blanc gras + une ligne
   plus fine dessous ; sous la photo, une info et un lien. Jamais de profil
   fictif : le nom rendu est toujours une vraie ville / un vrai instrument /
   un vrai guide (mp_villes(), mp_instruments(), mp_rubriques()). */
.mp-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem}
.mp-grille--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.mp-grille--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mp-carte{position:relative;display:flex;flex-direction:column;background:var(--ivoire);
  border-radius:var(--r-carte);overflow:hidden;min-width:0;box-shadow:0 1px 2px rgba(23,21,59,.06);
  transition:box-shadow .15s ease,transform .15s ease}
.mp-carte:hover{box-shadow:0 14px 28px -12px rgba(23,21,59,.24);transform:translateY(-3px);text-decoration:none}
.mp-carte-photo{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-photo) var(--r-photo) 0 0}
.mp-carte-photo img{width:100%;height:100%;object-fit:cover}
.mp-carte-voile{position:absolute;inset:0;background:linear-gradient(0deg, rgba(23,21,59,.78) 0%, rgba(23,21,59,.15) 55%, rgba(23,21,59,0) 75%)}
.mp-carte-photo-txt{position:absolute;left:0;right:0;bottom:0;padding:.9rem 1rem;color:var(--ivoire)}
/* ⚠️ le titre est blanc UNIQUEMENT en surimpression sur la photo (dégradé
   sombre garanti dessous). Une carte pas encore repassée par la refonte (titre
   resté dans .mp-carte-corps, fond clair) doit rester lisible : encre foncée
   par défaut, jamais blanche hors du dégradé (contraste ×7 KIT). */
.mp-carte-titre{font-family:var(--f-titre);font-weight:700;font-size:19px;line-height:1.25;color:var(--ebene)}
.mp-carte-photo-txt .mp-carte-titre{color:var(--ivoire)}
.mp-carte-titre a{color:inherit}
.mp-carte-sous{font-family:var(--f-texte);font-size:13.5px;color:#E6E6F5;margin-top:.15rem}
.mp-carte a.mp-couvre::after{content:"";position:absolute;inset:0}
.mp-pastille{position:absolute;right:12px;top:12px;width:34px;height:34px;border-radius:50%;
  background:var(--ivoire);display:grid;place-items:center;font-family:var(--f-texte);font-style:italic;
  font-weight:700;font-size:12.5px;color:var(--ebene);box-shadow:0 2px 6px rgba(23,21,59,.28)}
.mp-carte-corps{padding:.9rem 1.1rem 1.1rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.mp-carte-capsules{display:flex;flex-wrap:wrap;gap:.35rem}
.mp-capsule{font-family:var(--f-mono);font-size:11px;color:var(--encre-douce);border:1px solid var(--craie);
  border-radius:var(--r-pille);padding:.15rem .6rem;white-space:nowrap;align-self:flex-start}
.mp-carte-mesure{font-family:var(--f-mono);font-size:15px;color:var(--ebene);margin-top:auto}
.mp-carte-lien{font-family:var(--f-titre);font-weight:600;font-size:14px;color:var(--drap);
  padding-top:.4rem;border-top:1px solid var(--craie)}
@media (max-width:960px){ .mp-grille,.mp-grille--4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .mp-grille,.mp-grille--4,.mp-grille--2{grid-template-columns:minmax(0,1fr)} }

/* aucune tuile vide : sans photo, la carte ne se publie pas — filet de sécurité visuel */
.mp-carte-photo:empty,.mp-carte-photo:not(:has(img)){display:none}

/* ---------- 7. CARTOUCHE DE MESURE (procédé 4) -------------------------------- */
.mp-cartouches{display:grid;grid-template-columns:repeat(4,200px);gap:1.2rem;justify-content:center}
.mp-cartouche{width:200px;height:200px;background:var(--ebene);color:var(--ivoire);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;text-align:center;padding:1rem}
.mp-cartouche-val{font-family:var(--f-mono);font-size:58px;line-height:1;font-weight:400}
.mp-cartouche-filet{width:52px;height:2px;background:var(--drap)}
.mp-cartouche-unite{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:#C9C8EA}
@media (max-width:960px){ .mp-cartouches{grid-template-columns:repeat(2,minmax(140px,200px))} }
@media (max-width:500px){
  .mp-cartouches{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.8rem}
  .mp-cartouche{width:100%;height:150px}
  .mp-cartouche-val{font-size:40px}
}

/* ---------- 8. LE FORMULAIRE EN ÉTAPES (Wiplay, 1 pilule Superprof en étape 1) */
.mp-lutrin{position:relative;background:var(--ivoire);border-radius:24px;border-top:3px solid var(--drap);
  box-shadow:0 18px 40px -20px rgba(23,21,59,.45);padding:1.6rem 1.6rem 1.7rem;width:100%}
.mp-lutrin h2{font-size:20px;margin-bottom:1rem;color:var(--ebene)}
.mp-champ{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.9rem}
.mp-champ label{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--encre-douce)}
.mp-champ select,.mp-champ input[type="text"],.mp-champ input[type="email"],
.mp-lutrin-etape > select,.mp-lutrin-etape > input[type="text"],.mp-lutrin-etape > input[type="email"]{
  width:100%;border:1px solid var(--craie);border-radius:var(--r-champ);background:#fff;color:var(--ebene);
  padding:.75rem .9rem;font-family:var(--f-texte);font-size:16px;margin-bottom:.9rem}

/* étape 1 : la pilule (code visuel Superprof — champ blanc + bouton plein arrondi) */
.mp-lutrin-pilule{display:flex;align-items:stretch;gap:.4rem;background:#fff;border:1px solid var(--craie);
  border-radius:var(--r-pille);box-shadow:0 10px 26px -16px rgba(23,21,59,.35);padding:.35rem .35rem .35rem 1.2rem}
.mp-lutrin-pilule select{flex:1;min-width:0;border:0;background:transparent;color:var(--ebene);
  font-family:var(--f-texte);font-size:16px;padding:.55rem 0}
.mp-lutrin-pilule select:focus{outline:none}
.mp-lutrin-pilule .mp-lutrin-suivant{display:block;flex:0 0 auto;border-radius:var(--r-pille);
  white-space:nowrap;padding:.75rem 1.5rem;margin:0}

/* pilule à 2 champs (page ville/catégorie) : instrument | ville, filet entre les deux */
.mp-lutrin-pilule--2{padding-left:1rem}
.mp-lutrin-pilule--2 select{flex:0 1 40%}
.mp-lutrin-pilule--2 input[type="text"]{flex:1;min-width:0;border:0;background:transparent;color:var(--ebene);
  font-family:var(--f-texte);font-size:16px;padding:.55rem 0;margin:0}
.mp-lutrin-pilule-filet{width:1px;align-self:stretch;background:var(--craie);flex:0 0 auto;margin-block:.4rem}
@media (max-width:640px){
  .mp-lutrin-pilule--2{flex-wrap:wrap;border-radius:20px;padding:.6rem .8rem}
  .mp-lutrin-pilule--2 select,.mp-lutrin-pilule--2 input[type="text"]{flex:1 1 100%}
  .mp-lutrin-pilule-filet{display:none}
  .mp-lutrin-pilule--2 .mp-lutrin-suivant{flex:1 1 100%;margin-top:.4rem}
}

/* étapes 2 à 5 : question, champ, barre de progression, navigation (Wiplay) */
.mp-lutrin-question{font-family:var(--f-titre);font-weight:700;font-size:17px;color:var(--ebene);margin:0 0 .8rem}
.mp-lutrin-etape{display:none}
.mp-lutrin-etape.is-actif{display:block;animation:mp-lutrin-apparait .18s ease}
@keyframes mp-lutrin-apparait{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.mp-lutrin-progress{height:6px;border-radius:var(--r-pille);background:var(--craie);opacity:.45;
  overflow:hidden;margin:.2rem 0 1rem;display:none}
.mp-lutrin-progress span{display:block;height:100%;background:var(--drap);border-radius:var(--r-pille);transition:width .25s ease}
.mp-lutrin-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.mp-lutrin-suivant{display:none;flex:1;text-align:center;background:var(--drap);color:var(--ivoire);border:0;
  border-radius:var(--r-pille);padding:.85rem 1.3rem;font-family:var(--f-titre);font-weight:700;font-size:15.5px}
.mp-lutrin-suivant:hover{background:var(--drap-sombre)}
.mp-lutrin-precedent{display:none;flex:0 0 auto;background:none;border:0;color:var(--encre-douce);
  font-family:var(--f-mono);font-size:12px;text-decoration:underline;text-underline-offset:3px;padding:.5rem 0;cursor:pointer}
html.js .mp-lutrin-progress{display:block}
html.js .mp-lutrin-nav .mp-lutrin-suivant,html.js .mp-lutrin-nav .mp-lutrin-bouton{display:block}
html.js .mp-lutrin-etape .mp-lutrin-precedent{display:inline-block}
.mp-lutrin-nav .mp-lutrin-bouton{flex:1;margin:0}
.mp-pastilles-choix{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.4rem}
.mp-pastille-choix{position:relative}
.mp-pastille-choix input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.mp-pastille-choix span{display:flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:50%;border:1px solid var(--craie);font-family:var(--f-texte);font-style:italic;
  font-weight:700;font-size:13px;color:var(--ebene);background:#fff}
.mp-pastille-choix input:checked + span{background:var(--drap);border-color:var(--drap);color:var(--ivoire)}
.mp-choix-simple{display:flex;gap:.5rem}
.mp-choix-simple label{position:relative;flex:1}
.mp-choix-simple input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.mp-choix-simple span{display:block;text-align:center;padding:.6rem .4rem;border:1px solid var(--craie);
  border-radius:var(--r-champ);font-family:var(--f-titre);font-weight:600;font-size:13.5px;color:var(--ebene);background:#fff}
.mp-choix-simple input:checked + span{background:var(--drap);border-color:var(--drap);color:var(--ivoire)}
.mp-lutrin-bouton{display:block;width:100%;text-align:center;background:var(--drap);color:var(--ivoire);
  border:0;border-radius:var(--r-pille);padding:.9rem 1rem;font-family:var(--f-titre);font-weight:700;font-size:16.5px}
.mp-lutrin-bouton:hover{background:var(--drap-sombre)}
.mp-lutrin-note{text-align:center;font-family:var(--f-mono);font-size:11.5px;color:var(--encre-douce);margin-top:.6rem}
.mp-lutrin-honeypot{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.mp-lutrin-envoye{background:color-mix(in srgb, var(--verifie) 14%, var(--ivoire));border:1px solid var(--verifie);
  border-radius:var(--r-champ);padding:1rem;font-family:var(--f-titre);font-weight:600;color:var(--ebene);text-align:center}

/* ---------- 9. HERO ACCUEIL — aplat rose pâle, coins arrondis (Superprof §1-2) */
.mp-hero{position:relative;background:linear-gradient(180deg, var(--feutre) 0%, var(--feutre) 55%, var(--blanc) 100%);
  border-radius:0 0 48px 48px;padding:3.2rem 0 2.4rem;overflow:hidden}
.mp-hero::before{content:"";position:absolute;inset:0;background-image:var(--mp-grain);background-size:160px 160px;opacity:.45}
.mp-hero-in{position:relative;z-index:2;text-align:center;max-width:760px;margin-inline:auto}
.mp-hero-surtitre{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--drap)}
.mp-hero h1{font-size:60px;line-height:1.04;margin-top:.7rem;color:var(--ebene);font-weight:900}
.mp-hero-chapo{font-family:var(--f-texte);font-style:italic;font-size:19px;line-height:1.5;color:var(--encre-douce);
  margin:1.1rem auto 0;max-width:52ch}
.mp-hero-lutrin-hold{position:relative;z-index:3;max-width:600px;margin:2rem auto 0;text-align:left}
.mp-hero-plateau{margin-top:2.6rem}
@media (max-width:960px){
  .mp-hero{border-radius:0 0 32px 32px;padding:2.2rem 0 1.8rem}
  .mp-hero h1{font-size:34px}
  .mp-hero-lutrin-hold{margin-top:1.6rem;padding-inline:var(--gout)}
  .mp-hero-plateau{margin-top:1.8rem}
}
.mp-hero-espace{height:56px}
@media (max-width:960px){ .mp-hero-espace{height:1.6rem} }

/* ---------- 10. BANDE ÉLÈVE (ébène, tuiles-photo) — procédé 3 ----------------- */
.mp-eleves{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem}
.mp-eleve{position:relative;border-radius:var(--r-carte);overflow:hidden;aspect-ratio:3/4}
.mp-eleve img{width:100%;height:100%;object-fit:cover}
.mp-eleve-voile{position:absolute;inset:0;background:linear-gradient(0deg, rgba(23,21,59,.82), rgba(23,21,59,.05) 55%)}
.mp-eleve-txt{position:absolute;left:0;right:0;bottom:0;padding:1rem;color:var(--ivoire)}
.mp-eleve-txt h3{font-size:16.5px}
@media (max-width:760px){ .mp-eleves{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ---------- 11. RÉPARTITEUR VILLES (accueil) ---------------------------------- */
.mp-villes-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem}
@media (max-width:960px){ .mp-villes-grille{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .mp-villes-grille{grid-template-columns:minmax(0,1fr)} }

/* ---------- 12bis. HERO VILLE/CATÉGORIE — refonte Superprof (titre+puces+pilule
   à gauche, photos en capsule à droite) ; remplace .mp-vhero sur page-ville.php */
.mp-vhero2{position:relative;background:linear-gradient(180deg, var(--feutre) 0%, var(--blanc) 100%);
  border-radius:0 0 40px 40px;padding:2.6rem 0 2.2rem;overflow:hidden}
.mp-vhero2::before{content:"";position:absolute;inset:0;background-image:var(--mp-grain);background-size:160px 160px;opacity:.4}
.mp-vhero2-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:2.6rem;align-items:center}
.mp-vhero2-surtitre{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--drap)}
.mp-vhero2 h1{font-size:44px;line-height:1.08;margin-top:.6rem;color:var(--ebene)}
.mp-vhero2 h1 .mp-ville-nom{display:block;color:var(--drap)}
.mp-vhero2-chapo{font-family:var(--f-texte);font-style:italic;font-size:17.5px;line-height:1.5;color:var(--encre-douce);margin-top:.8rem;max-width:46ch}
.mp-vhero2-puces{margin-top:1.1rem;display:flex;flex-direction:column;gap:.45rem}
.mp-vhero2-puces li{display:flex;align-items:center;gap:.55rem;font-family:var(--f-titre);font-weight:600;font-size:14.5px;color:var(--ebene)}
.mp-vhero2-puces .mp-note{position:static;width:9px;height:20px;flex:0 0 auto}
.mp-vhero2-lutrin{margin-top:1.4rem}
.mp-vhero2-capsules{position:relative;display:flex;gap:1rem;justify-content:center;height:420px}
.mp-capsule-photo{width:160px;border-radius:999px;overflow:hidden;flex:0 0 auto;box-shadow:0 14px 30px -14px rgba(23,21,59,.35)}
.mp-capsule-photo img{width:100%;height:100%;object-fit:cover}
.mp-capsule-photo--1{height:420px}
.mp-capsule-photo--2{height:340px;align-self:flex-end;margin-bottom:20px}
@media (max-width:1024px){ .mp-vhero2-in{grid-template-columns:1fr} .mp-vhero2-capsules{height:280px;margin-top:1.6rem} .mp-capsule-photo--1{height:280px} .mp-capsule-photo--2{height:220px} }
@media (max-width:760px){
  .mp-vhero2{border-radius:0 0 28px 28px;padding:1.8rem 0 1.6rem}
  .mp-vhero2 h1{font-size:30px}
  .mp-vhero2-capsules{height:220px}
  .mp-capsule-photo--1{height:220px;width:130px}
  .mp-capsule-photo--2{display:none}
}

/* ---------- 12. HERO VILLE (page-ville) — hérité, non appelé depuis page-ville.php
   (remplacé par .mp-vhero2 ci-dessus) ; conservé pour ne rien casser ailleurs. ---- */
.mp-vhero{position:relative;background:var(--ebene)}
.mp-vhero-photo{position:relative;height:560px;overflow:hidden}
.mp-vhero-photo img{width:100%;height:100%;object-fit:cover}
.mp-vhero-voile{position:absolute;inset:0;background:linear-gradient(90deg, rgba(23,21,59,.86) 0%, rgba(23,21,59,.55) 46%, rgba(23,21,59,0) 70%)}
.mp-vhero-in{position:absolute;inset:0;width:min(var(--contenu),100% - var(--gout) * 2);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1.1fr) 420px;gap:2.4rem;align-items:center;z-index:2}
.mp-vhero-texte{color:var(--ivoire)}
.mp-vhero-surtitre{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--craie)}
.mp-vhero h1{font-size:52px;line-height:1.06;margin-top:.8rem;color:var(--ivoire)}
.mp-vhero h1 .mp-ville-nom{display:block;color:var(--ivoire)}
.mp-vhero-chapo{font-family:var(--f-texte);font-style:italic;font-size:19px;line-height:1.5;color:#DCDCF2;margin-top:1rem;max-width:42ch}
.mp-vhero-pastilles{display:flex;gap:.6rem;margin-top:1.2rem}
.mp-vhero-pastilles a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:50%;border:1px solid var(--craie);color:var(--ivoire);font-family:var(--f-texte);
  font-style:italic;font-weight:700;font-size:13px}
.mp-vhero-pastilles a:hover{border-color:var(--drap);color:var(--ivoire);background:var(--drap)}
.mp-vhero-lutrin-hold{position:relative;z-index:3}
@media (max-width:1180px){ .mp-vhero-in{grid-template-columns:minmax(0,1fr) 380px} .mp-vhero h1{font-size:42px} }
@media (max-width:960px){
  .mp-vhero-photo{height:240px}
  .mp-vhero-in{position:static;display:block;padding-block:1.2rem 0}
  .mp-vhero-voile{background:linear-gradient(180deg, rgba(23,21,59,.3), rgba(23,21,59,.86))}
  .mp-vhero h1{font-size:30px}
  .mp-vhero-lutrin-hold{margin-top:1.2rem;padding-inline:var(--gout)}
  .mp-vhero-pastilles{padding-inline:var(--gout)}
}

/* repères locaux : département + 3 cartouches */
.mp-reperes{display:grid;grid-template-columns:280px 1fr;gap:2rem;align-items:center}
.mp-departement{width:100%;max-width:280px}
.mp-departement svg{width:100%;height:auto}
.mp-departement-nom{font-family:var(--f-mono);font-size:12px;color:var(--encre-douce);margin-top:.5rem;text-align:center}
.mp-reperes .mp-cartouches{grid-template-columns:repeat(3,1fr);justify-content:start}
@media (max-width:960px){
  .mp-reperes{grid-template-columns:1fr}
  .mp-departement{margin-inline:auto}
  .mp-reperes .mp-cartouches{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:600px){ .mp-reperes .mp-cartouches{grid-template-columns:1fr} .mp-cartouche{width:100%} }

/* ---------- 13. RUBRIQUE / ARCHIVE --------------------------------------------- */
.mp-rub-tete{padding-block:2.4rem 1.6rem}
.mp-rub-tete h1{font-size:44px}
.mp-rub-liste{padding-block:0 2.4rem}
.mp-rub-intro{background:var(--ivoire);padding-block:2.4rem;margin-top:1rem}
.mp-rub-intro-corps{font-size:17.5px;line-height:1.68;max-width:68ch}
.mp-pagination{display:flex;gap:.4rem;flex-wrap:wrap;padding-top:1.6rem;font-family:var(--f-mono);font-size:13px}
.mp-pagination .page-numbers{padding:.4rem .7rem;border:1px solid var(--craie);border-radius:var(--r-champ)}
.mp-pagination .current{background:var(--ebene);color:var(--ivoire);border-color:var(--ebene)}

/* accordéon générique (intro longue de rubrique, FAQ article) */
.mp-accordeon details{border-top:1px solid var(--craie);padding-block:.2rem}
.mp-accordeon details:last-child{border-bottom:1px solid var(--craie)}
.mp-accordeon summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.9rem .1rem;font-family:var(--f-titre);font-weight:600;font-size:16px;color:var(--ebene)}
.mp-accordeon summary::-webkit-details-marker{display:none}
.mp-accordeon summary::after{content:"+";font-family:var(--f-mono);color:var(--drap);font-size:20px;flex:0 0 auto}
.mp-accordeon details[open] summary::after{content:"–"}
.mp-accordeon .mp-accordeon-corps{padding:0 .1rem 1.1rem;font-size:16.5px;line-height:1.62;color:var(--ebene)}

/* ---------- 14. ARTICLE -------------------------------------------------------- */
.mp-ariane{font-family:var(--f-mono);font-size:12px;color:var(--encre-douce);padding-block:1.2rem 0}
.mp-ariane a{color:var(--encre-douce)}
.mp-ariane a:hover{color:var(--drap)}
.mp-art-tete{padding-block:1rem 0;max-width:min(880px,100%)}
.mp-art-tete h1{font-size:44px;line-height:1.1}
.mp-art-chapo{font-family:var(--f-texte);font-style:italic;font-size:21px;color:var(--encre-douce);margin-top:.9rem}

.mp-une{position:relative;max-width:1100px;height:380px;overflow:hidden;margin:1.6rem auto 0}
.mp-une img{width:100%;height:100%;object-fit:cover}
.mp-une-credit{font-family:var(--f-mono);font-size:11.5px;color:var(--encre-douce);text-align:right;
  max-width:1100px;margin:.4rem auto 0}

.mp-signature{display:flex;gap:1rem;align-items:center;background:var(--ivoire);border-radius:var(--r-carte);
  padding:1rem 1.1rem;margin-top:1.4rem;max-width:min(880px,100%)}
.mp-signature img,.mp-signature-photo{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.mp-signature-nom{font-family:var(--f-titre);font-weight:600;font-size:15.5px;color:var(--ebene)}
.mp-signature-nom a{color:var(--drap);text-decoration:underline;text-underline-offset:3px;font-size:13px;font-family:var(--f-mono);font-weight:400;margin-left:.5rem}
.mp-signature-bio{font-family:var(--f-texte);font-style:italic;font-size:14.5px;color:var(--encre-douce);margin-top:.15rem}
.mp-signature-date{font-family:var(--f-mono);font-size:11.5px;color:var(--encre-douce);margin-top:.25rem}

.mp-art-corps{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:2.4rem;align-items:start;margin-top:2rem}
.mp-cote{position:sticky;top:calc(var(--barre-h) + 16px);display:flex;flex-direction:column;gap:1.2rem}
.mp-som{background:var(--ivoire);border-radius:var(--r-carte);padding:1rem 1.1rem}
.mp-som p{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--encre-douce);margin-bottom:.6rem}
.mp-som ol li{display:flex;gap:.6rem;padding:.35rem 0;position:relative}
.mp-som-puce{flex:0 0 auto;width:14px;height:14px;position:relative;top:2px}
.mp-som-puce svg{width:100%;height:100%}
.mp-som a{font-size:14px;color:var(--ebene);line-height:1.35}
.mp-som li.is-actif .mp-som-puce{color:var(--drap)}
.mp-som li.is-actif a{color:var(--drap)}

.mp-lutrin--laterale{box-shadow:none;border:1px solid var(--craie)}
.mp-lutrin--laterale .mp-champ{margin-bottom:.7rem}

.mp-corps{max-width:min(720px,100%);font-size:18.5px;line-height:1.70;overflow-wrap:anywhere}
.mp-corps p{margin:0 0 1.15rem}
.mp-corps h2{font-size:24px;margin:2.2rem 0 .8rem;padding-top:.9rem;position:relative}
.mp-corps h2::before{content:attr(data-n);position:absolute;left:-2.6rem;top:.85rem;font-family:var(--f-mono);
  font-size:13px;color:var(--craie)}
.mp-corps h2::after{content:"";display:block;position:absolute;bottom:-.5rem;left:0;width:120px;height:1px;background:var(--craie)}
.mp-corps h3{font-family:var(--f-titre);font-size:19px;margin:1.4rem 0 .5rem}
.mp-corps ul{margin:0 0 1.15rem}
.mp-corps ul li{position:relative;padding-left:1.2rem;margin-bottom:.5rem}
.mp-corps ul li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--drap);border-radius:1px}
.mp-corps ol{list-style:decimal;margin:0 0 1.15rem;padding-left:1.4rem}
.mp-corps ol li{margin-bottom:.5rem}
.mp-corps a{color:var(--drap);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.mp-corps blockquote{margin:1.7rem 0;padding:.6rem 0 .6rem 1.2rem;border-left:3px solid var(--drap);
  font-family:var(--f-texte);font-style:italic;font-size:20px;line-height:1.45;color:var(--ebene)}
.mp-corps img{border-radius:4px;margin:1.5rem 0}
.mp-corps figcaption{font-family:var(--f-mono);font-size:11.5px;color:var(--encre-douce);margin-top:.4rem}
@media (max-width:1024px){ .mp-corps h2::before{display:none} }
@media (max-width:760px){ .mp-corps{font-size:17.5px} .mp-art-tete h1{font-size:28px} .mp-une{height:220px} }

/* infographies : check-list en tuiles, barème en barres (⛔ zéro <table>) */
.mp-checklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;margin:1.6rem 0}
.mp-check-tuile{background:var(--ivoire);border-radius:var(--r-carte);padding:1rem 1.1rem;display:flex;gap:.8rem}
.mp-check-num{font-family:var(--f-mono);font-size:13px;color:var(--drap);flex:0 0 auto}
.mp-check-tuile h4{font-family:var(--f-titre);font-size:15.5px;margin-bottom:.25rem}
.mp-check-tuile p{font-size:14.5px;color:var(--encre-douce);line-height:1.5}
@media (max-width:600px){ .mp-checklist{grid-template-columns:1fr} }

.mp-bareme{margin:1.6rem 0}
.mp-bareme-ligne{display:grid;grid-template-columns:150px 1fr 132px;gap:.8rem;align-items:center;padding-block:.5rem}
.mp-bareme-nom{font-family:var(--f-titre);font-weight:600;font-size:14.5px}
.mp-bareme-piste{height:10px;background:var(--feutre);border-radius:6px;overflow:hidden}
.mp-bareme-jauge{display:block;height:100%;background:var(--drap);border-radius:6px}
.mp-bareme-val{font-family:var(--f-mono);font-size:13.5px;text-align:right}
.mp-bareme-source{font-family:var(--f-mono);font-size:11.5px;color:var(--encre-douce);margin-top:.6rem}
@media (max-width:600px){ .mp-bareme-ligne{grid-template-columns:86px 1fr 96px;gap:.5rem} .mp-bareme-val{font-size:12px} }

.mp-encart{background:var(--feutre);border-radius:var(--r-carte);display:flex;gap:1.1rem;align-items:center;
  padding:1.1rem;margin:2rem 0}
.mp-encart-photo{width:120px;height:120px;border-radius:8px;overflow:hidden;flex:0 0 auto}
.mp-encart-photo img{width:100%;height:100%;object-fit:cover}
.mp-encart h4{font-family:var(--f-titre);font-size:17px}
.mp-encart p{font-size:14.5px;color:var(--encre-douce);margin:.3rem 0 .7rem}
.mp-encart a.mp-bouton{display:inline-block}
@media (max-width:600px){ .mp-encart{flex-direction:column;text-align:center} }

.mp-annonce{border:1px dashed var(--craie);border-radius:var(--r-carte);position:relative}
.mp-annonce .mp-etiq{position:absolute;top:.7rem;right:.9rem}

.mp-sources{background:var(--ebene);color:var(--sur-ebene);border-radius:var(--r-carte);padding:1.4rem 1.5rem;margin-top:2.2rem}
.mp-sources h2{color:var(--ivoire);font-size:19px;margin-bottom:.8rem}
.mp-sources ol li{padding:.5rem 0;border-top:1px solid #2E2C5A;font-size:14.5px}
.mp-sources ol li:first-child{border-top:0}
.mp-sources .mp-editeur{font-family:var(--f-texte);font-style:italic;color:#DCDCF2}
.mp-sources .mp-date-src{font-family:var(--f-mono);font-size:11.5px;color:#B9B8DA;margin-left:.5rem}
/* Le bloc Sources écrit en prose (un simple <p>) : même bande ébène, lisible. */
.mp-sources p{font-size:14.5px;line-height:1.6;color:var(--sur-ebene)}
.mp-sources em{font-style:normal}
.mp-sources ul{list-style:none}
.mp-sources ul li{padding:.5rem 0;border-top:1px solid #2E2C5A;font-size:14.5px}
.mp-sources ul li:first-child{border-top:0}
.mp-sources a{color:#E6E4FF;text-decoration:underline}

/* Image de respiration dans le corps d'un article (jamais l'image à la une). */
figure.sb-image-corps{margin:2rem 0}
figure.sb-image-corps img{width:100%;height:auto;max-height:420px;object-fit:cover;border-radius:var(--r-carte);display:block}
figure.sb-image-corps figcaption{font-size:13.5px;color:var(--encre-douce);margin-top:.5rem;line-height:1.45}
figure.sb-image-corps .sb-credit{font-family:var(--f-mono);font-size:11.5px}

.mp-bouton{display:inline-block;background:var(--drap);color:var(--ivoire);border:0;border-radius:var(--r-pille);
  padding:.75rem 1.3rem;font-family:var(--f-titre);font-weight:700;font-size:15px}
.mp-bouton:hover{background:var(--drap-sombre);text-decoration:none}

.mp-suite{margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--craie)}

@media (max-width:1024px){
  /* `1fr` garde un min-width:auto : un bloc large (barème, mot long) élargit
     alors TOUTE la page de quelques pixels — 27 px mesurés le 18/09 sur
     /accordage-piano-prix/ en 390 px. minmax(0,1fr) le confine. */
  .mp-art-corps{grid-template-columns:minmax(0,1fr)}
  .mp-corps,.mp-cote{min-width:0}
  .mp-cote{position:static;max-width:min(720px,100%);order:-1}
}

/* ---------- 15. PIED DE PAGE (compact) ----------------------------------------- */
.mp-pied{background:var(--ebene);color:var(--sur-ebene)}
.mp-pied-grille{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2rem;padding-block:2.6rem}
.mp-pied-marque{display:flex;align-items:center;gap:.6rem}
.mp-pied-marque .mp-logo-mot{color:var(--ivoire)}
.mp-pied-base{font-family:var(--f-texte);font-style:italic;font-size:14px;color:#B9B8DA;margin-top:.7rem;max-width:32ch}
.mp-pied h2{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:#B9B8DA;margin-bottom:.7rem}
.mp-pied-liste li{padding:.3rem 0}
.mp-pied-liste a{font-size:14.5px;color:var(--ivoire)}
.mp-pied-liste a:hover{color:var(--drap)}
.mp-ours{border-top:1px solid #2E2C5A;padding-block:1rem;display:flex;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;font-family:var(--f-mono);font-size:11.5px;color:#B9B8DA}
@media (max-width:960px){ .mp-pied-grille{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem} }
@media (max-width:600px){ .mp-pied-grille{grid-template-columns:1fr} }

/* ---------- 16. PAGE VILLES (carte de France) ---------------------------------- */
.mp-carte-france-hold{max-width:640px;margin-inline:auto;position:relative}
.mp-carte-france svg{width:100%;height:auto}
.mp-fr-ville{cursor:pointer}
.mp-fr-point{fill:var(--drap);stroke:var(--ivoire);stroke-width:1.5}
.mp-fr-point:hover{fill:var(--drap-sombre)}
.mp-fr-corse{position:relative}
.mp-liste-villes-az{columns:3;column-gap:2rem;margin-top:2.4rem}
.mp-liste-villes-az li{break-inside:avoid;padding:.35rem 0;border-bottom:1px solid var(--craie);font-size:15px}
.mp-liste-villes-az a{color:var(--ebene)}
.mp-liste-villes-az a:hover{color:var(--drap)}
@media (max-width:760px){ .mp-liste-villes-az{columns:1} }

/* ---------- 17. PAGE GÉNÉRIQUE / CONTACT / LÉGALES ----------------------------- */
.mp-page-hero{padding-block:2.6rem 1rem}
.mp-page-hero h1{font-size:40px}
.mp-page-corps{padding-block:1rem 3rem;max-width:68ch;font-size:18px;line-height:1.68}
.mp-page-corps h2{font-family:var(--f-titre);font-size:24px;margin:1.8rem 0 .7rem}
.mp-page-corps p{margin:0 0 1.1rem}
.mp-page-corps ul{margin:0 0 1.1rem}
.mp-page-corps ul li{position:relative;padding-left:1.1rem;margin-bottom:.4rem}
.mp-page-corps ul li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;background:var(--drap)}

.mp-contact-grille{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:2.2rem;padding-block:1.6rem 2.6rem;align-items:start}
.mp-contact-repere{background:var(--ivoire);border-radius:var(--r-carte);padding:1.2rem 1.3rem;margin-bottom:1rem}
.mp-contact-repere h3{font-family:var(--f-mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--encre-douce);margin-bottom:.3rem}
.mp-contact-repere p{font-size:16.5px}
@media (max-width:960px){ .mp-contact-grille{grid-template-columns:1fr} }

/* ---------- 18. TABLEAUX DU CONTENU (sécurité, ⛔ on n'en produit aucun) ------- */
.sbs_tableau{overflow-x:auto;margin:1.4rem 0;border-radius:var(--r-carte)}
.sbs_tableau table{width:100%;font-size:14px}
.sbs_tableau th,.sbs_tableau td{padding:.55rem .7rem;text-align:left;border-bottom:1px solid var(--craie);white-space:nowrap}
.sbs_tableau thead th{background:var(--ivoire);font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em}

/* ---------- 19. UTILITAIRES ----------------------------------------------------- */
.mp-cta-drap{background:var(--drap);color:var(--ivoire);border-radius:var(--r-carte);padding:2.2rem;
  display:flex;align-items:center;justify-content:space-between;gap:1.6rem;flex-wrap:wrap}
.mp-cta-drap h2{color:var(--ivoire);font-size:26px}
@media (max-width:760px){ .mp-cta-drap{flex-direction:column;text-align:center} }

[hidden]{display:none!important}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
@media print{
  .mp-entete,.mp-tempo,.mp-cote,.mp-lutrin,.mp-nav-mobile{display:none!important}
  body{background:#fff;color:#000}
}

/* --- carte de France : étiquettes de ville (contours réels des régions) --- */
.mp-fr-nom{font-family:var(--mono,ui-monospace),monospace;font-size:9px;fill:var(--ebene);letter-spacing:.02em;pointer-events:none}
.mp-fr-ville:hover .mp-fr-point{r:7.5}
.mp-fr-ville:hover .mp-fr-nom{font-weight:700}
@media (max-width:640px){.mp-fr-nom{font-size:11px}}

/* ==========================================================================
   20. CORRECTIONS — expert design, 18/09/2026 (captures 1440 / 390 px)
   ========================================================================== */
/* 18/09 expert : la note de la portée partait au bord gauche de l'écran (x=0) → posée sur la portée, au bord gauche du contenu */
@media (min-width:761px){
  .mp-charniere .mp-note{left:calc((100% - min(var(--contenu),100% - var(--gout) * 2)) / 2)}
  /* 18/09 expert : titres de section décalés de 38 px par rapport aux grilles qu'ils coiffent → alignés sur la grille */
  .mp-charniere-titre h2{margin-left:0}
}
/* 18/09 expert : la capsule département s'étirait sur toute la largeur de la carte (on aurait dit un champ) */
.mp-carte-corps > .mp-capsule{align-self:flex-start}
/* 18/09 expert : tuiles chiffres centrées alors que le titre et le texte de la bande sont alignés à gauche */
.mp-cartouches{justify-content:start}
/* 18/09 expert : en 390 px le texte des tuiles débordait du carré (« 94 € » coupé en haut, « 2027) » sorti en bas) */
@media (max-width:500px){
  .mp-cartouche{height:auto;min-height:150px;padding:1rem .6rem}
  .mp-cartouche-val{font-size:36px}
  .mp-cartouche-unite{font-size:10.5px;letter-spacing:.05em;line-height:1.5}
}
/* 18/09 expert : tuiles chiffres dans le corps d'un article : 4 colonnes de 200 px dans 720 px → débord à gauche du texte ; en mobile la 3e restait seule */
.mp-corps .mp-cartouches{grid-template-columns:repeat(auto-fit,minmax(0,200px));margin:1.6rem 0}
.mp-corps .mp-cartouche{width:100%}
@media (max-width:500px){
  .mp-corps .mp-cartouches{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
  .mp-corps .mp-cartouche{min-height:130px}
  .mp-corps .mp-cartouche-val{font-size:30px}
}
/* 18/09 expert : une seule actualité occupait 1/3 de la bande, deux tiers vides → carte couchée pleine largeur */
@media (min-width:761px){
  .mp-grille > .mp-carte:only-child{grid-column:1 / -1;flex-direction:row}
  .mp-grille > .mp-carte:only-child .mp-carte-photo{flex:0 0 46%;aspect-ratio:auto;min-height:280px}
  .mp-grille > .mp-carte:only-child .mp-carte-corps{justify-content:center;padding:1.8rem 2rem}
  .mp-grille > .mp-carte:only-child .mp-carte-titre{font-size:24px}
}
/* 18/09 expert : bande drap (« Prêt à commencer », « Écrivez-nous ») : texte décalé de 35 px par rapport au reste de la page */
.mp-bande--drap .mp-cta-drap{padding-inline:0}
/* 18/09 expert : en mobile, lutrin et pastilles pp/mf/ff avaient une double marge (32 px) au lieu de 16 px */
@media (max-width:960px){
  .mp-hero-lutrin-hold,.mp-vhero-lutrin-hold,.mp-vhero-pastilles{padding-inline:0}
}
/* 18/09 expert : bloc Sources : grand vide en haut de la bande ébène, numéro « 08 » qui dépassait, puces drap posées sur la 1re lettre */
.mp-sources h2{margin:0 0 .8rem;padding-top:0}
.mp-sources h2::before{display:none}
.mp-sources h2::after{bottom:-.35rem}
.mp-sources ul li{padding:.5rem 0 .5rem 1.1rem}
.mp-sources ul li::before{top:calc(.5rem + .62em)}
/* 18/09 expert : encadré auteur de fin d'article (bloc réseau) en bleu et gris hors palette, photo carrée, et règle sombre à neutraliser (CM-0575) */
body .sb-auteur-fin{background:var(--ivoire);border:0;border-left:3px solid var(--drap);border-radius:var(--r-carte);color:var(--ebene)}
body .sb-auteur-fin-av{border-radius:50%;object-fit:cover}
body .sb-auteur-fin-nom,body .sb-auteur-fin-nom a{font-family:var(--f-titre);color:var(--ebene)}
body .sb-auteur-fin-role{font-family:var(--f-mono);color:var(--drap)}
body .sb-auteur-fin-bio{color:var(--encre-douce);opacity:1}
body .sb-auteur-fin-lien a{color:var(--drap)}
/* 18/09 expert : page ville en mobile : la carte du département occupait tout l'écran, le nom loin sous le dessin */
@media (max-width:960px){ .mp-departement{max-width:200px} }
/* 18/09 expert : carte de France : noms coupés au bord droit (« Stra », « Nic ») et illisibles là où ils se chevauchent */
.mp-carte-france svg{overflow:visible}
.mp-fr-nom{paint-order:stroke;stroke:var(--feutre);stroke-width:3px;stroke-linejoin:round}
/* 18/09 expert : À propos : le texte centré à 395 px ne s'alignait pas sur le titre (130 px) */
.mp-page-corps.mp-wrap{max-width:none}
.mp-page-corps.mp-wrap > *{max-width:68ch}
/* 18/09 expert : « À lire aussi » (fin d'article) : les cartes touchaient le pied de page, aucun espace dessous */
.mp-suite{padding-bottom:3.4rem}
@media (max-width:760px){ .mp-suite{padding-bottom:2.2rem} }
/* 18/09 expert : page rubrique à 4 (ou 7, 10…) articles : grille 3 + 1 avec un trou de deux colonnes → la dernière carte se couche sur toute la largeur */
@media (min-width:761px){
  .mp-rub-liste .mp-grille > .mp-carte:last-child:nth-child(3n+1):not(:only-child){grid-column:1 / -1;flex-direction:row}
  .mp-rub-liste .mp-grille > .mp-carte:last-child:nth-child(3n+1):not(:only-child) .mp-carte-photo{flex:0 0 46%;aspect-ratio:auto;min-height:280px}
  .mp-rub-liste .mp-grille > .mp-carte:last-child:nth-child(3n+1):not(:only-child) .mp-carte-corps{justify-content:center;padding:1.8rem 2rem}
}

/* 18/09 orchestrateur (recapture refonte) : carte seule couchée → la photo n'avait plus de hauteur
   (aspect-ratio:auto + img height:100 %) et s'affichait vide ; bande repères ville : 2 tuiles dans
   une grille de 3 laissaient un trou → tuiles alignées à gauche, largeur fixe. */
.mp-grille > .mp-carte:only-child .mp-carte-photo img,
.mp-rub-liste .mp-grille > .mp-carte:last-child:nth-child(3n+1) .mp-carte-photo img{position:absolute;inset:0}
@media (min-width:601px){ .mp-reperes .mp-cartouches{grid-template-columns:repeat(auto-fit,200px);justify-content:start} }