/*
Theme Name: Motoréducteur 2026
Theme URI: https://motoreducteur.net
Description: Thème code pur pour motoreducteur.net — catalogue technique de motoréducteurs industriels. Feuille de calque quadrillée, bandes graphite, accent turquoise RAL 5018. Zéro framework, zéro ombre, zéro rayon.
Author: Seobooster Ltd
Version: 2026.09.17.1
Text Domain: mr-2026
*/

/* ==========================================================================
   1. POLICES — Titillium Web (titraille + corps) / Red Hat Mono (valeurs)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&family=Red+Hat+Mono:wght@400;500;700&display=swap');

/* ==========================================================================
   2. JETONS — mode clair (feuille de catalogue / carter de machine)
   ========================================================================== */
:root{
  --feuille:#FFFFFF;        /* fond de page */
  --calque:#E4EAED;         /* quadrillage 1px et filets légers */
  --tirage:#F4F8F9;         /* surface : lignes paires, encarts */
  --graphite:#1B242A;       /* bandes pleine largeur, en-têtes de table, pied de page */
  --encre:#17222A;          /* texte courant */
  --encre-douce:#59666E;    /* unités, légendes, mentions */
  --encre-claire:#A8B4BA;   /* texte secondaire sur graphite */
  --carter:#0E7C8C;         /* accent unique */
  --carter-sombre:#0A5C69;  /* survol, texte d'accent sur blanc */
  --carter-clair:#7FD4DF;   /* accent sur bande graphite uniquement */
  --rouille:#8C3B12;        /* seule couleur sémantique : incompatibilité / obsolète */

  --rayon:0;
  --filet-calque:1px solid var(--calque);
  --filet-fort:1px solid var(--graphite);
  --filet-accent:3px solid var(--carter);
  --ombre:none;
  --pas-quadrillage:32px;
  --h-ligne-matrice:44px;

  --police-corps:"Titillium Web",-apple-system,"Segoe UI",Arial,sans-serif;
  --police-mono:"Red Hat Mono","SFMono-Regular",Consolas,monospace;

  --largeur-contenu:1320px;
  --gouttiere:20px;
  --respiration:56px;
  color-scheme: light;
}

/* ==========================================================================
   3. MODE SOMBRE — Mathias travaille en sombre (P-351)
   ========================================================================== */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="clair"]){
    --feuille:#12191D;
    --calque:#2A353B;
    --tirage:#222C32;
    --graphite:#E9EEF0;
    --encre:#E9EEF0;
    --encre-douce:#9AA7AD;
    --encre-claire:#333F45;
    --carter:#7FD4DF;
    --carter-sombre:#7FD4DF;
    /* --carter-clair inversé comme --graphite/--encre-claire (bande "topbar/hero"
       toujours de la couleur --graphite, qui devient claire en sombre : il faut
       donc un accent FONCÉ ici, pas le même cyan clair qu'en fond clair — on
       reprend --carter-sombre du mode clair (#0A5C69), déjà validé AA "texte
       d'accent sur blanc", plutôt qu'inventer une teinte. 18/09/2026 : #0E7C8C
       ne passait pas l'AA petit texte sur le fond --graphite inversé (~4,2:1). */
    --carter-clair:#0A5C69;
    /* --rouille non repris ci-dessus jusqu'au 18/09/2026 : resté à sa valeur
       claire (#8C3B12), utilisé en texte fin (.req "obligatoire") sur fond
       sombre → ~2,3:1, sous l'AA 4,5:1 (retour Mathias, formulaire illisible
       en sombre). Éclairci en mélangeant avec --encre (déjà un rôle qui
       s'inverse), pas une couleur inventée. */
    --rouille: color-mix(in srgb, #8C3B12 55%, var(--encre) 45%);
    color-scheme: dark;
  }
}
[data-theme="sombre"]{
  --feuille:#12191D;
  --calque:#2A353B;
  --tirage:#222C32;
  --graphite:#E9EEF0;
  --encre:#E9EEF0;
  --encre-douce:#9AA7AD;
  --encre-claire:#333F45;
  --carter:#7FD4DF;
  --carter-sombre:#7FD4DF;
  --carter-clair:#0A5C69; /* cf. commentaire du bloc @media (prefers-color-scheme:dark) ci-dessus */
  --rouille: color-mix(in srgb, #8C3B12 55%, var(--encre) 45%); /* idem — AA .req en sombre */
  color-scheme: dark;
}

/* ==========================================================================
   4. RESET ET BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--police-corps);
  font-weight:400;
  font-size:1rem;
  line-height:1.62;
  color:var(--encre);
  background:var(--feuille);
  /* overflow-x:clip et non hidden (18/09/2026) : hidden couple overflow-x et
     overflow-y (l'axe non précisé passe en "auto" recalculé) et casse
     position:sticky pour TOUT descendant du document, dont .mr-sidebar de
     single.php/page-famille.php/page-application.php (sidebar qui "disparaît
     au scroll", retour Mathias). clip garde le même garde-fou anti-débordement
     horizontal sans ce couplage. */
  overflow-x:clip;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--carter-sombre);text-decoration:none}
a:hover{color:var(--carter)}
ul,ol{margin:0;padding:0}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--carter);outline-offset:2px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--graphite);color:var(--feuille);padding:10px 18px;z-index:200}
.skip-link:focus{left:12px;top:12px}

/* ==========================================================================
   5. QUADRILLAGE DE CALQUE — la matière du site, sur toute la page
   ========================================================================== */
body{
  background-image:
    repeating-linear-gradient(to right, var(--calque) 0 1px, transparent 1px var(--pas-quadrillage)),
    repeating-linear-gradient(to bottom, var(--calque) 0 1px, transparent 1px var(--pas-quadrillage));
  background-attachment:local;
}
/* Zones de lecture longue : fond plein pour ne pas gêner le texte */
.mr-lecture{background:var(--feuille)}

/* ==========================================================================
   6. TYPOGRAPHIE
   ========================================================================== */
h1,h2,h3,h4{font-family:var(--police-corps);font-weight:700;color:var(--encre);margin:0 0 .5em}
h1{font-size:clamp(2.1rem,4vw,3.2rem);line-height:1.08;letter-spacing:-0.01em}
h2{font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1.16}
h2 .mr-num{font-family:var(--police-mono);font-weight:500;color:var(--carter);font-size:.55em;display:block;letter-spacing:.08em;margin-bottom:.3em}
h3{font-size:1.1875rem;font-weight:600}
h4{font-size:1rem;font-weight:600}
p{margin:0 0 1em;max-width:72ch}
.mr-unite{font-family:var(--police-mono);font-size:.75rem;letter-spacing:.02em;color:var(--encre-douce)}
.mr-eyebrow{font-family:var(--police-mono);font-weight:700;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--carter);display:inline-block;margin-bottom:.6em}
.mr-lead{font-size:1.1rem;color:var(--encre-douce);max-width:62ch}
.mr-ink-douce{color:var(--encre-douce)}

/* ==========================================================================
   7. MISE EN PAGE
   ========================================================================== */
.mr-wrap{max-width:var(--largeur-contenu);margin:0 auto;padding:0 24px}
.mr-section{padding:var(--respiration) 0}
.mr-section--graphite{background:var(--graphite);color:var(--feuille)}
.mr-section--graphite h2,.mr-section--graphite h3{color:var(--feuille)}
.mr-section--tirage{background:var(--tirage)}
.mr-section-head{max-width:64ch;margin-bottom:32px}
.mr-section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.mr-crumb{font-family:var(--police-mono);font-size:.75rem;color:var(--encre-douce);display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.mr-crumb a{color:var(--encre-douce)}
.mr-crumb a:hover{color:var(--carter)}

/* ==========================================================================
   8. BARRE DE RÉFÉRENCE — section 0 de l'accueil, collante
   ========================================================================== */
.mr-topbar{
  position:sticky;top:0;z-index:60;
  background:var(--graphite);color:var(--encre-claire);
  height:40px;display:flex;align-items:center;
  font-family:var(--police-mono);font-size:.75rem;
}
.mr-topbar .mr-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%}
.mr-topbar-search{
  background:transparent;border:none;border-bottom:2px solid var(--carter);
  color:var(--feuille);font-family:var(--police-mono);font-size:.75rem;
  padding:6px 2px;width:220px;max-width:44vw;
}
.mr-topbar-search::placeholder{color:var(--encre-claire)}
.mr-topbar-range{white-space:nowrap;letter-spacing:.02em}
.mr-topbar-range strong{color:var(--carter-clair)}

/* ==========================================================================
   9. EN-TÊTE / NAVIGATION
   ========================================================================== */
.mr-header{
  position:sticky;top:40px;z-index:59;
  background:var(--feuille);
  border-bottom:var(--filet-calque);
}
.mr-header-inner{
  max-width:var(--largeur-contenu);margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.mr-brand{display:flex;align-items:center;gap:10px}
.mr-brand svg{width:34px;height:34px;flex:none;color:var(--encre)}
.mr-brand-word{font-family:var(--police-corps);font-weight:700;font-size:1.05rem;letter-spacing:-0.01em;color:var(--encre)}
.mr-nav{display:flex;align-items:center;gap:22px;list-style:none;margin:0;padding:0}
.mr-nav a{font-size:.9rem;font-weight:600;color:var(--encre)}
.mr-nav a:hover,.mr-nav a.is-current{color:var(--carter-sombre)}
.mr-header-actions{display:flex;align-items:center;gap:14px}
.mr-nav-toggle{display:none;background:none;border:var(--filet-fort);width:42px;height:42px;align-items:center;justify-content:center}
.mr-nav-toggle-bars,.mr-nav-toggle-bars::before,.mr-nav-toggle-bars::after{content:"";display:block;width:20px;height:2px;background:var(--encre)}
.mr-nav-toggle-bars::before{transform:translateY(-6px)}
.mr-nav-toggle-bars::after{transform:translateY(4px)}
.mr-mobile-panel{display:none}

/* ==========================================================================
   10. BANDEAU COURT — plafonné à 300px, jamais plus
   ========================================================================== */
.mr-hero{
  position:relative;height:300px;width:100%;overflow:hidden;
  border-bottom:var(--filet-fort);
  background:var(--graphite);
}
.mr-hero-media{position:absolute;inset:0}
.mr-hero-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.55) contrast(1.08);opacity:.55}
.mr-hero-media .mr-figure-fallback{position:absolute;inset:0;background:
  repeating-linear-gradient(115deg, rgba(233,238,240,.06) 0 2px, transparent 2px 14px);
}
.mr-hero-credit{position:absolute;right:10px;bottom:8px;z-index:2;font-family:var(--police-mono);font-size:.65rem;color:rgba(233,238,240,.55);letter-spacing:.02em}
.mr-hero-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;max-width:var(--largeur-contenu);margin:0 auto;padding:0 24px}
.mr-hero-content h1{color:var(--feuille);max-width:9.5em}
.mr-hero-content p{color:var(--encre-claire);margin:.4em 0 0;max-width:44ch}

/* ==========================================================================
   11. LA MATRICE DE SÉLECTION — le geste signature
   ========================================================================== */
.mr-matrix-section{padding:40px 0 var(--respiration)}
.mr-matrix-filters{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px;padding:0 24px;max-width:var(--largeur-contenu);margin-left:auto;margin-right:auto}
.mr-filter-btn{
  font-family:var(--police-mono);font-size:.75rem;font-weight:500;letter-spacing:.04em;
  background:var(--feuille);border:var(--filet-fort);color:var(--encre);
  padding:8px 16px;border-bottom:3px solid transparent;
}
.mr-filter-btn[aria-pressed="true"]{border-bottom:3px solid var(--carter);color:var(--carter-sombre)}

.mr-matrix-wrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:0 24px;position:relative;
}
.mr-matrix-inner{position:relative;width:max-content;margin:0 auto}
.mr-matrix{
  border-collapse:collapse;margin:0 auto;
  font-family:var(--police-mono);
  min-width:920px;
}
/* Le croisement de cotation : deux traits pleins depuis la cellule active
   jusqu'aux deux en-têtes (DIRECTION-ARTISTIQUE.md §7). Géométrie posée par
   assets/site.js::initMatrice (largeur/position calculées par cellule). */
.mr-cota-h,.mr-cota-v{position:absolute;background:var(--carter);pointer-events:none;z-index:18}
.mr-cota-h{height:2px}
.mr-cota-v{width:2px}
.mr-matrix caption{text-align:left;font-family:var(--police-corps);font-size:.85rem;color:var(--encre-douce);padding:0 0 10px}
.mr-matrix th,.mr-matrix td{border:1px solid var(--calque);height:var(--h-ligne-matrice);padding:0 10px;text-align:right;white-space:nowrap}
.mr-matrix thead th{
  position:sticky;top:80px;z-index:20;
  background:var(--graphite);color:var(--encre-claire);
  font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  border-bottom:var(--filet-accent);text-align:center;
}
.mr-matrix thead th:first-child{position:sticky;left:0;top:80px;z-index:22;background:var(--graphite)}
.mr-matrix tbody th[scope="row"]{
  position:sticky;left:0;z-index:15;background:var(--feuille);
  border-right:var(--filet-fort);text-align:left;font-weight:700;color:var(--encre);
}
.mr-matrix tbody tr:nth-child(even) td,.mr-matrix tbody tr:nth-child(even) th[scope="row"]{background:var(--tirage)}
.mr-matrix tbody tr:nth-child(even) td.is-active,.mr-matrix tbody tr:nth-child(even) th.is-active{background:var(--tirage)}

.mr-matrix td{font-size:.8125rem;font-weight:500;font-variant-numeric:tabular-nums;color:var(--encre)}
.mr-matrix td.mr-vide{color:var(--encre-douce);text-align:center;font-weight:400}
.mr-ref{display:inline-flex;align-items:center;gap:6px;justify-content:flex-end}
.mr-ref-square{width:8px;height:8px;background:var(--carter);flex:none}
.mr-ref.is-obsolete .mr-ref-square{background:var(--rouille)}
.mr-ref.is-obsolete .mr-ref-code{color:var(--rouille);text-decoration:line-through}

.mr-matrix td.mr-filtered-out{opacity:.22}
.mr-matrix td[tabindex],.mr-matrix th[tabindex]{cursor:pointer}
.mr-matrix td.is-active,.mr-matrix th.is-active{
  background:var(--feuille);color:var(--carter-sombre);
  outline:2px solid var(--carter);outline-offset:-2px;position:relative;
}
.mr-matrix thead th.is-active{background:var(--feuille);color:var(--carter-sombre)}
.mr-matrix tbody th.is-active{color:var(--carter-sombre)}
.mr-matrix tbody tr.mr-row-active td,.mr-matrix tbody tr.mr-row-active th{background:var(--tirage)}
.mr-matrix col.mr-col-active{background:var(--tirage)}

.mr-matrix-readline{
  max-width:var(--largeur-contenu);margin:18px auto 0;padding:0 24px;
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
}
.mr-matrix-readline-txt{font-family:var(--police-mono);font-size:.8125rem;color:var(--encre-douce)}
.mr-matrix-readline-txt strong{color:var(--carter-sombre);font-weight:700}
.mr-matrix-scroll{height:2px;background:var(--calque);margin:10px 24px 0;max-width:calc(var(--largeur-contenu) - 48px);margin-left:auto;margin-right:auto}
.mr-matrix-scroll i{display:block;height:2px;background:var(--carter);width:20%}

@media (prefers-reduced-motion: reduce){
  .mr-matrix td,.mr-matrix th{transition:none}
}

/* ==========================================================================
   12. LES QUATRE VALEURS QUI DÉCIDENT
   ========================================================================== */
.mr-tiles{display:grid;grid-template-columns:repeat(4,1fr);max-width:var(--largeur-contenu);margin:0 auto;padding:0 24px}
.mr-tile{padding:0 24px;border-left:var(--filet-calque)}
.mr-tile:first-child{border-left:none;padding-left:0}
.mr-tile-value{font-family:var(--police-mono);font-weight:700;font-size:clamp(1.6rem,3.4vw,2.4rem);color:var(--encre);display:block;line-height:1.05}
.mr-tile-value .mr-unite{font-family:var(--police-corps);font-size:.5em;color:var(--encre-douce);margin-left:.2em}
.mr-tile-label{font-size:.85rem;color:var(--encre-douce);margin-top:.4em}

/* ==========================================================================
   13. BANDES DES FAMILLES MÉCANIQUES
   ========================================================================== */
.mr-family-band{border-top:var(--filet-calque)}
.mr-family-band:last-child{border-bottom:var(--filet-calque)}
.mr-family-band--graphite{background:var(--graphite);color:var(--feuille)}
.mr-family-band--graphite h3,.mr-family-band--graphite .mr-family-code{color:var(--feuille)}
.mr-family-band--graphite .mr-family-mini-table th,.mr-family-band--graphite .mr-family-mini-table td{border-color:#333f45;color:var(--encre-claire)}
.mr-family-band-inner{display:grid;grid-template-columns:4fr 8fr;gap:32px;max-width:var(--largeur-contenu);margin:0 auto;padding:40px 24px;align-items:center}
.mr-family-media{aspect-ratio:4/3;max-width:260px;border:var(--filet-fort);overflow:hidden}
.mr-family-media .mr-figure{height:100%;display:flex;flex-direction:column}
.mr-family-media img{width:100%;flex:1 1 auto;min-height:0;object-fit:cover;filter:grayscale(.55) contrast(1.08)}
.mr-family-code{font-family:var(--police-mono);font-weight:700;color:var(--carter);letter-spacing:.06em;font-size:.75rem;display:block;margin-bottom:.4em}
.mr-family-mini-table{width:100%;border-collapse:collapse;margin-top:14px;font-family:var(--police-mono);font-size:.8125rem}
.mr-family-mini-table th,.mr-family-mini-table td{text-align:left;padding:6px 10px 6px 0;border-top:1px solid var(--calque)}
.mr-family-mini-table th{font-weight:500;color:var(--encre-douce);width:40%}
.mr-family-link{display:inline-block;margin-top:14px;font-weight:600;font-size:.9rem}

/* ==========================================================================
   14. PLANCHE DES FORMES DE MONTAGE
   ========================================================================== */
.mr-mount-board{background:var(--tirage)}
.mr-mount-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--calque);border:var(--filet-calque);max-width:var(--largeur-contenu);margin:0 auto}
.mr-mount-item{background:var(--feuille);border:none;padding:22px 10px;display:flex;flex-direction:column;align-items:center;gap:8px}
.mr-mount-item svg{width:64px;height:64px;color:var(--encre)}
.mr-mount-item[aria-pressed="true"]{background:var(--tirage);outline:2px solid var(--carter);outline-offset:-2px}
.mr-mount-item-label{font-family:var(--police-mono);font-weight:700;font-size:.8125rem}

/* ==========================================================================
   15. COMMENT ON CHOISIT — étapes + encart de calcul
   ========================================================================== */
.mr-choose{display:grid;grid-template-columns:7fr 5fr;gap:48px;max-width:var(--largeur-contenu);margin:0 auto;padding:0 24px;align-items:start}
.mr-choose-steps{counter-reset:mrstep}
.mr-choose-step{border-top:var(--filet-calque);padding:20px 0;display:flex;gap:18px}
.mr-choose-step:first-child{border-top:none}
.mr-choose-step-num{font-family:var(--police-mono);font-weight:700;color:var(--carter);font-size:1.1rem;flex:none;width:1.6em}
.mr-calc{position:sticky;top:96px;border:var(--filet-fort);padding:24px;background:var(--feuille)}
.mr-calc h3{margin-bottom:16px}
.mr-calc-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.mr-calc-row label{font-family:var(--police-mono);font-size:.75rem;color:var(--encre-douce);width:8em}
.mr-calc-row input{flex:1;font-family:var(--police-mono);border:var(--filet-fort);padding:8px 10px;background:var(--feuille);color:var(--encre)}
.mr-calc-result{font-family:var(--police-mono);font-weight:700;font-size:1.4rem;border-top:var(--filet-calque);padding-top:14px;margin-top:6px}

/* ==========================================================================
   16. REPÈRES DE SÉRIE
   ========================================================================== */
.mr-series{background:var(--graphite);color:var(--encre-claire)}
.mr-series-list{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 32px;max-width:var(--largeur-contenu);margin:0 auto;padding:0 24px;list-style:none}
.mr-series-item{display:flex;align-items:center;gap:8px;font-family:var(--police-mono);font-size:.8125rem;padding:6px 0;border-bottom:1px solid #2a353b}
.mr-series-sq{width:8px;height:8px;background:var(--carter);flex:none}

/* ==========================================================================
   17. DOCUMENTATION
   ========================================================================== */
.mr-doc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:var(--largeur-contenu);margin:0 auto;padding:0 24px}
.mr-doc-card{border:var(--filet-calque);padding:0}
.mr-doc-card-media{aspect-ratio:21/9;border-bottom:var(--filet-fort);overflow:hidden;background:var(--tirage);display:flex;align-items:center;justify-content:center}
.mr-doc-card-media svg{width:70%;height:70%;color:var(--encre)}
.mr-doc-card-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.55) contrast(1.08)}
.mr-doc-card-body{padding:20px}

/* ==========================================================================
   18. DEMANDE DE CHIFFRAGE
   ========================================================================== */
.mr-devis{display:grid;grid-template-columns:5fr 7fr;gap:40px;max-width:var(--largeur-contenu);margin:0 auto;padding:0 24px;align-items:start}
.mr-devis-media{border:var(--filet-fort);aspect-ratio:4/5;overflow:hidden}
.mr-devis-media .mr-figure{height:100%;display:flex;flex-direction:column}
.mr-devis-media img{width:100%;flex:1 1 auto;min-height:0;object-fit:cover;filter:grayscale(.55) contrast(1.08)}
/* .mr-devis-form / .mr-field-grid retirés (PORTAGE-MR-2026, 17/09/2026) :
   propres à l'ancien template-parts/devis-form.php, remplacé partout par
   template-parts/quiz-form.php (.mr-quiz, .mr-quiz-champs-libres, §33). */

/* ==========================================================================
   19. CHAMPS
   ========================================================================== */
.mr-field{margin-bottom:0}
.mr-field label{display:block;font-family:var(--police-mono);font-size:.75rem;letter-spacing:.02em;color:var(--encre-douce);margin-bottom:6px}
.mr-field .req{color:var(--rouille)}
.mr-field input,.mr-field select,.mr-field textarea{
  width:100%;height:44px;border:var(--filet-fort);background:var(--feuille);color:var(--encre);
  padding:0 12px;font-family:var(--police-corps);font-size:.95rem;border-radius:0;
}
.mr-field textarea{height:auto;min-height:96px;padding:10px 12px}
.mr-field input:focus,.mr-field select:focus,.mr-field textarea:focus{outline:none;border:var(--filet-accent)}
.mr-field-hint{font-size:.75rem;color:var(--encre-douce);font-weight:400}
.mr-rgpd{font-size:.8rem;color:var(--encre-douce);margin-top:14px}
.mr-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mr-form-success{display:none;border:var(--filet-fort);padding:22px;text-align:center}
.mr-form-success .mr-check{font-size:1.6rem;color:var(--carter-sombre)}

/* ==========================================================================
   20. BOUTONS
   ========================================================================== */
.mr-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--graphite);color:var(--feuille);
  font-family:var(--police-corps);font-weight:600;font-size:.9rem;
  padding:12px 24px;border:1px solid var(--graphite);border-radius:0;
}
.mr-btn:hover{background:var(--carter-sombre);border-color:var(--carter-sombre);color:var(--feuille)}
.mr-btn--outline{background:var(--feuille);color:var(--encre);border:var(--filet-fort)}
.mr-btn--outline:hover{border-color:var(--carter-sombre);color:var(--carter-sombre);background:var(--feuille)}
.mr-btn--full{width:100%;justify-content:center}
.mr-btn:disabled{opacity:.6;cursor:default}

/* ==========================================================================
   21. GRILLE D'ARTICLES / CARTES
   ========================================================================== */
.mr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.mr-card{border:var(--filet-calque);display:flex;flex-direction:column}
.mr-card-media{aspect-ratio:3/2;overflow:hidden;border-bottom:var(--filet-fort);background:var(--tirage)}
.mr-card-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.4) contrast(1.05)}
.mr-card-body{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.mr-card-cat{font-family:var(--police-mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--carter-sombre)}
.mr-card h3{font-size:1.05rem;margin:0}
.mr-card-meta{font-family:var(--police-mono);font-size:.7rem;color:var(--encre-douce);margin-top:auto}

/* ==========================================================================
   22. ARTICLE / SINGLE
   ========================================================================== */
.mr-article-head{max-width:78ch}
.mr-article-meta{display:flex;gap:10px;flex-wrap:wrap;font-family:var(--police-mono);font-size:.75rem;color:var(--encre-douce);margin-top:10px}
.mr-article-hero-img{max-height:440px;overflow:hidden;border:var(--filet-fort);margin:2rem 0 2.2rem} /* était 24px 0 (18/09/2026) : image trop collée au bloc de titre, retour Mathias — pas d'ombre ajoutée, --ombre:none reste respecté */
.mr-article-hero-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.05)}
.mr-article-layout{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:start}
.mr-article-body{max-width:72ch;min-width:0} /* min-width:0 ajouté (18/09/2026) : sans lui, un item de grille dont le seul frein est max-width se voit sizé par Chromium sur son max-content (72ch = 645px) même dans une colonne 1fr de 342px sous 1080px — débordement horizontal détecté par capture (390→669px) sur single.php/page-famille.php/page-application.php, qui partagent .mr-article-layout/.mr-article-body */
.mr-article-body h2{margin-top:1.6em}
.mr-article-body figure.body-figure{margin:1.6em 0;border:var(--filet-fort)}
.mr-article-body figure.body-figure img{filter:grayscale(.4) contrast(1.05)}
.mr-article-body figcaption{font-family:var(--police-mono);font-size:.75rem;color:var(--encre-douce);padding:8px 12px;border-top:var(--filet-calque)}
.mr-sidebar{position:sticky;top:96px;display:flex;flex-direction:column;gap:20px}
.mr-sidebar-card{border:var(--filet-fort);padding:20px}
.mr-sidebar-quiz .mr-sidebar-card-title{margin-bottom:14px}
.mr-sidebar-quiz .mr-quiz--compact{padding:20px}
.mr-sidebar-card-title{font-size:.9rem;text-transform:uppercase;letter-spacing:.06em;font-family:var(--police-mono);font-weight:700;color:var(--encre-douce);margin-bottom:14px}
.mr-toc ol{list-style:none;counter-reset:toc;display:flex;flex-direction:column;gap:8px}
.mr-toc li{counter-increment:toc;font-size:.85rem}
.mr-toc li::before{content:counter(toc)" — ";font-family:var(--police-mono);color:var(--carter)}
.mr-author-box{display:flex;gap:16px;align-items:flex-start;border:var(--filet-fort);padding:20px;margin-top:32px}
.mr-author-logo{width:40px;height:40px;flex:none;color:var(--encre)}
.mr-author-box h4{margin-bottom:4px}

/* ==========================================================================
   23. PIED DE PAGE
   ========================================================================== */
.mr-cta-band{background:var(--carter-sombre);color:var(--feuille);padding:36px 0;text-align:center}
.mr-cta-band h2{color:var(--feuille)}
.mr-cta-band p{color:#DDEEF0;margin:0 auto 20px;max-width:56ch}
.mr-cta-band .mr-btn{background:var(--graphite);border-color:var(--graphite)}
.mr-cta-band .mr-btn:hover{background:var(--feuille);color:var(--encre);border-color:var(--feuille)}

.mr-footer{background:var(--graphite);color:var(--encre-claire);border-top:var(--filet-accent)}
.mr-footer-cols{display:grid;grid-template-columns:1.6fr repeat(5,1fr);gap:24px;max-width:var(--largeur-contenu);margin:0 auto;padding:48px 24px 32px}
.mr-footer-col h4{color:var(--feuille);font-size:.8125rem;text-transform:uppercase;letter-spacing:.08em;font-family:var(--police-mono);margin-bottom:14px}
.mr-footer-col ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.mr-footer-col a{color:var(--encre-claire);font-family:var(--police-mono);font-size:.8125rem}
.mr-footer-col a:hover{color:var(--carter-clair)}
.mr-footer-brand svg{width:36px;height:36px;color:var(--feuille);margin-bottom:12px}
.mr-footer-note{font-size:.85rem;color:var(--encre-claire);max-width:34ch}
.mr-footer-bottom{border-top:1px solid #2a353b;padding:18px 24px;max-width:var(--largeur-contenu);margin:0 auto;font-family:var(--police-mono);font-size:.75rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* ==========================================================================
   24. TABLE DE CARACTÉRISTIQUES (page famille) — même langage que la matrice
   ========================================================================== */
.mr-spec-table{width:100%;border-collapse:collapse;font-family:var(--police-mono);font-size:.875rem;margin:24px 0}
.mr-spec-table th,.mr-spec-table td{border:1px solid var(--calque);padding:12px 14px;text-align:left;vertical-align:top}
.mr-spec-table tbody tr:nth-child(even){background:var(--tirage)}
.mr-spec-table th{width:34%;font-weight:700;color:var(--encre-douce);background:var(--graphite);color:var(--encre-claire)}
.mr-spec-note{font-size:.8rem;color:var(--encre-douce);border-left:var(--filet-accent);padding-left:14px;margin:16px 0}

/* ==========================================================================
   25. TABLEAUX DU CORPS DE PAGE (enveloppe du socle, cf. socle-mobile.php)
   ========================================================================== */
.sbs_tableau{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.4em 0;border:var(--filet-calque)}
.sbs_tableau table{min-width:32rem;width:100%;border-collapse:collapse;font-family:var(--police-mono);font-size:.85rem}
.sbs_tableau th,.sbs_tableau td{border:1px solid var(--calque);padding:10px 12px;text-align:left}
.sbs_tableau thead th{background:var(--graphite);color:var(--encre-claire);border-bottom:var(--filet-accent)}
.sbs_tableau tbody tr:nth-child(even){background:var(--tirage)}

/* ==========================================================================
   26. SCHÉMAS SVG — trait au fil du mode (currentColor), accent turquoise fixe
   ========================================================================== */
.mr-schema{width:100%;height:auto;color:var(--encre)}
.mr-schema-label{font-family:var(--police-mono);font-size:9px;fill:var(--encre-douce)}
.mr-schema-box{border:var(--filet-calque);background:var(--feuille);padding:16px}

/* ==========================================================================
   27. FIGURES / PLACEHOLDERS PHOTO
   ========================================================================== */
.mr-figure{border:var(--filet-fort);overflow:hidden;margin:0}
.mr-figure img{filter:grayscale(.55) contrast(1.08)}
/* Emplacement d'attente neutre, SANS texte visible : la photo manquante est
   documentée en commentaire HTML (cf. template-parts/figure-photo.php),
   jamais affichée comme un artefact de fabrication ("TODO", "VISUEL"). */
.mr-figure-empty{
  aspect-ratio:4/3;background:var(--tirage);
  background-image:repeating-linear-gradient(135deg, var(--calque) 0 1px, transparent 1px 12px);
}
.mr-figure-empty.is-21-5{aspect-ratio:21/5}
.mr-figure-empty.is-3-2{aspect-ratio:3/2}
.mr-figure-empty.is-4-5{aspect-ratio:4/5}
.mr-figure figcaption{font-family:var(--police-mono);font-size:.7rem;color:var(--encre-douce);padding:8px 10px;border-top:var(--filet-calque)}

/* ==========================================================================
   28. UTILITAIRES
   ========================================================================== */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}}
.mr-empty{border:var(--filet-calque);padding:40px 24px;text-align:center}
.mr-visually-hidden{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mr-topbar-form{display:flex}
.mr-404-code{font-family:var(--police-mono);font-weight:700;font-size:5rem;color:var(--calque);line-height:1}

/* ==========================================================================
   29. 404
   ========================================================================== */
.mr-404{max-width:60ch;margin:0 auto;text-align:center;padding:var(--respiration) 0}
.mr-404 .mr-cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:20px}

/* ==========================================================================
   30. RESPONSIVE — jusqu'à 390px, matrice utilisable partout
   ========================================================================== */
@media (max-width: 1080px){
  .mr-family-band-inner{grid-template-columns:1fr}
  .mr-family-media{max-width:220px}
  .mr-choose{grid-template-columns:1fr}
  .mr-calc{position:static}
  .mr-devis{grid-template-columns:1fr}
  .mr-tiles{grid-template-columns:repeat(2,1fr);row-gap:24px}
  .mr-tile:nth-child(3){border-left:none}
  .mr-footer-cols{grid-template-columns:repeat(3,1fr)}
  .mr-article-layout{grid-template-columns:1fr}
  .mr-sidebar{position:static}
  .mr-grid{grid-template-columns:repeat(2,1fr)}
  .mr-doc-grid{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .mr-nav{display:none}
  .mr-nav-toggle{display:flex}
  .mr-header-actions .mr-btn{display:none}
  .mr-mobile-panel{
    display:block;position:fixed;inset:0;top:80px;background:var(--graphite);
    transform:translateX(100%);transition:transform .28s ease;z-index:80;
    padding:28px 24px;overflow-y:auto;
  }
  .mr-mobile-panel.is-open{transform:translateX(0)}
  .mr-mobile-panel a{display:block;color:var(--feuille);font-size:1.1rem;padding:12px 0;border-bottom:1px solid #2a353b}
  .mr-mobile-panel .mr-btn{margin-top:20px}
  .mr-topbar-search{width:120px}
  .mr-mount-grid{grid-template-columns:repeat(3,1fr)}
  .mr-footer-cols{grid-template-columns:repeat(2,1fr)}
  .mr-series-list{grid-template-columns:1fr}
  .mr-grid{grid-template-columns:1fr}
  h1{max-width:none}
}
@media (max-width: 480px){
  .mr-hero-content h1{font-size:1.7rem}
  .mr-tiles{grid-template-columns:1fr 1fr;padding:0 24px}
  .mr-tile{border-left:none;padding:0;border-top:var(--filet-calque);padding-top:14px}
  .mr-tile:nth-child(-n+2){border-top:none;padding-top:0}
  .mr-mount-grid{grid-template-columns:repeat(2,1fr)}
  .mr-field-grid{grid-template-columns:1fr}
  .mr-footer-cols{grid-template-columns:1fr 1fr}
  .mr-matrix thead th,.mr-matrix tbody th[scope="row"]{top:auto}
  .mr-matrix thead th{position:sticky;top:0}
  .mr-header{top:0}
  .mr-topbar{position:static}
}

/* Cible tactile plus haute sur la matrice, en mobile (cf. DIRECTION §7) */
@media (max-width: 760px){
  .mr-matrix{--h-ligne-matrice:48px}
}

/* ==========================================================================
   31. CARTE ÎLE-DE-FRANCE — portage bobinagepompe.com (template-parts/carte-idf.php),
   redessinée dans le registre feuille/quadrillage/graphite/turquoise ≤2%.
   data/local.json est vide pour l'instant : cette section ne rend rien tant
   qu'aucune commune n'est publiée (cf. le gabarit, `return;` anticipé).
   ========================================================================== */
.mr-carte-layout{display:grid;grid-template-columns:26rem 1fr;gap:32px;align-items:start}
.mr-carte-map-wrap{background:var(--feuille);border:var(--filet-fort);padding:20px 20px 14px}
@media (min-width:901px){.mr-carte-map-wrap{position:sticky;top:96px}}
.mr-carte-svg{display:block;width:100%;height:auto;overflow:visible}
.mr-carte-maps{display:flex;flex-direction:column;gap:18px;align-items:center}
.mr-carte-zoom-block,.mr-carte-main-block{width:100%;min-width:0}
@media (min-width:901px){.mr-carte-main-block{max-width:15rem}
.mr-carte-main-block--seule{max-width:36rem}}
.mr-carte-svg-vue{background:var(--tirage)}
.mr-carte-mini-titre{margin:0 0 8px;font-family:var(--police-mono);font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--carter-sombre);text-align:center}
.mr-carte-svg-zoom{background:var(--tirage)}

.mr-carte-dept path{fill:var(--tirage);stroke:var(--graphite);stroke-width:1.2;cursor:pointer}
.mr-carte-dept:hover path,.mr-carte-dept:focus path{fill:color-mix(in srgb, var(--carter) 20%, var(--feuille));stroke:var(--carter-sombre);stroke-width:1.6}
.mr-carte-dept:focus{outline:2px solid var(--carter);outline-offset:2px}
/* Département sans page publiée (repli) : même contour, non cliquable — PORTAGE-MR-2026 17/09/2026 */
path.mr-carte-dept--repli{fill:var(--tirage);stroke:var(--graphite);stroke-width:1.2;cursor:default}
.mr-carte-dept-label{font:700 11px var(--police-mono);fill:var(--encre);text-anchor:middle;pointer-events:none;paint-order:stroke;stroke:var(--feuille);stroke-width:4px;stroke-linejoin:round}
.mr-carte-dept-contexte{fill:var(--tirage);stroke:var(--calque);stroke-width:1px;pointer-events:none;opacity:.6}
.mr-carte-dept-label--contexte{font:700 9.5px var(--police-mono);fill:var(--encre-douce);stroke-width:3.5px}

.mr-carte-hit{fill:transparent;pointer-events:all}
.mr-carte-point{fill:var(--carter);stroke:var(--feuille);stroke-width:1.5;transform-box:fill-box;transform-origin:center;transition:transform .15s ease,fill .15s ease;pointer-events:none}
.mr-carte-commune{cursor:pointer}
.mr-carte-commune:hover .mr-carte-point,.mr-carte-commune:focus .mr-carte-point,.mr-carte-commune:focus-within .mr-carte-point,.mr-carte-commune.mr-carte-open .mr-carte-point{fill:var(--carter-sombre);transform:scale(1.6)}
.mr-carte-commune:focus .mr-carte-hit,.mr-carte-commune:focus-within .mr-carte-hit,.mr-carte-commune.mr-carte-open .mr-carte-hit{fill:color-mix(in srgb, var(--carter) 14%, transparent);stroke:var(--carter);stroke-width:1.5}
.mr-carte-commune:focus{outline:none}

.mr-carte-bulle{opacity:0;pointer-events:none;transition:opacity .15s ease;overflow:visible}
.mr-carte-bulle-in,.mr-carte-bulle-in *{pointer-events:none}
.mr-carte-commune:hover .mr-carte-bulle,.mr-carte-commune:focus .mr-carte-bulle,.mr-carte-commune:focus-within .mr-carte-bulle,.mr-carte-commune.mr-carte-open .mr-carte-bulle{opacity:1;pointer-events:auto}
.mr-carte-commune:hover .mr-carte-bulle-in,.mr-carte-commune:hover .mr-carte-bulle-in *,
.mr-carte-commune:focus .mr-carte-bulle-in,.mr-carte-commune:focus .mr-carte-bulle-in *,
.mr-carte-commune:focus-within .mr-carte-bulle-in,.mr-carte-commune:focus-within .mr-carte-bulle-in *,
.mr-carte-commune.mr-carte-open .mr-carte-bulle-in,.mr-carte-commune.mr-carte-open .mr-carte-bulle-in *{pointer-events:auto}
.mr-carte-bulle-in{font-family:var(--police-corps);background:var(--graphite);color:var(--feuille);padding:9px 10px;font-size:13px;line-height:1.35;box-sizing:border-box;width:100%;height:100%;border:1px solid var(--graphite)}
.mr-carte-bulle-in strong{display:block;font-family:var(--police-mono);color:var(--feuille);font-size:12px;margin-bottom:5px}
.mr-carte-bulle-liens{display:flex;gap:6px;flex-wrap:wrap}
.mr-carte-bulle-liens a{display:inline-block;background:var(--carter);color:var(--graphite);text-decoration:none;font-family:var(--police-mono);font-weight:700;font-size:11px;padding:4px 8px;white-space:nowrap}
.mr-carte-bulle-liens a:hover,.mr-carte-bulle-liens a:focus{background:var(--carter-clair)}

.mr-carte-legende{margin:12px 2px 0;font-family:var(--police-mono);font-size:.75rem;color:var(--encre-douce);min-height:1.2em}

.mr-carte-liste{display:flex;flex-direction:column;gap:10px}
.mr-carte-liste--renvoi{background:var(--feuille);border:var(--filet-fort);padding:26px 24px;text-align:center}
.mr-carte-liste--renvoi p{color:var(--encre-douce);margin-bottom:16px}

.mr-carte-dept-acc{background:var(--feuille);border:var(--filet-calque)}
.mr-carte-dept-acc summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;padding:14px 18px;font-weight:600;font-size:.94rem;color:var(--encre)}
.mr-carte-dept-acc summary::-webkit-details-marker{display:none}
.mr-carte-dept-acc summary::after{content:"–";margin-left:auto;color:var(--carter);font-family:var(--police-mono);font-weight:700;font-size:1.1rem}
.mr-carte-dept-acc:not([open]) summary::after{content:"+"}
.mr-carte-dept-num{display:inline-flex;align-items:center;justify-content:center;background:var(--graphite);color:var(--feuille);font-family:var(--police-mono);font-size:.7rem;font-weight:700;padding:4px 9px;flex:none}
.mr-carte-villes-liste{list-style:none;margin:0;padding:0 18px 14px}
.mr-carte-villes-liste li{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:9px 0;border-top:var(--filet-calque)}
.mr-carte-villes-liste li:first-child{border-top:0}
.mr-carte-ville-nom{font-weight:600;font-size:.9rem;color:var(--encre)}
.mr-carte-ville-liens{display:flex;gap:8px;flex-wrap:wrap}
.mr-carte-ville-liens a{font-family:var(--police-mono);font-size:.8125rem;font-weight:500;color:var(--carter-sombre);text-decoration:none;border-bottom:1px solid var(--calque)}
.mr-carte-ville-liens a:hover,.mr-carte-ville-liens a:focus{color:var(--carter);border-color:var(--carter)}
.mr-carte-cta{text-align:center;margin-top:32px}

@media (max-width:900px){
  .mr-carte-layout{grid-template-columns:1fr}
  .mr-carte-map-wrap{padding:16px 14px 10px}
}
@media (max-width:480px){
  .mr-carte-bulle-in{padding:8px 9px;font-size:12px}
  .mr-carte-bulle-in strong{font-size:11px}
  .mr-carte-bulle-liens a{font-size:10.5px;padding:3px 7px}
  .mr-carte-dept-acc summary{padding:12px 14px;font-size:.88rem}
  .mr-carte-villes-liste{padding:0 14px 12px}
}

/* ==========================================================================
   32. PAGES LOCALES — portage bobinagepompe.com (page-local.php / page-intervention.php
   / page-capture.php). data/local.json vide pour l'instant (aucune page
   publiée sur ces gabarits) : section prête, jamais un lien mort en attendant
   la livraison de l'étude.
   ========================================================================== */
.mr-local-hero{position:relative;background:var(--graphite);color:var(--feuille);padding:0 0 48px;overflow:hidden;border-bottom:var(--filet-accent)}
.mr-local-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start;margin-top:22px}
.mr-local-hero-text{padding-top:8px}
.mr-local-hero-text h1{color:var(--feuille);font-size:clamp(1.8rem,3.6vw,2.7rem);margin-bottom:.35em}
.mr-local-badge{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--encre-claire);color:var(--carter-clair);font-family:var(--police-mono);font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:7px 12px;margin-bottom:18px}
.mr-local-badge::before{content:"";width:6px;height:6px;background:var(--carter-clair);flex:none}
.mr-local-accroche{color:var(--encre-claire);font-size:1.05rem;max-width:46ch;margin-bottom:20px}
/* 18/09/2026 : liste a puces interdite (retour Mathias, RE-0211) -- bande de cartes. */
.mr-local-hero-points{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.mr-local-hero-points li{display:flex;align-items:center;gap:10px;flex:1 1 15rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:10px 14px;color:var(--encre-claire);font-size:.9rem;line-height:1.35}
.mr-local-hero-points li::before{content:"";flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:var(--carter-clair)}
.mr-local-hero-form{scroll-margin-top:96px}
.mr-local-hero .mr-crumb,.mr-local-hero .mr-crumb a{color:var(--encre-claire)}

.mr-local-section{padding:var(--respiration) 0}
.mr-local-section--tight{padding:32px 0}
.mr-local-prose{max-width:70ch;margin:0 auto;font-size:1.02rem}
.mr-local-prose p{line-height:1.75}
.mr-local-prose p:last-child{margin-bottom:0}

.mr-local-faq{max-width:56rem;margin:0 auto}
.mr-local-faq details{background:var(--feuille);border:var(--filet-calque);margin-bottom:10px}
.mr-local-faq summary{list-style:none;cursor:pointer;padding:16px 18px;font-weight:600;font-size:.98rem;display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--encre)}
.mr-local-faq summary::-webkit-details-marker{display:none}
.mr-local-faq summary::after{content:"+";font-family:var(--police-mono);font-size:1.2rem;color:var(--carter);font-weight:700}
.mr-local-faq details[open] summary::after{content:"–"}
.mr-local-faq .faq-a{padding:0 18px 18px;color:var(--encre-douce)}

.mr-local-trust{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:center}
.mr-local-trust h2{color:var(--feuille)}
.mr-local-trust-txt p{color:var(--encre-claire);margin-bottom:.9em}
.mr-local-trust-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.mr-local-trust-points li{position:relative;background:transparent;border:var(--filet-calque);border-color:#333f45;padding:12px 14px 12px 34px;color:var(--encre-claire);font-size:.9rem;font-weight:600}
.mr-local-trust-points li::before{content:"";position:absolute;left:14px;top:50%;margin-top:-4px;width:8px;height:8px;background:var(--carter-clair)}

.mr-local-voisines{max-width:56rem;margin:0 auto;text-align:center}
.mr-local-voisines-list{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.mr-local-voisines-list a{display:inline-block;background:var(--feuille);border:var(--filet-fort);padding:9px 16px;font-family:var(--police-mono);font-size:.8125rem;font-weight:500;color:var(--encre);text-decoration:none}
.mr-local-voisines-list a:hover{border-color:var(--carter-sombre);color:var(--carter-sombre)}
.mr-local-voisines-more{margin:0;font-size:.88rem;color:var(--encre-douce)}
.mr-local-voisines-more a{color:var(--carter-sombre);text-decoration:none;font-weight:600}

.mr-local-cta-final-wrap{padding-top:2.5rem} /* était 0 (18/09/2026) : section collée à la précédente, retour Mathias */
.mr-local-cta-final{max-width:56rem;margin:0 auto;text-align:center;background:var(--tirage);border:var(--filet-fort);padding:38px 30px}
.mr-local-cta-final p{color:var(--encre-douce);margin-bottom:22px}

.mr-local-depts{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;align-items:start}
.mr-local-dept{background:var(--feuille);border:var(--filet-fort);padding:22px 22px 6px}
.mr-local-dept-titre{display:flex;align-items:center;gap:10px;font-size:1rem;margin:0 0 12px}
.mr-local-dept-num{display:inline-flex;align-items:center;justify-content:center;background:var(--graphite);color:var(--feuille);font-family:var(--police-mono);font-size:.7rem;font-weight:700;letter-spacing:.03em;padding:5px 9px;flex:none}
.mr-local-dept-villes{list-style:none;margin:0;padding:0}
.mr-local-ville-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:11px 0;border-top:var(--filet-calque)}
.mr-local-ville-row:first-child{border-top:0}
.mr-local-ville-nom{font-weight:600;font-size:.94rem;color:var(--encre)}
.mr-local-ville-liens{display:flex;gap:8px;flex-wrap:wrap}
.mr-local-ville-liens a{display:inline-block;background:var(--tirage);border:var(--filet-calque);padding:5px 11px;font-family:var(--police-mono);font-size:.75rem;font-weight:500;color:var(--encre);text-decoration:none}
.mr-local-ville-liens a:hover{background:var(--feuille);border-color:var(--carter);color:var(--carter-sombre)}
.mr-local-capture-dept-panel{max-width:44rem;margin:0 auto}

.mr-local-cross{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:48rem;margin:0 auto}
.mr-local-cross-card{border:var(--filet-fort);padding:20px}
.mr-local-cross-card--accent{border:var(--filet-accent)}

@media (max-width:900px){
  .mr-local-hero{padding-bottom:36px}
  .mr-local-hero-grid{grid-template-columns:1fr;gap:26px}
  .mr-local-trust{grid-template-columns:1fr;gap:22px}
  .mr-local-depts{grid-template-columns:1fr}
  .mr-local-cross{grid-template-columns:1fr}
  .mr-local-section{padding:40px 0}
}
@media (max-width:480px){
  .mr-local-cta-final{padding:26px 18px}
  .mr-local-dept{padding:16px 16px 4px}
  .mr-local-ville-row{align-items:flex-start;flex-direction:column;gap:6px}
}

/* ==========================================================================
   33. FORMULAIRE QUALIFIANT 5 ÉTAPES — portage bobinagepompe.com (template-parts/
   quiz-form.php), remplace template-parts/devis-form.php partout. Reprend
   le contrat data-* d'assets/site.js::initQuiz (fusionné dans ce même
   fichier). Sans JS : toutes les étapes restent visibles (.mr-quiz-step
   reste display:block hors de .js), l'envoi final est un vrai submit.
   ========================================================================== */
.mr-quiz{background:var(--feuille);border:var(--filet-fort);padding:28px;max-width:40rem;margin:0 auto}
.mr-quiz--compact{padding:20px;max-width:none}

.mr-quiz-topline{display:none}
.mr-quiz.js .mr-quiz-topline{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.mr-quiz-back{background:none;border:none;padding:4px 2px;font:inherit;font-family:var(--police-mono);font-size:.75rem;font-weight:500;color:var(--encre-douce);cursor:pointer;display:flex;align-items:center;gap:4px}
.mr-quiz-back:hover{color:var(--carter-sombre)}
.mr-quiz-back::before{content:"←"}
.mr-quiz-back[hidden]{display:none}
.mr-quiz-step-label{margin-left:auto;font-family:var(--police-mono);font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--carter-sombre)}

.mr-quiz-progress-bar{display:none}
.mr-quiz.js .mr-quiz-progress-bar{display:block;height:2px;background:var(--calque);overflow:hidden;margin-bottom:20px}
.mr-quiz-progress-bar i{display:block;height:100%;width:0;background:var(--carter);transition:width .3s ease}

.mr-quiz-recap{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.mr-quiz-recap[hidden]{display:none}
.mr-quiz-pill{border:var(--filet-fort);background:var(--feuille);color:var(--encre-douce);font-family:var(--police-mono);font-size:.75rem;font-weight:500;padding:6px 10px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.mr-quiz-pill::after{content:"✎";font-size:.68rem;opacity:.7}
.mr-quiz-pill:hover{border-color:var(--carter);color:var(--carter-sombre)}

.mr-quiz-step{display:block;margin-bottom:22px;padding-bottom:20px;border-bottom:1px dashed var(--calque)}
.mr-quiz-step:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.mr-quiz.js .mr-quiz-step{display:none;margin:0;padding:0;border:none}
.mr-quiz.js .mr-quiz-step.active{display:block;animation:mrStepIn .2s ease}
@keyframes mrStepIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.mr-quiz .mr-quiz-q{font-family:var(--police-corps);font-size:1.05rem;font-weight:700;color:var(--encre);margin:0 0 14px}
.mr-quiz .mr-quiz-success h3{color:var(--encre)}
.mr-quiz-aide{font-size:.85rem;color:var(--encre-douce);margin:0 0 14px}

.mr-opt-grid{display:grid;gap:10px;margin-bottom:6px}
.mr-opt-grid--cards{grid-template-columns:repeat(2,1fr)}
.mr-opt-grid--pills{grid-template-columns:repeat(2,1fr)}
.mr-opt-grid--stack{grid-template-columns:1fr}
.mr-opt{border:var(--filet-fort);background:var(--feuille);padding:14px;cursor:pointer;font:inherit;font-family:var(--police-corps);font-size:.9rem;font-weight:600;color:var(--encre);text-align:center;min-height:52px;display:flex;align-items:center;justify-content:center}
.mr-opt:hover{border-color:var(--carter)}
.mr-opt.selected{border-color:var(--carter);background:var(--tirage);color:var(--carter-sombre)}
.mr-opt--card{flex-direction:column;gap:8px;padding:18px 10px;min-height:104px;text-align:center}
.mr-opt-ico{width:30px;height:30px;color:var(--encre);display:flex;align-items:center;justify-content:center}
.mr-opt-ico svg{width:100%;height:100%;stroke:currentColor}
.mr-opt--card.selected .mr-opt-ico{color:var(--carter-sombre)}
.mr-opt-txt{line-height:1.25}
.mr-opt-grid--stack .mr-opt{text-align:left;justify-content:flex-start;padding:14px 16px}

.mr-quiz-champs-libres{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.mr-quiz-champs-libres .mr-field-full{grid-column:1/-1}

.mr-quiz-idf-note{background:var(--tirage);border-left:var(--filet-accent);color:var(--encre-douce);padding:10px 14px;font-size:.8125rem;margin:-6px 0 16px}
.mr-quiz-idf-note[hidden]{display:none}
.mr-quiz-rgpd{font-size:.75rem;color:var(--encre-douce);margin:2px 0 16px}
.mr-quiz-nav{display:flex;justify-content:space-between;gap:12px;margin-top:8px}
.mr-quiz-next{width:100%}
.mr-quiz-success{text-align:center;padding:20px 0}
.mr-quiz-success .mr-check{width:44px;height:44px;border:var(--filet-fort);color:var(--carter-sombre);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-family:var(--police-mono);font-size:1.3rem;font-weight:700}

@media (max-width:480px){
  .mr-opt-grid--cards,.mr-opt-grid--pills{grid-template-columns:1fr}
  .mr-quiz--compact .mr-opt-grid--cards{grid-template-columns:1fr}
  .mr-quiz-champs-libres{grid-template-columns:1fr}
}

/* ==========================================================================
   34. MODALE "EN SAVOIR PLUS" — <dialog> natif (18/09/2026, retour Mathias :
   long texte SEO affiché en dur sous le formulaire sur les pages ville/
   capture). Le texte reste servi tel quel dans le HTML de la page (jamais
   display:none, jamais chargé en JS) : seul l'AFFICHAGE change, via l'état
   fermé natif d'un <dialog>. Câblage générique dans assets/site.js
   (initModals — data-modal-open / data-modal-close), posé une fois.
   ========================================================================== */
.mr-lecture-more{text-align:center;padding:4px 0 0}
dialog.mr-modal{
  border:var(--filet-fort);border-radius:0;background:var(--feuille);color:var(--encre);
  max-width:min(72ch,calc(100vw - 48px));width:100%;padding:0;box-shadow:none;
  margin:auto;max-height:80vh;
}
dialog.mr-modal::backdrop{background:rgba(0,0,0,.55)}
.mr-modal-inner{display:flex;flex-direction:column;gap:16px;padding:30px;max-height:80vh;overflow-y:auto}
.mr-modal-close{
  align-self:flex-end;background:var(--feuille);border:var(--filet-fort);
  width:34px;height:34px;font-family:var(--police-mono);font-size:1.1rem;line-height:1;
  color:var(--encre);cursor:pointer;
}
.mr-modal-close:hover{border-color:var(--carter-sombre);color:var(--carter-sombre)}
.mr-modal .mr-local-prose,.mr-modal .mr-article-body{max-width:none;margin:0;text-align:left}
.mr-modal .mr-local-prose p,.mr-modal .mr-article-body p{text-align:left}

/* ==========================================================================
   35. REPÈRES VISUELS DE L'ARTICLE — blockquote, encadré, étapes numérotées
   (18/09/2026, retour Mathias : corps d'article = mur de texte). Purement
   des styles sur des balises/une classe utilitaire : aucun texte d'article
   retouché, aucun article restructuré ce round.
   ========================================================================== */
.mr-article-body blockquote{
  margin:1.8em 0;padding:18px 22px;border-left:var(--filet-accent);
  background:var(--tirage);color:var(--encre);font-size:1.05rem;font-style:normal;
}
.mr-article-body blockquote p{margin:0}
.mr-article-body blockquote p + p{margin-top:.6em}

.mr-callout{margin:1.8em 0;padding:20px 22px;border:var(--filet-fort);background:var(--feuille)}
.mr-callout-titre{
  display:block;font-family:var(--police-mono);font-size:.6875rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--carter-sombre);margin-bottom:.5em;
}
.mr-callout p:last-child{margin-bottom:0}

.mr-article-body ol{margin:1.8em 0;padding:0;list-style:none;counter-reset:mr-step}
.mr-article-body ol li{position:relative;counter-increment:mr-step;padding:2px 0 2px 44px;margin-bottom:14px}
.mr-article-body ol li::before{
  content:counter(mr-step);position:absolute;left:0;top:0;
  width:30px;height:30px;border:var(--filet-fort);background:var(--tirage);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--police-mono);font-size:.8125rem;font-weight:700;color:var(--carter-sombre);
}