/* ============================================================
   TRONC « BÂTIMENT ET SERVICES » — DevelopInk, 01.08.2026
   Masterclass de référence : metiers/macon/. C'est ce dessin que
   outils/decliner-metier.mjs recopie vers peinture, chauffage-sanitaire,
   menuiserie, nettoyage, électricité, paysagiste, serrurerie et toiture.

   ⚠ RÈGLE QUI TIENT TOUT LE RESTE : rien dans cette feuille ne suppose
   LE MAÇON. Pas de truelle, pas de motif de brique, pas de couleur en
   dur. Ce qui porte le caractère ici, c'est l'ORDRE — assises pleines,
   filets nets, postes numérotés, grande respiration blanche — et c'est
   vrai d'un peintre, d'un couvreur ou d'une entreprise de nettoyage.
   Ce qui distingue les neuf métiers, ce sont les PHOTOS et la palette.

   Ambiance : béton clair et brique brûlée. Sobre, solide, dense.
   Beaucoup de blanc, des angles nets (--rayon:4px) — sauf les boutons,
   qui sont des pilules pleines (demande du responsable, 01.08.2026 :
   « le bouton appeler pas beau, vraiment juste un rectangle avec des
   angles droits »).
   Deux surfaces de VERRE dépoli, et deux seulement : la barre de
   navigation et le panneau du bandeau. Leurs contrastes sont mesurés au
   pire cas, pas estimés (voir le :root).

   Un défaut de MISE EN PAGE se corrige ICI et se redécline aux huit
   autres métiers. Un défaut de COULEUR ou de MOT se corrige dans
   palette.json / metier.json du métier concerné.
   ============================================================ */


/* ---------- LES DEUX VOIX, SERVIES PAR LE SITE ----------
   Deux POSTES, pas deux polices : la feuille n'écrit jamais un nom de
   police réel. `police-titre.woff2` et `police-libelle.woff2` sont posés
   à côté de ce fichier ; la déclinaison y copie la police du métier
   (banque `gabarit-site/polices/`, `node outils/police.mjs --lister`).
   Au départ, celles du restaurant — le duo définitif du tronc sera
   choisi sur capture.

     voix de TITRE   → ce qui se lit une fois : h1, h2, h3, le nom.
     voix de LIBELLÉ → ce qui se lit en passant : menu, surtitres,
                       libellés, boutons, ET TOUS LES CHIFFRES.
     pile système    → le corps de texte, qui ne se remarque nulle part.

   ⚠ Les chiffres ne vont JAMAIS dans la police de titre : les garaldes
   dessinent des chiffres de hauteurs inégales. Numéros de poste, numéro
   de téléphone, heures → --police-libelle + lining-nums tabular-nums.
   Aucune requête vers un serveur de polices : ce sont deux fichiers du
   site, pas des dépendances externes. */
@font-face{
  font-family:'PoliceTitre';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('police-titre.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'PoliceLibelle';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('police-libelle.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}


/* ===== ZONE PERSO : COULEURS, POLICES, RYTHME ===== */
:root{
  /* Palette du tronc — BÉTON ET BRIQUE BRÛLÉE.
     CONTRASTES MESURÉS le 01.08.2026 (node outils/contraste.mjs macon,
     plancher AA = 4,5:1). Le plus bas de toute la feuille est à 5,39 —
     c'est le texte secondaire du panneau de verre, dans son pire cas.
       encre / fond            14,50     encre / fond-alt        12,44
       encre / carte           15,81     encre-douce / fond       6,40
       encre-douce / fond-alt   5,49     encre-douce / carte      6,98
       marque / fond            6,32     marque / carte           6,89
       marque / fond-alt        5,42     blanc / marque           6,89
       blanc / marque-fonce     9,76
     Bandes de nuit (savoir-faire, pied) :
       creme / nuit            15,00     creme-doux / nuit        8,90
       laiton / nuit            7,04     laiton-clair / nuit      9,13
     Panneau de VERRE du bandeau — mesuré dans le PIRE CAS, c'est-à-dire
     une photo entièrement BLANCHE derrière le voile --nuit à 84 % :
       creme 9,08 · creme-doux 5,39 · laiton-clair 5,53 · blanc 10,26
     ⚠ --laiton n'y descend qu'à 3,96 : il ne porte JAMAIS de texte sur
     le panneau de verre, seulement sur les bandes de nuit.
     Barre de navigation en verre — pire cas, photo NOIRE dessous
     (voile --fond à 94 %) : encre 12,67 · encre-douce 5,59 · marque 5,52 */
  --encre:#1f2327;              /* texte courant — graphite */
  --encre-douce:#545a60;        /* texte secondaire — jamais plus clair que ça */
  --fond:#f6f5f2;               /* béton clair */
  --fond-alt:#e6e4de;           /* sections alternées, section contact */
  --carte:#ffffff;              /* les panneaux */
  --marque:#9d3a14;             /* brique brûlée : boutons, assises, filets, numéro */
  --marque-clair:color-mix(in oklab, var(--marque) 10%, white);
  --marque-fonce:#772c0f;       /* survol des boutons — mesuré, pas calculé */
  --filet:#d5d2ca;              /* filets et bordures : décor, jamais du texte */
  --wa:#25d366;                 /* vert WhatsApp : texte FONCÉ dessus, jamais blanc */

  /* Bandes de nuit : le bandeau, la bande « savoir-faire » et le pied. */
  --nuit:#191d21;
  --creme:#f2f1ed;              /* texte sur nuit */
  --creme-doux:#bdbcb6;         /* texte secondaire sur nuit */
  --laiton:#d99a5b;             /* surtitres et filets sur nuit */
  --laiton-clair:#e9b482;       /* accents du panneau de verre */

  /* ---------- LES SURFACES — ce qui rend un métier SOMBRE ----------
     02.08.2026. Jusqu'ici, passer un métier au fond noir voulait dire
     réécrire dans sa signature une dizaine de règles du tronc : le liseré
     blanc du panneau, les ombres calées sur un gris clair, les deux halos
     posés en rgba() littéral, le blanc des boutons. L'électricité l'a fait
     à la main le 01.08 — quatorze lignes de rustines, à refaire pour
     chaque nouveau métier sombre.
     Ces valeurs deviennent des POSTES. Une palette qui bascule au noir
     n'a plus qu'à les redéfinir dans son palette.json : le dessin, lui,
     ne bouge pas. C'est ce qui rend les fonds noirs demandés le 02.08
     (maçonnerie, menuiserie, poêles, toiture, café, restaurant) une
     affaire de données, plus de code. */
  --liseret:rgba(255,255,255,.9);   /* trait clair en haut du panneau — invisible sur fond noir */
  --ombre-panneau:rgba(31,35,39,.55);
  --ombre-photo:rgba(31,35,39,.7);
  --halo-savoir:color-mix(in srgb,var(--laiton) 16%,transparent);
  --halo-contact:color-mix(in srgb,var(--marque) 9%,transparent);
  --texte-bouton:#fff;              /* passe au fond quand --marque est clair (jaune, laiton) */
  /* Le RUBAN de démo. Il était peint avec --marque, et c'était juste tant
     que la marque était une brique foncée. Sur les palettes passées au noir
     le 02.08.2026, --marque a dû s'éclaircir pour rester lisible : le ruban
     est alors devenu une bande fluo en haut de page, plus voyante que le
     site lui-même. Il prend donc ses propres postes. Par défaut ils valent
     exactement ce qu'ils valaient — les métiers clairs ne bougent pas. */
  --ruban-fond:var(--marque);
  --ruban-texte:var(--texte-bouton);

  /* ---------- LA BARRE DE NAVIGATION ----------
     Consigne du responsable, 02.08.2026 : « les bandeaux du haut, avec
     les menus — j'aimerais de meilleurs bandeaux, avec un effet de
     transparence, qui contrastent avec le reste, donc globalement foncé,
     un peu comme celui du site DevelopInk. »
     Avant : un voile de --fond à 94 %, c'est-à-dire du beige sur du
     beige. La barre ne se détachait de rien et disparaissait dès qu'elle
     passait sur une section claire.
     Maintenant : du VERRE FONCÉ. --nuit à 85 % + flou d'arrière-plan.
     85 %, pas 94 % : à 85 % on voit encore bouger la page dessous — c'est
     la transparence demandée — et le pire cas reste tenu.
     Le chiffre a été CHOISI, pas estimé. Mesuré sur les dix métiers dans
     les deux pires cas (photo entièrement blanche, puis entièrement noire
     sous la barre), en regardant les trois textes qu'elle porte :
       à 82 %  le plus faible de toute la série tombe à 4,57
       à 85 %  il remonte à 5,05      ← retenu
       à 88 %  5,60, mais la barre commence à ressembler à un aplat
     Le point faible est toujours le même : le sous-titre « Ville et
     environs » en --laiton-clair, au-dessus d'une photo claire.
     Un seul réglage vaut donc pour les onze métiers. */
  --barre:color-mix(in srgb,var(--nuit) 85%,transparent);
  --barre-filet:color-mix(in srgb,var(--creme) 16%,transparent);
  --barre-texte:var(--creme);       /* le nom de l'entreprise */
  --barre-texte-doux:var(--creme-doux);
  --barre-accent:var(--laiton-clair);
  /* ⚠ --laiton (et non --laiton-clair) tombe à 4,05 sur la barre posée
     au-dessus d'une photo claire : sous le plancher. La ligne « Ville et
     environs » et les traits du menu prennent donc --laiton-clair. */

  --police-texte:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* La voix servie par le site d'abord, puis une pile de repli faite de
     polices déjà installées sur les machines courantes. La déclinaison
     remplace CES DEUX LIGNES quand elle change de police : le repli doit
     rester du même genre que la police servie (une serif ne retombe
     jamais sur une sans, sinon la page change d'allure au chargement). */
  --police-titre:'PoliceTitre',"Iowan Old Style","Palatino Linotype",Palatino,
    "Times New Roman",Georgia,serif;
  --police-libelle:'PoliceLibelle',"Avenir Next",Avenir,"Century Gothic","Segoe UI",
    system-ui,sans-serif;

  --rayon:4px;                  /* angles nets : c'est du bâti, pas un magazine */
  --rayon-bouton:2rem;          /* pilule : un bouton n'est JAMAIS un rectangle brut */
  --largeur:1120px;
  --gouttiere:clamp(1rem,3vw,2rem);
  --hauteur-bandeau:78svh;
  --assise:4px;                 /* épaisseur du bandeau d'accent des panneaux */
}
/* ===== FIN ZONE PERSO : COULEURS, POLICES, RYTHME ===== */


/* ---------- SOCLE : remise à zéro ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--police-texte);
  font-size:clamp(1rem,.95rem + .2vw,1.08rem);   /* jamais sous 16px */
  line-height:1.62;
  color:var(--encre);
  background:var(--fond);
  -webkit-font-smoothing:antialiased;
}
/* Pas d'overflow-x:hidden sur body, pas de 100vw : on travaille en width:100%. */
img,svg,video{max-width:100%;height:auto;display:block}
figure{margin:0;max-width:100%}   /* parade : une image cassée ne fait pas déborder la page */
h1,h2,h3{font-family:var(--police-titre);font-weight:400;line-height:1.1;
  margin:0 0 .6em;text-wrap:balance}
/* ⚠ Le clamp est calé sur des titres RÉELS, pas sur « On monte les murs » :
   un h1 ne porte jamais overflow-wrap:break-word (il couperait un mot en
   deux), donc le corps maximal doit laisser passer une accroche longue. */
h1{font-size:clamp(2rem,1.25rem + 3.1vw,3.5rem);letter-spacing:-.005em}
h2{font-size:clamp(1.7rem,1.15rem + 2.2vw,2.6rem);letter-spacing:-.005em}
h3{font-size:clamp(1.1rem,1.02rem + .42vw,1.32rem)}
p{margin:0 0 1em}
/* Largeur de lecture sur la PROSE seulement. Jamais sur `p` en général :
   le ruban et le pied sont des `p` pleine largeur. */
.hero__intro,.contact__phrase,.poste p{max-width:58ch}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
main a:not(.bouton){text-decoration:underline;text-underline-offset:.15em}
/* Cibles tactiles : un tel:/mailto: en cours de texte mesure 22px de haut
   sans ce padding (24px exigés, WCAG 2.5.8). */
main a[href^="tel:"]:not(.bouton),main a[href^="mailto:"]:not(.bouton){
  display:inline-block;padding-block:.25rem}
:focus-visible{outline:3px solid var(--marque);outline-offset:2px;border-radius:2px}
.hero :focus-visible,.savoir :focus-visible,.pied :focus-visible{outline-color:var(--laiton)}

.bande{width:100%;max-width:var(--largeur);margin-inline:auto;padding-inline:var(--gouttiere)}

/* Lien d'évitement : caché VERS LE HAUT, pas vers la gauche (un left:-9999px
   est signalé comme débordement par le contrôle). */
.saut-contenu{position:absolute;top:-6rem;left:.5rem;z-index:50;background:var(--fond);
  color:var(--encre);padding:.6rem 1rem;border-radius:var(--rayon)}
.saut-contenu:focus{top:.5rem}

.ruban{margin:0;padding:.5rem var(--gouttiere);text-align:center;font-size:.85rem;
  background:var(--ruban-fond);color:var(--ruban-texte)}                     /* 6,89 */
/* padding-block : sans lui ces liens en ligne mesurent 22px de haut. */
.ruban a,.pied a{display:inline-block;padding-block:.2rem;text-decoration:underline}


/* ---------- L'ASSISE — l'ornement du tronc ----------
   Un filet, et un segment plein de couleur d'accent posé dessus : la
   ligne de niveau d'une assise. C'est de la GÉOMÉTRIE, donc ça vaut pour
   les neuf métiers — un dessin figuratif (truelle, rouleau, clé) n'irait
   qu'à un seul et casserait les huit autres.
   Elle se déroule de gauche à droite quand sa section apparaît. */
.assise{display:block;height:3px;width:min(190px,100%);
  background:linear-gradient(90deg,var(--marque) 0 52px,var(--filet) 52px 100%);
  transform-origin:left;margin-top:.2rem}
.entete-section--centre .assise{margin-inline:auto;
  background:linear-gradient(90deg,var(--filet) 0 calc(50% - 26px),
    var(--marque) calc(50% - 26px) calc(50% + 26px),var(--filet) calc(50% + 26px) 100%);
  transform-origin:center}
/* Elle porte elle-même la classe `reveal` (elle n'est pas révélée PAR son
   parent) : un ornement qui dépendrait d'un sélecteur enfant reste invisible
   partout où l'on force l'apparition de l'extérieur — mesuré le 01.08.2026,
   l'assise manquait sur toutes les captures. Le déroulé est défini avec les
   autres apparitions, en bas de cette feuille. */


/* ---------- BOUTONS ----------
   « Le bouton appeler pas beau, vraiment juste un rectangle avec des
   angles droits » (01.08.2026). Réponse : pilule, capitales espacées dans
   la police de libellé, liseré clair en haut (le relief), ombre portée, et
   un léger soulèvement au survol. Toujours PLEIN — jamais de ghost
   transparent, illisible sur fond clair. */
.bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:46px;padding:.8rem 1.6rem;border:0;border-radius:var(--rayon-bouton);
  font-family:var(--police-libelle);font-size:.92rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.1em;text-align:center;cursor:pointer;
  font-variant-numeric:lining-nums tabular-nums;
  transition:background-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.bouton--plein{background:var(--marque);color:var(--texte-bouton);        /* 6,89 */
  box-shadow:0 1px 0 color-mix(in srgb,var(--liseret) 24%,transparent) inset,
             0 12px 26px -14px color-mix(in srgb,var(--marque) 70%,transparent)}
.bouton--plein:hover,.bouton--plein:focus-visible{background:var(--marque-fonce);  /* 9,76 */
  transform:translateY(-2px);
  box-shadow:0 1px 0 color-mix(in srgb,var(--liseret) 28%,transparent) inset,
             0 18px 34px -14px color-mix(in srgb,var(--marque) 80%,transparent)}
.bouton--wa{background:var(--wa);color:#11221a}   /* texte foncé : blanc sur #25d366 = 1,98:1 */
.bouton--wa:hover,.bouton--wa:focus-visible{background:color-mix(in oklab,var(--wa) 88%,black);
  transform:translateY(-2px)}
.bouton--grand{min-height:54px;padding:.95rem 1.9rem;font-size:.98rem}

/* WhatsApp n'a de sens que sur un téléphone. */
.mobile-seulement{display:inline-flex}
@media (min-width:48rem){.mobile-seulement{display:none}}


/* ---------- NAVIGATION (contrat #nav-toggle / #nav-links) ----------
   Première surface de VERRE, et la plus visible du site : elle est la
   seule chose qui reste à l'écran du début à la fin.
   VERRE FONCÉ depuis le 02.08.2026 (voir --barre dans le :root). Elle ne
   recopie plus une couleur en dur : elle descend de --nuit, donc chaque
   métier a SA barre — anthracite chez le maçon, brun noyer en menuiserie,
   ardoise en toiture — sans qu'une seule ligne change ici.
   Le NOM garde la police de titre, les entrées passent en libellé : sinon
   la barre entière est écrite dans une seule lettre et le nom ne ressort
   plus de ses liens. */
.entete{position:sticky;top:0;z-index:30;
  background:var(--barre);
  border-bottom:1px solid var(--barre-filet);
  /* L'ombre porte la barre au-dessus de la page : sans elle, un bandeau
     foncé posé sur une section foncée n'a plus de bord du tout. */
  box-shadow:0 14px 34px -22px rgba(0,0,0,.8)}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .entete{-webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15)}
}
/* Un liseré d'accent d'un bord à l'autre, épais d'un pixel : c'est lui qui
   raccroche la barre à la couleur du métier. Il ne se pose sur AUCUNE
   photo — il est à l'intérieur de la barre, contre son bord bas. */
.entete::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--marque) 0 34%,
    color-mix(in srgb,var(--laiton) 55%,transparent) 34% 62%,transparent 62% 100%);
  opacity:.9;pointer-events:none}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;min-height:66px;padding-block:.5rem}
/* min-width:0 : un nom d'entreprise long ne pousse pas le bouton du menu
   hors de l'écran (« Entreprise de maçonnerie … Sàrl » fait 40 signes). */
.marque{display:flex;flex-direction:column;line-height:1.15;min-width:0;flex:1 1 auto}
.marque__nom{font-family:var(--police-titre);font-size:1.15rem;
  text-transform:uppercase;letter-spacing:.06em;color:var(--barre-texte);   /* 15,0 sur la barre */
  overflow-wrap:break-word}
.marque__sous{font-family:var(--police-libelle);font-weight:500;font-size:.7rem;
  color:var(--barre-accent);                                  /* 5,25 au pire cas, photo claire */
  text-transform:uppercase;letter-spacing:.18em;margin-top:.25rem}

#nav-toggle{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;padding:0 11px;background:none;border:1px solid var(--barre-filet);
  border-radius:var(--rayon);cursor:pointer;flex:0 0 auto}
.nav-toggle__trait{display:block;height:2px;background:var(--barre-accent);border-radius:1px}

/* Repli sans JS : par défaut le menu est DÉPLIÉ. C'est la classe `js` posée
   dans le <head> qui autorise à le replier. Un contenu n'est jamais masqué
   par du CSS que seul le JS peut défaire. */
#nav-links{display:flex;flex-direction:column;gap:.15rem;width:100%;padding-bottom:.6rem}
/* Le menu déplié sur téléphone est séparé du nom par un filet : sans lui,
   quatre entrées claires sous un nom clair font un bloc illisible. */
#nav-links{border-top:1px solid var(--barre-filet);padding-top:.5rem;margin-top:.35rem}
#nav-links a{display:flex;align-items:center;min-height:46px;padding:.5rem .25rem;
  font-family:var(--police-libelle);font-weight:500;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.13em;
  color:var(--barre-texte-doux);                              /* 5,12 au pire cas */
  transition:color .2s ease}
#nav-links a:hover,#nav-links a:focus-visible{color:var(--barre-texte)}
#nav-links a.bouton{justify-content:center;letter-spacing:.1em;
  color:var(--texte-bouton);margin-top:.4rem}
/* Sur la barre, le contour de mise au point clair : un anneau à la couleur
   d'accent disparaîtrait dans le verre foncé. */
.entete :focus-visible{outline-color:var(--barre-accent)}
.js #nav-links{display:none}
.js #nav-links.is-open{display:flex}

@media (min-width:62rem){
  #nav-toggle{display:none}
  #nav-links,.js #nav-links{display:flex;flex-direction:row;align-items:center;
    gap:clamp(.9rem,2vw,1.9rem);width:auto;padding-bottom:0;
    /* le filet de séparation n'a de sens qu'en menu déplié, sur téléphone */
    border-top:0;padding-top:0;margin-top:0}
  .marque{flex:0 1 auto}
  #nav-links a{padding:.5rem .3rem}
  #nav-links a.bouton{margin-top:0;padding:.7rem 1.4rem;min-height:44px}
  /* Filet qui se déroule sous l'entrée survolée — le même geste que l'assise.
     En clair, pas en --marque : une brique foncée sur du verre foncé ne se
     voit pas, et c'est l'entrée du menu qu'on veut souligner. */
  #nav-links li:not(:last-child) a{position:relative}
  #nav-links li:not(:last-child) a::after{content:"";position:absolute;
    left:.3rem;right:.3rem;bottom:.5rem;height:2px;background:var(--barre-accent);
    transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
  #nav-links li:not(:last-child) a:hover::after,
  #nav-links li:not(:last-child) a:focus-visible::after{transform:scaleX(1)}
}


/* ---------- EN-TÊTES DE SECTION ----------
   Le surtitre est le libellé type : petites capitales très espacées, dans
   la voix de libellé — sinon il ressemble à une version réduite du h2
   posé dessous et le titre perd son rang. */
.entete-section{margin-bottom:clamp(1.5rem,3.5vw,2.2rem)}
.entete-section h2{margin:0 0 .85rem}
.entete-section--centre{text-align:center}
.sur{font-family:var(--police-libelle);font-weight:500;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.26em;color:var(--marque);margin:0 0 .8rem}


/* ---------- LE PANNEAU ----------
   La forme forte du tronc : une plaque blanche à angles nets, coiffée
   d'une assise pleine de couleur d'accent. Elle sert DEUX fois — « Le
   chantier » en haut, « Contact » en bas : la page s'ouvre sur un panneau
   et se referme sur un panneau. */
.panneau{position:relative;background:var(--carte);
  border:1px solid var(--filet);border-radius:var(--rayon);
  padding:clamp(1.8rem,4vw,3rem) clamp(1.2rem,3.5vw,2.6rem);
  box-shadow:0 1px 0 var(--liseret) inset,0 30px 64px -42px var(--ombre-panneau)}
/* L'assise du panneau — en `inset` par le haut, donc jamais de débordement. */
.panneau::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;
  height:var(--assise);background:var(--marque);
  border-radius:var(--rayon) var(--rayon) 0 0}


/* ---------- BANDEAU ----------
   Photo pleine largeur, voile dégradé, trame de lignes d'aplomb, et le
   texte sur un panneau de verre tenu à gauche par un montant plein. */
.hero{position:relative;display:flex;align-items:flex-end;
  min-height:min(var(--hauteur-bandeau),44rem);
  padding-block:clamp(3rem,9vw,5rem) clamp(4.5rem,11vw,7rem);
  background:var(--nuit)}
.hero__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 52%}
/* ⚠ Le voile et le panneau se calculent à partir de --nuit, jamais d'un
   rgba() recopié à la main : sinon une déclinaison change de palette et
   le haut du site reste dans l'ancienne couleur (mesuré le 01.08.2026
   sur la variante asiatique du restaurant). */
.hero__voile{position:absolute;inset:0;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--nuit) 58%,transparent) 0%,
    color-mix(in srgb,var(--nuit) 26%,transparent) 36%,
    color-mix(in srgb,var(--nuit) 74%,transparent) 100%)}
/* La trame d'aplomb : des hairlines verticales régulières, fondues en haut
   et en bas. De l'ordre posé sur du désordre — c'est tout le propos, et ça
   ne raconte le métier de personne. */
.hero__trame{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,.11) 0 1px,transparent 1px 72px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 34%,#000 72%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 34%,#000 72%,transparent 100%)}
.hero__bande{position:relative;z-index:2;width:100%}

.hero__verre{
  max-width:46rem;padding:clamp(1.5rem,4vw,2.6rem);
  border-radius:var(--rayon);
  border:1px solid rgba(255,255,255,.14);
  border-left:var(--assise) solid var(--marque);   /* le montant d'accent */
  background:color-mix(in srgb,var(--nuit) 84%,transparent);  /* contrastes mesurés au pire cas */
  box-shadow:0 26px 64px -30px rgba(0,0,0,.75);
  color:var(--creme);
  animation:verre-monte .7s cubic-bezier(.2,.75,.25,1) both;
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .hero__verre{-webkit-backdrop-filter:blur(18px) saturate(1.1);
    backdrop-filter:blur(18px) saturate(1.1)}
}
@keyframes verre-monte{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes paraitre{from{opacity:0}to{opacity:1}}

.hero__etiquette{font-family:var(--police-libelle);font-weight:500;font-size:.74rem;
  text-transform:uppercase;letter-spacing:.26em;
  color:var(--laiton-clair);margin:0 0 1rem}                        /* 5,53 au pire cas */
.hero__titre{color:var(--creme);margin:0;line-height:1.06}          /* 9,08 au pire cas */
/* L'accent est un ÉLÉMENT SÉPARÉ, pas un <span> dans le h1 : la
   déclinaison pose du texte, jamais du HTML (contrat data-champ). */
.hero__accent{display:block;font-family:var(--police-titre);line-height:1.06;
  font-size:clamp(2rem,1.25rem + 3.1vw,3.5rem);letter-spacing:-.005em;
  color:var(--laiton-clair);margin:0 0 1rem;text-wrap:balance}       /* 5,53 au pire cas */
.hero__intro{color:var(--creme-doux);font-size:1.05rem;margin:0}     /* 5,39 au pire cas */
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.7rem}
/* ⚠ Mesuré à 360 px le 01.08.2026 : en pilule à largeur naturelle, « Appeler
   le 021 653 24 56 » se casse en deux lignes et les deux derniers chiffres
   restent seuls dessous. Sous 30rem le bouton prend toute la largeur : le
   libellé tient sur une ligne et la cible tactile y gagne. */
@media (max-width:30rem){
  .hero__actions{display:grid;grid-template-columns:1fr}
  .hero__actions .bouton{width:100%;padding-inline:1rem}
}


/* ---------- LES TRAVAUX — le panneau des quatre postes ----------
   Le panneau remonte par-dessus le bas du bandeau : la page s'accroche.
   La photo sort à droite et descend — composition volontairement décalée,
   jamais deux colonnes qui commencent au même endroit. */
.travaux{position:relative;z-index:2;
  margin-top:calc(clamp(2rem,5vw,4rem) * -1);
  padding-block:0 clamp(3rem,8vw,5.5rem)}
.travaux__grille{display:grid;gap:clamp(1.6rem,4vw,3rem)}
@media (min-width:62rem){
  /* minmax(0,…) : une image cassée ne peut pas élargir sa colonne.
     ⚠ `stretch`, et l'image en height:100% : mesuré à 1024 px le 01.08.2026,
     la photo à sa taille naturelle (4/3) s'arrêtait à mi-hauteur du panneau
     et laissait un grand trou gris sous elle. Elle descend maintenant
     jusqu'à la ligne de pied du panneau — le décalage du haut, lui, reste :
     c'est lui qui fait la composition. */
  .travaux__grille{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);align-items:stretch}
  .travaux__visuel{margin-top:clamp(4rem,9vw,7rem);display:flex}
  .travaux__visuel img{height:100%;min-height:20rem;object-fit:cover}
}

/* Les postes numérotés. Le numéro est en police de LIBELLÉ, chiffres tous
   de la même hauteur et de la même chasse : une garalde y dessinerait des
   chiffres à jambages, et 01/02/03/04 ne s'aligneraient plus. */
.postes{display:grid}
.poste{display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(.9rem,2.5vw,1.3rem);
  padding-block:clamp(1rem,2.4vw,1.25rem);
  border-top:1px solid var(--filet)}
.poste:first-child{border-top:0;padding-top:.4rem}
.poste__num{grid-row:1 / span 2;position:relative;padding-left:1.05rem;padding-top:.3rem;
  font-family:var(--police-libelle);font-weight:500;font-size:.8rem;letter-spacing:.1em;
  font-variant-numeric:lining-nums tabular-nums;
  color:var(--marque)}                                                  /* 6,89 sur --carte */
/* Le repère carré : le module, pas un pictogramme. Il se remplit au survol. */
.poste__num::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:8px;
  background:var(--marque);opacity:.4;
  transition:opacity .25s ease,transform .25s ease}
.poste:hover .poste__num::before{opacity:1;transform:scale(1.4)}
.poste h3{grid-column:2;margin:0 0 .3rem;color:var(--encre)}            /* 15,81 */
.poste p{grid-column:2;margin:0;color:var(--encre-douce);font-size:.97rem}  /* 6,98 */
.js .poste.reveal{transition-delay:calc(var(--i,0) * 90ms)}

/* Cadre photo : filet décalé de 10px — toujours moins que la gouttière
   minimale (16px), donc il ne peut pas dépasser du bord de l'écran. */
.cadre{position:relative}
.cadre img{width:100%;border-radius:var(--rayon);object-fit:cover;
  box-shadow:0 26px 52px -32px var(--ombre-photo)}
/* ⚠ LE CADRE NE MORD PLUS SUR LA PHOTO — consigne du responsable, 02.08.2026 :
   « les fils, les lignes, tout ce qui va sur l'image et un peu décalé, c'est
   chaque fois moche ». Ce filet était posé en `inset:12px -12px -12px 12px` :
   12 px À L'INTÉRIEUR de la photo en haut et à gauche, 12 px à l'extérieur en
   bas et à droite. C'est le cadre décalé classique, et il traversait le sujet
   sur deux côtés. Il est désormais ENTIÈREMENT à l'extérieur : il entoure la
   photo au lieu de l'entamer. Un cadre autour d'une photo, oui ; un motif
   par-dessus, jamais — et ça vaut pour les onze métiers, pas seulement le
   maçon où la leçon avait été apprise le 01.08. */
.cadre::after{content:"";position:absolute;inset:-12px;pointer-events:none;
  border:1px solid var(--marque);opacity:.45;border-radius:var(--rayon);
  transition:opacity .35s ease}
.cadre--gauche::after{inset:-12px}
.cadre:hover::after{opacity:.9}


/* ---------- NOS RÉALISATIONS — la galerie « vos photos » ----------
   Trois emplacements sur fond alterné. Deux paysages empilés à droite, la
   verticale à gauche sur toute la hauteur : une composition, pas trois
   vignettes alignées.
   ⚠ Placement EXPLICITE par grid-column/grid-row : sans lui le placement
   automatique donne le bon résultat par hasard, et un hasard change avec
   le navigateur. Les figures sont étirées et les images en height:100%,
   sinon les deux colonnes ne finissent pas au même niveau. */
.realisations{padding-block:clamp(3rem,8vw,5rem);background:var(--fond-alt)}
.realisations__grille{display:grid;gap:clamp(1rem,2.5vw,1.6rem);
  margin-top:clamp(1.8rem,4vw,2.6rem)}
.realisations__grille .cadre{display:flex}
.realisations__grille img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
.realisations__haute img{aspect-ratio:3/4}
@media (min-width:52rem){
  /* La colonne de gauche est la plus étroite : c'est elle qui porte le
     format le plus haut, et à largeur égale elle écrasait tout le reste. */
  .realisations__grille{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .realisations__haute{grid-column:1;grid-row:1 / span 2}
  .realisations__grille .cadre:not(.realisations__haute){grid-column:2}
  .realisations__grille img,.realisations__haute img{aspect-ratio:auto}
}
/* Le filet décalé pointe vers l'extérieur : à droite pour la colonne de
   gauche, il sortirait sous sa voisine. On l'inverse sur la verticale. */
.realisations__haute::after{inset:12px 12px -12px -12px}


/* ---------- LE SAVOIR-FAIRE — la bande de nuit ----------
   Le geste et la matière, deux photos de tailles DIFFÉRENTES alignées par
   le bas : la haute dépasse vers le haut, et c'est ce décalage qui fait la
   composition. Le filet de la photo passe en laiton — même vocabulaire
   graphique que les sections claires, autre ton. */
.savoir{color:var(--creme);
  padding-block:clamp(3rem,8vw,5.5rem);
  background:radial-gradient(120% 85% at 10% 0%,var(--halo-savoir),transparent 60%),
    var(--nuit)}
.savoir .sur{color:var(--laiton)}                     /* 7,04 */
.savoir h2{color:var(--creme)}                        /* 15,00 */
.savoir .assise{background:linear-gradient(90deg,color-mix(in srgb,var(--laiton) 28%,transparent) 0 calc(50% - 26px),
  var(--laiton) calc(50% - 26px) calc(50% + 26px),color-mix(in srgb,var(--laiton) 28%,transparent) calc(50% + 26px) 100%)}

.savoir__bande{display:grid;gap:clamp(1.6rem,4vw,2.8rem)}
/* Les rapports sont tenus par le CSS, pas par le fichier : l'entreprise
   peut déposer n'importe quelle photo, le cadre ne bouge pas. */
.savoir__large img{aspect-ratio:3/2}
.savoir__haute img{aspect-ratio:4/5}
@media (min-width:48rem){
  .savoir__bande{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:end}
  .savoir__haute img{aspect-ratio:3/4}
}
.savoir .cadre::after{border-color:var(--laiton);opacity:.5}
.savoir .cadre:hover::after{opacity:.95}
.savoir .cadre img{transition:transform .35s ease,box-shadow .35s ease}
.savoir .cadre:hover img{transform:translateY(-5px);
  box-shadow:0 34px 60px -28px color-mix(in srgb,var(--nuit) 88%,transparent)}
.js .savoir .reveal{transition-delay:calc(var(--i,0) * 110ms)}


/* ---------- L'ÉQUIPE ET LE MATÉRIEL ----------
   La seule section qui SORT de la colonne centrale : la photo touche les
   deux bords. Elle est tenue en haut et en bas par un filet plein — sans
   ça, une bande pleine largeur flotte au milieu de la page.
   Aucun paragraphe : on ne peut rien dire de vrai sur une équipe qu'on ne
   connaît pas. */
.equipe{padding-block:clamp(3rem,8vw,5rem) 0;background:var(--fond)}
.equipe__photo{width:100%;margin:clamp(1.8rem,4vw,2.6rem) 0 0;
  border-top:var(--assise) solid var(--marque);
  border-bottom:1px solid var(--filet)}
.equipe__photo img{width:100%;aspect-ratio:3/2;max-height:32rem;object-fit:cover;
  border-radius:0}
@media (min-width:48rem){.equipe__photo img{aspect-ratio:21/9}}


/* ---------- CONTACT — le panneau de clôture ----------
   Le même panneau blanc à assise d'accent que « Le chantier ». Tout est
   centré : c'est le dernier écran avant qu'il décroche son téléphone, il
   n'y a rien d'autre à regarder. */
.contact{padding-block:clamp(3.5rem,9vw,6rem);
  background:radial-gradient(85% 70% at 80% 0%,var(--halo-contact),transparent 56%),
    var(--fond-alt)}
.contact__grille{display:grid;gap:clamp(1.8rem,4vw,3rem)}
/* En colonne, la photo devient une bande basse : à sa taille naturelle
   (4/3) elle écrase la fin de page sous le panneau. */
.contact__visuel img{aspect-ratio:16/9}
@media (min-width:62rem){
  /* stretch : les deux blocs partagent leur ligne du haut ET celle du bas.
     1,14 / 0,86 — la même répartition que « Le chantier », et assez de
     largeur pour qu'un numéro tienne sur UNE ligne. */
  .contact__grille{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);align-items:stretch}
  .contact__visuel img{height:100%;min-height:24rem;aspect-ratio:auto}
}
.contact__carte{text-align:center}
.contact__phrase{font-size:1.04rem;color:var(--encre);           /* 15,81 sur --carte */
  margin:0 auto .9rem;max-width:36ch}

/* LES DEUX TABLEAUX — « un tableau classique clair avec toutes les infos,
   comme d'hab » (01.08.2026, après trois formes refusées). Libellé à
   gauche, valeur à droite, un filet entre les lignes. Les horaires listent
   les SEPT jours, les jours non ouverts portant « Fermé » : c'est ce que le
   client vient chercher — savoir si c'est ouvert LUNDI, pas décoder un
   intervalle. */
.fiche{max-width:32rem;margin:clamp(1.4rem,3.5vw,1.9rem) auto 0;text-align:left;
  padding-top:clamp(1.2rem,3vw,1.6rem);border-top:1px solid var(--filet)}
.fiche__titre{margin:0 0 .6rem;text-align:center;
  font-family:var(--police-libelle);font-weight:500;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.18em;color:var(--encre-douce)}   /* 6,98 */

.tableau{margin:0;display:grid}
.tableau__ligne{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:.1rem .9rem;
  padding:clamp(.45rem,1.5vw,.62rem) .5rem;border-radius:var(--rayon)}
/* Le filet est porté par chaque ligne SAUF la première : côte à côte, deux
   lignes ne font qu'un trait, et une ligne retirée emporte le sien. */
.tableau__ligne + .tableau__ligne{border-top:1px solid var(--filet)}
.tableau dt{color:var(--encre-douce);font-family:var(--police-libelle);
  font-weight:500;font-size:.88rem}                                         /* 6,98 */
.tableau dd{margin:0;color:var(--encre);text-align:right;                   /* 15,81 */
  font-variant-numeric:lining-nums tabular-nums}

/* Le téléphone : même ligne que les autres, mais c'est LUI qu'on vient
   chercher — couleur de marque, un cran plus gros, et une cible tactile
   d'au moins 44 px (un lien de texte nu en mesure 22). */
.tableau dd a[href^="tel:"]{display:inline-block;padding-block:.35rem;
  font-family:var(--police-libelle);font-weight:500;
  font-size:1.14rem;letter-spacing:.01em;
  color:var(--marque);text-decoration:none;                                 /* 6,89 */
  border-bottom:1px solid color-mix(in oklab,var(--marque) 35%,transparent);
  transition:color .25s ease,border-color .25s ease}
.tableau dd a[href^="tel:"]:hover,.tableau dd a[href^="tel:"]:focus-visible{
  color:var(--marque-fonce);border-bottom-color:var(--marque)}              /* 9,76 */

/* Aujourd'hui : la ligne est posée sur un fond de marque très clair et le
   jour passe en couleur de marque. On ne dit PAS « ouvert » — un jour
   d'ouverture habituel n'est pas une promesse (vacances, jour férié). */
.tableau__ligne--aujourdhui{background:color-mix(in oklab,var(--marque) 7%,transparent)}
.tableau__ligne--aujourdhui dt{color:var(--marque)}                         /* 6,89 */
.tableau--horaires .tableau__ligne--ferme dd{color:var(--encre-douce)}      /* 6,98 */
.tableau__aujourdhui{margin-left:.5rem;padding:.12rem .45rem;border-radius:999px;
  background:var(--marque);color:var(--texte-bouton);                       /* 6,89 */
  font-family:var(--police-libelle);font-weight:500;font-size:.6rem;
  text-transform:uppercase;letter-spacing:.12em;vertical-align:.08em}


/* ---------- PIED — la signature ----------
   Pas une barre de liens : l'assise, le nom en lettres gravées, le lieu
   dessous, un filet, et la mention légale en petit. Le nom n'est écrit
   qu'UNE fois — c'est lui le titulaire du ©. */
.pied{padding-block:clamp(2.8rem,7vw,4rem);background:var(--nuit);color:var(--creme)}
.pied__interieur{text-align:center}
.assise--pied{margin:0 auto clamp(1.2rem,3vw,1.6rem);
  background:linear-gradient(90deg,color-mix(in srgb,var(--laiton) 30%,transparent) 0 calc(50% - 26px),
    var(--laiton) calc(50% - 26px) calc(50% + 26px),color-mix(in srgb,var(--laiton) 30%,transparent) calc(50% + 26px) 100%)}
.pied__nom{margin:0 0 .45rem;font-family:var(--police-titre);
  font-size:clamp(1.3rem,1.05rem + .9vw,1.7rem);line-height:1.2;
  text-transform:uppercase;letter-spacing:.12em;color:var(--creme);
  overflow-wrap:break-word}                                            /* 15,00 */
.pied__lieu{margin:0;font-family:var(--police-libelle);font-weight:500;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.2em;color:var(--creme-doux)}    /* 8,90 */
.pied__bas{font-size:.82rem;text-align:center;
  margin-top:clamp(1.7rem,4vw,2.3rem);padding-top:clamp(1.1rem,2.5vw,1.5rem);
  border-top:1px solid color-mix(in srgb,var(--laiton) 25%,transparent)}
.pied p{margin:0}
.pied__credit{color:var(--creme-doux)}                                     /* 8,90 */


/* ---------- APPARITION AU DÉFILEMENT ---------- */
/* Sans la classe `js` (posée dans le <head>) les blocs sont visibles.
   Un contenu ne dépend jamais du JavaScript. */
.js .reveal{opacity:0;transform:translateY(16px);
  transition:opacity .55s ease,transform .55s ease}
/* L'assise ne monte pas : elle se DÉROULE de son origine. Même geste, autre
   axe. (Spécificité identique à la règle suivante, qui doit rester APRÈS.) */
.js .assise.reveal{transform:scaleX(0);
  transition:opacity .3s ease,transform .8s cubic-bezier(.22,.8,.25,1) .1s}
.js .reveal.est-vu{opacity:1;transform:none}


/* ---------- MOUVEMENT RÉDUIT : on REMPLACE, on ne supprime pas ----------
   ⚠ Le Mac du responsable est dans ce mode EN PERMANENCE. Une règle qui
   coupe tout lui montre un site mort — c'est une partie du « y'a rien ».
   Ici chaque déplacement devient un fondu ou un changement d'opacité de
   même durée : rien ne disparaît, rien n'apparaît d'un coup.
   Les sélecteurs reprennent EXACTEMENT ceux d'origine (même spécificité,
   plus bas dans la feuille), sinon la règle d'origine gagne. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{transform:none;transition:opacity .55s ease}
  .js .reveal.est-vu{transform:none}
  .hero__verre{animation-name:paraitre}
  /* L'assise ne se déroule plus : elle se fond, sur la même durée. */
  .js .assise.reveal{transform:none;transition:opacity .8s ease .1s}
  /* La photo ne se soulève plus de son cadre : c'est le filet qui s'allume
     à sa place. Le survol reste VISIBLE, il change juste de moyen. */
  .savoir .cadre:hover img{transform:none}
  .bouton{transition:background-color .25s ease,box-shadow .25s ease}
  .bouton--plein:hover,.bouton--plein:focus-visible,
  .bouton--wa:hover,.bouton--wa:focus-visible{transform:none}
  .poste:hover .poste__num::before{transform:none;opacity:1}
  #nav-links li:not(:last-child) a::after{transform:scaleX(1);opacity:0;
    transition:opacity .25s ease}
  #nav-links li:not(:last-child) a:hover::after,
  #nav-links li:not(:last-child) a:focus-visible::after{opacity:1}
}

/* ============================================================
   TROIS CORRECTIFS DE SÉRIE — ARGUS, 01.08.2026, verdict NE PAS ENVOYER.
   Ils ne se voyaient pas sur nos noms d'essai, courts. Sur 250 vrais
   prospects, ils se seraient déclenchés des dizaines de fois.
   ============================================================ */

/* 1. L'EN-TÊTE DÉCROCHE DÈS 22 CARACTÈRES DE NOM.
   `.nav` est en `flex-wrap:wrap` : un nom long poussait le bouton du menu
   à la ligne suivante, sous le nom. Mesuré : seuil entre 22 et 26 signes
   selon le métier, alors que « Entreprise de maçonnerie Duruz Sàrl » en
   fait 35. Le nom doit RÉTRÉCIR et se replier dans sa colonne ; le bouton,
   lui, ne bouge jamais. */
/* ⚠ `flex:1 1 0` — et surtout PAS `nowrap`. Deux essais avant de tomber juste :
   - `flex-wrap:wrap` + `flex:1 1 auto` : le nom garde une base égale à son
     contenu, donc il fait passer le bouton du menu à la ligne AVANT de
     rétrécir. C'était le défaut d'origine (seuil 22 signes).
   - `flex-wrap:nowrap` : le bouton reste en place, mais le menu déplié ne peut
     plus prendre sa propre ligne — la page débordait de 62 px SANS JavaScript,
     c'est-à-dire là où le menu est toujours ouvert. J'avais réparé un défaut
     en en créant un autre.
   La bonne écriture est `flex:1 1 0` : base ZÉRO, donc le nom ne force jamais
   de retour à la ligne, il grandit et rétrécit librement. Le menu, lui, garde
   `flex-basis:100%` et prend sa ligne quand il est déplié. */
.nav > .marque{min-width:0;flex:1 1 0}
.nav > #nav-links{flex-basis:100%}
/* ⚠ PAS de `hyphens:auto` : la césure automatique coupait la raison sociale en
   « MA-ÇONNERIE » à 320 px. On ne coupe pas le nom d'une entreprise — on réduit
   la lettre jusqu'à ce que ses mots tiennent. `break-word` ne reste que comme
   dernier recours, pour un mot vraiment plus large que la colonne. */
.marque__nom{overflow-wrap:break-word;
  font-size:clamp(.92rem,.78rem + .7vw,var(--taille-marque,1.15rem))}
.nav > #nav-toggle{flex:none}

/* 2. LE NUMÉRO D'APPEL SE COUPE EN DEUX SOUS 400 px.
   « APPELER LE 026 912 / 44 18 » : un numéro coupé au milieu ne se lit
   plus comme un numéro. On ne le laisse jamais se casser, et on réduit la
   lettre plutôt que la ligne. Le correctif du bandeau ne s'appliquait que
   sous 30 rem — or 320 px, c'est 20 rem, et rien ne couvrait la marche
   entre les deux. */
.bouton{white-space:nowrap}
@media (max-width:26rem){
  .bouton--grand{font-size:.82rem;letter-spacing:.05em;padding:.9rem 1rem}
}
@media (max-width:22rem){
  .bouton--grand{font-size:.76rem;letter-spacing:.03em;padding:.85rem .7rem}
}

/* 3. LES LIGNES DU TABLEAU PARTAIENT EN ESCALIER.
   `flex-wrap:wrap` faisait passer la valeur SOUS son libellé dès que les
   deux ne tenaient plus — « Mercredi » avec un horaire de 24 signes, ou une
   adresse longue. Trois lignes sur neuf se décalaient, et le tableau
   perdait sa colonne. En grille, seule la VALEUR se replie, dans sa propre
   colonne : les libellés restent alignés quoi qu'il arrive. */
.tableau__ligne{display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:baseline;gap:0 .9rem}
.tableau dd{min-width:0}


/* ===== macon — palette et polices du métier =====
   Déclinée de la mise en page « macon » par outils/decliner-metier.mjs.
   Un défaut de MISE EN PAGE se corrige dans le tronc et se redécline ;
   ici on ne touche qu'aux couleurs et aux polices. */
:root{
  --encre:#f2f1ec;
  --encre-douce:#adb1b5;
  --fond:#131619;
  --fond-alt:#1c2024;
  --carte:#23272c;
  --marque:#ea7550;
  --marque-fonce:#f79070;
  --filet:#333940;
  --nuit:#0d0f11;
  --creme:#f2f1ed;
  --creme-doux:#bdbcb6;
  --laiton:#d99a5b;
  --laiton-clair:#e9b482;
  --liseret:rgba(255,255,255,.07);
  --ombre-panneau:rgba(0,0,0,.75);
  --ombre-photo:rgba(0,0,0,.85);
  --halo-savoir:color-mix(in srgb,var(--laiton) 20%,transparent);
  --halo-contact:color-mix(in srgb,var(--marque) 16%,transparent);
  --texte-bouton:#1a0d07;
  --ruban-fond:var(--nuit);
  --ruban-texte:var(--laiton-clair);
  --police-titre:'PoliceTitre',"Arial Black","Helvetica Neue",Impact,sans-serif;
  --police-libelle:'PoliceLibelle',"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
}


/* ===== macon — SIGNATURE DU MÉTIER =====
   Ce qui n'appartient qu'à ce métier : motif, composition, animation.
   Passe APRÈS la palette, donc gagne sur tout le tronc. */
/* ============================================================
   MAÇONNERIE — L'APPAREILLAGE
   ------------------------------------------------------------
   Forme : le module. Matière : le bloc et le joint. Rythme : le
   quinconce — chaque rang décalé d'un demi-module sur celui du
   dessous, et l'horizontale toujours plus forte que la verticale.

   Rien n'est aligné bord à bord sur cette page : les postes
   s'indentent en quinconce, les trois photos ont trois lignes de
   tête différentes, et AUCUNE limite de section n'est un trait
   droit — elles sont crantées, engrenées ou en escalier.

   Tout est peint en dégradés répétés (aucune image, aucun SVG) :
   la charpente entière tient dans quelques centaines d'octets une
   fois compressée.
   ============================================================ */


/* ---------- LE MODULE ----------
   Un bloc de béton fait 400×200 ; on garde le rapport. Tout le
   reste de la feuille se mesure en modules et en rangs, jamais en
   valeurs libres — c'est ce qui fait qu'on lit un appareillage et
   pas une pile de rectangles.
   ⚠ Aucune couleur n'est redéfinie ici : --mortier et les deux
   mortiers de nuit DÉRIVENT des variables de la palette. */
:root{
  --module:78px;                /* longueur d'un bloc, joint compris */
  --demi:39px;                  /* le décalage du quinconce */
  --rang:34px;                  /* hauteur d'un rang, joint compris */
  --bloc:28px;                  /* hauteur du bloc seul */
  --joint:3px;                  /* le joint : montant ou de lit */
  --lit:8px;                    /* le lit de mortier entre deux postes */
  --mortier:color-mix(in oklab,var(--filet) 88%,transparent);
  --mortier-nuit:color-mix(in srgb,var(--creme) 14%,transparent);
  --mortier-nuit-faible:color-mix(in srgb,var(--creme) 9%,transparent);

  /* LA FACE DU BLOC — 01.08.2026, après avoir regardé la capture.
     Le mur en cours de montage était peint en --fond-alt sur --fond :
     deux crèmes séparés par 4 % de clarté. L'escalier de blocs, qui est
     le plus beau morceau de la page, était quasi invisible à l'écran et
     ne ressortait pas du tout au test du squelette.
     On garde l'idée juste — le mur est bâti dans la couleur de la
     section qu'il annonce — mais on lui donne assez de corps pour se
     lire. Aucune couleur en dur : c'est --fond-alt assombri par --nuit,
     donc la teinte suit la palette du métier quoi qu'il arrive.
     Décor pur, aucun texte dessus : le plancher AA ne s'y applique pas. */
  --bloc-face:color-mix(in oklab,var(--fond-alt) 88%,var(--nuit));

  /* Un bloc n'a pas d'angle arrondi. Les boutons gardent leur
     pilule — demande explicite du responsable, on n'y touche pas. */
  --rayon:0;
  --assise:6px;                 /* le bandeau d'accent devient un rang */
}
@media (max-width:48rem){
  :root{--module:56px;--demi:28px;--rang:26px;--bloc:21px}
}


/* ---------- LES TROIS CROCHETS : LEUR BOÎTE ---------- */
.signature--hero{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.signature--hero svg{width:100%;height:100%;display:block}
.appareil{display:block;position:absolute}

.signature--milieu,.signature--contact{
  display:block;width:100%;position:relative;overflow:hidden}


/* ============================================================
   1. LE BANDEAU — un mur, pas une photo posée sur du noir
   ============================================================ */

/* La trame d'aplomb du tronc était faite de hairlines VERTICALES :
   du générique. Ici c'est un appareillage à joints croisés — les
   lits horizontaux portent, les joints montants sont décalés d'un
   demi-module un rang sur deux. Les lits sont deux fois plus
   marqués que les montants : dans un mur, c'est l'horizontale qui
   tient. */
.hero__trame{
  background:repeating-linear-gradient(180deg,
    var(--mortier-nuit) 0 1px,transparent 1px var(--rang));
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 26%,#000 76%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 26%,#000 76%,transparent 100%);
}
/* Les joints montants. Deux calques masqués en bandes alternées :
   c'est le seul moyen d'obtenir un vrai quinconce sans dessiner
   quatre cents rectangles. */
.hero__trame::before,.hero__trame::after{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(90deg,
    var(--mortier-nuit-faible) 0 1px,transparent 1px var(--module));
}
.hero__trame::before{
  -webkit-mask-image:repeating-linear-gradient(180deg,#000 0 var(--rang),
    transparent var(--rang) calc(var(--rang) * 2));
  mask-image:repeating-linear-gradient(180deg,#000 0 var(--rang),
    transparent var(--rang) calc(var(--rang) * 2));
}
/* ⚠ Le décalage du quinconce est écrit DANS le dégradé, jamais avec
   background-position : une tuile large de 100 % qu'on décale se répète à
   partir du bord et la phase se casse net au premier demi-module (vu en
   capture au bord gauche). */
.hero__trame::after{
  background-image:repeating-linear-gradient(90deg,
    transparent 0 var(--demi),
    var(--mortier-nuit-faible) var(--demi) calc(var(--demi) + 1px),
    transparent calc(var(--demi) + 1px) var(--module));
  -webkit-mask-image:repeating-linear-gradient(180deg,transparent 0 var(--rang),
    #000 var(--rang) calc(var(--rang) * 2));
  mask-image:repeating-linear-gradient(180deg,transparent 0 var(--rang),
    #000 var(--rang) calc(var(--rang) * 2));
}

/* Le panneau de verre : plus de montant plein. À sa place, une
   CHAÎNE D'ANGLE — une colonne de blocs empilés, boutisse et
   panneresse en alternance. Le bloc entier tient toute la largeur
   de la chaîne, le suivant n'en fait que 58 % : c'est ce jeu qui
   fait la chaîne, pas un trait. */
.hero__verre{
  border-left:0;border-radius:0;
  padding-left:calc(clamp(1.5rem,4vw,2.6rem) + 1.15rem);
}
.hero__verre::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:14px;
  background-image:
    linear-gradient(180deg,var(--marque) 0 var(--bloc),transparent var(--bloc)),
    linear-gradient(180deg,var(--marque) 0 var(--bloc),transparent var(--bloc));
  background-size:100% calc(var(--rang) * 2),58% calc(var(--rang) * 2);
  background-position:0 0,0 var(--rang);
  background-repeat:repeat-y,repeat-y;
}

/* Le bandeau ne s'arrête plus sur une ligne droite : la dernière
   assise est un ARRACHEMENT — des blocs clairs qui montent dans la
   nuit, un module plein, un module vide. Il faut donc de la place
   sous le panneau de verre, d'où le pied de bandeau plus profond. */
.hero{padding-block:clamp(3rem,9vw,5rem) calc(clamp(4rem,10vw,6rem) + var(--rang))}
.appareil--arrachement{
  left:0;right:0;bottom:0;height:var(--rang);
  background-image:
    linear-gradient(180deg,var(--mortier) 0 var(--joint),transparent var(--joint)),
    repeating-linear-gradient(90deg,
      var(--fond) 0 calc(var(--module) - var(--joint)),
      var(--mortier) calc(var(--module) - var(--joint)) var(--module),
      transparent var(--module) calc(var(--module) * 2));
  animation:pose-rang .85s cubic-bezier(.2,.75,.25,1) both;
}
/* ⚠ ICI SE TROUVAIT `.appareil--chaine` — SUPPRIMÉ LE 01.08.2026.
   Une chaîne d'angle verticale, collée au bord droit du bandeau. Sur le
   papier c'était juste ; en capture, c'était une colonne de blocs clairs
   peinte EN PLEIN MILIEU de la photo de chantier, par-dessus
   l'échafaudage, et coupée net au bord de l'écran.
   La règle est la même pour les neuf métiers : on encadre une photo, on
   ne dessine pas dessus. Le bandeau garde donc deux ornements, et les
   deux se posent sur du vide ou sur un panneau, jamais sur le sujet —
   la trame d'appareillage (un voile régulier, comme un grain) et
   l'arrachement du bas. La chaîne d'angle, elle, vit sur le montant du
   panneau de verre, où il n'y a rien à recouvrir. */

@keyframes pose-rang{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pose-fondu{from{opacity:0}to{opacity:1}}


/* ============================================================
   2. LES TRAVAUX — le rang qui descend, et les postes en quinconce
   ============================================================ */

/* Le panneau ne remonte plus par-dessus le bandeau : c'est le rang
   d'en face qui fait la couture. Les blocs sombres descendent dans
   la section claire, pile dans les vides laissés par l'arrachement
   du bandeau : les deux rangs s'engrènent. */
.travaux{margin-top:0;padding-top:calc(var(--rang) + clamp(1.6rem,4vw,2.6rem))}
/* ⚠ Décalé d'un DEMI-module sur le rang du dessus, et c'est tout le sujet :
   sans ce décalage, les deux rangs alignent leurs vides et la couture se lit
   comme des colonnes verticales, pas comme un appareillage (mesuré en capture
   le 01.08.2026, première version). Chaque bloc du rang bas enjambe donc le
   joint du rang haut — la définition même du quinconce. */
.travaux::before{
  content:"";position:absolute;left:0;right:0;top:0;height:var(--rang);
  background-image:
    linear-gradient(180deg,var(--mortier) 0 var(--joint),transparent var(--joint)),
    repeating-linear-gradient(90deg,
      transparent 0 var(--demi),
      var(--mortier) var(--demi) calc(var(--demi) + var(--joint)),
      /* ⚠ C'ÉTAIT `var(--nuit)` — un bloc PRESQUE NOIR sur un fond crème.
         Le rang qui s'engrène avec celui du bandeau ressortait en code-barres
         noir et blanc en travers de la page : la première chose qu'on voyait
         du site, et le principal motif du « c'est un peu le bordel » du
         02.08.2026. Un bloc de béton n'est pas noir ; il est de la couleur du
         mur. On prend donc la face de bloc, qui dérive du fond de section. */
      var(--bloc-face) calc(var(--demi) + var(--joint)) calc(var(--demi) + var(--module) - var(--joint)),
      var(--mortier) calc(var(--demi) + var(--module) - var(--joint)) calc(var(--demi) + var(--module)),
      transparent calc(var(--demi) + var(--module)) calc(var(--module) * 2));
  animation:pose-rang .85s cubic-bezier(.2,.75,.25,1) .12s both;
}
/* Le contenu passe au-dessus du rang : sans ça, un élément
   positionné repeindrait par-dessus le panneau blanc. */
.travaux > .bande,.savoir > .bande{position:relative;z-index:1}

/* Les quatre postes : un rang sur deux s'indente d'un demi-module,
   ils sont séparés par un LIT DE MORTIER franc (plus épais que le
   filet du tronc), et un court JOINT MONTANT traverse le lit — à
   une place différente d'un lit à l'autre, sinon les joints
   s'alignent et ce n'est plus un appareillage. */
.postes{row-gap:var(--lit)}
.poste{position:relative;border-top:0;padding-block:clamp(.95rem,2.3vw,1.2rem)}
.poste:first-child{padding-top:.4rem}
.poste:nth-child(odd){margin-right:var(--demi)}
.poste:nth-child(even){margin-left:var(--demi)}
.poste + .poste::before{
  content:"";position:absolute;left:0;right:0;top:calc(var(--lit) * -1);
  height:var(--joint);background:var(--mortier)}
.poste + .poste::after{
  content:"";position:absolute;width:var(--joint);left:var(--module);
  top:calc(var(--lit) * -1 - .55rem);height:calc(var(--lit) + 1.1rem);
  background:var(--mortier)}
.poste:nth-child(odd)::after{left:calc(var(--module) * 2)}
.poste:nth-child(4n)::after{left:calc(var(--module) * 1.5)}

/* Le repère du numéro : un MODULE couché, pas un carré. */
.poste__num{padding-left:1.75rem}
.poste__num::before{width:20px;height:9px;top:.8em;border-radius:0}

/* La photo des travaux descend d'un nombre entier de rangs. */
@media (min-width:62rem){
  .travaux__visuel{margin-top:calc(var(--rang) * 3)}
}


/* ---------- L'ASSISE — un RANG DE BLOCS, plus un dégradé ----------
   Six fois dans la page. C'est l'ornement qui signe le plus vite :
   des segments pleins séparés de joints, jamais un trait continu. */
.assise{
  height:9px;width:min(calc(var(--module) * 3),100%);
  background:repeating-linear-gradient(90deg,
    var(--marque) 0 calc(var(--module) - var(--joint)),
    var(--filet) calc(var(--module) - var(--joint)) var(--module));
}
.entete-section--centre .assise{
  margin-inline:auto;
  background:repeating-linear-gradient(90deg,
    var(--marque) 0 calc(var(--module) - var(--joint)),
    var(--filet) calc(var(--module) - var(--joint)) var(--module));
}
.savoir .assise,.assise--pied{
  background:repeating-linear-gradient(90deg,
    var(--laiton) 0 calc(var(--module) - var(--joint)),
    color-mix(in srgb,var(--laiton) 28%,transparent)
      calc(var(--module) - var(--joint)) var(--module));
}

/* Le bandeau d'accent du panneau : le même rang, vu par la tranche. */
.panneau::before{
  height:var(--assise);border-radius:0;
  background:repeating-linear-gradient(90deg,
    var(--marque) 0 calc(var(--module) - var(--joint)),
    color-mix(in oklab,var(--marque) 24%,transparent)
      calc(var(--module) - var(--joint)) var(--module));
}

/* La barre de navigation est fermée par un rang, pas par un filet. */
.entete{border-bottom:0}
.entete::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:repeating-linear-gradient(90deg,
    var(--marque) 0 calc(var(--module) - var(--joint)),
    var(--filet) calc(var(--module) - var(--joint)) var(--module));
}
#nav-toggle{border-radius:0}


/* ---------- LE CADRE PHOTO : L'ÉQUERRE D'APLOMB ----------
   Le filet décalé qui faisait le tour de la photo est remplacé par
   une verticale et une horizontale franches qui se rencontrent à
   l'angle : le fil à plomb posé sur le niveau. Le décalage reste à
   14 px — toujours moins que la gouttière minimale (16 px), donc
   il ne peut pas sortir de l'écran. */
.cadre::after{
  inset:auto -14px -14px 14px;height:min(56%,190px);
  border:0;border-radius:0;
  border-left:var(--joint) solid var(--marque);
  border-bottom:var(--joint) solid var(--marque);
  opacity:.6;
}
.cadre--gauche::after,.realisations__haute::after{
  inset:auto 14px -14px -14px;
  border-left:0;
  border-right:var(--joint) solid var(--marque);
  border-bottom:var(--joint) solid var(--marque);
}
.cadre:hover::after{opacity:1}
.savoir .cadre::after{border-color:var(--laiton);opacity:.62}
.savoir .cadre:hover::after{opacity:1}


/* ============================================================
   3. LE RANG CRANTÉ — la limite --fond / --fond-alt
   ============================================================ */
.signature--milieu{height:calc(var(--rang) * 2);background:var(--fond)}
.appareil--cran{
  position:absolute;inset:0;
  background-image:
    /* joints montants du rang bas, décalés d'un demi-module — la phase est
       écrite dans le dégradé, pas posée par background-position */
    repeating-linear-gradient(90deg,transparent 0 var(--demi),
      var(--mortier) var(--demi) calc(var(--demi) + var(--joint)),
      transparent calc(var(--demi) + var(--joint)) var(--module)),
    /* joints montants du rang haut */
    repeating-linear-gradient(90deg,var(--mortier) 0 var(--joint),
      transparent var(--joint) var(--module)),
    /* le lit de mortier qui court sous les créneaux */
    linear-gradient(180deg,var(--mortier),var(--mortier)),
    /* les créneaux : deux modules pleins, un module vide */
    repeating-linear-gradient(90deg,
      var(--fond-alt) 0 calc(var(--module) * 2),
      transparent calc(var(--module) * 2) calc(var(--module) * 3)),
    /* l'assise pleine du bas */
    linear-gradient(180deg,var(--fond-alt),var(--fond-alt));
  background-size:
    100% var(--rang),
    100% var(--rang),
    100% var(--joint),
    100% var(--rang),
    100% var(--rang);
  background-position:
    0 var(--rang),
    0 0,
    0 var(--rang),
    0 0,
    0 var(--rang);
  background-repeat:no-repeat;
}


/* ============================================================
   4. LA BANDE DE NUIT — un bloc posé dans le mur
   ============================================================
   La bande « savoir-faire » ne flotte plus entre deux traits : elle
   est ENGRAVÉE dans l'appareillage. Un rang de blocs clairs descend
   par le haut, un autre monte par le bas, décalés d'un module l'un
   sur l'autre. */
.savoir{position:relative;
  padding-block:calc(clamp(3rem,8vw,5.5rem) + var(--rang))}
/* ⚠ LE CRÉNEAU NE DOIT PAS DEVENIR UN CODE-BARRES — 02.08.2026.
   Ces deux rangs bordent la section SOMBRE. Ils étaient peints en
   `--fond-alt`, c'est-à-dire en crème pleine : sur un fond nuit, ça donnait
   deux bandes noir et blanc en travers de la page, à répétition rapide.
   Verdict du responsable : « le squelette maçonnerie, c'est un peu le
   bordel ». Il avait raison — on lisait un motif de contraste, plus un mur.
   Les blocs prennent maintenant le ton de la PIERRE dans la nuit : assez
   clairs pour qu'on voie l'appareillage, assez sombres pour rester dans la
   section à laquelle ils appartiennent. C'est du décor pur, aucun texte
   dessus, donc le plancher AA ne s'y applique pas. */
:root{--bloc-nuit:color-mix(in oklab,var(--creme) 24%,var(--nuit))}
/* ⚠ TROIS FOIS LE MÊME GESTE, C'ÉTAIT DEUX FOIS DE TROP — 02.08.2026.
   Il y avait ici deux rangs crénelés de plus, en haut et en bas de la section
   sombre. Avec l'arrachement du bandeau, la page portait TROIS bandes à
   créneaux, et chacune enjambait une limite : la moitié des blocs tombait sur
   le fond clair, l'autre sur le fond sombre. D'où le contraste dur, et le
   verdict du responsable — « le squelette maçonnerie, c'est un peu le bordel ».

   Un mur ne change pas d'appareil tous les deux mètres. On garde UN créneau,
   celui du bandeau, là où il raconte quelque chose : le dernier rang posé.
   La section sombre est désormais bordée par ce qu'elle est vraiment — un lit
   de mortier, une ligne, rien de plus. Le module continue de tenir toute la
   page par les postes, les cadres et les assises ; il n'a pas besoin de le
   crier trois fois. */
.savoir::before,.savoir::after{
  content:"";position:absolute;left:0;right:0;height:var(--joint);z-index:0;
  background:color-mix(in srgb,var(--creme) 22%,transparent)}
.savoir::before{top:0}
.savoir::after{bottom:0}


/* ============================================================
   5. LES RÉALISATIONS — trois photos en quinconce
   ============================================================
   Le tronc les emboîtait en L. Ici elles sont posées comme trois
   blocs d'un même rang : TROIS lignes de tête différentes, décalées
   d'un rang entier. Aucune ne commence à la hauteur d'une autre —
   c'est ça, le quinconce. */
.realisations__grille{align-items:start}
.realisations__grille .cadre:nth-child(odd){margin-left:var(--demi)}
@media (min-width:52rem){
  .realisations__grille{
    grid-template-columns:minmax(0,.94fr) minmax(0,1.03fr) minmax(0,1.03fr)}
  /* ⚠ grid-row:1 EXPLICITE. En `auto`, la troisième figure (colonne 1) est
     placée APRÈS les deux autres (colonnes 2 et 3) : le placement automatique
     n'ouvre jamais une piste en arrière, et la haute repartait à la ligne
     suivante — vu en capture. */
  .realisations__grille .cadre{grid-row:1;margin-left:0}
  .realisations__haute{grid-column:1;margin-top:0}
  .realisations__grille .cadre:nth-child(1){grid-column:2;margin-top:calc(var(--rang) * 2)}
  .realisations__grille .cadre:nth-child(2){grid-column:3;margin-top:var(--rang)}
  /* height:auto — le tronc les étirait sur la ligne du bas ; ici chaque
     bloc garde sa propre hauteur, sinon le quinconce se referme. */
  .realisations__grille img{aspect-ratio:3/2;height:auto}
  .realisations__haute img{aspect-ratio:3/4;height:auto}
}

/* Le savoir-faire : les deux photos ne partagent plus leur ligne de
   pied, elles se décalent d'un rang comme deux blocs voisins. */
@media (min-width:48rem){
  .savoir__bande{align-items:start}
  .savoir__large{margin-top:calc(var(--rang) * 2)}
}

/* La photo pleine largeur est tenue par un rang, pas par un trait. */
.equipe__photo{position:relative;border-top:0;border-bottom:0;
  padding-top:var(--assise)}
.equipe__photo::before{
  content:"";position:absolute;left:0;right:0;top:0;height:var(--assise);
  background:repeating-linear-gradient(90deg,
    var(--marque) 0 calc(var(--module) - var(--joint)),
    color-mix(in oklab,var(--marque) 24%,transparent)
      calc(var(--module) - var(--joint)) var(--module))}
.equipe__photo::after{
  content:"";position:absolute;left:0;right:0;bottom:calc(var(--joint) * -1);
  height:var(--joint);background:var(--mortier)}


/* ============================================================
   6. LE MUR EN COURS DE MONTAGE — avant le contact
   ============================================================
   Deux assises complètes, puis trois rangs qui s'arrêtent en
   escalier. Les joints montants basculent d'un demi-module d'un
   rang à l'autre, et le lit de mortier est déjà tiré au-delà du
   dernier bloc posé : la place du bloc suivant. */
.signature--contact{height:calc(var(--rang) * 5);background:var(--fond)}
.montage{display:block;position:absolute;inset:0}
.montage__rang{
  display:block;position:absolute;left:0;height:var(--rang);
  box-sizing:border-box;border-top:var(--joint) solid var(--mortier);
  background:repeating-linear-gradient(90deg,
    var(--bloc-face) 0 calc(var(--module) - var(--joint)),
    var(--mortier) calc(var(--module) - var(--joint)) var(--module));
  animation:pose-rang .7s cubic-bezier(.2,.75,.25,1) both;
}
/* Un rang sur deux part d'un demi-module : le quinconce. Phase écrite dans le
   dégradé — un rang commence donc par un DEMI-bloc, exactement comme un vrai
   appareillage. */
.montage__rang--b,.montage__rang--d{
  background:repeating-linear-gradient(90deg,
    var(--bloc-face) 0 calc(var(--demi) - var(--joint)),
    var(--mortier) calc(var(--demi) - var(--joint)) var(--demi),
    var(--bloc-face) var(--demi) var(--module))}
.montage__rang--a{top:0;width:24%;animation-delay:.32s}
.montage__rang--b{top:var(--rang);width:48%;animation-delay:.24s}
.montage__rang--c{top:calc(var(--rang) * 2);width:72%;animation-delay:.16s}
.montage__rang--d{top:calc(var(--rang) * 3);width:100%;animation-delay:.08s}
.montage__rang--e{top:calc(var(--rang) * 4);width:100%;animation-delay:0s}
/* Le lit de mortier tiré d'avance, qui déborde du dernier bloc. */
.montage__lit{
  display:block;position:absolute;top:var(--rang);left:24%;width:29%;
  height:calc(var(--joint) * 2);background:var(--mortier)}


/* ---------- LA CHASSE DU NOM — réglée POUR Archivo Black ----------
   Le tronc espaçait le nom de l'entreprise (.06em) et celui du pied
   (.12em) parce qu'il était écrit en Marcellus : une romaine à
   empattements fins, dont les capitales ont besoin d'air pour respirer.
   Archivo Black est l'inverse — une grasse à terminaisons carrées, dont
   les blancs internes sont déjà minces. Le même espacement la fait
   paraître soufflée, et surtout il coûte de la largeur là où on n'en a
   pas : sur « ENTREPRISE DE MAÇONNERIE DURUZ ET FILS SÀRL », 43 signes
   à 320 px, chaque .01em se paie en lignes de plus dans la barre.
   On resserre donc, sans jamais toucher au tronc : ces deux lignes ne
   valent que pour la maçonnerie, les huit autres métiers gardent la
   chasse de leur propre police.
   ⚠ Ni `hyphens:auto` ni rien qui coupe : une raison sociale ne se
   césure pas. Les mots vont à la ligne entiers, c'est tout. */
.marque__nom{letter-spacing:.015em}
.pied__nom{letter-spacing:.05em}


/* ---------- LES FILETS DE TEXTE : DES LITS, PAS DES CHEVEUX ----------
   Dans un mur, le joint horizontal se voit. Les séparateurs du
   tableau et des fiches passent donc de 1 px à l'épaisseur d'un
   joint. */
.tableau__ligne + .tableau__ligne{border-top:var(--joint) solid var(--mortier)}
.fiche{border-top:var(--joint) solid var(--mortier)}
.tableau__ligne{border-radius:0}


/* ---------- MOUVEMENT RÉDUIT : ON REMPLACE, ON NE SUPPRIME PAS ----------
   Le Mac du responsable est dans ce mode en permanence. Les trois
   seules animations de cette feuille sont des blocs qui se POSENT
   (translation vers le bas) : elles deviennent des fondus de même
   durée et de même retard. Rien ne disparaît, rien n'apparaît d'un
   coup — et surtout, tout ce qui est dessiné ici reste visible. */
@media (prefers-reduced-motion:reduce){
  .appareil--arrachement,.travaux::before,.montage__rang{
    animation-name:pose-fondu}
}