/* ========================================================================== POLICES — ELLES VIVENT ICI, PAS DANS kit.css -------------------------------------------------------------------------- Leçon apprise à mes dépens : kit.css est RECOPIÉ depuis kit/ à chaque amélioration du kit. Tout ce qui y est propre à un client finit donc écrasé sans bruit — c'est arrivé, et le site a rendu en Georgia pendant plusieurs commits sans que rien ne le signale. theme.css, lui, ne se recopie jamais. Les polices sont aussi propres au client que ses couleurs : leur place est ici. Les deux familles de la charte, auto-hébergées dans fonts/. Aucun appel à un serveur tiers : un aller-retour réseau de moins, et aucune adresse IP de visiteur transmise hors Union européenne. unicode-range fait le gros du travail de poids : le navigateur ne télécharge latin-ext QUE si la page contient un caractère qui s'y trouve. Les pages françaises n'en contiennent aucun — le « œ » est dans la plage latine — donc le visiteur charge 48,3 Ko sur les 84,4 Ko présents sur le serveur. Le Cormorant livré est STATIQUE, graisse 400 uniquement. Le Jost est une fonte VARIABLE, axe wght 100-900 : un seul fichier couvre 400, 500 et 600, d'où l'absence de fichier séparé pour le gras. font-display: swap → le texte s'affiche immédiatement dans la police de secours puis bascule. Jamais de texte invisible pendant le chargement. ========================================================================== */ @font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; 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: "Cormorant Garamond"; src: url("../fonts/cormorant-latin-ext.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Jost"; src: url("../fonts/jost-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; 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: "Jost"; src: url("../fonts/jost-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ========================================================================== THEME — MAISON HIRET -------------------------------------------------------------------------- Fidèle à la charte graphique V1 — 09.2026. C'est LE seul fichier à modifier pour rhabiller la page : aucun composant du kit ne contient de couleur, de taille ni d'espacement écrit en dur. DEUX VALEURS SONT DES AJOUTS À LA CHARTE, à faire valider par le concepteur. Elles sont signalées « HORS CHARTE » ci-dessous et n'introduisent aucune teinte nouvelle : ce sont les couleurs de la charte, assombries. ========================================================================== */ :root { /* ------------------------------------------------------------------ 1. PALETTE — les cinq couleurs de la charte, plus deux ajouts documentés ------------------------------------------------------------------ */ --vert-maison: #3F5A4B; /* aplats, signature, couverture 6,7:1 sur Papier */ --encre: #101314; /* textes, logo sur fond clair 16,6:1 sur Papier */ --gris-moyen: #A8AEA9; /* FILETS UNIQUEMENT — voir la note ci-dessous */ --gris-clair: #D5D8D4; /* fonds secondaires */ --papier: #F1F2F0; /* fond principal */ /* Le blanc pur ne figure PAS dans la charte : elle s'arrête au Papier. Il ne sert qu'aux états de survol sur le vert, où le Papier manque d'un cran de contraste, et jamais en aplat de page. */ --blanc: #FFFFFF; /* HORS CHARTE nº 1 — gris de texte. La charte affecte le gris moyen aux « filets ET légendes ». Or #A8AEA9 sur Papier ne donne que 2,01:1, là où un texte exige 4,5:1 : une légende dans ce gris est illisible pour une partie des visiteurs, et met le site en défaut d'accessibilité. #676F69 est le MÊME gris — teinte 130°, saturation 4 %, à l'identique — simplement assombri de 67 % à 42 % de clarté jusqu'à atteindre 4,61:1. Le gris moyen de la charte reste employé, mais pour les filets seuls, qui sont décoratifs et n'ont aucune exigence de contraste. */ --gris-texte: #676F69; /* 4,61:1 sur Papier — plancher AA */ /* HORS CHARTE nº 2 — survol. La charte ne prévoit pas d'état de survol. Le Vert Maison assombri de 8 % de clarté, teinte et saturation intactes. */ --vert-survol: #2E4237; /* HORS CHARTE nº 3 — erreur. La seule teinte réellement nouvelle du fichier. La charte tient en un vert, une encre et trois gris : aucune ne peut signaler une erreur sans se confondre avec le reste. Un rouge est ici une nécessité fonctionnelle, pas un choix esthétique — et il n'apparaît que sur un champ fautif. */ --erreur: #A8261B; /* 6,4:1 sur Papier */ /* ------------------------------------------------------------------ 2. RÔLES — ce que le kit utilise réellement La charte ne comporte AUCUNE couleur d'appel : « deux couleurs portent l'identité, le vert et l'encre ». L'appel à l'action ne peut donc pas se distinguer par la couleur — il se distingue par le REMPLISSAGE. Le vert n'apparaît en aplat que sur les boutons et le pied de page ; partout ailleurs la page est en encre sur papier. C'est cette rareté qui fait que le bouton se voit. ------------------------------------------------------------------ */ --c-fond: var(--papier); --c-fond-alt: var(--blanc); /* section alternée : plus claire, pas plus foncée */ --c-fond-teinte: var(--gris-clair); --c-fond-sombre: var(--vert-maison); --c-texte: var(--encre); --c-texte-doux: var(--gris-texte); --c-texte-tertiaire: var(--gris-texte); --c-texte-inverse: var(--papier); /* sur le vert : 6,7:1 */ --c-primaire: var(--vert-maison); --c-primaire-sombre: var(--vert-survol); --c-accent: var(--vert-maison); /* pas de couleur d'appel dans la charte */ --c-accent-sombre: var(--vert-survol); --c-sur-accent: var(--papier); --c-bordure: var(--gris-moyen); /* filet : décoratif, aucune exigence */ --c-lien: var(--vert-maison); /* 6,7:1 */ --c-lien-survol: var(--vert-survol); --c-focus: var(--vert-maison); --succes: var(--vert-maison); /* ------------------------------------------------------------------ 3. TYPOGRAPHIE — les deux familles de la charte, aucune autre Auto-hébergées dans fonts/. Aucun appel à un serveur tiers. ------------------------------------------------------------------ */ --f-titre: "Cormorant Garamond", Georgia, "Times New Roman", serif; --f-texte: "Jost", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif; /* Le Cormorant paraît, à corps égal, nettement plus petit qu'une linéale : les titres sont donc portés d'un cran. NOTE : les titres ne sont PAS en capitales, contrairement à ce que prescrit la charte — voir l'écart assumé plus bas, demandé le 10 septembre 2026. */ --t-xs: 0.8125rem; /* 13px — légendes. La charte dit 9 pt (12px) ; 13px est retenu pour la lisibilité, c'est le seul écart de taille et il va dans le sens du lecteur. */ --t-sm: 0.875rem; /* 14px */ --t-base: 1rem; /* 16px — texte courant */ --t-md: clamp(1.0625rem, 0.5vw + 0.95rem, 1.1875rem); /* 17 → 19px — chapô */ --t-lg: clamp(1.375rem, 1.1vw + 1.13rem, 1.625rem); /* 22 → 26px — h3 */ --t-xl: clamp(1.625rem, 1.8vw + 1.25rem, 2.25rem); /* 26 → 36px — h2 */ --t-2xl: clamp(2rem, 3.2vw + 1.25rem, 3.25rem); /* 32 → 52px — h1 */ --p-normal: 400; --p-moyen: 500; --p-gras: 600; /* Jost 600 : la charte ne monte pas au-delà */ --i-serre: 1.12; /* bas de casse : l'interligne se resserre */ --i-normal: 1.4; --i-lache: 1.7; /* charte : interligne 1,7 pour le texte courant */ /* Interlettrage des capitales. La charte impose 0,20 à 0,32 em ; les titres de cette page étant longs, on reste au bas de la fourchette. */ --l-titre: 0.20em; --l-normal: 0; --l-large: 0.20em; /* surtitres et mentions en capitales */ /* ------------------------------------------------------------------ 4. ESPACEMENTS — échelle base 4px ------------------------------------------------------------------ */ --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; --e-7: 3rem; --e-8: 4rem; --e-9: 6rem; --e-section: clamp(3.5rem, 7vw, 6.5rem); /* la charte veut de l'air */ --e-gouttiere: clamp(1rem, 4vw, 2rem); /* ------------------------------------------------------------------ 5. RAYONS La charte est anguleuse : logo frappé, capitales, filets droits. Les rayons sont donc quasi nuls — un bouton en pilule jurerait avec le didone. ------------------------------------------------------------------ */ --r-sm: 0; --r-md: 2px; --r-lg: 3px; --r-xl: 4px; --r-plein: 2px; /* volontairement PAS 999px : pas de pilule dans cette charte */ /* ------------------------------------------------------------------ 6. OMBRES La charte interdit « ni ombre ni relief ». Les ombres sont donc neutralisées, sauf celles qui portent une information de position. ------------------------------------------------------------------ */ --o-sm: none; --o-lg: none; --o-collant: 0 -1px 0 var(--gris-moyen); /* filet, pas ombre : sépare la barre */ --o-focus: 0 0 0 3px rgba(63, 90, 75, 0.35); /* ------------------------------------------------------------------ 7. MISE EN PAGE ------------------------------------------------------------------ */ --l-contenu: 66ch; --l-etroit: 44rem; --l-page: 72rem; /* En rem et non en px : ces deux barres contiennent du texte, et en px elles ne suivent pas un visiteur qui agrandit la taille de police de son navigateur — leur contenu déborde alors de sa barre. */ --h-entete: 4rem; /* 64px par défaut ; le logo de la charte demande 32px + sa marge */ --h-collant: 4.25rem; /* ------------------------------------------------------------------ 8. MOUVEMENT ET SUPERPOSITION ------------------------------------------------------------------ */ --d-rapide: 120ms; --d-normal: 200ms; --courbe: cubic-bezier(0.2, 0, 0.2, 1); /* Scènes animées (kit.css, 6B) : durée d'une lecture, nombre de lectures avant l'arrêt sur l'image complète, largeur maximale du dessin d'outil. */ --d-scene: 6s; --n-scene-boucles: 3; --l-scene-outil: 22rem; --z-collant: 50; --z-entete: 60; --z-modale: 100; } @media (prefers-reduced-motion: reduce) { :root { --d-rapide: 0ms; --d-normal: 0ms; } } /* ========================================================================== RÈGLES DE CHARTE Ce qui ne peut pas s'exprimer par une variable. Propre à Maison Hiret : ces règles ne sont PAS dans le kit, qui doit rester générique. ========================================================================== */ /* ÉCART À LA CHARTE, demandé le 10 septembre 2026. La charte impose les capitales espacées pour les titres et intertitres. En capitales, le titre d'accueil occupait cinq lignes à 375px et repoussait tout le reste. Les titres passent donc en bas de casse. L'écart est étendu aux h2 et h3 volontairement : un h1 en bas de casse au-dessus de sous-titres en capitales inverserait la hiérarchie — les sous-titres crieraient plus fort que le titre. Les surtitres et les mentions restent en capitales espacées : ce sont des étiquettes, pas des titres, et la charte prévoit ce cas. C'est ce qui garde une trace de l'identité. Interlettrage légèrement négatif : le Cormorant en bas de casse et en grand corps se resserre, là où les capitales avaient besoin d'air. */ h1, h2, h3 { text-transform: none; letter-spacing: -0.01em; font-weight: var(--p-normal); /* le Cormorant tient en 400, même en grand */ } /* Le mot-marque de l'en-tête suit la même règle que le logo. */ /* Le poinçon du kit est carré ; ce monogramme ne l'est pas (77 × 72). Forcer le carré l'écraserait de 7 % — sur un logo, c'est visible et c'est une faute. On ne fixe donc que la hauteur, et la largeur suit. 2 em et non 1,65 : la charte impose 32 px au minimum au monogramme. Pas davantage non plus — à 2,2 em il mesurait 35 px et, avec les 2 × 16 px de retrait du lien, poussait la barre à 67 px alors que --h-entete en vaut 64. En em plutôt qu'en px pour qu'il grandisse avec le nom si le visiteur agrandit les caractères de son navigateur. */ .entete__poincon { inline-size: auto; block-size: 2em; } /* Sous 26em (416 px), le nom s'efface et le monogramme reste seul. Mesuré à 375 px : monogramme, nom, sélecteur de langue et bouton ne tiennent pas sur une ligne — le nom se repliait sur deux et la barre passait de 64 à 68 px. Un monogramme est fait pour tenir seul, c'est sa raison d'être ; un nom coupé en deux, non. Masqué visuellement, pas retiré : le texte reste dans le DOM, donc le lien garde son nom accessible et une synthèse vocale annonce « Maison Hiret » et non « lien, image ». */ @media (max-width: 25.99em) { .entete__marque-nom { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } .entete__marque { font-family: var(--f-titre); font-size: var(--t-base); font-weight: var(--p-normal); text-transform: uppercase; /* 0,12em et non 0,20 : à 375px, l'interlettrage de titrage replie « MAISON HIRET » sur deux lignes et casse la barre. La charte réserve 0,20 à 0,32 em au TITRAGE ; l'en-tête est de l'interface. */ letter-spacing: 0.12em; /* PAS de white-space: nowrap. Mesuré à 320px : une fois le sélecteur de langue et l'appel à l'action posés, il reste 92px pour un mot-marque qui en demande 135. Avec nowrap le texte débordait de sa boîte et CHEVAUCHAIT le sélecteur — un nom de marque illisible sur le plus petit téléphone encore en service. Aucun réglage de corps ni d'interlettrage ne fait tenir 135px dans 92 : le repli sur deux lignes est la seule réponse. La barre s'allonge alors de quelques pixels à 320px, et à 375px rien ne bouge. */ /* Le kit réserve 16px à droite du mot-marque, pour qu'un nom de trois lettres garde une largeur minimale. « MAISON HIRET » en fait douze : ce retrait lui volait les 5px qui lui manquaient pour tenir sur une ligne à 375px. Mesuré : 146px disponibles, 135px nécessaires, 130px restants avec le retrait. */ padding-inline-end: 0; } /* Les boutons restent en Jost, bas de casse : ce sont des interfaces, pas du titrage, et la charte réserve les capitales espacées au titrage. */ .bouton { font-family: var(--f-texte); text-transform: none; letter-spacing: 0; } /* Le lien vert ne se distingue du texte encre que par sa couleur (6,7:1 contre 16,6:1) : dans un corps de texte, le soulignement reste obligatoire. */ .page-legale__corps a, .section__chapo a, .formulaire__mention a { text-decoration: underline; } /* LES CHIFFRES NE SONT PAS DES TITRES. Le kit compose le prix, le résultat chiffré et le nom du pied de page dans la police de titrage, avec --l-titre. Cette variable valait -0,02em ; la charte l'a portée à 0,20em pour les capitales espacées. Un prix reçoit alors un interlettrage de titrage et « 890 € » se lit « 8 9 0 € ». Un nombre se lit d'un bloc : on lui rend un interlettrage nul. */ .tarifs__montant, .tarifs__unite, .realisations__chiffre { letter-spacing: 0; } /* Le nom dans le pied de page est le mot-marque : il suit la même règle que celui de l'en-tête, capitales comprises. */ .pied__nom { text-transform: uppercase; letter-spacing: 0.12em; } /* --------------------------------------------------------------------------- SECTIONS SOMBRES — correction OBLIGATOIRE avec cette charte. Le kit peint les liens et les intertitres des sections sombres en --c-accent, en supposant qu'un accent tranche sur le fond sombre. Ici la charte n'a PAS de couleur d'appel : --c-accent et --c-fond-sombre valent tous deux le Vert Maison. Sans les règles ci-dessous, l'adresse e-mail et les liens légaux du pied de page s'affichent en vert sur vert — contraste mesuré 1,00:1, soit strictement invisibles. Retenir la leçon pour les prochains clients : dès qu'une charte fait coïncider la couleur d'accent et le fond sombre, ce bloc est à reprendre. --------------------------------------------------------------------------- */ .section--sombre a, .pied__lien { color: var(--papier); /* 6,7:1 sur le vert */ text-decoration: underline; /* seul repère : la couleur ne distingue plus */ } .section--sombre a:hover, .pied__lien:hover { color: var(--blanc); /* 7,6:1 */ } .pied__titre, .section--sombre .section__surtitre { color: var(--gris-clair); /* 5,3:1 — assez en retrait pour hiérarchiser */ } /* L'ANNEAU DE FOCUS AUSSI DISPARAÎT SUR LE VERT. Le kit repeint l'anneau en --c-accent sur les fonds sombres, en supposant qu'un accent y tranche. Ici --c-accent EST la couleur du fond : l'anneau tombait à 1,00:1, soit rigoureusement invisible. Conséquence concrète : un visiteur au clavier arrivait dans le pied de page et perdait toute trace de sa position sur les trois liens. Le bloc plus haut avait corrigé ce piège pour la COULEUR DES LIENS ; l'anneau avait été oublié. Le papier donne 6,7:1, au-dessus des 3:1 exigés pour un indicateur d'interface. */ .pied :focus-visible, .section--sombre :focus-visible, .accroche--sombre :focus-visible { outline-color: var(--papier); } /* ET LE FILET DU BAS DU PIED, troisième victime du même piège : peint en --c-bordure, qui vaut le vert sur cette charte. 1,00:1, il ne séparait rien. --gris-moyen est le jeton documenté comme « filet : décoratif, aucune exigence » ; il donne 3,35:1 sur le vert, la même valeur que le filet retenu plus haut pour .accroche__surtitre. */ .pied__bas { border-top-color: var(--gris-moyen); } /* ========================================================================== COMPOSITION — le parti pris éditorial de Maison Hiret -------------------------------------------------------------------------- Le kit compose par défaut au centre, avec des aplats de fond pour séparer les sections et des pastilles pour marquer les listes. C'est efficace et neutre : ça convient à un client sans identité arrêtée. Ce n'est pas ce que cette charte demande. Trois décisions, toutes tirées de la charte elle-même : 1. LE FILET PLUTÔT QUE L'APLAT. La charte consacre une couleur entière aux filets — le gris moyen — et les emploie déjà sous le mot-marque du logo. Les sections se séparent donc par un filet, pas par un changement de fond. La page redevient une seule feuille de papier au lieu d'un empilement de bandes. 2. L'ALIGNEMENT À GAUCHE. Le centrage systématique aplatit la lecture et empêche l'œil de trouver un bord. Le fer à gauche donne une colonne, donc un rythme. Le logo de la charte est lui-même composé au fer. 3. UNE SEULE MASSE PLEINE SUR LA PAGE. La charte n'ayant pas de couleur d'appel, un aplat vert n'a de force que s'il est rare : il ne reste que sur le pied de page et les boutons. Le reste est encre sur papier. « LE LOGO RESPIRE : PRÉFÉRER TROP DE MARGE À TROP PEU », dit la charte. La règle vaut pour la page entière, d'où les espacements portés d'un cran. ========================================================================== */ /* --- Accroche : la couverture ----------------------------------------------- La charte donne trois emplois au Vert Maison : « aplats, signature, COUVERTURE ». L'accroche est la couverture de la page — c'est donc là qu'il a sa place, et nulle part ailleurs sur fond clair. Ce que ça règle : la page était uniformément en encre sur papier, séparée par des filets identiques. Cohérent, mais sans variation : l'œil n'avait aucun point d'entrée et l'ensemble s'aplatissait. Un aplat en ouverture donne à la page un moment, et rend le retour au papier lisible comme un changement de registre. --------------------------------------------------------------------------- */ .accroche { background-image: none; background-color: var(--c-fond-sombre); color: var(--c-texte-inverse); /* Dérivé de --e-section, comme toutes les autres sections. En valeurs fixes, l'accroche gardait 64 px de haut pendant que les sections suivantes montaient à 104 sur grand écran : le bloc le plus important de la page était le moins aéré, et élargir --e-section ne le rattrapait pas. */ padding-block: var(--e-section); } .accroche__contenu { /* --l-contenu et non --l-etroit : le filet de l'accroche mesurait 704 px quand les quatre filets d'en-tête de section en mesuraient 569. L'œil lisait un décrochement sans savoir d'où il venait. */ max-width: var(--l-contenu); margin-inline: 0; text-align: left; } /* --- L'illustration de l'accroche ------------------------------------------- DEUX COLONNES À PARTIR DE 62em SEULEMENT, et pas à 48em comme le reste du kit. Entre les deux, le texte tomberait à une largeur où le titre se briserait en trois lignes : on préfère l'accroche pleine largeur et le dessin dessous. SOUS 48em, LE DESSIN PASSE APRÈS LES BOUTONS dans l'ordre visuel, sans changer l'ordre du balisage. C'est la contrainte qui commande tout ce bloc : à 375 × 812, le bouton « Me contacter » est visible sans défiler, et une illustration glissée au-dessus l'aurait poussé hors de l'écran. Le dessin illustre, il ne prend pas la place de ce qui fait vendre. --------------------------------------------------------------------------- */ .accroche .conteneur { display: grid; gap: var(--e-7); } @media (min-width: 62em) { .accroche .conteneur { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); align-items: center; gap: var(--e-9); } } .accroche__visuel { display: flex; justify-content: center; } .accroche__dessin { inline-size: 100%; max-inline-size: 17rem; block-size: auto; /* Le tracé hérite du papier de l'accroche : une seule couleur à tenir, et le dessin suit automatiquement si la charte change de teinte inverse. */ color: var(--c-texte-inverse); } /* Sur les écrans étroits, le dessin est réduit et discret : il donne de la matière au bas de la couverture sans rivaliser avec le texte. */ @media (max-width: 61.99em) { .accroche__dessin { max-inline-size: 13rem; opacity: 0.85; } } /* En deçà de 22em, l'espace vertical est trop compté pour qu'un ornement justifie sa place. */ @media (max-width: 21.99em) { .accroche__visuel { display: none; } } /* Le champ de recherche du dessin animé prend le fond réel de l'accroche : le cache qui révèle la saisie en a la couleur, et doit se fondre dedans. Posé sur l'accroche et non sur la scène, pour que la scène en hérite. */ .accroche { --scene-champ: var(--c-fond-sombre); } /* Sur le vert, le filet du gris moyen tombe à 3,3:1 : il reste visible comme trait décoratif, mais on le retient un peu pour qu'il ne bagarre pas avec le texte en papier. */ .accroche__surtitre { padding-top: var(--e-4); border-top: 1px solid var(--gris-moyen); color: var(--gris-clair); /* 5,3:1 sur le vert */ } /* Le surtitre appartient à son titre, pas au filet : c'est le rapport qu'ont déjà les en-têtes de section, où l'écart vaut --e-2 et non --e-4. */ .accroche__surtitre + .accroche__titre { margin-top: var(--e-2); } .accroche__titre, .accroche__texte, .accroche__reassurance { color: var(--c-texte-inverse); /* 6,7:1 */ } /* Sur le vert, un bouton vert serait invisible. Le rapport s'inverse : l'appel à l'action devient un aplat de papier sur lequel le vert revient en texte. C'est le même couple de couleurs, retourné — pas une couleur de plus. */ .accroche .bouton--accent { background: var(--papier); color: var(--vert-maison); } .accroche .bouton--accent:hover { background: var(--blanc); color: var(--vert-survol); } .accroche .bouton--fantome { background: transparent; border-color: var(--gris-moyen); color: var(--c-texte-inverse); } .accroche .bouton--fantome:hover { background: var(--papier); color: var(--vert-maison); border-color: var(--papier); } /* L'anneau de focus vert du kit disparaîtrait sur le vert. */ .accroche :focus-visible { outline-color: var(--papier); } /* MÊME PIÈGE, sur la coche de la ligne de réassurance : le kit la peint en --c-accent, en supposant qu'un accent tranche sur un fond sombre. Ici --c-accent est la couleur du fond. Le tracé tombait à 1,00:1 — la coche était rigoureusement invisible, et la phrase commençait dans le vide. Le jeton est celui de la phrase qu'elle accompagne, pas une couleur brute : l'icône relève du même contrat « texte sur fond sombre ». 6,7:1. */ .accroche__icone { color: var(--c-texte-inverse); } .accroche__titre { max-width: 15ch; /* force la coupe là où elle est juste, pas où le hasard décide */ } .accroche__texte { max-width: 46ch; margin-inline: 0; } .accroche__actions { justify-content: flex-start; } .accroche__reassurance { justify-content: flex-start; } /* --- En-têtes de section : au fer, ouverts par un filet ------------------- */ .section__entete, .section__entete--centre { margin-inline: 0; text-align: left; } .section__surtitre { padding-top: var(--e-4); border-top: 1px solid var(--c-bordure); } /* Le filet de l'en-tête de section suffit à séparer : les fonds alternés deviennent inutiles et la page redevient d'un seul tenant. */ .section--alt { background: var(--c-fond); } /* --- « Ce que ça comprend » : une liste réglée, pas des pastilles ---------- */ .inclus__liste { gap: 0 var(--e-7); } .inclus__element { padding-inline-start: 0; padding-block: var(--e-5); border-top: 1px solid var(--c-bordure); } /* Le kit renforce les filets sous prefers-contrast en visant border-bottom-color. Ici le filet est EN HAUT : la règle du socle ne l'atteignait pas, et les deux plus grandes sections du site ne bougeaient pas d'un cheveu pour un visiteur qui demande plus de contraste. 4,61:1 au lieu de 1,72:1. */ @media (prefers-contrast: more) { .inclus__element { border-top-color: var(--c-texte-tertiaire); } } /* La pastille verte disparaît : le filet marque déjà l'article, et un disque par ligne ramenait six masses de couleur là où la charte en veut une. */ .inclus__element::before { content: none; } .inclus__titre { font-family: var(--f-titre); font-size: var(--t-lg); font-weight: var(--p-normal); letter-spacing: -0.01em; } .inclus__mention { margin-top: var(--e-7); padding: var(--e-5); background: var(--c-fond-teinte); text-align: left; } /* Le gris doux a été calculé contre le Papier, pas contre le gris clair de cet encart : #676F69 sur #D5D8D4 ne donne que 3,60:1, seule paire du site à passer sous les 4,5:1 exigés en AA. C'est aussi le seul endroit où ce gris quitte le fond de page — d'où l'oubli. On repasse à l'encre : 12,98:1. La hiérarchie interne de l'encart survit, .inclus__mention-cle restant en vert et d'un corps supérieur. */ .inclus__mention-detail { color: var(--c-texte); } /* --- Tarif : la carte se cerne d'un filet et ne se remplit pas ------------- */ /* Le kit centre les cartes pour qu'une offre seule ne s'étire pas. Ici le parti pris est le fer à gauche : centrée, la carte décrochait de 256 px du filet, du titre et de la mention, qui partent tous du même bord. */ .tarifs__liste { justify-content: flex-start; } .tarifs__carte { /* --e-5 et non --e-6 : à 375 px, 32 px de retrait poussent le contenu à 49 px du bord alors que toute la page est calée sur 16, et ne laissent que 277 px de largeur utile. Le kit avait raison, c'est ma surcharge qui avait tort. */ padding: var(--e-5); background: transparent; border-color: var(--c-bordure); /* var(--r-sm), qui vaut 0 dans cette charte, et non un 0 écrit en dur : le jour où l'échelle des rayons change, la carte suit. */ border-radius: var(--r-sm); box-shadow: none; } /* Le contenu de la carte suit l'alignement de la page. Centré, le prix et le nom de l'offre flottaient au-dessus d'une liste au fer : deux alignements dans un même objet, l'œil ne trouvait plus de bord. */ .tarifs__carte, .tarifs__nom, .tarifs__prix, .tarifs__modalites, .tarifs__pied, .tarifs__mention { text-align: left; } /* Le prix est le seul chiffre de la page : il porte seul, en grand corps. */ .tarifs__prix { padding-bottom: var(--e-4); border-bottom: 1px solid var(--c-bordure); } .tarifs__mention { max-width: var(--l-contenu); margin-inline: 0; } .tarifs__montant { font-size: var(--t-2xl); } /* ========================================================================== CORRECTIONS ISSUES DE LA RELECTURE DE DÉTAIL ========================================================================== */ /* LE CORMORANT N'EXISTE QU'EN GRAISSE 400. Trois éléments le demandaient en 600 via --p-gras : le navigateur fabriquait alors un FAUX GRAS en épaississant les contours, ce qui se voit immédiatement sur un caractère à fort contraste de pleins et de déliés. Les titres avaient déjà été ramenés à 400 ; ces trois-là avaient été oubliés. */ .tarifs__montant, .realisations__chiffre, .pied__nom, .inclus__mention-cle { font-weight: var(--p-normal); } /* LA COCHE SURVIVAIT À LA PASTILLE. Le bloc COMPOSITION neutralise ::before, le disque. Mais la coche est dessinée par ::after, qui subsistait : privée de son disque et de la gouttière que le fer à gauche a supprimée, elle se retrouvait posée sur le titre. */ .inclus__element::after { content: none; } /* 68 PX DE VIDE EN BAS DES PAGES SANS BARRE COLLANTE. Le kit réserve --h-collant sur TOUT body, pour que la barre ne masque pas la fin du document. Seul l'accueil en a une : les deux pages légales fermaient donc sur une bande de papier sous le pied de page vert, qui se lit comme un défaut de mise en page. :has() est la seule façon de poser cette règle sans classe supplémentaire à maintenir à la main sur quinze sites. */ body:not(:has(.cta-collant)) { padding-bottom: 0; } /* La couleur de la barre du navigateur reprenait #0F1511, le quasi-noir de l'ANCIENNE palette jaune et noir. Cette valeur n'existe nulle part dans la charte. Le vert de couverture est ce que le visiteur voit en haut de page : c'est lui que la barre doit prolonger. */ /* --- Formulaire : le champ souligné, pas cerné ------------------------------ Toute la page se compose au filet, sans aplat et au fer. Les champs étaient restés des boîtes d'interface posées sur une page imprimée : quatre bordures, un rayon, et un fond propre — alors que ce fond vaut déjà celui de la page, donc seule la bordure marquait la zone de saisie. On garde donc une seule bordure, en bas, portée à 2px pour qu'elle reste franchement visible : un champ qu'on ne repère pas n'est pas épuré, il est raté. La hauteur de cible tactile du kit n'est pas touchée. --------------------------------------------------------------------------- */ .formulaire__saisie { padding-inline: 0; background: transparent; border: 0; border-bottom: 2px solid var(--c-texte-tertiaire); border-radius: var(--r-sm); } .formulaire__saisie:hover { border-bottom-color: var(--c-primaire); } .formulaire__saisie:focus-visible { border-bottom-color: var(--c-primaire); } /* Le consentement était le seul aplat du formulaire — une deuxième masse pleine sur une page qui n'en veut qu'une. Le fond retiré, la case revient au fer avec les étiquettes des autres champs. La ligne entière reste cliquable et le min-height de 48px du kit tient toujours. */ .formulaire__consentement { padding: var(--e-3) 0; background: transparent; /* Pas de border-radius ici : sans fond ni bordure, il n'y a aucun angle à arrondir. Une déclaration qui ne peut rien changer se lit comme un oubli. */ } /* Une seule mesure de lecture dans les blocs étroits. --l-etroit (640 px) et --l-contenu (569 px) se manquaient de 71 px : le filet du surtitre n'atteignait pas le bord du formulaire, et celui du h1 des pages légales débordait du corps de texte. Un écart de 71 px se lit comme une erreur, pas comme une intention. */ .conteneur--etroit .formulaire, .page-legale__entete, .page-legale__sommaire { max-width: var(--l-contenu); } /* --- Fin de page : le vert descend jusqu'en bas de l'écran ------------------ Le kit réserve la hauteur de la barre collante sur le . Cette réserve se peignait en papier SOUS le pied de page vert : en fin de défilement, une bande claire de 68 px fermait le document à la place du vert. On reporte la réserve DANS le pied de page, qui la peint donc en vert. --------------------------------------------------------------------------- */ body:has(.cta-collant) { padding-bottom: 0; } /* Bornée à la largeur où la barre existe : au-delà de 48em le kit la retire, et le pied de page gardait 68 px de réserve pour un élément absent — un bas de page une fois et demie plus haut que son haut, sur les cinq accueils. */ @media (max-width: 47.99em) { body:has(.cta-collant) .pied { padding-bottom: calc(var(--e-section) + var(--h-collant)); } } /* =========================================================================== MASQUAGE DES CHAMPS NON RENSEIGNÉS --------------------------------------------------------------------------- EN CSS ET NON DANS LE BALISAGE, délibérément. Les valeurs manquantes — forme juridique, numéro d'immatriculation, adresse, hébergeur, service de formulaire — devront être écrites avant toute publication : les retirer du HTML obligerait à les réécrire, et à retraduire les intitulés dans cinq langues. Elles restent donc en place, simplement invisibles. POUR TOUT REVOIR, le jour où l'on remplit : supprimer ce bloc. Rien d'autre. CE BLOC NE REND PAS LES PAGES LÉGALES PUBLIABLES. Il cache ce qui manque, il ne le fournit pas. Les mentions d'identification de l'éditeur restent dues, et leur absence sur un site qui s'adresse au public français est une infraction pénale, pas un défaut de présentation. =========================================================================== */ .avis-brouillon, .a-completer { display: none; } /* Une rubrique dont la valeur manque disparaît ENTIÈREMENT, intitulé compris : un terme suivi du vide se lit comme un bogue, pas comme une attente. */ dd:has(> .a-completer:only-child), dt:has(+ dd > .a-completer:only-child) { display: none; } /* Deux lignes du pied de page ne contiennent QUE des champs manquants : masquer les champs seuls laissait un paragraphe d'adresse vide, et un « Maison Hiret — — SIREN » avec ses tirets orphelins. :has() plutôt qu'un masquage sec : la ligne réapparaît d'elle-même le jour où le champ est rempli et le .a-completer retiré. Rien à penser à réactiver. */ .pied__adresse:has(.a-completer), .pied__mentions:has(.a-completer) { display: none; } /* La médiation de la consommation reste masquée : son contenu dépend du statut juridique, qui n'est pas encore arrêté. Un médiateur nommé au hasard serait pire qu'une rubrique absente — c'est un tiers que l'on désigne, et le client est censé pouvoir le saisir. HÉBERGEUR ET DESTINATAIRES SONT SORTIS DE CE BLOC le 12 septembre 2026 : l'hébergeur est connu (Hostinger) et la chaîne de traitement est arrêtée (serveur du site pour le formulaire, Google pour la boîte aux lettres). Les deux sections sont désormais écrites, donc visibles. L'entrée de sommaire disparaît avec la section : sinon le lien ne mène plus nulle part. Les identifiants sont les mêmes dans les cinq langues, le contenu seul est traduit — une seule règle suffit. */ /* L'id porte le

: le masquer ne masquait QUE le titre. Le paragraphe sur l'article L.612-1 et son
vide restaient affichés, orphelins, collés sous la section précédente — un texte de loi sans titre au-dessus. On emporte les deux frères qui suivent. */ #mediation, #mediation + p, #mediation + p + dl, .page-legale__sommaire a[href="#mediation"] { display: none; } .page-legale__sommaire li:has(> a[href="#mediation"]) { display: none; }