/* ==================================================================
   plumber-17 : habillage aligné sur plumber-deboucheur.com (2026-09-22).
   Chargée en dernier. Aucun texte ne change : seulement polices,
   couleurs, arrondis, boutons et étiquettes.

   - Polices : Archivo (titres, boutons) et Source Sans 3 (texte),
     hébergées dans le plugin. Les anciens noms (Bricolage Grotesque,
     Hanken Grotesk, Manrope, Inter) pointent vers ces fichiers : tous
     les styles existants, y compris ceux écrits en ligne dans les
     pages, basculent sans être réécrits.
   - Couleurs : bleu nuit #0B2545 en aplat (plus de halos), bleu franc
     #1173D4 pour les liens et les boutons de devis, orange vif #F26B1D
     réservé au téléphone et aux accents.
   - Boutons à coins de 8 px, cartes à bordure fine, aucune ombre.
   - Changer le NOM du fichier à chaque modification (plumber-18.css…) :
     le cache statique d'o2switch ignore ?ver=.
   ================================================================== */

/* ---------- 1. Polices ---------- */
@font-face{font-family:'Archivo';src:url(polices/archivo.woff2) format('woff2');font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:'Bricolage Grotesque';src:url(polices/archivo.woff2) format('woff2');font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url(polices/source-sans-3.woff2) format('woff2');font-weight:300 800;font-style:normal;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url(polices/source-sans-3-italique.woff2) format('woff2');font-weight:400 600;font-style:italic;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url(polices/source-sans-3.woff2) format('woff2');font-weight:300 800;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url(polices/source-sans-3-italique.woff2) format('woff2');font-weight:400 600;font-style:italic;font-display:swap}
@font-face{font-family:'Manrope';src:url(polices/source-sans-3.woff2) format('woff2');font-weight:300 800;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url(polices/source-sans-3.woff2) format('woff2');font-weight:300 800;font-style:normal;font-display:swap}

/* Source Sans 3 est plus petite qu'Hanken à corps égal : on remonte le texte courant. */
body{background:#FFFFFF;font-size:17.5px}

/* ---------- 2. Palette ---------- */
:root{
  --pl-nuit:#0B2545;
  --pl-bleu:#1173D4;
  --pl-bleu-fonce:#0D5FB3;
  --pl-orange:#F26B1D;
  --pl-orange-fonce:#DB5A0E;
  --pl-orange-txt:#B9480A;
  --pl-encre:#16222E;
  --pl-texte:#3D4A58;
  --pl-faible:#5C6B7B;
  --pl-filet:#DCE6F2;
  --pl-sable:#F26B1D;

  --fond-nuit:#0B2545;
  /* Second fond clair : la teinte pierre choisie par le client le
     16/09/2026, gardée mais en aplat (plus de dégradé). */
  --fond-ambre:#F5F3EF;
  /* Trait de feutre : orange vif de Plumber, sur fond clair comme sur bleu nuit. */
  --surl-orange:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10.6c46-4.4 92-6.4 147-6.1 46 .3 93 2.1 147 5.4-30-.6-60-1.1-90-1.3-45-.3-90 .1-135 1-23 .5-46 1.2-69 2.1z' fill='%23F26B1D'/%3E%3C/svg%3E");
  --surl-ambre:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10.6c46-4.4 92-6.4 147-6.1 46 .3 93 2.1 147 5.4-30-.6-60-1.1-90-1.3-45-.3-90 .1-135 1-23 .5-46 1.2-69 2.1z' fill='%23F26B1D'/%3E%3C/svg%3E");
}

/* Valeurs des blocs clairs (même liste que charte-1, pour la même priorité). */
.opm-mv,
.opm-mv .mv-mot,
.opm-mv .mv-methode,
.opm-mv .mv-form,
.opm-mv .mv-carte,
.opm-mv .mv-formule,
.opm-mv details.mv-item,
.opm-mv .mv-meteo-jour,
.opm-mv .mv-flag,
.opm-mv .mv-sim,
.opm-mv .mv-coord>div,
.opm-mv .opm-zone-carte,
.opm-mv .mv-flip-face,
.opm-mv .mv-flip-dos,
.opm-mv .mv-liste-nue.mv-oui li,
.opm-mv .mv-liste-nue.mv-non li,
.opm-mv .mv-liste li,
.opm-mv .mv-note,
.opm-mv .mv-chip,
.opm-mv .mv-duo,
.opm-mv .mv-tab-wrap,
.opm-mv .mv-eg-res,
.opm-mv .mv-blanc,
.opm-mv .mv-badge,
.opm-mv .mv-lab{
  --sec-titre:#0B2545;
  --sec-texte:#3D4A58;
  --sec-faible:#5C6B7B;
  --sec-lien:#1173D4;
  --sec-eb-bg:transparent;
  --sec-eb-txt:#B9480A;
  --sec-acc:#B9480A;
}

/* Variables du design (mv-5.css) et du thème (main.css) : même palette. */
.opm-mv{
  --mv-acc:#F26B1D;
  --mv-acc-2:#DB5A0E;
  --mv-ambre:#F26B1D;
  --mv-bleu:#1173D4;
  --mv-bleu-2:#0B2545;
  --mv-titre:#0B2545;
  --mv-texte:#3D4A58;
  --mv-gris:#5C6B7B;
  --mv-clair:#F5F3EF;
  --mv-clair-2:#F5F3EF;
  --mv-filet:#DCE6F2;
}
:root{
  --paper:#FFFFFF;
  --paper-2:#F5F3EF;
  --navy:#0B2545;
  --navy-2:#0B2545;
  --blue:#1173D4;
  --red:#F26B1D;
  --red-2:#DB5A0E;
  --accent:#F26B1D;
  --line-soft:#DCE6F2;
  --ambre:#F26B1D;
}

/* Choix actif (estimateur, comparateur) : bleu franc, comme les choix du quiz de Plumber. */
.opm-mv .mv-seg .opm-est-opt.is-on,
.opm-mv .mv-ba-choix button.is-on{background:var(--pl-bleu) !important;border-color:var(--pl-bleu) !important;color:#FFFFFF !important}
.opm-mv .mv-ba-choix button.is-on *{color:#FFFFFF !important}

/* Couleurs écrites en ligne dans l'en-tête et le menu mobile. */
[style*="background:#C96A00" i]{background:var(--pl-bleu) !important}
a[href^="tel:"][style*="background:#C96A00" i]{background:var(--pl-orange) !important}
[style*="#E7DDD0" i]{border-color:var(--pl-filet) !important}
[style*="color:#1257AD" i]{color:var(--pl-bleu) !important}

/* Pages à l'ancien balisage (contact, histoire, zones) : règles de mv-site.css
   reprises à l'identique, couleurs remplacées par celles de Plumber. */
/* ---------- sections autrefois bleu fonce ---------- */
.d134,.d101,.d264,.d51,.d207,.d216,.d102{
  background:#0B2545!important;
  color:#E3EEFB!important;
}

/* tout le texte de ces sections repasse en noir de charte */
.d134 *,.d101 *,.d264 *,.d51 *,.d207 *,.d216 *,.d102 *{color:#E3EEFB!important}

.d134 h1,.d134 h2,.d134 h3,.d134 h4,
.d101 h1,.d101 h2,.d101 h3,.d101 h4,
.d264 h1,.d264 h2,.d264 h3,.d264 h4,
.d51 h1,.d51 h2,.d51 h3,.d51 h4,
.d207 h2,.d207 h3,.d216 h2,.d216 h3,.d102 h2,.d102 h3{color:#FFFFFF!important}

/* surtitres en orange, mot mis en avant du H1 en bleu */
.d134 .d94,.d101 .d17,.d264 .d17,.d51 .d17,.d207 .d17,.d216 .d17{color:#F26B1D!important}
.d134 .d209{color:#FFFFFF!important;background:none!important}
.opm-surligne{color:#1173D4!important;background:none!important}

/* ---------- cartes autrefois bleu nuit : blanches ---------- */
.d13,.d45,.d62,.d68,.d88,.d123,.d138,.d167,.d185,.d204,.d235,.d238{
  background:#FFFFFF!important;
  border:1px solid #DCE6F2!important;
  color:#1B2229!important;
}
.d138 *,.d68 *,.d13 *,.d62 *,.d45 *,.d88 *,.d123 *,.d167 *,.d185 *,.d204 *,.d235 *,.d238 *{color:#1B2229!important}
.d138 h3,.d68 h3,.d88 h3,.d123 h3,.d167 h3,.d185 h3,.d204 h3,.d235 h3,.d238 h3,
.d101 .d96,.d264 .d70,.d51 .d74{color:#0B2545!important}

/* fond neutre derriere les images */
.d37{background:#F5F3EF!important}

/* ---------- boutons : l'orange garde son texte blanc ---------- */
.d134 .d57,.d134 .d57 *,
.d51 .d66,.d51 .d66 *,
.d101 .d133,.d101 .d133 *,
.d264 .d133,.d264 .d133 *,
.d51 .d133,.d51 .d133 *,
.d134 .d317,.d134 .d317 *{color:#FFFFFF!important}

/* bouton secondaire : il etait blanc translucide sur fond sombre */
.d134 .d58,.d134 .d58 *,.d51 .d58,.d51 .d58 *{
  background:#FFFFFF!important;
  border:1.5px solid #DCE6F2!important;
  color:#0B2545!important;
}
.d134 .d58:hover{border-color:#B9480A!important}

/* pastilles translucides posees sur fond clair */
.d264 .d176,.d51 .d34{background:#FFFFFF!important;border:1px solid #DCE6F2!important;color:#B9480A!important}

/* ---------- en-tete : plus d'ombre portee, filet de charte ---------- */
header[style*="position:sticky"]{
  background:#FFFFFF!important;
  border-bottom:1px solid #DCE6F2!important;
  box-shadow:none!important;
}
header .r-desknav a{color:#1B2229!important}
header .r-desknav a:hover{color:#B9480A!important}
header .r-desknav a.opm-cta,header .r-desknav a.opm-cta:hover{color:#FFFFFF!important}
header .r-burger{border-color:#DCE6F2!important;color:#1B2229!important}
header .r-burger svg{stroke:#1B2229!important}
#opm-mobile-menu{background:#FFFFFF!important;border-top-color:#DCE6F2!important}
#opm-mobile-menu a{color:#1B2229!important;border-bottom-color:#DCE6F2!important}
#opm-mobile-menu a[href^="tel:"]{color:#FFFFFF!important}

/* ---------- badge Website Carbon, fait maison ----------
   Deux cellules comme le badge officiel : la mesure a gauche, la signature
   a droite. Chiffres releves le 2026-08-28 sur websitecarbon.com. */
.opm-carbone{
  display:inline-flex;align-items:stretch;max-width:100%;
  border:1px solid #DCE6F2;border-radius:10px;overflow:hidden;
  font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:12.5px;font-weight:700;line-height:1.2;text-decoration:none;
}
.opm-carbone .wcb-mesure{
  display:flex;flex-direction:column;justify-content:center;gap:3px;
  padding:9px 15px;background:#FFFFFF;color:#1B2229;
}
.opm-carbone .wcb-sous{font-weight:600;font-size:11.5px;color:#5A6672}
.opm-carbone .wcb-marque{
  display:flex;align-items:center;padding:10px 15px;
  background:#F26B1D;color:#FFFFFF;white-space:nowrap;transition:background .2s ease;
}
.opm-carbone:hover .wcb-marque{background:#DB5A0E}
.opm-carbone sub{font-size:.75em;line-height:0}

/* ---------- liens du contenu : bleu de charte ---------- */
.d264 a:not([class*="cta"]),.d51 a:not([class*="cta"]),.d101 a:not([class*="cta"]){color:#9DC8FF!important}
.d138:hover,.d68:hover{border-color:#B9480A!important}

/* ---------- 3. Titres : une seule échelle de H2 ---------- */
.opm-mv h1,.opm-mv h2,.opm-mv h3,.opm-mv .mv-h1{font-family:'Archivo',system-ui,sans-serif;font-weight:800;letter-spacing:-.015em}
.opm-mv h2,
.opm-mv .mv-grid h2,
.opm-mv .mv-contact h2,
.opm-mv .opm-zone-sec .mv-tete h2{font-size:clamp(30px,3.2vw,52px);line-height:1.08}

/* ---------- 4. Étiquettes au-dessus des titres ----------
   Plus de pastille en capitales : une ligne courte, en gras, en casse normale. */
.opm-mv .mv-eyebrow{
  background:none;
  padding:0;
  border-radius:0;
  text-transform:none;
  letter-spacing:0;
  font-family:'Archivo',system-ui,sans-serif;
  font-size:16px;
  font-weight:700;
  color:var(--sec-eb-txt);
}
.opm-mv .mv-etape{color:var(--sec-acc)}

/* Pastille de la bannière : comme celle de Plumber, translucide sur le bleu nuit. */
.opm-mv .mv-hero .mv-badge{
  --sec-titre:#FFFFFF;
  --sec-texte:#FFFFFF;
  background:rgba(255,255,255,.12);
  border-color:transparent;
  color:#FFFFFF;
  font-family:'Archivo',system-ui,sans-serif;
  font-weight:800;
}

/* ---------- 5. Boutons ----------
   Comme sur Plumber : bleu franc pour le devis, orange pour le téléphone. */
.opm-mv .mv-cta,
.opm-mv .mv-submit,
header a.opm-cta,
.opm-pied .opm-cta{
  background:var(--pl-bleu) !important;
  color:#FFFFFF !important;
  border-radius:8px !important;
  box-shadow:none !important;
  font-family:'Archivo',system-ui,sans-serif;
  font-weight:800;
  transform:none;
}
.opm-mv .mv-cta:hover,
.opm-mv .mv-submit:hover,
header a.opm-cta:hover,
.opm-pied .opm-cta:hover{background:var(--pl-bleu-fonce) !important;transform:none;box-shadow:none !important}

.opm-mv .mv-cta[href^="tel:"],
header a.opm-cta[href^="tel:"],
.opm-pied .opm-cta[href^="tel:"]{background:var(--pl-orange) !important}
.opm-mv .mv-cta[href^="tel:"]:hover,
header a.opm-cta[href^="tel:"]:hover,
.opm-pied .opm-cta[href^="tel:"]:hover{background:var(--pl-orange-fonce) !important}

/* ---------- 6. Cartes : filet fin, arrondi modéré, aucune ombre ---------- */
.opm-mv *,
.opm-mv *::before,
.opm-mv *::after{box-shadow:none !important}
.opm-mv .mv-carte,
.opm-mv .mv-formule,
.opm-mv .mv-sim{border-radius:18px;border-color:var(--pl-filet)}
.opm-mv details.mv-item,
.opm-mv .mv-form,
.opm-mv .mv-meteo-jour{border-radius:12px}
.opm-mv details.mv-item{border-color:var(--pl-filet)}
.opm-mv details.mv-item[open]{border-color:var(--pl-bleu)}
.opm-mv .mv-carte:hover,
.opm-mv .mv-formule:hover{transform:none}
.opm-mv .opm-tuile{border-radius:16px;background:var(--pl-nuit)}
.opm-mv .opm-tuile-fl{background:var(--pl-orange)}
.opm-mv .opm-tuile:hover .opm-tuile-fl{background:var(--pl-orange-fonce)}
.opm-mv .opm-tuile:focus-visible{outline-color:var(--pl-bleu)}

/* La formule mise en avant reste une carte blanche, cerclée d'orange. */
.opm-mv .mv-formule-fort{
  background:#FFFFFF;
  border:2px solid var(--pl-orange);
}
.opm-mv .mv-formule-fort h3,
.opm-mv .mv-formule-fort .mv-formule-prix b{color:var(--pl-nuit)}
.opm-mv .mv-formule-fort .mv-formule-prix span{color:var(--pl-faible)}
.opm-mv .mv-formule-fort .mv-puces li{color:var(--pl-texte)}
.opm-mv .mv-formule-fort .mv-cta{background:var(--pl-bleu) !important;color:#FFFFFF !important}

/* Numéros d'étapes : pastille orange en aplat. */
.opm-mv .mv-num{background:var(--pl-orange);border-radius:8px}
.opm-mv .mv-acc:has(.mv-etape){
  background-image:repeating-linear-gradient(to bottom,var(--sec-acc,#B9480A) 0 4px,transparent 4px 11px);
}

/* Formulaire de devis sur photo : même rendu, sans ombre ni coins ronds marqués. */
.opm-mv #devis .mv-form .mv-input{border-radius:8px}

/* ---------- 7. En-tête ---------- */
.opm-bandeau{background:var(--pl-nuit) !important}
header[style*="border-bottom"]{border-bottom-color:var(--pl-filet) !important}
header .opm-nav-top{color:var(--pl-nuit);font-family:'Archivo',system-ui,sans-serif;font-weight:700}
header .opm-nav-top:hover,
header .opm-nav-top:focus-visible{color:var(--pl-bleu)}

/* ---------- 8. Pied de page en aplat bleu nuit ---------- */
.opm-pied{background:var(--pl-nuit) !important}
.opm-pied .opm-foot-col>p:first-child{color:var(--pl-sable) !important}
.opm-pied .opm-cta span,
.opm-pied .opm-cta b{color:#FFFFFF !important}

/* ---------- 9. Composants qui portent leurs propres couleurs ---------- */
/* Carte de la zone d'intervention (plugin opm-carte-zone). */
.opm-mv .opm-zone-sec{--mv-acc:#F26B1D;--mv-acc-2:#DB5A0E;--mv-bleu:#1173D4;--mv-filet:#DCE6F2}
.opm-mv .opm-zone-sec .mv-eyebrow{
  text-transform:none;
  letter-spacing:0;
  font-size:16px;
  font-weight:700;
  color:var(--pl-orange-txt);
}
.opm-zone-villes li>a{color:var(--pl-bleu)}
.opm-zone-tr{border-color:var(--pl-bleu)}

/* La même carte posée hors du nouveau balisage (page contact). */
.opm-zone-sec{--mv-acc:#F26B1D;--mv-acc-2:#DB5A0E;--mv-bleu:#1173D4;--mv-filet:#DCE6F2}
.opm-zone-sec .mv-eyebrow{text-transform:none;letter-spacing:0;font-size:16px;font-weight:700;color:var(--pl-orange-txt)}
.opm-zone-sec a:not(.mv-cta){color:var(--pl-bleu)}
.opm-zone-dep{color:var(--pl-bleu);border-color:var(--pl-bleu)}
.opm-zone-sec .mv-cta{background:var(--pl-bleu);color:#FFFFFF;border-radius:8px;box-shadow:none}
.opm-zone-sec .mv-cta:hover{background:var(--pl-bleu-fonce)}
.opm-zone-sec .mv-cta[href^="tel:"]{background:var(--pl-orange)}

/* Fil d'Ariane (couleur écrite en ligne par l'animation d'entrée). */
html body nav[aria-label="Fil d'Ariane"] a,
html body:has(.opm-mv) nav[aria-label="Fil d'Ariane"] a{color:var(--pl-bleu) !important}
html body nav[aria-label="Fil d'Ariane"] span[aria-hidden="true"],
html body:has(.opm-mv) nav[aria-label="Fil d'Ariane"] span[aria-hidden="true"]{color:var(--pl-orange-txt) !important}

/* Encadré d'information, fond derrière les photos des prestations. */
.opm-mv .mv-flag-info .mv-flag-ico{background-color:var(--pl-bleu)}
.opm-mv .mv-flag-info .mv-flag-txt b{color:var(--pl-nuit)}
.opm-mv .mv-presta-media{background:var(--fond-ambre)}

/* Menu mobile, badge avis, badge carbone. */
.opm-mob-titre{color:var(--pl-orange-txt)}
.opm-avis-g{border-color:var(--pl-filet)}
.opm-carbone{border-color:var(--pl-filet)}
.opm-carbone .wcb-marque{background:var(--pl-orange)}

/* Pages de texte et pages à l'ancien balisage : même échelle de H2 partout. */
html body h2[class],
html body .opm-zone-sec .mv-tete h2,
body .opm-prose h2{font-family:'Archivo',system-ui,sans-serif;font-weight:800;letter-spacing:-.015em;font-size:clamp(30px,3.2vw,52px);line-height:1.08}

/* ---------- 10. Petits écrans : échelle des titres, en dernier ---------- */
@media (max-width:900px){
  html body h2[class],
  html body .opm-zone-sec .mv-tete h2,
  body .opm-prose h2,
  .opm-mv h2,
  .opm-mv .mv-grid h2,
  .opm-mv .mv-contact h2,
  .opm-mv .opm-zone-sec .mv-tete h2{font-size:clamp(28px,5.8vw,36px);line-height:1.1}
}

/* ---------- 11. Plus d'orange pâle (22/09/2026) ----------
   Les accents sur bleu nuit passent à l'orange vif ; les rares fonds
   qui utilisaient l'orange pâle gardent un texte blanc lisible. */
.opm-mv .mv-carte-tag,
.opm-mv .mv-chip:hover,
.opm-mv details.mv-plus>summary:hover{background:var(--pl-orange);border-color:var(--pl-orange) !important;color:#FFFFFF !important}
/* Résultat de l'estimateur : plus de dégradé orange clair. */
.opm-mv .mv-sim-res{background:var(--fond-ambre);border-color:var(--pl-filet)}

/* ---------- 12. La photo de la bannière ne sort plus de l'écran ----------
   Le cadre de la bannière laisse déborder son contenu (les pastilles
   « Visite gratuite » et « Assurance pro » dépassent volontairement).
   Le zoom lent de l'animation (scale 1.14) faisait donc sortir la photo
   de son cadre et de l'écran : la page glissait de côté sur téléphone.
   On garde la photo à sa taille ; le zoom reste sur les autres images,
   dont les cadres coupent ce qui dépasse. */
.opm-mv .mv-hero-media .opm-hero__media,
img.opm-hero__media{scale:none !important;transform:none !important}

/* ---------- 13. Menu mobile, sur le modèle de La Médaille du Travail ----------
   Panneau bleu nuit posé sous l'en-tête (il ne pousse pas la page),
   rubriques repliées qui s'ouvrent d'un toucher, téléphone et devis en
   bas. Balisage dans header.php, script dans footer.php. Les anciennes
   règles de main.css et mv-site.css visent #opm-mobile-menu en !important :
   d'où les sélecteurs renforcés. */
header .r-mobactions{gap:10px}
header .r-mobcall{border-radius:10px !important;background:var(--pl-orange) !important}

/* Bouton : carré bleu nuit plein, trois traits qui deviennent une croix. */
header .r-burger{
  width:46px;height:46px;padding:0 12px;
  flex-direction:column;align-items:stretch;justify-content:center;gap:5px;
  background:var(--pl-nuit) !important;
  border:0 !important;border-radius:10px;cursor:pointer;
}
header .r-burger span{display:block;height:2px;border-radius:2px;background:#FFFFFF;transition:transform .2s ease,opacity .2s ease}
header .r-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
header .r-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
header .r-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
header .r-burger:focus-visible{outline:3px solid var(--pl-bleu);outline-offset:2px}

/* Panneau */
header #opm-mobile-menu.opm-mob{
  display:none !important;
  position:absolute;left:0;right:0;top:100%;
  overflow-y:auto;overscroll-behavior:contain;
  background:var(--pl-nuit) !important;
  border-top:0 !important;
  padding:0;
}
header #opm-mobile-menu.opm-mob.open{display:block !important}
@media (min-width:961px){header #opm-mobile-menu.opm-mob.open{display:none !important}}

header #opm-mobile-menu .opm-mob-liste,
header #opm-mobile-menu .opm-mob-sous{list-style:none;margin:0;padding:0}
header #opm-mobile-menu .opm-mob-liste>li{border-bottom:1px solid rgba(255,255,255,.1)}

/* Lien de premier niveau et bouton de rubrique : même allure. */
header #opm-mobile-menu .opm-mob-liste>li>a,
header #opm-mobile-menu .opm-mob-deplier{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;min-height:54px;
  padding:0 var(--gutter,clamp(18px,5vw,40px));
  background:transparent;border:0 !important;
  font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:15px;
  letter-spacing:.05em;text-transform:uppercase;text-align:left;
  color:#FFFFFF !important;cursor:pointer;
}
header #opm-mobile-menu .opm-mob-liste>li>a.actif{background:rgba(255,255,255,.08)}
header #opm-mobile-menu .opm-mob-liste>li>a:focus-visible,
header #opm-mobile-menu .opm-mob-deplier:focus-visible{outline:3px solid var(--pl-bleu);outline-offset:-3px}

/* Le « + » rond qui devient « × » quand la rubrique est ouverte. */
header #opm-mobile-menu .opm-mob-plus{
  position:relative;flex:none;width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.16);transition:transform .2s ease,background-color .2s ease;
}
header #opm-mobile-menu .opm-mob-plus::before,
header #opm-mobile-menu .opm-mob-plus::after{
  content:'';position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;
  border-radius:2px;background:#FFFFFF;
}
header #opm-mobile-menu .opm-mob-plus::after{transform:rotate(90deg)}
header #opm-mobile-menu .opm-mob-deplier[aria-expanded="true"] .opm-mob-plus{transform:rotate(45deg);background:var(--pl-orange)}

/* Sous-liste repliée par défaut. */
header #opm-mobile-menu .opm-mob-sous{display:none;padding:0 0 10px;background:rgba(0,0,0,.14)}
header #opm-mobile-menu .opm-mob-groupe.deplie>.opm-mob-sous{display:block}
header #opm-mobile-menu .opm-mob-sous a{
  display:flex;align-items:center;min-height:46px;
  padding:0 var(--gutter,clamp(18px,5vw,40px)) 0 calc(var(--gutter,clamp(18px,5vw,40px)) + 14px);
  border:0 !important;
  font-family:'Source Sans 3',system-ui,sans-serif;font-weight:600;font-size:16.5px;
  letter-spacing:0;text-transform:none;
  color:#E3EEFB !important;
}
header #opm-mobile-menu .opm-mob-sous a.actif{color:#FFFFFF !important;background:rgba(255,255,255,.08)}

/* Boutons du bas : téléphone orange, devis bleu, pleine largeur. */
header #opm-mobile-menu .opm-mob-actions{display:flex;flex-direction:column;gap:10px;padding:18px var(--gutter,clamp(18px,5vw,40px)) 24px}
header #opm-mobile-menu .opm-mob-actions a{
  display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;
  border-radius:8px !important;border:0 !important;
  font-family:'Archivo',system-ui,sans-serif;font-weight:800;font-size:16px;
  color:#FFFFFF !important;text-transform:none;
}
header #opm-mobile-menu .opm-mob-actions .opm-mob-tel{background:var(--pl-orange) !important}
header #opm-mobile-menu .opm-mob-actions .opm-mob-devis{background:var(--pl-bleu) !important}

/* ---------- 14. Plus de sections bleu nuit (22/09/2026) ----------
   Une section sur deux passe en bleu nuit : les cartes blanches posées
   dessus gardent leur texte foncé. */
.opm-mv .mv-presta-carte{
  --sec-titre:#0B2545;
  --sec-texte:#3D4A58;
  --sec-faible:#5C6B7B;
  --sec-lien:#1173D4;
  --sec-eb-txt:#B9480A;
  --sec-acc:#B9480A;
  --sec-surl:var(--surl-orange);
  color:#3D4A58;
}

/* Pages à l'ancien balisage (contact, histoire) : les sections d'origine
   repassent en bleu nuit et alternent avec les sections blanches. Les
   cartes blanches posées dessus gardent leur texte foncé (règle .d13 *…
   placée plus haut, même priorité, plus tardive). Plus de fond gris. */
.opm-fond-gris{background:var(--fond-ambre) !important}
/* Liens dans une carte blanche posée sur ces sections : bleu franc. */
:is(.d264,.d51,.d101) :is(.d13,.d45,.d62,.d68,.d88,.d123,.d138,.d167,.d185,.d204,.d235,.d238) a:not([class*="cta"]){color:#1173D4 !important}

/* ---------- 15. Lisibilité (relevé automatique du 22/09/2026, 20 pages) ---------- */
/* Badge Website Carbon du pied : la case blanche garde un texte foncé
   (le pied de page passe tous ses span en bleu pâle). */
html body .opm-pied .opm-carbone .wcb-mesure,
html body .opm-pied .opm-carbone .wcb-mesure *{color:#16222E !important}
html body .opm-pied .opm-carbone .wcb-sous{color:#5C6B7B !important}
html body .opm-pied .opm-carbone .wcb-marque{color:#FFFFFF !important}

/* Bouton orange des bannières à l'ancien balisage (pages ville). */
a.d57,a.d57 *{color:#FFFFFF !important}

/* Section « À propos » sur fond clair (Givors) : titres foncés, accents orange lisibles. */
.opm-fond-gris .d105{color:#0B2545 !important}
.opm-fond-gris .d110,
.opm-fond-gris .d17{color:#B9480A !important}

/* ---------- 16. Page Contact, sur le modèle de celle de Plumber (22/09/2026) ----------
   Bannière bleu nuit (texte + photo), puis coordonnées et plan à gauche,
   formulaire à droite, sur fond blanc. */
.opm-mv .opm-contact-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.opm-mv .mv-cta.mv-cta-ghost{
  background:transparent !important;
  border:2px solid rgba(255,255,255,.55);
  color:#FFFFFF !important;
}
.opm-mv .mv-cta.mv-cta-ghost:hover{background:rgba(255,255,255,.1) !important;border-color:#FFFFFF}

/* Coordonnées : cartes blanches à filet fin, comme le bloc adresse de Plumber. */
.opm-mv .opm-contact-nap>div{background:#FFFFFF;border:1px solid var(--pl-filet);border-radius:12px;padding:15px 18px}
.opm-mv .opm-contact-nap .mv-coord-lab{color:var(--pl-orange-txt);font-family:'Archivo',system-ui,sans-serif;font-weight:700}
.opm-mv .opm-contact-nap .mv-coord-val,
.opm-mv .opm-contact-nap .mv-coord-val a{color:var(--pl-nuit);font-weight:700;text-decoration:none}
.opm-mv .opm-contact-nap .mv-coord-val a:hover{color:var(--pl-bleu)}
.opm-mv .opm-contact-plan{margin-top:20px;border-radius:12px;border:1px solid var(--pl-filet);aspect-ratio:16/9}

/* Deux colonnes de même hauteur : le formulaire s'étire, pas de vide sous la colonne courte. */
.opm-mv .opm-contact-bloc{align-items:stretch}
.opm-mv .opm-contact-bloc>.mv-form{height:100%}
/* Le formulaire étiré ne laisse pas de vide en bas : la zone de message
   prend la hauteur restante (sur grand écran seulement, deux colonnes). */
@media (min-width:901px){
  .opm-mv .opm-contact-bloc>.mv-form{display:flex;flex-direction:column}
  .opm-mv .opm-contact-bloc>.mv-form>form{flex:1 1 auto}
  .opm-mv .opm-contact-bloc>.mv-form label:has(textarea){flex:1 1 auto}
  .opm-mv .opm-contact-bloc>.mv-form textarea{flex:1 1 auto;min-height:140px;resize:vertical}
}