/*FONTS https://fonts.googleapis.com/css2?family=Manrope:wght@500;700;800&family=IBM+Plex+Sans:wght@400;600&display=swap */
/* ARDOISE : technique et précis (électricien, chauffagiste, serrurier, dépanneur, informatique, automobile, alarme).
   Gris-bleu froid, encre marine, accent bleu acier, bandeau sombre, services en cartes blanches à ombre légère, titres serrés. */

:root {
  --bg: #EEF1F4;
  /* Alternance des fonds : une section sur deux (base.css, classes bande-a / bande-b
     posées par build.js selon le RANG de la section, pas son nom). */
  --bande-a: #EEF1F4;
  --bande-b: #FFFFFF;
  --surface: #FFFFFF;
  --ink: #131C2B;
  --muted: #5B6675;
  --line: #D3DAE2;
  --accent: #2465A8;
  --accent-fonce: #1A4E85;
  --sur-accent: #FFFFFF;
  --font-display: "Manrope", "Segoe UI", sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", sans-serif;
  --poids-titre: 800;
  --radius: 6px;
  --radius-img: 6px;
  --header-bg: #131C2B;
  --champ-bg: #FFFFFF;
  --vitesse-reveal: 0.45s;
  --sobre-bg: #131C2B;
  --sobre-ink: #EEF1F4;
  --sobre-accent: #7FB2EE;
  --hero-voile: linear-gradient(to top, rgba(12, 18, 30, 0.8) 0%, rgba(12, 18, 30, 0.32) 50%, rgba(12, 18, 30, 0.1) 100%);
}

h1 { letter-spacing: -0.03em; }
h2 { letter-spacing: -0.02em; }
h2::before {
  content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 2px;
  background: var(--accent); margin-right: 14px; vertical-align: 0.05em;
}

/* bandeau sombre : nom et téléphone en clair, logo à encre noire posé sur une pastille blanche */
.site-header { border-bottom: none; }
.site-header .brand-name { color: #EEF1F4; }
.site-header .header-tel { color: #7FB2EE; }
.site-header .brand-logo { background: #FFFFFF; padding: 5px 9px; border-radius: 4px; }

.hero-metier { color: var(--accent); font-family: var(--font-display); font-weight: 700; letter-spacing: 0.14em; }
.hero-plein .hero-metier { color: #7FB2EE; }

.btn { font-weight: 700; padding: 14px 26px; }
.btn-plein { box-shadow: 0 6px 18px rgba(36, 101, 168, 0.28); }

/* services en cartes blanches sur le fond gris-bleu */
.service {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 22px; margin-bottom: 16px;
  box-shadow: 0 8px 24px rgba(19, 28, 43, 0.06);
}
.service:last-child { border-bottom: 1px solid var(--line); }
.service h3 { font-weight: 800; letter-spacing: -0.01em; }

.zone-villes { font-family: var(--font-display); font-weight: 700; }
/* Engagements en cartes, comme les services juste au dessus. Le fond, le cadre ET la marge
   intérieure vont ensemble : sans « padding », le texte se colle aux bords de la carte et
   la dernière ligne passe dessous. La bordure haute d'accent vient de base.css, le raccourci
   « border » l'écraserait : on la repose après. */
.engagement {
  background: var(--surface); border: 1px solid var(--line);
  border-top: 2px solid var(--accent); border-radius: 8px;
  padding: 20px 22px 22px; box-shadow: 0 8px 24px rgba(19, 28, 43, 0.06);
}

.contact-form input, .contact-form textarea { border-radius: 6px; }

.site-footer { background: #131C2B; border-top: none; color: #AFB9C6; --muted: #AFB9C6; --ink: #EEF1F4; --accent-fonce: #7FB2EE; }
.site-footer .footer-nap strong { color: #EEF1F4; }

/* accent client */
:root { --accent: #a4251e; --accent-fonce: #701915; --sur-accent: #FFFFFF; --sobre-bg: #281110; --sobre-accent: #e57c76; }
:root { --marque-fond: #1f1f1f; }
:root { --logo-ratio: 1.066; }