/*FONTS https://fonts.googleapis.com/css2?family=League+Gothic&family=Schibsted+Grotesk:wght@400;500;600;700&display=swap */
/* BITUME : sombre et net, la route et le marquage au sol (TP, voirie, enrobé, couvreur,
   étanchéité, levage, dépannage). Noir bitume presque pur, photo du héro à gauche, titres très
   condensés en capitales hautes, ligne discontinue d'accent sous chaque titre, formulaire
   souligné : le marquage frais sur l'asphalte. */

/* Pourquoi ce thème (18/09/2026). Quentin a adoré le rendu de Qualiplaq (titane repeint en
   marine et jaune) et voulait trois thèmes de plus dans cet esprit : BTP, propres, bruts, et
   qui ne ressemblent pas à un site généré. Bitume est le plus ÉPURÉ des trois : un noir
   presque pur, aucune texture, aucun reflet, de grands titres très condensés en League Gothic
   (la police des affiches et des panneaux, jamais dans les sorties d'IA qui condensent avec
   Bebas ou Oswald), du texte en Schibsted Grotesk, une grotesque de presse. Une seule idée
   graphique, la ligne discontinue du marquage routier : sous chaque titre de section, sous le
   bandeau, au-dessus du pied de page. Jaune de marquage temporaire par défaut, remplacé par la
   couleur du client comme partout.
   Refait le 19/09 : les trois thèmes de la veille étaient jugés trop proches les uns des autres
   et de Qualiplaq (« il faut un minimum de variation »). Bitume reste le seul sombre des trois,
   mais il INVERSE la mise en page (photo du héro à gauche, texte à droite), pose les plaques
   d'engagements à plat sans cadre et souligne les champs du formulaire au lieu de les encadrer :
   même contenu, autre page. */

:root {
  --bg: #0B0D0F;
  /* 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: #0B0D0F;
  --bande-b: #131619;
  --surface: #191D21;
  --surface-2: #131619;
  --ink: #F3F4F5;
  --muted: #9AA2A9;
  --line: #272C31;
  --accent: #145cb6;
  /* Fond sombre : le « foncé » de l'accent doit être plus CLAIR que l'accent, pas plus sombre,
     sinon le téléphone du bandeau et celui du contact s'éteignent dans le noir. build.js
     applique la même règle quand le client a son propre accent (thème sombre détecté). */
  --accent-fonce: #75acf0;
  --sur-accent: #0B0D0F;
  --font-display: "League Gothic", "Impact", "Arial Narrow", sans-serif;
  --font-body: "Schibsted Grotesk", "Segoe UI", sans-serif;
  /* League Gothic n'existe qu'en une graisse : tout ce qui est en police de titre pèse 400 */
  --poids-titre: 400;
  --radius: 0;
  --radius-img: 0;
  --radius-photo: 0;
  --header-bg: #020202;
  --footer-bg: #020202;
  --champ-bg: #131619;
  --marque-fond: #F3F4F5;
  --vitesse-reveal: 0.4s;
  --sobre-bg: #020202;
  --sobre-ink: #F3F4F5;
  --sobre-accent: #75acf0;
  /* voile du héro plein écran : plus dense à mi-hauteur que dans les thèmes clairs, là où
     l'accroche et le titre passent sur la photo (un plafond blanc les effaçait) */
  --hero-voile: linear-gradient(to top, rgba(2, 2, 2, 0.92) 0%, rgba(2, 2, 2, 0.56) 46%, rgba(2, 2, 2, 0.1) 100%);
  /* le filet clair d'un pixel qui cerne les photos et sépare les blocs : une seule définition */
  --filet: rgba(243, 244, 245, 0.08);
  /* LA SIGNATURE : la ligne discontinue, longue pour les traits de page, courte pour les cartes */
  --tirets: repeating-linear-gradient(90deg, var(--accent) 0 28px, transparent 28px 44px);
  --tirets-court: repeating-linear-gradient(90deg, var(--accent) 0 12px, transparent 12px 19px);
}

/* Capitales très hautes et très serrées : les corps montent nettement au-dessus de base.css,
   la police est deux fois plus étroite qu'une grotesque ordinaire. */
h1, h2 { text-transform: uppercase; letter-spacing: 0.015em; }
h1 { font-size: clamp(3.2rem, 7vw, 5.6rem); line-height: 0.94; }
.hero-scinde h1 { font-size: clamp(2.8rem, 5vw, 4.4rem); }
/* Héro sans photo (sobre, marque) : le titre y est seul en scène et souvent long (raison sociale
   complète), on le plafonne un cran plus bas que le plein écran, sinon cinq lignes de 90 px. */
.hero-sobre h1 { font-size: clamp(2.8rem, 5.6vw, 4.6rem); max-width: 24ch; }
h2 { font-size: clamp(2.3rem, 4.2vw, 3.3rem); line-height: 0.98; }
h3 { text-transform: uppercase; font-weight: 400; font-size: 1.6rem; letter-spacing: 0.03em; line-height: 1.02; }

/* LA SIGNATURE DU THÈME : la ligne discontinue sous chaque titre de section, sur toute la
   largeur de sa colonne, comme l'axe d'une chaussée. */
h2::after { content: ""; display: block; height: 3px; margin-top: 18px; background: var(--tirets); }

/* ---------- bandeau ----------
   Le trait du bas est la ligne discontinue : c'est là que la couleur du client traverse la
   page, et elle suit le bandeau collant au défilement. */
.site-header { border-bottom: 0; }
.site-header::after { content: ""; display: block; height: 3px; background: var(--tirets); }
.site-header .brand-name { color: var(--ink); text-transform: uppercase; font-size: 1.7rem; letter-spacing: 0.04em; line-height: 1; }
.site-header .header-tel { color: var(--accent-fonce); font-family: var(--font-body); font-weight: 700; font-size: 1.12rem; letter-spacing: 0.01em; line-height: 1; }
/* Un logo à encre sombre disparaîtrait sur ce bandeau : on le pose sur une pastille claire. */
.site-header .brand-logo { background: #F3F4F5; padding: 4px 7px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.site-header.scrolle { box-shadow: 0 2px 20px rgba(0, 0, 0, 0.7); }

/* ---------- héro ----------
   Une lumière rasante venue de la gauche, comme les phares sur l'asphalte : le fond n'est plus
   un aplat, sans texture ni reflet. Image de fond seulement, la couleur reste celle de la bande. */
.hero-bandeau, .hero-scinde { background-image: linear-gradient(100deg, #121518 0%, var(--bg) 58%); }
.hero-metier { color: var(--accent-vif, var(--accent)); font-family: var(--font-body); font-weight: 700; font-size: 0.84rem; letter-spacing: 0.13em; }
.hero-metier::before {
  content: ""; display: inline-block; width: 50px; height: 3px;
  background: var(--tirets-court); margin-right: 12px; vertical-align: 0.3em;
}
.hero-plein .hero-metier, .hero-plein h1, .hero-plein .hero-sous { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
/* Plein écran : la police étroite laisse entrer bien plus de signes par ligne que les 15ch de base.css. */
.hero-plein h1 { max-width: 19ch; }
.hero-bandeau .hero-photo, .hero-scinde .hero-photo, .hero-photo-entiere .hero-photo {
  box-shadow: 0 0 0 1px var(--filet), 0 26px 56px rgba(0, 0, 0, 0.6);
}
/* LA MISE EN PAGE INVERSÉE : sur écran large, la photo passe à GAUCHE et le texte à droite.
   Tous les autres thèmes lisent texte puis photo ; ici l'œil entre par l'image. Sur téléphone
   base.css empile déjà accroche, titre, photo, boutons : rien à inverser, la règle s'arrête à
   960 px. La marge d'air change de côté avec la photo. */
@media (min-width: 961px) {
  .hero-scinde { grid-template-columns: 1fr 1.05fr; }
  .hero-scinde .hero-photo { order: -1; margin-left: var(--hero-air, clamp(16px, 1.8vw, 28px)); margin-right: 0; }
  .hero-scinde.hero-photo-entiere .hero-photo { order: -1; margin: 0; }
}

/* OÙ S'ARRÊTE LA POLICE ÉTROITE (23/09/2026, même règle que béton). League Gothic n'existe
   qu'en un seul gras, très étroit : superbe en panneau d'autoroute, fine et serrée dès qu'on
   descend sous 20 px. Le défaut s'était vu sur béton (Jess Destruc : surtitre, boutons et
   « Envoyer » illisibles) ; bitume le portait à l'identique. LA POLICE ÉTROITE FAIT LES TITRES
   (h1, h2, h3, le nom du client), SCHIBSTED GROTESK FAIT TOUT CE QUI SE LIT PETIT : surtitre,
   boutons, téléphone du bandeau, villes, étiquettes de champ et d'avant/après, nom au pied.
   Les corps baissent d'autant, la grotesque étant bien plus large à corps égal. */
/* ---------- boutons : capitales de panneau, à plat ---------- */
.btn {
  font-family: var(--font-body); font-weight: 700; text-transform: uppercase;
  font-size: 1rem; letter-spacing: 0.05em; line-height: 1.1; padding: 15px 30px 14px;
}
.btn-plein { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5); }
.btn-contour { color: var(--ink); border-color: rgba(243, 244, 245, 0.35); }
.btn-contour:hover { border-color: var(--accent); }

/* Les sections se suivent sur des noirs proches : un filet clair les sépare (bordure seulement,
   jamais de fond : la couleur d'une section vient de son rang, bande-a / bande-b). */
.services, .galerie, .avant-apres, .apropos, .engagements, .zone, .avis, .video, .contact, .renos { border-top: 1px solid var(--filet); }

/* ---------- services ---------- */
.service { border-top: 1px solid var(--line); }
.service:last-child { border-bottom: 1px solid var(--line); }
.service h3 { color: var(--ink); }
.service-photo img { box-shadow: 0 0 0 1px var(--filet); }
.services-cartes .service { box-shadow: none; }
/* Variante « cartes » : un court marquage en tête du texte (un fond sur .service appellerait
   une marge intérieure, voir controle.js : rien ici). */
.services-cartes .service-texte { position: relative; padding-top: 30px; }
.services-cartes .service-texte::before { content: ""; position: absolute; left: 24px; top: 16px; width: 88px; height: 3px; background: var(--tirets-court); }

/* ---------- engagements : à plat sur l'asphalte, un marquage en tête et c'est tout ----------
   Ni fond ni cadre (béton et cobalt font des plaques, bitume reste nu). Le filet d'accent en
   tête posé par base.css devient la ligne discontinue. */
.engagement { position: relative; border-top: 0; padding: 22px 0 0; }
.engagement::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--tirets-court); }

/* ---------- galerie, à propos, zone ---------- */
.mosaique img, .rangees img, .bandeau img, .duo-vue img, .apropos-photo img, .zone-photo img { box-shadow: 0 0 0 1px var(--filet); }
figcaption { letter-spacing: 0.01em; }
/* étiquettes avant / après : la police étroite se lit mal à 0,7 rem, on la remonte */
.duo-etiquette { font-family: var(--font-body); font-weight: 700; font-size: 0.76rem; letter-spacing: 0.07em; padding: 5px 12px 4px; line-height: 1.1; }

/* ---------- zone et avis ---------- */
.zone-villes { font-family: var(--font-body); text-transform: uppercase; font-weight: 700; font-size: 1.02rem; letter-spacing: 0.04em; }
.avis-item { position: relative; border-left: 0; padding: 20px 0 0; }
.avis-item::before { content: ""; position: absolute; left: 0; top: 0; width: 88px; height: 3px; background: var(--tirets-court); }
.avis-item p { font-size: 1.1rem; }

/* ---------- contact : étiquettes en capitales de panneau, champs sombres ---------- */
.contact-tel { color: var(--accent-fonce); letter-spacing: 0.03em; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1; }
.contact-form label { font-family: var(--font-body); text-transform: uppercase; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.09em; color: var(--muted); }
/* les champs héritent de l'étiquette : on leur rend la police, la taille et la casse du texte.
   Champs SOULIGNÉS plutôt qu'encadrés : un trait sous chaque ligne, comme un bordereau à
   remplir ; au focus le trait prend la couleur du client (c'est lui l'indicateur, pas le
   contour de base.css). */
.contact-form input, .contact-form textarea {
  font-family: var(--font-body); font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--ink);
  background: transparent; border: 0; border-bottom: 2px solid #343A40; border-radius: 0;
  padding: 12px 2px; box-shadow: none;
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-bottom-color: var(--accent); }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #646C74; }
.champ-option { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 0.8rem; }

/* ---------- pied : le marquage ferme la page ---------- */
.site-footer { border-top: 0; color: var(--muted); }
.site-footer::before { content: ""; display: block; height: 3px; background: var(--tirets); }
.site-footer .footer-nap strong { color: var(--ink); font-family: var(--font-body); font-weight: 700; text-transform: uppercase; font-size: 1.04rem; letter-spacing: 0.03em; line-height: 1; }

::selection { background: var(--accent); color: var(--sur-accent); }

/* Téléphone : la police très étroite tient beaucoup de signes par ligne, le titre du héro peut
   monter bien au-dessus du plafond commun de base.css sans repousser le bouton d'appel. */
@media (max-width: 720px) { .site-header .brand-name { font-size: 1.3rem; } .site-header .header-tel { font-size: 1rem; } }
@media (max-width: 520px) {
  .hero h1 { font-size: clamp(2.5rem, 11.5vw, 3.2rem); line-height: 0.96; }
  .hero .hero-metier { font-size: 0.78rem; letter-spacing: 0.1em; }
  h2 { font-size: 2.1rem; }
  .btn { font-size: 0.96rem; letter-spacing: 0.04em; }
}

/* réglages de style de la fiche */
:root { --radius-img: 0; --radius-photo: 0; --radius: 4px; }

/* accent client */
:root { --accent: #145cb6; --accent-fonce: #2179e7; --accent-vif: #2179e7; --sur-accent: #FFFFFF; --sobre-bg: #020202; --sobre-accent: #75acf0; }
:root { --marque-fond: #fefefe; }
:root { --logo-ratio: 1.034; }
:root { --entete-logo-ratio: 1.18; }

/* polices réellement chargées (content.json → style.polices) */
:root { --font-display: "Montserrat", "Impact", "Arial Narrow", sans-serif; --font-body: "Open Sans", "Segoe UI", sans-serif; }

/* DA libre du client (content.json → style.css) */
body { font-family: 'Open Sans', sans-serif; } h1, h2, h3, .brand-name { font-family: 'Montserrat', sans-serif; }