/* ============================================================ 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} /* ===== serrurerie — 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:#15181b; --encre-douce:#434b51; --fond:#f6f7f8; --fond-alt:#d8dde1; --carte:#ffffff; --marque:#962d15; --marque-fonce:#72210f; --filet:#c0c7cd; --nuit:#101315; --creme:#eceff1; --creme-doux:#b0b8be; --laiton:#c68a4e; --laiton-clair:#dba775; --police-titre:'PoliceTitre',"Arial Narrow","Helvetica Neue Condensed",Impact,sans-serif; --police-libelle:'PoliceLibelle',"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif; } /* ===== serrurerie — 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. */ /* ============================================================ SERRURERIE — SIGNATURE DU MÉTIER : LE PROFILÉ ET LA FERMETURE ------------------------------------------------------------ FORME la barre : section constante, angles francs, bouts coupés en biais. Aucun rayon nulle part (--rayon:0), sauf le bouton d'appel qui reste une pilule (demande du responsable). MATIÈRE l'acier : le cordon de soudure, le rivet, la tête de boulon, la platine vissée. RYTHME LE DAMIER : une section sur deux est NOIRE. Bandeau nuit, travaux blanc, réalisations nuit, savoir-faire blanc, équipe nuit, contact blanc, pied nuit. Le tronc, lui, est clair du haut en bas avec deux bandes sombres — c'est ce renversement qui signe la page avant même le premier ornement. MOTIF LA FERMETURE : anneau et panneton de clé (l'assise, ×6), trou de serrure (les numéros de poste, ×4), gâche à mortaise (les séparateurs de postes), boîtier de serrure sur le portail, rosace de cylindre au milieu, cadenas sur la platine. Six formes, chacune à UN endroit structurel — pas d'icônes semées sur la page. Le registre est la DURETÉ : filets épais (3 à 6 px là où le tronc met 1 px), rayons nuls, sections coupées en biais. Aucune couleur ni police en dur : tout dérive des variables du métier. Les seuls #000 de ce fichier sont des MASQUES (canal alpha), jamais une couleur visible — même usage que dans le tronc. CONTRASTES DU DAMIER — calculés à la main, paire par paire, sur la palette du métier (encre #1c1f22 · fond #f5f6f7 · fond-alt #e0e3e6 · nuit #15181b · creme #eceff1 · creme-doux #b0b8be · laiton #c68a4e · marque #a03118). ⚠ outils/contraste.mjs ne lit que le :root : il ne voit AUCUNE de ces paires, puisque c'est ce fichier — et lui seul — qui met du texte creme et laiton sur les sections réalisations et équipe, et du texte d'encre sur le savoir-faire. Personne d'autre ne les mesurera : À RECALCULER À LA MAIN si palette.json bouge. SECTIONS NOIRES (réalisations, équipe, pied) creme / nuit 15,43 laiton / nuit 6,06 creme-doux / nuit 8,86 laiton-clair / nuit 8,31 SECTIONS BLANCHES (travaux, savoir-faire, contact) encre / fond 15,30 marque / fond 6,59 encre-douce / fond 6,91 encre / carte 16,56 marque / fond-alt 5,53 encre / fond-alt 12,85 Le plus bas de tout ce que ce fichier recolore : 6,06 (surtitre laiton sur nuit). Plancher AA = 4,50. ============================================================ */ :root{ /* --- GÉOMÉTRIE : c'est elle qui signe, pas un ornement posé dessus. --- */ --rayon:0; /* angles francs partout : c'est de l'acier coupé */ --assise:6px; /* les bandeaux d'accent passent de 4 à 6 px */ /* --- ACIERS : dérivés de l'encre et du fond du métier. --- */ --sig-acier:color-mix(in oklab,var(--encre) 92%,var(--fond)); --sig-acier-moyen:color-mix(in oklab,var(--encre) 60%,var(--fond)); --sig-acier-clair:color-mix(in oklab,var(--encre) 30%,var(--fond)); /* L'acier vu SUR une section noire : le gris moyen des sections claires y disparaîtrait dans le fond. */ --sig-acier-nuit:color-mix(in oklab,var(--creme) 22%,var(--nuit)); --sig-soudure:color-mix(in oklab,var(--marque) 74%,var(--encre)); /* Le cordon est un BOURRELET D'ACIER, pas un liseré de couleur : mesuré en capture le 01.08.2026, --sig-soudure pur y faisait une ligne rouge vif qui se lisait comme un ornement et non comme une soudure. */ --sig-cordon:color-mix(in oklab,var(--marque) 38%,var(--sig-acier)); --sig-barre:3px; /* le filet courant, épaissi */ --sig-traverse:6px; /* les traverses soudées de la galerie */ --sig-coupe:clamp(26px,4.6vw,58px); /* la coupe en biais des sections */ --sig-corniere:var(--marque); /* les équerres d'angle des photos */ /* --- LE DAMIER : trois variables, et chaque section dit la sienne. --- --sig-cle le trait du dessin de clé / de serrure --sig-filet le filet qui prolonge la lame --sig-mortaise le fond que l'on voit À TRAVERS un trou (l'anneau de la clé, la mortaise de la gâche). C'est LUI qui doit suivre le damier, sinon un trou se remplit de blanc au milieu d'un bloc noir. */ --sig-cle:var(--marque); --sig-filet:var(--filet); --sig-mortaise:var(--carte); } /* ============================================================ 1. LE BANDEAU — une grille, un portail, et sa serrure ============================================================ */ /* ⚠ OBLIGATOIRE : .hero est en flex ; sans calque absolu ce bloc deviendrait un item de la ligne et écraserait le panneau de texte. Jamais de z-index ≥ 2 ici : .hero__bande est à 2 et porte le texte. */ .signature--hero{position:absolute;inset:0;overflow:hidden;pointer-events:none} .signature--hero svg{width:100%;height:100%;display:block} /* La section elle-même est une plaque coupée : l'angle bas-droit est chanfreiné. C'est la découpe qui remplace la ligne droite du tronc. */ .hero{clip-path:polygon(0 0,100% 0, 100% calc(100% - var(--sig-coupe)),calc(100% - var(--sig-coupe)) 100%,0 100%)} /* La trame du tronc — des hairlines — devient une VRAIE grille : barreaux d'aplomb épais et traverses espacées. Fond de scène, volontairement faible : elle passe sous le panneau de texte. */ .hero__trame{ background: repeating-linear-gradient(90deg, color-mix(in oklab,var(--creme) 14%,transparent) 0 3px,transparent 3px 46px), repeating-linear-gradient(180deg, color-mix(in oklab,var(--creme) 10%,transparent) 0 3px,transparent 3px 138px); -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 86%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 86%,transparent 100%); } /* Le portail : un panneau de grille encadré d'un profilé épais, calé sur le bord droit de la colonne de contenu. */ .sig-portail{position:absolute;inset:0;max-width:var(--largeur);margin-inline:auto; padding-inline:var(--gouttiere)} .sig-portail__cadre{ position:absolute;right:var(--gouttiere);top:9%;bottom:9%;width:min(38%,24rem); border:5px solid color-mix(in oklab,var(--laiton) 62%,transparent); background-color:color-mix(in oklab,var(--creme) 7%,transparent); /* barreaux verticaux + traverses + point de soudure à l'intersection */ background-image: radial-gradient(7px 5px at 2.5px 2.5px, color-mix(in oklab,var(--laiton) 72%,transparent) 0 94%,transparent 95%), linear-gradient(90deg,color-mix(in oklab,var(--creme) 30%,transparent) 0 5px,transparent 5px), linear-gradient(180deg,color-mix(in oklab,var(--creme) 26%,transparent) 0 5px,transparent 5px); background-size:52px 52px; } /* Les quatre boulons du cadre. */ .sig-portail__cadre::after{content:"";position:absolute;inset:7px; background-repeat:no-repeat; background-image: radial-gradient(circle 5px at 5px 5px, color-mix(in oklab,var(--laiton) 85%,transparent) 0 94%,transparent 95%), radial-gradient(circle 5px at calc(100% - 5px) 5px, color-mix(in oklab,var(--laiton) 85%,transparent) 0 94%,transparent 95%), radial-gradient(circle 5px at 5px calc(100% - 5px), color-mix(in oklab,var(--laiton) 85%,transparent) 0 94%,transparent 95%), radial-gradient(circle 5px at calc(100% - 5px) calc(100% - 5px), color-mix(in oklab,var(--laiton) 85%,transparent) 0 94%,transparent 95%); } /* LA SERRURE DU PORTAIL — le boîtier posé à cheval sur le montant, avec son trou de serrure. C'est la première fois qu'on dit FERMETURE, et c'est au premier écran. Une seule pièce, petite : on ne surcharge pas une photo. */ .sig-portail__serrure{ position:absolute;left:-15px;top:50%;transform:translateY(-50%); width:30px;height:clamp(52px,28%,88px); background-color:color-mix(in oklab,var(--laiton) 78%,var(--nuit)); background-repeat:no-repeat; background-image: radial-gradient(circle 6px at 6px 6px,var(--nuit) 0 94%,transparent 95%), linear-gradient(var(--nuit),var(--nuit)); background-size:12px 12px,7px 12px; background-position:center calc(50% - 6px),center calc(50% + 5px); /* le boîtier est un bout de profilé : ses deux angles de gauche sont coupés */ clip-path:polygon(7px 0,100% 0,100% 100%,7px 100%,0 calc(100% - 7px),0 7px); } /* Sous 62 rem le panneau de texte prend toute la largeur : le portail remonte en haut du bandeau, là où il reste de la place. */ @media (max-width:61.99rem){ .sig-portail__cadre{left:var(--gouttiere);right:var(--gouttiere);width:auto; top:0;bottom:auto;height:clamp(110px,26%,230px)} .sig-portail__serrure{height:clamp(44px,52%,72px)} } /* Le montant du panneau de verre devient un PROFILÉ EN L : un montant épais à gauche, et son aile qui repart vers la droite en pied. */ .hero__verre{ border:2px solid color-mix(in oklab,var(--creme) 16%,transparent); border-left:10px solid var(--marque); position:relative; } .hero__verre::after{content:"";position:absolute;left:-10px;bottom:-10px; width:min(11rem,55%);height:10px;background:var(--marque)} /* ⚠ Mesuré en capture le 01.08.2026 : à 46 rem, le panneau de texte passait par-dessus le montant gauche du portail et lui mangeait 64 px. On resserre le panneau plutôt que de rétrécir le portail — le bandeau garde ses deux objets côte à côte, séparés. */ @media (min-width:62rem){.hero__verre{max-width:40rem}} /* ============================================================ 2. LE DAMIER — NOIR, BLANC, NOIR, BLANC ------------------------------------------------------------ ⚠ Recolorer un fond ne suffit pas : outils/contraste.mjs ne lit que le :root et ne verrait jamais un texte gris resté sur une section devenue noire. Chaque section basculée est donc recolorée À LA MAIN ci-dessous, ligne par ligne — titre, surtitre, tenon, filet, cornière, contour de focus — avec les couleurs de nuit du tronc, dont les contrastes sont calculés en tête de fichier. ============================================================ */ /* --- LES SECTIONS QUI BASCULENT EN NOIR --- */ .realisations,.equipe{ background:var(--nuit); color:var(--creme); /* 15,43 */ --sig-corniere:var(--laiton); --sig-cle:var(--laiton); /* 6,06 */ --sig-filet:color-mix(in oklab,var(--laiton) 34%,transparent); --sig-mortaise:var(--nuit); /* Même coupe que le bandeau : un bloc d'acier tronçonné aux deux bouts. Les angles coupés laissent voir le blanc de la page — c'est la coupe qui rend le damier net au lieu de le rendre lourd. */ clip-path:polygon(0 var(--sig-coupe),var(--sig-coupe) 0,100% 0, 100% calc(100% - var(--sig-coupe)),calc(100% - var(--sig-coupe)) 100%,0 100%); } .realisations h2,.equipe h2{color:var(--creme)} /* 15,43 */ .realisations .sur,.equipe .sur{color:var(--laiton)} /* 6,06 */ .realisations .sur::before,.equipe .sur::before{background:var(--laiton)} .realisations :focus-visible,.equipe :focus-visible{outline-color:var(--laiton)} /* --- LE SAVOIR-FAIRE REPASSE EN BLANC --- Le tronc en faisait sa seule bande de nuit. Dans le damier c'est son tour d'être clair : sans ça, réalisations et savoir-faire feraient deux noirs collés et le rythme casserait au milieu de la page. */ .savoir{ background:var(--fond); color:var(--encre); /* 15,30 */ --sig-corniere:var(--marque); --sig-cle:var(--marque); /* 6,59 */ --sig-filet:var(--filet); --sig-mortaise:var(--fond); clip-path:none; /* la coupe appartient désormais aux blocs noirs */ } .savoir h2{color:var(--encre)} /* 15,30 */ .savoir .sur{color:var(--marque)} /* 6,59 */ .savoir .sur::before{background:var(--marque)} .savoir :focus-visible{outline-color:var(--marque)} /* L'ombre portée du tronc est calibrée pour un fond de nuit : sur blanc elle vire au trou noir. On la rend à l'encre, plus douce. */ .savoir .cadre:hover img{ box-shadow:0 30px 56px -30px color-mix(in oklab,var(--encre) 55%,transparent)} /* --- LE CONTACT : côté blanc, franc, sans voile gris --- */ .contact{background:var(--fond)} /* --- LE PIED : côté noir, comme le bandeau. La boucle se ferme. --- */ .pied{--sig-cle:var(--laiton);--sig-filet:color-mix(in oklab,var(--laiton) 34%,transparent); --sig-mortaise:var(--nuit)} /* ============================================================ 3. LES ÉLÉMENTS RÉPÉTÉS — ils signent toute la page d'un coup ============================================================ */ /* L'ASSISE (×6) : LA CLÉ, posée sur la ligne de niveau. Anneau, tige, et un PANNETON entaillé au bout — puis le filet qui prolonge la tige jusqu'à la fin de la ligne. ⚠ Premier essai en capture (01.08.2026) : le panneton était fait de deux petites dents de 7×4 px sous la tige. À l'écran elles se lisaient comme deux points détachés, pas comme une clé. Le panneton est donc devenu UNE pièce pleine, entaillée d'une encoche — c'est la forme qui se reconnaît, pas le détail. ⚠ Tout est en COUCHES DE FOND : rien en `color`, aucun `currentColor` — le dessin doit survivre au test du squelette, qui rend toute couleur de texte transparente. ⚠ La liste de sélecteurs reprend `.entete-section--centre .assise`, `.savoir .assise` et `.assise--pied` : le tronc leur applique un raccourci `background` à spécificité 0,2,0 qui effacerait mes couches si je ne les redéclarais qu'en `.assise`. */ .assise, .entete-section--centre .assise, .savoir .assise, .assise--pied{ display:block;position:relative;height:18px;width:min(214px,100%); margin-top:.1rem;border-radius:0;transform-origin:left; background:none;background-repeat:no-repeat; background-image: linear-gradient(var(--sig-mortaise),var(--sig-mortaise)), /* l'encoche */ linear-gradient(var(--sig-cle),var(--sig-cle)), /* la tige */ linear-gradient(var(--sig-cle),var(--sig-cle)), /* le panneton */ /* l'anneau : son intérieur est peint en --sig-mortaise, c'est lui qui perce le filet et fait un vrai trou et non un disque plein */ radial-gradient(circle 8px at 8px 8px, var(--sig-mortaise) 0 3.4px,var(--sig-cle) 4px 7.4px,transparent 7.9px), linear-gradient(var(--sig-filet),var(--sig-filet)); /* le filet */ background-size:6px 6px,58px 6px,17px 10px,16px 16px,100% 3px; background-position: left 60px top 12px,left 13px center, left 54px top 8px,left 0 center,left center; } /* Les cinq assises centrées : la même clé, recentrée couche par couche. ⚠ PIÈGE MESURÉ le 01.08.2026 : dans la syntaxe à quatre valeurs (`left `), un pourcentage ne se résout PAS sur la largeur du bloc mais sur « largeur du bloc moins largeur de la couche ». Chaque couche se décalait donc de sa demi-largeur, et le panneton s'est retrouvé détaché de la tige — vu en capture. La position réelle vaut `centre - taille/2 + X` : les X ci-dessous compensent la demi-taille de leur propre couche, et le résultat ne dépend plus de la largeur du bloc. anneau 16 px → centre - 35 tige 58 px → centre - 22 panneton 17 px → centre + 19 encoche 6 px → centre + 25 */ .entete-section--centre .assise, .savoir .assise, .assise--pied{ margin-inline:auto;transform-origin:center; background-position: left calc(50% + 28px) top 12px,left calc(50% + 7px) center, left calc(50% + 27.5px) top 8px,left calc(50% - 27px) center, left center; } /* LE SURTITRE (×5) : un PÊNE d'acier — barre pleine, nez coupé en biais, comme un pêne demi-tour sorti de sa têtière. */ .sur::before{content:"";display:inline-block;width:26px;height:4px; margin-right:.6rem;vertical-align:.22em;background:var(--marque); clip-path:polygon(0 0,100% 0,calc(100% - 4px) 100%,0 100%)} /* LES POSTES (×4) : le repère carré du tronc devient un TROU DE SERRURE — la rondelle du canon et la lumière de la clé, en une seule pièce. */ .poste__num{padding-left:1.55rem} .poste__num::before{ left:0;top:.46em;width:14px;height:17px;opacity:.6; background:none;background-repeat:no-repeat;clip-path:none;border-radius:0; background-image: radial-gradient(circle 5.5px at 5.5px 5.5px,var(--marque) 0 94%,transparent 95%), linear-gradient(var(--marque),var(--marque)); background-size:11px 11px,6px 9px; background-position:left 1.5px top 0,left 4px bottom 0; } .poste:hover .poste__num::before{opacity:1} /* LE SÉPARATEUR DE POSTES (×3) : la traverse du tronc reçoit une GÂCHE — une plaque d'acier percée de sa mortaise, celle où le pêne vient se loger. La mortaise est peinte en --sig-mortaise : elle montre vraiment le fond, elle ne le simule pas. */ .poste{ border-top:0;background-repeat:no-repeat; background-image: linear-gradient(var(--sig-mortaise),var(--sig-mortaise)), /* la mortaise */ linear-gradient(var(--sig-acier-moyen),var(--sig-acier-moyen)), /* la plaque */ linear-gradient(var(--filet),var(--filet)); /* la traverse */ background-size:24px 4px,56px 9px,100% var(--sig-barre); background-position:left 38px top 3px,left 22px top 0,left top; } .poste:first-child{background-image:none;border-top:0} /* LES CADRES PHOTO (×6) : le filet décalé du tronc devient QUATRE CORNIÈRES d'angle épaisses, avec un bourrelet de soudure à la jonction. inset:-9px reste sous la gouttière minimale (16px) : aucun débordement. */ .cadre::after{ content:"";position:absolute;inset:-9px;pointer-events:none; border:0;border-radius:0;opacity:.8;background-repeat:no-repeat; background-image: /* les quatre bourrelets de soudure, posés sur les jonctions */ radial-gradient(circle 5px at 5px 5px,var(--sig-soudure) 0 94%,transparent 95%), radial-gradient(circle 5px at 5px 5px,var(--sig-soudure) 0 94%,transparent 95%), radial-gradient(circle 5px at 5px 5px,var(--sig-soudure) 0 94%,transparent 95%), radial-gradient(circle 5px at 5px 5px,var(--sig-soudure) 0 94%,transparent 95%), /* les quatre équerres : une branche horizontale + une verticale */ linear-gradient(var(--sig-corniere),var(--sig-corniere)), linear-gradient(var(--sig-corniere),var(--sig-corniere)), linear-gradient(var(--sig-corniere),var(--sig-corniere)), linear-gradient(var(--sig-corniere),var(--sig-corniere)), linear-gradient(var(--sig-corniere),var(--sig-corniere)), linear-gradient(var(--sig-corniere),var(--sig-corniere)), linear-gradient(var(--sig-corniere),var(--sig-corniere)), linear-gradient(var(--sig-corniere),var(--sig-corniere)); background-size: 10px 10px,10px 10px,10px 10px,10px 10px, 42px 4px,4px 42px, 42px 4px,4px 42px, 42px 4px,4px 42px, 42px 4px,4px 42px; background-position: left top,right top,left bottom,right bottom, left top,left top, right top,right top, left bottom,left bottom, right bottom,right bottom; } .cadre--gauche::after,.realisations__haute::after{inset:-9px} .cadre:hover::after{opacity:1} /* LES PANNEAUX (×2) : une plaque RIVETÉE — bordure épaisse, angles vifs, quatre rivets aux angles. Plus une carte qui flotte : une tôle vissée. */ .panneau{border:2px solid var(--sig-acier-clair);background-color:var(--carte); background-repeat:no-repeat; background-image: radial-gradient(circle 4px at 16px 21px,var(--sig-acier-moyen) 0 94%,transparent 95%), radial-gradient(circle 4px at calc(100% - 16px) 21px,var(--sig-acier-moyen) 0 94%,transparent 95%), radial-gradient(circle 4px at 16px calc(100% - 16px),var(--sig-acier-moyen) 0 94%,transparent 95%), radial-gradient(circle 4px at calc(100% - 16px) calc(100% - 16px),var(--sig-acier-moyen) 0 94%,transparent 95%); } .panneau::before{left:-2px;right:-2px;top:-2px} /* LES TABLEAUX ET LES FICHES : traverses franches, pas des hairlines. */ .tableau__ligne + .tableau__ligne{border-top:2px solid var(--filet)} .fiche{border-top:var(--sig-barre) solid var(--filet)} /* ============================================================ 4. LA BARRE, LES BOUTONS ============================================================ */ .entete{border-bottom:var(--sig-barre) solid var(--sig-acier-moyen)} #nav-toggle{border:2px solid var(--sig-acier-moyen)} .nav-toggle__trait{height:3px;border-radius:0} /* ⚠ Le bouton GARDE sa pilule : « le bouton appeler pas beau, vraiment juste un rectangle avec des angles droits » (01.08.2026). On le durcit autrement : liseré foncé net et reflet d'acier en haut. */ .bouton{border:2px solid var(--marque-fonce)} .bouton--plein{background-image:linear-gradient(180deg, color-mix(in oklab,var(--marque-clair) 42%,transparent) 0,transparent 54%)} .bouton--plein:hover,.bouton--plein:focus-visible{ background-image:linear-gradient(180deg, color-mix(in oklab,var(--marque-clair) 30%,transparent) 0,transparent 54%)} .bouton--wa{border-color:color-mix(in oklab,var(--wa) 55%,black)} /* ============================================================ 5. LA GALERIE — un panneau soudé d'un seul tenant, sur fond noir ------------------------------------------------------------ Les trois photos sont JOINTIVES : plus de gouttière entre elles, mais des traverses d'acier de 6 px et un cadre du même acier. C'est la signature de grille — tous les autres métiers espacent leurs photos. ⚠ La section est passée au noir : l'acier des traverses est celui de nuit, sinon le cadre se confondait avec le fond. ============================================================ */ .realisations__grille{gap:var(--sig-traverse); padding:var(--sig-traverse);background:var(--sig-acier-nuit); border-top:var(--sig-traverse) solid var(--marque)} /* Les cornières n'ont plus lieu d'être : la traverse fait le cadre. */ .realisations__grille .cadre::after{display:none} .realisations__grille img{border-radius:0} /* ============================================================ 6. LES DÉCOUPES ET LA PHOTO PLEINE LARGEUR ============================================================ */ /* La photo pleine largeur est tenue entre DEUX profilés, pas posée. */ .equipe__photo{border-top:var(--assise) solid var(--marque); border-bottom:var(--assise) solid var(--marque)} /* Le pied : coupé en haut à gauche, et coiffé d'une bande de grille soudée — la même trame qu'en haut de page, la boucle se ferme. */ .pied{ clip-path:polygon(var(--sig-coupe) 0,100% 0,100% 100%,0 100%,0 var(--sig-coupe)); background-color:var(--nuit); background-repeat:repeat-x; background-size:52px 52px; background-image: radial-gradient(7px 5px at 2.5px 2.5px, color-mix(in oklab,var(--laiton) 55%,transparent) 0 94%,transparent 95%), linear-gradient(90deg,color-mix(in oklab,var(--creme) 18%,transparent) 0 4px,transparent 4px), linear-gradient(180deg,color-mix(in oklab,var(--creme) 16%,transparent) 0 4px,transparent 4px); } /* ============================================================ 7. LE CROCHET DU MILIEU — la grille soudée et la rosace de cylindre ------------------------------------------------------------ Pleine largeur : width:100 %, jamais 100vw, overflow caché. Le profilé est posé EXACTEMENT sur la limite des deux sections, et la rosace du cylindre est assise dessus : c'est le point de fermeture de la page, à mi-hauteur, entre le blanc et le noir. ============================================================ */ .signature--milieu{display:block;width:100%;overflow:hidden;background:var(--fond)} .sig-soude{position:relative;width:100%;height:clamp(104px,14vw,162px)} /* Barreaux carrés verticaux et horizontaux + point de soudure écrasé à chaque intersection. Un seul motif répété : quelques octets. */ /* ⚠ L'alpha est DANS les couleurs, pas dans un `opacity` sur le calque : une opacité globale affaiblit le point de soudure autant que le barreau, et la soudure disparaissait (vue en capture le 01.08.2026). Ici le barreau est effacé, le point de soudure reste franc. */ .sig-soude__grille{position:absolute;inset:0; background-position:-4px -4px; background-size:46px 46px; background-image: radial-gradient(8px 5.5px at 4px 4px, color-mix(in oklab,var(--sig-soudure) 78%,transparent) 0 94%,transparent 95%), linear-gradient(90deg,color-mix(in oklab,var(--sig-acier-moyen) 46%,transparent) 0 8px,transparent 8px), linear-gradient(180deg,color-mix(in oklab,var(--sig-acier-moyen) 46%,transparent) 0 8px,transparent 8px); -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%); } /* Le cordon de soudure qui court au-dessus du profilé. */ .sig-soude__cordon{position:absolute;left:50%;transform:translateX(-50%); bottom:clamp(14px,1.8vw,20px);height:9px; width:min(var(--largeur),calc(100% - 2 * var(--gouttiere))); background-size:9px 9px; background-image:radial-gradient(circle 5.5px at 4.5px 4.5px, var(--sig-cordon) 0 94%,transparent 95%)} /* Le profilé vu en coupe : barre épaisse, bouts coupés en biais. */ .sig-soude__profile{position:absolute;left:50%;transform:translateX(-50%);bottom:0; height:clamp(14px,1.8vw,20px); width:min(var(--largeur),calc(100% - 2 * var(--gouttiere))); background:linear-gradient(180deg,var(--sig-acier-clair) 0 32%,var(--sig-acier) 32% 100%); clip-path:polygon(0 0,calc(100% - 18px) 0,100% 100%,18px 100%)} /* LA ROSACE DU CYLINDRE : la couronne d'acier et sa lumière, posée sur le profilé. Un seul objet, centré — c'est la pièce qui dit « serrure » sans qu'on ait rien à lire. */ .sig-soude__cylindre{position:absolute;left:50%;bottom:0;transform:translateX(-50%); width:clamp(46px,5.6vw,64px);height:clamp(46px,5.6vw,64px); box-sizing:border-box;border-radius:50%; border:4px solid var(--sig-acier-clair); background-color:var(--sig-acier); background-repeat:no-repeat; background-image: radial-gradient(circle 7px at 7px 7px,var(--fond) 0 94%,transparent 95%), linear-gradient(var(--fond),var(--fond)); background-size:14px 14px,8px 13px; background-position:center calc(50% - 7px),center calc(50% + 4px)} /* ============================================================ 8. LE CROCHET DU CONTACT — la platine boulonnée, et son cadenas ------------------------------------------------------------ La plaque assemble la section d'avant (noire) et le contact (blanc). Au centre, un cadenas fermé : anse, corps, canon. C'est le dernier mot du vocabulaire de fermeture, juste avant le numéro de téléphone. ============================================================ */ .signature--contact{display:block;width:100%;overflow:hidden;background:var(--fond)} .sig-platine{position:relative;width:100%;display:flex;justify-content:center; padding-block:clamp(1.3rem,3.2vw,2.2rem)} .sig-platine__plaque{position:relative; width:min(var(--largeur),calc(100% - 2 * var(--gouttiere))); height:clamp(86px,10vw,116px); border:var(--sig-traverse) solid var(--sig-acier); background-color:color-mix(in oklab,var(--fond) 88%,var(--encre)); background-image:repeating-linear-gradient(90deg, color-mix(in oklab,var(--encre) 8%,transparent) 0 2px,transparent 2px 26px); clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px), calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px)} .sig-platine__boulon{position:absolute;width:18px;height:20px;background:var(--sig-acier); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)} .sig-platine__boulon:nth-child(1){left:14px;top:12px} .sig-platine__boulon:nth-child(2){right:14px;top:12px} .sig-platine__boulon:nth-child(3){left:14px;bottom:12px} .sig-platine__boulon:nth-child(4){right:14px;bottom:12px} /* Le cordon de soudure le long du bord bas. */ .sig-platine__cordon{position:absolute;left:0;right:0;bottom:0;height:9px; background-size:9px 9px; background-image:radial-gradient(circle 5.5px at 4.5px 4.5px, var(--sig-cordon) 0 94%,transparent 95%)} /* LE CADENAS — anse en U posée derrière, corps devant, canon en laiton. Dimensions en clamp : il reste toujours plus petit que la platine. */ .sig-cadenas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); display:block;width:clamp(38px,4.6vw,52px);height:clamp(44px,5.4vw,60px)} .sig-cadenas__anse{position:absolute;left:50%;top:0;transform:translateX(-50%); width:62%;height:46%;box-sizing:border-box; border:clamp(5px,.62vw,7px) solid var(--sig-acier-moyen);border-bottom:0; border-radius:999px 999px 0 0} .sig-cadenas__corps{position:absolute;left:0;right:0;bottom:0;height:66%; background-color:var(--sig-acier);border-radius:4px; background-repeat:no-repeat; background-image: radial-gradient(circle 5.5px at 5.5px 5.5px,var(--laiton) 0 94%,transparent 95%), linear-gradient(var(--laiton),var(--laiton)); background-size:11px 11px,6px 10px; background-position:center calc(50% - 5px),center calc(50% + 4px)} /* ============================================================ 9. MOUVEMENT RÉDUIT — on REMPLACE, on ne supprime pas ------------------------------------------------------------ ⚠ Ce fichier passe APRÈS le bloc « mouvement réduit » du tronc : tout ce que je redéclare échapperait à ses neutralisations. Je les réaffirme donc ici, pour les seuls sélecteurs que je touche. Toute la signature (damier, clés, trous de serrure, gâches, cadenas, rosace, portail, platine, cornières, découpes) est STATIQUE : elle est entièrement visible en mouvement réduit, ce qui est le mode permanent du poste du responsable. ============================================================ */ @media (prefers-reduced-motion:reduce){ /* Le bouton : plus de soulèvement, mais le fond ET le liseré changent — le survol reste visible, il change juste de moyen. */ .bouton{transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease} .bouton--plein:hover,.bouton--plein:focus-visible, .bouton--wa:hover,.bouton--wa:focus-visible{transform:none} /* Le trou de serrure ne grossit plus : il s'allume, sur la même durée. */ .poste__num::before{transition:opacity .25s ease} .poste:hover .poste__num::before{transform:none;opacity:1} /* Les cornières : déjà un fondu d'opacité, rien à remplacer. */ .cadre::after{transition:opacity .35s ease} /* La clé ne se déroule plus : elle se fond, sur la même durée. (Le tronc le fait déjà ; je le réaffirme parce que je redéclare `transform-origin` plus haut, dans une règle postérieure à la sienne.) */ .js .assise.reveal{transform:none;transition:opacity .8s ease .1s} /* Sur fond blanc, la photo du savoir-faire ne se soulève plus non plus. */ .savoir .cadre:hover img{transform:none} }