/* ÉTANCHÉI-D — règles communes à toutes les pages (surcharge du thème commun 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.
   1) Une seule teinte foncée du teal (boutons pleins, petit texte sur fond clair)
   2) Accent clair sur fond sombre   3) Le « Q » de Bricolage Grotesque

   Mesures (script, WCAG 2.x) : l'accent de marque #2d9c9b ne fait que 3,3:1 avec du texte blanc et 3,2:1 en texte sur
   fond clair ; il reste pour les filets, ombres et décors. Teinte foncée unique : #1d7372 =
   5,6:1 avec du blanc, 5,5:1 sur #fbfcfd, 5,1:1 sur #eef4f9, 4,7:1 sur le teal à 10 % (#d9efef).
   Survol : #175a59 = 8,0:1 avec du blanc. Sur fond sombre (#0a2b42, bandeau, pied de page) : #5fd6d4 = 8,4:1. */

:root{
  --accent-fonce-a11y:#1d7372;
  --accent-sur-sombre:#5fd6d4;
  --accent-sur-sombre-vif:#b5f3f1;
  /* le thème lit ces trois variables pour le petit texte accent, le survol des liens et des boutons pleins */
  --accent-texte:var(--accent-fonce-a11y);
  --accent-texte-fonce:#175a59;
  --accent-fonce:#175a59;
}

/* ---------- 1. Boutons pleins : fond teal foncé + texte blanc ----------
   Les gabarits posent « background:var(--accent);color:var(--sur-accent) » en style inline : il faut !important.
   Concerne : entrée active du menu (Contact), « Demandez votre devis », boutons du pied de page, bouton du menu mobile,
   « Retour à l'accueil » de la 404, bulle d'appel. Le glow du pied (fond accent sans texte) n'est pas visé. */
[style*="background:var(--accent)"][style*="color:var(--sur-accent)"],
[style*="background: var(--accent)"][style*="color: var(--sur-accent)"],
a[aria-label="Appeler"][style*="position:fixed"]{
  background:var(--accent-fonce-a11y)!important;
}
[style*="background:var(--accent)"][style*="color:var(--sur-accent)"]:hover,
[style*="background: var(--accent)"][style*="color: var(--sur-accent)"]:hover{
  background:var(--accent-fonce)!important;
}
/* anneau pulsé de la bulle d'appel : même teinte que la bulle */
a[aria-label="Appeler"][style*="position:fixed"]>span[style*="background:var(--accent)"]{background:var(--accent-fonce-a11y)!important}
/* survols/états actifs du thème qui remplissent en accent avec du texte blanc */
.hv06:hover,.hv07:hover,
.mini-gallery [data-prev]:hover,.mini-gallery [data-next]:hover,
[data-faq-item].open [data-faq-icon]{background:var(--accent-fonce-a11y)}
.hvpied:hover span{background:var(--accent-fonce-a11y)!important}
/* états allumés des pages services (pastille d'étape qui s'allume, flèches du carrousel au survol) : blanc sur teal foncé */
.es-steps>.es-lit .hv09>span:first-child,
.es-page .mini-gallery [data-prev]:hover,.es-page .mini-gallery [data-next]:hover{background:var(--accent-fonce-a11y)!important}

/* « Retour en haut » du pied : la bulle d'appel (fixe, en bas à droite) couvrait sa pastille ↑ quand on arrive en bas de page */
@media (min-width:768px){footer a[data-retour-haut]{margin-right:76px}}

/* ---------- Petit texte accent sur fond clair ----------
   Style inline « color:var(--accent) » (étiquettes, « ✓ ») : teal foncé. Les « color:var(--accent-texte) » suivent
   la variable ci-dessus. Les bordures (border-color) ne sont pas visées : sélecteurs ancrés sur « ;color: » / début. */
[style^="color:var(--accent)"],[style*=";color:var(--accent)"],[style*="; color:var(--accent)"],
[style^="color: var(--accent)"],[style*=";color: var(--accent)"]{
  color:var(--accent-texte)!important;
}

/* ---------- 2. Accent posé sur fond sombre : clair ----------
   Zones sombres : bandeau du haut, pied de page, bandes .fond-sombre, en-têtes de page sur photo
   (section au fond --overlay-rgb), bandeau d'appel avec photo ([data-reveal="zoom"] au fond accent). */
.topbar,footer,.fond-sombre,
section[style*="background:rgb(var(--overlay-rgb))"],section[style*="background: rgb(var(--overlay-rgb))"],
[data-reveal="zoom"][style*="background:var(--accent)"],[data-reveal="zoom"][style*="background: var(--accent)"]{
  --accent-texte:var(--accent-sur-sombre);
  --accent-texte-fonce:var(--accent-sur-sombre-vif);
}
:is(footer,.fond-sombre,section[style*="background:rgb(var(--overlay-rgb))"],section[style*="background: rgb(var(--overlay-rgb))"],[data-reveal="zoom"][style*="background:var(--accent)"],[data-reveal="zoom"][style*="background: var(--accent)"])
  :is([style*="color:var(--accent)"],[style*="color: var(--accent)"]):not([style*="background"]){
  color:var(--accent-sur-sombre)!important;
}
/* pastilles d'icônes des coordonnées du pied (fond blanc 7 %, icône en accent) */
footer span[style*="rgba(255,255,255,.07)"][style*="color:var(--accent"]{color:var(--accent-sur-sombre)!important}
/* survols sur fond sombre : le thème passe en accent foncé, illisible */
.topbar a:hover,.topbar a:hover svg,
footer .hvpied:hover,footer .hv14:hover,footer .hv14:hover svg,footer .hv15:hover,
section[style*="background:rgb(var(--overlay-rgb))"] .hv15:hover,section[style*="background: rgb(var(--overlay-rgb))"] .hv15:hover{color:var(--accent-sur-sombre)!important}
footer .hvpied:hover span{color:var(--sur-accent)!important}

/* ---------- 3. 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 postes… », « Que préparer… ») elle se lit comme un soulignement parasite sous la première lettre.
   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;
}