/* ============================================================================
   BATIPLUS — la base commune aux trois hero.
   Fond sombre dominant (décision de Youri, 16/09/2026). Toutes les couleurs
   viennent de tokens.css, généré depuis batiplus-isolation.json : rien en dur.
   ========================================================================== */

@font-face {
  font-family: Archivo; src: url(fonts/Archivo.woff2) format('woff2');
  font-weight: 100 900; font-display: swap;
}
@font-face {
  font-family: Switzer; src: url(fonts/Switzer-Regular.woff2) format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: Switzer; src: url(fonts/Switzer-Medium.woff2) format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: Mono; src: url(fonts/JetBrainsMono-Regular.woff2) format('woff2');
  font-weight: 400; font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: Switzer, system-ui, sans-serif;
  font-size: var(--typo-echelle-corps-taille);
  line-height: var(--typo-echelle-corps-interligne);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }

a { color: inherit; }

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

:focus-visible { outline: 2px solid var(--accent-clair); outline-offset: 3px; }

:root { --large: min(100% - 40px, 1280px); }
@media (max-width: 640px)  { :root { --large: min(100% - 32px, 1280px); } }
@media (min-width: 1700px) { :root { --large: min(100% - 112px, 1880px); } }
@media (min-width: 2200px) { :root { --large: min(100% - 128px, 2280px); } }
@media (min-width: 3000px) { :root { --large: min(100% - 176px, 3100px); } }
.enveloppe { width: var(--large); margin-inline: auto; }

/* ------------------------------------------------------------- l'en-tête */
.tete {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--fond) 88%, transparent);
  backdrop-filter: var(--verre-flou);
  border-bottom: 1px solid var(--trait);
}
.tete > .enveloppe {
  display: flex; align-items: center; gap: 28px;
  min-height: 72px;
}
.tete .marque { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.tete .marque img { height: 34px; width: auto; }
.tete nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.tete nav a {
  text-decoration: none; color: var(--texte-2);
  font-size: 14px; font-weight: 500;
  transition: color var(--mouvement-duree-court) var(--mouvement-courbe);
}
.tete nav a:hover { color: var(--texte); }
.tete .tel {
  font-family: Mono, monospace; font-size: 14px; color: var(--texte);
  text-decoration: none; white-space: nowrap;
  /* AU DOIGT, 44 px DE HAUT. Mesuré en production le 16/09 : la cible faisait
     118 x 23 px sur iPhone, sous le minimum tactile. */
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
}
@media (max-width: 880px) { .tete nav { display: none; } }

/* --------------------------------------------------------------- le hero */
.hero { position: relative; overflow: clip; }

/* LE HALO : un seul par page, c'est le plafond du contrat
   (contrat/budgets.json, halo-par-page-max = 1). */
.halo {
  position: absolute; pointer-events: none; z-index: 0;
  background: var(--halo-hero);
  filter: blur(10px);
}

/* LE BLOC LUMINEUX DE SA MARQUE.
   Il porte son propre canal alpha, tiré de sa LUMIÈRE : le noir du fichier est
   transparent, le halo garde sa douceur. On n'emploie donc PAS `mix-blend-mode:
   screen`, qui ne mélange qu'à l'intérieur de son groupe de composition : posé
   dans un `.texte { z-index: 2 }`, il se mélangeait à du vide et le rectangle
   noir du fichier redevenait visible (mesuré le 16/09 sur la dalle de contrôle).
   Fabrication : 04-matiere/logo/bandeau-2026-09-14/bloc-logo-alpha.png. */
.signe { display: block; width: 100%; height: auto; }

.sur-titre {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: Mono, monospace;
  font-size: var(--typo-echelle-mono-taille);
  letter-spacing: .04em;
  color: var(--accent-clair);
  border: 1px solid var(--trait-fort);
  border-radius: var(--forme-rayon-pilule);
  padding: 7px 15px 7px 12px;
  background: var(--verre-surface);
}
.sur-titre::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-clair); box-shadow: var(--halo-action);
}

h1 {
  font-family: Archivo, system-ui, sans-serif;
  font-weight: var(--typo-titre-graisse);
  text-transform: uppercase;
  letter-spacing: var(--typo-titre-tracking);
  font-size: var(--typo-echelle-display-taille);
  line-height: var(--typo-echelle-display-interligne);
  margin: 22px 0 0;
  text-wrap: balance;
}
h1 .filet { color: var(--accent-clair); }

.chapeau {
  max-width: 58ch; margin: 22px 0 0;
  color: var(--texte-2);
  font-size: clamp(16px, 1.15vw, 18.5px);
}
.chapeau b { color: var(--texte); font-weight: 500; }

.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

/* --------------------------------------------- les trois faits techniques */
.faits {
  display: grid; gap: 1px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--trait);
  border: 1px solid var(--trait);
  border-radius: var(--forme-rayon-carte);
  overflow: hidden;
}
.faits > div { background: var(--surface); padding: 20px 22px; }
.faits dt {
  font-family: Mono, monospace; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--texte-3);
}
.faits dd {
  margin: 9px 0 0; font-weight: 500; color: var(--texte);
  font-size: 15.5px; line-height: 1.35;
}
.faits dd span { display: block; color: var(--texte-2); font-weight: 400; font-size: 13.5px; margin-top: 4px; }
@media (max-width: 760px) { .faits { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ la zone */
.zone {
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
  font-family: Mono, monospace; font-size: 13px; color: var(--texte-2);
}
.zone b { color: var(--texte); font-weight: 400; }
.zone i { font-style: normal; color: var(--accent-clair); }

/* ----------------------------------------------------------- l'arrivée */
[data-revelation] { opacity: 0; transform: translateY(26px); }
[data-revelation].vu {
  opacity: 1; transform: none;
  transition: opacity var(--mouvement-apparition-duree) var(--mouvement-courbe),
              transform var(--mouvement-apparition-duree) var(--mouvement-courbe);
}

@media (prefers-reduced-motion: reduce) {
  [data-revelation] { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* ------------------------------------------------------------- le pied */
.suite {
  border-top: 1px solid var(--trait);
  padding: 46px 0 70px;
  color: var(--texte-3);
  font-size: 14px;
}
.suite a { color: var(--accent-clair); }

/* ------------------------------------------------- les crochets du bouton
   MESURÉ le 16/09/2026 sur la dalle de contrôle : le blanc sur `--accent`
   (#0080F8) donne 3,86:1, sous la limite de 4,5 du contrat. `--accent-bas`
   (#0068D8), déjà dans sa charte, donne 5,29. La pièce ne choisit pas, elle
   rend le choix possible : c'est ici qu'on le pose, pas dans bouton.css. */
:root {
  --btn-fond: var(--accent-bas);
  --btn-fond-survol: #0050C8;   /* 7,04 avec du blanc */
  --btn-texte: #FFFFFF;
  --btn-casse: none;
}

/* le défilement doit s'arrêter SOUS l'en-tête collant, sinon l'ancre passe
   derrière lui et on croit que le lien ne marche pas. */
html { scroll-behavior: smooth; }
:target, [id] { scroll-margin-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }