/* VERMEERSCH COMPANY — passe commune V3.
   Structure et règles reprises de Nemelec (modèle clair), adaptées au rouge Vermeersch.
   Chargé en dernier : ce fichier corrige uniquement les composants partagés du socle eco. */

:root {
  /* #ff9aab sur le bandeau #0a2b42 : 7,28:1. */
  --accent-sur-sombre: #ff9aab;
  /* #c8102e sur le fond clair #fbfcfd : 5,73:1. */
  --accent-texte: #c8102e;
}

/* Accent clair dans les zones sombres du modèle, sans recolorer les boutons pleins. */
:is(footer,.fond-sombre,section[style*="background:rgb(var(--overlay-rgb))"],[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;
}

.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;
}

/* Le logo est une image opaque : on conserve son fond blanc au lieu de l'inverser. */
html[data-mode="clair"] .footer-logo {
  filter: none !important;
  border-radius: 8px;
  padding: 6px 10px;
  background: #fff;
  box-sizing: content-box;
}

/* Ligne d'identification légale héritée de la V1. */
footer .pied-bce {
  color: var(--bandeau-texte-doux);
  margin: 4px 0 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* La bulle existe déjà dans le gabarit eco. commun.js ne l'injecte que si elle manque. */
body > a[href^="tel:"][aria-label="Appeler"],
.vcm-call-bubble {
  width: 56px !important;
  height: 56px !important;
  right: max(18px, env(safe-area-inset-right)) !important;
  bottom: max(18px, env(safe-area-inset-bottom)) !important;
  isolation: isolate;
}

body > a[href^="tel:"][aria-label="Appeler"]:focus-visible,
.vcm-call-bubble:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

/* Q majuscule de Plus Jakarta Sans dans les titres Bricolage Grotesque (copie Nemelec). */
@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;
}

@media (max-width: 520px) {
  footer [data-retour-haut] {
    margin-right: 62px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body > a[href^="tel:"][aria-label="Appeler"] span,
  .vcm-call-bubble span {
    animation: none !important;
  }
}

/* En-tête et bande du haut en noir (demande du 21/10/2026) : le logo a un fond #000 et s'y fond.
   Les styles en ligne lisent ces variables : on les redéfinit sur l'en-tête seulement (le pied et
   les sections sombres gardent --bandeau bleu nuit). Le menu téléphone est dans #site-header. */
.topbar {
  --bandeau: #000;
}

#site-header {
  --fond: #000;
  --fond-2: #161616;
  --bord: rgba(255, 255, 255, .14);
  --titre: #fff;
  --texte: rgba(255, 255, 255, .86);
  --texte-doux: rgba(255, 255, 255, .62);
  --accent-texte: var(--accent-sur-sombre);
}

/* Site en mode sombre (demande du 21/10/2026, data-mode="sombre" sur les 31 pages).
   html[data-mode] bat le :root de la balise <style> en ligne de chaque page.
   #ff4d63 sur #0d0d0d : 5,9:1 (le #c8102e d'origine ne faisait que 3,3:1) ; boutons inchangés.
   Les bleus nuit codés en dur du lot V3 (#0a2b42 : encadré « Parlons de votre projet », rideau
   de l'intro) passent au noir du thème. */
html[data-mode="sombre"] {
  --accent-texte: #ff4d63;
  --accent-texte-fonce: #ff7a8b;
  --vca-dark: #161616;
  --vci-night: #000;
  --vci-night-2: #161616;
}

html[data-mode="sombre"] .vci-scene {
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 255, 255, .055), transparent 34%),
    linear-gradient(145deg, var(--vci-night-2), var(--vci-night) 54%, #000);
}

html[data-mode="sombre"] .vci-plate {
  background: #000;
}

/* Bandeau sur téléphone : intro.css cadre toutes les photos à 65 %, ce qui sort le camion
   (à gauche de sa photo) de l'écran. 30 % garde toute la cabine (testé à 390 px le 21/10/2026). */
@media (max-width: 767px) {
  [data-hero-slide][style*="hero-camion"] {
    background-position: 30% center !important;
  }
}