/* =========================================================================== 1 — FONDATIONS --------------------------------------------------------------------------- Ce que contient ce fichier, et RIEN d'autre : A. les polices (auto-hebergees) B. les jetons de design (couleurs, espacements, tailles) — la SEULE source de verite pour toute valeur visuelle du site C. la remise a zero du navigateur D. la typographie de base E. les utilitaires et les regles d'accessibilite REGLE DE MAINTENANCE, valable pour les quatre fichiers CSS : aucune couleur, aucun espacement, aucun rayon ne doit apparaitre en dur ailleurs que dans la section B ci-dessous. Si vous ecrivez `#3a5a44` dans `2-composants.css`, c'est un bug de maintenance : la valeur existe deja sous le nom `--foret`, et le jour ou le client voudra changer sa couleur, il faudra la retrouver dans quatre fichiers au lieu d'une ligne. ORDRE DE CHARGEMENT (defini dans layout.njk, ne pas modifier) : 1-fondations -> 2-composants -> 3-pages -> 4-animations Chaque fichier peut surcharger le precedent, jamais l'inverse. C'est ce qui evite la guerre de specificite et les `!important`. =========================================================================== */ /* --------------------------------------------------------------------------- A. POLICES --------------------------------------------------------------------------- Auto-hebergees dans /public/fonts, jamais chargees depuis Google Fonts. Trois raisons, dans l'ordre : 1. JURIDIQUE. Appeler fonts.googleapis.com transmet l'IP du visiteur a un tiers hors UE sans consentement. Des tribunaux europeens ont deja condamne cette pratique. Un site francais qui heberge ses polices n'a simplement pas le probleme. 2. FIABILITE. Aucune dependance a un service tiers qui peut tomber, ou changer d'URL dans cinq ans. 3. VITESSE. Une requete vers notre propre domaine, deja ouvert, au lieu d'une resolution DNS + connexion TLS vers un autre domaine. Les deux familles sont sous licence libre (OFL 1.1), voir /public/fonts/LICENCES.txt. Sous-ensemble latin uniquement : 71 Ko au total pour les trois fichiers. `font-display: swap` : le texte s'affiche IMMEDIATEMENT avec la police systeme, puis bascule quand la police arrive. Jamais de texte invisible. --------------------------------------------------------------------------- */ /* Fraunces — police de titrage. Variable (un seul fichier pour toutes les graisses) et surtout coupe "wonk" : ses italiques et certaines lettres ont un dessin volontairement irregulier, herite des enseignes peintes. C'est ce qui donne au site un caractere artisanal plutot qu'un rendu de gabarit. Utilisee UNIQUEMENT en grande taille (h1, h2, prix, chiffres) : en petit corps elle devient fatigante. */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; /* plage complete de l'axe variable */ font-display: swap; src: url('/public/fonts/fraunces-wonk-variable.woff2') format('woff2-variations'); } /* Atkinson Hyperlegible — police de texte courant. Choix delibere, et c'est le plus important de cette refonte : elle a ete dessinee par le Braille Institute pour les personnes malvoyantes. Chaque lettre est rendue distincte de celles qui lui ressemblent (I / l / 1, O / 0, b / d). Le public d'un gite comprend beaucoup de personnes de plus de 60 ans qui lisent sur telephone, en exterieur, au soleil. Cette police est mesurablement plus lisible pour elles qu'une grotesque neutre. */ @font-face { font-family: 'Atkinson'; font-style: normal; font-weight: 400; font-display: swap; src: url('/public/fonts/atkinson-400.woff2') format('woff2'); } @font-face { font-family: 'Atkinson'; font-style: normal; font-weight: 700; font-display: swap; src: url('/public/fonts/atkinson-700.woff2') format('woff2'); } /* --------------------------------------------------------------------------- B. JETONS DE DESIGN --------------------------------------------------------------------------- La palette est relevee sur la maison elle-meme et sur le logo, pas sur un nuancier generique : le crepi creme de la facade, le bois clair des volets, la pelouse, et le vert du bandeau du logo. Le site et le logo ne se contredisent donc pas — c'est ce qui evite l'effet « logo colle par-dessus un habillage concu sans lui ». CONTRASTE : toutes les paires texte/fond respectent le niveau AA du WCAG (4,5:1 minimum). Le bois fait exception et n'est JAMAIS utilise pour du texte — uniquement en filet, en soulignement et en pastille. C'est une regle, pas une preference. --------------------------------------------------------------------------- */ :root { /* --- Couleurs : encre et surfaces --- */ --encre: #1b1d18; /* texte principal — 15,1:1 sur --chaux */ --encre-douce: #565b50; /* texte secondaire — 6,0:1 sur --chaux */ --encre-tenue: #8b8f82; /* mentions, desactive — 3,1:1 : jamais de texte important dans cette couleur */ --chaux: #f6f4ed; /* fond de page — le crepi de la facade */ --chaux-creuse: #eceadd; /* fond de zone en retrait */ --blanc: #ffffff; /* fond de carte */ --filet: #ddd9cb; /* bordures fines */ /* --- Couleurs : accents --- */ --foret: #2f5c22; /* actions principales — 8,3:1 sur blanc. C'est le vert du bandeau du logo. */ --foret-clair: #3f7430; /* survol */ --bois: #c1691a; /* le bois des volets. Filet et decoration UNIQUEMENT : 3,4:1, insuffisant pour du texte */ --bois-pale: #f7e8d6; /* fond de surlignage */ /* --- Couleurs : etats --- */ --succes: #22603f; --succes-fond: #e3efe7; --alerte: #8f2727; --alerte-fond: #f9e9e7; /* Jours pris dans le calendrier. Volontairement SOMBRE : la version precedente etait un beige a peine different du fond, et la difference entre « libre » et « occupe » etait invisible en plein jour sur un telephone. Contraste avec le blanc du texte : 5,1:1. */ --occupe: #6b7263; /* --- Espacements --- Echelle geometrique. N'inventez pas de valeur intermediaire : si `--e4` est trop petit et `--e5` trop grand, c'est presque toujours que la structure du bloc est a revoir, pas l'espacement. */ --e1: 0.25rem; /* 4 px */ --e2: 0.5rem; /* 8 px */ --e3: 0.75rem; /* 12 px */ --e4: 1rem; /* 16 px */ --e5: 1.5rem; /* 24 px */ --e6: 2.5rem; /* 40 px */ --e7: 4rem; /* 64 px */ --e8: 6rem; /* 96 px */ /* --- Structure --- */ --largeur: 1120px; /* largeur maximale du contenu */ --largeur-texte: 66ch; /* largeur de lecture confortable : au-dela, l'oeil perd la ligne en revenant a gauche */ --rayon: 10px; --rayon-petit: 6px; /* --- Ombres --- Une seule direction (vers le bas), une seule couleur (l'encre transparente). Deux niveaux, pas cinq. */ --ombre-1: 0 1px 2px rgb(27 29 24 / 6%), 0 2px 8px rgb(27 29 24 / 4%); --ombre-2: 0 4px 12px rgb(27 29 24 / 8%), 0 12px 32px rgb(27 29 24 / 8%); /* --- Mouvement --- Deux durees et deux courbes pour tout le site. Une interface coherente bouge partout a la meme vitesse. */ --duree-vive: 140ms; /* survol, focus : doit paraitre instantane */ --duree-douce: 420ms; /* apparitions, ouvertures */ --courbe: cubic-bezier(0.22, 0.61, 0.36, 1); /* sortie amortie */ /* --- Scene de page --- Valeur par defaut, surchargee page par page dans 3-pages.css. */ --scene: url('/public/img/scenes/accueil.webp'); --scene-position: center 45%; } /* --------------------------------------------------------------------------- C. REMISE A ZERO --------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { /* Le defilement declenche par un lien d'ancre est adouci — mais la regle `prefers-reduced-motion` en fin de 4-animations.css l'annule pour qui l'a demande. */ scroll-behavior: smooth; /* Les ancres ne se retrouvent pas cachees sous l'en-tete colle. */ scroll-padding-top: 6rem; } body { margin: 0; background: var(--chaux); color: var(--encre); font-family: 'Atkinson', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 1.0625rem; /* 17 px */ line-height: 1.65; /* Chiffres a chasse fixe : les prix et les dates ne "sautent" pas d'un ligne a l'autre dans les tableaux et les calendriers. */ font-variant-numeric: tabular-nums; -webkit-text-size-adjust: 100%; } img, svg, video { max-width: 100%; height: auto; display: block; } /* --------------------------------------------------------------------------- D. TYPOGRAPHIE --------------------------------------------------------------------------- Deux regles gouvernent tout : 1. Fraunces (serif) au-dessus de 1,3 rem, Atkinson (sans) en dessous. Le serif porte l'identite dans les titres ; le sans porte la lisibilite dans le texte, les etiquettes et les boutons. Aucun titre de niveau 3 ou 4 en serif : a cette taille, le dessin "wonk" nuit a la lecture. 2. Tailles fluides via clamp(min, prefere, max). Aucune requete media n'est necessaire pour la typographie : elle s'adapte en continu entre 320 px et 1120 px de large. --------------------------------------------------------------------------- */ h1, h2 { font-family: 'Fraunces', Georgia, 'Times New Roman', serif; /* opsz = taille optique : le dessin de la lettre s'epaissit legerement en petit corps et s'affine en grand. C'est ce que faisaient les fondeurs de caracteres en plomb, et Fraunces le reproduit. */ font-variation-settings: 'opsz' 60, 'SOFT' 30, 'WONK' 1; font-weight: 500; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; /* evite le mot orphelin sur la derniere ligne */ margin: 0; } h1 { font-size: clamp(2.1rem, 1.35rem + 3.2vw, 3.5rem); } h2 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.15rem); margin-top: var(--e7); } h3 { font-family: inherit; /* sans-serif : voir regle 1 ci-dessus */ font-size: 1.1rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.005em; margin: 0 0 var(--e2); } p { margin: 0 0 var(--e4); } a { color: var(--foret); /* Soulignement decale sous la ligne de base, plus fin que le defaut : lisible sans hacher les jambages des lettres. */ text-decoration-color: color-mix(in srgb, var(--foret) 35%, transparent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; transition: color var(--duree-vive) var(--courbe), text-decoration-color var(--duree-vive) var(--courbe); } a:hover { color: var(--foret-clair); text-decoration-color: var(--bois); } strong, b { font-weight: 700; } /* --------------------------------------------------------------------------- E. UTILITAIRES ET ACCESSIBILITE --------------------------------------------------------------------------- */ .conteneur { max-width: var(--largeur); margin-inline: auto; padding-inline: var(--e5); } /* Bloc de texte long : limite a une largeur de lecture confortable. */ .prose { max-width: var(--largeur-texte); } .prose p:last-child { margin-bottom: 0; } .discret { color: var(--encre-douce); font-size: 0.9375rem; } .rouge { color: var(--alerte); } /* "Donnee" : coordonnees GPS, references, dates techniques. Chasse fixe + majuscules espacees : se lit comme une plaque gravee, et se distingue immediatement du texte redige. */ .donnee { font-family: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, monospace; font-size: 0.8125rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--encre-douce); } /* Visible uniquement par les lecteurs d'ecran. */ .pour-lecteur-ecran { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Lien d'evitement : premier element focusable de la page. */ .evitement { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--encre); color: var(--blanc); padding: var(--e3) var(--e4); border-radius: 0 0 var(--rayon-petit) 0; } .evitement:focus { left: 0; } /* ANNEAU DE FOCUS — ne jamais supprimer. Le retirer rend le site inutilisable au clavier : c'est la regression d'accessibilite la plus frequente du web, et elle est invisible pour qui teste a la souris. Deux anneaux (sombre + clair) pour rester visible aussi bien sur fond clair que sur une photo. */ :focus-visible { outline: 3px solid var(--encre); outline-offset: 2px; border-radius: var(--rayon-petit); box-shadow: 0 0 0 6px var(--bois); } /* MODE CONFORT — bouton "Texte plus grand" de l'en-tete. Agit sur la racine : tout le site etant dimensionne en rem, une seule ligne agrandit l'integralite de l'interface de facon proportionnelle, sans jamais casser une mise en page. La preference est conservee en localStorage (voir ui.js). */ html.confort { font-size: 118%; } /* Le piege a robots des formulaires doit etre invisible pour un humain SANS `display:none`, que les robots savent detecter. */ .piege { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }