/* ===== fonts.css ===== */
/* Polices auto-hébergées (licence SIL OFL 1.1), sous-ensembles latin et latin-ext.
 * Remplacent Google Fonts : plus de feuille tierce bloquant le rendu, plus
 * d'IP visiteur transmise à Google. Polices variables : un fichier couvre
 * toutes les graisses. Noms de fichier versionnés (vN de Google Fonts) :
 * cache long sans risque. Source, à relire pour une mise à jour :
 * https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Plus+Jakarta+Sans:ital,wght@0,400..700;1,400..700&family=JetBrains+Mono:wght@400..500&display=swap */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/bricolage-grotesque-v9-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Bricolage Grotesque (titres), sous-ensemble latin allégé avec fontTools :
 * axe wght limité aux graisses employées (400 à 800, au lieu de 200 à 800),
 * fonctionnalités réduites à kern/mark/mkmk/ccmp/locl (fractions et chiffres
 * tabulaires inutilisés). Axe opsz et jeu de caractères d'origine conservés.
 * 75 → 65 Ko. Découper par graisse a été mesuré contre-productif : le H1
 * (800) et le texte en 400-700 se chargent tous deux avant le LCP. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/bricolage-grotesque-v9-latin-400-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-v24-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-v24-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-v12-latin-ext-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-v12-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-v12-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-v12-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== colors_and_type.css ===== */
/* =====================================================================
   Technopeinture — Colors & Type Tokens
   ---------------------------------------------------------------------
   Design language: confident, professional, French artisan-meets-tech.
   Two souls: SECURITY (deep midnight blue, trust) + RENOVATION (warm
   terracotta, craft, paint). Tied together by warm paper neutrals and
   a near-black "graphite" used for body text instead of pure black.
   ===================================================================== */

/* ---------- Web fonts (auto-hébergées, licence OFL) ---------- */
/* Display: Bricolage Grotesque — a variable grotesque whose name literally
   means "DIY/bâtiment". Bold, grounded, modern. Perfect for a building
   company. Body: Plus Jakarta Sans — clean, neutral, readable. Mono:
   JetBrains Mono for project codes and devis numbers.
   NB : fichiers dans public/fonts, déclarés par css/fonts.css et liés
   dans le <head> (base.html.twig) avec préchargement des deux principaux. */

:root {
  /* =========================================================
     COLOR — BRAND
     ========================================================= */

  /* Anthracite — primary brand. Near-black with the tiniest warm cast,
     used for headlines, deep surfaces, primary CTAs, footer, body. */
  --tp-nuit-950: #0A0A0A;
  --tp-nuit-900: #131312;  /* primary anthracite */
  --tp-nuit-800: #1F1E1D;
  --tp-nuit-700: #2D2C2A;
  --tp-nuit-600: #44423F;
  --tp-nuit-500: #6C6A66;
  --tp-nuit-400: #93908B;
  --tp-nuit-300: #BAB8B3;
  --tp-nuit-200: #DCDAD5;
  --tp-nuit-100: #ECEAE5;
  --tp-nuit-50:  #F5F4F0;

  /* Rouge Signal — the SECURITY accent. A bold red, in the same family
     as Sector Alarm / Verisure / fire-extinguisher red. Reserved for
     security-related surfaces (alarm CTAs, intrusion alerts, sirens,
     security badges) and a few high-emphasis brand moments on the
     marketing site (key word in the hero, primary CTA hover, footer
     mark). Never used for body text or large fills. (Variable kept
     named "brique" for cross-file stability.) */
  --tp-brique-900: #5C0F0A;
  --tp-brique-800: #82150E;
  --tp-brique-700: #A91B12;
  --tp-brique-600: #D62318;  /* primary signal red */
  --tp-brique-500: #E94235;
  --tp-brique-400: #F26B5F;
  --tp-brique-300: #F69489;
  --tp-brique-200: #FBC4BC;
  --tp-brique-100: #FDE0DC;
  --tp-brique-50:  #FEEFEC;

  /* Paper — pure whites and pale neutrals. The "page" of every layout.
     White background, no warm cast — clean, modern. (Variable kept
     named "sable" for cross-file stability.) */
  --tp-sable-900: #1A1A19;
  --tp-sable-800: #2C2B29;
  --tp-sable-700: #45433F;
  --tp-sable-600: #6B6863;
  --tp-sable-500: #908D88;
  --tp-sable-400: #B7B4AF;
  --tp-sable-300: #D9D7D3;
  --tp-sable-200: #ECEAE6;
  --tp-sable-100: #F4F3F1;  /* subtle tinted section / row alt */
  --tp-sable-50:  #FFFFFF;  /* default page background — pure white */
  --tp-sable-0:   #FFFFFF;  /* card / pure white */

  /* Graphite — body text + UI strokes. Near-black. */
  --tp-graphite-900: #131312;
  --tp-graphite-700: #383735;
  --tp-graphite-500: #6B6863;
  --tp-graphite-300: #B7B4AF;
  --tp-graphite-100: #E8E6E2;

  /* Bois — a discreet wood-tone callout for parquet/peinture detail.
     Used very sparingly. (Variable kept named "sauge" for cross-file
     stability.) */
  --tp-sauge-700: #6E5536;
  --tp-sauge-500: #9A7B4F;
  --tp-sauge-300: #CCB58D;
  --tp-sauge-100: #EDE2CC;

  /* =========================================================
     COLOR — SEMANTIC
     ========================================================= */
  --color-bg:           var(--tp-sable-50);
  --color-bg-elevated:  var(--tp-sable-0);
  --color-bg-inverse:   var(--tp-nuit-900);
  --color-bg-muted:     var(--tp-sable-100);

  --color-fg:           var(--tp-graphite-900);    /* body */
  --color-fg-muted:     var(--tp-graphite-500);    /* captions */
  --color-fg-subtle:    var(--tp-sable-500);       /* placeholders */
  --color-fg-inverse:   var(--tp-sable-50);
  --color-fg-brand:     var(--tp-nuit-900);
  --color-fg-accent:    var(--tp-brique-600);

  --color-border:        var(--tp-graphite-100);
  --color-border-strong: var(--tp-sable-300);
  --color-border-inverse: rgba(255, 255, 255, 0.12);

  --color-action:        var(--tp-nuit-900);
  --color-action-hover:  var(--tp-nuit-800);
  --color-action-press:  var(--tp-nuit-950);
  --color-action-fg:     var(--tp-sable-50);

  --color-accent:        var(--tp-brique-600);
  --color-accent-hover:  var(--tp-brique-700);
  --color-accent-press:  var(--tp-brique-800);

  --color-success: #4A6A45;                /* a quiet green, not the bois ocre */
  --color-success-bg: #DDE5D8;
  --color-warning: #C68A2E;
  --color-warning-bg: #F8ECD6;
  --color-danger: var(--tp-brique-700);     /* danger == brand red */
  --color-danger-bg: var(--tp-brique-100);
  --color-info: var(--tp-nuit-700);
  --color-info-bg: var(--tp-nuit-100);

  /* Security-specific live states (alarm panel, camera feed).
     Armed = quiet sauge ("vert validation"), Alert = signal red. */
  --color-armed:    #4A6A45;
  --color-disarmed: var(--tp-graphite-500);
  --color-alert:    var(--tp-brique-600);
  --color-recording: var(--tp-brique-700);

  /* =========================================================
     TYPOGRAPHY — FAMILIES
     ========================================================= */
  --font-display: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-sans:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* =========================================================
     TYPOGRAPHY — SCALE  (mobile-first; bump on >= 768px below)
     ========================================================= */
  --fs-display-xl: 56px;   /* hero headlines */
  --fs-display-lg: 44px;
  --fs-display-md: 36px;
  --fs-h1: 30px;
  --fs-h2: 24px;
  --fs-h3: 20px;
  --fs-h4: 18px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-caption: 13px;
  --fs-overline: 12px;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.02em;
  --ls-overline: 0.14em;

  /* =========================================================
     SPACING (4-pt grid, mobile-first)
     ========================================================= */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* =========================================================
     RADII — restrained, not bubbly. 2026 leans architectural.
     ========================================================= */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-full: 999px;

  /* =========================================================
     SHADOWS — soft, warm-tinted (not blue-black).
     ========================================================= */
  --shadow-xs: 0 1px 2px rgba(43, 38, 32, 0.06);
  --shadow-sm: 0 1px 2px rgba(43, 38, 32, 0.05), 0 2px 4px rgba(43, 38, 32, 0.04);
  --shadow-md: 0 2px 4px rgba(43, 38, 32, 0.06), 0 6px 12px rgba(43, 38, 32, 0.06);
  --shadow-lg: 0 4px 8px rgba(43, 38, 32, 0.06), 0 16px 32px rgba(43, 38, 32, 0.08);
  --shadow-xl: 0 8px 16px rgba(43, 38, 32, 0.08), 0 32px 64px rgba(43, 38, 32, 0.12);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* =========================================================
     ELEVATION — for dark-on-light surface stacking
     ========================================================= */
  --elev-0: var(--tp-sable-50);
  --elev-1: var(--tp-sable-0);
  --elev-2: #FFFFFF;

  /* =========================================================
     MOTION
     ========================================================= */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 320ms;

  /* =========================================================
     LAYOUT
     ========================================================= */
  --container-narrow: 640px;
  --container: 1120px;
  --container-wide: 1280px;
  --gutter: 20px;

  --hit: 44px; /* minimum mobile touch target */
}

/* Bump display sizes on tablet+ */
@media (min-width: 768px) {
  :root {
    --fs-display-xl: 88px;
    --fs-display-lg: 64px;
    --fs-display-md: 48px;
    --fs-h1: 40px;
    --fs-h2: 30px;
    --fs-h3: 22px;
    --gutter: 32px;
  }
}

/* =====================================================================
   SEMANTIC TYPE RULES — drop-in classes the design uses everywhere
   ===================================================================== */

html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.t-display-xl, h1.display {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.035em;
  font-weight: 700;
  color: var(--color-fg-brand);
  text-wrap: pretty;
  font-feature-settings: "ss01";
}
.t-display-lg {
  font-family: var(--font-display);
  font-size: var(--fs-display-lg);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
  font-weight: 700;
}
.t-display-md {
  font-family: var(--font-display);
  font-size: var(--fs-display-md);
  line-height: var(--lh-snug);
  letter-spacing: -0.025em;
  font-weight: 700;
}

.t-h1, h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  font-weight: 600;
  color: var(--color-fg-brand);
}
.t-h2, h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-fg-brand);
}
.t-h3, h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  font-weight: 600;
  color: var(--color-fg);
}
.t-h4, h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  font-weight: 600;
  color: var(--color-fg);
}

.t-body-lg, p.lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-fg);
  text-wrap: pretty;
}
.t-body, p {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--color-fg);
  text-wrap: pretty;
}
.t-body-sm, small {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
  color: var(--color-fg-muted);
}
.t-caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--color-fg-muted);
}
.t-overline {
  font-family: var(--font-sans);
  font-size: var(--fs-overline);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

code, kbd, samp, pre, .t-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--color-fg-accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover {
  color: var(--color-accent-hover);
}

/* Brand accent — use to highlight ONE key word in a headline (the
   "red word" pattern). Bold weight + signal red. */
.t-accent {
  color: var(--tp-brique-600);
  font-weight: 800;
}

/* ===== site.css ===== */
/* ====== Technopeinture marketing site — global ====== */
/* colors_and_type.css est lié juste avant ce fichier dans base.html.twig. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Filet anti-débordement horizontal : « clip » (et non « hidden ») pour
   neutraliser tout dépassement latéral sans créer de conteneur de défilement,
   ce qui préserve le position: sticky du header. */
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ====== Layout primitives ====== */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container-wide {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section { padding: 64px 0; }
@media (min-width: 768px) { .section { padding: 112px 0; } }
.section.tight { padding: 48px 0; }
@media (min-width: 768px) { .section.tight { padding: 80px 0; } }

.section-overline {
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tp-brique-600);
  margin-bottom: 16px;
  display: inline-flex; align-items: center; gap: 10px;
}
.section-overline::before {
  content: ""; width: 24px; height: 1px; background: var(--tp-brique-600);
}
.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-display-md);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-fg-brand);
  font-weight: 400;
  margin: 0 0 16px;
  text-wrap: balance;
}
.section-title em { font-style: italic; color: var(--tp-brique-600); }
.section-lead {
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-fg-muted);
  max-width: 56ch;
  text-wrap: pretty;
  margin: 0;
}

/* ====== Buttons (shared with preview/buttons.html) ====== */
.btn {
  --bg: var(--tp-nuit-900); --fg: var(--tp-sable-50);
  --bg-h: var(--tp-nuit-800); --bg-p: var(--tp-nuit-950);
  --border: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 500;
  letter-spacing: -0.005em;
  transition: background var(--t-base) var(--ease-out), transform var(--t-fast) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
  white-space: nowrap;
}
.btn:hover { background: var(--bg-h); }
.btn:active { background: var(--bg-p); transform: translateY(1px); }
.btn.secondary {
  --bg: var(--tp-sable-50); --fg: var(--tp-nuit-900);
  --bg-h: var(--tp-sable-100); --bg-p: var(--tp-sable-200);
  --border: var(--tp-graphite-100);
}
.btn.accent {
  --bg: var(--tp-brique-600); --fg: var(--tp-sable-50);
  --bg-h: var(--tp-brique-700); --bg-p: var(--tp-brique-800);
}
.btn.ghost {
  --bg: transparent; --fg: var(--tp-nuit-900);
  --bg-h: rgba(17,27,46,0.06); --bg-p: rgba(17,27,46,0.1);
}
.btn.on-dark {
  --bg: var(--tp-sable-50); --fg: var(--tp-nuit-900);
  --bg-h: white; --bg-p: var(--tp-sable-100);
}
.btn.on-dark.ghost {
  --bg: transparent; --fg: var(--tp-sable-50);
  --bg-h: rgba(255,255,255,0.08); --bg-p: rgba(255,255,255,0.14);
  --border: rgba(255,255,255,0.18);
}
.btn .ico { width: 18px; height: 18px; }

/* ====== Lucide icon sizing ====== */
[data-lucide] { width: 20px; height: 20px; stroke-width: 1.5; }

/* ====== Reveal on scroll ====== */
.reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ====== Conversion : barre d'action mobile + WhatsApp flottant ====== */
/* Barre collée en bas sur mobile. z-index < bandeau cookies (qui couvre
   pendant le choix, puis disparaît). */
.tp-actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; gap: 1px;
  background: var(--color-border);
  border-top: 1px solid var(--color-border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -4px 16px rgba(43, 38, 32, 0.10);
}
.tp-actionbar-btn {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  padding: 9px 4px 8px; min-height: 56px;
  background: var(--color-bg-elevated); color: var(--color-fg);
  font-size: 12px; font-weight: 700; line-height: 1;
}
.tp-actionbar-btn i, .tp-actionbar-btn svg { width: 20px; height: 20px; }
.tp-actionbar-btn--cta { background: var(--color-accent); color: var(--color-action-fg); }
.tp-actionbar-btn:active { filter: brightness(0.94); }

/* Le contenu ne doit pas passer sous la barre fixe (mobile uniquement). */
@media (max-width: 767px) { body { padding-bottom: 60px; } }

/* Barre d'action : mobile uniquement. */
@media (min-width: 768px) { .tp-actionbar { display: none; } }

/* ===== marketing.css ===== */
/* ============================================================
   Technopeinture — règles responsive de la page marketing.
   Extraites des <style> embarqués du design source (JSX).
   Le reste du style vient de site.css + colors_and_type.css
   et des styles inline fidèles au design.
   ============================================================ */

/* ---- Header : nav desktop vs bouton mobile ----
   (états de base de .nav-desktop / .site-header plus bas, section
   « STYLES EXTRAITS DES TEMPLATES ») */
@media (min-width: 900px) {
  .nav-desktop { display: flex !important; }
  .nav-mobile-btn { display: none !important; }
}

/* Bordure du header qui s'affirme au scroll */
.site-header.is-scrolled { border-bottom: 1px solid var(--color-border); }

/* Drawer mobile */
.drawer { animation: drawerIn 240ms var(--ease-out); }
@keyframes drawerIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Services ---- */
.services-grid { grid-template-columns: 1fr; }
.services-side { grid-template-columns: 1fr; }
@media (min-width: 1024px) {
  .services-grid { grid-template-columns: 1.3fr 1fr !important; }
  .services-side { grid-template-columns: 1fr !important; grid-auto-rows: 1fr !important; }
}

/* ---- Process : timeline 4 étapes ---- */
.steps { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(4, 1fr) !important; gap: 24px !important; }
  .steps > li {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;
    gap: 16px !important;
    border-top: none !important;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    padding: 4px 0 4px 22px !important;
  }
  .steps > li:first-child { border-left: none; padding-left: 0 !important; }
}

/* ---- Chantiers : carrousel horizontal ---- */
.chantiers-track { scrollbar-width: none; }
.chantiers-track::-webkit-scrollbar { display: none; }

/* ---- Contact ---- */
.contact-grid { grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1fr 1.1fr !important; gap: 80px !important; }
}

/* ---- Footer ---- */
.footer-grid { grid-template-columns: 1fr 1fr; }
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr 1.3fr !important; gap: 32px !important; }
  .footer-grid > div:first-child { grid-column: 1 / 2 !important; }
}

.chantier-card {
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base);
}
.chantier-card:hover { box-shadow: var(--shadow-md); }

/* Pagination du carrousel chantiers — boutons cliquables */
.chantiers-dot {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--tp-sable-300);
  cursor: pointer;
  transition: width var(--t-base) var(--ease-out), background var(--t-base);
}
.chantiers-dot:hover { background: var(--tp-nuit-400); }
.chantiers-dot.is-active {
  width: 22px;
  background: var(--tp-nuit-900);
  cursor: default;
}
.chantiers-dot:focus-visible {
  outline: 2px solid var(--tp-nuit-900);
  outline-offset: 2px;
}

/* Flèches prev/next : état désactivé aux extrémités */
.chantiers-nav:disabled,
.chantiers-nav[aria-disabled="true"] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Champs du formulaire de contact (sur fond sombre) */
.field-input {
  appearance: none;
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--tp-sable-50);
  outline: none;
}
.field-input:focus { border-color: rgba(255, 255, 255, 0.4); }
.field-input::placeholder { color: var(--tp-nuit-400); }
.field-input option { color: #000; }
textarea.field-input { min-height: 110px; resize: vertical; }

/* ============================================================
   Correctifs boutons
   ============================================================ */

/* #4 — Au survol, la règle globale a:hover (colors_and_type.css) écrasait
   la couleur du texte des boutons-liens (texte = couleur de fond → invisible,
   très visible sur le bouton accent rouge). On restaure le texte du bouton. */
a.btn:hover,
a.btn:active {
  color: var(--fg);
}

/* #3 — CTA "Devis gratuit" du header : par défaut noir/texte blanc ;
   au survol/clic, inversion → fond blanc, texte noir, légère bordure. */
a.btn.btn-invert:hover,
a.btn.btn-invert:active {
  background: var(--tp-sable-50);
  color: var(--tp-nuit-900);
  border-color: var(--tp-graphite-300);
}

/* ============================================================
   Formulaire de contact — validation, autocomplétion, succès
   (fond sombre : rouge = brique, vert = vert de marque éclairci)
   ============================================================ */

/* Champ en erreur (posé par le JS au blur/submit et par le serveur en SSR) */
.field-input.is-invalid,
.field-input.is-invalid:focus {
  border-color: var(--tp-brique-500);
  background: rgba(233, 66, 53, 0.06);
}

/* Message d'erreur sous le champ — masqué tant qu'il est vide (pas de blanc) */
.field-error {
  font-size: 12px;
  line-height: 1.35;
  color: var(--tp-brique-300);
}
.field-error:empty { display: none; }

/* Bandeau d'erreur global */
.form-global-error {
  background: rgba(214, 35, 24, 0.12);
  border: 1px solid rgba(214, 35, 24, 0.4);
  color: var(--tp-brique-200);
  padding: 14px 16px;
  border-radius: 8px;
  font-size: 14px;
}
.form-global-error[hidden] { display: none; }

/* --- Autocomplétion adresse (Base Adresse Nationale) --- */
.adr-wrap { position: relative; display: block; }

.adr-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 4px;
  list-style: none;
  max-height: 248px;
  overflow-y: auto;
  background: #1A1A19;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.5);
}
.adr-suggest[hidden] { display: none; }

.adr-suggest li {
  padding: 9px 12px;
  border-radius: 5px;
  font-size: 14px;
  color: var(--tp-sable-100);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.adr-suggest li small { color: var(--tp-nuit-300); }
.adr-suggest li:hover,
.adr-suggest li.is-active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--tp-sable-0);
}
.adr-suggest li.is-empty {
  color: var(--tp-nuit-300);
  cursor: default;
  font-style: italic;
}

/* --- Compteur de caractères (temps réel) --- */
.char-counter {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}
.char-counter.is-bad { color: var(--tp-brique-300); }
.char-counter.is-ok  { color: #8FB98A; }

/* --- Carte de confirmation : compacte & centrée --- */
.contact-sent { display: flex; justify-content: center; }
.contact-sent[hidden] { display: none; }

.contact-sent-card {
  max-width: 420px;
  width: 100%;
  margin: 8px auto;
  padding: 28px 24px;
  text-align: center;
  background: rgba(74, 106, 69, 0.16);
  border: 1px solid rgba(143, 185, 138, 0.45);
  border-radius: 12px;
}
.contact-sent-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: rgba(143, 185, 138, 0.18);
  color: #9FCB97;
}
.contact-sent-icon i,
.contact-sent-icon svg { width: 22px; height: 22px; stroke-width: 2.25; }
.contact-sent-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tp-sable-0);
}
.contact-sent-text {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tp-nuit-200);
}

/* ============================================================
   STYLES EXTRAITS DES TEMPLATES
   ------------------------------------------------------------
   Auparavant en `style="..."` inline dans les .twig. Décorrélés
   ici : le HTML ne porte plus que des classes. Fidèle au design
   d'origine (mêmes valeurs, au pixel près).
   ============================================================ */

/* ---- Petits utilitaires partagés ---- */
.tp-relative { position: relative; }
.tp-fill { position: absolute; inset: 0; width: 100%; height: 100%; }
.tp-accent-500 { color: var(--tp-brique-500); }

/* Voile de grain (calque décoratif sombre) */
.tp-grain {
  position: absolute; inset: 0;
  background: url('/assets/pattern-grain.svg?v=1789721225');
  mix-blend-mode: overlay; pointer-events: none;
  opacity: .4;
}
.tp-grain--strong { opacity: .45; }
.tp-grain--soft   { opacity: .35; }

/* Grand numéro fantôme de section */
.tp-ghost {
  position: absolute; top: 32px;
  font-family: var(--font-display); font-weight: 800;
  line-height: .85; letter-spacing: -.06em;
  user-select: none; pointer-events: none;
}
.tp-ghost--dark  { color: rgba(255, 255, 255, .04); font-size: 280px; }
.tp-ghost--light { color: rgba(19, 19, 18, .035);  font-size: 240px; }
.tp-ghost--tl    { left: -16px; }
.tp-ghost--tr    { right: -16px; }
.tp-ghost--tr-sm { right: -8px; }

/* Variantes de taille de bouton (s'ajoutent à .btn) */
.btn-lg    { min-height: 52px; font-size: 15px; }
.btn-md    { min-height: 46px; }
.btn-sm    { min-height: 44px; padding: 0 18px; font-size: 14px; }
.btn-block { width: 100%; }
.btn-fit   { width: fit-content; }
.btn-px-lg { padding: 0 26px; }

/* ---- Logo (clair / inversé, sans calcul Twig) ---- */
.tp-logo {
  --logo-ink: #131312;
  --logo-paper: #F8F7F5;
  --logo-tagline: #6B6863;
  display: inline-flex; align-items: center; gap: 10px;
  line-height: 1; color: var(--logo-ink);
}
.tp-logo--inverted {
  --logo-ink: #FFFFFF;
  --logo-paper: #131312;
  --logo-tagline: #BAB8B3;
}
.tp-logo:hover { color: var(--logo-ink); }
.tp-logo-shield { fill: var(--logo-ink); }
.tp-logo-arc    { stroke: var(--logo-paper); }
.tp-logo-paper  { fill: var(--logo-paper); }
.tp-logo-text {
  display: inline-flex; flex-direction: column;
  align-items: flex-start; gap: 2px;
}
.tp-logo-name {
  font-family: var(--font-display); font-weight: 800;
  font-size: 19px; letter-spacing: -0.04em;
  color: var(--logo-ink); line-height: 1;
}
.tp-logo-tagline {
  font-family: var(--font-display); font-weight: 500;
  font-size: 9.5px; letter-spacing: -0.005em;
  color: var(--logo-tagline); line-height: 1;
}

/* ---- Header ---- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  transition: border-color var(--t-base);
  border-bottom: 1px solid rgba(232, 230, 226, 0.4);
}
.site-header-bar {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
.nav-desktop { display: none; gap: 4px; align-items: center; }
.nav-link {
  padding: 8px 14px; font-size: 14px; font-weight: 500;
  color: var(--color-fg); border-radius: 6px;
}
.nav-link:hover { color: var(--color-fg); }
.nav-cta { margin-left: 12px; min-height: 40px; padding: 0 18px; font-size: 14px; }
.nav-mobile-btn {
  background: transparent; border: 1px solid var(--color-border);
  width: 44px; height: 44px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Drawer mobile */
.drawer {
  position: fixed; inset: 72px 0 0 0; z-index: 49;
  background: var(--color-bg); overflow-y: auto;
  padding: 24px var(--gutter) 40px;
  animation: drawerIn 240ms var(--ease-out);
}
.drawer-nav { display: flex; flex-direction: column; gap: 4px; }
.drawer-link {
  padding: 18px 4px; font-family: var(--font-display); font-size: 28px;
  color: var(--color-fg-brand); border-bottom: 1px solid var(--color-border);
  display: flex; align-items: baseline; justify-content: space-between;
}
.drawer-link:hover { color: var(--color-fg-brand); }
.drawer-link-sub { font-family: var(--font-sans); font-size: 12px; color: var(--color-fg-muted); }
.drawer-actions { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }
.drawer-actions .btn { width: 100%; }
.drawer-zone {
  margin-top: 32px; padding: 18px;
  background: var(--tp-nuit-900); color: var(--tp-sable-50);
  border-radius: 12px;
}
.drawer-zone-label {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tp-brique-300); margin-bottom: 8px;
}
.drawer-zone-value { font-family: var(--font-display); font-size: 22px; line-height: 1.15; }

/* ---- Hero ---- */
.hero {
  position: relative; padding-top: 48px; padding-bottom: 64px;
  background: var(--tp-nuit-900); color: var(--tp-sable-0);
  overflow: hidden;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px; border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px; font-size: 12px; color: var(--tp-nuit-300);
  margin-bottom: 32px; font-weight: 500; letter-spacing: -0.005em;
}
.hero-badge-dot { width: 6px; height: 6px; background: var(--tp-brique-500); border-radius: 999px; }
/* Mot composé insécable (« Île-de-France » dans le H1) ; sous 360 px, le mot
   seul dépasserait l'écran : la coupure au trait d'union reste permise. */
@media (min-width: 360px) { .tp-nowrap { white-space: nowrap; } }
.hero-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-display-xl); line-height: 0.95;
  letter-spacing: -0.045em; color: var(--tp-sable-0);
  margin: 0; max-width: 13ch; text-wrap: balance;
}
.hero-lead {
  margin-top: 28px; max-width: 46ch; font-size: 18px;
  line-height: 1.55; color: var(--tp-nuit-200); text-wrap: pretty;
}
.hero-cta { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-media {
  margin-top: 48px; position: relative; aspect-ratio: 16 / 9;
  border-radius: 14px; overflow: hidden;
  background: linear-gradient(135deg, #44423F 0%, #1F1E1D 60%, #131312 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
/* Photo de fond pilotée au BO : remplace l'illustration, surimpressions
   conservées. Voile bas pour la lisibilité du badge / de la légende. */
.hero-media.has-photo {
  background: #1F1E1D center / cover no-repeat var(--hero-img);
}
.hero-media.has-photo .hero-illu { display: none; }
.hero-media.has-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(19, 19, 18, 0.28) 0%, rgba(19, 19, 18, 0) 32%, rgba(19, 19, 18, 0) 60%, rgba(19, 19, 18, 0.55) 100%);
  pointer-events: none;
}
.hero-sec-tag {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  background: var(--tp-brique-600); color: #fff;
  font-family: var(--font-sans); font-weight: 700; font-size: 10px;
  letter-spacing: 0.16em; padding: 4px 10px 5px; border-radius: 4px;
}
.hero-media-caption {
  position: absolute; left: 18px; bottom: 18px; z-index: 2;
  color: var(--tp-sable-0); font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  opacity: 0.85;
}

/* ---- Services ---- */
.services { position: relative; background: var(--tp-sable-0); overflow: hidden; }
.services-head { max-width: 720px; margin-bottom: 48px; }
.services-grid { display: grid; gap: 16px; align-items: stretch; }
.service-featured {
  background: var(--tp-sable-0); border: 1px solid var(--color-border);
  border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column;
}
.service-featured-media {
  position: relative; aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #44423F 0%, #1F1E1D 100%);
  border-bottom: 1px solid var(--color-border);
}
.service-featured-tag {
  position: absolute; top: 16px; left: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(248, 247, 245, 0.1); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.16); color: var(--tp-sable-0);
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase;
}
.service-featured-tag i { width: 12px; height: 12px; stroke-width: 2; }
.service-featured-code {
  position: absolute; bottom: 14px; right: 14px;
  font-family: var(--font-mono); font-size: 11px;
  color: rgba(248, 247, 245, 0.7); letter-spacing: 0.06em;
}
.service-featured-body { padding: 28px 28px 24px; display: flex; flex-direction: column; flex: 1; }
.service-featured-title {
  margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: 48px; line-height: 0.95; letter-spacing: -0.04em;
  color: var(--color-fg-brand); text-wrap: balance;
}
.service-featured-intro {
  margin: 14px 0 22px; max-width: 46ch; font-size: 16px;
  line-height: 1.55; color: var(--color-fg-muted); text-wrap: pretty;
}
.service-featured-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.service-featured-list li {
  padding: 12px 0; border-top: 1px solid var(--color-border);
  display: grid; grid-template-columns: 20px 1fr; gap: 12px;
}
.service-feat-plus {
  margin-top: 3px; color: var(--tp-graphite-900);
  font-family: var(--font-mono); font-size: 14px; font-weight: 600;
}
.service-feat-name { font-size: 14px; font-weight: 600; color: var(--color-fg); }
.service-feat-desc { margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--color-fg-muted); }
.service-featured-cta { margin-top: 22px; width: fit-content; min-height: 46px; }
.services-side { display: grid; gap: 16px; }
.service-card {
  position: relative; background: var(--tp-sable-0);
  border: 1px solid var(--color-border); border-radius: 16px;
  padding: 24px 22px; display: flex; flex-direction: column; flex: 1;
}
.service-sec-tag {
  position: absolute; top: 0; right: 24px;
  background: var(--tp-brique-600); color: #fff;
  font-family: var(--font-sans); font-weight: 700; font-size: 10px;
  letter-spacing: 0.16em; padding: 4px 10px 5px;
  border-radius: 0 0 4px 4px; z-index: 1;
}
.service-card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.service-card-cat {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-fg-muted); font-weight: 600;
}
.service-card-ico {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--tp-sable-100); border: 1px solid var(--color-border);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--tp-graphite-900);
}
.service-card-ico.is-accent { color: var(--tp-brique-600); }
.service-card-ico i { width: 18px; height: 18px; stroke-width: 1.5; }
.service-card-title {
  margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: 28px; line-height: 0.98; letter-spacing: -0.035em;
  color: var(--color-fg-brand);
}
.service-card-intro { margin: 10px 0 18px; font-size: 14px; line-height: 1.5; color: var(--color-fg-muted); }
.service-card-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; flex: 1; }
.service-card-list li {
  padding: 10px 0; border-top: 1px solid var(--color-border);
  font-size: 13px; font-weight: 600; color: var(--color-fg);
  display: flex; justify-content: space-between; gap: 12px;
}
.service-card-item-desc {
  font-weight: 400; color: var(--color-fg-muted);
  font-size: 12px; text-align: right; flex: 1;
}
.service-card-cta { margin-top: 16px; width: fit-content; }

/* ---- Process ---- */
.process { background: var(--tp-nuit-900); color: var(--tp-sable-0); position: relative; overflow: hidden; }
.process-head { max-width: 720px; margin-bottom: 56px; }
.process-overline {
  font-size: 12px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--tp-brique-400);
  margin-bottom: 16px; display: inline-flex; align-items: center; gap: 10px;
}
.process-overline-rule { width: 24px; height: 1px; background: var(--tp-brique-400); }
.process-title {
  margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-display-md); line-height: 0.98;
  letter-spacing: -0.04em; color: var(--tp-sable-0); text-wrap: balance;
}
.process-lead {
  margin: 16px 0 0; max-width: 54ch; font-size: 17px;
  line-height: 1.55; color: var(--tp-nuit-200); text-wrap: pretty;
}
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.steps > li {
  display: grid; grid-template-columns: 72px 1fr; gap: 20px;
  padding: 28px 0; border-top: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}
.step-num {
  font-family: var(--font-display); font-weight: 800; font-size: 56px;
  line-height: 0.9; color: var(--tp-sable-0); letter-spacing: -0.05em;
}
.step-num.is-last { color: var(--tp-brique-500); }
.step-title {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: 22px; line-height: 1.1; letter-spacing: -0.025em;
  color: var(--tp-sable-0);
}
.step-body { margin: 8px 0 0; max-width: 54ch; font-size: 15px; line-height: 1.55; color: var(--tp-nuit-200); }

/* ---- Chantiers ---- */
.chantiers { position: relative; background: var(--tp-sable-0); overflow: hidden; }
.chantiers-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 16px; margin-bottom: 32px;
}
.chantiers-head-text { max-width: 640px; }
.chantiers-nav-group { display: flex; gap: 8px; }
.chantiers-nav { width: 48px; padding: 0; min-height: 48px; }
.chantiers-track {
  display: flex; gap: 14px; overflow-x: auto;
  scroll-snap-type: x mandatory; padding: 4px var(--gutter) 28px;
}
.chantier-card {
  flex: 0 0 auto; width: 280px; scroll-snap-align: start;
  border-radius: 14px; overflow: hidden;
  background: var(--tp-sable-0); border: 1px solid var(--color-border);
  display: flex; flex-direction: column;
}
.chantier-media { position: relative; aspect-ratio: 4 / 5; background: var(--chantier-bg); }
.chantier-sec-tag {
  position: absolute; top: 14px; right: 14px;
  background: var(--tp-brique-600); color: #fff;
  font-family: var(--font-sans); font-weight: 700; font-size: 9px;
  letter-spacing: 0.16em; padding: 3px 7px 4px; border-radius: 3px;
}
.chantier-num {
  position: absolute; top: 14px; left: 14px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(248, 247, 245, 0.85);
}
.chantier-metric {
  position: absolute; bottom: 14px; right: 14px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  color: rgba(248, 247, 245, 0.9); background: rgba(10, 10, 10, 0.4);
  backdrop-filter: blur(4px); padding: 4px 8px; border-radius: 4px;
}
.chantier-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.chantier-cat {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-fg-muted); font-weight: 600;
}
.chantier-title {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: 21px; color: var(--color-fg-brand);
  letter-spacing: -0.025em; line-height: 1.05;
}
.chantier-lieu { font-family: var(--font-mono); font-size: 12px; color: var(--color-fg-muted); }
.chantiers-empty { padding: 40px var(--gutter); color: var(--color-fg-muted); }
.chantiers-track-end { flex: 0 0 4px; }
.chantiers-dots { display: flex; justify-content: center; gap: 6px; margin-top: 4px; }

/* ---- Contact ---- */
.contact { background: var(--tp-nuit-900); color: var(--tp-sable-50); position: relative; overflow: hidden; }
.contact-grid { display: grid; gap: 48px; }
.contact-overline {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tp-brique-500); margin-bottom: 16px; font-weight: 600;
}
.contact-title {
  margin: 0; font-family: var(--font-display); font-size: var(--fs-display-md);
  line-height: 0.98; letter-spacing: -0.04em; font-weight: 800;
  color: var(--tp-sable-0); text-wrap: balance;
}
.contact-lead {
  margin-top: 16px; font-size: 17px; line-height: 1.55;
  color: var(--tp-nuit-200); max-width: 46ch;
}
.contact-items { margin-top: 36px; display: flex; flex-direction: column; gap: 20px; }
.contact-item {
  display: flex; align-items: center; gap: 14px; padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12); color: inherit;
}
.contact-item:hover { color: inherit; }
.contact-item--bottom { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.contact-item-ico {
  width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--tp-brique-300); flex-shrink: 0;
}
.contact-item-ico i { width: 18px; height: 18px; stroke-width: 1.5; }
.contact-item-label {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tp-nuit-300);
}
.contact-item-value { font-size: 17px; margin-top: 2px; }
.contact-item-value--mono { font-family: var(--font-mono); font-size: 19px; }
.field-label {
  font-size: 12px; font-weight: 500; color: var(--tp-sable-200);
  letter-spacing: -0.005em;
}
.contact-form { display: flex; flex-direction: column; gap: 14px; }
.contact-form.is-hidden { display: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-row--cp { grid-template-columns: 140px 1fr; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-help { font-size: 12px; color: var(--tp-nuit-300); }
.field-foot { display: flex; justify-content: space-between; gap: 12px; }
.contact-submit { margin-top: 4px; }
.contact-privacy { font-size: 12px; color: var(--tp-nuit-300); margin-top: 4px; line-height: 1.5; }
/* Piège à robots : retiré du flux, invisible, non focusable visuellement. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

/* ---- Footer ---- */
.site-footer { background: var(--tp-nuit-950); color: var(--tp-nuit-300); padding: 40px 0 24px; }
.site-footer-inner { display: grid; grid-template-columns: 1fr; gap: 32px; }
.footer-grid { display: grid; gap: 24px; }
.footer-brand { grid-column: 1 / -1; }
.footer-tagline {
  margin-top: 14px; font-size: 14px; max-width: 40ch;
  line-height: 1.55; color: var(--tp-nuit-300);
}
.footer-col-title {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tp-nuit-400); margin-bottom: 12px;
}
.footer-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px; font-size: 14px;
}
.footer-link { color: var(--tp-sable-100); }
.footer-link:hover { color: var(--tp-sable-100); }
.footer-link--mono { font-family: var(--font-mono); }
.footer-bottom {
  padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: 12px; font-size: 12px; color: var(--tp-nuit-400);
}
.footer-legal { display: flex; gap: 18px; }
.footer-legal a, .footer-legal-btn { color: var(--tp-nuit-300); }
.footer-legal a:hover, .footer-legal-btn:hover { color: var(--tp-nuit-300); }
.footer-legal-btn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

/* ---- Pages CMS (page/show) ---- */
.cms-hero {
  background: var(--tp-nuit-900); color: var(--tp-sable-0);
  padding: 56px 0; position: relative; overflow: hidden;
}
.cms-hero h1 {
  margin: 0; position: relative;
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-display-md); line-height: 1;
  letter-spacing: -.04em; color: var(--tp-sable-0);
}
.cms-prose { max-width: 760px; font-size: 16px; line-height: 1.7; color: var(--color-fg); }
.cms-prose h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: 24px; letter-spacing: -.03em;
  margin: 36px 0 10px; color: var(--color-fg-brand);
}
.cms-prose h3 { font-weight: 700; font-size: 18px; margin: 26px 0 8px; }
.cms-prose p { margin: 0 0 14px; }
.cms-prose ul, .cms-prose ol { margin: 0 0 14px; padding-left: 22px; }
.cms-prose li { margin: 4px 0; }
.cms-prose a { color: var(--tp-brique-600); text-decoration: underline; }
.cms-prose :first-child { margin-top: 0; }
.cms-back { margin-top: 40px; }

/* ---- Authentification (connexion admin) ---- */
.auth {
  min-height: 100vh; display: flex;
  align-items: center; justify-content: center;
  padding: 24px; background: var(--tp-nuit-900);
}
.auth-box { width: 100%; max-width: 380px; }
.auth-logo { display: flex; justify-content: center; margin-bottom: 28px; }
.auth-form {
  background: var(--tp-sable-0); border: 1px solid var(--color-border);
  border-radius: 16px; padding: 28px 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.auth-eyebrow {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tp-brique-600); font-weight: 600; margin-bottom: 6px;
}
.auth-title {
  margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: 26px; letter-spacing: -0.03em; color: var(--color-fg-brand);
}
.auth-error {
  background: var(--tp-brique-50); border: 1px solid var(--tp-brique-200);
  color: var(--tp-brique-700); padding: 12px 14px;
  border-radius: 8px; font-size: 14px;
}
.auth-label { font-size: 12px; font-weight: 600; color: var(--color-fg-muted); }
.auth-input {
  appearance: none; width: 100%; min-height: 46px; padding: 10px 14px;
  background: var(--tp-sable-50); border: 1px solid var(--color-border-strong);
  border-radius: 6px; font-family: var(--font-sans); font-size: 15px;
  color: var(--color-fg); outline: none;
}
.auth-submit { min-height: 50px; width: 100%; font-size: 15px; margin-top: 4px; }
.auth-back { text-align: center; margin-top: 18px; }
.auth-back a { font-size: 13px; color: var(--tp-nuit-300); }
.auth-back a:hover { color: var(--tp-nuit-300); }

/* ---- Bandeau de réassurance (sous le héro) ---- */
.tp-reassure {
  background: var(--color-bg-muted);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 18px 0;
}
.tp-reassure-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}
@media (min-width: 768px) {
  .tp-reassure-grid { grid-template-columns: repeat(4, 1fr); }
}
.tp-reassure-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; line-height: 1.3; color: var(--color-fg-muted);
}
.tp-reassure-item strong { color: var(--color-fg); }
.tp-reassure-item i { flex: none; width: 20px; height: 20px; color: var(--color-accent); }

/* ---- Page prestation (/prestations/{slug}) ---- */
.tp-svc-items { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 768px) { .tp-svc-items { grid-template-columns: 1fr 1fr; gap: 16px 28px; } }
.tp-svc-item { display: flex; gap: 12px; align-items: flex-start; }
.tp-svc-item i { flex: none; width: 20px; height: 20px; color: var(--color-accent); margin-top: 2px; }
.tp-svc-item-name { font-weight: 700; color: var(--color-fg); }
.tp-svc-item-desc { font-size: 14px; color: var(--color-fg-muted); line-height: 1.5; margin-top: 2px; }

.tp-faq {
  border-bottom: 1px solid var(--color-border);
  padding: 14px 0;
}
.tp-faq summary {
  cursor: pointer; font-weight: 700; color: var(--color-fg);
  list-style: none; display: flex; justify-content: space-between; gap: 12px;
}
.tp-faq summary::-webkit-details-marker { display: none; }
.tp-faq summary::after { content: '+'; color: var(--color-accent); font-weight: 800; }
.tp-faq[open] summary::after { content: '–'; }
.tp-faq p { margin: 10px 0 0; color: var(--color-fg-muted); line-height: 1.6; }

.tp-prose { line-height: 1.7; color: var(--color-fg); }
.tp-prose h2 { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.5px; margin: 28px 0 10px; }
.tp-prose h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin: 22px 0 8px; }
.tp-prose p { margin: 0 0 14px; }
.tp-prose ul { margin: 0 0 14px; padding-left: 20px; }
.tp-prose li { margin: 4px 0; }
.tp-prose a { color: var(--color-accent); }

/* Lien « En savoir plus » sous les CTA des cartes services. */
.service-cta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.service-detail-link { font-size: 13px; font-weight: 700; color: var(--color-accent); }
.service-detail-link:hover { text-decoration: underline; }

/* ---- Avis clients ---- */
/* position: relative + overflow: hidden, comme les autres sections, pour
   contenir le numéro fantôme décoratif (.tp-ghost) qui débordait à droite. */
.avis { position: relative; overflow: hidden; }
.avis-head { max-width: 720px; margin-bottom: 36px; }
.avis-score { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 15px; }
.avis-stars, .avis-card-stars { color: var(--color-border-strong); letter-spacing: 2px; }
.avis-stars .is-on, .avis-card-stars .is-on { color: #E8A33D; }
.avis-count { color: var(--color-fg-muted); }
.avis-grid {
  display: grid; grid-template-columns: 1fr; gap: 18px;
}
@media (min-width: 768px) { .avis-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .avis-grid { grid-template-columns: repeat(3, 1fr); } }
.avis-card {
  margin: 0; padding: 24px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 14px;
}
.avis-card-stars { font-size: 15px; letter-spacing: 2px; }
.avis-card-body { margin: 0; font-size: 15px; line-height: 1.6; color: var(--color-fg); }
.avis-card-meta { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.avis-card-author { font-family: var(--font-display); font-weight: 700; color: var(--color-fg); }
.avis-card-sub { font-size: 13px; color: var(--color-fg-muted); }

/* ---- Pages zones / communes ---- */
.zone-links { display: flex; flex-wrap: wrap; gap: 10px; }
.zone-link {
  display: inline-block; padding: 8px 14px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--color-fg);
}
.zone-link:hover { border-color: var(--color-accent); color: var(--color-accent); }