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


/* ===== electricite — 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:#f3f1e9;
  --encre-douce:#b3b1a6;
  --fond:#15171b;
  --fond-alt:#1d2026;
  --carte:#272b33;
  --marque:#f5c518;
  --marque-fonce:#ffd642;
  --filet:#31353d;
  --pointille:#3a3f48;
  --nuit:#0d0f12;
  --creme:#f3f1e9;
  --creme-doux:#b3b1a6;
  --laiton:#f5c518;
  --laiton-clair:#ffdb55;
  --police-titre:'PoliceTitre',"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --police-libelle:'PoliceLibelle',"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
}


/* ===== electricite — 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. */
/* ============================================================
   ÉLECTRICITÉ — LE CIRCUIT
   ------------------------------------------------------------
   Forme : la piste. Segments orthogonaux et chanfreins à 45°, jamais
   une courbe. Matière : le cuivre gravé, la pastille percée, la borne
   à vis. Rythme : la continuité — un tracé relie les sections entre
   elles, entre par un angle du bandeau, traverse la page sur un bus,
   et se termine dans un bornier juste avant le contact.
   Registre sobre : c'est un plan de câblage, pas un feu d'artifice.

   ⚠ 01.08.2026 — LA GÉOMÉTRIE N'A PAS BOUGÉ, LA PALETTE SI.
   Demande du responsable : « un truc un peu plus jaune, plus de jaune,
   et plutôt du noir en fond ». palette.json est passé du graphite CLAIR
   au tableau NOIR, et l'ambre discret à un jaune franc de signalisation.
   Le tronc, lui, a été écrit pour un site clair : il pose une poignée de
   valeurs en dur (`#fff` sur les boutons, `rgba(246,245,242,.94)` sur la
   barre de navigation, deux halos brique/tan) qui deviennent fausses sur
   fond noir. Elles sont toutes reprises en §14, à la fin de ce fichier —
   c'est le seul endroit où on a le droit de les corriger, le tronc étant
   partagé par les huit autres métiers.
   ============================================================ */


/* ---------- 1. Le vocabulaire ---------- */
:root{
  --trace:var(--marque);          /* la piste, sur les fonds clairs */
  --coupe:clamp(14px,2.4vw,34px); /* le chanfrein à 45° des plaques */
  --rayon:2px;                    /* dur et net : une carte, pas un magazine */
  --assise:3px;
  --hauteur-bandeau:74svh;
}
/* Sur les fonds de nuit, le cuivre passe en laiton. */
.hero,.savoir,.pied{--trace:var(--laiton)}


/* ---------- 2. Les trois crochets ----------
   Le bandeau est un flex : sa signature DOIT rester un calque.
   Les deux autres sont des bandes pleine largeur, en width:100%. */
.signature--hero{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.signature--hero svg{width:100%;height:100%;display:block}
.signature--milieu,.signature--contact{
  display:block;width:100%;overflow:hidden;pointer-events:none;line-height:0}
/* Les hauteurs suivent la proportion des viewBox : entre ~950 et ~1600 px
   de large, les dessins tombent au pixel, sans recadrage. */
.signature--milieu{height:clamp(80px,9vw,150px)}
.signature--contact{height:clamp(96px,13vw,200px)}


/* ---------- 3. Le dessin des SVG ----------
   Aucun currentColor : les fills et les strokes viennent des variables,
   sinon le tracé disparaît dès qu'on masque le texte. */
.circuit{display:block;width:100%;height:100%}
.circuit .fond-a{fill:var(--fond)}
.circuit .fond-b{fill:var(--fond-alt)}
.circuit .piste{fill:none;stroke:var(--trace);stroke-width:2;
  stroke-linecap:square;stroke-linejoin:miter}
.circuit .piste--rail{stroke-width:3}
.circuit .piste--fine{stroke-width:1.6;opacity:.85}
.circuit .pad{fill:none;stroke:var(--trace);stroke-width:2.4}
.circuit .pad--fin{stroke-width:1.6;opacity:.7}
.circuit .borne{fill:var(--carte);stroke:var(--trace);stroke-width:2}
.circuit .vis{fill:none;stroke:var(--trace);stroke-width:1.6;opacity:.7}
.circuit .fente{fill:none;stroke:var(--trace);stroke-width:2.6;opacity:.7}
.circuit .borne-nue{fill:none;stroke:var(--trace);stroke-width:2}

/* Le réseau du bandeau reste en retrait : il court sous la photo. */
.circuit--hero .circuit__reseau{opacity:.5}

/* L'IMPULSION — une seule, lente, qui parcourt la piste. Sobre :
   pas d'éclair, pas d'étincelle, juste du courant qui passe. */
.piste--vive{fill:none;stroke:var(--trace);stroke-width:2.8;
  stroke-linecap:round;opacity:.95}
.circuit--hero .piste--vive{stroke:var(--laiton-clair);
  stroke-dasharray:130 1200;stroke-dashoffset:1330;
  animation:elec-impulsion 6.5s linear infinite}
.circuit--bus .piste--vive{stroke-dasharray:150 1600;stroke-dashoffset:1750;
  animation:elec-impulsion-bus 7.5s linear infinite}
@keyframes elec-impulsion{from{stroke-dashoffset:1330}to{stroke-dashoffset:-140}}
@keyframes elec-impulsion-bus{from{stroke-dashoffset:1750}to{stroke-dashoffset:-160}}


/* ---------- 4. La trame du bandeau : la plaque perforée ----------
   La trame verticale devient une grille percée régulièrement — le fond
   d'une platine d'essai. Le masque haut/bas reste celui du socle.
   Les perçages passent en laiton (ils étaient en crème) : sur le noir,
   c'est la première touche de jaune qu'on voit, et elle reste assez
   faible pour ne rien changer aux contrastes du panneau de verre. */
.hero__trame{
  background:
    radial-gradient(circle,color-mix(in srgb,var(--laiton) 30%,transparent) 0 1.6px,
      transparent 1.7px) 0 0/54px 54px,
    repeating-linear-gradient(90deg,color-mix(in srgb,var(--creme) 8%,transparent) 0 1px,
      transparent 1px 54px),
    repeating-linear-gradient(180deg,color-mix(in srgb,var(--creme) 8%,transparent) 0 1px,
      transparent 1px 54px);
}


/* ---------- 5. Les plaques : coins coupés à 45° ----------
   Panneau blanc, panneau de verre, photo pleine largeur et bande de
   nuit sont découpés comme une carte : angle supérieur droit et angle
   inférieur gauche rabattus. Le filet décalé et l'ombre suivent la
   découpe (drop-shadow, pas box-shadow, qui serait rogné net). */
/* ⚠ L'ombre portée se calcule sur --nuit, JAMAIS sur --encre : depuis le
   passage au fond noir, --encre est presque blanc et le panneau se
   retrouvait cerné d'un halo laiteux. */
.panneau{
  clip-path:polygon(0 0,calc(100% - var(--coupe)) 0,100% var(--coupe),
    100% 100%,var(--coupe) 100%,0 calc(100% - var(--coupe)));
  box-shadow:0 1px 0 color-mix(in srgb,var(--creme) 12%,transparent) inset;
  filter:drop-shadow(0 18px 26px color-mix(in srgb,var(--nuit) 70%,transparent));
}

.hero__verre{
  position:relative;border-left:0;
  clip-path:polygon(0 0,calc(100% - var(--coupe)) 0,100% var(--coupe),
    100% 100%,var(--coupe) 100%,0 calc(100% - var(--coupe)));
  box-shadow:none;
}
/* Le montant plein devient un BORNIER : une pile de segments réguliers
   séparés de vides, et non plus un trait continu. */
.hero__verre::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:repeating-linear-gradient(180deg,
    var(--laiton) 0 18px,transparent 18px 28px)}

/* La bande de nuit est une carte posée dans la page : mêmes angles rabattus. */
.savoir{
  clip-path:polygon(0 0,calc(100% - var(--coupe)) 0,100% var(--coupe),
    100% 100%,var(--coupe) 100%,0 calc(100% - var(--coupe)));
}


/* ---------- 6. Le cadre photo : quatre pastilles d'angle ----------
   Le filet décalé disparaît. À sa place, quatre pastilles percées aux
   angles, reliées deux à deux par une courte piste : le cadre devient
   un circuit imprimé. */
.cadre::after{
  border:0;opacity:.75;
  background-image:
    radial-gradient(circle,transparent 0 1.6px,var(--trace) 2px 4.6px,transparent 5px),
    radial-gradient(circle,transparent 0 1.6px,var(--trace) 2px 4.6px,transparent 5px),
    radial-gradient(circle,transparent 0 1.6px,var(--trace) 2px 4.6px,transparent 5px),
    radial-gradient(circle,transparent 0 1.6px,var(--trace) 2px 4.6px,transparent 5px),
    linear-gradient(var(--trace),var(--trace)),
    linear-gradient(var(--trace),var(--trace));
  background-repeat:no-repeat;
  background-position:0 0,100% 0,0 100%,100% 100%,12px 5.5px,12px calc(100% - 6.5px);
  background-size:12px 12px,12px 12px,12px 12px,12px 12px,
    calc(100% - 24px) 1.5px,calc(100% - 24px) 1.5px;
}
.cadre:hover::after{opacity:1}
.savoir .cadre::after{opacity:.7}
.savoir .cadre:hover::after{opacity:1}


/* ---------- 7. L'assise : une piste, une pastille à chaque bout ---------- */
.assise,.entete-section--centre .assise,.savoir .assise,.assise--pied{
  height:11px;width:min(190px,100%);
  background:
    radial-gradient(circle,transparent 0 1.4px,var(--trace) 1.8px 4.4px,transparent 4.8px)
      no-repeat 0 50%/11px 11px,
    radial-gradient(circle,transparent 0 1.4px,var(--trace) 1.8px 4.4px,transparent 4.8px)
      no-repeat 100% 50%/11px 11px,
    linear-gradient(var(--trace),var(--trace)) no-repeat 11px 50%/calc(100% - 22px) 1.5px;
}


/* ---------- 8. Le surtitre : une traversée en tête de ligne ---------- */
.sur::before{content:"";display:inline-block;width:8px;height:8px;
  margin-right:.7em;vertical-align:.02em;border-radius:50%;
  border:1.5px solid var(--trace)}


/* ---------- 9. LES QUATRE POSTES DEVIENNENT UNE PLATINE ----------
   Un bus vertical court sur toute la hauteur de la liste. À chaque
   poste, une traversée percée sur le bus, une piste qui part à 45°, et
   une BORNE — un carré à angles rabattus qui porte le numéro. Les
   quatre postes sont câblés en série. */
.postes{position:relative}
.postes::before{content:"";position:absolute;left:9px;top:.5rem;bottom:.5rem;
  width:1.5px;background:var(--trace);opacity:.55}

/* --haut-poste : le retrait haut du poste. C'est lui qui cale, au pixel,
   le départ de la piste sur le bus et la traversée qui l'accompagne. */
.poste{position:relative;border-top:1px solid var(--filet);
  --haut-poste:clamp(1rem,2.4vw,1.25rem)}
.poste:first-child{--haut-poste:.4rem}
/* La piste à 45° qui relie le bus à la borne du poste. */
.poste::before{content:"";position:absolute;left:9px;
  top:calc(var(--haut-poste) + 7.6px);
  width:1.5px;height:18.4px;background:var(--trace);
  transform:rotate(-45deg);transform-origin:top center;opacity:.75}
/* La traversée percée, posée sur le bus au départ de la piste. Elle est
   portée par le poste et non par la borne : la borne a des angles rabattus
   (clip-path), qui rogneraient tout ce qui dépasse d'elle. */
.poste::after{content:"";position:absolute;left:3px;
  top:calc(var(--haut-poste) + 1.6px);width:12px;height:12px;
  border:2px solid var(--trace);border-radius:50%;
  background:var(--carte);transition:background-color .25s ease}
.poste:hover::after{background:var(--trace)}

.poste__num{
  grid-row:1 / span 2;align-self:start;
  position:relative;display:grid;place-items:center;
  width:38px;height:38px;margin:.1rem 0 0 22px;padding:0;
  font-family:var(--police-libelle);font-weight:500;font-size:.8rem;letter-spacing:.06em;
  color:var(--marque);background:var(--carte);
  border:1.5px solid var(--trace);
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
  transition:background-color .25s ease,border-color .25s ease;
}
/* Le repère carré du socle disparaît : la borne le remplace. */
.poste__num::before{content:none}
.poste:hover .poste__num{background:color-mix(in oklab,var(--marque) 8%,var(--carte))}


/* ---------- 10. La photo pleine largeur : une platine ----------
   Angles rabattus, et le filet d'accent du haut devient un bus à
   pastilles régulières. */
/* ⚠ 02.08.2026 — rien ne se pose sur une photo. */
.equipe__photo{position:relative;border-top:0;padding-top:16px;
  clip-path:polygon(0 0,calc(100% - var(--coupe)) 0,100% var(--coupe),
    100% 100%,var(--coupe) 100%,0 calc(100% - var(--coupe)))}
.equipe__photo::before{content:"";position:absolute;left:0;right:0;top:0;height:16px;
  z-index:2;pointer-events:none;
  background:
    linear-gradient(var(--trace),var(--trace)) 0 0/100% 3px repeat-x,
    radial-gradient(circle at 32px 6px,var(--trace) 0 4.6px,transparent 5px) 0 0/64px 16px repeat-x}


/* ---------- 11. Le pied : le bus sort de la page ---------- */
.pied{
  background-color:var(--nuit);
  background-image:
    linear-gradient(var(--trace),var(--trace)),
    radial-gradient(circle at 30px 6px,var(--trace) 0 4.6px,transparent 5px);
  background-repeat:repeat-x,repeat-x;
  background-position:0 0,0 0;
  background-size:100% 3px,60px 16px;
}


/* ---------- 12. Rythme de la page ----------
   Les deux bandes de signature font office de respiration : les
   sections qu'elles annoncent commencent plus haut. */
.realisations{padding-top:clamp(1.6rem,4vw,2.6rem)}
.contact{padding-top:clamp(1.8rem,4.5vw,3rem)}

/* La galerie s'inverse : la verticale tient la colonne de droite. */
@media (min-width:52rem){
  .realisations__grille{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .realisations__haute{grid-column:2;grid-row:1 / span 2}
  .realisations__grille .cadre:not(.realisations__haute){grid-column:1}
}


/* ---------- 13. LE PASSAGE AU TABLEAU NOIR ----------
   La palette (palette.json) fait tout le travail sur les surfaces qui
   passent par des variables. Restent les valeurs que le TRONC écrit en
   dur parce qu'il a été dessiné pour un site clair : elles sont toutes
   ici, et nulle part ailleurs — on ne corrige pas le tronc, il sert huit
   autres métiers.

   🚨 LA COULEUR DE TEXTE DES SURFACES JAUNES.
   Le tronc pose `color:#fff` sur tout ce qui a un fond --marque (bouton
   plein, ruban, étiquette « aujourd'hui »). Sur l'ambre foncé d'avant,
   c'était juste. Sur le jaune franc d'aujourd'hui, le blanc tombe à
   1,63:1 — illisible. C'est le NOIR qui se lit sur du jaune, et c'est
   aussi ce que fait toute signalétique électrique. Le texte passe donc
   en var(--fond), qui vaut exactement la valeur `texte_bouton` déclarée
   dans palette.json — pas un hexadécimal recopié à la main, sinon les
   deux fichiers divergent au premier changement de palette :
     texte bouton sur --marque         11,01:1   (repos)
     texte bouton sur --marque-fonce   12,77:1   (survol, jaune plus vif)
   outils/contraste.mjs a été enseigné à lire `texte_bouton` : il mesure
   donc ce qui est réellement affiché, et non plus du blanc supposé. */

/* a) La barre de navigation.
      ⚠ CETTE RUSTINE EST CADUQUE DEPUIS LE 02.08.2026. Elle réparait un
      défaut du tronc — une barre recopiée en rgba() littéral (#f6f5f2),
      qui serait restée beige au-dessus du site noir. Le tronc porte
      désormais une barre en VERRE FONCÉ construite sur --nuit et pilotée
      par les postes --barre-* : elle est juste pour les onze métiers, et
      l'électricité n'a plus rien de particulier à corriger.
      La seule chose qu'on garde ici, c'est le bord d'accent jaune : sur
      ce métier, le liseré du tronc (marque + laiton) se lit mal parce que
      les deux valent le même jaune. On le remet en un seul trait franc. */
.entete{border-bottom:1px solid color-mix(in srgb,var(--marque) 40%,transparent)}
.entete::after{background:linear-gradient(90deg,
  var(--marque) 0 30%,color-mix(in srgb,var(--marque) 40%,transparent) 30% 58%,transparent 58% 100%)}

/* b) Le ruban et les surfaces jaunes qui portaient du blanc. */
.ruban,.ruban a{color:var(--fond)}
.tableau__aujourdhui{color:var(--fond)}
/* Le lavis de la ligne du jour : 7 % de jaune se voyait sur du blanc,
   plus du tout sur un panneau anthracite. */
.tableau__ligne--aujourdhui{background:color-mix(in oklab,var(--marque) 15%,transparent)}

/* c) Les boutons. Texte foncé, et l'ombre brune du tronc (rgba(46,16,6))
      remplacée par une lueur de la couleur du bouton : sur du noir, une
      ombre noire ne détache rien. */
.bouton--plein,
#nav-links a.bouton,
.bouton--plein:hover,
.bouton--plein:focus-visible{color:var(--fond)}
.bouton--plein{
  box-shadow:0 1px 0 color-mix(in srgb,var(--laiton-clair) 70%,transparent) inset,
             0 12px 26px -14px color-mix(in srgb,var(--marque) 65%,transparent)}
.bouton--plein:hover,.bouton--plein:focus-visible{
  box-shadow:0 1px 0 color-mix(in srgb,var(--laiton-clair) 70%,transparent) inset,
             0 18px 34px -14px color-mix(in srgb,var(--marque) 75%,transparent)}

/* d) Les deux halos posés en rgba() de brique et de tan par le tronc.
      Ils passent au jaune, et restent assez faibles pour que le texte de
      la bande de nuit tienne : au point le plus éclairé du halo (#322c13),
      --creme 12,34:1, --creme-doux 6,48:1, --laiton 8,56:1. */
.savoir{
  background:radial-gradient(120% 85% at 10% 0%,
    color-mix(in srgb,var(--laiton) 16%,transparent),transparent 60%),var(--nuit)}
.contact{
  background:radial-gradient(85% 70% at 80% 0%,
    color-mix(in srgb,var(--marque) 10%,transparent),transparent 56%),var(--fond-alt)}
.pied__bas{border-top-color:color-mix(in srgb,var(--laiton) 28%,transparent)}

/* e) Les ombres des photos, calées en dur sur un gris clair : sur le noir
      elles ne portaient plus rien. */
.cadre img{box-shadow:0 26px 52px -30px color-mix(in srgb,var(--nuit) 92%,transparent)}


/* ---------- 14. MOUVEMENT RÉDUIT ----------
   La piste ne s'éteint jamais : au lieu de courir, elle reste ALLUMÉE
   en permanence, à l'intensité de fin de course. Rien ne disparaît. */
@media (prefers-reduced-motion:reduce){
  .circuit--hero .piste--vive,
  .circuit--bus .piste--vive{
    animation:none;stroke-dasharray:none;stroke-dashoffset:0;opacity:.9}
  .poste:hover .poste__num{transition:background-color .25s ease}
}
/* Le texte noir des boutons pleins était déclaré ici une seconde fois, en
   hexadécimal (#15171b) et APRÈS le bloc de mouvement réduit. Fusionné
   dans le §13.b/c ci-dessus, en var(--fond) : même valeur rendue, mais
   elle suit palette.json au lieu d'en être une copie qui vieillit mal. */