/* =====================================================================
   pat-batisseur — feuille unique
   Parti visuel arrêté au HALT 1, signature amendée au HALT 2 (ADR-007).

   La page entière est froide. La SEULE couleur chaude est --rencontre :
   elle n'habille que l'invitation à se rencontrer, jamais autre chose.
   Toute nouvelle règle qui emploie --rencontre ailleurs casse le parti.

   Aucune police distante, aucune ressource tierce (ADR-005).
   ===================================================================== */

/* ---------- Polices servies depuis ce domaine ------------------------
   Les .woff2 ne sont pas versionnés. Voir assets/fonts/LISEZ-MOI.md.
   Tant qu'ils sont absents, les piles de repli s'appliquent : le site
   reste lisible, il perd seulement son caractère.
   ------------------------------------------------------------------ */
@font-face {
  font-family: "Syne";
  src: url("/assets/fonts/syne-variable.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/assets/fonts/public-sans-variable.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette — contrastes mesurés, reportés en commentaire */
  --nuit:        #12181C;   /* fond */
  --socle:       #1B242A;   /* socles, cartes */
  --vitre:       #2E3B44;   /* aplats sans texte */
  --arete:       #506776;   /* filets structurants — 3,02:1 sur nuit */
  --arete-champ: #577080;   /* bordure de saisie — 3,03:1 sur socle, seuil 1.4.11 */
  --craie:       #EAEEF0;   /* texte courant — 15,33:1 sur nuit, AAA */
  --craie-doux:  #96A4AD;   /* texte secondaire — 7,00:1 sur nuit, AAA */
  --ardoise:     #8FB2C4;   /* liens, actifs — 7,96:1 sur nuit, AAA */
  --rencontre:   #F2C078;   /* invitation, et rien d'autre — 10,73:1, AAA */

  --f-titre: "Syne", "Avenir Next Condensed", "Helvetica Neue", system-ui, sans-serif;
  --f-corps: "Public Sans", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  /* Voix « lecture » (capsule C) : un serif système mène l'énoncé et les titres.
     Aucune police distante — la famille est prise sur la machine du visiteur. */
  --f-lecture: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;

  /* Échelle modulaire, ratio 1,333, base 17px.
     --t--05 (≈15px) comble le trou entre --t--1 (12,75px) et --t-0 (17px) :
     c'est le palier de la navigation et du petit texte de contenu. --t--1 est
     désormais réservé aux libellés vraiment fins (bandeau, mentions). */
  --t--2:  0.56rem;
  --t--1:  0.75rem;
  --t--05: 0.88rem;   /* 14,96px ≈ 15px */
  --t-0:   1rem;
  --t-1:   1.33rem;
  --t-2:   1.78rem;
  --t-3:   2.37rem;
  --t-4:   3.16rem;

  --esp-xs: 0.5rem;
  --esp-sm: 1rem;
  --esp-md: 2rem;
  --esp-lg: 3.5rem;
  --esp-xl: 6rem;

  --gouttiere: clamp(1.25rem, 4vw, 3rem);
  --large: 1180px;
  --transition: 0.22s ease;
}

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

html { font-size: 17px; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--nuit);
  color: var(--craie);
  font-family: var(--f-corps);
  font-size: var(--t-0);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--f-titre);
  font-weight: 800;
  line-height: 1.06;
  margin: 0;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--ardoise); text-underline-offset: 0.18em; }
a:hover { color: var(--craie); }

:focus-visible {
  outline: 2px solid var(--rencontre);
  outline-offset: 3px;
  border-radius: 1px;
}

.enveloppe {
  max-width: var(--large);
  margin: 0 auto;
  padding-inline: var(--gouttiere);
}

.visuellement-cache {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Le lien d'évitement était en --rencontre sur --nuit : au focus il se posait
   pile sur le bandeau .gabarit, de la même couleur, et l'anneau de focus
   global — lui aussi en --rencontre — devenait invisible (1,00:1). Premier
   taquet de tabulation du site, sans indicateur. Il prend donc le fond clair,
   qui tranche sur tout ce que la page peut mettre dessous. */
.evitement {
  position: absolute;
  left: 0; top: -4rem;
  z-index: 100;
  background: var(--craie);
  color: var(--nuit);
  padding: 0.7em 1.2em;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid var(--nuit);
  transition: top var(--transition);
}
.evitement:focus { top: 0; color: var(--nuit); }
.evitement:focus-visible { outline: 2px solid var(--nuit); outline-offset: -6px; }

/* Bandeau de gabarit — délibérément laid : il doit gêner assez pour qu'on
   ne le laisse pas passer en production. Il disparaît dès que la clé
   _avertissement est retirée des magasins. */
.gabarit {
  margin: 0;
  padding: 0.7rem var(--gouttiere);
  background: var(--rencontre);
  color: var(--nuit);
  font-size: var(--t--05);
  line-height: 1.45;
  border-bottom: 3px solid var(--nuit);
}
.gabarit code { background: rgba(18, 24, 28, .12); padding: 0 .25em; }

/* ---------- Boutons -------------------------------------------------- */

.bouton {
  display: inline-block;
  font-family: var(--f-corps);
  font-size: var(--t--05);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.72em 1.5em;
  border: 1px solid transparent;
  border-radius: 1px;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.bouton--rencontre {
  background: var(--rencontre);
  border-color: var(--rencontre);
  color: var(--nuit);
}
.bouton--rencontre:hover,
.bouton--rencontre:focus-visible {
  background: transparent;
  color: var(--rencontre);
}

.bouton--creux {
  background: transparent;
  border-color: var(--arete);
  color: var(--craie);
}
.bouton--creux:hover,
.bouton--creux:focus-visible {
  border-color: var(--craie);
  color: var(--craie);
}

.bouton--grand { font-size: var(--t-0); padding: 0.8em 1.9em; }

/* ---------- Bandeau -------------------------------------------------- */

.bandeau {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(18, 24, 28, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--arete);
}

.bandeau__in {
  max-width: var(--large);
  margin: 0 auto;
  padding: 0.8rem var(--gouttiere);
  display: flex;
  align-items: center;
  gap: var(--esp-sm);
}

.bandeau__nom {
  font-family: var(--f-titre);
  font-weight: 800;
  font-size: var(--t-1);
  color: var(--craie);
  text-decoration: none;
  line-height: 1;
}
.bandeau__nom:hover { color: var(--craie); }

.bandeau__lieu {
  font-size: var(--t--05);
  color: var(--craie-doux);
}

.bandeau__bascule {
  margin-left: auto;
  background: none;
  border: 1px solid var(--arete);
  border-radius: 1px;
  padding: 0.55rem 0.6rem;
  cursor: pointer;
  line-height: 0;
}
.bandeau__barres { display: block; }
.bandeau__barres span {
  display: block;
  width: 20px; height: 2px;
  background: var(--craie);
  margin: 4px 0;
}

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--esp-md);
}
/* `:not(.bouton)` plutôt que deux rustines `.menu .bouton`.
   Celles-ci avaient la même spécificité (0,2,0) que
   `.bouton--rencontre:focus-visible` et gagnaient par ordre source : au Tab,
   le bouton perdait son fond mais gardait `color: var(--nuit)` — 1,05:1,
   libellé invisible, sur l'unique conversion du site et pour les seuls
   utilisateurs clavier. En excluant le bouton ici, les règles de `.bouton`
   s'appliquent sans être contrariées, et les deux rustines disparaissent. */
.menu a:not(.bouton) {
  font-size: var(--t--05);   /* 15px — remontée depuis 12,75px (capsule C) */
  /* La couleur de lien, gardée (arbitrage AC) : la nav n'est pas sourde. */
  color: var(--ardoise);     /* 7,96:1 sur nuit — AAA */
  text-decoration: none;
}
.menu a:not(.bouton):hover { color: var(--craie); }
.menu a:not(.bouton)[aria-current="page"] { color: var(--craie); }
/* Le téléphone remplace l'ancien bouton « Se rencontrer » à droite du menu :
   même famille visuelle que la nav, un cran plus affirmé (c'est une action). */
.menu .menu__tel a { color: var(--craie); font-weight: 600; white-space: nowrap; }
@media (min-width: 861px) { .menu__tel { margin-left: var(--esp-sm); } }

@media (max-width: 860px) {
  .bandeau__lieu { display: none; }
  .menu {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--nuit);
    border-bottom: 1px solid var(--arete);
    padding: var(--esp-sm) var(--gouttiere) var(--esp-md);
  }
  .menu.est-ouvert { display: block; }
  .menu ul { flex-direction: column; align-items: flex-start; gap: var(--esp-sm); }
}
@media (min-width: 861px) {
  .bandeau__bascule { display: none; }
  .menu { margin-left: auto; }
}

/* ---------- Titres de section --------------------------------------- */

.titre-section {
  font-size: clamp(var(--t-2), 4.4vw, var(--t-3));
  margin-bottom: var(--esp-sm);
}

.chapo {
  font-size: var(--t-1);
  line-height: 1.5;
  max-width: 46ch;
  color: var(--craie);
}

.vide {
  color: var(--craie-doux);
  font-size: var(--t--05);
  border: 1px dashed var(--arete);
  padding: var(--esp-sm);
}

/* ---------- 1 · La scène : entrer dans la maquette ------------------- */

.scene { padding-block: var(--esp-lg) var(--esp-xl); }

.scene__grille {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 900px) {
  .scene__grille { grid-template-columns: 1.05fr 0.95fr; }
}

.scene__titre {
  font-size: clamp(var(--t-2), 5vw, var(--t-4));
  margin-bottom: var(--esp-sm);
  text-wrap: balance;
}
.scene__mot p { color: var(--craie-doux); max-width: 42ch; }
.scene__invite {
  color: var(--craie);
  font-family: var(--f-titre);
  font-weight: 700;
  font-size: var(--t-1);
  margin-bottom: var(--esp-sm);
}

/* La visite — une seule vue à la fois, dans une vitrine éclairée d'en haut */
.visite {
  border: 1px solid var(--arete);
  background:
    radial-gradient(120% 90% at 50% 6%, #26333C 0%, #171F25 45%, #0D1216 100%);
}

.visite__cadre {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
}
.visite__cadre:active { cursor: grabbing; }

.visite__vue {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition);
}
.visite__vue.est-active { opacity: 1; visibility: visible; }
/* <picture> est en ligne par défaut : sans display:block, height:100% n'a
   aucun effet et le cadre reste vide. */
.visite__vue picture { display: block; width: 100%; height: 100%; }
.visite__vue img { width: 100%; height: 100%; object-fit: cover; }

/* Sans JavaScript, les vues s'empilent au lieu de disparaître :
   le visiteur voit tout, il perd seulement le confort. */
.visite:not([data-visite-actif]) .visite__cadre {
  aspect-ratio: auto;
  display: grid;
  gap: 2px;
}
.visite:not([data-visite-actif]) .visite__vue {
  position: static;
  opacity: 1;
  visibility: visible;
}

.visite__legende {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0.6rem 0.8rem;
  background: linear-gradient(transparent, rgba(13, 18, 22, 0.92));
  font-size: var(--t--05);
  color: var(--craie);
}

.visite__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-sm);
  border-top: 1px solid var(--arete);
  padding: 0.5rem 0.6rem;
}

.visite__pas {
  background: none;
  border: 1px solid var(--arete);
  border-radius: 1px;
  color: var(--craie);
  font-size: var(--t-0);
  line-height: 1;
  padding: 0.45em 0.8em;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.visite__pas:hover { border-color: var(--craie); }
.visite__pas[disabled] { opacity: 0.4; cursor: default; }

.visite__indication {
  margin: 0;
  font-size: var(--t--05);
  color: var(--craie-doux);
  font-variant-numeric: tabular-nums;
}
.visite__aide { color: var(--craie-doux); }   /* --arete = 3,02:1, sous le seuil texte */
@media (max-width: 560px) { .visite__aide { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .visite__vue { transition: none; }
}

/* ---------- 2 · Ce que j'ai bâti ------------------------------------------ */

.bati {
  padding-block: var(--esp-lg);
  border-top: 1px solid var(--arete);
}

/* Les filets sont portés par les blocs, pas par le fond de la grille :
   avec `background` sur le conteneur, une piste vide en fin de rangée
   s'affiche comme un aplat clair. `outline` ne prend pas de place. */
.bati__grille {
  margin-top: var(--esp-md);
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.objet {
  background: var(--socle);
  outline: 1px solid var(--arete);
  display: flex;
  flex-direction: column;
  padding-bottom: var(--esp-sm);
}
.objet__lien { text-decoration: none; color: inherit; display: block; }
.objet__lien:hover .objet__nom { color: var(--ardoise); }

.objet__scene {
  aspect-ratio: 4 / 3;
  background: radial-gradient(110% 90% at 50% 12%, #26333C, #141B20 70%);
  overflow: hidden;
}
.objet__scene picture { display: block; width: 100%; height: 100%; }
.objet__scene img { width: 100%; height: 100%; object-fit: cover; }

.objet__nom {
  font-size: var(--t-2);
  font-weight: 700;
  padding: 0.75rem 1rem 0;
  transition: color var(--transition);
}
.objet__cartel {
  font-size: var(--t--05);
  color: var(--craie-doux);
  padding-inline: 1rem;
  margin: 0.25rem 0 0.5rem;
}
.objet__resume {
  font-size: var(--t--05);
  padding-inline: 1rem;
  margin-bottom: 0.75rem;
}
.objet__cta { padding-inline: 1rem; margin: auto 0 0; }

/* ---------- 3 · Ce que la maquette règle ---------------------------- */

.propos {
  padding-block: var(--esp-lg);
  border-top: 1px solid var(--arete);
}
.propos__in { display: grid; gap: var(--esp-md); }
@media (min-width: 900px) {
  .propos__in { grid-template-columns: 1.2fr 0.8fr; align-items: start; }
  .propos .titre-section { grid-column: 1 / -1; }
}
.propos__texte p { max-width: 58ch; color: var(--craie-doux); }

.devis {
  background: var(--socle);
  border: 1px solid var(--arete);
  border-left: 3px solid var(--rencontre);
  padding: var(--esp-sm) 1.2rem 1.2rem;
}
.devis__titre {
  font-size: var(--t-1);
  margin-bottom: 0.5rem;
}
.devis p { font-size: var(--t--05); color: var(--craie-doux); }
.devis .bouton { margin-top: 0.4rem; }

/* ---------- 4 · Du bois à la pierre --------------------------------- */

.savoirs {
  padding-block: var(--esp-lg);
  border-top: 1px solid var(--arete);
}
.savoirs__liste {
  list-style: none;
  margin: var(--esp-md) 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
}
@media (min-width: 780px) {
  .savoirs__liste { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}
.savoir { background: var(--nuit); outline: 1px solid var(--arete); padding: 1.1rem 1rem 1.3rem; }
.savoir__nom { font-size: var(--t-1); margin-bottom: 0.35rem; }
.savoir__texte { font-size: var(--t--05); color: var(--craie-doux); margin: 0; }

/* ---------- 5 · L'atelier ------------------------------------------- */

.atelier {
  padding-block: var(--esp-lg);
  border-top: 1px solid var(--arete);
}
.atelier__in { display: grid; gap: var(--esp-md); align-items: center; }
@media (min-width: 820px) {
  .atelier__in { grid-template-columns: 0.9fr 1.1fr; }
}
.atelier__portrait picture { display: block; }
.atelier__portrait img { border: 1px solid var(--arete); }
.atelier__mot p { color: var(--craie-doux); max-width: 52ch; }

/* ---------- 6 · Se rencontrer --------------------------------------- */

.rencontre {
  padding-block: var(--esp-lg);
  border-top: 1px solid var(--arete);
  background: var(--socle);
}
.rencontre__in { text-align: left; max-width: 52ch; }
.rencontre__titre {
  font-size: clamp(var(--t-2), 4.6vw, var(--t-3));
  color: var(--rencontre);
  margin-bottom: var(--esp-xs);
}
.rencontre__mot { color: var(--craie-doux); }
.rencontre__tel { font-size: var(--t--05); color: var(--craie-doux); margin-top: var(--esp-sm); }

/* ---------- Fiche chantier ------------------------------------------ */

.fiche__tete { padding-block: var(--esp-lg) var(--esp-md); }
.fiche__retour { font-size: var(--t--05); margin-bottom: var(--esp-sm); }
.fiche__titre { font-size: clamp(var(--t-2), 5.4vw, var(--t-4)); }
.fiche__cartel { color: var(--craie-doux); font-size: var(--t--05); margin: 0.4rem 0 var(--esp-sm); }
.fiche__visite, .fiche__famille { padding-block: var(--esp-md); }
.fiche__famille { border-top: 1px solid var(--arete); }

.planche {
  margin-top: var(--esp-sm);
  display: grid;
  gap: var(--esp-sm);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.planche__item { margin: 0; background: var(--socle); border: 1px solid var(--arete); }
.planche__item picture { display: block; }
.planche__item img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.planche__item video, .planche__video { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; display: block; }
.planche__item figcaption {
  font-size: var(--t--05);
  color: var(--craie-doux);
  padding: 0.55rem 0.7rem 0.7rem;
}

/* ---------- Formulaire ---------------------------------------------- */

.bloc-simple { padding-block: var(--esp-lg) var(--esp-xl); }

.formulaire { margin-top: var(--esp-md); max-width: 40rem; }

.champ { margin-bottom: var(--esp-sm); }
.champ label {
  display: block;
  font-size: var(--t--05);
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.champ input,
.champ textarea {
  width: 100%;
  font: inherit;
  font-size: var(--t-0);
  color: var(--craie);
  background: var(--socle);
  /* --arete sur --socle donne 2,66:1 : sous le seuil non textuel de 3:1,
     et c'est le seul tracé qui délimite le champ. */
  border: 1px solid var(--arete-champ);
  border-radius: 1px;
  padding: 0.65em 0.75em;
}
.champ input:focus,
.champ textarea:focus { border-color: var(--ardoise); }
.champ textarea { resize: vertical; min-height: 8rem; }
.champ__aide { font-size: var(--t--05); color: var(--craie-doux); margin: 0.3rem 0 0; }
.champ__erreur { font-size: var(--t--05); color: var(--rencontre); margin: 0.3rem 0 0; }
.champ--erreur input,
.champ--erreur textarea { border-color: var(--rencontre); }
.requis { color: var(--rencontre); }

.pot-de-miel {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.mention-rgpd {
  font-size: var(--t--05);
  color: var(--craie-doux);
  border-left: 1px solid var(--arete);
  padding-left: 0.9rem;
  margin-block: var(--esp-sm);
}

.alerte {
  border: 1px solid var(--rencontre);
  border-left-width: 3px;
  background: var(--socle);
  padding: 0.8rem 1rem;
  font-size: var(--t--05);
}

.accuse { max-width: 44ch; }
.contact__alternative { margin-top: var(--esp-md); font-size: var(--t--05); color: var(--craie-doux); }

/* ---------- Pied ------------------------------------------------------ */

.pied {
  border-top: 1px solid var(--arete);
  padding-block: var(--esp-md) var(--esp-lg);
  font-size: var(--t--05);
  color: var(--craie-doux);
}
.pied__in {
  max-width: var(--large);
  margin: 0 auto;
  padding-inline: var(--gouttiere);
  display: grid;
  gap: var(--esp-md);
}
@media (min-width: 780px) {
  .pied__in { grid-template-columns: 1fr 1fr 1.4fr; }
}
.pied__nom {
  font-family: var(--f-titre);
  font-weight: 700;
  font-size: var(--t-1);
  color: var(--craie);
  margin-bottom: 0.2rem;
}
.pied__intitule {
  font-weight: 600;
  color: var(--craie);
  margin-bottom: 0.3rem;
}
.pied p { margin-bottom: 0.35em; }
.pied__rgpd { margin-top: 0.8rem; }
.pied__copyright { margin-top: 0.8rem; color: var(--craie-doux); }
.pied__siret { margin-top: 0.6rem; color: var(--craie-doux); }
.pied__credit { color: var(--craie-doux); }

/* ---------- Impression ------------------------------------------------ */

@media print {
  .bandeau, .evitement, .visite__barre, .bouton { display: none; }
  body { background: #fff; color: #000; }
  .visite__vue { position: static; opacity: 1; visibility: visible; }
}

/* =====================================================================
   Capsule C — haut de page « lecture », greffé de la discipline de
   « retrancher ». Voix serif pour l'énoncé et les titres ; sans pour le
   corps et l'interface. Cinq niveaux typographiques employés.
   ===================================================================== */

/* La voix de lecture : un serif système mène l'énoncé et les titres de
   section. Le poids retombe (un serif à 800 est lourd) et la ligne se resserre. */
.haut__titre,
.titre-section {
  font-family: var(--f-lecture);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---------- Haut de page — l'accompagnement ------------------------- */
.haut { padding-block: var(--esp-lg) var(--esp-xl); }
/* Bureau : deux colonnes — l'énoncé à gauche, la grille à droite, comme sur
   les trois planches (arbitrage AC). Mobile : une colonne, la grille passe
   SOUS l'énoncé. « Sous l'énoncé » ne vaut donc qu'en mobile — et en bureau la
   grille est dans le premier écran, ce que le poids servi doit refléter. */
.haut__in {
  display: grid;
  gap: var(--esp-lg);
  align-items: start;
}
@media (min-width: 760px) {
  .haut__in { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--esp-xl); }
  .haut__mot { align-self: center; }
  .kaleido { margin-top: 0; }        /* plus « sous » l'énoncé mais à côté */
}

.haut__appui {
  font-family: var(--f-corps);
  font-size: var(--t--05);          /* 15px */
  letter-spacing: 0.02em;
  color: var(--ardoise);            /* 7,96:1 sur nuit — AAA */
  margin: 0 0 var(--esp-sm);
}
.haut__titre {
  font-size: clamp(1.78rem, 1.1rem + 3.4vw, 2.37rem);  /* 30 → 40px */
  line-height: 1.1;
  max-width: 24ch;
  margin: 0 0 var(--esp-sm);
}
/* La phrase d'accroche de Pat, conservée sous le H1 : sous-titre affirmé. */
.haut__accroche {
  font-family: var(--f-titre);
  font-size: clamp(1.15rem, 0.9rem + 1vw, 1.4rem);
  line-height: 1.25;
  color: var(--craie);
  max-width: 30ch;
  margin: 0 0 var(--esp-md);
}
.haut__para {
  max-width: 60ch;                  /* mesure de lecture — ~62 signes */
  margin: 0 0 1em;
}
.haut__mot .bouton { margin-top: var(--esp-sm); }

/* ---------- Kaléidoscope — 3×3, une tuile mue à la fois ------------- */
.kaleido {
  margin-top: var(--esp-lg);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  max-width: 40rem;
  aspect-ratio: 1;
  /* NON CLIQUABLE — une cible mouvante n'est pas une navigation. Aucun lien,
     et rien qui suggère qu'on puisse cliquer. La section « chantiers » renseigne. */
  pointer-events: none;
}
.kaleido__case {
  position: relative;
  overflow: hidden;
  border-radius: 1px;
  background: var(--socle);
}
.kaleido__case--vide {
  /* La case vide au cœur : un silence, pas un trou. Un léger creux. */
  background: var(--socle);
  box-shadow: inset 0 0 0 1px var(--vitre);
}
/* Le <picture> ne porte aucune boîte : l'image reste en absolu dans la case. */
.kaleido__case picture { display: contents; }
.kaleido__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Deux calques par case : l'image d'accueil (.kaleido__img, dans le <picture>)
   et un tampon (.kaleido__alt). Par défaut l'accueil est visible, le tampon
   transparent. La mue — pilotée par site.js, en continu et au hasard — remplit
   le tampon d'une image du pool puis pose/retire la classe `--mue` : le fondu
   croisé se fait par transition CSS. Sans JS ou sous prefers-reduced-motion,
   aucune classe n'est posée : l'image d'accueil reste fixe, rien ne bouge. */
.kaleido__alt { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .kaleido__img { transition: opacity 1.2s ease; }
}
.kaleido__case--mue .kaleido__img:not(.kaleido__alt) { opacity: 0; }
.kaleido__case--mue .kaleido__alt { opacity: 1; }

/* Tuile vidéo : même remplissage carré que .kaleido__img, mais elle ne mue pas
   (elle joue seule, en boucle, muette). Le poster couvre la case pendant le
   chargement — jamais de case vide. */
.kaleido__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Sous-titre de section ---------------------------------- */
.titre-section__sous {
  display: block;
  font-family: var(--f-corps);
  font-weight: 400;
  font-size: var(--t--05);          /* 15px */
  letter-spacing: 0;
  color: var(--craie-doux);
  margin-top: 0.35rem;
}

/* Le bloc « D'abord comprendre » resserre sa mesure de lecture. */
.propos__texte p { max-width: 60ch; }

@media (max-width: 640px) {
  .kaleido { max-width: 100%; gap: 0.4rem; }
}