/* ============================================================================ ADA CONSTRUCTION v2 — socle commun aux 6 pages Règle du 21/07 : pas d'encadré, pas de grille à filets, pas de cage. L'espace et la photo structurent. ============================================================================ */ :root{ /* ---- Nuit, acier, vermillon ---- Le site est en dominante nuit. Le clair n'apparaît plus qu'aux trois endroits où on lit longtemps : le déroulé des Prestations, le formulaire de Contact, les Mentions. Ailleurs, near-black. Ça supprime l'alternance sombre-clair-sombre, qui est un motif de gabarit en soi. Le vermillon ne bouge pas d'un degré : c'est la seule chose qui soit réellement la marque, et elle a été payée par un rejet client. Ce n'est pas l'argile d'Anthropic, c'est du minium, le rouge d'apprêt du bâtiment. Il était noyé dans un crème qui le tirait vers l'argile ; sur nuit il redevient violent. */ /* La face nuit n'avait pas un étagement plat : elle n'en avait pas. Elle vivait sur DEUX valeurs, .138 et .186, et --nuit-2 n'était le fond de rien. Le rejet du 21/07 interdit le filet, l'encadré et la cage : il ne restait donc qu'un seul canal pour séparer une surface levée de son sol, un pas de clarté. La chroma en ouvre un second, qui ne coûte ni contraste ni bordure. Elle monte avec le barreau pour deux raisons : le gamut sRGB près du noir est trop étroit pour la porter en bas (à L .146, C .020 n'achète que 13 niveaux d'écart bleu-rouge), et une petite surface demande plus de chroma qu'un grand aplat pour paraître aussi colorée. Le sol monte aussi : les 8 photos sont étalonnées chaudes (cible R 118,9 / B 102,9). Un support froid ne les concurrence pas, il les réchauffe. Le plafond n'est pas choisi, il est mesuré : au-delà de L .230, --on-nuit-3 tombe à 4,43:1 et la limite du bouton vermillon à 3,04:1. D'où quatre barreaux et non cinq. Les L du sol et de la surface levée ne bougent pratiquement pas (.138→.140, .186→.184) : tous les contrastes déjà mesurés le 01/08 sont conservés par construction. */ /* REVENU EN ARRIÈRE LE 06/08/2026 — la famille minium du 05/08 est abandonnée. Recolorer les quatre barreaux sur la teinte du vermillon supprimait le seul contraste de teinte que la DA « Nuit, acier, vermillon » utilisait pour faire ressortir l'accent : sol et accent sur la même famille, plus rien ne se détachait — sur un site de chantier, un aplat rouge-noir de bout en bout lit plus « incendie » que « confiance ». Retour à la famille bleue mesurée le 02/08 (teinte 254), chroma .012/.014/.020/.026 par barreau : 22 paires de contraste déjà validées ce jour-là, rien à remesurer. La chaleur voulue le 05/08 reste portée par la lumière rasante (plus bas) et le grain, pas par la teinte du sol : c'est ce qui garde le vermillon comme seule note chaude de la page. */ --nuit-0: oklch(0.104 0.012 254); /* pied, menu : la page finit par s'enfoncer */ --nuit: oklch(0.140 0.014 254); /* sol dominant, support des photos */ --nuit-1: oklch(0.184 0.020 254); /* surface levée */ --nuit-2: oklch(0.222 0.026 254); /* panneau, plafond mesuré de l'échelle */ /* Un voile posé sur une photo doit finir exactement sur le sol, sinon une couture apparaît au bas de chaque photo à bord perdu — et elle se voit d'autant plus que le sol est froid et la photo chaude. Un seul triplet, douze valeurs en dur supprimées. */ --nuit-lch: 0.140 0.014 254; /* Le béton suit la famille en teinte, jamais en clarté : la clarté est ce qui porte les contrastes déjà mesurés, la teinte ne coûte rien. Un gris chaud posé au milieu d'une page redevenue froide se lit comme une pièce rapportée. */ --beton: oklch(0.898 0.004 252); /* uniquement lecture longue */ --beton-1: oklch(0.845 0.005 252); --verm: oklch(0.548 0.201 29); /* INCHANGÉ depuis le 21/07, c'est la marque */ --verm-nuit:oklch(0.672 0.205 33); /* accent sur nuit : 6,12:1, valeur du 02/08 */ --verm-bet: oklch(0.512 0.198 30); /* accent sur béton : 4,64:1 */ --on-nuit: oklch(0.965 0.002 252); /* 18,03:1 */ --on-nuit-2:oklch(0.772 0.005 252); /* 9,70:1 */ --on-nuit-3:oklch(0.615 0.007 252); /* 5,37:1 */ --on-bet: oklch(0.178 0.005 252); /* 13,92:1 */ --on-bet-2: oklch(0.372 0.006 252); /* 7,63:1 */ --on-bet-3: oklch(0.478 0.007 252); /* 4,86:1 */ /* L'acier est le deuxième neutre réel. Avant, tous les filets étaient du blanc à 13 % d'opacité : 1,39:1, un raccourci et pas une couleur. Deux valeurs parce que deux seuils différents s'appliquent : un filet décoratif n'a pas de seuil, la limite d'un composant en a un de 3:1. Les servir avec la même couleur, c'est soit un filet qui hurle, soit un champ qu'on ne voit pas. Leur chroma suit celle de la famille : un rail resté neutre sur un champ devenu froid se lit comme une pièce rapportée. Le déplacement coûte 0,01 de contraste, mesuré, donc rien. */ --acier: oklch(0.452 0.016 254); /* filet décoratif sur nuit : 2,70:1, aucun seuil */ --acier-h: oklch(0.560 0.016 254); /* limite de composant sur nuit : 4,28:1 */ --filet-l: oklch(0.660 0.006 252); /* filet décoratif sur béton : 2,29:1 */ --limite-l: oklch(0.520 0.008 252); /* limite de composant sur béton : 4,06:1 */ /* ---- Typographie « Massif » ---- Deux grotesques ne formaient pas un couple : un couple se construit sur un axe de contraste. Ici empattement rectangulaire contre sans linéale. Le slab dit charge, structure, permanence, et ses empattements épais ne perdent rien en lisibilité en plein soleil. */ --disp:'Zilla Slab', ui-serif, Georgia, serif; --body:'Public Sans', ui-sans-serif, system-ui, sans-serif; --mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Plancher d'interlettrage display. -.028em était calibré pour une grotesque très grasse ; sur un slab les empattements se soudent bien avant les fûts. -.012em est le plancher au-delà duquel « rr », « nn » et « ll » collent. TROIS CRANS, 07/08/2026. Une seule valeur servait de 1,05 rem à 4,6 rem via la règle `h1,h2,h3` : un interlettrage unique sur une plage de 4,4 fois est forcément faux à l'une des deux extrémités. Le resserrement est une correction optique, et l'œil ne le demande qu'au grand corps — plus les lettres sont grosses, plus les blancs entre elles paraissent larges. Au petit corps le même em ferme une lettre déjà courte et fait perdre du gris typographique, surtout sur un slab dont les empattements avancent déjà l'un vers l'autre. Le cran serré ne bouge pas : -.012em EST le plancher mesuré, on ne creuse pas en dessous. Ce sont les deux autres qui s'ouvrent. --lsd grands titres, au-delà de ~2,6 rem (h1 de page, .h2, .pull) --lsd-m corps intermédiaire, 2 à 2,6 rem --lsd-s petits titres, sous 2 rem : légèrement positif Les capitales slab (.fam__t, .mg__t) restent hors échelle à 0 : leurs empattements ferment déjà la lettre, elles n'ont jamais rien demandé. */ --lsd:-.012em; --lsd-m:-.006em; --lsd-s:.006em; /* ---- Echelle typographique, 06/08/2026 ---- L'audit a releve 14 tailles fixes distinctes entre 11 et 19 px, dont onze dans une plage de 5 px : 11 / 11,5 / 12 / 12,5 / 13 / 13,5 / 14 / 14,5 / 15 / 15,5 / 16. C'est de la derive au sens strict — on a ajuste d'un demi pixel au lieu de passer au cran suivant. Le rendu tient tant qu'une seule personne decide ; il derive des la premiere main supplementaire. Six crans remplacent les onze valeurs. Les seules fusions sont a 0,5 px (11,5→12, 13,5→13, 14,5→14, 15,5→15) et 1 px sur un unique usage (11→12) : invisibles, et aucun ne franchit un seuil WCAG de grand texte. Le corps (17 px, 18 px au-dela de 768) et le wordmark (19 px) ne sont pas de la derive : ce sont des roles distincts, ils restent hors echelle. */ --t-micro:12px; /* mentions de pied, barre legale */ --t-mono:12.5px; /* legendes et champs en attente, en mono */ --t-lbl:13px; /* eyebrow, ligne d'identification, brandline */ --t-sm:14px; /* navigation, burger */ --t-ui:15px; /* liens de pied, barre d'appel, CTA d'entete */ --t-body:16px; /* boutons */ --maxw:1200px; /* Courbes expo-out. L'entrée démarre vite, donc l'interface répond avant d'avoir fini de bouger. Jamais d'ease-in sur une entrée : ça retarde l'instant précis que l'œil regarde. */ --ease:cubic-bezier(.19,1,.22,1); --ease-2:cubic-bezier(.4,0,0,1); --ease-out:cubic-bezier(.23,1,.32,1); /* La sortie est plus rapide que l'entrée : ~65 %. */ --t-in:.62s; --t-out:.4s; --t-ui:.18s; /* Échelle de plans nommée. Aucune valeur inventée au cas par cas. */ --z-grain:5; --z-sticky:10; --z-callbar:40; --z-head:60; --z-progress:70; --z-menu:80; /* Hauteur de la barre d'appel, pour que rien ne se cache dessous. */ --callbar-h:0px; } @media (max-width:1139px){:root{--callbar-h:56px}} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--nuit)} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{font-family:var(--body);font-weight:400;background:var(--nuit);color:var(--on-nuit); font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden; padding-bottom:env(safe-area-inset-bottom)} @media (min-width:768px){body{font-size:18px}} img,video{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left} ::selection{background:var(--verm);color:var(--on-nuit)} /* Un contour système de 2 px était le seul endroit non dessiné du site. Le halo dans la couleur de la surface fait tenir l'anneau aussi bien sur un aplat que sur une photo, où un simple trait se perd dans le détail. */ :focus-visible{outline:2px solid var(--verm-nuit);outline-offset:3px; box-shadow:0 0 0 6px oklch(var(--nuit-lch) / .62)} .s-beton :focus-visible,.s-beton:focus-visible{outline-color:var(--verm-bet); box-shadow:0 0 0 6px oklch(0.898 0.004 252 / .72)} .skip{position:absolute;left:-9999px} .skip:focus{left:16px;top:16px;z-index:99;background:var(--verm);color:var(--on-nuit);padding:12px 18px} .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(22px,5vw,56px)} .sec{padding-block:clamp(72px,11vw,140px)} .s-nuit{background:var(--nuit);color:var(--on-nuit)} .s-nuit-1{background:var(--nuit-1);color:var(--on-nuit)} .s-nuit-2{background:var(--nuit-2);color:var(--on-nuit)} /* Lumière rasante. Un aplat sans gradient de lumière se lit comme un à-plat d'imprimerie, et la dominante nuit multiplie les grands aplats. Très large, très faible : aucun rapport de contraste ne bouge d'un centième. */ /* 06/08 — la lumière prend une direction par surface. Elle existait déjà, mais au MÊME point sur les trois surfaces : posée à l'identique section après section, l'œil cesse de la lire comme une lumière et la lit comme une teinte du fond. Une lumière qui ne vient de nulle part n'est pas une lumière. Trois origines, une par barreau : en descendant la page on passe devant une source au lieu de traverser un motif répété. Couleur et opacité inchangées (.34, teinte 32) : aucun rapport de contraste ne bouge, seul le point d'application change. */ .s-nuit{background-repeat:no-repeat; background-image:radial-gradient(120% 80% at 8% 0%, oklch(0.330 0.070 32 / .34) 0%, transparent 62%)} .s-nuit-1{background-repeat:no-repeat; background-image: linear-gradient(180deg, oklch(0.560 0.016 254 / .11) 0%, transparent 92px), radial-gradient(116% 78% at 88% 4%, oklch(0.330 0.070 32 / .34) 0%, transparent 62%)} .s-nuit-2{background-repeat:no-repeat; background-image: linear-gradient(180deg, oklch(0.560 0.016 254 / .13) 0%, transparent 92px), radial-gradient(128% 86% at 46% 104%, oklch(0.330 0.070 32 / .34) 0%, transparent 66%)} /* L'arête de lumière au-dessus des surfaces levées, ci-dessus. Le rejet du 21/07 interdit le filet et la cage : ce n'en est pas un. Un trait de 1 px dit « bordure » ; une rampe de 92 px dit « cette surface est plus haute que le sol et elle prend le jour ». C'est le seul canal qui restait pour lever une surface sans la mettre en boîte, et c'est ce qui fait la différence entre un aplat peint et une pièce usinée. */ .s-beton{background:var(--beton);color:var(--on-bet)} /* ---- Couture de matière ---- Une bascule franche entre nuit et béton fait clignoter la section. Le béton monte depuis le bas du cadre au lieu d'arriver d'un coup ; le grain fixe casse le dégradé, sinon la rampe se voit comme une bande. Les deux arrêts intermédiaires portent maintenant la chroma de la famille et la relâchent en montant vers le béton : sans ça la rampe traverse un gris neutre à mi-course et se lit comme une bande grise en travers du champ. */ .couture{height:clamp(56px,8vw,104px);background:linear-gradient(180deg, var(--nuit) 0%, oklch(0.225 0.024 254) 30%, oklch(0.475 0.014 253) 66%, var(--beton-1) 90%, var(--beton) 100%)} .couture--vers-nuit{background:linear-gradient(180deg, var(--beton) 0%, var(--beton-1) 10%, oklch(0.475 0.014 253) 34%, oklch(0.225 0.024 254) 70%, var(--nuit) 100%)} /* La couture est déjà de l'air : sans ça, la section qui suit démarre à 200 px de son titre et le bloc paraît décroché. */ .couture + .sec{padding-top:clamp(34px,5vw,70px)} /* Balance égalise les longueurs de ligne des titres, pretty évite les orphelines. 1.04 et non 1 : les empattements du slab ont besoin d'un demi-point d'air de plus qu'une grotesque pour ne pas se croiser. */ h1,h2,h3{font-family:var(--disp);font-weight:700;line-height:1.04;letter-spacing:var(--lsd);text-wrap:balance} p,li{text-wrap:pretty} /* Capitales + .2em de tracking en mono : c'est la moitié du gabarit par défaut. Même rôle, casse normale, tracking serré, filet plus franc. */ .eyebrow{display:inline-flex;align-items:center;gap:14px;font-family:var(--mono);font-weight:500; font-size:var(--t-lbl);letter-spacing:.01em;color:var(--on-nuit-2)} .eyebrow::before{content:"";width:36px;height:2px;background:var(--verm-nuit);flex:none} .s-beton .eyebrow{color:var(--on-bet-2)} .s-beton .eyebrow::before{background:var(--verm-bet)} /* Ligne d'identification : elle remplace le surtitre qui répétait le nom de la page. Un visiteur arrivé par annonce sur une page profonde n'avait aucun résumé de qui est ADA au-dessus de la ligne de flottaison. */ /* La ligne d'identification se décolle du titre par un filet, au lieu de le toucher : les neuf pages ouvraient toutes sur la même partition (ligne mono, titre, paragraphe), et cette amorce identique était le gabarit le plus visible du site. */ .ident{display:block;font-family:var(--mono);font-weight:500;font-size:var(--t-lbl);letter-spacing:.01em; color:var(--on-nuit-2);max-width:30ch;line-height:1.6;padding-top:14px;border-top:1px solid var(--acier)} .s-beton .ident{color:var(--on-bet-2);border-top-color:var(--limite-l)} .v{color:var(--verm-nuit)}.s-beton .v{color:var(--verm-bet)} /* Le mot colorié par titre tombe, par défaut. Un accent lexical répété à l'identique sur neuf pages n'est pas une signature, c'est le gabarit. PORTÉE RÉELLE, à ne pas surestimer : cette règle ne couvre que les titres qui portent la classe .h2. Les entêtes de page (`.phead h1 em`), les dossiers de Réalisations (`.dos__h h2 em`), la chronologie (`.chrono__ttl em`) et, depuis le 06/08, le héros et le nom du gérant sur l'accueil (`.hero h1 b`, `.named__lead em`) redéclarent la couleur dans le