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


/* ===== peinture — 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:#171d27;
  --encre-douce:#48515f;
  --fond:#f8f8f6;
  --fond-alt:#dde4ec;
  --carte:#ffffff;
  --marque:#1a4f97;
  --marque-fonce:#123b73;
  --filet:#c1cad6;
  --nuit:#121824;
  --creme:#eef1f6;
  --creme-doux:#b6bfcc;
  --laiton:#d9a04f;
  --laiton-clair:#e8bd7c;
  --teinte-1:#1a4f97;
  --teinte-2:#12736c;
  --teinte-3:#b8842c;
  --teinte-4:#a8452b;
  --teinte-5:#6a4177;
  --police-titre:'PoliceTitre',"Avenir Next",Avenir,"Segoe UI",system-ui,sans-serif;
  --police-libelle:'PoliceLibelle',"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
}


/* ===== peinture — 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. */
/* ============================================================
   PEINTURE ET PLÂTRERIE — SIGNATURE DU MÉTIER : L'APLAT
   ------------------------------------------------------------
   Forme   : le rectangle net, coupé au ruban de masquage. Rayon 0.
   Matière : la couleur qui se pose en surfaces pleines, et qui déborde
             par endroits — reprises au-dessus de la ligne, coulures.
   Rythme  : le passage de rouleau. Des bandes larges qui se recouvrent,
             et le nuancier — la rangée de cartes de couleur — qui
             remplace tous les filets de la page.

   Rien ici n'est un ornement posé par-dessus : la charpente change.
     · la limite entre deux sections devient un jeu de cartes de couleur
     · la galerie des réalisations devient un éventail de nuancier
       (trois cartes coiffées d'aplats d'épaisseurs inégales, en escalier)
     · le bandeau devient un mur en cours de peinture
     · le filet d'ornement (l'assise, 6×) devient cinq pastilles
     · le repère des postes (4×) devient une goutte de peinture
     · les filets de séparation deviennent des coups de brosse
     · les cadres photo sont tenus par deux bouts de ruban de masquage

   Aucune couleur, aucune police en dur : tout dérive des variables de
   palette.json. Les `fill`/`stroke` ne servent pas ici — pas un seul
   SVG, donc pas de piège `currentColor` au test du squelette.
   ============================================================ */

:root{
  /* Géométrie — un bord coupé au ruban est parfaitement droit. */
  --rayon:0;                     /* les boutons gardent leur pilule : --rayon-bouton intact */
  --assise:10px;                 /* l'aplat qui coiffe les panneaux, épais comme une passe */
  --hauteur-bandeau:86svh;       /* le mur a besoin de hauteur */

  /* ---------- LE NUANCIER — CINQ TEINTES, PLUS CINQ CHARGES ----------
     02.08.2026. Demande du responsable : « peinture, j'aimerais plus de
     couleurs — mais qui vont bien ensemble, bien géré hein. »

     Ce qu'il y avait ici : cinq charges du MÊME bleu, du glacis au plein.
     C'est un dégradé. Un peintre qui ouvre son éventail ne montre pas
     cinq fois le même pot plus ou moins dilué — il montre cinq teintes.
     La signature entière (les cartes de la limite entre sections, l'arête
     de la barre, l'éventail des réalisations, la passe sous la photo
     d'équipe) était donc construite sur une idée fausse du métier.

     Les cinq teintes viennent de palette.json (--teinte-1..5). Ce sont
     cinq PIGMENTS, pas cinq couleurs choisies à l'écran : outremer,
     vert-de-gris, ocre jaune, terre de Sienne brûlée, violet de mars.
     Ils tiennent ensemble parce qu'ils partagent la même valeur et la
     même saturation — aucun ne passe devant les autres. C'est ça, « bien
     géré » : une famille, pas un assortiment.

     ⚠ AUCUNE de ces teintes ne porte de texte. Elles ne servent que de
     cartes, d'aplats et de filets. C'est ce qui permet d'ouvrir la
     couleur sans toucher à un seul contraste de lecture — mesuré :
     le plus bas du métier reste 5,44, au-dessus du plancher de 4,50.

     Le repli `var(--teinte-N, …)` garde la rampe d'origine si un jour la
     palette repart sans les teintes : la feuille ne casse pas, elle
     redevient monochrome. */
  --pnt-t1:var(--teinte-1,color-mix(in oklab,var(--marque) 18%,transparent));
  --pnt-t2:var(--teinte-2,color-mix(in oklab,var(--marque) 38%,transparent));
  --pnt-t3:var(--teinte-3,color-mix(in oklab,var(--marque) 60%,transparent));
  --pnt-t4:var(--teinte-4,color-mix(in oklab,var(--marque) 80%,transparent));
  --pnt-t5:var(--teinte-5,var(--marque));

  /* Les mêmes cinq teintes en glacis, pour les endroits où le nuancier
     est un FOND et non une carte : à pleine charge, cinq aplats côte à
     côte derrière du texte feraient une page de peintre en bâtiment, pas
     un site d'entreprise. */
  --pnt-v1:color-mix(in oklab,var(--pnt-t1) 22%,transparent);
  --pnt-v2:color-mix(in oklab,var(--pnt-t2) 22%,transparent);
  --pnt-v3:color-mix(in oklab,var(--pnt-t3) 22%,transparent);
  --pnt-v4:color-mix(in oklab,var(--pnt-t4) 22%,transparent);
  --pnt-v5:color-mix(in oklab,var(--pnt-t5) 22%,transparent);
  /* La même rampe en ocre, pour les bandes de nuit. */
  --pnt-o1:color-mix(in oklab,var(--laiton) 22%,transparent);
  --pnt-o2:color-mix(in oklab,var(--laiton) 45%,transparent);
  --pnt-o3:color-mix(in oklab,var(--laiton) 68%,transparent);
  --pnt-o4:color-mix(in oklab,var(--laiton) 86%,transparent);
  --pnt-o5:var(--laiton);

  /* Le ruban de masquage : beige de chantier, tiré du laiton de la palette. */
  --pnt-ruban:color-mix(in oklab,var(--laiton) 44%,var(--carte));
  --pnt-ruban-fonce:color-mix(in oklab,var(--laiton) 66%,var(--carte));

  --pnt-bande:clamp(28px,4.4vw,68px);    /* largeur du passage de rouleau du bandeau */
  --pnt-aplat:clamp(96px,13vw,140px);    /* hauteur de l'aplat au pied du bandeau */
}


/* ============================================================
   1. LE BANDEAU — UN MUR EN COURS DE PEINTURE
   ============================================================ */

/* Obligatoire : le crochet est un item d'un flex, il DOIT être un calque. */
.signature--hero{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.signature--hero svg{width:100%;height:100%;display:block}

/* Le bandeau respire par le bas : l'aplat occupe la marge basse, et le
   panneau vient s'appuyer dessus (il le recouvre de quelques pixels). */
.hero{padding-block:clamp(3rem,8vw,4.5rem) calc(var(--pnt-aplat) - clamp(6px,1.2vw,16px))}

/* Tant que la colonne centrale touche les gouttières, le panneau se décale
   pour dégager le passage de rouleau. Au-delà, le centrage suffit déjà. */
@media (max-width:74rem){
  .hero__bande{padding-left:calc(var(--pnt-bande) + clamp(12px,2.4vw,28px))}
}

/* La passe principale : une bande verticale pleine, arrêtée en pleine
   hauteur. Elle descend du haut à l'ouverture de la page. */
.pnt-passe{position:absolute;top:0;display:block;
  background:color-mix(in srgb,var(--marque) 92%,transparent);
  transform-origin:top;
  animation:pnt-descend .95s cubic-bezier(.2,.75,.25,1) both}
.pnt-passe--a{left:0;width:var(--pnt-bande);height:64%}
/* La seconde passe recouvre la première — c'est le geste du rouleau :
   deux bandes qui se chevauchent, la reprise est plus claire. */
.pnt-passe--b{left:calc(var(--pnt-bande) * .62);width:calc(var(--pnt-bande) * .55);
  height:41%;background:color-mix(in srgb,var(--marque) 58%,transparent);
  animation-delay:.12s}
/* La fin de passe : la charge s'épuise, le bord devient fibreux. Deux
   trames de pas différents (7 px et 13 px) pour que le bord ne soit pas un
   peigne régulier. */
.pnt-passe::after{content:"";position:absolute;left:0;right:0;bottom:-13px;height:15px;
  background:
    repeating-linear-gradient(90deg,var(--marque) 0 2px,transparent 2px 7px),
    repeating-linear-gradient(90deg,var(--marque) 0 1px,transparent 1px 13px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,transparent 100%)}

/* Les coulures : trois filets qui descendent de la fin de passe, chacun
   terminé par une goutte. */
.pnt-coulure{position:absolute;display:block;background:var(--marque);
  transform-origin:top;
  animation:pnt-couler 1.3s cubic-bezier(.35,.8,.3,1) .5s both}
.pnt-coulure::after{content:"";position:absolute;left:50%;bottom:0;
  width:calc(100% + 3px);aspect-ratio:1;border-radius:50%;
  background:var(--marque);transform:translate(-50%,40%)}
.pnt-coulure--a{left:calc(var(--pnt-bande) * .20);top:64%;width:4px;height:clamp(38px,6vw,74px)}
.pnt-coulure--b{left:calc(var(--pnt-bande) * .64);top:41%;width:3px;height:clamp(22px,3.6vw,46px);
  animation-delay:.66s}
.pnt-coulure--c{left:calc(var(--pnt-bande) * .78);top:64%;width:5px;height:clamp(52px,8.4vw,98px);
  animation-delay:.58s}

/* La bande de masquage posée en travers, légèrement de biais. Beige pâle
   et translucide — mesuré en capture le 01.08.2026 : à 34 % de laiton pur
   elle virait au tasseau de bois doré, on ne lisait plus du ruban. */
.pnt-ruban{position:absolute;display:block;
  top:clamp(38px,9%,104px);right:-6%;width:44%;height:clamp(13px,1.7vw,21px);
  background:color-mix(in oklab,var(--pnt-ruban) 58%,transparent);
  border-top:1px solid color-mix(in oklab,var(--creme) 26%,transparent);
  border-bottom:1px solid color-mix(in oklab,var(--nuit) 22%,transparent);
  transform:rotate(-3.4deg);
  animation:pnt-paraitre .8s ease .35s both}

/* L'aplat du pied : coupé au ruban, donc parfaitement droit, avec un
   liseré clair sur l'arête. Deux REPRISES débordent au-dessus de la ligne
   — l'endroit où le rouleau est monté un peu trop haut. */
.pnt-aplat{position:absolute;left:0;right:0;bottom:0;display:block;
  height:var(--pnt-aplat);background:var(--marque);transform-origin:bottom;
  animation:pnt-descend .9s cubic-bezier(.2,.75,.25,1) .1s both}
.pnt-aplat::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:color-mix(in oklab,var(--creme) 26%,transparent)}
.pnt-reprise{position:absolute;display:block;bottom:var(--pnt-aplat);background:var(--marque);
  animation:pnt-paraitre .7s ease .55s both}
/* Placées À DROITE du panneau : mesuré en capture le 01.08.2026, à 38 % de
   la largeur elles tombaient derrière le panneau de verre et personne ne
   les voyait. Sous 62 rem le panneau prend toute la largeur : elles ne se
   voient pas, et c'est le passage de rouleau de gauche qui porte seul. */
.pnt-reprise--a{left:70%;width:clamp(58px,9vw,128px);height:clamp(9px,1.2vw,16px)}
.pnt-reprise--b{left:89%;width:clamp(32px,5vw,70px);height:clamp(6px,.9vw,11px);
  background:color-mix(in srgb,var(--marque) 76%,transparent);animation-delay:.68s}

/* La trame du bandeau : plus de hairlines d'aplomb, mais le grain
   horizontal du rouleau, très faible, sur toute la surface. */
.hero__trame{
  background:repeating-linear-gradient(180deg,
    color-mix(in oklab,var(--creme) 10%,transparent) 0 2px,transparent 2px 29px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 66%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 66%,transparent 100%)}

/* Le panneau de texte ne pend plus à un montant : il POSE sur l'aplat.
   Le montant de gauche disparaît, une assise pleine passe sous le bloc. */
.hero__verre{border-radius:0;
  border:1px solid color-mix(in oklab,var(--creme) 16%,transparent);
  border-left:1px solid color-mix(in oklab,var(--creme) 16%,transparent);
  border-bottom:var(--assise) solid var(--marque)}

@keyframes pnt-descend{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes pnt-couler{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes pnt-paraitre{from{opacity:0}to{opacity:1}}


/* ============================================================
   2. LE NUANCIER — la limite entre les deux premières sections
   ============================================================ */
.signature--milieu{display:block;width:100%;overflow:hidden;
  background:linear-gradient(180deg,var(--fond) 0 58%,var(--fond-alt) 58% 100%)}
.pnt-nuancier{display:flex;align-items:flex-start;gap:clamp(3px,.55vw,7px);
  width:100%;height:clamp(118px,15vw,180px)}
.pnt-carte{flex:1 1 0;min-width:0;height:var(--h,52%);display:block}

/* Les seize cartes — L'ÉVENTAIL, refait le 02.08.2026.
   C'est le plus grand nuancier de la page, et c'était le plus faux : seize
   cartes qui allaient du glacis au bleu plein, puis à l'ocre. Deux
   couleurs, seize cartes. Un peintre qui pose son éventail sur la table
   montre l'inverse — plusieurs TEINTES, et pour chacune deux ou trois
   charges, parce que c'est comme ça qu'on choisit : d'abord la couleur,
   ensuite l'intensité.
   Cinq teintes × trois charges, groupées, et la seizième referme sur la
   première. Le groupement est ce qui fait la différence entre un nuancier
   et un arc-en-ciel : l'œil lit cinq familles, pas seize couleurs.
   La 6 et la 14 restent tirées du jeu et descendent jusqu'au bas de la
   bande : ce sont elles qui franchissent la ligne entre les deux
   sections. Leurs hauteurs irrégulières sont conservées telles quelles. */
.pnt-carte:nth-child(1) {--h:44%; background:color-mix(in oklab,var(--pnt-t1) 24%,var(--carte))}
.pnt-carte:nth-child(2) {--h:54%; background:color-mix(in oklab,var(--pnt-t1) 52%,var(--carte))}
.pnt-carte:nth-child(3) {--h:47%; background:var(--pnt-t1)}
.pnt-carte:nth-child(4) {--h:60%; background:color-mix(in oklab,var(--pnt-t2) 24%,var(--carte))}
.pnt-carte:nth-child(5) {--h:50%; background:color-mix(in oklab,var(--pnt-t2) 52%,var(--carte))}
.pnt-carte:nth-child(6) {--h:100%;background:var(--pnt-t2)}
.pnt-carte:nth-child(7) {--h:57%; background:color-mix(in oklab,var(--pnt-t3) 24%,var(--carte))}
.pnt-carte:nth-child(8) {--h:45%; background:color-mix(in oklab,var(--pnt-t3) 52%,var(--carte))}
.pnt-carte:nth-child(9) {--h:63%; background:var(--pnt-t3)}
.pnt-carte:nth-child(10){--h:51%; background:color-mix(in oklab,var(--pnt-t4) 24%,var(--carte))}
.pnt-carte:nth-child(11){--h:43%; background:color-mix(in oklab,var(--pnt-t4) 52%,var(--carte))}
.pnt-carte:nth-child(12){--h:56%; background:var(--pnt-t4)}
.pnt-carte:nth-child(13){--h:48%; background:color-mix(in oklab,var(--pnt-t5) 24%,var(--carte))}
.pnt-carte:nth-child(14){--h:100%;background:color-mix(in oklab,var(--pnt-t5) 52%,var(--carte))}
.pnt-carte:nth-child(15){--h:46%; background:var(--pnt-t5)}
.pnt-carte:nth-child(16){--h:58%; background:color-mix(in oklab,var(--pnt-t1) 78%,var(--carte))}


/* ============================================================
   3. LE PASSAGE DE ROULEAU — juste avant le contact
   ============================================================ */
.signature--contact{display:block;width:100%;overflow:hidden;position:relative;
  --pnt-y:clamp(24px,3.4vw,42px);
  --pnt-h:clamp(44px,5.6vw,66px);
  height:clamp(140px,17.5vw,200px);
  background:linear-gradient(180deg,var(--fond) 0 56%,var(--fond-alt) 56% 100%)}
.pnt-passage{position:absolute;inset:0}
/* La reprise : là où le rouleau est repassé, la couche est plus épaisse et
   la teinte plus soutenue. Sans elle, la passe est un rectangle parfait —
   ce qu'aucun mur peint n'est.
   Bords NETS, pas de fondu : mesuré en capture le 01.08.2026, un fondu
   latéral donnait une tache sombre et floue — on lisait une ombre, pas une
   couche. Un bord coupé au ruban est net, c'est tout le propos du métier. */
.pnt-passage::before{content:"";position:absolute;left:21%;width:33%;
  top:calc(var(--pnt-y) - 9px);height:calc(var(--pnt-h) + 9px);
  background:color-mix(in oklab,var(--marque) 80%,var(--nuit))}

/* L'aplat de la passe, et le grain du rouleau en fines rayures claires. */
.pnt-passage__bande{position:absolute;left:0;right:0;display:block;
  top:var(--pnt-y);height:var(--pnt-h);
  background:
    repeating-linear-gradient(90deg,
      color-mix(in oklab,var(--creme) 16%,transparent) 0 1px,transparent 1px 11px),
    var(--marque)}
/* Les deux bords fibreux : en haut où la passe démarre, en bas où elle
   s'épuise. DEUX trames de pas différents (7 px et 13 px) qui se
   superposent : mesuré en capture le 01.08.2026, un pas unique donnait un
   peigne parfaitement régulier — ça se lisait comme une frange, pas comme
   un bord de peinture. Deux pas premiers entre eux battent sur 91 px et le
   bord redevient irrégulier. */
.pnt-passage__bande::before,.pnt-passage__bande::after{content:"";position:absolute;
  left:0;right:0;height:7px;
  background:
    repeating-linear-gradient(90deg,var(--marque) 0 3px,transparent 3px 8px),
    repeating-linear-gradient(90deg,
      color-mix(in srgb,var(--marque) 62%,transparent) 0 2px,transparent 2px 5px),
    repeating-linear-gradient(90deg,
      color-mix(in srgb,var(--marque) 40%,transparent) 0 1px,transparent 1px 14px)}
.pnt-passage__bande::before{top:-5px;
  -webkit-mask-image:linear-gradient(0deg,#000 0%,transparent 100%);
  mask-image:linear-gradient(0deg,#000 0%,transparent 100%)}
.pnt-passage__bande::after{bottom:-5px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,transparent 100%)}

/* Les coulures franchissent la ligne de la section suivante. */
.pnt-goutte{position:absolute;display:block;background:var(--marque);
  top:calc(var(--pnt-y) + var(--pnt-h) - 2px)}
.pnt-goutte::after{content:"";position:absolute;left:50%;bottom:0;
  width:calc(100% + 3px);aspect-ratio:1;border-radius:50%;
  background:var(--marque);transform:translate(-50%,40%)}
.pnt-goutte--a{left:13%;width:5px;height:clamp(30px,4.4vw,56px)}
.pnt-goutte--b{left:37%;width:3px;height:clamp(18px,2.6vw,32px)}
.pnt-goutte--c{left:68%;width:7px;height:clamp(46px,7vw,86px)}
.pnt-goutte--d{left:88%;width:3px;height:clamp(24px,3.4vw,42px)}


/* ============================================================
   4. LES ÉLÉMENTS RÉPÉTÉS — c'est eux qui signent toute la page
   ============================================================ */

/* L'ASSISE (6×) : plus un filet, cinq pastilles de nuancier. */
.assise{height:12px;width:min(184px,100%);
  background:linear-gradient(90deg,
    var(--pnt-t1) 0 32px,transparent 32px 38px,
    var(--pnt-t2) 38px 70px,transparent 70px 76px,
    var(--pnt-t3) 76px 108px,transparent 108px 114px,
    var(--pnt-t4) 114px 146px,transparent 146px 152px,
    var(--pnt-t5) 152px 184px,transparent 184px 100%)}
.entete-section--centre .assise{margin-inline:auto;transform-origin:center;
  background:linear-gradient(90deg,
    var(--pnt-t1) 0 32px,transparent 32px 38px,
    var(--pnt-t2) 38px 70px,transparent 70px 76px,
    var(--pnt-t3) 76px 108px,transparent 108px 114px,
    var(--pnt-t4) 114px 146px,transparent 146px 152px,
    var(--pnt-t5) 152px 184px,transparent 184px 100%)}
/* Sur les bandes de nuit, la même rangée en ocre. */
.savoir .assise,.assise--pied{
  background:linear-gradient(90deg,
    var(--pnt-o1) 0 32px,transparent 32px 38px,
    var(--pnt-o2) 38px 70px,transparent 70px 76px,
    var(--pnt-o3) 76px 108px,transparent 108px 114px,
    var(--pnt-o4) 114px 146px,transparent 146px 152px,
    var(--pnt-o5) 152px 184px,transparent 184px 100%)}

/* LE SURTITRE (5×) : une pastille de couleur devant le libellé. */
.sur::before{content:"";display:inline-block;width:26px;height:9px;
  margin-right:.55rem;vertical-align:.06em;background:var(--marque)}
.savoir .sur::before{background:var(--laiton)}

/* LA BARRE DE NAVIGATION : son arête basse est un nuancier qui court
   d'un bord à l'autre. */
.entete{border-bottom:0}
.entete::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;
  background:repeating-linear-gradient(90deg,
    var(--pnt-t1) 0 44px,transparent 44px 50px,
    var(--pnt-t3) 50px 94px,transparent 94px 100px,
    var(--pnt-t5) 100px 144px,transparent 144px 150px,
    var(--pnt-t2) 150px 194px,transparent 194px 200px)}
#nav-links li:not(:last-child) a::after{height:4px}

/* LE PANNEAU (2×) : coiffé de deux aplats superposés — la couche pleine
   et la couche de dessous, comme deux passes. */
.panneau{border-radius:0}
.panneau::before{border-radius:0;height:var(--assise)}
.panneau::after{content:"";position:absolute;left:-1px;right:-1px;top:var(--assise);
  height:5px;background:var(--pnt-t2)}

/* LE REPÈRE DES POSTES (4×) : une goutte de peinture — la coulure et la
   goutte au bout. */
.poste__num{padding-left:1.6rem}
.poste__num::before{left:2px;top:.92em;width:11px;height:11px;border-radius:50%;
  background:var(--marque);opacity:.9}
.poste__num::after{content:"";position:absolute;left:6px;top:.18em;width:3px;height:.86em;
  background:var(--marque);opacity:.45}

/* LA SÉPARATION DES POSTES (4×) : un coup de brosse, pas un filet net. */
.poste{position:relative;border-top:0;padding-top:clamp(1rem,2.4vw,1.25rem)}
.poste:first-child{padding-top:.4rem}
.poste:not(:first-child)::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:
    repeating-linear-gradient(90deg,var(--filet) 0 9px,transparent 9px 13px),
    repeating-linear-gradient(90deg,
      color-mix(in oklab,var(--filet) 55%,transparent) 0 5px,transparent 5px 12px),
    repeating-linear-gradient(90deg,
      color-mix(in oklab,var(--filet) 35%,transparent) 0 3px,transparent 3px 7px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 5%,#000 90%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 5%,#000 90%,transparent 100%)}

/* LES CADRES PHOTO (6×) : deux bouts de ruban de masquage sur deux coins
   opposés, à la place du filet décalé. Le débordement est limité à 10 px
   — toujours moins que la gouttière minimale (16 px). */
.cadre::before,
.cadre::after,.cadre--gauche::after,.realisations__haute::after,
.savoir .cadre::after,.cadre:hover::after,.savoir .cadre:hover::after{
  content:"";position:absolute;pointer-events:none;border:0;border-radius:0;opacity:1;
  background:var(--pnt-ruban);
  box-shadow:0 1px 3px color-mix(in oklab,var(--nuit) 22%,transparent);
  transition:background-color .3s ease,transform .3s ease}
.cadre::before{top:-9px;left:-10px;right:auto;bottom:auto;
  width:clamp(62px,9vw,106px);height:clamp(16px,1.6vw,21px);
  transform:rotate(-5deg)}
.cadre::after,.cadre--gauche::after,.realisations__haute::after,
.savoir .cadre::after,.cadre:hover::after,.savoir .cadre:hover::after{
  inset:auto -10px -9px auto;
  width:clamp(52px,7.5vw,90px);height:clamp(14px,1.4vw,19px);
  transform:rotate(4deg)}
.cadre:hover::before{transform:rotate(-2deg);background:var(--pnt-ruban-fonce)}

/* LA GALERIE DES RÉALISATIONS : un éventail de nuancier. Trois cartes
   coiffées (ou chaussées) d'un aplat d'épaisseur différente, largeurs
   inégales, décalées en escalier — elles ne se ressemblent pas. */
.realisations__grille .cadre{display:block}
.realisations__grille img{width:100%;height:auto;aspect-ratio:4/3}
.realisations__grille .cadre:nth-child(1){
  border-top:clamp(24px,3.2vw,42px) solid var(--pnt-t5)}
.realisations__grille .cadre:nth-child(2){
  border-bottom:clamp(15px,2.1vw,27px) solid var(--pnt-t3)}
.realisations__grille .cadre:nth-child(3){
  border-top:clamp(40px,5.6vw,74px) solid var(--pnt-t4)}
@media (min-width:52rem){
  .realisations__grille{grid-template-columns:minmax(0,1fr) minmax(0,1.16fr) minmax(0,.82fr);
    align-items:start}
  .realisations__grille .cadre:not(.realisations__haute),
  .realisations__haute{grid-column:auto;grid-row:auto}
  .realisations__grille .cadre:nth-child(2){margin-top:clamp(20px,3.4vw,48px)}
  .realisations__grille .cadre:nth-child(3){margin-top:clamp(40px,6.6vw,92px)}
  .realisations__grille img{aspect-ratio:4/3;height:auto}
  .realisations__haute img{aspect-ratio:3/4;height:auto}
}

/* LA PHOTO D'ÉQUIPE : son filet d'accent devient une passe de nuancier
   qui court sur toute la largeur de la page. */
.equipe__photo{position:relative;border-top:0;padding-top:14px}
.equipe__photo::before{content:"";position:absolute;left:0;right:0;top:0;height:14px;
  background:repeating-linear-gradient(90deg,
    var(--pnt-t2) 0 46px,transparent 46px 52px,
    var(--pnt-t4) 52px 98px,transparent 98px 104px,
    var(--pnt-t5) 104px 150px,transparent 150px 156px,
    var(--pnt-t3) 156px 202px,transparent 202px 208px)}

/* Les deux voiles de couleur des sections reprenaient la brique du tronc,
   écrite en dur. On les rebranche sur les variables du métier. */
.savoir{background:radial-gradient(120% 85% at 10% 0%,
    color-mix(in oklab,var(--laiton) 15%,transparent),transparent 60%),var(--nuit)}
.contact{background:radial-gradient(85% 70% at 80% 0%,
    color-mix(in oklab,var(--marque) 9%,transparent),transparent 56%),var(--fond-alt)}


/* ============================================================
   5. MOUVEMENT RÉDUIT — on REMPLACE, on ne supprime pas.
   Ce fichier passe APRÈS le bloc du tronc : tout ce qu'il redéclare doit
   être retraité ici, sinon le réglage du responsable (actif en
   permanence sur sa machine) ne s'applique plus.
   Chaque déroulé devient un fondu de MÊME durée : rien ne disparaît.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .pnt-passe{animation-name:pnt-paraitre;animation-duration:.95s;transform:none}
  .pnt-aplat{animation-name:pnt-paraitre;animation-duration:.9s;transform:none}
  .pnt-coulure{animation-name:pnt-paraitre;animation-duration:1.3s;transform:none}
  /* Le ruban de masquage garde son inclinaison : elle est sa forme, pas
     son animation. Seule l'apparition change, et elle est déjà un fondu. */
  /* Le ruban des cadres ne pivote plus au survol : il fonce, sur la même
     durée. Sans cette ligne, `transform:none` remettrait le ruban droit —
     donc un mouvement, exactement ce qu'on veut éviter. */
  .cadre::before,.cadre::after{transition:background-color .3s ease}
  .cadre:hover::before{transform:rotate(-5deg);background:var(--pnt-ruban-fonce)}
  .cadre:hover::after{transform:rotate(4deg);background:var(--pnt-ruban-fonce)}
}