/* KVH INTÉRIEUR — règles communes à toutes les pages (surcharge du thème commun assets/eco/ sans le modifier).
   À charger APRÈS /assets/eco/css/site.css et après le CSS propre à la page (dernière feuille).
   Aucun texte n'est écrit ici. Écrit le 16/10/2026 (socle V3), mode CLAIR aux couleurs de la V1 : blanc, vert.
   0) Palette claire   1) Accent lisible sur bande sombre   2) Bloc « Nos réalisations » (articles de blog)
   3) Q du titre   4) Pied de page   5) En-tête : lien actif, menus déroulants Professionnels / Particuliers, logo   6) Bulle d'appel, lien d'évitement
   7) En-têtes de page (voile)   8) Visionneuse   9) Placeholders */

/* ---------- 0. Palette claire (<html data-mode="clair">, couleurs de la V1) ----------
   Contrastes WCAG calculés le 16/10/2026 (seuil 4,5:1 pour le texte, 3:1 pour les gros titres et éléments d'interface) :
     texte        #1c1c1c sur fond #ffffff       = 17,04:1     sur fond doux #faf8f5 = 16,08:1
     texte doux   #666666 sur fond #ffffff       =  5,74:1     sur fond doux #faf8f5 =  5,42:1   (le #787878 de la V1 n'avait que 4,42:1 : foncé)
     VERT V1 #538471 : blanc dessus = 4,28:1, donc SOUS 4,5:1 pour du texte de 13-15 px sur bouton. Le vert des boutons et pastilles est donc
     légèrement assombri : --accent #507f6c (3 % plus sombre, indiscernable de l'œil) = blanc dessus 4,57:1. Retour au #538471 d'origine = changer
     la seule valeur --accent ici ET dans le <style> du gabarit (alors blanc sur bouton = 4,28:1).
     bouton       #ffffff sur accent #507f6c     =  4,57:1     #ffffff sur vert foncé #467060 (survol) = 5,60:1
     vert texte   #467060 (--accent-texte) sur fond #ffffff = 5,60:1    sur fond doux #faf8f5 = 5,29:1   (liens, étiquettes, titres d'accent)
     vert très foncé #3a5f50 (--accent-texte-fonce, survols de liens) sur blanc = 7,16:1, sur fond doux 6,76:1
     --accent #507f6c SEUL (sans texte) : 4,57:1 sur blanc, 4,31:1 sur fond doux (jamais en texte, seulement fonds, filets, icônes ≥ 3:1)
     --accent-texte #467060 sur sa teinte à 10 % (#eef2f0) = 4,96:1 ; sur sa teinte à 12 % (#eaf0ed, sous-menu actif) = 4,85:1
   Bandes sombres (bandeau du haut, pied de page, « pourquoi nous choisir », en-têtes de page sans photo) : noir V1 #111111
     blanc 100 % = 18,88:1 ; blanc 82 % (#d4d4d4) = 12,74:1 ; blanc 72 % (#bcbcbc) = 9,94:1 ; blanc 60 % (#a0a0a0) = 7,22:1
     vert éclairci #7cb09b (--accent-sur-sombre, accent posé sur la bande) = 7,68:1 ; sur la pastille d'icône du pied (blanc 7 % sur la bande, #222222) = 6,47:1
     vert --accent #507f6c posé SUR la bande (bouton « Demandez votre devis → » du pied) = 4,13:1 : forme lisible (≥ 3:1), texte blanc 4,57:1.
   Seule la bordure #ebe6df (1,24:1 sur blanc) est sous 3:1 : filet décoratif, jamais un texte. */
/* html[data-mode="clair"] : le thème pose ses variables claires sur ce sélecteur (plus spécifique que :root), il faut donc le même ici */
:root,html[data-mode="clair"]{
  --accent:#507f6c;
  --accent-fonce:#467060;
  --sur-accent:#ffffff;
  --accent-texte:#467060;
  --accent-texte-fonce:#3a5f50;
  --accent-sur-sombre:#7cb09b;

  --fond:#ffffff;
  --fond-2:#faf8f5;
  --carte:#ffffff;
  --bord:#ebe6df;
  --titre:#1c1c1c;
  --texte:#1c1c1c;
  --texte-doux:#666666;
  --overlay-rgb:17,17,17;
  --bandeau:#111111;
  --bandeau-texte:rgba(255,255,255,.82);
  --bandeau-texte-doux:rgba(255,255,255,.72);
}

/* ---------- 1. Accent posé sur bande sombre ----------
   Les gabarits posent la couleur en style inline (color:var(--accent) / var(--accent-texte)) : il faut !important.
   Zones sombres visées : pied de page, bandes .fond-sombre, bandeau de haut de page (section au fond --overlay-rgb),
   bandeau d'appel avec photo ([data-reveal="zoom"] au fond accent). Le vert foncé #467060 y serait illisible : vert éclairci #7cb09b (7,68:1).
   Sont exclus les éléments qui portent leur propre fond (boutons : ils gardent leurs couleurs d'origine). */
:is(footer,.fond-sombre,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;
}
footer span[style*="rgba(255,255,255,.07)"][style*="color:var(--accent"]{color:var(--accent-sur-sombre)!important}
/* survols : le thème passe par --accent (vert, trop sombre sur la bande) ; sur sombre on reste sur le vert éclairci (7,68:1) */
.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{color:var(--accent-sur-sombre)!important}
footer .hvpied:hover span{color:var(--sur-accent)!important}
/* sélection de texte */
::selection{background:var(--accent);color:var(--sur-accent)}

/* ---------- 2. Bloc « Nos réalisations / Découvrez nos réalisations » (articles de blog) ----------
   Mêmes règles que blog.css (.prose .article-realisations), sans le préfixe .prose.
   Structure :
     <div class="article-realisations" data-reveal="1">
       <span class="reno-eyebrow">Nos réalisations</span>
       <h3>Découvrez nos réalisations</h3>
       <p class="reno-sub">…</p>
       <div class="reno-buttons"><a href="…" class="reno-btn">Libellé <span aria-hidden="true">→</span></a>…</div>
     </div>
   Clair : fond = 10 % de vert sur blanc ; eyebrow #467060 sur ce fond = 4,96:1 ; bouton blanc sur #507f6c = 4,57:1. */
.article-realisations{margin:40px 0;padding:36px 28px;text-align:center;background:color-mix(in srgb,var(--accent) 10%,var(--fond));border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:24px}
section>div>.article-realisations{max-width:820px}
.article-realisations .reno-eyebrow{display:block;margin:0 0 8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--accent-texte)}
.article-realisations h3{margin:0 0 8px;font-size:clamp(22px,2.6vw,28px);font-weight:700;line-height:1.15;color:var(--titre)}
.article-realisations .reno-sub{margin:0 auto 20px;max-width:480px;font-size:15px;line-height:1.6;color:var(--texte-doux)}
.article-realisations .reno-buttons{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0}
.article-realisations a.reno-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;background:var(--accent);color:var(--sur-accent);font-size:14px;font-weight:700;line-height:1.2;text-decoration:none;border:0;border-radius:40px;box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 30%,transparent);transition:background .2s,transform .2s,box-shadow .2s}
.article-realisations a.reno-btn span{transition:transform .18s ease}
.article-realisations a.reno-btn:hover{background:var(--accent-fonce);color:var(--sur-accent);transform:translateY(-2px);box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 40%,transparent)}
.article-realisations a.reno-btn:hover span{transform:translateX(4px)}
.article-realisations a.reno-btn:focus-visible{outline:3px solid var(--accent-fonce);outline-offset:3px}
@media (max-width:520px){
  .article-realisations{margin:32px 0;padding:28px 18px;border-radius:20px}
  .article-realisations a.reno-btn{padding:12px 18px}
}
@media (prefers-reduced-motion:reduce){
  .article-realisations a.reno-btn,.article-realisations a.reno-btn span{transition:none}
  .article-realisations a.reno-btn:hover,.article-realisations a.reno-btn:hover span{transform:none}
}

/* ---------- 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 travaux… », « Quand… ») elle se lit comme un soulignement parasite sous la seule 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;
}
/* titre d'étape du formulaire, focalisé par script : pas de contour (le focus reste actif pour les lecteurs d'écran) */
.de-title[tabindex="-1"]:focus,.de-title[tabindex="-1"]:focus-visible{outline:none}

/* ---------- 4. Pied de page ----------
   Ligne « SIRET » (colonne Coordonnées) : même structure que les lignes voisines (pastille d'icône 30 px + texte).
   Libellé discret (blanc 72 % sur #111 = 9,94:1), le numéro dans le blanc des autres coordonnées (12,74:1). */
footer .pied-siret{color:var(--bandeau-texte);font-weight:600;letter-spacing:.02em;font-variant-numeric:tabular-nums}
footer .pied-siret-lib{color:var(--bandeau-texte-doux);font-size:12px;font-weight:700;letter-spacing:.1em}
/* LOGO : logo.webp (V1) = « KVH intérieur », lettres vertes et « intérieur » noir, ombre grise, fond TRANSPARENT (400 × 251, RGBA).
   - en-tête : l'en-tête reste OPAQUE (#fff). Le thème le rend translucide au défilement (94 % de --fond) ; sur du blanc franc le logo est net,
     et « intérieur » (noir) y reste lisible.
   - pied (bande sombre) : on n'y met PAS le logo d'origine (« intérieur » noir y disparaîtrait) mais logo-clair.webp : lettres vert éclairci,
     « intérieur » blanc, ombre ramenée à 30 % de blanc. Le thème passe aussi .footer-logo en blanc (brightness(0) invert(1)) : on annule ce filtre. */
#site-header,#site-header.scrolled{background:var(--fond)!important}
html[data-mode="clair"] footer .footer-logo{filter:none}
/* « Retour en haut » : la bulle d'appel ronde s'efface avant d'arriver sur le pied (§ 6), aucun décalage nécessaire */
/* bouton d'appel à l'action du pied (vert #507f6c sur bande #111 = 4,13:1, ≥ 3:1) : léger cerclage de blanc pour que la forme se lise nettement ; texte blanc 4,57:1 */
footer a[style*="background:var(--accent)"]{box-shadow:0 0 0 1.5px rgba(255,255,255,.4)}
footer a[style*="background:var(--accent)"]:hover{box-shadow:0 0 0 1.5px #fff,0 12px 28px rgba(0,0,0,.35)}

/* ---------- 5. En-tête ----------
   Filet sous l'en-tête ; lien actif (posé par propage-entete-pied.py : aria-current="page" sur la page elle-même ; is-actif sur le
   menu déroulant Professionnels ou Particuliers quand la page est sa page « Réalisations », avec aria-current sur le lien du sous-menu) ;
   sous-menus (un seul lien chacun, comme la V1) ; sous-menus dépliables du menu mobile. Aucun script de navigation : chaque lien est une vraie page.
   Texte actif = blanc sur #507f6c (4,57:1). */
#site-header{border-bottom:1px solid var(--bord)}
#site-header:focus{outline:none} /* focus programmatique après « Retour en haut » : pas d'anneau sur le bandeau */
#site-header nav a[aria-current="page"]:not([data-sub]){background:var(--accent)!important;color:var(--sur-accent)!important}
#site-header nav a[data-actif]{color:var(--accent-texte)!important}
#site-header .nav-drop.is-actif>a{color:var(--accent-texte)!important}
.nav-drop-menu{min-width:260px}
.nav-drop-menu a[aria-current="page"]{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent-texte)!important}
.nav-drop>a:focus-visible,.nav-drop-menu a:focus-visible,#menu-toggle:focus-visible,.nm-m-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* menu mobile : défile si un sous-menu déplié dépasse l'écran */
#menu-mobile{max-height:calc(100vh - 90px);max-height:calc(100dvh - 90px);overflow-y:auto;overscroll-behavior:contain}
#menu-mobile .nm-m-row{display:flex;align-items:stretch;border-bottom:1px solid var(--bord)}
#menu-mobile .nm-m-row>a:first-child{flex:1 1 auto;border-bottom:0!important}
#menu-mobile .nm-m-toggle{flex:none;width:48px;background:none;border:0;color:var(--accent-texte);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s}
#menu-mobile .nm-m-toggle[aria-expanded="true"]{transform:rotate(180deg)}
#menu-mobile .nm-m-sous{display:flex;flex-direction:column}
#menu-mobile .nm-m-sous[hidden]{display:none}
#menu-mobile a[aria-current="page"]{color:var(--accent-texte)!important}
#menu-mobile a[data-actif],#menu-mobile .nm-m-row.is-actif>a:first-child{color:var(--accent-texte)!important}
/* menu mobile : pas de pastille, la page courante (ou le menu parent quand on est sur sa page « Réalisations ») se marque par le vert foncé (5,60:1 sur blanc) */
/* logo : 64 px en bureau, 56 px en mobile (la V1 en avait 56 / 68 px) */
#site-header .logo-lien img{height:64px;width:auto}
@media (max-width:768px){#site-header .logo-lien img{height:56px}}

/* ---------- 6. Bulle d'appel ronde (seule aide fixe : JAMAIS de barre fixe en bas d'écran) + lien d'évitement ----------
   Bulle : en bas à droite, mobile et desktop, posée dans chaque page (aria-label="Appeler"). Cerclée de blanc (anneau de 3 px) pour rester
   visible sur les fonds sombres (photos, bandeaux). Passe commune du 16/10/2026 (corrections du modèle V3 reprises) :
   - tant que le bandeau cookies est ouvert, elle monte au-dessus de lui (le bandeau fait 340 px de large en bas à gauche : il la recouvre sous ~470 px
     d'écran) ; commun.js mesure le bandeau et pose --kv-cookie-h sur <html> (classe kv-cookie) ; :has() sert de second déclencheur ;
   - elle s'efface (classe kv-bulle-off posée par commun.js) dès que le contenu du pied (premier lien = bouton d'appel, à 48 px sous le haut du pied) arrive à sa hauteur : le pied porte déjà le bouton
     d'appel, le bouton « Demandez votre devis → » et « Retour en haut », la bulle ne les recouvre donc jamais (plus besoin de décaler « Retour en haut »). */
a[aria-label="Appeler"][style*="position:fixed"]{box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 0 3px #fff!important;transition:bottom .35s,opacity .25s,visibility .25s}
@media (max-width:520px){
  body:has(#cookie-banner.visible) a[aria-label="Appeler"][style*="position:fixed"],
  html.kv-cookie a[aria-label="Appeler"][style*="position:fixed"]{bottom:var(--kv-cookie-h,172px)!important}
}
a[aria-label="Appeler"][style*="position:fixed"].kv-bulle-off{opacity:0;visibility:hidden;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  a[aria-label="Appeler"][style*="position:fixed"]{transition:none}
  #menu-mobile .nm-m-toggle{transition:none}
}
/* lien d'évitement : invisible tant qu'il n'a pas le focus clavier (blanc sur #507f6c = 4,57:1) */
.skip-link{position:absolute;left:12px;top:-60px;z-index:300;background:var(--accent);color:var(--sur-accent);padding:12px 18px;border-radius:0 0 12px 12px;font-weight:700;font-size:14px;transition:top .15s}
.skip-link:focus{top:0;color:var(--sur-accent)}
#contenu:focus{outline:none}

/* ---------- 7. En-têtes de page : voile unique pour que la photo se lise (À propos, Contact, Réalisations…) ----------
   Photo à 100 % et un seul voile dégradé (noir #111), fort sous le texte (à gauche), léger à droite. Les pages gardent leur balisage
   (styles en ligne) : on surcharge ici avec !important, une seule règle pour toutes.
   Un seul réglage : --voile-g (bord gauche, sous le titre), --voile-m (milieu), --voile-d (bord droit).
   Valeurs du modèle (titre blanc mesuré ≥ 5,28:1 sur ses photos) : À RE-MESURER sur les photos de KVH par les agents de pages. */
main#contenu>section:first-of-type{--voile-g:.80;--voile-m:.58;--voile-d:.10}
main#contenu>section:first-of-type>div[style*="background-image"][style*="opacity:.5"],
main#contenu>section:first-of-type>div[style*="background-image"][style*="opacity:.6"]{opacity:1!important}
main#contenu>section:first-of-type>div[style*="linear-gradient(90deg,rgba(var(--overlay-rgb),.92) 0%"]{
  background:linear-gradient(90deg,rgba(var(--overlay-rgb),var(--voile-g)) 0%,rgba(var(--overlay-rgb),var(--voile-m)) 48%,rgba(var(--overlay-rgb),var(--voile-d)) 100%)!important}
/* mobile : le texte occupe toute la largeur, en bas de l'en-tête → le voile est plus fort en bas, plus léger en haut. Valeurs de la passe commune du modèle
   (.9/.84/.66 : petits textes d'en-tête sur photo claire ≥ 4,5:1 après mesure) */
@media (max-width:768px){
  main#contenu>section:first-of-type>div[style*="linear-gradient(90deg,rgba(var(--overlay-rgb),.92) 0%"]{
    background:linear-gradient(0deg,rgba(var(--overlay-rgb),.9) 0%,rgba(var(--overlay-rgb),.84) 55%,rgba(var(--overlay-rgb),.66) 100%)!important}
}

/* ---------- 8. Visionneuse (lightbox du thème) : aucun compteur « 3 / 15 », sur toutes les pages (règle de Wakny : photos seules) ----------
   Flèches, Échap et glissement au doigt restent. */
.lb-counter{display:none!important}

/* ---------- 9. Texte d'exemple des champs (placeholder) ----------
   Le gris par défaut du navigateur (#757575, ~4,3:1 sur le fond doux des champs) frôle le seuil : on pose le gris doux du site, #666 = 5,74:1 sur blanc, 5,42:1 sur #faf8f5. */
input::placeholder,textarea::placeholder{color:var(--texte-doux);opacity:1}