/* ============================================================
   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}


/* ===== nettoyage — 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:#161f1c;
  --encre-douce:#44534e;
  --fond:#f8fbfa;
  --fond-alt:#d9e7e3;
  --carte:#ffffff;
  --marque:#116048;
  --marque-fonce:#0b4636;
  --filet:#bed3cd;
  --nuit:#0e1913;
  --creme:#eef5f2;
  --creme-doux:#b2c5bf;
  --laiton:#c9a24f;
  --laiton-clair:#ddbb77;
  --police-titre:'PoliceTitre',"Source Serif Pro",Cambria,Georgia,serif;
  --police-libelle:'PoliceLibelle',"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
}


/* ===== nettoyage — 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. */
/* ============================================================
   NETTOYAGE ET CONCIERGERIE — « LA SURFACE NETTE »

   Forme    : l'arc de balayage — le geste large de la raclette et de la
              lustreuse. Toutes les découpes de section sont cet arc, et
              elles montent toutes vers la droite (sauf le contact, qui est
              la course de RETOUR).
   Matière  : la lumière sur une surface propre, et la buée qui s'efface.
   Rythme   : avant / après — d'un côté une trame de points, de l'autre
              plus rien.

   ⚠ CE MÉTIER SIGNE PAR L'INVERSE DES AUTRES. Les huit autres métiers de
   la série signent par PLUS de matière (blocs, tuiles, grilles, fibres).
   Ici on signe par le franc, le lisse, le sans-bordure et l'espace :
     · tous les filets du tronc sont retirés (panneau, postes, tableau,
       fiche, en-tête, cadres photo, photo d'équipe) ;
     · la galerie des réalisations est la SEULE strictement régulière de la
       série — trois cases égales, gouttières identiques, beaucoup de blanc ;
     · les cartes n'ont plus de bordure du tout : ombres douces et rayon
       généreux à la place ;
     · les bords entre sections sont des arcs, jamais des lignes droites.

   Aucune couleur en dur : tout vient des variables de palette.json.
   Aucun currentColor : le test du squelette (`capture.mjs --squelette`)
   pose `color:transparent` et l'effacerait. Les fill/stroke sont posés ici.
   ============================================================ */


/* ---------- LE CROCHET DU BANDEAU EST DANS UN FLEX : C'EST UN CALQUE ----------
   `.hero` est en `display:flex; align-items:flex-end`. Sans position absolue
   ce bloc deviendrait un item de la ligne et écraserait le panneau de texte.
   Jamais de z-index ≥ 2 ici : `.hero__bande` est à 2 et porte le texte. */
.signature--hero{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.signature--hero svg{width:100%;height:100%;display:block}


/* ============================================================
   1. LA GÉOMÉTRIE — c'est elle qui dit « propre » avant tout dessin
   Bandeau plus court et plus large que les autres métiers : la page
   respire, elle n'écrase pas. Rayon généreux, gouttière large.
   ============================================================ */
:root{
  --rayon:16px;                 /* le tronc est à 4px : angles nets, du bâti.
                                   Ici tout est adouci — rien n'accroche. */
  --rayon-bouton:2rem;
  --gouttiere:clamp(1.15rem,3.6vw,2.6rem);
  --hauteur-bandeau:62svh;      /* tronc : 78svh */
  --assise:3px;

  /* Variables propres à ce métier, toutes dérivées de la palette. */
  --lumiere:color-mix(in srgb,var(--carte) 78%,transparent);   /* la lumière sur le propre */
  --buee-clair:color-mix(in srgb,var(--marque) 22%,transparent);
  --buee-nuit:color-mix(in srgb,var(--creme) 26%,transparent);
  /* Profondeur des arcs de découpe. ⚠ Mesuré le 01.08.2026 : le rayon
     HORIZONTAL du dégradé radial décide de la courbure. À 158% l'arc du
     bandeau ne creusait que 25 px sur 1280 — une ligne inclinée, pas un
     geste. À 104% il creuse 83 px et le balayage se lit. */
  --arc-haut:clamp(96px,13vw,190px);
  --souffle:color-mix(in srgb,var(--encre) 13%,transparent);   /* les ombres douces */
}


/* ============================================================
   2. LE BANDEAU — l'avant / l'après, en une image
   ============================================================ */

/* Le bas du bandeau est emporté par un arc : la photo s'arrête sur une
   courbe, pas sur une ligne. C'est LE geste du métier, visible même quand
   on efface tout le texte et toutes les photos.
   Réalisé en radial-gradient : la frontière d'un dégradé radial EST un arc
   de cercle exact, et il ne peut rien faire déborder. */
.hero{overflow:hidden;
  padding-block:clamp(2.4rem,7vw,4rem) clamp(5rem,13vw,8.5rem)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;z-index:1;
  height:var(--arc-haut);pointer-events:none;
  background:radial-gradient(104% 100% at 90% 100%,var(--fond) 0 99.4%,transparent 100%)}

/* LA BUÉE — le calque `.hero__trame` du tronc (des hairlines d'aplomb) est
   entièrement repeint : deux trames de points de tailles différentes,
   décalées, qui s'effacent en s'éloignant du coin non encore essuyé.
   « Points de plus en plus petits, jusqu'à rien. » */
.hero__trame{
  background:
    radial-gradient(circle,var(--buee-nuit) 0 2.1px,transparent 2.5px),
    radial-gradient(circle,var(--buee-nuit) 0 1.2px,transparent 1.6px);
  background-size:26px 26px,26px 26px;
  background-position:0 0,13px 13px;
  -webkit-mask-image:radial-gradient(118% 132% at 3% -10%,
    #000 0 24%,rgba(0,0,0,.42) 56%,transparent 84%);
  mask-image:radial-gradient(118% 132% at 3% -10%,
    #000 0 24%,rgba(0,0,0,.42) 56%,transparent 84%);
}

/* L'ARC DE BALAYAGE. Le trait de partage, sa traînée de netteté, et deux
   échos de la course précédente. Tout est en fill/stroke depuis les
   variables — jamais currentColor. */
.sig-balayage__net{fill:color-mix(in srgb,var(--creme) 9%,transparent)}
.sig-balayage__trainee{fill:none;stroke:color-mix(in srgb,var(--creme) 16%,transparent);
  stroke-width:16;stroke-linecap:round}
.sig-balayage__liseret{fill:none;stroke:color-mix(in srgb,var(--creme) 70%,transparent);
  stroke-width:1.7;stroke-linecap:round}
.sig-balayage__echo{fill:none;stroke:color-mix(in srgb,var(--creme) 20%,transparent);
  stroke-width:1.1;stroke-linecap:round}
.sig-balayage__echo--loin{stroke:color-mix(in srgb,var(--creme) 10%,transparent)}

/* LE BALAYAGE DE LUMIÈRE — il traverse UNE FOIS, lentement, et s'en va.
   ⚠ En mouvement réduit il ne disparaît pas : il reste posé au milieu de sa
   course et se fond (voir le bloc de fin de fichier). */
/* ⚠ Position au repos calée sur la DROITE du bandeau, pas au centre : le
   panneau de texte est à gauche et il est au-dessus (z-index 2). Parquée au
   centre, la bande finissait entièrement cachée derrière lui — donc invisible
   en mouvement réduit, c'est-à-dire invisible chez le responsable. */
.sig-luire{position:absolute;top:-12%;bottom:-12%;left:44%;width:52%;
  pointer-events:none;
  background:linear-gradient(90deg,transparent 0,
    color-mix(in srgb,var(--creme) 20%,transparent) 44%,
    color-mix(in srgb,var(--creme) 7%,transparent) 62%,transparent 100%);
  transform:translate3d(-200%,0,0) skewX(-13deg);
  animation:sig-balaye 3.8s cubic-bezier(.35,.66,.3,1) .6s both}
@keyframes sig-balaye{
  from{transform:translate3d(-200%,0,0) skewX(-13deg)}
  to  {transform:translate3d(130%,0,0)  skewX(-13deg)}}
@keyframes sig-pose{from{opacity:0}to{opacity:1}}

/* LE PANNEAU DE VERRE — plus de montant plein ni de filet : une plaque
   lisse, très arrondie, tenue par une ombre douce, avec un reflet en
   diagonale posé dessus. C'est du verre propre, pas un cadre. */
.hero__verre{border:0;border-radius:22px;position:relative;overflow:hidden;
  max-width:44rem;
  box-shadow:0 30px 70px -34px color-mix(in srgb,var(--nuit) 90%,transparent),
             0 0 0 1px color-mix(in srgb,var(--creme) 10%,transparent)}
.hero__verre::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(116deg,transparent 0 24%,
    color-mix(in srgb,var(--creme) 13%,transparent) 33% 39%,
    color-mix(in srgb,var(--creme) 5%,transparent) 44% 52%,transparent 60%)}
.hero__verre > *{position:relative;z-index:1}


/* ============================================================
   3. LES DEUX AUTRES CROCHETS — les découpes de section
   `width:100%`, jamais 100vw, overflow caché : aucun débordement possible.
   ============================================================ */
.signature--milieu,.signature--contact{
  position:relative;display:block;width:100%;overflow:hidden;
  height:clamp(96px,13vw,190px)}
.signature--milieu svg,.signature--contact svg{
  position:relative;z-index:1;display:block;width:100%;height:100%}

/* Les deux crochets sont EXACTEMENT symétriques : le SVG peint toujours la
   surface nette (--fond-alt) SOUS l'arc, la buée reste toujours au-dessus,
   du côté que la lame n'a pas encore atteint. Milieu : la lame va vers la
   droite. Contact : course de retour, elle va vers la gauche. */
.signature--milieu,.signature--contact{background:var(--fond)}

/* La buée résiduelle, du côté pas encore essuyé. Le SVG est peint par-dessus,
   donc elle est proprement coupée par l'arc — aucun masque à faire coïncider. */
.signature--milieu::before,.signature--contact::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle,var(--buee-clair) 0 2.1px,transparent 2.5px),
    radial-gradient(circle,var(--buee-clair) 0 1.2px,transparent 1.6px);
  background-size:26px 26px,26px 26px;
  background-position:0 0,13px 13px}
.signature--milieu::before{
  -webkit-mask-image:linear-gradient(93deg,#000 0 12%,rgba(0,0,0,.4) 44%,transparent 72%);
  mask-image:linear-gradient(93deg,#000 0 12%,rgba(0,0,0,.4) 44%,transparent 72%)}
.signature--contact::before{
  -webkit-mask-image:linear-gradient(267deg,#000 0 12%,rgba(0,0,0,.4) 44%,transparent 72%);
  mask-image:linear-gradient(267deg,#000 0 12%,rgba(0,0,0,.4) 44%,transparent 72%)}

.sig-arc__apres{fill:var(--fond-alt)}
.sig-arc__trainee{fill:none;stroke:var(--lumiere);stroke-width:5;stroke-linecap:round}
.sig-arc__liseret{fill:none;stroke:color-mix(in srgb,var(--marque) 58%,transparent);
  stroke-width:1.5;stroke-linecap:round}
.sig-arc__echo{fill:none;stroke:color-mix(in srgb,var(--marque) 20%,transparent);
  stroke-width:1.1;stroke-linecap:round}


/* ============================================================
   4. LA BANDE DE NUIT devient une LAME — ses deux bords sont des arcs
   parallèles qui montent vers la droite. Le tronc a deux lignes droites.
   ============================================================ */
.savoir{position:relative;overflow:hidden;
  /* ⚠ Le rembourrage doit être PLUS GRAND que l'arc, sinon la courbe vient
     lécher le bas des deux photos (mesuré : 5 px d'écart à 1280 px). */
  padding-block:calc(var(--arc-haut) + clamp(1.2rem,3vw,2.4rem));
  background:
    radial-gradient(150% 118% at 86% -18%,color-mix(in srgb,var(--creme) 13%,transparent),transparent 62%),
    var(--nuit)}
.savoir > .bande{position:relative;z-index:1}
.savoir::before{content:"";position:absolute;inset:0 0 auto 0;z-index:0;pointer-events:none;
  height:var(--arc-haut);
  background:radial-gradient(104% 100% at 8% 0%,var(--fond-alt) 0 99.4%,transparent 100%)}
.savoir::after{content:"";position:absolute;inset:auto 0 0 0;z-index:0;pointer-events:none;
  height:var(--arc-haut);
  background:radial-gradient(104% 100% at 92% 100%,var(--fond) 0 99.4%,transparent 100%)}


/* ============================================================
   5. LA FIN DES FILETS — c'est ça, la signature
   Le tronc est cerné de traits partout. Ici : aucun. Ombres très douces,
   espace, et rayon généreux. L'absence se voit immédiatement.
   ============================================================ */

/* La barre du haut : plus de filet dessous, une ombre qui la décolle.

   🚨 ELLE REPEIGNAIT SON FOND EN CLAIR — trouvé par le responsable le
   02.08.2026, capture à l'appui : « regarde le bandeau, c'est illisible ».
   Le tronc était passé au verre foncé le matin même, et son texte avec.
   Cette règle-ci, elle, redisait `--fond` à 93 % : du texte clair sur un
   fond blanc cassé, plus rien de lisible. Sur les douze masterclasses,
   c'était la SEULE à repeindre le fond de la barre — les autres ne
   touchaient qu'au filet, à l'ombre ou à l'arête d'accent.
   La leçon : une signature qui redit une couleur que le tronc pilote
   désormais par un poste devient un mensonge silencieux. On passe donc
   par --barre, comme tout le monde. Ce qui fait la signature du nettoyage
   ici, ce n'est pas la couleur, c'est l'ABSENCE DE FILET et l'ombre
   large — et ça, on le garde.
   Une garde a été ajoutée à decliner-metier.mjs le même jour : il
   signale toute signature qui repeint le fond de la barre. */
.entete{border-bottom:0;
  background:var(--barre);
  box-shadow:0 12px 34px -20px var(--souffle)}
/* Le bouton du menu : une bulle pleine et douce, plus un carré bordé.
   Sur du verre foncé, la bulle est un voile CLAIR — l'ancienne, tirée de
   --fond-alt, était une pastille blanche portant des traits laiton. */
#nav-toggle{border:0;border-radius:50%;
  background:color-mix(in srgb,var(--creme) 14%,transparent)}
/* Le filet qui se déroule sous l'entrée survolée devient un essuyage :
   il s'atténue jusqu'à disparaître. En clair, comme dans le tronc : le
   vert de marque ne se voit pas sur du verre foncé. */
#nav-links li:not(:last-child) a::after{
  background:linear-gradient(90deg,var(--barre-accent) 0 22%,
    color-mix(in srgb,var(--barre-accent) 0%,transparent) 100%)}

/* LE PANNEAU — plus de bordure, plus de barre d'accent en haut : une plaque
   blanche posée sur une ombre large, coiffée d'une nappe de lumière. */
.panneau{border:0;
  padding:clamp(2rem,4.6vw,3.4rem) clamp(1.3rem,3.8vw,3rem);
  box-shadow:0 34px 74px -46px color-mix(in srgb,var(--encre) 46%,transparent),
             0 2px 6px -4px var(--souffle)}
.panneau::before{content:"";left:0;right:0;top:0;height:44%;
  background:radial-gradient(122% 100% at 26% -34%,
    color-mix(in srgb,var(--marque) 8%,transparent),transparent 70%);
  border-radius:var(--rayon) var(--rayon) 0 0;pointer-events:none}

/* LES POSTES — les quatre filets de séparation disparaissent. Ce qui reste :
   de l'espace, et LE CARRÉ QUI REDEVIENT NET devant chaque numéro.
   Une petite surface partagée en deux par la lame de la raclette, sur la
   MÊME diagonale (114deg) que les reflets posés sur les photos : d'un côté
   la buée résiduelle — les mêmes points que la trame du bandeau et des
   découpes, en miniature — de l'autre la surface essuyée, pleine et franche.
   Au survol, la lame finit sa course : le carré devient net d'un bord à
   l'autre. C'est l'avant/après du métier, réduit à 15 px.
   Aucune bille, aucun reflet sphérique : rien qui ne parle de surface. */
.poste{border-top:0;padding-block:clamp(.8rem,2vw,1.1rem);
  border-radius:var(--rayon);
  transition:background-color .25s ease}
.poste:first-child{padding-top:clamp(.8rem,2vw,1.1rem)}
.poste:hover{background:color-mix(in srgb,var(--fond-alt) 46%,transparent)}
/* 15 px de repère + ~11 px d'air : le numéro ne le chevauche pas et ne
   flotte pas non plus (le tronc réserve 1,05rem pour un carré de 8 px). */
.poste__num{padding-left:1.6rem}
.poste__num::before{content:"";width:15px;height:15px;top:.38em;left:0;
  border-radius:3px;opacity:1;
  background:
    /* la lame, et derrière elle la surface nette */
    /* ⚠ Mesuré : à 43% la lame tombait à gauche du centre et il ne restait
       qu'un liseré de buée — on ne lisait plus l'avant/après. À 48% les deux
       moitiés s'équilibrent et le partage se voit à 15 px. */
    linear-gradient(114deg,transparent 0 48%,
      color-mix(in srgb,var(--carte) 92%,transparent) 48% 54%,
      var(--marque) 54% 100%),
    /* la buée pas encore essuyée : la trame de points, en petit */
    radial-gradient(circle,color-mix(in srgb,var(--marque) 52%,transparent) 0 .9px,
      transparent 1.2px),
    color-mix(in srgb,var(--marque) 13%,transparent);
  background-size:100% 100%,4px 4px,auto;
  background-position:0 0,1px 1px,0 0;
  box-shadow:0 1px 3px -1px var(--souffle);
  transition:opacity .25s ease}
/* La course de la lame s'achève : plus de trame, la surface est nette. */
.poste__num::after{content:"";position:absolute;left:0;top:.38em;
  width:15px;height:15px;border-radius:3px;pointer-events:none;
  background:var(--marque);opacity:0;
  transition:opacity .25s ease}
.poste:hover .poste__num::before{opacity:1}
.poste:hover .poste__num::after{opacity:1}

/* LES CADRES PHOTO — le filet décalé de 12 px du tronc est remplacé par un
   REFLET : une bande de lumière en diagonale posée en haut de la photo.
   C'est ce qu'on voit sur une vitre qu'on vient de faire. */
.cadre::after,.cadre--gauche::after,.realisations__haute::after{
  inset:0;border:0;border-radius:var(--rayon);opacity:.85;
  background:linear-gradient(114deg,transparent 0 26%,
    color-mix(in srgb,var(--carte) 26%,transparent) 34% 40%,
    color-mix(in srgb,var(--carte) 10%,transparent) 45% 53%,transparent 61%)}
.cadre:hover::after{opacity:1}
.savoir .cadre::after{border:0;opacity:.85;
  background:linear-gradient(114deg,transparent 0 26%,
    color-mix(in srgb,var(--creme) 24%,transparent) 34% 40%,
    color-mix(in srgb,var(--creme) 9%,transparent) 45% 53%,transparent 61%)}
.savoir .cadre:hover::after{opacity:1}
.cadre img{box-shadow:0 26px 56px -40px color-mix(in srgb,var(--encre) 62%,transparent)}

/* L'ASSISE — le tronc en fait un filet gris avec un segment plein posé
   dessus. Ici c'est un ESSUYAGE : le trait s'atténue jusqu'à disparaître. */
.assise{height:2px;width:min(280px,100%);border-radius:2px;
  background:linear-gradient(90deg,var(--marque) 0 16%,
    color-mix(in srgb,var(--marque) 42%,transparent) 52%,
    color-mix(in srgb,var(--marque) 0%,transparent) 100%)}
.entete-section--centre .assise{margin-inline:auto;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--marque) 0%,transparent) 0,
    color-mix(in srgb,var(--marque) 40%,transparent) 34%,
    var(--marque) 50%,
    color-mix(in srgb,var(--marque) 40%,transparent) 66%,
    color-mix(in srgb,var(--marque) 0%,transparent) 100%)}
.savoir .assise{background:linear-gradient(90deg,
    color-mix(in srgb,var(--laiton) 0%,transparent) 0,
    color-mix(in srgb,var(--laiton) 45%,transparent) 34%,
    var(--laiton) 50%,
    color-mix(in srgb,var(--laiton) 45%,transparent) 66%,
    color-mix(in srgb,var(--laiton) 0%,transparent) 100%)}
.assise--pied{background:linear-gradient(90deg,
    color-mix(in srgb,var(--laiton) 0%,transparent) 0,
    color-mix(in srgb,var(--laiton) 45%,transparent) 34%,
    var(--laiton) 50%,
    color-mix(in srgb,var(--laiton) 45%,transparent) 66%,
    color-mix(in srgb,var(--laiton) 0%,transparent) 100%)}

/* LES DEUX TABLEAUX — les filets entre les lignes tombent. À la place, des
   lignes en PASTILLE, une sur deux légèrement teintée : ça se lit aussi
   bien et ça ne trace plus rien. */
.fiche{border-top:0;padding-top:0;margin-top:clamp(1.7rem,4vw,2.3rem)}
.tableau__ligne + .tableau__ligne{border-top:0}
.tableau__ligne{border-radius:999px;padding:clamp(.5rem,1.6vw,.7rem) clamp(.85rem,2.4vw,1.15rem)}
.tableau__ligne:nth-child(odd){background:color-mix(in srgb,var(--fond-alt) 45%,transparent)}
.tableau__ligne--aujourdhui,
.tableau__ligne--aujourdhui:nth-child(odd){background:color-mix(in oklab,var(--marque) 9%,transparent)}
.tableau dd a[href^="tel:"]{border-bottom:0}

/* LA PHOTO D'ÉQUIPE — ses deux filets d'encadrement tombent ; elle reçoit
   le même reflet que les autres photos. */
.equipe__photo{position:relative;border-top:0;border-bottom:0}
/* ⚠ IL Y AVAIT ICI UN REFLET en diagonale posé sur TOUTE la photo d'équipe.
   Retiré le 02.08.2026 : c'est exactement ce que le responsable ne veut plus
   voir — un effet qui passe sur le sujet. La propreté du métier se dit par le
   vide et la lumière de la mise en page, pas par un voile sur l'image. */


/* ============================================================
   6. LES GRILLES — LE SEUL MÉTIER DE LA SÉRIE QUI RANGE
   Là où les autres décalent, emboîtent, jointoient, ici tout est aligné :
   colonnes égales, gouttières identiques, lignes de tête et de pied
   partagées. C'est la signature de charpente la plus lisible sur un
   squelette — le tronc, lui, est asymétrique partout.
   ============================================================ */

/* Les travaux : deux moitiés exactement égales, à fleur en haut ET en bas.
   Le tronc décale la photo de 4 à 7 rem vers le bas et la fait plus étroite. */
@media (min-width:62rem){
  .travaux__grille{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(1.8rem,4vw,3.2rem);align-items:stretch}
  .travaux__visuel{margin-top:0}
}

/* La galerie : trois cases STRICTEMENT égales, même format, même gouttière.
   Le tronc empile deux paysages à droite d'une verticale pleine hauteur. */
.realisations{padding-block:clamp(4rem,10vw,7rem)}
.realisations__grille{gap:clamp(1.1rem,2.8vw,2rem)}
@media (min-width:52rem){
  .realisations__grille{grid-template-columns:repeat(3,minmax(0,1fr))}
  .realisations__grille .cadre,
  .realisations__grille .cadre:not(.realisations__haute),
  .realisations__haute{grid-column:auto;grid-row:auto}
  .realisations__grille img,.realisations__haute img{aspect-ratio:4/5}
}

/* Le savoir-faire : deux photos de même taille, alignées en haut ET en bas.
   Le tronc leur donne 1,55fr / 1fr et des formats différents. */
.savoir__bande{gap:clamp(1.2rem,3vw,2.2rem)}
@media (min-width:48rem){
  .savoir__bande{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .savoir__large img,.savoir__haute img{aspect-ratio:4/3}
}

/* Le contact : deux moitiés égales, elles aussi. */
.contact{padding-block:clamp(4rem,10vw,7rem);
  background:radial-gradient(92% 74% at 82% 0%,
    color-mix(in srgb,var(--marque) 7%,transparent),transparent 58%),var(--fond-alt)}
@media (min-width:62rem){
  .contact__grille{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(1.8rem,4vw,3.2rem)}
}

/* De l'air partout : c'est la moitié du propos. */
.travaux{padding-block:0 clamp(4rem,10vw,7rem)}
/* L'arc du bas de la bande de nuit apporte déjà sa hauteur de blanc :
   rembourrer une seconde fois creuserait un trou. */
.equipe{padding-block:clamp(1.6rem,4vw,2.6rem) 0}


/* ============================================================
   7. MOUVEMENT RÉDUIT — on REMPLACE, on ne supprime pas
   ⚠ Ce fichier est ajouté APRÈS le bloc `prefers-reduced-motion` du tronc :
   il le neutralise sur tout ce qu'il redéclare. D'où ce bloc, obligatoire.
   Le Mac du responsable est dans ce mode en permanence : rien ne doit
   disparaître, et surtout pas le balayage — il reste posé au milieu de sa
   course et se fond, sur la même durée.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .sig-luire{transform:skewX(-13deg);
    animation:sig-pose 3.8s ease .6s both}
  .poste{transition:background-color .25s ease}
  /* Le carré ne bouge ni ne grandit : au repos il est TOUJOURS là, moitié
     trame / moitié net. Le survol ne fait que fondre la trame. */
  .poste__num::before,.poste__num::after{transform:none;
    transition:opacity .25s ease}
  .poste:hover .poste__num::before{transform:none;opacity:1}
  .poste:hover .poste__num::after{opacity:1}
  .cadre:hover::after,.savoir .cadre:hover::after{opacity:1}
  .savoir .cadre:hover img{transform:none}
  #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}
}