/* ==================================================================
   charte-1 — couleurs du site.
   Les fonds de section sont calculés page par page par le plugin
   (opm_charte_rythme), qui écrit une poignée de règles en ligne.
   Ce fichier porte tout le reste : variables, textes, boutons, cartes.
   ================================================================== */

:root{
  --fond-nuit:
    radial-gradient(680px 430px at 92% 0%, rgba(242,116,12,.26), transparent 62%),
    radial-gradient(580px 370px at 2% 100%, rgba(58,140,224,.26), transparent 66%),
    linear-gradient(155deg,#0A2E5C 0%,#123C73 54%,#0E3F7E 100%);
  /* Le fond ambre tirait sur le jaune, refuse par le client le 16/09/2026
     (« on n'est pas au kebab »). Le second fond clair est desormais une
     teinte pierre, tres neutre, qui se distingue du blanc sans colorer. */
  --fond-ambre:linear-gradient(180deg,#F7F5F1 0%,#EFECE6 100%);

  --fond-ciel:linear-gradient(180deg,#E9F0FA 0%,#DFEAF7 100%);
  --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='%23F0781A'/%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='%23FFA94D'/%3E%3C/svg%3E");
}

/* Valeurs claires par défaut. Les mêmes valeurs sont remises dans les
   blocs blancs posés sur une bande bleu nuit : une carte garde toujours
   son texte noir, même au milieu d'une section foncée. */
.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:#0D1218;
  --sec-texte:#1B2229;
  --sec-faible:#5A6672;
  --sec-lien:#0E3F7E;
  --sec-eb-bg:rgba(226,102,10,.13);
  --sec-eb-txt:#B85507;
  --sec-acc:#B85507;
  --sec-surl:var(--surl-orange);
}
.opm-mv .mv-stat-n em{color:var(--sec-acc)}

/* ---------- Les sections respirent ---------- */
.opm-mv .mv-sec,
.opm-zone-sec{
  padding-top:clamp(60px,7vw,96px);
  padding-bottom:clamp(60px,7vw,96px);
}

/* ---------- Les textes suivent la couleur de leur section ---------- */
.opm-mv h2,
.opm-mv h3,
.opm-mv .mv-h1{color:var(--sec-titre)}
.opm-mv strong{color:var(--sec-titre)}
.opm-mv .mv-lead,
.opm-mv .mv-p,
.opm-mv .mv-cite,
.opm-mv .mv-liste-nue li{color:var(--sec-texte)}
.opm-mv .mv-stat-n{color:var(--sec-titre)}
.opm-mv .mv-tel,
.opm-mv .mv-stat-l,
.opm-mv .mv-meteo-src,
.opm-mv .mv-sim-note{color:var(--sec-faible)}
.opm-mv .mv-tel a,
.opm-mv .mv-lead a,
.opm-mv .mv-p a,
.opm-mv .mv-meteo-src a{color:var(--sec-lien)}
.opm-mv .mv-eyebrow{
  display:inline-block;
  background:var(--sec-eb-bg);
  color:var(--sec-eb-txt);
  padding:7px 15px;
  border-radius:999px;
  margin-bottom:6px;
}

/* ---------- Le mot-clé souligné au feutre ---------- */
.opm-mv .mv-surl{
  color:inherit;
  padding:0 .04em .18em;
  background-image:var(--sec-surl);
  background-size:100% .34em;
  background-position:0 100%;
  background-repeat:no-repeat;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.opm-mv .mv-h1 .mv-surl{background-size:100% .28em;padding-bottom:.14em}

/* ---------- Boutons ---------- */
/* Boutons en aplat, pas de dégradé. */
.opm-mv .mv-cta,
.opm-mv .mv-submit{
  background:#C25E06;
  box-shadow:0 16px 28px -16px rgba(185,82,0,.85);
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.opm-mv .mv-cta:hover,
.opm-mv .mv-submit:hover{
  background:#A34800;
  transform:translateY(-2px);
  box-shadow:0 20px 32px -16px rgba(185,82,0,.9);
}

/* ==================================================================
   Pied de page en bleu nuit. Le gabarit pose ses couleurs en style
   en ligne : on repasse par-dessus, d'où les !important.
   ================================================================== */
.opm-pied{
  background:linear-gradient(180deg,#0B3163 0%,#082448 100%) !important;
  border-top:1px solid rgba(255,255,255,.14) !important;
  color:#CFE0F3 !important;
}
.opm-pied p,
.opm-pied span:not(.opm-avis-g):not(.opm-avis-etoiles),
.opm-pied li,
.opm-pied div{color:#C3D6EC !important}
.opm-pied strong,
.opm-pied b{color:#FFFFFF !important}
.opm-pied a{color:#E8F0FA !important}
.opm-pied a:hover,
.opm-pied a:focus{color:#FFFFFF !important}
.opm-pied .opm-foot-col nav a,
.opm-pied nav a{color:#C3D6EC !important}
.opm-pied .opm-foot-col nav a:hover,
.opm-pied .opm-foot-col nav a:focus,
.opm-pied nav a:hover,
.opm-pied nav a:focus{color:#FFFFFF !important}
/* Les titres de colonne restent en orange clair, lisibles sur le bleu. */
.opm-pied .opm-foot-col>p:first-child{color:#FFC489 !important}
/* Le logo est sombre : on le passe en blanc. */
.opm-pied img[alt*="OPM"]{filter:brightness(0) invert(1)}
/* Bouton téléphone et badge avis gardent leur couleur. */
.opm-pied .opm-cta{background:#C25E06 !important;color:#FFFFFF !important}
.opm-pied .opm-cta span,
.opm-pied .opm-cta b{color:#FFFFFF !important}
.opm-pied .opm-avis{
  background:rgba(255,255,255,.1) !important;
  border-color:rgba(255,255,255,.24) !important;
}
.opm-pied .opm-avis .opm-avis-txt,
.opm-pied .opm-avis .opm-avis-txt span,
.opm-pied .opm-avis b{color:#FFFFFF !important}
/* Filets de séparation du bas de page. */
.opm-pied [style*="border-top"]{border-top-color:rgba(255,255,255,.14) !important}

/* ---------- Le formulaire de devis est posé sur une photo de chantier ---------- */
.opm-mv #devis .mv-form{
  background:
    linear-gradient(158deg,rgba(7,26,52,.88) 0%,rgba(10,38,74,.92) 100%),
    url("https://opm-debarras.fr/wp-content/uploads/2026/07/fd05bf71-b8b5-4a96-b324-b7775a2ebef3.png") center/cover no-repeat;
  border-color:rgba(255,255,255,.18);
  box-shadow:0 34px 64px -34px rgba(4,18,38,.9);
}
.opm-mv #devis .mv-form .mv-form-titre{color:#FFFFFF}
.opm-mv #devis .mv-form .mv-lab-txt{color:#FFFFFF;font-weight:700}
.opm-mv #devis .mv-form .mv-input{
  background:#FFFFFF;
  border-color:rgba(255,255,255,.4);
  color:#1B2229;
}
.opm-mv #devis .mv-form .mv-input::placeholder{color:#7B8794}
.opm-mv #devis .mv-form .opm-devis-msg{color:#FFFFFF}

/* ---------- Tuiles de services : l'image porte le titre, tout est cliquable ---------- */
.opm-mv .opm-tuiles{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));
  gap:clamp(14px,1.5vw,20px);
}
.opm-mv .opm-tuile{
  position:relative;
  display:block;
  aspect-ratio:4/3;
  border-radius:20px;
  overflow:hidden;
  background:#0A2E5C;
  text-decoration:none;
  box-shadow:0 24px 44px -32px rgba(10,46,92,.75);
}
.opm-mv .opm-tuile img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}
.opm-mv .opm-tuile::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(9,28,54,0) 32%,rgba(9,28,54,.86) 100%);
}
.opm-mv .opm-tuile-in{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 18px 20px;
}
.opm-mv .opm-tuile-titre{
  font-family:'Bricolage Grotesque',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-weight:800;
  font-size:clamp(18px,1.4vw,21px);
  line-height:1.2;
  letter-spacing:-.01em;
  color:#FFFFFF;
}
.opm-mv .opm-tuile-fl{
  flex:none;
  width:38px;
  height:38px;
  border-radius:50%;
  background:#C25E06;
  color:#FFFFFF;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
  transition:transform .2s ease, background-color .2s ease;
}
.opm-mv .opm-tuile:hover img{transform:scale(1.06)}
.opm-mv .opm-tuile:hover .opm-tuile-fl{transform:translateX(3px);background:#A34800}
.opm-mv .opm-tuile:focus-visible{outline:3px solid #C25E06;outline-offset:3px}

/* ---------- Cartes ---------- */
.opm-mv .mv-carte,
.opm-mv .mv-formule,
.opm-mv .mv-meteo-jour{
  box-shadow:0 26px 48px -36px rgba(10,46,92,.65);
  transition:transform .2s ease, box-shadow .2s ease;
}
.opm-mv .mv-carte:hover,
.opm-mv .mv-formule:hover{
  transform:translateY(-3px);
  box-shadow:0 30px 56px -34px rgba(10,46,92,.7);
}

/* ---------- La formule mise en avant passe en orange ---------- */
.opm-mv .mv-formule-fort{
  background:linear-gradient(150deg,#F0781A 0%,#DA6208 55%,#B95200 100%);
  border-color:#B95200;
  box-shadow:0 30px 56px -30px rgba(185,82,0,.85);
}
.opm-mv .mv-formule-fort h3,
.opm-mv .mv-formule-fort .mv-formule-prix b{color:#FFFFFF}
.opm-mv .mv-formule-fort .mv-formule-prix span{color:#FFE7C7}
.opm-mv .mv-formule-fort .mv-puces li{color:#FFFFFF}
.opm-mv .mv-formule-fort .mv-cta{
  background:#FFFFFF;
  color:#B95200 !important;
  box-shadow:0 14px 24px -18px rgba(10,46,92,.7);
}
.opm-mv .mv-formule-fort .mv-cta:hover{background:#FFF2E3;transform:translateY(-2px)}

/* ---------- Accordéons ---------- */
.opm-mv details.mv-item{
  border-color:#E1E8F2;
  box-shadow:0 16px 30px -28px rgba(10,46,92,.55);
}
.opm-mv details.mv-item[open]{
  border-color:#E2660A;
  box-shadow:0 20px 34px -24px rgba(226,102,10,.5);
}

/* ---------- Pointillés entre les étapes ----------
   La ligne est peinte sur le conteneur : les cartes blanches la masquent,
   il n'en reste que des pointillés dans l'espace entre deux étapes. */
.opm-mv .mv-acc:has(.mv-etape){
  background-image:repeating-linear-gradient(to bottom,var(--sec-acc,#B85507) 0 4px,transparent 4px 11px);
  background-size:2px 100%;
  background-position:clamp(20px,2.2vw,28px) 0;
  background-repeat:no-repeat;
}

/* ---------- Numéros d'étapes ---------- */
.opm-mv .mv-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:12px;
  background:linear-gradient(140deg,#F0781A,#B95200);
  color:#FFFFFF;
  font-size:15px;
}

/* ---------- Le bloc zone reste sur fond blanc ---------- */
.opm-mv>section.opm-zone-sec{background:#FFFFFF}

/* ---------- Titres de section ----------
   Les H2 faisaient 56 px au maximum et paraissaient petits face aux photos :
   on remonte l'echelle. Dans les sections a deux colonnes, le titre reste un
   cran en dessous, sinon il part sur quatre lignes dans une colonne etroite. */
.opm-mv h2{font-size:clamp(34px,4.6vw,66px);line-height:1.02;letter-spacing:-.015em}
.opm-mv .mv-grid h2,
.opm-mv .mv-contact h2{font-size:clamp(32px,3.9vw,56px)}

/* ---------- Cartes « ce que nous debarrassons » ----------
   La photo mangeait la carte et la liste finissait en petit : le client ne
   lisait plus ce qu'on sort de chez lui. Photo plus basse, texte plus gros,
   une seule colonne de puces pour que chaque ligne se lise d'un coup. */
.opm-mv .mv-presta-media{height:clamp(230px,18vw,310px)}
.opm-mv .mv-presta-in{padding:clamp(18px,1.9vw,28px)}
.opm-mv .mv-presta-in>h3{font-size:clamp(21px,1.7vw,27px);line-height:1.18}
.opm-mv .mv-presta .mv-puces{margin-top:14px;column-gap:26px}
.opm-mv .mv-presta .mv-puces li{font-size:17.5px;line-height:1.45;padding:12px 0 12px 31px}
.opm-mv .mv-presta .mv-puces li::before{width:21px;height:21px;margin-top:-10.5px;background-size:12px 12px}

/* ---------- Cartes a retourner : le texte du dos doit se lire ---------- */
.opm-mv .mv-flip-face h3{font-size:clamp(20px,1.6vw,25px);line-height:1.18}
.opm-mv .mv-flip-dos .mv-flip-titre{font-size:clamp(18px,1.4vw,21px)}
.opm-mv .mv-flip-dos .mv-p{font-size:16.5px;line-height:1.55}