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


/* ===== carrelage — 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:#191c1f;
  --encre-douce:#4b5155;
  --fond:#f7f6f3;
  --fond-alt:#ddd8d0;
  --carte:#ffffff;
  --marque:#833819;
  --marque-fonce:#642a12;
  --filet:#c8c2b8;
  --nuit:#1a1817;
  --creme:#f3efe9;
  --creme-doux:#c6bdb2;
  --laiton:#cf8b5c;
  --laiton-clair:#e0a67d;
  --police-titre:'PoliceTitre',Rockwell,"Roboto Slab","Courier New",Georgia,serif;
  --police-libelle:'PoliceLibelle',"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
}


/* ===== carrelage — 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. */
/* ============================================================
   CARRELAGE — LE CALEPINAGE
   ------------------------------------------------------------
   Le carreleur descend du maçon, et c'est justement le piège :
   il fallait que les deux pages ne se confondent JAMAIS.

   Le maçon appareille — rangs décalés d'un demi-module,
   l'horizontale toujours plus forte que la verticale, aucune
   limite droite. Le carreleur CALEPINE : trame orthogonale,
   joint identique dans les deux sens, tout aligné au carreau
   près. Là où le maçon décale, le carreleur aligne.

   Et là où il ne peut pas aligner, il tourne : la DIAGONALE à
   45° est le seul geste du métier qui se voit depuis la porte,
   parce qu'elle oblige à découper chaque carreau de rive.
   C'est la signature de cette page.

   Trois objets, tous en dégradés, aucune image, aucun SVG :
     la frise      une dernière rangée le long du bord du bandeau
     la diagonale  un champ à 45° en guise de limite de section
     la pose       un sol inachevé, croisillons encore en place

   ⚠ Aucune couleur en dur. Tout dérive de la palette du métier.
   ============================================================ */


/* ---------- LE CARREAU ----------
   Un grès cérame courant fait 60×60 ; le joint 2 mm. On garde
   le rapport : le joint est ~3 % du carreau, et il est IDENTIQUE
   dans les deux sens — c'est ce détail-là qui dit « carrelage »
   plutôt que « mur ». */
:root{
  --carreau:64px;
  --joint:3px;
  --pas:67px;                    /* carreau + joint : le pas de la trame */
  --joint-clair:color-mix(in oklab,var(--filet) 92%,transparent);
  --joint-nuit:color-mix(in srgb,var(--creme) 13%,transparent);
  --carreau-face:color-mix(in oklab,var(--fond-alt) 94%,var(--nuit));
  --cabochon:color-mix(in oklab,var(--marque) 30%,var(--fond-alt));

  /* Un carreau n'a pas d'angle arrondi, et un joint non plus.
     Les boutons gardent leur pilule : demande explicite. */
  --rayon:0;
  --assise:5px;
}
@media (max-width:48rem){
  :root{--carreau:44px;--joint:2px;--pas:46px}
}


/* ---------- LES TROIS CROCHETS : LEUR BOÎTE ---------- */
.signature--hero{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.signature--milieu,.signature--contact{
  display:block;width:100%;position:relative;overflow:hidden}


/* ============================================================
   1. LE BANDEAU — la trame devient un quadrillage
   ------------------------------------------------------------
   Le tronc peint une trame de traits VERTICAUX sur la photo.
   Chez le carreleur elle prend le second sens : des joints dans
   les deux directions, au même pas et à la même épaisseur. Un
   quadrillage, pas des colonnes.
   ============================================================ */
.hero__trame{
  background:
    repeating-linear-gradient(90deg,var(--joint-nuit) 0 1px,transparent 1px var(--pas)),
    repeating-linear-gradient(0deg, var(--joint-nuit) 0 1px,transparent 1px var(--pas));
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 66%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 66%,transparent 100%)}

/* LA FRISE — la dernière rangée posée le long du bord bas.
   Deux tons alternés au pas du carreau, séparés par le joint.
   Elle est masquée par la gauche : la rangée « commence » au
   bord de l'écran et se perd vers la droite, comme un sol qui
   continue hors du cadre. */
/* ⚠ PREMIER JET TROP DISCRET — mesuré le 02.08.2026 sur la capture :
   à 16 % et 9 % de crème sur une photo, la frise ne se voyait pas du
   tout. Une frise de sol est un ouvrage qu'on montre, pas une texture :
   on double la hauteur et on écarte franchement les deux tons. */
.frise{
  display:block;position:absolute;left:0;right:0;bottom:0;
  height:calc(var(--carreau) * .62);
  background:
    repeating-linear-gradient(90deg,
      color-mix(in srgb,var(--creme) 34%,transparent) 0 var(--carreau),
      transparent var(--carreau) calc(var(--carreau) + var(--joint)),
      color-mix(in srgb,var(--creme) 15%,transparent) calc(var(--carreau) + var(--joint)) calc(var(--carreau) * 2 + var(--joint)),
      transparent calc(var(--carreau) * 2 + var(--joint)) calc(var(--carreau) * 2 + var(--joint) * 2));
  border-top:calc(var(--joint) + 1px) solid var(--marque);
  box-shadow:0 -14px 26px -14px rgba(0,0,0,.5);
  -webkit-mask-image:linear-gradient(90deg,#000 0 62%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0 62%,transparent 100%)}

/* Le panneau de verre garde son montant d'accent, mais on lui
   pose un CROISILLON à l'angle haut-gauche : la croix de pose,
   l'objet que seul un carreleur a dans sa poche. */
.hero__verre{position:relative}
.hero__verre::before{
  content:"";position:absolute;left:calc(var(--assise) * -1 - 9px);top:-9px;
  width:19px;height:19px;pointer-events:none;
  background:
    linear-gradient(var(--laiton-clair,var(--marque)) 0 0) center/2px 19px no-repeat,
    linear-gradient(var(--laiton-clair,var(--marque)) 0 0) center/19px 2px no-repeat;
  opacity:.85}


/* ============================================================
   2. LA DIAGONALE — la limite entre deux sections
   ------------------------------------------------------------
   Une bande de trois carreaux de haut, entièrement posée à 45°.
   Le calque de joints est surdimensionné puis pivoté : en
   tournant, un rectangle laisse des coins vides, on l'étale
   donc bien au-delà de la boîte avant de le faire tourner.
   ============================================================ */
/* ⚠ TROP FAIBLE AU PREMIER JET — mesuré le 02.08.2026 : des joints
   peints en --filet translucide sur --fond-alt, c'est un gris sur un
   gris ; la bande passait pour un espace vide. Le joint d'un sol se
   VOIT, c'est même le premier reproche qu'on fait à un carreleur. On
   le tire de l'encre plutôt que du filet, et la bande gagne en hauteur
   pour qu'on lise deux rangs entiers de diagonale. */
.diagonale{
  display:block;position:relative;width:100%;
  height:calc(var(--carreau) * 2.2);
  background:var(--fond-alt);
  border-top:1px solid var(--filet);
  border-bottom:1px solid var(--filet)}

/* ⚠ UN RECTANGLE QU'ON FAIT TOURNER LAISSE SES COINS VIDES — mesuré le
   02.08.2026 : la diagonale s'arrêtait à 27 % et reprenait à 73 % de la
   largeur, le reste de la bande était nu. Agrandir le calque en
   pourcentages ne suffit pas, parce que le pourcentage se calcule sur
   une boîte plate (1280 × 141). On lui donne donc un CARRÉ plus grand
   que la diagonale de la bande, centré : il couvre à toute largeur.
   Les joints, à 45°. */
.diagonale::before{
  content:"";position:absolute;left:50%;top:50%;
  width:220vw;height:220vw;transform-origin:center;
  background:
    repeating-linear-gradient(90deg,
      color-mix(in oklab,var(--encre) 20%,transparent) 0 var(--joint),
      transparent var(--joint) var(--pas)),
    repeating-linear-gradient(0deg,
      color-mix(in oklab,var(--encre) 20%,transparent) 0 var(--joint),
      transparent var(--joint) var(--pas));
  transform:translate(-50%,-50%) rotate(45deg)}

/* ⚠ IL Y AVAIT ICI DES « CABOCHONS » — retirés le 02.08.2026 après les
   avoir REGARDÉS. Un dégradé conique à un quart de cellule ne peint pas
   un carreau : il peint un quart de la cellule entière, soit un aplat de
   335 px de large, dans une couleur à 30 % de l'accent. Invisible, et
   faux même s'il avait été visible.
   La trame en diagonale se suffit : c'est elle, le geste du métier. Un
   ornement qu'on ne voit pas n'est pas un ornement discret, c'est du
   poids mort. */


/* ============================================================
   3. LA POSE — le sol inachevé, avant le contact
   ------------------------------------------------------------
   Deux rangées pleines, une troisième qui s'arrête, et les
   croisillons laissés en place aux intersections libres. La
   rangée partielle est coupée au MASQUE : la découpe suit donc
   la largeur de l'écran, jamais un nombre de carreaux figé.
   ============================================================ */
.pose{
  display:block;position:relative;width:100%;
  height:calc(var(--carreau) * 1.55);
  background:var(--fond);
  overflow:hidden}

.pose__rang{
  display:block;position:absolute;left:0;right:0;
  height:calc(var(--carreau) * .46);
  background:
    repeating-linear-gradient(90deg,
      var(--carreau-face) 0 var(--carreau),
      transparent var(--carreau) var(--pas));
  border-bottom:var(--joint) solid var(--joint-clair)}

.pose__rang--plein:nth-child(1){bottom:0}
.pose__rang--plein:nth-child(2){bottom:calc(var(--carreau) * .46 + var(--joint))}
/* La rangée du haut s'arrête : le carreleur n'a pas fini sa journée. */
.pose__rang--partiel{
  bottom:calc((var(--carreau) * .46 + var(--joint)) * 2);
  -webkit-mask-image:linear-gradient(90deg,#000 0 54%,transparent 54%);
  mask-image:linear-gradient(90deg,#000 0 54%,transparent 54%)}

/* Les croix de pose, aux angles des carreaux de la rangée du haut. */
.croisillon{
  display:block;position:absolute;
  left:calc(var(--pas) * var(--x) - 8px);
  bottom:calc((var(--carreau) * .46 + var(--joint)) * 2 - 8px);
  width:16px;height:16px;
  background:
    linear-gradient(var(--marque) 0 0) center/2px 16px no-repeat,
    linear-gradient(var(--marque) 0 0) center/16px 2px no-repeat;
  opacity:.55;
  transition:opacity .4s ease,transform .4s ease}
/* Le dernier est encore dans la main : posé de travers. */
.croisillon--pose{transform:rotate(18deg);opacity:.8}


/* ============================================================
   4. LA TRAME PARTOUT — postes, photos, assises
   ------------------------------------------------------------
   Ce qui fait qu'on reconnaît le métier sans lire, ce n'est pas
   la frise : c'est que TOUT sur la page s'aligne au carreau.
   ============================================================ */

/* Le repère du poste : le carré du maçon devient une croix. */
.poste__num::before{
  width:11px;height:11px;background:none;opacity:1;
  background-image:
    linear-gradient(var(--marque) 0 0),
    linear-gradient(var(--marque) 0 0);
  background-size:1.5px 11px,11px 1.5px;
  background-position:center,center;
  background-repeat:no-repeat,no-repeat;
  opacity:.55}
.poste:hover .poste__num::before{opacity:1;transform:rotate(45deg)}

/* Les postes ne se décalent pas : ils s'alignent, et leur
   séparation est un JOINT, pas un filet. */
.poste{border-top:var(--joint) solid var(--joint-clair)}
.poste:first-child{border-top:0}

/* Les trois photos des réalisations sont trois carreaux posés
   côte à côte : l'écart entre elles vaut un joint, et le cadre
   d'accent est à fleur de l'image au lieu d'être déporté. */
.realisations__grille{gap:calc(var(--joint) * 2)}
.cadre::after{inset:0;border-width:var(--joint);opacity:.28}
.cadre--gauche::after{inset:0}
.cadre:hover::after{opacity:.7}

/* L'assise des titres : une rangée de carreaux, pas une barre. */
.assise{
  height:6px;
  background:
    repeating-linear-gradient(90deg,
      var(--marque) 0 14px,transparent 14px calc(14px + var(--joint)),
      var(--filet) calc(14px + var(--joint)) calc(28px + var(--joint)),
      transparent calc(28px + var(--joint)) calc(28px + var(--joint) * 2))}
.entete-section--centre .assise{
  background:
    repeating-linear-gradient(90deg,
      var(--filet) 0 14px,transparent 14px calc(14px + var(--joint)),
      var(--filet) calc(14px + var(--joint)) calc(28px + var(--joint)),
      transparent calc(28px + var(--joint)) calc(28px + var(--joint) * 2));
  position:relative}
.entete-section--centre .assise::after{
  content:"";position:absolute;left:50%;top:0;width:34px;height:6px;
  transform:translateX(-50%);
  background:
    repeating-linear-gradient(90deg,
      var(--marque) 0 14px,transparent 14px calc(14px + var(--joint)),
      var(--marque) calc(14px + var(--joint)) calc(28px + var(--joint)))}

/* Le panneau : son bandeau d'accent devient lui aussi une
   rangée de carreaux. La page entière est calepinée. */
.panneau::before{
  background:
    repeating-linear-gradient(90deg,
      var(--marque) 0 var(--carreau),
      color-mix(in oklab,var(--marque) 72%,var(--nuit)) var(--carreau) calc(var(--carreau) + var(--joint)))}

/* Le nom en tête et en pied : la chasse d'un calepinage, pas
   celle d'un mur. Plus serrée que chez le maçon, jamais en
   capitales étirées — Zilla Slab a déjà la chasse d'un carreau. */
.marque__nom,.pied__nom{letter-spacing:.04em}


/* ============================================================
   5. LE MOUVEMENT
   ------------------------------------------------------------
   ⚠ Le Mac du responsable a « Réduire les animations » ACTIVÉ.
   On REMPLACE, on ne supprime pas : les croisillons apparaissent
   sans se déplacer, et rien ne disparaît.
   ============================================================ */
.croisillon{animation:croisillon-pose .7s ease-out both;animation-delay:calc(var(--x) * .09s)}
@keyframes croisillon-pose{
  from{opacity:0;transform:scale(.4) rotate(-25deg)}
  to  {opacity:.55;transform:none}
}
.croisillon--pose{animation-name:croisillon-pose-travers}
@keyframes croisillon-pose-travers{
  from{opacity:0;transform:scale(.4) rotate(-25deg)}
  to  {opacity:.8;transform:rotate(18deg)}
}

@media (prefers-reduced-motion:reduce){
  /* Le fondu reste, le déplacement part. Aucune croix ne manque. */
  .croisillon{animation:croisillon-fondu .5s ease-out both !important}
  .croisillon--pose{animation:croisillon-fondu-travers .5s ease-out both !important}
  @keyframes croisillon-fondu{from{opacity:0}to{opacity:.55}}
  @keyframes croisillon-fondu-travers{from{opacity:0}to{opacity:.8;transform:rotate(18deg)}}
  .poste:hover .poste__num::before{transform:none}
}