/* ============================================================================ PRESSING DE VERNIER — feuille de style principale ---------------------------------------------------------------------------- Ce fichier définit les couleurs, les tailles de texte et les espacements du site entier. Tout est réglé au même endroit, en haut, dans le bloc « :root ». Changer une valeur là met à jour tout le site d'un coup. ============================================================================ */ :root{ /* ---- COULEURS ------------------------------------------------------ Relevées sur le logo et sur l'affiche des 20 ans. L'IVOIRE EST UN PAPIER ANCIEN, PAS UN BLANC CASSÉ. Il valait #F6F3EC, un gris très clair neutre : à côté du vert et de l'or, il tirait au froid. #F3ECDC est le même ivoire décalé de six degrés vers le jaune — la couleur d'un papier qui a vieilli, pas une couleur nouvelle. LA LIMITE EST FIXÉE PAR LE CONTRASTE, pas par le goût. Deux jetons de texte du site sont réglés au ras du seuil de 4,5:1 : --or-grave (5,05:1 sur l'ivoire froid) et --acier-texte (5,22:1). Réchauffer le fond les fait descendre ensemble. Mesuré sur #F3ECDC : or gravé 4,76:1 · acier 4,89:1. Les deux passent. Un cran plus chaud (#F2EBDA) donnait 4,71 et 4,84 — encore au-dessus, mais sans marge pour un futur ajustement. #F3ECDC est le point où le papier est franchement chaud et où la marge tient encore. --papier suit du même décalage : c'est l'ivoire d'un ton plus soutenu, il ne peut pas rester froid sous un fond qui ne l'est plus. */ --ivoire: #F3ECDC; /* fond principal des pages */ --papier: #E8DFCA; /* filets, bordures, fonds secondaires */ --graphite: #232825; /* texte courant */ --vert: #04321E; /* vert du logo — titres, boutons */ --vert-nuit: #04180F; /* fond des bandeaux sombres */ --or: #A8842F; /* or sur fond clair */ --or-clair: #C9A24D; /* or sur fond sombre */ /* L'or du PETIT TEXTE sur fond clair. Ce n'est pas une couleur de plus dans la palette : c'est le seul or assez sombre pour tenir les 4,5:1 qu'exige un texte de 11 px sur l'ivoire. L'or du site y plafonne à 3,15:1 et l'or clair à 2,16:1 — tous deux restent justes pour un grand texte, un filet ou un aplat, jamais pour une légende. */ --or-grave: #82631F; /* 5,05:1 sur ivoire */ --acier: #8A979B; /* gris froid — filets, bordures */ /* Le gris du PETIT TEXTE. Même logique que --or-grave : --acier tient 2,71:1 sur l'ivoire, très en dessous des 4,5:1 qu'exige une légende ou un lien. Il reste juste pour une bordure ou un aplat, jamais pour un mot qu'on doit lire. Celui-ci tient 5,22:1 sur l'ivoire et 5,78 sur le blanc des tableaux. */ --acier-texte: #5A686C; /* 5,22:1 sur ivoire */ --blanc: #FFFFFF; /* Le trait du papier millimétré. Il est en OR, pas en gris : il court derrière des plaques vertes qui portent de l'or, et un trait gris y serait la seule chose froide de la vue. Très pâle — 8,5 % d'or, réduits encore de moitié par l'opacité de `.millimetre`, soit 4 % à l'écran. On ne le voit pas, on voit que le papier n'est pas nu. */ --trait-quadrillage: rgba(168,132,47,.085); /* ---- LE SYSTÈME DU VERT --------------------------------------------- UNE seule rampe pour toutes les surfaces vertes du site. Cinq crans d'une même teinte (149–152°), du plus clair au plus sombre. Le cran 5 est --vert-nuit : la rampe ne remplace pas la palette, elle la prolonge vers le haut. Chaque surface verte pioche DEUX crans dans cette rampe, et c'est le seul réglage qui la distingue des autres. Même famille, même grain, même sens de lumière — seule l'amplitude change. Voir le bloc « LES SURFACES VERTES », plus bas, pour le détail et la raison de chaque amplitude. */ --v1: #16402B; /* cime — la lumière tombe ici */ --v2: #103322; --v3: #0B2718; --v4: #071E12; --v5: #04180F; /* fond — l'ombre. Identique à --vert-nuit */ /* Le grain : une turbulence fractale, sans couleur propre. Il donne de la matière au vert sans le déplacer d'un degré de teinte. 14 % est le point où la trame cesse d'être visible comme trame et devient du tissu ; au-delà elle se met à grésiller sur les grandes surfaces. */ --grain-tissu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); --grain-force: .14; /* ---- TEXTES SUR FOND SOMBRE ---------------------------------------- */ --sur-nuit: #F6F3EC; --sur-nuit-doux: rgba(246,243,236,.74); /* ---- POLICES ------------------------------------------------------- Hébergées dans assets/polices/ : aucun appel à un service extérieur. */ --serif: "Newsreader", Georgia, "Times New Roman", serif; --sans: "Archivo", -apple-system, "Segoe UI", Roboto, Helvetica, sans-serif; /* Le nom de la maison, et lui seul : bandeau, en-tête, sceau. Les titres de pages restent en --serif. */ --logotype: "Cinzel", Georgia, "Times New Roman", serif; /* ---- TAILLES DE TEXTE ---------------------------------------------- Les corps de TEXTE gardent le rapport 1,25 et leurs valeurs : Archivo et Inter ont des hauteurs d'x voisines, rien ne bouge à la lecture. Les corps d'AFFICHAGE descendent d'environ 15 %. La hauteur d'x de Newsreader est nettement supérieure à celle de Cormorant Garamond : aux mêmes valeurs en pixels, les titres paraîtraient une taille trop gros. Seul --t-xl est arrondi vers le haut (22,95 → 24 px), pour garder un écart perceptible avec --t-l à 21 px. */ --t-xs: 12px; /* étiquettes espacées */ --t-s: 14px; /* légendes */ --t-m: 17px; /* texte courant */ --t-l: 21px; /* chapô, prix */ --t-xl: 24px; /* titres de carte */ --t-2xl: clamp(26px, 2.9vw, 36px); /* titres secondaires */ --t-3xl: clamp(33px, 4.8vw, 56px); /* titres de section */ --t-4xl: clamp(36px, 5.6vw, 72px); /* titre de page */ /* ---- ESPACEMENTS --------------------------------------------------- */ --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 96px; --s7: 140px; /* ---- MISE EN PAGE -------------------------------------------------- */ --largeur-max: 1180px; --marge-page: clamp(18px, 4vw, 54px); /* ---- MOUVEMENT ----------------------------------------------------- */ --transition: 260ms cubic-bezier(.22,.61,.36,1); } /* ============================================================================ BASE ============================================================================ */ *,*::before,*::after{ box-sizing:border-box; } /* `scroll-padding-top` : la hauteur de ce qui reste en haut de l'écran. Sans lui, un lien d'ancre — le sommaire de la page Tarifs, le lien d'évitement — amène sa cible EXACTEMENT au bord haut de la fenêtre, c'est-à-dire derrière la bande fixe. Le titre visé disparaît dessous. Ce qui reste en haut, c'est la bande du logo, et elle seule : sa hauteur RÉELLE est mesurée par assets/site.js et exposée en `--h-bande-logo`. La valeur de repli, 61 px, est celle de la bande à sa taille de texte par défaut — un visiteur qui a forcé une taille minimale la fait grandir, et une valeur figée laisserait le titre à moitié caché. Seize pixels d'air en plus. La valeur mobile est plus bas, avec le reste du régime étroit. */ html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--h-bande-logo,61px) + 16px); } /* Newsreader porte un axe de taille optique : son dessin s'épaissit de lui-même dans les petits corps et s'affine dans les grands. C'est le comportement par défaut du navigateur ; on l'écrit pour que personne ne le neutralise par mégarde. */ :where(html){ font-optical-sizing:auto; } /* LA PLACE DE LA BANDE FIXE. Elle est sortie du flux, donc rien ne la réserve : sans ce retrait, le nom d'or de la plaque commencerait sous elle et les soixante premiers pixels de chaque page seraient cachés. Le retrait suit la hauteur mesurée, jamais une valeur figée — voir `--h-bande-logo` dans assets/site.js. Sur téléphone la plaque du nom est fixe elle aussi ; le retrait vaut alors les deux, et c'est écrit dans le régime étroit. */ body{ margin:0; padding-top:var(--h-bande-logo,61px); background:var(--ivoire); color:var(--graphite); font-family:var(--sans); font-size:var(--t-m); line-height:1.62; font-weight:300; overflow-x:hidden; } img,svg{ max-width:100%; height:auto; display:block; } a{ color:inherit; text-decoration:none; } button{ font:inherit; cursor:pointer; } /* UN LIEN DANS UNE PHRASE. Le site enlève le soulignement à tous les liens : c'est juste pour une navigation, un bouton ou une carte, où la place et la forme disent déjà qu'on peut cliquer. Au milieu d'un paragraphe, plus rien ne le dit — un lien sans soulignement y devient un mot ordinaire. Il en reprend donc un, en or gravé, à distance du texte. */ .lien{ color:var(--or-grave); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; transition:color var(--transition); } .lien:hover{ color:var(--vert); } /* Anneau de focus visible partout : obligatoire pour la navigation clavier */ :focus-visible{ outline:2px solid var(--or); outline-offset:4px; border-radius:2px; } /* Lien d'évitement, pour les lecteurs d'écran et le clavier. Il se pose SOUS la bande fixe : au bord haut il la recouvrirait, et le premier arrêt du clavier masquerait le numéro de téléphone. */ .saut{ position:absolute; left:-9999px; top:var(--h-bande-logo,61px); z-index:200; background:var(--vert); color:var(--ivoire); padding:14px 20px; font-size:var(--t-s); letter-spacing:.1em; text-transform:uppercase; } .saut:focus{ left:0; } .zone{ max-width:var(--largeur-max); margin-inline:auto; padding-inline:var(--marge-page); } /* ============================================================================ TITRES ET TEXTES ============================================================================ */ h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.06; margin:0; color:var(--vert); } h1{ font-size:var(--t-4xl); font-weight:400; letter-spacing:-.02em; } h2{ font-size:var(--t-3xl); font-weight:500; letter-spacing:-.01em; } h3{ font-size:var(--t-xl); } h4{ font-size:var(--t-l); } /* L'italique doré, motif récurrent des titres */ .accent{ font-style:italic; font-weight:600; color:var(--or); } .sur-titre{ font-family:var(--sans); font-size:10px; font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:var(--acier-texte); margin:0 0 var(--s3); } .chapo{ font-size:var(--t-l); line-height:1.6; color:rgba(35,40,37,.74); max-width:54ch; margin:var(--s3) 0 0; } /* Le filet à losange du logo — séparateur de la marque */ .filet{ display:flex; align-items:center; gap:14px; } .filet::before,.filet::after{ content:""; height:1px; flex:1; background:linear-gradient(90deg,transparent,var(--or),transparent); } .filet i{ width:7px; height:7px; background:var(--or); transform:rotate(45deg); flex:none; } .filet.court{ max-width:210px; } /* ============================================================================ BOUTONS ============================================================================ */ .bouton{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:54px; padding:0 30px; border-radius:2px; font-size:11px; letter-spacing:.17em; text-transform:uppercase; font-weight:500; transition:background var(--transition), color var(--transition), border-color var(--transition); } .bouton.plein{ background:var(--vert); color:var(--ivoire); border:1px solid var(--vert); } .bouton.plein:hover{ background:transparent; color:var(--vert); } .bouton.vide{ border:1px solid var(--acier); color:var(--graphite); } .bouton.vide:hover{ background:var(--papier); } /* Sur fond sombre */ .sombre .bouton.plein{ background:var(--or-clair); color:var(--vert-nuit); border-color:var(--or-clair); } .sombre .bouton.plein:hover{ background:transparent; color:var(--or-clair); } .sombre .bouton.vide{ border-color:rgba(201,162,77,.55); color:var(--or-clair); } .sombre .bouton.vide:hover{ background:rgba(201,162,77,.14); } /* ============================================================================ LES SURFACES VERTES — un seul traitement, décliné selon le rôle ---------------------------------------------------------------------------- Quatre surfaces du site sont vertes : le bandeau du nom, les six cartes de métier, la bande d'entrée des pages de métier, la fin de page. Avant ce bloc, chacune avait reçu son propre traitement au fil des essais — deux halos radiaux sur le bandeau, un dégradé à deux couleurs sur les cartes, un aplat mort sur le pied. Des verts qui ne se ressemblaient pas. LA MÉCANIQUE EST LA MÊME PARTOUT : · un dégradé vertical, toujours de 0 % à 100 % de la surface — jamais en pixels. Une carte qui grandit sur un grand écran garde son modelé ; un dégradé calé en pixels s'y serait aplati. · la lumière tombe du haut. Clair en haut, sombre en bas. Sans exception, y compris sur les surfaces qui sont en bas de page. · le même grain, à la même force, DERRIÈRE le contenu (z-index:-1 sous `isolation:isolate`). Il ne peut donc pas passer sur les traits fins des illustrations dorées : ce n'est pas un réglage d'opacité qui les protège, c'est l'ordre des couches. CE QUI CHANGE D'UNE SURFACE À L'AUTRE : deux crans de la rampe --v1…--v5, et rien d'autre. DEUX RÉGLAGES, PAS UN. L'amplitude dit COMBIEN de crans ; la position dit LESQUELS. Les deux ont leur règle, et elles sont indépendantes. L'AMPLITUDE SUIT LE RÔLE Un objet détouré prend toute la rampe. Une bande pleine largeur en prend deux. Un objet a quatre bords qui bornent son dégradé et le rendent lisible ; une bande n'en a pas, et au-delà de deux crans elle cesse d'être une surface pour devenir un effet. LA POSITION SUIT LA PLACE DANS LA PAGE Ce qui est en haut prend les crans hauts, ce qui est en bas les crans bas. La page entre par v2 et sort par v5 : elle s'éclaire en arrivant et s'éteint en partant. C'est la même lumière à l'échelle du document, et pas seulement à celle de chaque bloc. CE QUE ÇA DONNE, MESURÉ : BANDEAU DU NOM 2 crans v2 → v4 118 px Une bande, donc deux crans — et les crans HAUTS, il ouvre la page. Bridé aussi pour une raison qui lui est propre : il porte des capitales d'or fines sur toute sa largeur, et au-delà de deux crans le contraste de l'or change entre le sommet et la base des lettres. BANDE D'ENTRÉE 2 crans v2 → v4 ≈ 400 px Une bande, donc deux crans — et les MÊMES que le bandeau du nom, qui est juste au-dessus d'elle sur une page de métier. Deux bandes vertes qui se suivent à trois pixels l'une de l'autre doivent parcourir la même distance, sinon la seconde repart plus clair ou plus sombre que la première n'a fini, et la jointure se voit comme une marche. Elle est trois fois plus haute pour les deux mêmes crans : c'est la pente la plus douce du site, et c'est voulu — elle porte un titre de 54 px et une carte de papier, pas des capitales fines. CARTE DE MÉTIER 4 crans v1 → v5 403 px Un objet détouré, le seul du site : toute la rampe. La carte doit se lire comme une plaque bombée, pas comme une découpe. C'est la pente la plus raide de la page — un cran tous les 100 px — et c'est justement ce qui la détache du papier. PIED DE PAGE 2 crans v3 → v5 ≈ 337 px Une bande, donc deux crans — et les crans BAS, il ferme la page. Il finit sur v5 : rien ne vient après, la page s'éteint. Avant que la bande d'appel n'y soit fondue, la fin de page faisait 962 px en deux blocs et prenait trois crans. Elle en fait trois fois moins aujourd'hui, en un seul : à trois crans sur 337 px la pente aurait triplé, et un fond de page se serait mis à ressembler à une carte. `.sombre` reste un aplat : c'est v5, le dernier cran de la rampe. Une surface sans dégradé qui se tient au bout de l'échelle est dans le système, pas à côté. La liste ci-dessous est la liste COMPLÈTE des surfaces vertes du site. Rien d'autre n'est vert. Ajouter une surface verte, c'est l'ajouter ici — pas lui écrire un traitement à elle. ============================================================================ */ .ent-plaque, .ent-metier, .tr-carte, .pied{ position:relative; isolation:isolate; } .ent-plaque::after, .ent-metier::after, .tr-carte::after, .pied::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:var(--grain-force); background-image:var(--grain-tissu); } /* ============================================================================ L'EN-TÊTE — le même mobilier sur les neuf pages ---------------------------------------------------------------------------- Trois bandes, dans cet ordre, aux mêmes places partout : 1 · LA BANDE DU LOGO ivoire le bouton et le nom composé à gauche, l'ancienneté et l'état d'ouverture au centre, le téléphone à droite 2 · LA PLAQUE DU NOM vert le nom en or et son filet. C'est la SEULE surface verte de l'en-tête, et la seule à porter le dégradé et le grain. Le second endroit vert de la page est le bloc des six cartes, et il n'y en a pas d'autre. 3 · LA NAVIGATION ivoire les huit entrées, centrées D'une page à l'autre, deux choses seulement changent, et elles le doivent : l'entrée de menu marquée `aria-current`, et la balise du nom — `h1` sur l'accueil, où le nom EST le titre de la page, `p` ailleurs, où la page a déjà le sien. Tout le reste est identique au caractère près. CE QUI RESTE À L'ÉCRAN, ET POURQUOI SEULEMENT ÇA La bande 1, et rien d'autre : 61 px. C'est la bande des FAITS — le nom, si c'est ouvert, et le numéro. Ce sont les trois choses qu'on vient chercher en cours de lecture, et le numéro est la seule action du site qui compte vraiment : il doit être atteignable sans jamais remonter. LA NAVIGATION NE COLLE PLUS. Elle collait, et c'était le mauvais choix : un menu de huit entrées ne sert qu'une fois, au moment où l'on décide où aller. Le garder à l'écran pendant toute la lecture, c'était réserver 52 px à une décision déjà prise. Elle défile maintenant avec la page. Elle reste posée HORS du `
` — un `