/* ═══════════════════════════════════════════════════════════════════════
   ENERGALIS — DESIGN SYSTEM v3.2 « SIGNAL »
   Maquette de validation, phase 0 de la refonte Astro.

   CE QUI CHANGE PAR RAPPORT À LA v3.1
   Le retour était « trop léger ». On passe d'un document posé à un site qui
   pousse : photo pleine largeur qui prend tout le premier écran, contraste
   fort entre blocs sombres et blocs clairs, vert vif avec halo, typographie
   géométrique en grandes tailles, et du mouvement partout où il sert.

   PARTI PRIS
   « Signal ». Le bureau mesure et valide. Le vert est le signal de cette
   validation : il éclaire, il pulse, il entoure l'action. Le reste de la page
   est soit nuit profonde (autorité, technique), soit ivoire (lecture,
   respiration). Pas d'entre-deux mou.

   RÈGLE DE CONTRASTE (WCAG AA, secteur YMYL)
     · vert signal en FOND → texte nuit. Jamais de blanc sur vert.
     · vert en TEXTE sur ivoire → --vert-profond #157A43 (4.7:1).
     · vert en TEXTE sur nuit → --vert-signal #39E991 (ratio très large).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. JETONS ──────────────────────────────────────────────────────── */
:root {
  /* Palette officielle Energalis */
  --vert-signal: #39e991;
  --vert-electrique: #4dffa6;
  --vert-fonce: #22c46e;
  --vert-profond: #157a43;
  --vert-tres-profond: #0e5a35;
  --vert-pale: #e8f9ee;
  --vert-100: #c6f2d8;
  --vert-300: #7fe5ab;

  --nuit: #262833;
  --nuit-profond: #14151d;   /* héros, blocs d'autorité */
  --nuit-doux: #1d1e28;
  --nuit-clair: #353744;
  --gris-fonce: #4a4f63;
  --muted: #8a8fa3;

  --ivoire: #f6f4ee;
  --ivoire-warm: #ede9de;
  --carte: #fffefb;
  --ligne: #d8d5ce;
  --ligne-forte: #c3beb3;

  /* Échelle officielle du label PEB wallon — UNIQUEMENT dans l'étiquette */
  --peb-a2: #00a651; --peb-a1: #4cb848; --peb-a: #8cc63f; --peb-b: #cddc39;
  --peb-c: #ffd400; --peb-d: #fbb03b; --peb-e: #f7931e; --peb-f: #f15a29; --peb-g: #ed1c24;

  --font-display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --font-sans: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;

  --max: 1280px;
  --gutter: 28px;
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  --grad-signal: linear-gradient(118deg, var(--vert-electrique) 0%, var(--vert-fonce) 100%);
  --grad-nuit: linear-gradient(165deg, #1b1c26 0%, #14151d 60%, #101119 100%);
  --halo: 0 10px 34px rgba(57, 233, 145, 0.34);
  --halo-fort: 0 14px 48px rgba(57, 233, 145, 0.46);
  --ombre-carte: 0 2px 4px rgba(20, 21, 29, 0.04), 0 18px 46px rgba(20, 21, 29, 0.09);
  --ombre-levee: 0 4px 8px rgba(20, 21, 29, 0.07), 0 30px 70px rgba(20, 21, 29, 0.17);
  --ombre-pill: 0 6px 28px rgba(20, 21, 29, 0.13);

  /* ÉCHELLE DE MOUVEMENT.
     Un seul jeu de durées et deux courbes pour tout le site, sinon chaque
     effet part dans son coin et l'ensemble paraît bricolé.
       --t-fast : retours immédiats (couleur, opacité d'un lien)
       --t      : micro-interactions (survol d'une carte, d'un bouton)
       --t-slow : mouvements structurels (barre de navigation, panneaux)
     `--ease-out` décélère franchement sans jamais dépasser sa cible : c'est
     ce qui donne le côté calibré. `--ease-punch` garde un très léger
     dépassement, réservé aux petits objets cliquables. */
  --t-fast: 160ms;
  --t: 300ms;
  --t-slow: 620ms;
  --ease: cubic-bezier(0.22, 0.74, 0.28, 1);
  --ease-out: cubic-bezier(0.19, 0.72, 0.19, 1);
  --ease-punch: cubic-bezier(0.22, 0.82, 0.3, 1.04);

  --header-h: 92px;
  --header-gap: 18px;
}

/* ── 2. BASE ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 110px; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.68;
  color: var(--gris-fonce);
  background: var(--ivoire);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--nuit);
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.04;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.7rem, 6vw, 5rem); font-weight: 700; }
h2 { font-size: clamp(2.1rem, 4.2vw, 3.5rem); }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); letter-spacing: -0.024em; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
img { max-width: 100%; display: block; }
a { color: var(--vert-tres-profond); }
a:visited { color: inherit; }
strong { color: var(--nuit); font-weight: 700; }
::selection { background: var(--vert-signal); color: var(--nuit); }

:focus-visible { outline: 2px solid var(--vert-fonce); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── 3. VOCABULAIRE ─────────────────────────────────────────────────── */
.mono {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.15em;
  text-transform: uppercase; font-weight: 500;
}

/* Puce d'état, pulsée. */
.dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--vert-signal);
  display: inline-block; flex: none;
  box-shadow: 0 0 0 0 rgba(57, 233, 145, 0.7); animation: pulse 2.6s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(57, 233, 145, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(57, 233, 145, 0); }
  100% { box-shadow: 0 0 0 0 rgba(57, 233, 145, 0); }
}

/* Item de preuve, coché vert. */
/* La pastille est posée en absolu, pas en élément de flex : en flex, un <strong>
   ou un <a> dans la puce devenait une colonne à part et le texte se cassait en
   deux blocs côte à côte. En flux normal, tout l'inline se répartit sur les
   mêmes lignes. */
.tick { position: relative; padding-left: 1.75rem; }
.tick::before {
  content: ""; position: absolute; left: 0; width: 20px; height: 20px; top: 0.22em; border-radius: 50%;
  background: var(--vert-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23157a43' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.on-dark .tick::before, .section--ink .tick::before {
  background-color: rgba(57, 233, 145, 0.16);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2339e991' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* Étiquette de section : trait vert + numéro + libellé. */
.kicker {
  display: inline-flex; align-items: center; gap: 0.7rem;
  color: var(--vert-profond); margin-bottom: 1.1rem;
}
.kicker::before { content: ""; width: 26px; height: 3px; border-radius: 2px; background: var(--grad-signal); }
.section--ink .kicker { color: var(--vert-signal); }

.section { padding-block: clamp(4.2rem, 7vw, 7rem); position: relative; }
.section--warm { background: var(--ivoire-warm); }

/* Section nuit adossée à une photo : la photo reste très en retrait, elle
   donne de la profondeur sans jamais concurrencer le texte. */
.section--photo { isolation: isolate; }
.section--photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--bg-photo) center / cover no-repeat;
  opacity: 0.16;
}
.section--photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(16, 17, 25, 0.82) 0%, rgba(16, 17, 25, 0.94) 60%, #101119 100%);
}
.section--ink { background: var(--grad-nuit); color: rgba(255, 255, 255, 0.7); }
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; }
.section--ink strong { color: #fff; }

.section-head { max-width: 760px; margin-bottom: clamp(2.5rem, 4vw, 3.6rem); }
.section-head p { font-size: 1.1rem; margin-top: 0.9rem; }
.section-head h2 { margin-bottom: 0; }

/* Grand chiffre de section en filigrane. */
.ghost-num {
  position: absolute; right: 2vw; top: 2.5rem; pointer-events: none;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(7rem, 16vw, 15rem);
  letter-spacing: -0.06em; line-height: 1; color: rgba(38, 40, 51, 0.035);
}
.section--ink .ghost-num { color: rgba(255, 255, 255, 0.032); }

/* ── 4. BOUTONS ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; letter-spacing: -0.012em;
  padding: 1.1rem 1.9rem; border-radius: var(--r-pill); border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none; position: relative; overflow: hidden;
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out),
              background-color var(--t) var(--ease-out), border-color var(--t) var(--ease-out),
              color var(--t) var(--ease-out);
}
.btn svg { flex: none; transition: transform var(--t) var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }

.btn--signal { background: var(--grad-signal); color: var(--nuit); box-shadow: var(--halo); }
.btn--signal:hover { transform: translateY(-2px); box-shadow: var(--halo-fort); }
/* Reflet qui traverse le bouton au survol. */
.btn--signal::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);
}
.btn--signal:hover::after { transform: translateX(120%); transition: transform 0.7s var(--ease-out); }

.btn--ghost { background: transparent; color: var(--nuit); border-color: var(--ligne-forte); }
.btn--ghost:hover { border-color: var(--nuit); background: rgba(38, 40, 51, 0.04); transform: translateY(-2px); }
/* Contexte sombre : héros photo, sections nuit, bandeau d'appel. Sans cette
   règle le bouton fantôme garde le texte nuit du thème clair et disparaît
   sur la photo. */
.on-dark .btn--ghost, .section--ink .btn--ghost, .hero .btn--ghost,
.cta-band .btn--ghost, .cookies .btn--ghost, .mobile-nav .btn--ghost {
  color: #fff; border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(6px);
}
.on-dark .btn--ghost:hover, .section--ink .btn--ghost:hover, .hero .btn--ghost:hover,
.cta-band .btn--ghost:hover, .cookies .btn--ghost:hover, .mobile-nav .btn--ghost:hover {
  border-color: var(--vert-signal); background: rgba(57, 233, 145, 0.14); color: var(--vert-signal);
}

.btn--sm { padding: 0.72rem 1.25rem; font-size: 0.94rem; }

.arrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 600; font-size: 0.97rem;
  color: var(--vert-profond); text-decoration: none;
}
.arrow svg { transition: transform var(--t) var(--ease-out); }
.arrow:hover svg { transform: translateX(4px); }
.section--ink .arrow { color: var(--vert-signal); }

/* ── 5. EN-TÊTE FLOTTANT + PROGRESSION ──────────────────────────────── */
/* L'en-tête flottant.
   PIÈGE ÉVITÉ ICI : la première version animait `max-width` et `padding-inline`
   de la pilule. Ce sont des propriétés de mise en page ; le navigateur
   recalculait le flux à chaque image, le contenu se repliait une fraction de
   seconde et la barre semblait enfler puis se rétracter.
   La géométrie du contenu ne bouge donc plus du tout. Seul le FOND de la
   pilule, porté par un pseudo-élément, s'étend jusqu'aux bords, et l'ensemble
   remonte par une simple translation. Deux propriétés compositées, aucun
   recalcul de flux, hauteur rigoureusement constante. */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  padding-top: var(--header-gap); padding-bottom: 0;
}
.site-header__pill {
  position: relative;
  max-width: var(--max); margin-inline: auto;
  display: flex; align-items: center; gap: 1.1rem;
  padding: 0.55rem 0.55rem 0.55rem 1.4rem;
  transform: translateY(0);
  transition: transform var(--t-slow) var(--ease-out);
  will-change: transform;
}
.site-header__pill::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(38, 40, 51, 0.07);
  box-shadow: var(--ombre-pill);
  transition: left var(--t-slow) var(--ease-out), right var(--t-slow) var(--ease-out),
              border-radius var(--t-slow) var(--ease-out),
              background-color var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out),
              border-color var(--t) var(--ease-out);
}

.site-header.is-stuck .site-header__pill { transform: translateY(calc(var(--header-gap) * -1)); }
.site-header.is-stuck .site-header__pill::before {
  left: calc(50% - 50vw); right: calc(50% - 50vw);
  border-radius: 0;
  background: rgba(246, 244, 238, 0.94);
  border-color: transparent; border-bottom-color: rgba(38, 40, 51, 0.09);
  box-shadow: 0 8px 30px rgba(20, 21, 29, 0.1);
}

/* Ligne de progression de lecture, calée sous la barre. */
.progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  /* Pas d'overflow caché ici : la pastille de pourcentage déborde sous la
     barre, et serait rognée. La barre, elle, ne dépasse jamais 100 %. */
  pointer-events: none;
  opacity: 0;
  transform: translateY(0);
  transition: opacity var(--t) var(--ease-out), transform var(--t-slow) var(--ease-out);
}
.site-header.is-stuck .progress {
  opacity: 1;
  transform: translateY(calc(var(--header-gap) * -1));
}
.progress__bar {
  height: 100%; width: 0%;
  background: var(--grad-signal);
  box-shadow: 0 0 12px rgba(57, 233, 145, 0.75);
  transition: width 0.08s linear;
}

/* Le pourcentage suit le bout de la barre. Sa position est calculée en JS et
   bornée entre 3 et 97 % : collé à un bord, la pastille sortirait du cadre. */
.progress__pct {
  position: absolute; top: calc(100% + 5px); left: 0;
  transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--nuit); background: var(--vert-signal);
  padding: 0.16rem 0.42rem; border-radius: var(--r-pill);
  box-shadow: 0 2px 10px rgba(21, 122, 67, 0.35);
  white-space: nowrap; pointer-events: none;
  transition: left 0.08s linear, opacity var(--t) var(--ease-out);
  opacity: 0;
}
.site-header.is-stuck .progress__pct { opacity: 1; }

.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; margin-right: auto; }
.brand__mark {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  background: var(--grad-nuit); display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.brand__name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.2rem;
  letter-spacing: -0.03em; color: var(--nuit); line-height: 1; display: block;
}
.brand__sub {
  font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); display: block; margin-top: 0.3rem;
}

.nav { display: flex; align-items: center; gap: 0.15rem; }
.nav a {
  font-family: var(--font-display); font-weight: 500; font-size: 0.95rem;
  padding: 0.5rem 0.8rem; color: var(--gris-fonce); text-decoration: none;
  border-radius: var(--r-pill); position: relative; transition: color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.nav a:hover { color: var(--nuit); background: rgba(38, 40, 51, 0.05); }
.nav a[aria-current="page"] { color: var(--nuit); font-weight: 600; }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.15rem;
  height: 2px; border-radius: 2px; background: var(--grad-signal);
}

/* Sélecteur de pays. Le pays actif est en vert plein sur texte nuit : c'est le
   seul élément vert plein de l'en-tête, donc on ne peut pas se tromper. Le
   drapeau est là pour la reconnaissance immédiate, le code pour la précision. */
.country {
  display: inline-flex; align-items: center; gap: 2px;
  background: rgba(38, 40, 51, 0.07); border-radius: var(--r-pill); padding: 3px;
  border: 1px solid rgba(38, 40, 51, 0.06);
}
.country a {
  display: inline-flex; align-items: center; gap: 0.42rem;
  padding: 0.38rem 0.7rem; border-radius: var(--r-pill); text-decoration: none;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; font-weight: 500;
  color: var(--muted); white-space: nowrap;
  transition: all var(--t-fast) var(--ease-out);
}
.country a:hover { color: var(--nuit); background: rgba(38, 40, 51, 0.07); }
.country a[aria-current="true"] {
  background: var(--grad-signal); color: var(--nuit); font-weight: 700;
  box-shadow: 0 2px 10px rgba(21, 122, 67, 0.32);
}
.country__flag {
  width: 17px; height: 12px; border-radius: 2px; display: grid; overflow: hidden; flex: none;
  opacity: 0.5; transition: opacity var(--t-fast) var(--ease-out);
}
.country a[aria-current="true"] .country__flag { opacity: 1; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); }
.country a:hover .country__flag { opacity: 0.85; }
.country__flag i { display: block; }
.country__flag--be { grid-template-columns: repeat(3, 1fr); }
.country__flag--lu { grid-template-rows: repeat(3, 1fr); }

.header__tel {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-mono); font-size: 0.82rem; font-weight: 500;
  color: var(--nuit); text-decoration: none; white-space: nowrap;
}
.header__tel svg { color: var(--vert-profond); }
.header__tel:hover { color: var(--vert-profond); }

.burger {
  display: none; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(38, 40, 51, 0.06); cursor: pointer; align-items: center; justify-content: center;
}

/* ── 5bis. MENU MOBILE ──────────────────────────────────────────────── */
.mobile-nav {
  position: fixed; inset: 0; z-index: 95;
  background: var(--grad-nuit);
  display: flex; flex-direction: column;
  padding: 8.5rem var(--gutter) 2.5rem;
  overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity var(--t) var(--ease-out), transform var(--t-slow) var(--ease-out), visibility var(--t);
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
body.nav-open { overflow: hidden; }

.mobile-nav__close {
  position: absolute; top: 20px; right: var(--gutter);
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06); color: #fff;
  display: grid; place-items: center; cursor: pointer;
}
.mobile-nav__brand { position: absolute; top: 22px; left: var(--gutter); }
.mobile-nav__brand img { width: 104px; height: auto; display: block; }

.mobile-nav__links { display: grid; gap: 0.2rem; margin-bottom: 2rem; }
.mobile-nav__links a {
  font-family: var(--font-display); font-size: 1.65rem; font-weight: 600; letter-spacing: -0.03em;
  color: #fff; text-decoration: none; padding: 0.65rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  display: flex; align-items: center; justify-content: space-between;
}
.mobile-nav__links a[aria-current="page"] { color: var(--vert-signal); }
.mobile-nav__links a svg { color: rgba(255, 255, 255, 0.28); }

.mobile-nav__country {
  display: flex; gap: 0.6rem; margin-bottom: 1.6rem;
}
.mobile-nav__country a {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.85rem 1rem; border-radius: var(--r-pill); text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em;
}
.mobile-nav__country a[aria-current="true"] {
  background: var(--grad-signal); color: var(--nuit); font-weight: 700; border-color: transparent;
}
.mobile-nav__foot { margin-top: auto; display: grid; gap: 0.9rem; }
.mobile-nav__foot .btn { width: 100%; }
.mobile-nav__tel {
  font-family: var(--font-mono); font-size: 1.1rem; color: var(--vert-signal);
  text-decoration: none; text-align: center; display: block;
}

/* ── 6. HÉROS PHOTO PLEINE LARGEUR ──────────────────────────────────── */
.hero {
  position: relative; isolation: isolate;
  min-height: min(92vh, 860px);
  display: flex; align-items: flex-end;
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
  color: rgba(255, 255, 255, 0.78);
  overflow: hidden;
}
.hero--compact { min-height: min(72vh, 640px); }

.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
/* Deux voiles superposés : lisibilité garantie + teinte de marque. */
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(16, 17, 25, 0.95) 0%, rgba(16, 17, 25, 0.88) 48%, rgba(16, 17, 25, 0.52) 76%, rgba(16, 17, 25, 0.3) 100%),
    linear-gradient(0deg, rgba(16, 17, 25, 0.75) 0%, transparent 45%),
    radial-gradient(70% 90% at 12% 85%, rgba(57, 233, 145, 0.16) 0%, transparent 62%);
}
/* Léger zoom au chargement : la photo respire. */
.hero__bg img { animation: kenburns 18s var(--ease) both; }
@keyframes kenburns { from { transform: scale(1.08); } to { transform: scale(1); } }

.hero__inner { position: relative; width: 100%; }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(6px);
  padding: 0.5rem 1rem; border-radius: var(--r-pill); margin-bottom: 1.5rem;
  color: rgba(255, 255, 255, 0.9);
}
.hero h1 { color: #fff; margin-bottom: 1.2rem; max-width: 16ch; }
.hero--compact h1 { max-width: 20ch; }
/* Le mot-clé passe en vert lumineux, pas en surligneur. */
.hl { color: var(--vert-signal); text-shadow: 0 0 38px rgba(57, 233, 145, 0.45); }

.hero__lede { font-size: clamp(1.08rem, 1.5vw, 1.24rem); max-width: 56ch; margin-bottom: 2.1rem; color: rgba(255, 255, 255, 0.82); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 2rem; }

.hero__badge {
  display: inline-flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
  font-size: 0.93rem; color: rgba(255, 255, 255, 0.72);
}
.hero__badge .chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid rgba(57, 233, 145, 0.4); background: rgba(57, 233, 145, 0.1);
  color: var(--vert-signal); padding: 0.4rem 0.85rem; border-radius: var(--r-pill);
}

/* Bande de données en verre, ancrée au bas du héros. */
.statstrip {
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.statstrip > div { padding: 1.4rem 1.5rem; border-left: 1px solid rgba(255, 255, 255, 0.12); }
.statstrip > div:first-child { border-left: 0; }
.statstrip__k { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin-bottom: 0.4rem; }
.statstrip__v {
  font-family: var(--font-mono); font-size: clamp(1.05rem, 1.6vw, 1.35rem); font-weight: 600;
  color: #fff; font-variant-numeric: tabular-nums; line-height: 1.2;
}
.statstrip__v em { font-style: normal; color: var(--vert-signal); }

/* ── 7. BANDEAU D'AGRÉMENTS DÉFILANT ────────────────────────────────── */
.ticker {
  background: var(--nuit); overflow: hidden; border-block: 1px solid rgba(255, 255, 255, 0.08);
  padding-block: 0.9rem;
}
.ticker__track {
  display: flex; gap: 3rem; width: max-content;
  animation: slide 34s linear infinite;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.45); white-space: nowrap;
}
.ticker__track span { display: inline-flex; align-items: center; gap: 0.7rem; }
.ticker__track b { color: var(--vert-signal); font-weight: 500; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── 8. CARTES DE SERVICE ───────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.cards--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  position: relative; background: var(--carte);
  border: 1px solid var(--ligne); border-radius: var(--r-lg);
  overflow: hidden; display: flex; flex-direction: column; text-decoration: none;
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out),
              border-color var(--t) var(--ease-out);
}
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 3; pointer-events: none;
  box-shadow: inset 0 0 0 2px transparent; transition: box-shadow var(--t) var(--ease-out);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--ombre-levee); border-color: transparent; }
.card:hover::before { box-shadow: inset 0 0 0 2px var(--vert-signal); }

.card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ivoire-warm); position: relative; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.card:hover .card__media img { transform: scale(1.045); }
.card__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(20, 21, 29, 0.5) 0%, transparent 55%);
}
.card__tag {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  background: rgba(20, 21, 29, 0.78); backdrop-filter: blur(6px);
  color: var(--vert-signal); padding: 0.35rem 0.7rem; border-radius: var(--r-pill);
}
.card__body { padding: 1.5rem 1.5rem 1.7rem; display: flex; flex-direction: column; flex: 1; gap: 0.7rem; }
.card, .card:visited { color: var(--gris-fonce); }
.card h3, .card:visited h3 { margin: 0; color: var(--nuit); }
.card__txt { font-size: 0.96rem; flex: 1; margin: 0; color: var(--gris-fonce); }
.card__foot { margin-top: 0.5rem; }

/* Carte sur fond sombre. */
.section--ink .card {
  background: rgba(255, 255, 255, 0.045); border-color: rgba(255, 255, 255, 0.12);
}
.section--ink .card h3 { color: #fff; }
.section--ink .card, .section--ink .card:visited { color: rgba(255, 255, 255, 0.66); }
.section--ink .card__txt { color: rgba(255, 255, 255, 0.66); }
.section--ink .card:hover { background: rgba(255, 255, 255, 0.07); }

/* Carte sans photo, en liste dense. */
.card--flat .card__body { padding: 1.5rem; }

/* ── 9. BLOC PAYS ───────────────────────────────────────────────────── */
.region-head {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding-bottom: 1.4rem; margin-bottom: 2.4rem;
  border-bottom: 1px solid var(--ligne);
}
.section--ink .region-head { border-bottom-color: rgba(255, 255, 255, 0.14); }
.region-flag {
  width: 46px; height: 32px; border-radius: 6px; flex: none; overflow: hidden;
  display: grid; box-shadow: 0 2px 8px rgba(20, 21, 29, 0.2);
}
.region-flag i { display: block; }
.region-flag--be { grid-template-columns: repeat(3, 1fr); }
.region-flag--lu { grid-template-rows: repeat(3, 1fr); }
.region-head__t { margin-right: auto; }
.region-head h2 { margin-bottom: 0.15rem; }
.region-head__s { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.section--ink .region-head__s { color: rgba(255, 255, 255, 0.45); }

/* ── 10. ÉTIQUETTE ÉNERGÉTIQUE ──────────────────────────────────────── */
.panel {
  background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--r-lg);
  padding: 1.7rem; box-shadow: var(--ombre-carte);
}
.section--ink .panel { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.12); box-shadow: none; }
.panel__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.2rem; flex-wrap: wrap;
  padding-bottom: 1rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--ligne);
}
.section--ink .panel__head { border-bottom-color: rgba(255, 255, 255, 0.14); }

.label__scale { display: grid; gap: 5px; }
.label__row { display: flex; align-items: center; gap: 0.9rem; }
.label__bar {
  height: 32px; display: flex; align-items: center; padding-left: 0.85rem; color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 0.88rem;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}
.label__row--on .label__bar { height: 42px; font-size: 1.05rem; outline: 2px solid var(--nuit); outline-offset: 3px; }
.section--ink .label__row--on .label__bar { outline-color: var(--vert-signal); }
.label__note { font-size: 0.85rem; color: var(--muted); }
.section--ink .label__note { color: rgba(255, 255, 255, 0.6); }

/* Lignes de données clé / valeur. */
.rows { display: grid; }
.row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-block: 0.82rem; border-bottom: 1px dashed var(--ligne);
}
.row:last-child { border-bottom: 0; }
.section--ink .row { border-bottom-color: rgba(255, 255, 255, 0.12); }
.row__k { color: var(--muted); }
.section--ink .row__k { color: rgba(255, 255, 255, 0.45); }
.row__v { font-family: var(--font-mono); font-size: 0.95rem; font-weight: 600; color: var(--nuit); font-variant-numeric: tabular-nums; text-align: right; }
.section--ink .row__v { color: #fff; }

/* ── 11. ÉTAPES ─────────────────────────────────────────────────────── */
.steps { display: grid; gap: 0; }
.step {
  display: grid; grid-template-columns: 4.5rem 1fr; gap: 1.8rem;
  padding-block: 1.9rem; border-top: 1px solid var(--ligne); align-items: start;
  transition: background-color var(--t) var(--ease-out);
}
.step:last-child { border-bottom: 1px solid var(--ligne); }
.section--ink .step { border-color: rgba(255, 255, 255, 0.12); }
.step__n {
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; line-height: 1;
  background: var(--grad-signal); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.step h3 { margin-bottom: 0.3rem; }
.step p { font-size: 0.97rem; margin: 0; max-width: 70ch; }

/* ── 12. FAQ ────────────────────────────────────────────────────────── */
.faq details {
  border: 1px solid var(--ligne); border-radius: var(--r); background: var(--carte);
  padding: 1.15rem 1.4rem; margin-bottom: 0.7rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.faq details[open] { border-color: var(--vert-300); box-shadow: 0 6px 22px rgba(21, 122, 67, 0.09); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.06rem; color: var(--nuit); letter-spacing: -0.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-family: var(--font-mono); font-size: 1.35rem; font-weight: 400;
  color: var(--vert-profond); flex: none; transition: transform var(--t) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq details p { margin-top: 0.9rem; max-width: 76ch; font-size: 0.98rem; }

/* ── 13. COMMUNES / ZONES ───────────────────────────────────────────── */
.communes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.communes a {
  font-family: var(--font-mono); font-size: 0.73rem; letter-spacing: 0.06em;
  padding: 0.52rem 0.85rem; border: 1px solid var(--ligne-forte); border-radius: var(--r-pill);
  color: var(--gris-fonce); text-decoration: none; background: var(--carte);
  transition: all var(--t-fast) var(--ease-out);
}
.communes a:hover { border-color: var(--vert-fonce); color: var(--vert-tres-profond); background: var(--vert-pale); transform: translateY(-2px); }
/* Commune dont la page est déjà publiée : pastille pleine, repérable d'un coup d'œil. */
.communes a.is-live {
  background: var(--grad-signal); border-color: transparent; color: var(--nuit); font-weight: 600;
  box-shadow: 0 4px 14px rgba(21, 122, 67, 0.28);
}
.communes a.is-live:hover { color: var(--nuit); transform: translateY(-2px); box-shadow: var(--halo); }
.section--ink .communes a { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.78); }
.section--ink .communes a:hover { background: var(--vert-signal); color: var(--nuit); border-color: var(--vert-signal); box-shadow: var(--halo); }

/* Grille d'arrondissements / cantons. */
.zone-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.2rem; }
.zone-card {
  border: 1px solid var(--ligne); border-radius: var(--r); padding: 1.4rem; background: var(--carte);
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out);
}
.zone-card:hover { transform: translateY(-3px); box-shadow: var(--ombre-carte); }
.section--ink .zone-card { background: rgba(255, 255, 255, 0.045); border-color: rgba(255, 255, 255, 0.12); }
.zone-card h3 { font-size: 1.1rem; margin-bottom: 0.2rem; }
.zone-card__n { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vert-profond); margin-bottom: 0.8rem; display: block; }
.section--ink .zone-card__n { color: var(--vert-signal); }

/* ── 13bis. CARTE DU TERRITOIRE ─────────────────────────────────────── */
/* Les tracés viennent des contours officiels NUTS de la Commission
   européenne (arrondissements belges, Grand-Duché), projetés en SVG. Rien
   n'est dessiné à main levée : sur une carte, une forme approximative se
   repère immédiatement. */
.carte {
  display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(1.5rem, 3vw, 2.6rem);
  align-items: stretch;
}
.carte__plan {
  position: relative;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-lg);
  padding: clamp(1rem, 2vw, 1.6rem);
  overflow: hidden;
}
.carte__plan svg { width: 100%; height: auto; display: block; overflow: visible; }

/* `non-scaling-stroke` : le trait garde la même épaisseur à l'écran quelle
   que soit la taille d'affichage de la carte, donc il reste net partout.
   `evenodd` rend correctement les enclaves. */
.carte__plan svg path { vector-effect: non-scaling-stroke; fill-rule: evenodd; }

/* Hors zone : présent pour situer, mais jamais mis en avant. */
.carte__hors path {
  fill: rgba(255, 255, 255, 0.04);
  stroke: rgba(255, 255, 255, 0.13);
  stroke-width: 1;
  stroke-linejoin: round;
}

/* Zone desservie : le vert de marque, en aplat translucide. */
.carte__zone {
  fill: rgba(57, 233, 145, 0.17);
  stroke: var(--vert-signal);
  stroke-width: 1.4;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill var(--t) var(--ease-out), filter var(--t) var(--ease-out);
}

/* Villes repères : elles donnent l'échelle et rendent la carte lisible. */
.carte__ville { fill: rgba(255, 255, 255, 0.55); }
.carte__ville-txt {
  fill: rgba(255, 255, 255, 0.62);
  font-family: var(--font-mono); font-size: 10.0px; letter-spacing: 0.04em;
  paint-order: stroke; stroke: rgba(16, 17, 25, 0.75); stroke-width: 2.7px; stroke-linejoin: round;
}
.carte__zone:hover,
.carte__zone:focus-visible,
.carte__zone.is-on {
  fill: rgba(57, 233, 145, 0.42);
  filter: drop-shadow(0 0 14px rgba(57, 233, 145, 0.55));
  outline: none;
}

/* Siège : point blanc cerclé de vert, le seul repère ponctuel. */
.carte__siege-halo { fill: rgba(57, 233, 145, 0.28); animation: sonar 2.8s ease-out infinite; transform-origin: center; }
@keyframes sonar {
  0% { r: 7; opacity: 0.85; }
  70% { r: 22; opacity: 0; }
  100% { r: 22; opacity: 0; }
}
.carte__siege { fill: #fff; stroke: var(--vert-signal); stroke-width: 3; }
.carte__siege-txt {
  fill: #fff; font-family: var(--font-mono); font-size: 12.7px; font-weight: 600;
  letter-spacing: 0.06em; paint-order: stroke;
  stroke: rgba(16, 17, 25, 0.85); stroke-width: 3.3px; stroke-linejoin: round;
}

/* Panneau d'information, alimenté au survol. */
.carte__panneau {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-lg);
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  display: flex; flex-direction: column;
}
.carte__k {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--vert-signal); margin-bottom: 0.7rem;
}
.carte__panneau h3 { color: #fff; margin-bottom: 0.6rem; }
.carte__txt { font-size: 0.96rem; color: rgba(255, 255, 255, 0.68); margin: 0 0 1.2rem; min-height: 4.5em; }
.carte__chiffre {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 3.4vw, 2.8rem);
  line-height: 1; color: #fff; font-variant-numeric: tabular-nums;
}
/* Seule la légende sous le chiffre est réduite, pas le chiffre lui-même. */
.carte__chiffre > span[data-carte-unite] {
  font-size: 0.9rem; font-weight: 500; color: rgba(255, 255, 255, 0.5);
  display: block; margin-top: 0.4rem; letter-spacing: 0;
}
.carte__cta { margin-top: auto; padding-top: 1.4rem; }

.carte__legende {
  list-style: none; margin: 1.4rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 1.4rem;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.5);
}
.carte__legende li { display: inline-flex; align-items: center; gap: 0.55rem; }
.carte__puce { width: 13px; height: 13px; border-radius: 3px; flex: none; }
.carte__puce--zone { background: rgba(57, 233, 145, 0.42); border: 1px solid var(--vert-signal); }
.carte__puce--siege { background: #fff; border: 2px solid var(--vert-signal); border-radius: 50%; }
.carte__puce--hors { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.16); }

@media (max-width: 1080px) {
  .carte { grid-template-columns: 1fr; }
  .carte__txt { min-height: 0; }
}

/* ── 13ter. FORMULAIRE DE DEVIS ─────────────────────────────────────── */
/* Les `name` des champs sont exactement ceux qu'attend `send.php` :
   prenom, nom, email, telephone, adresse, code_postal, prestation, delai,
   message, consent, plus le honeypot `botcheck` et l'horodatage
   `form_loaded_at`. Le formulaire est donc utilisable tel quel en production. */
.form { display: grid; gap: 0.85rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }

.field { display: grid; gap: 0.35rem; }
.field > label {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.5);
}
.field > label .req { color: var(--vert-signal); }

.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-sans); font-size: 0.95rem; color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-sm); padding: 0.72rem 0.85rem;
  transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.field textarea { resize: vertical; min-height: 92px; }
.field input::placeholder, .field textarea::placeholder { color: rgba(255, 255, 255, 0.32); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(255, 255, 255, 0.3); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--vert-signal); background: rgba(57, 233, 145, 0.07);
}
/* Le champ n'est signalé en erreur qu'après une tentative d'envoi, pas pendant
   la frappe : signaler trop tôt est agressif et n'aide personne. */
.form.is-checked .field input:invalid,
.form.is-checked .field select:invalid,
.form.is-checked .field textarea:invalid { border-color: #ff7a7a; background: rgba(255, 122, 122, 0.08); }

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2339e991' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.8rem center; background-size: 16px;
  padding-right: 2.4rem;
}
.field select option { background: #14151d; color: #fff; }

/* Pièce jointe : le champ natif est illisible et impossible à styler
   correctement. On l'efface et on habille son libellé, qui reste un vrai
   <label>, donc cliquable au clavier comme à la souris. */
.field--fichier input[type="file"] {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.field__depot {
  display: flex; align-items: center; gap: 0.75rem; cursor: pointer;
  border: 1px dashed rgba(255, 255, 255, 0.28); border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.04);
  padding: 0.72rem 0.9rem;
  transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.field__depot:hover { border-color: var(--vert-signal); background: rgba(57, 233, 145, 0.07); }
.field--fichier input[type="file"]:focus-visible + .field__depot {
  border-color: var(--vert-signal); outline: 2px solid var(--vert-fonce); outline-offset: 2px;
}
.field__depot svg { color: var(--vert-signal); flex: none; }
.field__nom { font-size: 0.9rem; color: rgba(255, 255, 255, 0.72); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.field--fichier.is-rempli .field__depot { border-style: solid; border-color: var(--vert-fonce); }
.field--fichier.is-rempli .field__nom { color: #fff; }
.field--fichier.is-refuse .field__depot { border-color: #ff7a7a; background: rgba(255, 122, 122, 0.08); }
.field__aide { font-size: 0.78rem; color: rgba(255, 255, 255, 0.42); margin: 0.35rem 0 0; }
.field__aide.is-erreur { color: #ff9b9b; }

.field--consent { grid-template-columns: auto 1fr; align-items: start; gap: 0.7rem; }
.field--consent input { width: 19px; height: 19px; margin-top: 0.15rem; accent-color: var(--vert-fonce); padding: 0; }
.field--consent label {
  font-family: var(--font-sans); font-size: 0.85rem; letter-spacing: 0; text-transform: none;
  color: rgba(255, 255, 255, 0.62); line-height: 1.5;
}
.field--consent a { color: var(--vert-signal); }

/* Piège à robots : invisible pour l'humain, rempli par les automates. */
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__note { font-size: 0.8rem; color: rgba(255, 255, 255, 0.4); margin: 0; }

/* Retour après envoi. Il n'annonce jamais un envoi qui n'a pas eu lieu. */
.form__retour {
  display: none; margin-top: 1rem; padding: 1rem 1.1rem;
  border: 1px solid rgba(57, 233, 145, 0.4); background: rgba(57, 233, 145, 0.1);
  border-radius: var(--r); font-size: 0.9rem; color: rgba(255, 255, 255, 0.82);
}
.form__retour.is-on { display: block; }
.form__retour strong { color: var(--vert-signal); }
.form__retour .btn { margin-top: 0.9rem; }

@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }

/* ── 13quater. PAGES LÉGALES ────────────────────────────────────────── */
/* Un texte juridique se lit en colonne étroite, avec une hiérarchie nette.
   Aucun effet, rien qui distraie : on vient ici pour vérifier un point. */
.legal { max-width: 78ch; }
.legal h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem); margin-top: 2.8rem; margin-bottom: 0.8rem;
  padding-top: 1.6rem; border-top: 1px solid var(--ligne);
}
.legal > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h3 { font-size: 1.08rem; margin-top: 1.8rem; margin-bottom: 0.5rem; }
.legal p, .legal li { font-size: 0.98rem; }
.legal ul, .legal ol { padding-left: 1.3rem; margin: 0 0 1.1em; display: grid; gap: 0.5rem; }
.legal li::marker { color: var(--vert-profond); }
.legal a { color: var(--vert-tres-profond); }

.legal table {
  width: 100%; border-collapse: collapse; margin: 1.2rem 0 1.6rem; font-size: 0.9rem;
  display: block; overflow-x: auto;
}
.legal th, .legal td {
  text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--ligne);
  vertical-align: top;
}
.legal th { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nuit); }

/* Intitulé de partie : « Partie I », « Partie II »… Il structure un texte long
   et permet de se repérer sans relire les titres. */
.legal__part {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--vert-profond);
  display: flex; align-items: center; gap: 0.8rem;
  margin: 3.6rem 0 0.2rem;
}
.legal__part::after { content: ""; flex: 1; height: 1px; background: var(--ligne); }
.legal__part + h2 { margin-top: 0.6rem; padding-top: 0; border-top: 0; }

/* Étiquette de régime : B2C, B2B, secteur public. */
.legal__tag {
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 500;
  background: var(--vert-pale); color: var(--vert-tres-profond);
  border: 1px solid var(--vert-100);
  padding: 0.25rem 0.55rem; border-radius: var(--r-pill);
  vertical-align: middle; margin-left: 0.5rem;
}

.legal__maj {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); padding: 0.6rem 0 1.8rem;
}
/* Encadré d'identification de l'éditeur. */
.legal__carte {
  background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--r);
  padding: 1.4rem 1.6rem; margin: 1.4rem 0 2rem;
}
.legal__carte dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.55rem 1.4rem; }
.legal__carte dt {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); padding-top: 0.15rem;
}
.legal__carte dd { margin: 0; color: var(--nuit); font-weight: 600; font-size: 0.95rem; }
@media (max-width: 560px) { .legal__carte dl { grid-template-columns: 1fr; gap: 0.15rem 0; } .legal__carte dd { margin-bottom: 0.7rem; } }

/* Élément à compléter avant mise en ligne : visible, impossible à oublier. */
.legal mark.todo {
  background: #fff3c4; color: #6b4e00; padding: 0.1em 0.4em; border-radius: 4px;
  font-weight: 600; font-size: 0.92em;
}

/* ── 13quinquies. AVIS CLIENTS ──────────────────────────────────────── */
/* La note et le nombre d'avis sont ceux de la fiche Google, rien d'autre.
   Aucun avis n'est reproduit ici tant que son texte réel n'est pas fourni :
   un témoignage inventé est le plus court chemin pour perdre la confiance
   qu'on cherche à installer. */
.avis { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.8rem, 4vw, 3.5rem); align-items: center; }

.avis__note {
  text-align: center; padding: clamp(1.4rem, 2.5vw, 2rem) clamp(1.8rem, 3vw, 2.6rem);
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.05);
}
.avis__chiffre {
  font-family: var(--font-display); font-weight: 700; line-height: 1;
  font-size: clamp(3rem, 6vw, 4.6rem); color: #fff; font-variant-numeric: tabular-nums;
}
.avis__chiffre span { font-size: 0.4em; color: rgba(255, 255, 255, 0.45); font-weight: 500; }
.avis__etoiles { display: flex; justify-content: center; gap: 0.2rem; margin: 0.7rem 0 0.6rem; }
.avis__etoiles svg { color: var(--vert-signal); }
.avis__nb {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.5);
}
.avis__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; }

/* Logo Google, dessiné aux couleurs officielles : c'est une marque, on ne la
   repeint pas au vert du site. */
.avis__g { width: 17px; height: 17px; flex: none; }

@media (max-width: 860px) {
  .avis { grid-template-columns: 1fr; }
  .avis__note { justify-self: start; }
}

/* ── 13sexies. OBLIGATION ET TARIFS ─────────────────────────────────── */
/* Pendant négatif du `.tick` : sert aux cas où une obligation NE s'applique
   PAS. Neutre et non alarmant, ce n'est pas une erreur, c'est une dispense. */
/* Pastille en absolu, meme raison que pour `.tick` : en flex, un <strong>
   dans la puce devenait une colonne et hachait le texte. */
.cross { position: relative; padding-left: 1.75rem; }
.cross::before {
  content: ""; position: absolute; left: 0; width: 20px; height: 20px; top: 0.22em; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8fa3' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* Grille tarifaire : une carte par famille de bien, des lignes palier / durée
   / prix. Le prix est l'information qu'on vient chercher, il domine. */
.tarifs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.tarif-carte {
  background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--r-lg);
  padding: 1.5rem 1.5rem 1.7rem; display: flex; flex-direction: column;
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out);
}
.tarif-carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-carte); }
.tarif-carte--phare { border-color: var(--vert-300); box-shadow: 0 10px 34px rgba(21, 122, 67, 0.1); }
.tarif-carte__t { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.2rem; }
.tarif-carte h3 { margin: 0; }
.tarif-carte__badge {
  font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--grad-signal); color: var(--nuit); padding: 0.2rem 0.5rem; border-radius: var(--r-pill);
  white-space: nowrap;
}
.tarif-carte__s { font-size: 0.88rem; color: var(--muted); margin: 0 0 1.2rem; }

.tarif-ligne {
  display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 1rem; align-items: baseline;
  padding-block: 0.8rem; border-top: 1px solid var(--ligne);
}
.tarif-ligne__l { font-size: 0.95rem; color: var(--nuit); font-weight: 600; }
.tarif-ligne__d { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; color: var(--muted); grid-column: 1; }
.tarif-ligne__p {
  grid-row: 1 / span 2; align-self: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--nuit);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tarif-ligne__p small { font-size: 0.55em; font-weight: 500; color: var(--muted); margin-left: 0.15em; }
/* Variante « prix de depart » : un seul montant par carte, mis en avant, avec
   le mot « Des » qui le precede. Sert au Grand-Duche, ou le prix definitif
   depend trop du bien pour annoncer des paliers fermes. */
.tarif-ligne--des {
  grid-template-columns: auto 1fr; align-items: baseline;
  padding-block: 1.1rem 0.9rem;
}
.tarif-ligne--des .tarif-ligne__des {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); align-self: center;
}
.tarif-ligne--des .tarif-ligne__p {
  grid-row: 1; grid-column: 2; justify-self: start;
  font-size: 2.3rem; line-height: 1;
}
.tarif-ligne--des .tarif-ligne__l { grid-column: 1 / -1; font-weight: 600; margin-top: 0.55rem; }
.tarif-ligne--des .tarif-ligne__d { grid-column: 1 / -1; }

.tarif-note { font-size: 0.88rem; color: var(--muted); margin-top: 1.6rem; }

@media (max-width: 980px) { .tarifs { grid-template-columns: 1fr; } }

/* ── 13septies. PARTENAIRES ET RÉFÉRENCES ───────────────────────────── */
/* Les logos sont ceux d'organismes tiers : on ne les repeint pas, on ne les
   déforme pas. Chaque tuile leur donne la même place, quelle que soit la
   forme du logo, ce qui évite qu'un logo large écrase les autres. */
.partenaires {
  /* Six references : une rangee pleine en grand ecran, puis deux rangees de
     trois. Un nombre fixe de colonnes plutot qu'un auto-fit, qui laissait une
     carte orpheline seule sur la derniere rangee. */
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.2rem;
}
.partenaire {
  background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--r-lg);
  padding: 1.6rem 1.1rem 1.4rem; text-align: center; text-decoration: none;
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out),
              border-color var(--t) var(--ease-out);
}
a.partenaire:hover { transform: translateY(-4px); box-shadow: var(--ombre-carte); border-color: var(--vert-300); }

.partenaire__logo {
  height: 62px; display: grid; place-items: center; margin-bottom: 0.9rem; width: 100%;
}
.partenaire__logo img { max-height: 46px; max-width: 86%; width: auto; object-fit: contain; }
.partenaire__code {
  font-size: 0.72rem; line-height: 1.35; letter-spacing: 0.1em; color: var(--vert-tres-profond);
  background: var(--vert-pale); border: 1px solid var(--vert-100);
  border-radius: var(--r-sm); padding: 0.45rem 0.6rem;
}
.partenaire__nom { font-family: var(--font-display); font-weight: 600; font-size: 0.97rem; color: var(--nuit); }
.partenaire__s { font-size: 0.82rem; color: var(--muted); }

@media (max-width: 1180px) { .partenaires { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .partenaires { grid-template-columns: repeat(2, 1fr); } }

/* ── 14. FIL D'ARIANE ───────────────────────────────────────────────── */
.crumb {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5); display: flex; gap: 0.55rem; flex-wrap: wrap; margin-bottom: 1.4rem;
}
.crumb a { color: rgba(255, 255, 255, 0.5); text-decoration: none; }
.crumb a:hover { color: #fff; }
.crumb span[aria-current] { color: var(--vert-signal); }

/* ── 15. GRILLES DE CONTENU ─────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.split--even { grid-template-columns: 1fr 1fr; }
.media-frame { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--ombre-levee); position: relative; }
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-frame__cap {
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  background: rgba(20, 21, 29, 0.8); backdrop-filter: blur(6px); color: var(--vert-signal);
  padding: 0.4rem 0.8rem; border-radius: var(--r-pill);
}

/* Appel final, pleine largeur, très contrasté.
   Le bandeau est un contexte sombre : il hérite des mêmes traitements que
   .section--ink pour les panneaux, les lignes de données et les étiquettes. */
.cta-band { position: relative; isolation: isolate; overflow: hidden; background: var(--grad-nuit); color: rgba(255, 255, 255, 0.7); }
.cta-band h2, .cta-band h3 { color: #fff; }
.cta-band .kicker, .hero .kicker { color: var(--vert-signal); }
.cta-band .panel { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.12); box-shadow: none; }
.cta-band .panel__head { border-bottom-color: rgba(255, 255, 255, 0.14); }
.cta-band .row { border-bottom-color: rgba(255, 255, 255, 0.12); }
.cta-band .row__k { color: rgba(255, 255, 255, 0.45); }
.cta-band .row__v { color: #fff; }
.cta-band .tick::before, .hero .tick::before {
  background-color: rgba(57, 233, 145, 0.16);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2339e991' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 120% at 20% 50%, rgba(57, 233, 145, 0.2) 0%, transparent 60%);
}
/* Texture d'isolant en fond, très atténuée : de la matière, pas du décor. */
.cta-band.has-texture::after {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("../img/texture-sombre-1024.jpg") center / cover no-repeat;
  opacity: 0.4;
}
.cta-band .wrap { padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.cta-tel {
  font-family: var(--font-mono); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 600;
  color: var(--vert-signal); text-decoration: none; display: inline-block; font-variant-numeric: tabular-nums;
  transition: text-shadow var(--t) var(--ease-out);
}
.cta-tel:hover { text-shadow: 0 0 30px rgba(57, 233, 145, 0.6); }

/* ── 16. ÉLÉMENTS FLOTTANTS ─────────────────────────────────────────── */
/* Droite : pile d'actions (réserver / écrire). Gauche : retour en haut. */
.fab-stack {
  position: fixed; right: 22px; bottom: 22px; z-index: 85;
  display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 0.6rem;
}
.fab {
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; text-decoration: none;
  transition: transform var(--t) var(--ease-punch), box-shadow var(--t) var(--ease-out), background-color var(--t) var(--ease-out);
}
.fab--main { background: var(--grad-signal); color: var(--nuit); box-shadow: var(--halo-fort); }
.fab--main:hover { transform: scale(1.05); }
.fab--main svg { transition: transform var(--t-slow) var(--ease-out); }
.fab-stack.is-open .fab--main svg { transform: rotate(135deg); }

.fab-stack__items {
  display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-end;
  opacity: 0; transform: translateY(12px) scale(0.9); pointer-events: none;
  transition: opacity var(--t) var(--ease-out), transform var(--t) var(--ease-punch);
}
.fab-stack.is-open .fab-stack__items { opacity: 1; transform: none; pointer-events: auto; }
.fab-stack__items a {
  display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none;
  background: var(--nuit); color: #fff; border-radius: var(--r-pill);
  padding: 0.7rem 1.1rem 0.7rem 0.8rem; box-shadow: var(--ombre-levee);
  font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; white-space: nowrap;
  transition: transform 0.2s var(--ease), color 0.2s;
}
.fab-stack__items a:hover { transform: translateX(-3px); color: var(--vert-signal); }
.fab-stack__items a svg { color: var(--vert-signal); flex: none; }

.to-top {
  position: fixed; left: 22px; bottom: 22px; z-index: 85;
  width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(20, 21, 29, 0.85); backdrop-filter: blur(8px); color: var(--vert-signal);
  display: grid; place-items: center; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity var(--t) var(--ease-out), transform var(--t) var(--ease-out), visibility var(--t);
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { transform: translateY(-3px); box-shadow: var(--halo); }

/* Anneau de progression : même information que la barre du haut, mais là où
   se trouve la main quand on décide de remonter. */
.to-top__ring {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform: rotate(-90deg);            /* départ à midi */
  pointer-events: none; overflow: visible;
}
.to-top__ring circle {
  fill: none; stroke-width: 2.5; stroke-linecap: round;
  cx: 24px; cy: 24px; r: 21px;
}
.to-top__track { stroke: rgba(255, 255, 255, 0.14); }
.to-top__fill {
  stroke: var(--vert-signal);
  stroke-dasharray: 131.95;             /* 2 x pi x 21 */
  stroke-dashoffset: 131.95;            /* plein vide au départ */
  transition: stroke-dashoffset 0.08s linear;
  filter: drop-shadow(0 0 4px rgba(57, 233, 145, 0.6));
}

/* ── 17. PIED DE PAGE (norme 3 rangées) ─────────────────────────────── */
.footer { background: #101119; color: rgba(255, 255, 255, 0.6); font-size: 0.93rem; }
.footer a { color: rgba(255, 255, 255, 0.6); text-decoration: none; transition: color var(--t-fast) var(--ease-out); }
.footer a:hover { color: var(--vert-signal); }
.footer h4 {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38); font-weight: 500; margin-bottom: 1.1rem;
}
/* Logo officiel Energalis, version blanche, en pied de page. */
.footer-logo { display: inline-block; }
.footer-logo img { width: 190px; height: auto; display: block; }

.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.5fr; gap: 2.5rem; padding-block: 3.8rem 3rem; }
/* Douze villes en une colonne feraient une liste interminable : on les répartit
   sur deux colonnes dans la même case du pied de page. */
.footer-zones { grid-template-columns: 1fr 1fr; column-gap: 1.2rem; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.62rem; }
.footer__desc { max-width: 34ch; margin-block: 1rem 1.3rem; font-size: 0.9rem; }
.social { display: flex; gap: 0.5rem; }
.social a {
  width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, 0.07);
  display: grid; place-items: center; transition: background-color 0.2s, transform 0.2s, color 0.2s;
}
.social a:hover { background: var(--vert-signal); color: var(--nuit); transform: translateY(-2px); }

.footer-contact { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-block: 2.2rem; }
.footer-contact__row { display: flex; flex-wrap: wrap; gap: 2.5rem; margin-top: 1.1rem; }
.fc-item { display: flex; align-items: center; gap: 0.85rem; }
.fc-item__ic {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: rgba(57, 233, 145, 0.12); color: var(--vert-signal); display: grid; place-items: center;
}
.fc-item__k { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(255, 255, 255, 0.38); }
.fc-item__v { color: #fff; font-weight: 600; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1); padding-block: 1.6rem 2rem;
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.5rem; align-items: center; font-size: 0.85rem;
}
.footer-legal { display: flex; gap: 1.2rem; justify-content: flex-end; flex-wrap: wrap; }

.agency-credit { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; justify-self: center; }
.agency-credit__mark {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: linear-gradient(135deg, #6366f1, #4338ca); display: grid; place-items: center;
}
.agency-credit__text {
  font-family: var(--font-mono); font-size: 0.63rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42); white-space: nowrap;
}
.agency-credit__text strong { color: rgba(255, 255, 255, 0.85); font-weight: 600; }
.agency-credit:hover .agency-credit__text strong { color: var(--vert-signal); }

/* ── 17bis. BANDEAU COOKIES ─────────────────────────────────────────── */
/* Bandeau pleine largeur, mais FIN : une seule ligne sur grand écran, le
   texte à gauche, les deux boutons à droite. Il informe sans bloquer la
   lecture et sans recouvrir le contenu.
   Le refus est aussi accessible que l'acceptation, exigence de conformité.
   Une fois le choix fait, le bandeau est retiré du document et ne revient pas. */
.cookies {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 96;
  background: rgba(16, 17, 25, 0.97);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(57, 233, 145, 0.28);
  box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.32);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(100%);
  transition: transform var(--t-slow) var(--ease-out);
}
.cookies.is-on { transform: none; }

/* Un filet vert en haut, comme la ligne de progression : même vocabulaire. */
.cookies::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px;
  background: var(--grad-signal); opacity: 0.55;
}

.cookies__inner {
  max-width: var(--max); margin-inline: auto; padding: 0.95rem var(--gutter);
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
}
.cookies__t {
  display: inline-flex; align-items: center; gap: 0.5rem; flex: none;
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--vert-signal); margin: 0;
}
.cookies__txt {
  flex: 1; margin: 0; font-size: 0.85rem; line-height: 1.5;
  color: rgba(255, 255, 255, 0.66);
}
.cookies__txt a { color: var(--vert-signal); }
.cookies__actions { display: flex; gap: 0.6rem; flex: none; }
.cookies__actions .btn { padding: 0.58rem 1.25rem; font-size: 0.86rem; }

/* Le bouton de retour en haut s'efface tant que le bandeau occupe le bas. */
body.has-cookies .to-top { opacity: 0; visibility: hidden; }

@media (max-width: 980px) {
  .cookies__inner { flex-wrap: wrap; gap: 0.7rem 1.2rem; }
  .cookies__txt { flex: 1 1 100%; order: 3; }
  .cookies__actions { margin-left: auto; }
}
@media (max-width: 760px) {
  .cookies { bottom: 68px; }               /* au-dessus de la barre d'actions */
  .cookies__inner { padding-block: 0.85rem; }
  .cookies__actions { flex: 1 1 100%; margin-left: 0; }
  .cookies__actions .btn { flex: 1; }
}

/* ── 18. BARRE D'ACTIONS MOBILE (norme) ─────────────────────────────── */
.mobile-actionbar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 88;
  background: rgba(16, 17, 25, 0.97); backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: env(safe-area-inset-bottom);
}
.mobile-actionbar__inner { display: grid; grid-template-columns: repeat(3, 1fr); }
.mobile-actionbar a {
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.7rem 0.4rem;
  color: rgba(255, 255, 255, 0.75); text-decoration: none;
  font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.mobile-actionbar a + a { border-left: 1px solid rgba(255, 255, 255, 0.1); }
.mobile-actionbar svg { color: var(--vert-signal); }

/* ── 19. MOUVEMENT ──────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }

.rise { animation: rise 0.85s var(--ease-out) both; }
.rise:nth-child(1) { animation-delay: 0.08s; }
.rise:nth-child(2) { animation-delay: 0.18s; }
.rise:nth-child(3) { animation-delay: 0.28s; }
.rise:nth-child(4) { animation-delay: 0.38s; }
.rise:nth-child(5) { animation-delay: 0.48s; }
.rise:nth-child(6) { animation-delay: 0.58s; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ── 20. RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .split, .split--even { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .statstrip { grid-template-columns: repeat(2, 1fr); }
  .statstrip > div:nth-child(3) { border-left: 0; }
  .statstrip > div:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, 0.12); }
}

@media (max-width: 920px) {
  .nav, .header__tel { display: none; }
  .burger { display: inline-flex; }
  :root { --header-h: 80px; }
}

@media (max-width: 760px) {
  :root { --gutter: 18px; }
  /* La réserve pour la barre d'actions fixe est posée SUR LE PIED DE PAGE et
     non sur le body : sinon le fond ivoire du body apparaît en bande claire
     entre la fin du footer sombre et la barre. */
  .footer { padding-bottom: 68px; }
  /* Sur mobile, le haut (héros) et le bas (pied de page) sont sombres : on
     donne la même couleur au canevas pour qu'aucune bande claire n'apparaisse
     au rebond de défilement, en haut comme en bas. */
  html { background: #101119; }
  .mobile-actionbar { display: block; }

  /* HÉROS MOBILE : la photo n'est plus un fond que le texte recouvre.
     En plein écran, la hauteur du héros dépend du texte, et `object-fit:
     cover` rognait la photo sur les côtés jusqu'à couper le bâtiment. Ici la
     photo occupe un bloc au ratio EXACT du cadrage portrait fourni (3:4),
     donc elle s'affiche telle qu'elle a été cadrée, sans perte. Le texte
     passe dessous, sur le fond nuit. */
  .hero {
    display: block; min-height: 0; padding: 0 0 clamp(2.4rem, 7vw, 3.4rem);
    background: var(--grad-nuit);
  }
  .hero__bg { position: relative; inset: auto; z-index: 0; aspect-ratio: 3 / 4; }
  .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .hero__bg::after {
    background:
      linear-gradient(180deg, rgba(16, 17, 25, 0.62) 0%, rgba(16, 17, 25, 0.1) 30%,
                      rgba(16, 17, 25, 0.55) 80%, rgba(20, 21, 29, 0.98) 100%);
  }
  .hero__inner { padding-top: 1.7rem; }
  .hero--compact .hero__bg { aspect-ratio: 4 / 5; }
  /* La barre d'actions fixe remplace les boutons flottants sur mobile. */
  .fab-stack { display: none; }
  .to-top { left: 14px; bottom: 80px; width: 44px; height: 44px; }
  .site-header { padding-top: 10px; }
  .site-header__pill { padding-left: 1rem; }
  .header .btn--signal, .site-header__pill .btn--signal { display: none; }
  .brand__sub { display: none; }
  .cards, .cards--2 { grid-template-columns: 1fr; }
  .statstrip { grid-template-columns: 1fr; }
  .statstrip > div { border-left: 0; }
  .statstrip > div + div { border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .step { grid-template-columns: 1fr; gap: 0.5rem; }
  /* (la géométrie du héros mobile est définie plus haut dans ce bloc) */
  .hero__cta .btn { width: 100%; }
  .hero h1 { max-width: none; }
  .ghost-num { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .footer-legal { justify-content: center; }
  .footer-contact__row { gap: 1.2rem; flex-direction: column; }
  .row { flex-direction: column; gap: 0.2rem; align-items: flex-start; }
  .row__v { text-align: left; }
}