/*FONTS https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap */
/* COBALT : clair et précis, le plan d'exécution sur papier (plaquiste, électricien, plombier,
   climatisation, menuiserie alu, maître d'œuvre). Papier gris-bleu quadrillé au héro, bandeau et
   pied en bleu de travail, titres lourds en bas de casse, cote de plan devant chaque titre et
   repères à chasse fixe : la page se lit comme un plan. */

/* 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 : un marine natif, jugé trop proche de
   Qualiplaq (« il ne s'agit pas de refaire ce site-là »). Cobalt prend donc le contre-pied : le
   plan lui-même, en clair. Papier gris-bleu, quadrillage à peine visible sous le héro, encre
   marine, et le bleu de travail réservé au bandeau et au pied de page. Titres en Familjen
   Grotesk, une grotesque suédoise lourde en bas de casse ; repères en JetBrains Mono, une chasse
   fixe qui donne aux numéros de téléphone, aux villes et aux étiquettes l'allure d'un cartouche.
   Une seule idée graphique, la cote de plan (un trait entre deux repères) devant chaque titre,
   reprise en double cadre de cartouche autour des photos et des plaques. Studio est le voisin
   (bandeau marine sur page blanche) : ici le papier est teinté, le héro quadrillé, la police en
   bas de casse et le mono partout, rien ne se confond. */

:root {
  --bg: #F3F5F9;
  /* 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: #F3F5F9;
  --bande-b: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #EDF1F7;
  --ink: #0E1B2C;
  --muted: #52647A;
  --line: #C9D4E2;
  --accent: #B4462E;
  --accent-fonce: #833322;
  --sur-accent: #FFFFFF;
  --font-display: "Familjen Grotesk", "Segoe UI", sans-serif;
  --font-body: "Familjen Grotesk", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Consolas", "Courier New", monospace;
  --poids-titre: 700;
  --radius: 2px;
  --radius-img: 2px;
  --radius-photo: 2px;
  --header-bg: #17397A;
  --footer-bg: #0F2A5C;
  --champ-bg: #FFFFFF;
  --marque-fond: #FFFFFF;
  --vitesse-reveal: 0.45s;
  --sobre-bg: #17397A;
  --sobre-ink: #FFFFFF;
  --sobre-accent: #e48a76;
  /* 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(8, 18, 34, 0.92) 0%, rgba(8, 18, 34, 0.56) 46%, rgba(8, 18, 34, 0.1) 100%);
  /* le filet d'un pixel qui cerne les photos sur le papier : une seule définition */
  --filet: rgba(14, 27, 44, 0.12);
  /* LA SIGNATURE : la cote de plan, un trait horizontal fermé par deux repères verticaux.
     Trois calques d'un pixel, à poser en « background » sur une boîte de la taille voulue.
     Tracée en currentColor, donc dans l'encre du texte qu'elle accompagne : un trait d'un
     pixel dans la couleur du client (un jaune, un orange) ne se verrait pas sur le papier ;
     la couleur du client est dans les boutons et sous le bandeau. */
  --cote: linear-gradient(currentColor, currentColor) 0 50% / 100% 1px no-repeat, linear-gradient(currentColor, currentColor) 0 0 / 1px 100% no-repeat, linear-gradient(currentColor, currentColor) 100% 0 / 1px 100% no-repeat;
  /* les zones bleu de travail (bandeau, pied) : une seule palette */
  --bleu-ink: #FFFFFF;
  --bleu-muted: rgba(255, 255, 255, 0.74);
  --bleu-clair: #e48a76;
}

/* Titres lourds, en bas de casse, un peu resserrés : le contraire des capitales de titane. */
h1, h2, h3 { letter-spacing: -0.025em; }
h1 { font-size: clamp(2.3rem, 5.2vw, 3.7rem); line-height: 1.02; }
.hero-scinde h1 { font-size: clamp(1.95rem, 3.3vw, 3rem); }
h2 { font-size: clamp(1.7rem, 3.1vw, 2.35rem); line-height: 1.06; }
h3 { font-weight: 700; font-size: 1.22rem; letter-spacing: -0.015em; }

/* Les repères en chasse fixe : tout ce qui se lit comme une annotation de plan. */
.hero-metier, .zone-villes, .contact-form label, .duo-etiquette, .footer-inner, .site-header .header-tel, .avis-item cite, figcaption, .hero-zone {
  font-family: var(--font-mono);
}

/* LA SIGNATURE DU THÈME : une cote de plan au-dessus de chaque titre de section. */
h2::before { content: ""; display: block; width: 72px; height: 9px; margin-bottom: 20px; background: var(--cote); color: var(--ink); }

/* ---------- bandeau bleu de travail ----------
   Le trait d'accent sous le bandeau est le seul endroit où la couleur du client court sur
   toute la largeur : sur le bleu de travail, un jaune ou un orange y tranche net. */
.site-header { border-bottom: 3px solid var(--accent); }
.site-header .brand-name { color: var(--bleu-ink); font-size: 1.25rem; letter-spacing: -0.02em; }
.site-header .header-tel { color: var(--bleu-ink); font-weight: 600; font-size: 0.98rem; letter-spacing: -0.01em; }
/* Un logo à encre sombre disparaîtrait sur ce bandeau : on le pose sur une pastille blanche. */
.site-header .brand-logo { background: #FFFFFF; padding: 4px 7px; border-radius: 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.site-header.scrolle { box-shadow: 0 2px 20px rgba(14, 27, 44, 0.25); }

/* ---------- héro : la feuille de plan ----------
   Un quadrillage à peine visible (encre à 6 %) sous le héro seulement, comme un calque posé sur
   du papier millimétré. Image de fond seulement : la couleur reste celle de la bande. */
.hero-bandeau, .hero-scinde {
  background-image: linear-gradient(rgba(14, 27, 44, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 27, 44, 0.06) 1px, transparent 1px);
  background-size: 44px 44px;
}
/* L'accroche reste en encre : un accent clair (jaune, orange) assombri par le build ne tient
   pas sur le papier, l'encre tient toujours ; la couleur du client est dans les boutons. */
.hero-metier { color: var(--muted); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.12em; }
.hero-metier::before {
  content: ""; display: inline-block; width: 28px; height: 9px;
  background: var(--cote); margin-right: 12px; vertical-align: -0.02em;
}
.hero-plein .hero-metier { color: var(--bleu-clair); }
.hero-plein .hero-metier, .hero-plein h1, .hero-plein .hero-sous { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }
.hero-plein h1 { max-width: 17ch; }
/* La photo dans un double cadre de cartouche, comme un détail encadré sur le plan. Le contour
   (outline) se dessine hors de la boîte, il n'est pas rogné par l'overflow de la photo. */
.hero-bandeau .hero-photo, .hero-scinde .hero-photo, .hero-photo-entiere .hero-photo {
  outline: 1px solid var(--line); outline-offset: 8px;
  box-shadow: 0 20px 44px rgba(14, 27, 44, 0.14);
}

/* ---------- boutons : en bas de casse, dans la police des titres, à plat ---------- */
.btn { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.005em; padding: 15px 28px; }
.btn-plein { box-shadow: 0 10px 24px rgba(14, 27, 44, 0.16); }
.btn-contour:hover { border-color: var(--accent); }

/* Les sections se suivent sur des papiers 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 ---------- */
.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); }
/* Variante « cartes » : le double cadre du cartouche, en contour (outline), qui ne touche ni
   au fond ni à la marge intérieure de la carte (garde-fou de controle.js sans objet). */
.services-cartes .service { outline: 1px solid var(--line); outline-offset: 4px; box-shadow: 0 12px 30px rgba(14, 27, 44, 0.07); }

/* ---------- engagements : cartouches blancs à double cadre ----------
   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 c'est le double cadre
   qui distingue la plaque, l'accent reste aux cotes et aux boutons. */
.engagement {
  background: var(--surface); border: 1px solid var(--line);
  outline: 1px solid var(--line); outline-offset: 4px;
  border-radius: 2px; padding: 24px 24px 26px;
}

/* ---------- 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 { font-size: 0.76rem; letter-spacing: 0.02em; }
.duo-etiquette { font-weight: 600; font-size: 0.66rem; letter-spacing: 0.1em; }

/* ---------- zone et avis ---------- */
.zone-villes { font-weight: 500; font-size: 0.84rem; letter-spacing: 0.08em; text-transform: uppercase; }
.avis-item { position: relative; border-left: 0; padding: 22px 0 0; }
.avis-item::before { content: ""; position: absolute; left: 0; top: 0; width: 44px; height: 9px; background: var(--cote); }
.avis-item cite { font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- contact : le numéro en chasse fixe et en encre, comme sur un cartouche ---------- */
.contact-tel { font-family: var(--font-mono); font-weight: 600; color: var(--ink); letter-spacing: -0.03em; font-size: clamp(1.6rem, 3.6vw, 2.3rem); }
.contact-form label { text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.1em; color: var(--muted); font-weight: 500; }
/* les champs héritent de l'étiquette : on leur rend la police, la taille et la casse du texte */
.contact-form input, .contact-form textarea {
  font-family: var(--font-body); font-size: 1rem; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink);
  border-color: #B4C2D4;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #8797AC; }
.champ-option { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 0.82rem; }

/* ---------- pied bleu de travail, en chasse fixe, comme la légende d'un plan ---------- */
.site-footer {
  border-top: 0; color: var(--bleu-muted);
  --ink: var(--bleu-ink); --muted: var(--bleu-muted); --accent-fonce: var(--bleu-clair);
}
.footer-inner { font-size: 0.8rem; }
.site-footer .footer-nap strong { color: var(--bleu-ink); font-family: var(--font-display); font-size: 1.05rem; letter-spacing: -0.01em; }

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

@media (max-width: 960px) {
  /* la photo en bandeau file bord à bord sur téléphone : le contour sortirait de l'écran */
  .hero-bandeau .hero-photo { outline: none; }
}
/* Téléphone : la chasse fixe est large, le numéro du bandeau se resserre pour laisser le nom
   sur une ligne (sinon le bandeau grandit et repousse le bouton d'appel sous le pli). */
@media (max-width: 720px) { .site-header .brand-name { font-size: 1rem; } .site-header .header-tel { font-size: 0.84rem; letter-spacing: -0.05em; } }
@media (max-width: 520px) {
  .hero h1 { font-size: clamp(1.8rem, 8.4vw, 2.2rem); line-height: 1.08; }
  .hero .hero-metier { letter-spacing: 0.08em; }
  .hero-scinde .hero-photo { outline-offset: 6px; }
  h2 { font-size: 1.55rem; }
}

/* réglages de style de la fiche */
:root { --radius-img: 0; --radius-photo: 0; --radius: 4px; }
.site-header { background: #1F2529; 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: #B4462E; --accent-fonce: #833322; --accent-vif: #e09686; --sur-accent: #FFFFFF; --sobre-bg: #281410; --sobre-accent: #e48a76; }
.site-header .header-tel { color: #d6735e; }

/* polices réellement chargées (content.json → style.polices) */
:root { --font-display: "Funnel Display", "Segoe UI", sans-serif; --font-body: "Hanken Grotesk", "Segoe UI", sans-serif; }

/* DA libre du client (content.json → style.css) */
/* DA EBM BUILDING (24/09/2026) : les matériaux de ses chantiers bruxellois. Plâtre lissé pour
   la page (le parachèvement), pierre bleue mouchetée pour les zones sombres (ses terrasses),
   brique rouge pour l'accent (ses murs). Funnel Display pour les titres, Hanken Grotesk pour
   le texte. Une seule marque graphique : trois briques en appareil devant chaque titre. */
:root {
  --font-display: "Funnel Display", "Segoe UI", sans-serif;
  --font-body: "Hanken Grotesk", "Segoe UI", sans-serif;
  --font-mono: "Hanken Grotesk", "Segoe UI", sans-serif;
  --bg: #F3F1EC; --bande-a: #F3F1EC; --bande-b: #E8E4DC;
  --surface: #FBFAF7; --surface-2: #EFECE6; --ink: #1B2024; --muted: #565B5F; --line: #D3CDC2;
  --champ-bg: #FBFAF7;
  --pierre: #1F2529; --pierre-2: #2A3137; --footer-bg: #1F2529; --header-bg: #1F2529;
  --poids-titre: 700; --radius: 0; --radius-img: 0; --radius-photo: 0;
  --filet: rgba(27, 32, 36, 0.12);
  --bleu-ink: #F3F1EC; --bleu-muted: rgba(243, 241, 236, 0.72); --bleu-clair: #EDB3A2;
  --granit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 14 0 0 0 -8.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.16'/%3E%3C/svg%3E");
  --platre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .32 0 0 0 0 .28 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --appareil: linear-gradient(var(--accent), var(--accent)) 0 0 / 22px 6px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 25px 0 / 22px 6px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 12px 9px / 22px 6px no-repeat;
}
body { font-family: var(--font-body); font-size: 1.04rem; -webkit-font-smoothing: antialiased; }
.bande-b { background-image: var(--platre); }
h1, h2, h3 { font-family: var(--font-display); }
h1 { font-weight: 800; letter-spacing: -0.035em; line-height: 0.98; }
h2 { font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; font-size: clamp(2rem, 4vw, 3.1rem); margin-bottom: clamp(30px, 4vw, 50px); }
h2::before { width: 47px; height: 15px; margin-bottom: 22px; background: var(--appareil); }
h3 { font-weight: 700; letter-spacing: -0.02em; }
figcaption { font-family: var(--font-body); letter-spacing: 0; font-size: 0.9rem; }
.section-inner { padding-top: clamp(72px, 9vw, 124px); padding-bottom: clamp(72px, 9vw, 124px); }
.services, .galerie, .avant-apres, .apropos, .engagements, .zone, .avis, .video, .contact, .renos { border-top: 0; }

/* bandeau : pierre bleue mouchetée, filet de brique */
.site-header { background-image: var(--granit); border-bottom: 3px solid var(--accent); }
.site-header .brand-name { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.01em; font-size: 1.22rem; }
.site-header .header-tel { font-family: var(--font-body); font-weight: 600; font-size: 1rem; letter-spacing: 0.01em; }

/* boutons */
.btn { font-family: var(--font-body); font-weight: 600; font-size: 1rem; letter-spacing: 0; padding: 16px 26px; border-radius: 0; }
.btn-plein { box-shadow: none; }
.btn-plein:hover { background: var(--accent-fonce, var(--accent)); box-shadow: none; }
.btn-contour { border: 1.5px solid var(--ink); color: var(--ink); }
.btn-contour:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* héro : plâtre lissé, le portrait posé sur une dalle de pierre bleue */
.hero-bandeau, .hero-scinde { background-image: var(--platre); background-size: auto; }
.hero .hero-metier { font-family: var(--font-body); font-size: 1rem; font-weight: 500; letter-spacing: 0.005em; text-transform: none; margin-bottom: 18px; }
.hero .hero-metier::before { content: none; }
.hero-sous { font-size: 1.12rem; line-height: 1.55; }
.hero-bandeau .hero-photo, .hero-scinde .hero-photo, .hero-photo-entiere .hero-photo { outline: 0; box-shadow: none; }
.hero-photo-entiere .hero-photo { isolation: isolate; }
.hero-photo-entiere .hero-photo:has(.hero-personne) img { box-shadow: none; }
.hero-photo-entiere .hero-photo::before {
  content: ""; position: absolute; z-index: -1; inset: -26px 26px 26px -26px;
  background: var(--pierre) var(--granit);
}
.hero-photo-entiere .hero-photo::after {
  content: ""; position: absolute; z-index: -1; left: -26px; top: -26px; width: 47px; height: 15px;
  transform: translate(0, -24px); background: var(--appareil);
}
.hero-photo-entiere .hero-photo .hero-personne { font-size: 0.95rem; font-weight: 600; color: var(--ink); text-align: left; padding-left: 0; }
@media (min-width: 961px) {
  .hero-scinde.hero-photo-entiere { padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(52px, 6vw, 88px); gap: clamp(64px, 8vw, 132px); }
  .hero-scinde.hero-photo-entiere h1 { font-size: clamp(2.7rem, 4.6vw, 4.2rem); max-width: 12ch; }
  .hero-scinde.hero-photo-entiere .hero-sous { max-width: 36ch; margin-top: 24px; }
  .hero-scinde.hero-photo-entiere .hero-actions { margin-top: 34px; }
}
@media (max-width: 960px) {
  .hero-photo-entiere .hero-photo::before { inset: -14px 14px 14px -14px; }
  .hero-photo-entiere .hero-photo::after { content: none; }
  .hero-scinde.hero-photo-entiere .hero-photo { margin-top: 34px; }
  .hero-scinde h1 { font-size: clamp(2.05rem, 9vw, 2.6rem); }
  .hero-sous { font-size: 1.02rem; }
}

/* services : l'index du chantier, grandes photos */
.service, .service:last-child { border-top: 2px solid var(--ink); border-bottom: 0; padding: 30px 0 38px; align-items: start; }
.service { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); }
.service h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.08; margin: 4px 0 14px; }
.service-texte p { font-size: 1.08rem; line-height: 1.6; max-width: 44ch; }
.service-photo img { box-shadow: none; }
@media (max-width: 700px) { .service { grid-template-columns: 1fr; gap: 18px; } }

/* avant / après : le comparateur à gauche, ce qui a été fait à droite */
.duo-consigne { font-size: 1rem; margin-top: calc(-1 * clamp(12px, 2vw, 26px)); }
.duo-etiquette { font-family: var(--font-body); font-weight: 600; letter-spacing: 0.04em; font-size: 0.82rem; padding: 7px 12px; }
.duo figcaption { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; font-size: clamp(1.4rem, 2.3vw, 2rem); line-height: 1.15; color: var(--ink); padding-top: 18px; }
@media (min-width: 900px) {
  .avant-apres .duos { columns: auto; }
  .avant-apres .duo { display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 1fr); column-gap: clamp(48px, 6vw, 96px); align-items: end; margin: 0; }
  .avant-apres .duo figcaption { padding: 0 0 8px; max-width: 16ch; }
}

/* à propos : l'artisan au travail, le récit à côté */
.apropos-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; }
.apropos-photo { position: relative; isolation: isolate; }
.apropos-photo::before { content: ""; position: absolute; z-index: -1; inset: 18px -18px -18px 18px; background: var(--accent); }
.apropos-photo img { box-shadow: none; }
.apropos-texte p { font-size: 1.1rem; line-height: 1.65; max-width: 52ch; }
.apropos-texte p:first-of-type { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.35rem, 2.1vw, 1.7rem); line-height: 1.3; letter-spacing: -0.015em; color: var(--ink); }
@media (max-width: 900px) { .apropos-inner { grid-template-columns: 1fr; } .apropos-photo { margin-right: 22px; margin-bottom: 22px; } }

/* galerie */
.galerie figcaption { font-size: 0.9rem; color: var(--muted); padding-top: 10px; }

/* zone : les trois régions gravées dans la pierre bleue */
.zone-phrase { font-size: 1.12rem; max-width: 52ch; margin-bottom: 30px; }
.zone-villes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  background: var(--pierre) var(--granit); border-bottom: 6px solid var(--accent);
  text-transform: none; letter-spacing: -0.02em;
}
.zone-villes li {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 3vw, 2.6rem);
  color: #F3F1EC; padding: clamp(22px, 3.4vw, 46px) clamp(16px, 2.6vw, 36px);
}
.zone-villes li + li { border-left: 1px solid rgba(243, 241, 236, 0.16); }
.zone-villes li + li::before { content: none; }
@media (max-width: 560px) {
  .zone-villes { grid-template-columns: 1fr; }
  .zone-villes li + li { border-left: 0; border-top: 1px solid rgba(243, 241, 236, 0.16); }
}

/* contact */
.contact-tel { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.025em; font-size: clamp(2rem, 4vw, 3rem); }
.contact-form { background: var(--surface); padding: clamp(24px, 3.5vw, 44px); border: 1px solid var(--line); }
.contact-form label { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 0.92rem; font-weight: 600; color: var(--ink); }
.contact-form input, .contact-form textarea { border-radius: 0; border-color: #C3BCB0; }

/* pied : pierre bleue mouchetée */
.site-footer { background-image: var(--granit); border-top: 3px solid var(--accent); }
.footer-inner { font-family: var(--font-body); font-size: 0.92rem; }
.site-footer .footer-nap strong { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: 0.01em; }
::selection { background: var(--accent); color: #fff; }