/* ============================================================ 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 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 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 ) 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} /* ===== menuiserie — 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:#f6f0e6; --encre-douce:#b6a996; --fond:#151009; --fond-alt:#1e1710; --carte:#261e15; --marque:#d99244; --marque-fonce:#eaa95f; --filet:#3b2f21; --nuit:#0f0b06; --creme:#f6f0e6; --creme-doux:#c2b6a6; --laiton:#c99a55; --laiton-clair:#dcb47c; --liseret:rgba(255,255,255,.07); --ombre-panneau:rgba(0,0,0,.75); --ombre-photo:rgba(0,0,0,.85); --halo-savoir:color-mix(in srgb,var(--laiton) 20%,transparent); --halo-contact:color-mix(in srgb,var(--marque) 14%,transparent); --texte-bouton:#20140a; --ruban-fond:var(--nuit); --ruban-texte:var(--laiton-clair); --police-titre:'PoliceTitre',"Palatino Linotype",Palatino,Georgia,serif; --police-libelle:'PoliceLibelle',"Avenir Next",Avenir,"Century Gothic","Segoe UI",system-ui,sans-serif; } /* ===== menuiserie — 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. */ /* ============================================================ MENUISERIE ET ÉBÉNISTERIE — SIGNATURE : L'ASSEMBLAGE ------------------------------------------------------------ Forme : la queue d'aronde, le trapèze qui s'emboîte. Matière : le bois massif DESSINÉ — fibre longue, nœud, bout de fil. Jamais une photo de bois en fond. Rythme : l'emboîtement. Deux pièces qui se rejoignent sans clou, et le chant qui les borde. Ce n'est pas une couche posée sur le tronc : c'est la CHARPENTE qui change. Une page de menuisier n'est pas une pile de blocs empilés, c'est un MEUBLE ASSEMBLÉ — les sections s'emboîtent, les panneaux ont un cadre et un filet, les photos ont un chant plaqué, les angles sont adoucis parce qu'ils ont été passés à la râpe. Les cinq gestes, du plus grand au plus petit : 1. la limite entre deux sections EST une queue d'aronde (crochet du milieu) ou une enture chevillée (crochet du contact) ; 2. le bandeau porte la fibre du bois et un bout de fil ; 3. l'assise devient un CHANT PLAQUÉ — le filet du chant, et sous lui la bande de placage en retrait ; elle revient SIX fois dans la page, c'est elle qui signe tout le reste ; 4. les panneaux et les photos prennent le double filet du chant plaqué, et le rayon passe de 4 px (bâti) à 12 px (raboté) ; 5. les blocs s'emboîtent : la photo des travaux entre dans le panneau, les réalisations sont jointives et décalées. Aucune couleur en dur : tout vient des variables de palette.json. Aucun currentColor : le test du squelette efface `color`, un tracé en currentColor y disparaîtrait — fill et stroke sont posés ici. ============================================================ */ /* ---------- a) LE CROCHET DU BANDEAU EST UN CALQUE ---------- .hero est en display:flex — sans position absolue, la signature deviendrait un item de la ligne et écraserait le panneau de texte. Et jamais de z-index ≥ 2 ici : .hero__bande est à 2 et porte le texte. */ .signature--hero{position:absolute;inset:0;overflow:hidden;pointer-events:none} .signature--hero svg{width:100%;height:100%;display:block} /* ---------- LA GÉOMÉTRIE DU MÉTIER ---------- Uniquement des variables de FORME : la palette n'est pas touchée. --aronde-grand est le profil de la queue d'aronde qui tient la photo d'équipe, en masque monochrome : un masque n'a pas de couleur, la couleur reste celle du fond de l'élément — donc elle suit la palette du métier. Trapèze qui S'ÉVASE vers le bas : c'est cet évasement qui interdit à l'assemblage de s'ouvrir, et c'est lui qu'on reconnaît sans savoir le nommer. */ :root{ --rayon:12px; /* arêtes passées à la râpe, plus le bâti net à 4 px */ --rayon-bouton:13px; /* le bouton n'est plus une pilule : un tasseau raboté */ --assise:6px; /* le chant : plus épais que le filet du tronc */ --hauteur-bandeau:70svh; --dent-grand:26px; /* hauteur de la rangée pleine largeur de l'équipe */ --chant:6px; /* retrait du second filet — le chant plaqué */ /* ⚠ LE MÊME RAPPORT que la grande queue d'aronde du milieu de page — mesuré sur capture le 01.08.2026. Ce qui fait lire « queue d'aronde » plutôt que « fanion », ce n'est pas la taille, c'est le RAPPORT profondeur / pas : 0,18 sur la bande du milieu. Le module ci-dessous reprend ses proportions exactes : pas 100 %, pied 60 %, collet 38 %, profondeur 18 %. */ --aronde-grand:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 26'%3E%3Cpath d='M44 0h52l16 26H28z'/%3E%3C/svg%3E"); } /* ---------- LE BANDEAU : LE FIL DU BOIS ---------- La fibre longue traverse toute la largeur et s'écarte autour de deux nœuds ; le bout de fil montre la même planche en coupe. Les valeurs d'opacité sont volontairement basses : la trame passe SOUS le panneau de verre, les contrastes mesurés du :root doivent rester vrais. */ .sig-hero .fibre{fill:none;stroke:var(--creme);stroke-width:1.5;opacity:.15; stroke-linecap:round} .sig-hero .fibre--fort{stroke-width:2.8;opacity:.25} .sig-hero .sig-bout__chair{fill:var(--nuit);opacity:.42} .sig-hero .sig-cerne{fill:none;stroke:var(--laiton);stroke-width:1.7;opacity:.28} .sig-hero .sig-cerne--fort{stroke-width:3.2;opacity:.4} .sig-hero .sig-coeur{fill:var(--laiton);opacity:.55} .sig-hero .sig-noeud__chair{fill:var(--nuit);opacity:.5} /* La trame du tronc était faite de lignes D'APLOMB — de la maçonnerie. Ici elle passe à l'horizontale, fine et d'écart irrégulier : du fil. */ .hero__trame{ background:repeating-linear-gradient(0deg, color-mix(in srgb,var(--creme) 9%,transparent) 0 1px,transparent 1px 11px, color-mix(in srgb,var(--creme) 5%,transparent) 11px 12px,transparent 12px 27px); -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%); } /* Le panneau de verre devient un PANNEAU DE MENUISERIE : le montant plein à gauche, un filet intérieur (la moulure), et l'angle opposé CHANFREINÉ — l'arête cassée au rabot. Le clip-path emporte l'ombre portée avec lui : sur une photo sombre elle ne se voyait pas. */ .hero__verre{ position:relative; border-radius:0; border-left:var(--assise) solid var(--marque); clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%); } .hero__verre::after{content:"";position:absolute;inset:9px;pointer-events:none; border:1px solid color-mix(in srgb,var(--laiton) 36%,transparent)} /* ---------- L'ASSISE DEVIENT UN CHANT PLAQUÉ ---------- Première version : une rangée de queues d'aronde. Refusée par le responsable le 01.08.2026 — « les petits trapèzes m'embêtent ». La queue d'aronde reste là où elle a du sens (l'assemblage pleine largeur du milieu de page, la rangée qui tient la photo d'équipe) ; sous les titres, elle revenait six fois et devenait une frise. À la place, le geste le plus courant de l'atelier, et celui que TOUTE cette signature parle déjà (panneaux, photos, boutons) : le CHANT PLAQUÉ. Le filet du chant en haut, et sous lui la bande de placage, plus fine, plus claire, en retrait de var(--chant) des deux bords — exactement le retrait de `.panneau::after` et de `.cadre::before`. Le dégradé de fond n'est PAS touché : il vient du tronc, il porte le segment d'accent, et il change tout seul de teinte dans la bande de nuit et au pied (laiton). On ne fait que le poser en haut de la boîte (background-size) et le reprendre en dessous, hérité tel quel — donc la variante centrée reste centrée sans une ligne de plus, son dégradé étant calculé en pourcentage de sa propre boîte. ⚠ MESURÉ AU PIXEL le 01.08.2026, et c'est le piège : le tronc réécrit ce dégradé en RACCOURCI (`background:`) sur trois sélecteurs plus spécifiques — `.entete-section--centre .assise`, `.savoir .assise`, `.assise--pied`. Un raccourci remet `background-size` à sa valeur initiale : avec le seul sélecteur `.assise`, quatre assises sur six redevenaient un pavé plein de 7 px. Les quatre sélecteurs sont donc repris ici, à spécificité égale et plus bas dans la feuille. */ .assise, .entete-section--centre .assise, .savoir .assise, .assise--pied{ position:relative; height:7px; /* 3 px de filet + 3 px de vide + 1 px de placage */ background-repeat:no-repeat; background-size:100% 3px; background-position:left top; } .assise::after{ content:"";position:absolute;left:var(--chant);right:var(--chant); top:6px;height:1px;pointer-events:none; background:inherit;background-size:100% 1px;opacity:.5; } /* ---------- LES DEUX ASSEMBLAGES PLEINE LARGEUR ---------- width:100%, jamais 100vw, overflow:hidden, hauteur fixée en CSS et preserveAspectRatio="slice" côté SVG : le trapèze garde son angle à 360 comme à 1280, et rien ne peut déborder. La hauteur est calée pour que le profil ne soit jamais rogné : il faut hauteur ≥ largeur × (hauteur de viewBox / 1200). */ .signature--milieu,.signature--contact{ display:block;width:100%;overflow:hidden;line-height:0;background:var(--fond)} .signature--milieu{height:clamp(58px,8.2vw,112px)} /* viewBox 1200×92 */ .signature--contact{height:clamp(48px,6.8vw,92px)} /* viewBox 1200×76 */ .signature--milieu svg,.signature--contact svg{display:block;width:100%;height:100%} .sig-joint__piece{fill:var(--fond-alt)} .sig-joint__trait{fill:none;stroke:var(--marque);stroke-width:2;opacity:.55; stroke-linejoin:round;stroke-linecap:round} .sig-joint__chant{fill:none;stroke:var(--filet);stroke-width:1.4} .sig-cheville__anneau{fill:none;stroke:var(--marque);stroke-width:1.8;opacity:.62} .sig-cheville__coeur{fill:var(--marque);opacity:.75} /* Les deux sections que les bandes viennent border doivent avoir EXACTEMENT le fond de la pièce du bas, sinon l'assemblage montre un joint ouvert. Au passage, ces deux dégradés du tronc étaient écrits en rgba() figé (la brique et le laiton du maçon) : ils repassent par les variables, donc par la palette noyer. */ .contact{background:var(--fond-alt)} .savoir{background:radial-gradient(120% 85% at 10% 0%, color-mix(in srgb,var(--laiton) 16%,transparent),transparent 60%),var(--nuit)} /* ---------- LE PANNEAU DEVIENT UN CADRE À PANNEAU ---------- La forme de base de l'ébéniste : un bâti, et dedans un panneau tenu par un filet. On ajoute donc le SECOND filet — celui du tronc était seul — et on adoucit les angles. La traverse haute reste pleine : c'est elle qui tient le tout. */ .panneau{border-radius:var(--rayon)} .panneau::before{border-radius:var(--rayon) var(--rayon) 0 0} .panneau::after{content:"";position:absolute;inset:var(--chant);pointer-events:none; border:1px solid color-mix(in oklab,var(--marque) 26%,transparent); border-radius:calc(var(--rayon) - 4px)} /* ---------- LES PHOTOS PRENNENT LE CHANT PLAQUÉ ---------- Le tronc bordait ses photos d'un filet DÉCALÉ en diagonale. Ici, deux filets concentriques posés sur le bord de l'image : c'est le placage de chant, la bande de bois collée sur la tranche d'un panneau. Les trois sélecteurs sont repris ensemble parce que le tronc surcharge `.cadre--gauche::after` et `.realisations__haute::after` — sans eux, l'ancien filet diagonal reviendrait sur quatre photos sur six. */ .cadre img{border-radius:var(--rayon)} .cadre::after,.cadre--gauche::after,.realisations__haute::after{ inset:0;border:1px solid var(--marque);opacity:.55;border-radius:var(--rayon)} /* ⚠ 02.08.2026 — rien ne se pose sur une photo. */ .cadre::before{content:"";position:absolute;inset:calc(var(--chant) * -1 - 5px);pointer-events:none; border:1px solid var(--laiton);opacity:.6; border-radius:calc(var(--rayon) - 4px);transition:opacity .35s ease} .cadre:hover::after{opacity:.95} .cadre:hover::before{opacity:.9} /* ---------- LES POSTES : LE TOURILLON ET LE DOUBLE FILET ---------- Le carré plein du tronc (le module du maçon) devient un TOURILLON vu en bout : un rond et son anneau. Et la séparation entre deux postes passe en double filet, comme un chant plaqué. */ .poste{position:relative} .poste::before{content:"";position:absolute;top:3px;left:0;right:0;height:1px; pointer-events:none;background:color-mix(in srgb,var(--filet) 60%,transparent)} .poste:first-child::before{display:none} .poste__num{padding-left:1.4rem} .poste__num::before{ width:14px;height:14px;top:.5em;border-radius:50%;opacity:.62; background:radial-gradient(circle at 50% 50%, var(--marque) 0 2.6px,transparent 2.6px 4.4px, var(--marque) 4.4px 6px,transparent 6px)} .poste:hover .poste__num::before{opacity:1;transform:scale(1.14)} /* ---------- LE BOUTON : UN TASSEAU, PLUS UNE PILULE ---------- Toujours PLEIN (jamais de ghost transparent), toujours ≥ 46 px de haut : on ne touche ni à la couleur ni à la cible. Ce qui change, c'est la forme — angles adoucis au lieu du demi-cercle — et le liseré intérieur, qui est le chant plaqué du reste de la page. */ .bouton{position:relative} .bouton--plein::after,.bouton--wa::after{content:"";position:absolute;inset:4px; pointer-events:none;border:1px solid color-mix(in srgb,var(--creme) 32%,transparent); border-radius:calc(var(--rayon-bouton) - 4px)} /* La barre collante reçoit elle aussi son chant : le filet, puis un second trait plus chaud 2 px dessous. */ .entete{box-shadow:0 3px 0 -2px color-mix(in srgb,var(--marque) 26%,transparent)} /* ---------- LES BLOCS S'EMBOÎTENT ---------- C'est ici que la mise en page cesse d'être une pile. */ /* LES TRAVAUX — la photo ENTRE dans le panneau au lieu de se poser à côté. Le panneau reçoit en échange une marge droite plus large : la photo mord dans le vide, jamais dans le texte. La marge négative est plus étroite que la colonne, donc elle ne peut pas faire déborder. */ @media (min-width:62rem){ .travaux__grille{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); column-gap:0;align-items:stretch} .travaux__grille .panneau{position:relative;z-index:1; padding-right:clamp(4rem,7vw,5.6rem)} .travaux__visuel{position:relative;z-index:2; margin-top:clamp(3rem,7vw,5.5rem); margin-left:clamp(-4.4rem,-3.4vw,-2.4rem)} } /* NOS RÉALISATIONS — trois panneaux COLLÉS, pas trois vignettes espacées : un joint de quelques pixels entre les pièces, et la verticale descend dans l'encoche laissée par les deux autres. Aucune ligne de tête commune. Le décalage se fait en `translate` (pas en marge) : il ne change aucune hauteur de rangée, donc il ne peut rien faire déborder, et il reste bien en deçà du bas de section. */ .realisations__grille{ row-gap:clamp(.5rem,1.4vw,.9rem);column-gap:clamp(3px,.45vw,6px)} @media (min-width:52rem){ .realisations__grille{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)} .realisations__haute{translate:0 clamp(2rem,4vw,3.2rem)} } /* LE SAVOIR-FAIRE — le geste et la matière se rejoignent sur un joint fin plutôt que de flotter à distance. */ @media (min-width:48rem){ .savoir__bande{column-gap:clamp(4px,.6vw,8px)} } /* L'ÉQUIPE — la seule photo qui touche les deux bords est TENUE par une rangée de queues d'aronde plein format : la bande n'est pas posée sur la page, elle y est assemblée. */ .equipe__photo{position:relative;border-top:2px solid var(--marque)} /* ⚠ LA RANGÉE DE QUEUES D'ARONDE AU-DESSUS DE LA PHOTO D'ÉQUIPE : RETIRÉE. Elle n'était pas dans la liste du responsable — il n'avait montré que les deux sous les surtitres — mais en la regardant elle fait exactement les deux défauts qu'il a signalés dans la même phrase : c'est un trapèze sous un titre, ET c'est un ornement posé SUR la photo, qui la mord sur 26 px de haut. Même famille que les colliers de cuivre du chauffage. L'assemblage garde sa grande découpe pleine largeur, qui a la place d'être lue et ne recouvre rien. */ /* ---------- MOUVEMENT RÉDUIT : ON REMPLACE, ON NE SUPPRIME PAS ---------- Ce fichier est ajouté APRÈS le bloc de mouvement réduit du tronc : tout ce qu'il redéclare échappe à ce bloc. Il faut donc le réaffirmer ici, sur les mêmes sélecteurs. Le seul mouvement introduit par cette signature est le grossissement du tourillon au survol : il devient un remplissage, sur la même durée. Rien ne disparaît, rien n'apparaît d'un coup — la fibre, le bout de fil, les deux assemblages et les six chants plaqués sont dessinés en dur et ne dépendent d'aucune animation. L'assise garde le déroulé du tronc (scaleX depuis son origine) : je ne redéclare ici ni `transform` ni `transition` sur elle, donc le remplacement par un fondu du tronc s'applique toujours. Il est repris à l'identique ci-dessous pour qu'il ne dépende plus de l'ordre des feuilles, et le placage — un ::after, donc emporté par la boîte de son parent — suit le même fondu sans règle propre. */ @media (prefers-reduced-motion:reduce){ .js .assise.reveal{transform:none;transition:opacity .8s ease .1s} .poste:hover .poste__num::before{transform:none;opacity:1} .cadre::before{transition:opacity .35s ease} }