/*FONTS https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800;900&family=Chivo:wght@400;500;700&display=swap */
/* BÉTON : clair et brut, le gros œuvre (maçon, terrassier, démolition, coffreur, façadier,
   plaquiste). Béton gris clair avec un grain de matière, bandeau et héro en charbon, capitales
   hautes et serrées, rubalise d'accent en bandes obliques : la banche décoffrée, pas la vitrine. */

/* Pourquoi ce thème (18/09/2026, refait le 19/09). 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, sans air de site généré. Première version : trois thèmes sombres, jugés trop proches
   les uns des autres et de Qualiplaq (« il faut un minimum de variation, il ne s'agit pas de
   refaire ce site-là »). Béton est donc le CLAIR des trois : un béton gris clair grainé pour le
   corps de page, et le charbon réservé au bandeau, au héro et au pied, là où la photo et la
   couleur du client ressortent du noir. Une seule idée graphique, la rubalise de chantier
   (bandes obliques d'accent) en haut de page, devant chaque titre, sur les plaques et les cartes.
   Titres en Big Shoulders Display, une grotesque haute et serrée dessinée pour la signalétique
   industrielle, très rare dans les sorties d'IA ; texte en Chivo, sobre et un peu rigide, comme
   un devis. Chantier est le voisin clair : ici le héro est sombre, la matière grainée, et la
   police étroite, rien ne se confond. */

:root {
  --bg: #ECEAE5;
  /* 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: #ECEAE5;
  --bande-b: #F6F5F1;
  --surface: #FFFFFF;
  --surface-2: #F6F5F1;
  --ink: #1E1F1D;
  --muted: #5E605D;
  --line: #CFCDC5;
  --accent: #ff5a00;
  --accent-fonce: #b84000;
  --sur-accent: #1A1B19;
  --font-display: "Big Shoulders Display", "Impact", "Arial Narrow", sans-serif;
  --font-body: "Chivo", "Segoe UI", sans-serif;
  --poids-titre: 800;
  --radius: 0;
  --radius-img: 0;
  --radius-photo: 0;
  --header-bg: #030202;
  --footer-bg: #141513;
  --champ-bg: #FFFFFF;
  --marque-fond: #FFFFFF;
  --vitesse-reveal: 0.4s;
  --sobre-bg: #030202;
  --sobre-ink: #EDECE7;
  --sobre-accent: #e59d76;
  /* voile du héro plein écran : dense à mi-hauteur, là où l'accroche et le titre passent sur la photo */
  --hero-voile: linear-gradient(to top, rgba(14, 15, 14, 0.92) 0%, rgba(14, 15, 14, 0.56) 46%, rgba(14, 15, 14, 0.1) 100%);
  /* le filet d'un pixel qui cerne les photos sur le clair : une seule définition */
  --filet: rgba(30, 31, 29, 0.14);
  /* LA SIGNATURE : la rubalise, bandes obliques de la couleur du client */
  --rubalise: repeating-linear-gradient(-45deg, var(--accent) 0 9px, transparent 9px 18px);
  /* les zones charbon (bandeau, héro, pied) : une seule palette pour les trois */
  --charbon: #030202;
  --charbon-ink: #EDECE7;
  --charbon-muted: #A6A69F;
  --charbon-filet: rgba(237, 236, 231, 0.1);
}
/* Le grain de matière : un bruit SVG minuscule (180 px, répété sans raccord). En noir à 7 % sur
   les bandes claires, en blanc à 9 % sur les zones charbon. Déclaré dans un second :root parce
   que l'adresse contient des points-virgules, que le registre des thèmes (outils/themes.js) ne
   lit que le premier bloc :root et couperait la variable suivante. */
:root {
  --grain-clair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-sombre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* OÙ S'ARRÊTE LA POLICE ÉTROITE (23/09/2026). Big Shoulders Display est une grotesque de
   SIGNALÉTIQUE : 0,41 de large pour 1 de corps, plus étroite qu'Impact (0,51). Elle est
   magnifique à 50 px et illisible à 16 : sur Jess Destruc, le surtitre du héro, les deux
   boutons et le « Envoyer » du formulaire passaient tous par elle, et Quentin n'arrivait plus
   à lire le numéro de téléphone. La règle du thème tient en une phrase : LA POLICE ÉTROITE
   FAIT LES TITRES (h1, h2, h3, le nom du client), CHIVO FAIT TOUT CE QUI SE LIT PETIT
   (surtitre, boutons, téléphone du bandeau, villes, étiquettes, nom au pied). Le caractère du
   thème vient des titres et de la rubalise, pas des étiquettes de 16 px.
   Capitales hautes et serrées : la police est étroite, les corps peuvent monter d'un cran
   par rapport à base.css sans que le titre du héro prenne quatre lignes. */
h1, h2 { text-transform: uppercase; letter-spacing: 0.015em; }
h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 0.98; }
.hero-scinde h1 { font-size: clamp(2.3rem, 4.2vw, 3.6rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); line-height: 1.02; }
h3 { text-transform: uppercase; font-weight: 800; font-size: 1.38rem; letter-spacing: 0.04em; line-height: 1.1; }

/* Le grain sur chaque bande claire. Image de fond seulement : la couleur vient du rang de la
   section (bande-a / bande-b) et reste celle de base.css. */
.bande-a, .bande-b { background-image: var(--grain-clair); }

/* LA SIGNATURE DU THÈME : un morceau de rubalise au-dessus de chaque titre de section. */
h2::before { content: ""; display: block; width: 64px; height: 7px; margin-bottom: 20px; background: var(--rubalise); }

/* ---------- bandeau charbon ----------
   La rubalise court sur toute la largeur en haut de page : c'est le seul endroit où la couleur
   du client traverse l'écran, et elle reste visible au défilement puisque le bandeau est collant. */
.site-header { border-bottom: 0; }
.site-header::before { content: ""; display: block; height: 5px; background: var(--rubalise); }
.site-header .brand-name { color: var(--charbon-ink); text-transform: uppercase; font-size: 1.35rem; letter-spacing: 0.05em; }
.site-header .header-tel { color: var(--accent-vif, var(--accent)); font-family: var(--font-body); font-weight: 700; font-size: 1.1rem; letter-spacing: 0.01em; }
/* Un logo à encre sombre disparaîtrait sur ce bandeau : on le pose sur une pastille claire. */
.site-header .brand-logo { background: #FFFFFF; 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.35); }

/* ---------- héro charbon sur page claire ----------
   C'est ce qui plaît dans les thèmes sombres : la photo et la couleur du client qui sortent du
   noir. Ici le noir s'arrête au héro, le reste de la page respire en clair. Sélecteur DOUBLE
   (.hero.hero-scinde) parce que la classe bande-a, posée en fin de base.css, gagnerait à égalité
   de poids et repeindrait le héro en béton clair. Les jetons de couleur sont redéfinis dans le
   bloc, donc les enfants (sous-titre, bouton contour, filet) suivent sans une règle de plus. */
.hero.hero-scinde, .hero.hero-bandeau {
  background-color: var(--charbon); background-image: var(--grain-sombre);
  --ink: var(--charbon-ink); --muted: var(--charbon-muted); --accent-fonce: var(--accent-vif, var(--accent)); --filet: var(--charbon-filet);
  color: var(--ink);
}
.hero.hero-sobre { background-image: var(--grain-sombre); }
.hero-metier {
  color: var(--accent-fonce); font-family: var(--font-body); font-weight: 700;
  font-size: 0.82rem; letter-spacing: 0.14em;
}
.hero-metier::before {
  content: ""; display: inline-block; width: 34px; height: 7px;
  background: var(--rubalise); margin-right: 12px; vertical-align: 0.08em;
}
.hero-plein .hero-metier { color: var(--accent-vif, var(--accent)); }
.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 plus de signes par ligne que les 15ch de base.css. */
.hero-plein h1 { max-width: 18ch; }
/* La photo du héro sur un bloc d'accent décalé, comme sur une affiche de chantier : c'est le
   geste qui distingue ce héro de tous les autres au premier regard. */
.hero-bandeau .hero-photo, .hero-scinde .hero-photo, .hero-photo-entiere .hero-photo {
  box-shadow: 10px 10px 0 var(--accent);
}

/* ---------- boutons : capitales de chantier, arête basse plus sombre comme un bouton pressé ---------- */
.btn {
  font-family: var(--font-body); text-transform: uppercase; font-weight: 700;
  font-size: 0.97rem; letter-spacing: 0.05em; padding: 16px 30px;
}
.btn-plein { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.22), 0 10px 24px rgba(30, 31, 29, 0.18); }
.btn-plein:hover { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.22), 0 6px 16px rgba(30, 31, 29, 0.16); }
/* contour : la couleur du texte suit la zone (clair sur le héro charbon, encre sur le béton) */
.btn-contour { color: var(--ink); }
.btn-contour:hover { border-color: var(--accent); }

/* Les sections se suivent sur des gris clairs proches : un filet 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(--line); }

/* ---------- services : traits fins d'encre, comme un bordereau ---------- */
.service { border-top: 1px solid var(--ink); }
.service:last-child { border-bottom: 1px solid var(--ink); }
.service h3 { color: var(--ink); }
.service-photo img { box-shadow: 0 0 0 1px var(--filet); }
.services-cartes .service { box-shadow: 0 12px 30px rgba(30, 31, 29, 0.08); }
/* Variante « cartes » : la rubalise passe entre la photo et le texte, comme collée sur la carte
   (un fond sur .service appellerait une marge intérieure, voir controle.js : rien ici). */
.services-cartes .service-texte { position: relative; }
.services-cartes .service-texte::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--rubalise); }

/* ---------- engagements : plaques blanches, rubalise sur l'arête haute ----------
   Fond et cadre appellent une marge intérieure (garde-fou de outils/controle.js). Le raccourci
   « border » écrase le filet d'accent en tête posé par base.css : ici l'accent devient la
   rubalise du bord. */
.engagement {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: 0; padding: 28px 24px 26px; box-shadow: 0 12px 30px rgba(30, 31, 29, 0.06);
}
.engagement::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 6px; background: var(--rubalise); }

/* ---------- 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 : 0,7 rem en police étroite ne se lit pas, elles passent en Chivo */
.duo-etiquette { font-family: var(--font-body); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.08em; padding: 5px 12px; }

/* ---------- zone et avis ---------- */
.zone-villes { font-family: var(--font-body); text-transform: uppercase; font-weight: 700; font-size: 1rem; letter-spacing: 0.04em; }
.avis-item { position: relative; border-left: 0; padding-left: 24px; }
.avis-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: var(--rubalise); }

/* ---------- contact : étiquettes en petites capitales, champs blancs ----------
   Le grand numéro reste en encre : un accent clair (jaune, orange) assombri par le build ne
   tient pas sur le béton clair, l'encre tient toujours. */
.contact-tel { color: var(--ink); letter-spacing: 0.02em; }
.contact-form label { text-transform: uppercase; font-size: 0.82rem; letter-spacing: 0.09em; color: var(--muted); font-weight: 700; }
/* les champs héritent de l'étiquette : on leur rend une taille et une casse normales */
.contact-form input, .contact-form textarea {
  font-size: 1rem; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink);
  border-color: #B9B7AF;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #8E908B; }
.champ-option { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* ---------- pied charbon : les jetons repassent en clair pour que tout reste lisible ---------- */
.site-footer {
  border-top: 0; color: var(--charbon-muted);
  --ink: var(--charbon-ink); --muted: var(--charbon-muted); --accent-fonce: var(--accent-vif, var(--accent));
}
.site-footer .footer-nap strong { color: var(--charbon-ink); font-family: var(--font-body); font-weight: 700; text-transform: uppercase; font-size: 1rem; letter-spacing: 0.03em; }

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

/* Téléphone : la police étroite tient plus de signes par ligne, le titre du héro peut monter
   au-dessus du plafond commun de base.css sans repousser le bouton d'appel sous le pli. */
@media (max-width: 960px) {
  /* la photo en bandeau file bord à bord sur téléphone : le bloc décalé sortirait de l'écran */
  .hero-bandeau .hero-photo { box-shadow: none; }
}
@media (max-width: 720px) { .site-header .brand-name { font-size: 1.05rem; } .site-header .header-tel { font-size: 0.98rem; } .site-header::before { height: 4px; } }
@media (max-width: 520px) {
  .hero h1 { font-size: clamp(2rem, 9vw, 2.45rem); line-height: 1; }
  .hero .hero-metier { letter-spacing: 0.1em; font-size: 0.76rem; }
  .hero-scinde .hero-photo { box-shadow: 7px 7px 0 var(--accent); }
  h2 { font-size: 1.75rem; }
  .btn { font-size: 0.94rem; letter-spacing: 0.04em; }
}

/* réglages de style de la fiche */
:root { --radius-img: 0; --radius-photo: 0; --radius: 4px; }
.site-header { background: #1E2226; border-bottom-color: rgba(255, 255, 255, 0.12); }
.site-header .brand-name { color: #FFFFFF; }
.site-header .brand-logo { background: #FFFFFF; padding: 5px 9px; }

/* accent client */
:root { --accent: #ff5a00; --accent-fonce: #b84000; --accent-vif: #ff5a00; --sur-accent: #FFFFFF; --sobre-bg: #030202; --sobre-accent: #e59d76; }
.site-header .header-tel { color: #ff5a00; }
:root { --marque-fond: #ffffff; }
:root { --logo-ratio: 0.98; }
:root { --entete-logo-ratio: 0.87; }

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

/* DA libre du client (content.json → style.css) */
body { font-family: 'Roboto', sans-serif; } h1, h2, h3, h4, .brand-name { font-family: 'Oswald', sans-serif; text-transform: uppercase; }