/* MHM CONSTRUCT — règles communes à toutes les pages (surcharge du thème assets/eco/ sans le modifier).
   À charger EN DERNIER dans le <head>, après site.css et le CSS propre à la page. Aucun texte n'est écrit ici.
   Préfixe de classes : mx-.
   1) Texte sombre sur l'or   2) Accent sur fond sombre   3) Cartes de /services empilées en mobile
   4) Bulle d'appel et bandeau cookies   5) « Q » des titres   6) Reflets (rien à couper) */

/* ---------- 1. Texte posé sur l'or ----------
   Le <style> inline de chaque page pose --sur-accent:#fff : du blanc sur #bea677 ne fait que 2,4:1.
   html:root (0,1,1) bat le :root inline (0,1,0) sans !important. Tout ce qui lit var(--sur-accent) passe en #1a1408 :
   boutons « Demandez votre devis » / « Contactez-nous », pastille du menu actif, icônes et flèches dans les ronds dorés,
   bulle d'appel, bouton « Accepter » des cookies, puces cochées des formulaires.
   #1a1408 sur #bea677 = 7,8:1 ; sur le doré foncé du survol #a18d65 = 5,7:1. */
html:root{--sur-accent:#1a1408}

/* ---------- 2. Accent posé sur fond sombre ----------
   Mesuré le 14/10 : #bea677 sur #0d0d0d = 8,3:1 (7,4:1 sur les cartes #1a1a1a), #a18d65 (survol des liens) sur #0d0d0d =
   6,0:1, texte doré du pied sur #000 = 8,9:1 : le thème n'a rien à corriger sur les fonds unis.
   Seul cas sous 4,5:1 : l'accroche dorée « Recevez votre conseil gratuit ! » du bandeau d'appel des pages services en
   mobile (2,7 à 3,1:1) : la photo y est encore claire à cette hauteur (dégradé de services.css à 51 % de noir). On
   assombrit le dégradé plus tôt (88 % de noir à l'endroit du texte, 96 % ensuite) ; la photo reste visible en haut. */
@media (max-width:640px){
  html .ms-page .ms-cta>.ms-ov{background:linear-gradient(180deg,rgba(var(--overlay-rgb),.05) 0,rgba(var(--overlay-rgb),.4) 22%,rgba(var(--overlay-rgb),.88) 34%,rgba(var(--overlay-rgb),.96) 46%,rgb(var(--overlay-rgb)) 62%)!important}
}

/* ---------- 3. Cartes de /services : une colonne en mobile ----------
   Le thème (site.css) passe .grille-services-accueil en rail horizontal sous 768 px ; l'accueil l'empile déjà
   (accueil.css, section 6). Mêmes règles ici pour services.html : 4 colonnes en grand, 2 en tablette, 1 sous 560 px.
   (Règles identiques à celles de l'accueil : aucun conflit quand les deux feuilles sont chargées.) */
@media (max-width:767px){
  html .grille-services-accueil.grille-cartes{display:grid!important;overflow:visible!important;padding:0!important;margin:22px 0!important;gap:14px!important;scroll-snap-type:none;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html .grille-services-accueil.grille-cartes>div{flex:none;min-width:0}
}
@media (max-width:560px){html .grille-services-accueil.grille-cartes{grid-template-columns:1fr!important;gap:18px!important}}

/* ---------- 4. Bulle d'appel (une seule, ronde, en bas à droite) et bandeau cookies ----------
   Le bandeau cookies (340 × 138 px, en bas à gauche, 22 px de marge) recouvre la bulle quand l'écran fait moins de
   ~445 px de large. Tant qu'il est ouvert, la bulle passe au-dessus (138 + 22 + 12 de respiration = 172 px).
   Deux déclencheurs : :has() et la classe html.mx-cookie posée par commun.js (navigateurs sans :has()). */
@media (max-width:520px){
  a[aria-label="Appeler"][style*="position:fixed"]{transition:bottom .35s}
  body:has(#cookie-banner.visible) a[aria-label="Appeler"][style*="position:fixed"],
  html.mx-cookie a[aria-label="Appeler"][style*="position:fixed"]{bottom:172px!important}
}

/* ---------- 5. Le « Q » de Bricolage Grotesque ----------
   Cette police dessine son Q majuscule avec une longue queue horizontale sous la ligne de base : en tête d'un titre
   (« Quels… », « Quand… ») elle se lit comme un soulignement parasite sous la première lettre (vérifié à l'écran le 14/10).
   On remplace uniquement U+0051 par le Q de Plus Jakarta Sans (police du texte, déjà chargée) : même famille déclarée,
   la déclaration la plus tardive gagne pour ce caractère — aucun sélecteur, aucun balisage touché. */
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url(../eco/fonts/plus-jakarta-sans-latin.woff2) format('woff2-variations'),url(../eco/fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range:U+0051;
}

/* ---------- 6. Reflets ----------
   Aucun reflet qui balaie une photo n'existe dans assets/mhm/* ni assets/eco/* (contrôle du 14/10) : la brillance
   des BOUTONS (.hv04/.hv20/.hv10::after de accueil.css, apropos.css, services.css) reste volontairement.
   Rien à neutraliser : cette section est volontairement vide. */

@media (prefers-reduced-motion:reduce){
  a[aria-label="Appeler"][style*="position:fixed"]{transition:none}
}