/* ===== /assets/css/jetons.css ===== */ /* ============================================================================= jetons.css - LE CONTRAT DE JETONS, valeurs de la CHARTE. ============================================================================= Contrat pose le 14/09/2026 : les NOMS et les ROLES sont definitifs, les VALEURS remplacables d'un bloc. La charte est arrivee le meme jour (.documentation/Charte graph/), et ce fichier est la seule chose qui a change pour l'appliquer : aucun gabarit retouche, aucune classe renommee. C'etait l'engagement, il est tenu. LA PALETTE EST VERROUILLEE (BRIEF.md de la charte). On ne discute pas les valeurs. Deux notes de la charte qui commandent l'usage : - « Les neutres tirent sur le vert ; ne jamais les remplacer par un gris pur. » - « Texte toujours a pleine opacite. Sur fond sombre le texte secondaire est #D3DBDA, jamais #6B7C7A sauf etiquettes >= 11px mono non essentielles. » DEUX JETONS AJOUTES AU CONTRAT, et je les signale au lieu de les glisser : --c-fond-creux pour `surface-2 #EAEEEE`, qui n'avait pas de role dans le contrat initial (en-tetes de tableau, zones en retrait). --c-texte-tenu pour `encre-3 #6B7C7A`, dont la charte RESTREINT l'emploi aux etiquettes mono >= 11px non essentielles. Le nommer permet de verifier cette restriction ; le confondre avec --c-texte-doux l'aurait fait disparaitre. Les deux portent des valeurs de la palette, donc rien n'est invente : c'est le contrat qui etait incomplet pour la tenir. TROIS REGLES DE MISE EN OEUVRE, inchangees : 1. AUCUNE valeur en dur dans un gabarit ni dans un composant. 2. Ce fichier ne contient QUE des jetons et les @font-face. Aucun composant. 3. Une valeur absente du contrat est une decision manquante, pas une exception. ============================================================================= */ /* ============================================================================= FONTES - AUTO-HEBERGEES, et ce n'est pas un detail de performance. ============================================================================= La charte autorise « Google Fonts ou auto-hebergees ». On tranche pour l'auto-hebergement (G, 14/09/2026) : un chargement depuis Google est un appel a un tiers hors Union SUR CHAQUE PAGE, avec l'IP du visiteur. C'est exactement le sujet qu'on vient de trancher sur Turnstile - qu'on a laisse ETEINT faute de declaration - et on ne va pas le reintroduire par la typographie. Sous-ensemble LATIN uniquement, et strictement les graisses que la charte prescrit : Archivo 700/800, Public Sans 400/500/600 + italiques 400/500, JetBrains Mono 400/500. Neuf fichiers, 263 Ko declares - le navigateur ne telecharge que les faces reellement employees par la page. ============================================================================= */ /* CHARTE DATIVO (refonte 16/09/2026) : Bricolage Grotesque (titres) + DM Sans (corps), les memes que dativo.fr et rgpdfacile.fr, auto-hebergees (aucune requete Google chez le visiteur : la page de confiance ne liste qu'OVH et Infomaniak). Fichiers VARIABLES, un par famille, avec plage de graisse. */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 600 800; font-display: swap; src: url('/assets/fonts/bricolage.woff2') format('woff2'); } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/assets/fonts/dmsans.woff2') format('woff2'); } @font-face { font-family: 'DM Sans'; font-style: italic; font-weight: 400 600; font-display: swap; src: url('/assets/fonts/dmsans-italic.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/jetbrainsmono-400.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/jetbrainsmono-500.woff2') format('woff2'); } :root { /* --------------------------------------------------------------------------- COULEUR - par ROLE, jamais par teinte. Valeurs : palette claire verrouillee. --------------------------------------------------------------------------- */ /* PALETTE DATIVO (refonte 16/09/2026) : le vert de dativo.fr et rgpdfacile.fr - vert profond #1F3D33, vert #4E7F65, orange #E37222 - decline en roles. Les neutres sont teintes vert (choisis, pas gris par defaut). */ --c-fond: #F1F5F3; /* fond, blanc-vert cool */ --c-fond-eleve: #FFFFFF; /* surface : ce qui est pose SUR le fond */ --c-fond-creux: #E7EEEA; /* surface-2 : ce qui est en retrait */ --c-bord: #D4DFD9; /* filet */ /* Surface SOMBRE dans les DEUX themes (le pied de page). Valeur FIXE, sans surcharge sombre : le pied prenait `--c-texte` comme fond, or `--c-texte` bascule (encre sombre en clair, encre CLAIRE en sombre) - le pied devenait donc quasi-blanc en theme sombre, avec un texte clair dessus, illisible (1.2:1). Constate par bin/contraste-check.php le 17/09/2026. Le texte clair `--c-texte-sur-sombre` y tient 6 a 13:1 des deux cotes. */ --c-fond-pied: #17291F; --c-texte: #142720; /* encre vert-noir */ --c-texte-doux: #3C534A; /* encre-2 - texte secondaire ESSENTIEL, contraste tenu */ /* encre-3 - etiquettes mono (fil d'Ariane, en-tetes de colonnes, renvois d'article, meta). ASSOMBRIE le 17/09/2026 de #6B7C7A a #5A6967 pour tenir 4.5:1 (WCAG AA) sur tous les fonds clairs : ces textes se LISENT pour comprendre la page (un renvoi d'article porte meme le plus de sens ici), ce n'est pas du decoratif au sens de WCAG 1.4.3. La hierarchie de de-emphase tient par le mono et la petite taille, pas par un contraste insuffisant (decision G). */ --c-texte-tenu: #556A60; --c-accent: #2C6E4F; /* vert Dativo, lien / accent (>= 4.5:1 sur clair) */ --c-accent-profond: #1F3D33; /* vert profond Dativo : hero, bande forte, pied, CTA */ --c-accent-lave: #E4EFE8; /* vert lave */ --c-accent-contraste:#FFFFFF; /* L'ORANGE DATIVO, la note chaude de l'ecosysteme : badges, survol de CTA, un accent ponctuel. Un seul accent chaud, jamais deux. */ --c-pop: #C85A17; /* orange Dativo assombri pour tenir 4.5:1 sur clair */ --c-pop-vif: #E37222; /* l'orange plein, pour un fond ou un aplat */ --c-pop-lave: #FBEBDF; /* SUR FOND SOMBRE, deux jetons qui ne varient PAS avec le schema. La quatrieme de couverture est sombre dans les deux palettes : y employer --c-accent la rendait invisible en clair (teal #0F766E sur #0E1A19) et y employer --c-texte-doux la faisait basculer d'une palette a l'autre sans raison. Les valeurs sont celles que la charte donne explicitement pour le fond sombre. */ --c-accent-sur-sombre: #7CC3A0; --c-texte-sur-sombre: #DCE7E1; /* Les trois tons de statut. Le mappage n'est pas arbitraire : concerne -> ecart le reglement s'applique, il y a du travail attention -> engage role requalifie, intendant : regime specifique hors_champ -> atteint rien a faire au titre du CRA C'est la lecture de la charte la plus fidele au sens des trois etats. */ --s-concerne: #9B2C2C; /* ecart */ /* UN SEUL FOND DE STATUT SURVIT, et il faut savoir pourquoi avant d'en rajouter. Le bandeau de l'ecran 4 est un filet de couleur PLEINE de 6 px, pas une zone teintee : il consomme les trois teintes et aucun fond. Le `--s-concerne-fond` qui reste ne sert pas de statut, il sert au message d'erreur du questionnaire. Les deux autres fonds ont ete retires le 15/09/2026 faute d'emploi. Un composant qui aura besoin du triplet complet les remettra AVEC son emploi - c'est moins couteux qu'un contrat qui porte des valeurs que personne ne lit. */ --s-concerne-fond: #F6E3E2; --s-attention: #9A5B06; /* engage */ --s-hors-champ: #15704A; /* atteint */ /* Marqueur de libelle manquant. Outillage, pas charte : il doit CRIER, et il reste visible en production - un trou qui n'apparait qu'en dev n'est surveille par personne. Volontairement HORS palette pour qu'il jure. */ --c-manque: #B00020; --c-manque-fond: #FFF0F2; /* --------------------------------------------------------------------------- TYPOGRAPHIE - echelle modulaire. Une taille hors echelle est un BUG. Les piles portent un repli reel : une fonte absente ne doit pas casser la mesure de la page. --------------------------------------------------------------------------- */ --t-xs: 0.75rem; --t-s: 0.875rem; --t-base: 1rem; --t-m: 1.125rem; --t-l: 1.375rem; --t-xl: 1.75rem; --t-2xl: 2.25rem; --f-titre: 'Bricolage Grotesque', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --f-texte: 'DM Sans', ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --lh-serre: 1.2; --lh-normal: 1.5; --lh-large: 1.65; /* Approches de la charte : « plus c'est gros, plus c'est serre » pour le titrage, et des capitales espacees pour les etiquettes mono. */ --ls-titre-xl: -0.04em; --ls-titre: -0.025em; --ls-etiquette: 0.08em; /* --------------------------------------------------------------------------- ESPACEMENT - base 4, une seule suite. --------------------------------------------------------------------------- */ --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.25rem; --e-6: 1.5rem; --e-8: 2rem; --e-10: 2.5rem; --e-12: 3rem; /* 3,5rem : le rythme vertical du webdesign classique met les H2 a cette distance du bloc precedent (specification 3). La suite de base 4 ne le portait pas, et l'arrondir a --e-12 ou --e-16 aurait perdu le rythme. */ --e-14: 3.5rem; --e-16: 4rem; /* --------------------------------------------------------------------------- RAYONS ET RELIEF. La charte fait un DOSSIER, pas une application : les rayons restent faibles, une feuille de papier n'a pas les coins arrondis. --------------------------------------------------------------------------- */ --r-s: 2px; --r-m: 4px; --r-l: 6px; /* Rayons DOUX de la charte Dativo (refonte 16/09/2026) : cartes et boutons arrondis comme dativo.fr / rgpdfacile.fr. */ --r-bouton: 10px; --r-carte: 16px; --r-pilule: 999px; --ombre-carte: 0 1px 2px rgba(14, 26, 25, 0.06), 0 1px 3px rgba(14, 26, 25, 0.08); /* Ombre de LEVEE, teintee vert (jamais un noir pur) : cartes posees, panneaux flottants du hero. */ --ombre-levee: 0 1px 2px rgba(20, 39, 32, .05), 0 18px 40px -22px rgba(20, 39, 32, .30); /* L'ombre de l'en-tete au defilement est BASSE et seulement basse : les deux jetons ci-dessus portent une ombre sur les quatre cotes, qui sous une barre fixe se voit au-dessus de la fenetre. */ --ombre-entete: 0 2px 12px -6px rgba(14, 26, 25, 0.35); --c-voile: rgba(14, 26, 25, 0.35); /* Le decalage du liseré de focus. UNE valeur pour tout le produit : trois decalages differents sur trois composants se remarquent au clavier, et c'est le seul parcours ou on ne voit que ca. */ --decalage-focus: 3px; /* --------------------------------------------------------------------------- MOUVEMENT - deux durees, UNE courbe. --d-court pour un retour immediat (survol, ombre), --d-moyen pour un changement qu'on doit voir arriver (panneau, releve d'un message d'analyse). --d-long a ete retire le 15/09/2026 : il ne servait qu'a la revelation du verdict de l'ancien ecran 4, et plus rien ne le consomme. --------------------------------------------------------------------------- */ --d-court: 120ms; --d-moyen: 250ms; --courbe: cubic-bezier(0.22, 0.61, 0.36, 1); /* LA SEULE RUPTURE QUI RESTE UN JETON, et elle ne sert pas de rupture : c'est la largeur du backoffice. CSS interdit une variable dans une media query, donc les ruptures du site (1000 px et 700 px) sont ecrites en litteral la ou elles s'appliquent - `ruptures.css` pour le site, la fin de `gabarits/parcours.css` pour le tunnel. Les jetons `--bp-s` (480) et `--bp-m` (768) ont ete retires le 15/09/2026 : ils ne servaient a rien d'autre qu'a documenter des ruptures que la specification classique a remplacees par 1000 et 700, et un jeton qui documente une valeur perimee est pire qu'une valeur absente. */ --bp-l: 1100px; /* MESURE, pas estimation, et il a fallu deux essais. L'unite `ch` est la largeur du ZERO, nettement plus large que la moyenne des lettres : `68ch` ne fait donc pas 68 caracteres, il en fait 84. Mesure au navigateur sur de la prose reelle : 1 caractere = 8,09px, 1ch = 11,02px. Pour les 62 a 72 caracteres que demande la specification, il faut environ 550px, soit 50ch. La valeur suit la fonte : si la charte en change, refaire la mesure plutot que de recopier ce nombre. */ --largeur-lecture: 50ch; /* AGENCEMENT (regle G du 16/09/2026, maquette de l'offre). La largeur de LECTURE n'est pas la largeur du CONTENEUR : meme sur une page large, le texte courant reste a 58ch et les descriptions de ligne a 64ch. En `ch`, donc lie a la fonte comme `--largeur-lecture` au-dessus, et non un pixel de charte a recopier. */ --largeur-agencement-lecture: 58ch; --largeur-agencement-ligne: 64ch; /* Le RYTHME VERTICAL des bandes d'agencement, en un seul endroit (regle G du 16/09/2026). Le `clamp` porte des `rem`, donc il vit ICI, dans le contrat, et pas recopie dans agencement.css ou le controle de jetons le refuserait a juste titre. Une bande, un rythme : on ne retouche plus les marges au cas par cas. */ --rythme-bande: clamp(2.5rem, 5.5vw, 3.5rem); /* Bornes de la colonne de prix du panneau de l'offre (le seul objet encadre). */ --largeur-panneau-large: 26rem; /* --------------------------------------------------------------------------- GRILLE DU WEBDESIGN CLASSIQUE (SPEC_FRONT_WEBDESIGN section 3, 14/09/2026). Ce groupe remplace les mesures du dossier - feuilles, marges de bureau, rotations - qui sont retirees avec la mise en scene. Les VALEURS changent, les noms de role restent la seule chose qu'un gabarit connaisse : c'est ce qui a permis de changer de direction artistique sans toucher aux contenus. --------------------------------------------------------------------------- */ --largeur-page: 1200px; /* conteneur, centre */ --gouttiere: 1.5rem; /* 24px minimum de chaque cote */ --largeur-sommaire: 232px; --gouttiere-sommaire: 56px; --largeur-bloc: 840px; /* tableau, encart large, appel : plus large que la lecture */ --gouttiere-etape: 40px; /* LE CONTENEUR DES GABARITS DE CONTENU (B, C, D) = le plus large objet qu'ils portent, la largeur de BLOC, plus ses gouttieres - et NON `--largeur-page`. Distinction posee le 16/09/2026 : `--largeur-page` (1200) etait dimensionne pour la grille a sommaire (232 + 56 + 840 = 1128) ; le sommaire est descendu dans la bande d'introduction, la grille a disparu, mais la largeur de page etait restee, laissant 360 px que plus aucun element n'occupait. La page de contenu se cale donc sur son contenu. `--largeur-page` reste pour l'entete, le pied et le backoffice, qui s'en servent legitimement. Derive de `--largeur-bloc`, jamais recopie, pour que le rapport tienne au prochain changement de gabarit. */ --largeur-contenu: calc(var(--largeur-bloc) + var(--gouttiere) * 2); /* Quatre largeurs de bloc qui etaient en dur dans leurs composants. Nommees par ROLE : « la carte de page voisine » se comprend, « 22rem » se compte. */ --largeur-panneau: 20rem; /* le panneau etroit sous 1000 px */ /* LE RAPPORT EST PLUS LARGE QUE LES PAGES DE CONTENU, et c'est une decision de contenu : il porte des tableaux, qu'une colonne de lecture d'article serre au point de les rendre illisibles. La specification 5.F donne 62ch pour le texte ; la page, elle, doit loger ces 62ch plus ses gouttieres. */ --largeur-rapport: 880px; /* la page du rapport */ --largeur-rapport-texte: 62ch; /* sa colonne de lecture */ /* LA COLONNE DES ECRANS D'ACCES (specification 5.G). Etroite VOLONTAIREMENT : une colonne de 440 px dit que le formulaire est court avant qu'on l'ait lu, et « chaque champ supplementaire sur un formulaire d'inscription coute des inscriptions ». C'est la largeur qui porte la promesse, pas une phrase. */ --largeur-compte: 440px; --largeur-etiquette-fiche: 84px; /* colonne des intitules de la fiche de compte */ /* LE BACKOFFICE. Plus large que le site : il montre des tableaux a huit colonnes, et les serrer dans la colonne de lecture d'un article les rendrait illisibles pour gagner une elegance que personne ne regarde ici. */ --largeur-backoffice: 1100px; --largeur-tuile: 130px; /* plancher d'une tuile de chiffre */ --largeur-barre-bo: 90px; /* plancher d'une barre d'abandon */ --largeur-etiquette-bo: 116px; /* colonne des intitules d'une fiche de lead */ --largeur-carte-min: 17rem; /* plancher d'une carte dans une grille auto-fit */ --largeur-voisin: 22rem; /* carte de navigation de silo */ --largeur-prix: 18rem; /* colonne du bloc de prix de l'accueil */ --h-entete: 64px; /* en-tete du site */ /* L'EN-TETE REDUIT sert au tunnel, au rapport et aux ecrans de compte : trois surfaces ou l'on ne veut PAS de navigation. Il s'appelait `--h-entete-parcours` ; renomme le 15/09/2026, parce qu'un jeton dont le nom dit une surface finit par etre recopie plutot que reutilise. */ --h-entete-reduit: 56px; --lh-lecture: 1.7; /* corps des pages de contenu */ --filet-encart: 3px; --filet-accent: 4px; /* bord haut de l'objet encadre de l'offre */ --filet-fin: 2px; /* filet lateral des lignes de pieces */ /* --------------------------------------------------------------------------- LE PARCOURS (SPEC_FRONT_WEBDESIGN section 5.E). Le tunnel n'obeit pas aux mesures du site : colonne plus etroite, en-tete plus bas, et trois tailles de texte que l'echelle modulaire ne porte pas. POURQUOI TROIS TAILLES HORS ECHELLE, et pourquoi je les nomme au lieu de les arrondir. L'echelle saute de 14 a 16 px ; la specification donne 15 px pour l'aide contextuelle, 13 px pour le paragraphe d'information de l'article 13 et 11 px pour le compteur de progression. Arrondir l'aide a 16 px la mettrait a la taille du corps, donc elle cesserait d'etre une aide ; arrondir la mention legale a 14 px lui donnerait le poids d'une etiquette. Ce sont des ROLES distincts, pas des variations de gout, et le contrat dit qu'une valeur absente est une decision manquante : la voici prise, et nommee par son role pour qu'un autre gabarit ne s'en serve pas par commodite. --------------------------------------------------------------------------- */ --largeur-accroche: 560px; /* ecran 1 et ecran 3, colonne centree */ --largeur-question: 680px; /* ecran 2, la carte de reponse doit respirer */ --h-progression: 3px; --h-bandeau-statut: 6px; --h-reponse: 64px; /* hauteur MINIMALE d'une carte de reponse */ --t-compteur: 0.6875rem; /* 11px mono, `question 4 sur 12` */ --t-aide: 0.9375rem; /* 15px, aide contextuelle sous la legende */ --t-mention-legale: 0.8125rem; /* 13px, information de l'article 13 */ --t-verdict: 2.125rem; /* 34px Archivo, le verdict de l'ecran 4 */ /* Deux tailles de titre que l'echelle n'avait pas : le H1 d'article et le H2 de section, qui doivent se distinguer nettement sur une page de 3 000 mots. */ --t-3xl: 2.75rem; /* Titre HERO de la refonte : Bricolage Grotesque a grande echelle, fluide. */ --t-display: clamp(2.6rem, 5.6vw, 4.6rem); --c-bord-sombre: #243634; /* filet sur le pied de page sombre */ } /* ============================================================================= PALETTE SOMBRE. Fournie par la charte, donc due : un site qui l'ignore impose du blanc pur a qui a demande le contraire a son systeme. Seules les COULEURS changent - echelle, espacement et mouvement sont communs. ============================================================================= */ @media (prefers-color-scheme: dark) { :root { --c-fond: #0C1611; /* vert-noir Dativo */ --c-fond-eleve: #14211A; --c-fond-creux: #0C1611; --c-bord: #26372E; --c-texte: #E7EFE9; --c-texte-doux: #C4D2CA; /* etiquettes mono (tenu) : valeur propre au sombre, >= 4.5:1 sur #14211A (voir clair) */ --c-texte-tenu: #8FA298; --c-accent: #63BE93; /* vert clair Dativo, lien sur fond sombre */ /* --c-accent-profond NON redefini : le vert profond #1F3D33 est une surface FIXE (bande forte) dans les deux themes, comme --c-*-sur-sombre. */ --c-accent-lave: #14211A; --c-accent-contraste:#0C1611; /* texte du bouton : bascule AVEC --c-accent */ --c-pop: #F0894A; /* orange eclairci pour le sombre */ --c-pop-lave: #241610; --s-concerne: #E08080; --s-concerne-fond: #241616; --s-attention: #D69B4A; --s-hors-champ: #4FBA88; --c-manque: #E08080; --c-manque-fond: #2A1416; --ombre-carte: 0 1px 2px rgba(0, 0, 0, 0.40), 0 1px 3px rgba(0, 0, 0, 0.30); } } /* ============================================================================= MOUVEMENT REDUIT - UNE seule regle. Les deux durees tombent a zero, donc aucun composant n'a besoin de redeclarer son propre prefers-reduced-motion. ============================================================================= */ @media (prefers-reduced-motion: reduce) { :root { --d-court: 0ms; --d-moyen: 0ms; } } /* ===== /assets/css/base.css ===== */ /* ========================================================================== base.css - remise a zero, typographie de base, rythme vertical. ========================================================================== Ce que toute page porte avant tout composant, et rien d'autre : un `body` et un `h2` ne changent pas pour les memes raisons qu'un encart. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } /* ============================================================================= CE QUI EST MASQUE LE RESTE. Une regle, et elle vaut tout un controle. ============================================================================= Le navigateur pose deja `[hidden] { display: none }`, mais SANS `!important` : n'importe quelle regle de composant qui declare `display` sur le meme element la bat, parce qu'elle arrive apres dans la cascade a specificite egale. Le defaut est alors invisible a la relecture - l'attribut est bien pose, le HTML est juste - et il ne se voit qu'a l'ecran. CE DEPOT L'A PAYE DEUX FOIS. Le 14/09/2026, `.analyse { display: grid }` laissait le calque d'analyse au-dessus de toute la page, interceptant chaque clic. Le 15/09/2026, `.analyse__etat > span { display: block }` faisait sortir les cinq messages de l'ecran 3 ensemble, en liste, au lieu de les faire se succeder. Deux fois le meme mecanisme, a un jour d'intervalle, et la premiere lecon vivait dans un commentaire qui n'a pas survecu a la reecriture de sa feuille. D'ou cette ligne, qui rend le defaut IMPOSSIBLE plutot que detectable. Une regle qu'on ne peut pas casser vaut mieux qu'un controle qui dit qu'on l'a cassee - c'est aussi la seule forme de lecon qui survit a une reecriture. `bin/masquage-check.php` verifie qu'elle est la et que personne ne la contredit. Corollaire pour qui ecrit un composant : on masque avec `element.hidden = true`, jamais avec `style.display = 'none'`, et on ne declare jamais `display` sur un selecteur qualifie par `[hidden]`. */ [hidden] { display: none !important; } html { overflow-x: clip; /* sur html ET body : l'overflow de body se propage a la fenetre */ scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--c-fond); color: var(--c-texte); font-family: var(--f-texte); font-size: var(--t-base); line-height: var(--lh-lecture); -webkit-font-smoothing: antialiased; overflow-x: clip; } h1, h2, h3, h4 { font-family: var(--f-titre); letter-spacing: var(--ls-titre); line-height: var(--lh-serre); margin: 0; /* Les titres ne laissent pas un mot seul sur la derniere ligne : l'equilibrage repartit les lignes, ce qui donne aux titres une silhouette voulue et non subie. */ text-wrap: balance; } /* Le corps evite les lignes veuves : `pretty` soigne la fin de paragraphe. */ p { text-wrap: pretty; } a { color: var(--c-accent-profond); transition: color var(--d-court) var(--courbe); } /* FOCUS VISIBLE PARTOUT (WCAG 2.4.7). Un seul anneau pour tout ce qui prend le clavier - lien, bouton, champ, resume depliable - teal, decale, arrondi. Il remplace le contour par defaut du navigateur, incoherent d'un element a l'autre, par un liseré unique et contraste dans les deux themes. `:focus:not(:focus-visible)` ne le montre pas a la souris, seulement au clavier. */ :focus-visible { outline: var(--filet-epais) solid var(--c-accent); outline-offset: var(--decalage-focus); border-radius: var(--r-s); } /* Les ancres atterrissent SOUS l'en-tete fixe si on ne le dit pas. Ce defaut ne se voit qu'en suivant un lien de sommaire - donc systematiquement, ici. */ :is(h1, h2, h3, [id]) { scroll-margin-top: calc(var(--h-entete) + var(--e-6)); } /* ===== /assets/css/layout/grille.css ===== */ /* ========================================================================== layout/grille.css - conteneur, colonnes de page, gouttieres. ========================================================================== ========================================================================== */ .conteneur { width: 100%; max-width: var(--largeur-page); margin-inline: auto; padding-inline: var(--gouttiere); } /* --- LE GABARIT DE CONTENU (specification 5.B) ----------------------------- */ .page { padding-block: var(--e-10) var(--e-16); } /* LE BLOC SE CENTRE, LA COLONNE DE LECTURE NE BOUGE PAS. La deuxieme colonne valait `1fr` : elle prenait toute la largeur restante alors que la prose est bornee a 68 caracteres, donc 450 px de vide s'accumulaient a DROITE et la page paraissait decentree. Bornee a la largeur de bloc et centree, le vide se repartit des deux cotes. Ce vide n'est pas une erreur, c'est une RESERVE : les tableaux et les encarts larges y debordent volontairement, et c'est le comportement qu'on garde. */ .page--avec-sommaire { display: grid; grid-template-columns: var(--largeur-sommaire) minmax(0, var(--largeur-bloc)); gap: var(--gouttiere-sommaire); justify-content: center; align-items: start; } .fil { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: var(--ls-etiquette); text-transform: uppercase; color: var(--c-texte-tenu); margin: 0 0 var(--e-4); } .fil a { color: inherit; text-decoration: none; } .fil a:hover { text-decoration: underline; } .article > h1 { font-size: var(--t-3xl); font-weight: 800; letter-spacing: var(--ls-titre-xl); max-width: 22ch; } .chapeau { font-size: var(--t-l); line-height: var(--lh-normal); color: var(--c-texte-doux); max-width: var(--largeur-lecture); margin-block: var(--e-5) 0; } .meta { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); margin-block: var(--e-5) var(--e-10); padding-block: var(--e-3); border-block: 1px solid var(--c-bord); font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: var(--ls-etiquette); text-transform: uppercase; color: var(--c-texte-tenu); } /* ===== /assets/css/layout/entete.css ===== */ /* ========================================================================== layout/entete.css - la barre fixe et le panneau etroit. ========================================================================== ========================================================================== */ /* --- L'EN-TETE (specification 4) ------------------------------------------- */ /* Fixe, OPAQUE, 64 px. Visible d'emblee et sans condition : il ne se replie pas et il ne se revele pas. C'est la lecon du rabat precedent - une navigation qui n'apparait qu'apres avoir defile n'est pas une navigation. */ .entete { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100; height: var(--h-entete); background: var(--c-fond-eleve); border-block-end: 1px solid var(--c-bord); transition: box-shadow var(--d-court) var(--courbe); } /* L'ombre au defilement SEULEMENT : posee d'emblee, elle detacherait la barre d'une page qui n'a pas encore bouge. */ .a-defile .entete { box-shadow: var(--ombre-entete); } body { padding-block-start: var(--h-entete); } .entete__interieur { display: flex; align-items: center; gap: var(--e-6); height: 100%; } .entete__marque { font-family: var(--f-titre); font-weight: 800; font-size: var(--t-m); letter-spacing: var(--ls-titre); color: var(--c-texte); text-decoration: none; white-space: nowrap; } .menu { display: flex; align-items: center; gap: var(--e-5); margin: 0; padding: 0; list-style: none; min-width: 0; } .menu__lien { display: inline-block; font-size: var(--t-s); font-weight: 500; color: var(--c-texte-doux); text-decoration: none; padding-block: var(--e-2); border-block-end: var(--filet-epais) solid transparent; white-space: nowrap; } .menu__lien:hover { color: var(--c-texte); } /* L'ENTREE COURANTE PORTE UN SOULIGNEMENT, PAS UN FOND. Un fond plein sur une entree de menu fait un onglet, et on vient precisement de les retirer. */ .menu__lien[aria-current] { color: var(--c-texte); border-block-end-color: var(--c-accent); } .entete__droite { display: flex; align-items: center; gap: var(--e-5); margin-inline-start: auto; } .lien-discret { font-size: var(--t-s); color: var(--c-texte-doux); text-decoration: none; white-space: nowrap; } .lien-discret:hover { color: var(--c-texte); text-decoration: underline; } /* Le diagnostic est le SEUL element d'accent de la barre. */ .bouton-accent { display: inline-block; font-family: var(--f-texte); font-weight: 600; font-size: var(--t-s); color: var(--c-accent-contraste); background: var(--c-accent); border: 0; border-radius: var(--r-m); padding: var(--e-3) var(--e-5); text-decoration: none; white-space: nowrap; cursor: pointer; } .bouton-accent:hover { filter: brightness(1.08); } .bouton-accent:focus-visible, .menu__lien:focus-visible, .lien-discret:focus-visible { outline: var(--filet-epais) solid var(--c-accent); outline-offset: var(--decalage-focus); } /* --- Le panneau, sous 1000 px ---------------------------------------------- */ /* UN VRAI PANNEAU, pas un menu deroulant : pleine hauteur, fermeture par echappement et par clic hors zone, focus piege tant qu'il est ouvert. */ .bascule-menu { display: none; } .panneau { position: fixed; inset: var(--h-entete) 0 0 auto; width: min(var(--largeur-panneau), 86vw); z-index: 99; background: var(--c-fond-eleve); border-inline-start: 1px solid var(--c-bord); padding: var(--e-6) var(--e-6) var(--e-10); overflow-y: auto; transform: translateX(100%); transition: transform var(--d-moyen) var(--courbe); } .panneau[data-ouvert="1"] { transform: none; } @media (prefers-reduced-motion: reduce) { .panneau { transition: none; } } .panneau__liens { display: grid; gap: var(--e-1); margin: 0; padding: 0; list-style: none; } .panneau__liens a { display: block; padding: var(--e-3) 0; font-size: var(--t-m); color: var(--c-texte); text-decoration: none; border-block-end: 1px solid var(--c-bord); } .panneau__liens a[aria-current] { color: var(--c-accent-profond); font-weight: 600; } .voile { position: fixed; inset: var(--h-entete) 0 0; z-index: 98; background: var(--c-voile); } /* ===== /assets/css/layout/sommaire.css ===== */ /* ========================================================================== layout/sommaire.css - le sommaire lateral et son suivi de lecture. ========================================================================== ========================================================================== */ /* --- LE SOMMAIRE LATERAL (specification 6) --------------------------------- */ /* L'ajout le plus utile du passage en classique, et il manquait completement : sur quatorze pages de plus de 1 200 mots, un lecteur sans sommaire abandonne. Il est CONSTRUIT DEPUIS LES H2 et jamais declare - un sommaire declare diverge du texte a la premiere section ajoutee, et il diverge en silence. */ /* AU-DESSUS DE 1000 PX LE SOMMAIRE N'EST PAS REPLIABLE, donc son resume n'a rien a faire la. `
` est employe pour que le repli mobile fonctionne SANS JavaScript ; a cette largeur on neutralise le resume et on garde le titre mono. L'inverse - resume affiche et titre masque - se fait dans ruptures.css. Les deux etaient visibles ensemble : on lisait « Sur cette page » avec un chevron, puis « SUR CETTE PAGE » juste en dessous. */ .sommaire > summary { display: none; } .sommaire::details-content { display: block; } /* le repli ne s'applique pas ici */ .sommaire { position: sticky; inset-block-start: calc(var(--h-entete) + var(--e-6)); max-height: calc(100vh - var(--h-entete) - var(--e-12)); overflow-y: auto; } .sommaire__titre { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: var(--ls-etiquette); text-transform: uppercase; color: var(--c-texte-tenu); margin: 0 0 var(--e-3); } .sommaire ol { list-style: none; margin: 0; padding: 0; } .sommaire a { display: block; padding: var(--e-2) 0 var(--e-2) var(--e-4); border-inline-start: var(--filet-epais) solid var(--c-bord); font-size: var(--t-s); line-height: var(--lh-normal); color: var(--c-texte-doux); text-decoration: none; } .sommaire a:hover { color: var(--c-texte); } /* La section en cours : filet teal et encre pleine. */ .sommaire a[aria-current] { color: var(--c-texte); font-weight: 500; border-inline-start-color: var(--c-accent); } /* ===== /assets/css/layout/pied.css ===== */ /* ========================================================================== layout/pied.css - le pied de page a quatre colonnes. ========================================================================== ========================================================================== */ /* --- LE PIED DE PAGE (specification 9) ------------------------------------- */ .pied { margin-block-start: var(--e-16); padding-block: var(--e-14) var(--e-8); /* Surface SOMBRE dans les deux themes : `--c-texte` bascule et rendait le pied illisible en theme sombre (voir le jeton). */ background: var(--c-fond-pied); color: var(--c-texte-sur-sombre); } .pied__grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-8); } .pied .etiquette { color: var(--c-accent-sur-sombre); margin: 0 0 var(--e-4); } .pied__liens { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); } .pied__liens a { color: var(--c-texte-sur-sombre); text-decoration: none; font-size: var(--t-s); } /* Le survol se marque par le SOULIGNEMENT seul : basculer la couleur vers `--c-fond-eleve` donnait un lien quasi-invisible sur le pied sombre en theme sombre (#111D1C sur #0E1A19). Le texte garde sa couleur claire lisible. */ .pied__liens a:hover { text-decoration: underline; } .pied__fin { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-4); margin-block: var(--e-12) 0; padding-block-start: var(--e-5); border-block-start: 1px solid var(--c-bord-sombre); font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: var(--ls-etiquette); text-transform: uppercase; /* Sur le pied SOMBRE, la mention fine prend le texte clair du pied (--c-texte-tenu est pense pour les fonds clairs) : la finesse vient de la petite taille et du mono ci-dessus, pas d'un contraste faible. */ color: var(--c-texte-sur-sombre); } /* ===== /assets/css/composants/evitement.css ===== */ /* ========================================================================== composants/evitement.css - « Aller au contenu ». ========================================================================== Un fichier pour une regle, et il le merite : ce lien sert le site, le tunnel et le rapport, donc il ne peut vivre dans l'en-tete d'aucun des trois. Il vivait dans `layout/entete-parcours.css`, ou le gabarit F ne l'aurait pas trouve - et un lien d'evitement absent ne se voit que si l'on navigue au clavier, c'est-a-dire jamais pendant une relecture. HORS ECRAN PAR LE CSS, ET REVELE PAR `:focus`. Il l'etait par un attribut `style` en ligne double d'un gestionnaire `onfocus` : le comportement au focus d'un lien d'accessibilite dependait donc de JavaScript, ce qui est exactement l'inverse de ce qu'on attend de lui. Le premier utilisateur a le perdre aurait ete celui qui en a le plus besoin. ========================================================================== */ /* Le lien d'evitement. Hors ecran tant qu'il n'a pas le focus, et POSE EN CSS et non en attribut `style` avec un `onfocus` : le comportement au focus est du style, et un gestionnaire en ligne le rendait dependant de JavaScript pour une fonction d'accessibilite - qui est precisement celle qui doit tenir sans. */ .evitement { position: absolute; inset-inline-start: -9999px; /* jeton-check: ignore - mise hors ecran, pas une mesure de charte */ z-index: 101; /* jeton-check: ignore - un ordre d'empilement n'est pas une valeur de charte */ background: var(--c-fond-eleve); color: var(--c-texte); padding: var(--e-2) var(--e-4); font-size: var(--t-s); } .evitement:focus { inset-inline-start: var(--e-4); inset-block-start: var(--e-2); } /* ===== /assets/css/composants/prose.css ===== */ /* ========================================================================== composants/prose.css - le corps d'article : rythme, largeur, renvois. ========================================================================== ========================================================================== */ /* --- LA PROSE -------------------------------------------------------------- */ /* Le rythme vertical de la specification 3, et une largeur de lecture tenue. La mesure de 50ch vient d'un releve au navigateur sur de la prose reelle : `ch` est la largeur du zero, plus large que la moyenne des lettres, et 68ch donnait 84 caracteres. Si la fonte du corps change, REFAIRE LA MESURE. */ .prose { font-size: var(--t-m); line-height: var(--lh-lecture); } .prose > p, .prose > ul, .prose > ol, .prose > blockquote { max-width: var(--largeur-lecture); } .prose > p { margin-block: 0 var(--e-5); } .prose h2 { font-size: var(--t-2xl); font-weight: 700; margin-block: var(--e-14) var(--e-4); } .prose h3 { font-size: var(--t-l); font-weight: 700; margin-block: var(--e-8) var(--e-3); } .prose h2:first-child { margin-block-start: 0; } .prose li { margin-block: 0 var(--e-2); } .prose strong { font-weight: 600; } /* LE RENVOI D'ARTICLE, en mono sur fond creux et SANS bordure. C'est le composant qui porte le plus de sens sur ce site : il distingue au premier coup d'oeil « annexe I, partie II, 1) » du texte qui l'entoure. */ .prose code { font-family: var(--f-mono); font-size: 0.9em; background: var(--c-fond-creux); padding: 0.1em 0.35em; border-radius: var(--r-s); } /* ===== /assets/css/composants/encart.css ===== */ /* ========================================================================== composants/encart.css - les quatre encarts et leur etiquette. ========================================================================== ========================================================================== */ .encart { max-width: var(--largeur-bloc); margin-block: var(--e-8); padding: var(--e-5) var(--e-6); border-inline-start: var(--filet-encart) solid var(--c-bord); background: var(--c-fond-creux); font-size: var(--t-base); } .encart > :last-child { margin-block-end: 0; } .encart .etiquette { margin-block: 0 var(--e-2); } .encart--info { background: var(--c-accent-lave); border-inline-start-color: var(--c-accent); } .encart--avertissement { background: var(--s-concerne-fond); border-inline-start-color: var(--s-concerne); } .encart--exemple { background: var(--c-fond-creux); border-inline-start-color: var(--c-texte-tenu); } .encart--tableau { background: transparent; border-inline-start: 0; padding: 0; } /* Emis par PageContenu sur les encarts de type tableau : ils debordent la colonne de lecture et defilent dans LEUR conteneur, jamais en elargissant la page. Le nom vient du gabarit precedent et il est conserve : le renommer aurait demande de toucher au routeur pour un gain nul. */ .encart--deborde { max-width: var(--largeur-bloc); overflow-x: auto; } .etiquette { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: var(--ls-etiquette); text-transform: uppercase; color: var(--c-texte-tenu); } /* ===== /assets/css/composants/tableau.css ===== */ /* ========================================================================== composants/tableau.css - les tableaux, et leur debordement maitrise. ========================================================================== ========================================================================== */ /* Les tableaux debordent la colonne de lecture : c'est voulu, ils portent des delais et des correspondances qu'on lit en balayant. Ils defilent dans LEUR PROPRE conteneur plutot que d'elargir la page. */ .deborde { max-width: var(--largeur-bloc); overflow-x: auto; margin-block: var(--e-8); } .prose table { border-collapse: collapse; width: 100%; font-size: var(--t-s); } .prose th, .prose td { border-block-end: 1px solid var(--c-bord); padding: var(--e-3); text-align: start; vertical-align: top; } .prose thead th { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: var(--ls-etiquette); text-transform: uppercase; color: var(--c-texte-tenu); border-block-end: 1px solid var(--c-texte); } /* ===== /assets/css/composants/releve.css ===== */ /* ========================================================================== composants/releve.css - terme et glose, sur une suite de paragraphes gras. ========================================================================== ========================================================================== */ /* Le releve : au moins deux paragraphes consecutifs ouvrant sur du gras. */ .releve { max-width: var(--largeur-bloc); margin-block: var(--e-8); } .releve__ligne { padding-block: var(--e-4); border-block-end: 1px solid var(--c-bord); } .releve__ligne:first-child { border-block-start: 1px solid var(--c-bord); } .releve__tete { font-weight: 600; font-size: var(--t-base); margin: 0 0 var(--e-2); } .releve__ligne > p:last-child { margin: 0; max-width: var(--largeur-lecture); color: var(--c-texte-doux); } /* ===== /assets/css/composants/etapes.css ===== */ /* ========================================================================== composants/etapes.css - le numero d'etape dans sa gouttiere. ========================================================================== ========================================================================== */ /* Les etapes : le chiffre dans une gouttiere de 40 px, aligne sur la 1re ligne. */ .prose h2.etape { position: relative; padding-inline-start: var(--gouttiere-etape); } .etape__n { position: absolute; inset-inline-start: 0; font-family: var(--f-mono); font-weight: 500; font-size: var(--t-l); color: var(--c-accent); } /* ===== /assets/css/composants/renvoi.css ===== */ /* ========================================================================== composants/renvoi.css - le renvoi reglementaire. ========================================================================== Le composant qui porte le plus de sens sur ce site : il distingue au premier coup d'oeil « annexe I, partie II, 1) » de la phrase qui l'entoure, et c'est ce qui rend une page verifiable. MONO, FOND CREUX, SANS BORDURE (specification 7). Sans bordure parce qu'un renvoi apparait plusieurs fois par paragraphe : encadre, il hacherait le texte au lieu de le baliser. Le changement de fonte suffit a le detacher. ========================================================================== */ .renvoi { font-family: var(--f-mono); font-size: 0.88em; background: var(--c-fond-creux); padding: 0.1em 0.3em; border-radius: var(--r-s); /* Un renvoi ne se coupe jamais en fin de ligne : « art. 14(2) » scinde entre « art. » et « 14(2) » se lit comme deux choses au lieu d'une. */ white-space: nowrap; } /* Dans un encart, le fond creux du renvoi disparaitrait sur le fond creux de l'encart. On le repose sur la feuille. */ .encart .renvoi { background: var(--c-fond-eleve); } /* ===== /assets/css/composants/appel-action.css ===== */ /* ========================================================================== composants/appel-action.css - l'appel au diagnostic, une fois par page. ========================================================================== ========================================================================== */ /* --- L'appel au diagnostic, UNE fois par page ------------------------------ */ .appel { max-width: var(--largeur-bloc); margin-block: var(--e-12); padding: var(--e-6); background: var(--c-accent-lave); border-radius: var(--r-l); } .appel p { margin-block: 0 var(--e-4); max-width: var(--largeur-lecture); } .appel .etiquette { margin-block: var(--e-3) 0; } /* ===== /assets/css/composants/carte.css ===== */ /* ========================================================================== composants/carte.css - FAQ, sources, cartes de silo et voisinage. ========================================================================== ========================================================================== */ /* --- FAQ, sources, navigation de silo -------------------------------------- */ .faq { margin-block: var(--e-14) 0; max-width: var(--largeur-bloc); } .faq h2 { font-size: var(--t-xl); } .faq h3 { font-size: var(--t-base); margin-block: var(--e-6) var(--e-2); } .faq p { max-width: var(--largeur-lecture); color: var(--c-texte-doux); margin-block: 0; } .sources { margin-block: var(--e-12) 0; max-width: var(--largeur-bloc); padding: var(--e-5) var(--e-6); background: var(--c-fond-creux); border-radius: var(--r-m); } .sources ul { list-style: none; margin: var(--e-3) 0 0; padding: 0; } .sources li { margin-block: 0 var(--e-2); } .sources a { font-size: var(--t-s); color: var(--c-texte-doux); overflow-wrap: anywhere; } .silo { margin-block: var(--e-12) 0; max-width: var(--largeur-bloc); } .silo__cartes { display: grid; gap: var(--e-4); margin-block: var(--e-4) 0; } .carte { display: block; padding: var(--e-5); border: 1px solid var(--c-bord); border-radius: var(--r-m); background: var(--c-fond-eleve); text-decoration: none; color: inherit; } .carte:hover { border-color: var(--c-accent); } .carte h3 { font-size: var(--t-m); margin: 0 0 var(--e-2); color: var(--c-accent-profond); } .carte p { margin: 0; font-size: var(--t-base); color: var(--c-texte-doux); } /* La navigation precedent/suivant du meme intercalaire. */ .voisins { display: flex; flex-wrap: wrap; gap: var(--e-4); justify-content: space-between; margin-block: var(--e-12) 0; padding-block-start: var(--e-6); border-block-start: 1px solid var(--c-bord); max-width: var(--largeur-bloc); } .voisins a { max-width: var(--largeur-voisin); text-decoration: none; } .voisins .etiquette { display: block; margin-block: 0 var(--e-1); } .voisins span:last-child { color: var(--c-accent-profond); } /* ===== /assets/css/composants/marqueur.css ===== */ /* ========================================================================== composants/marqueur.css - ce qui manque CRIE. ========================================================================== Le marqueur survit au changement de charte : il n'appartenait pas a la mise en scene, il appartient a la regle qui veut que rien ne se livre en silence. ========================================================================== */ /* --- LE MARQUEUR : ce qui manque CRIE, et il survit au changement de charte -- */ .a-confirmer { display: inline-block; font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: var(--ls-etiquette); color: var(--c-manque); background: var(--c-manque-fond); border: 1px dashed var(--c-manque); padding: var(--e-1) var(--e-2); text-transform: uppercase; } /* LE LIBELLE MANQUANT, le second marqueur, et sa place est ici. Il vivait dans gabarits/parcours.css, donc il n'existait QUE dans le tunnel : un libelle absent sur une page de contenu ne criait pas, il rendait un texte nu entre crochets que rien ne distinguait de la prose. Le voici avec son jumeau, dans la seule feuille que les deux paquets chargent. Il reste visible EN PRODUCTION. Un trou qui n'apparait qu'en developpement n'est surveille par personne. */ .manque { display: block; font-family: var(--f-mono); font-size: var(--t-s); color: var(--c-manque); background: var(--c-manque-fond); border: 1px solid var(--c-manque); border-radius: var(--r-s); padding: var(--e-3); margin-block: var(--e-4); } /* ===== /assets/css/composants/agencement.css ===== */ /* ============================================================================= agencement.css - les primitives d'agencement (regles G du 16/09/2026). ============================================================================= Portees de la maquette validee (.documentation/Maquette_AGENCEMENT_OFFRE.html) vers le contrat de jetons du depot : aucune couleur ni taille en dur ici, tout est un jeton, et jetons-check le verifie. Les cinq regles que ce fichier outille : 1. UN SEUL objet encadre : c'est `.offre`. Les autres blocs sont des lignes separees par un filet (`.lignes`), une liste sur bande forte (`.limites`), ou un encart filaire (`.encart`) - jamais une carte. 2. des cartes egales ne servent qu'a de vrais choix ; ce fichier n'en fournit pas, deliberement. 3. le rythme vient des BANDES (`--rythme-bande`), et rien ne pousse le premier ni le dernier enfant d'une bande. 4. alternance des fonds clair / creux / forte, une bande forte au maximum. 5. la colonne de LECTURE reste etroite (`.lecture`, `.ligne__texte`) meme quand la bande est large. LA BANDE FORTE EST EN TEAL, PAS EN NOIR, et dans les DEUX themes (decision G du 16/09/2026). La maquette la montrait quasi-noire ; en noir elle se serait fondue dans la page en theme sombre. Le teal profond detache dans les deux, et il est de la marque. ========================================================================== */ /* --- l'oeil : la seule etiquette qui survit, quand le titre est une phrase ---- */ /* Gardee sur la page de l'offre parce que le h1 y est une phrase, pas un intitule : l'oeil porte le nom de la page (« Tarifs ») que le titre ne donne pas. Partout ailleurs, une etiquette qui ne fait que repeter le titre est retiree. */ .oeil { font-family: var(--f-mono); font-size: var(--t-compteur); letter-spacing: var(--ls-etiquette); text-transform: uppercase; color: var(--c-accent); margin: 0 0 var(--e-3); } /* L'oeil sur la bande forte : sa couleur est fixee plus bas, avec le reste du texte clair de la bande (contraste, voir la section .bande--forte). */ /* --- la bande et son intérieur --------------------------------------------- */ .bande { padding-block: var(--rythme-bande); } .bande--creux { background: var(--c-fond-creux); } .bande--forte { background: var(--c-accent-profond); color: var(--c-texte-sur-sombre); } .dans { max-width: var(--largeur-page); margin-inline: auto; padding-inline: var(--gouttiere); } /* Rien ne pousse le premier ni le dernier enfant d'une bande : les doubles marges sont supprimees A LA SOURCE, pas retouchees element par element. */ .dans > :first-child { margin-top: 0; } .dans > :last-child { margin-bottom: 0; } /* LES GABARITS DE CONTENU (B, C, D) CALENT LEUR CONTENEUR SUR LEUR CONTENU, pas sur `--largeur-page`. Le `
` porte ce role ; l'accueil (gabarit A, sur mesure) garde `--largeur-page`. Voir la note du jeton. */ .page-contenu .dans { max-width: var(--largeur-contenu); } /* ET, dans ce conteneur, les elements qui remplissaient toute la largeur (titres, ligne de meta, liste de sources, appel) se bornent au BLOC. UNE seule regle a la source, pas un max-width recopie dans chaque composant : sans elle, ces elements vaudraient la largeur du conteneur, et le controle d'agencement, qui compare le conteneur au plus large objet qu'il porte, ne verrait plus d'ecart a mesurer. La colonne de LECTURE (`--largeur-lecture`), elle, ne bouge pas : c'est le conteneur qui redescend, pas le texte qui s'elargit. */ .page-contenu .prose h2, .page-contenu .meta, .page-contenu .sources__liste, .page-contenu .appel-offre { max-width: var(--largeur-bloc); } /* La colonne de lecture n'est pas la largeur du conteneur. */ .lecture { max-width: var(--largeur-agencement-lecture); } /* Un bloc qui suit un chapeau monte d'un seul cran, pas de deux. */ .chapeau + * { margin-top: var(--e-6); } /* LE FOND DE LA BANDE FORTE EST FIXE (teal profond dans les DEUX themes), donc TOUT son texte doit etre clair dans les deux themes - et le seul jeton de texte qui l'est est `--c-texte-sur-sombre` (#D3DBDA, 6.4:1 sur le teal). Les jetons d'accent BASCULENT avec le theme : `--c-accent-contraste` vaut #FFF en clair mais #0B1413 en sombre, `--c-accent-lave` #E2EFED puis #111D1C - poses sur un fond teal FIXE, ils donnaient un titre noir (2.1:1) et un lien quasi-noir (1.9:1) en theme sombre, donc illisibles. Constate par bin/contraste-check.php le 17/09/2026 ; on prend donc partout le texte clair. Les liens gardent le SOULIGNEMENT, puisque la couleur ne les distingue plus du texte courant. */ .bande--forte h1, .bande--forte h2, .bande--forte h3, .bande--forte h4, .bande--forte .titre-clair, .bande--forte .releve__tete, .bande--forte .oeil, .bande--forte .renvoi { color: var(--c-texte-sur-sombre); } .bande--forte a { color: var(--c-texte-sur-sombre); text-decoration: underline; } .bande--forte .releve__ligne > p:last-child, .bande--forte p { color: var(--c-texte-sur-sombre); } .bande--forte .releve__ligne { border-color: var(--c-bord-sombre); } /* La puce de renvoi (fond clair par defaut) formait une boite claire au texte clair : on la rend plate, sans fond, le texte clair ci-dessus s'appliquant. */ .bande--forte .renvoi { background: transparent; } /* --- LE PANNEAU DE L'OFFRE : le seul objet encadre de la page --------------- */ .offre { margin-top: var(--e-6); background: var(--c-fond-eleve); border: 1px solid var(--c-bord); border-top: var(--filet-accent) solid var(--c-accent); display: grid; grid-template-columns: minmax(var(--largeur-prix), var(--largeur-panneau-large)) 1fr; } .offre__prix { padding: var(--e-8); border-right: 1px solid var(--c-bord); display: flex; flex-direction: column; justify-content: center; gap: var(--e-3); background: var(--c-accent-lave); } .offre__quoi { font-family: var(--f-mono); font-size: var(--t-compteur); letter-spacing: var(--ls-etiquette); text-transform: uppercase; color: var(--c-accent-profond); margin: 0; } .chiffre { font-family: var(--f-titre); font-weight: 800; font-size: var(--t-verdict); line-height: var(--lh-serre); letter-spacing: var(--ls-titre-xl); font-variant-numeric: tabular-nums; color: var(--c-texte); margin: 0; display: flex; align-items: baseline; gap: 0.15em; } .chiffre__unite { font-family: var(--f-titre); font-weight: 700; font-size: 0.3em; color: var(--c-accent-profond); } .offre__cadence { font-family: var(--f-mono); font-size: var(--t-s); line-height: var(--lh-large); color: var(--c-texte-doux); margin: 0; } .offre__cadence b { color: var(--c-texte); font-weight: 500; } .offre__pieces { padding: var(--e-8); } .offre__pieces > h3 { font-family: var(--f-mono); font-size: var(--t-compteur); letter-spacing: var(--ls-etiquette); text-transform: uppercase; color: var(--c-texte-tenu); margin: 0 0 var(--e-6); } /* Les quatre pieces : une liste a filet lateral, PAS quatre cartes, et sans numeros - quatre pieces ne sont pas une sequence. */ .pieces { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e-6); } .pieces li { padding-left: var(--e-4); border-left: var(--filet-fin) solid var(--c-accent-lave); } .pieces h4 { font-family: var(--f-titre); font-weight: 700; font-size: var(--t-base); line-height: var(--lh-serre); margin: 0 0 var(--e-1); } .pieces p { font-size: var(--t-s); color: var(--c-texte-doux); margin: 0; } .renvoi { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--c-texte-tenu); white-space: nowrap; } /* --- LE PANNEAU D'APPEL : l'unique objet encadre de l'accueil --------------- */ /* L'accueil garde son gabarit sur mesure, mais suit les regles : son seul objet encadre est le point d'entree du diagnostic, l'appel principal du site. C'est un panneau plein, au meme titre que `.offre` sur la page de l'offre, et `agencement-check` compte les deux ensemble : une page, un panneau. */ .panneau-appel { margin-top: var(--e-6); background: var(--c-accent-lave); border: 1px solid var(--c-bord); border-top: var(--filet-accent) solid var(--c-accent); padding: var(--e-8); display: flex; flex-direction: column; gap: var(--e-4); align-items: flex-start; } .panneau-appel > * { margin: 0; } .panneau-appel .action-offre { margin-top: 0; } /* --- LIGNES DE BAREME : ce qui n'est pas l'offre ---------------------------- */ .lignes { margin-top: var(--e-6); border-top: 1px solid var(--c-bord); } .ligne { display: grid; grid-template-columns: 1fr auto; gap: var(--e-6); padding: var(--e-6) 0; border-bottom: 1px solid var(--c-bord); align-items: start; } .ligne__texte { max-width: var(--largeur-agencement-ligne); } .ligne__texte p { font-size: var(--t-s); color: var(--c-texte-doux); margin: var(--e-1) 0 0; } .ligne__prix { font-family: var(--f-titre); font-weight: 800; font-size: var(--t-2xl); line-height: var(--lh-serre); letter-spacing: var(--ls-titre); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; margin: 0; } .ligne__prix small { display: block; font-family: var(--f-mono); font-size: var(--t-compteur); letter-spacing: var(--ls-etiquette); text-transform: uppercase; color: var(--c-texte-doux); margin-top: var(--e-2); } .jeton-bareme { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: var(--ls-etiquette); text-transform: uppercase; white-space: nowrap; text-align: right; margin: 0; padding-top: var(--e-1); } .jeton-bareme--sans { color: var(--s-hors-champ); } .jeton-bareme--inclus { color: var(--c-accent-profond); } .jeton-bareme--devis { color: var(--c-texte-doux); } /* --- LIMITES : la liste de la bande forte ----------------------------------- */ .limites { list-style: none; padding: 0; margin: var(--e-6) 0 0; border-top: 1px solid var(--c-bord-sombre); } .limites li { display: grid; grid-template-columns: 2.25em 1fr; gap: var(--e-4); padding: var(--e-6) 0; border-bottom: 1px solid var(--c-bord-sombre); align-items: baseline; } .limites__non { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: var(--ls-etiquette); text-transform: uppercase; color: var(--c-accent-sur-sombre); } .limites p { font-size: var(--t-s); color: var(--c-texte-sur-sombre); margin: 0; max-width: var(--largeur-agencement-ligne); } .chapeau-clair { color: var(--c-texte-sur-sombre); } /* --- ENCART : filaire, jamais une carte ------------------------------------- */ .encart { margin-top: var(--e-6); background: var(--c-accent-lave); border-left: var(--filet-encart) solid var(--c-accent); padding: var(--e-6); } .encart h3 { margin-bottom: var(--e-2); } .encart p { font-size: var(--t-s); color: var(--c-texte-doux); margin: 0; } /* --- appel a l'action de fin de bande --------------------------------------- */ .appel-offre { margin-top: var(--e-8); padding-top: var(--e-6); border-top: 1px solid var(--c-bord); } .action-offre { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; margin-top: var(--e-4); } /* --- ruptures --------------------------------------------------------------- */ @media (max-width: 60rem) { /* jeton-check: ignore (breakpoint, pas une valeur de charte) */ .offre { grid-template-columns: 1fr; } .offre__prix { border-right: 0; border-bottom: 1px solid var(--c-bord); } } @media (max-width: 34rem) { /* jeton-check: ignore (breakpoint) */ .ligne { grid-template-columns: 1fr; gap: var(--e-3); } .ligne__prix, .jeton-bareme { text-align: left; } .limites li { grid-template-columns: 1fr; gap: var(--e-2); } } /* ===== /assets/css/gabarits/accueil.css ===== */ /* ========================================================================== gabarits/accueil.css - le gabarit A, refonte charte DATIVO (16/09/2026). ========================================================================== Langage repris de dativo.fr et rgpdfacile.fr : hero vert profond degrade sur grille discrete, gros titre Bricolage Grotesque avec un mot en accent, cartes blanches arrondies a ombre douce, tuiles d'icones, pilules, lignes de confiance, un accent orange ponctuel. Tout en JETONS (aucune valeur en dur : couleurs par var() et color-mix, tailles par --e-* / --t-*, rayons par --r-*). ========================================================================== */ /* --- pilule d'accroche --- */ .pilule { display: inline-flex; align-items: center; gap: var(--e-2); font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: var(--ls-etiquette); text-transform: uppercase; padding: var(--e-2) var(--e-4); border-radius: var(--r-pilule); background: color-mix(in srgb, var(--c-accent) 12%, transparent); color: var(--c-accent); } .pilule::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--c-accent); } /* --- boutons du hero (sur fond vert profond) --- */ .action-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4); } .cta-note { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .02em; } /* --- le HERO --- */ .hero-cra { position: relative; overflow: clip; background: radial-gradient(120% 140% at 85% 0%, color-mix(in srgb, var(--c-accent) 22%, var(--c-accent-profond)) 0%, transparent 55%), linear-gradient(160deg, var(--c-accent-profond), color-mix(in srgb, var(--c-accent-profond) 82%, var(--c-fond-pied))); color: var(--c-texte-sur-sombre); } /* grille discrete, comme la charte : deux filets clairs tres attenues */ .hero-cra::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(color-mix(in srgb, var(--c-texte-sur-sombre) 6%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--c-texte-sur-sombre) 6%, transparent) 1px, transparent 1px); background-size: 3rem 3rem; /* jeton-check: ignore (motif de fond, pas une valeur de charte) */ mask-image: radial-gradient(80% 80% at 70% 10%, black 40%, transparent 80%); } .hero-cra > .dans { position: relative; padding-block: clamp(var(--e-14), 8vw, var(--e-16)); } .hero-cra__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(var(--e-8), 5vw, var(--e-16)); align-items: center; } .hero-cra h1 { font-size: var(--t-display); font-weight: 800; line-height: var(--lh-serre); letter-spacing: var(--ls-titre-xl); margin-block: var(--e-5) var(--e-5); } :root[data-theme] .hero-cra h1, .hero-cra h1 { color: var(--c-texte-sur-sombre); } .hero-cra h1 .accent { color: var(--c-accent-sur-sombre); } .hero-cra__lede { font-size: var(--t-l); line-height: var(--lh-normal); color: color-mix(in srgb, var(--c-texte-sur-sombre) 90%, transparent); max-width: 34ch; } .hero-cra .pilule { background: color-mix(in srgb, var(--c-texte-sur-sombre) 12%, transparent); color: var(--c-accent-sur-sombre); } .hero-cra .pilule::before { background: var(--c-accent-sur-sombre); } .hero-cra .cta-note { color: color-mix(in srgb, var(--c-texte-sur-sombre) 70%, transparent); } /* bouton principal du hero : orange Dativo, l'appel a l'action qui doit sauter aux yeux */ .bouton-hero { display: inline-flex; align-items: center; gap: var(--e-2); font-family: var(--f-texte); font-weight: 600; font-size: var(--t-m); padding: var(--e-4) var(--e-6); border-radius: var(--r-bouton); background: var(--c-pop-vif); color: var(--c-texte-sur-sombre); border: 1px solid transparent; transition: transform var(--d-court) var(--courbe), box-shadow var(--d-court) var(--courbe), background var(--d-court) var(--courbe); } .bouton-hero:hover { transform: translateY(-0.12em); box-shadow: 0 var(--e-3) var(--e-6) color-mix(in srgb, var(--c-pop-vif) 45%, transparent); } .bouton-hero:active { transform: translateY(0); } .bouton-hero .fleche { transition: transform var(--d-court) var(--courbe); } .bouton-hero:hover .fleche { transform: translateX(0.2em); } .bouton-fantome { display: inline-flex; align-items: center; gap: var(--e-2); font-weight: 600; font-size: var(--t-base); padding: var(--e-4) var(--e-5); border-radius: var(--r-bouton); background: transparent; color: var(--c-texte-sur-sombre); border: 1px solid color-mix(in srgb, var(--c-texte-sur-sombre) 35%, transparent); transition: border-color var(--d-court) var(--courbe), background var(--d-court) var(--courbe); } .bouton-fantome:hover { border-color: var(--c-texte-sur-sombre); background: color-mix(in srgb, var(--c-texte-sur-sombre) 8%, transparent); } /* ligne de confiance */ .confiance { display: flex; flex-wrap: wrap; gap: var(--e-5) var(--e-8); margin-top: var(--e-10); } .confiance li { display: flex; align-items: center; gap: var(--e-2); list-style: none; font-size: var(--t-s); color: color-mix(in srgb, var(--c-texte-sur-sombre) 85%, transparent); } .confiance svg { width: 1.15em; height: 1.15em; flex: none; color: var(--c-accent-sur-sombre); } /* carte flottante du hero : le dossier qui se perime, en apercu */ .hero-carte { background: var(--c-fond-eleve); color: var(--c-texte); border-radius: var(--r-carte); box-shadow: var(--ombre-levee); padding: var(--e-6); } .hero-carte__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); margin-bottom: var(--e-4); } .hero-carte__tete b { font-family: var(--f-titre); font-weight: 700; font-size: var(--t-m); } .badge-perime { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: var(--ls-etiquette); text-transform: uppercase; padding: var(--e-1) var(--e-3); border-radius: var(--r-pilule); background: var(--c-pop-lave); color: var(--c-pop); } .hero-carte ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); } .hero-carte li { display: grid; grid-template-columns: 1fr auto; gap: var(--e-4); align-items: center; padding-block: var(--e-3); border-bottom: 1px solid var(--c-bord); } .hero-carte li:last-child { border-bottom: 0; } .hero-carte .quoi { font-size: var(--t-s); } .hero-carte .ref { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--c-texte-tenu); white-space: nowrap; } .hero-carte .etat { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--c-pop); white-space: nowrap; } @media (max-width: 60rem) { /* jeton-check: ignore (breakpoint) */ .hero-cra__grid { grid-template-columns: 1fr; gap: var(--e-10); } } /* --- bande de dates --- */ .dates { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-5); } .date-carte { background: var(--c-fond-eleve); border: 1px solid var(--c-bord); border-radius: var(--r-carte); padding: var(--e-6); box-shadow: var(--ombre-carte); transition: transform var(--d-court) var(--courbe), box-shadow var(--d-court) var(--courbe); } .date-carte:hover { transform: translateY(-0.12em); box-shadow: var(--ombre-levee); } .date-carte .jour { font-family: var(--f-titre); font-weight: 800; font-size: var(--t-xl); letter-spacing: var(--ls-titre); font-variant-numeric: tabular-nums; } .date-carte .quoi { color: var(--c-texte-doux); font-size: var(--t-s); margin-top: var(--e-2); } .statut-pilule { display: inline-block; margin-top: var(--e-4); font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: var(--ls-etiquette); text-transform: uppercase; padding: var(--e-1) var(--e-3); border-radius: var(--r-pilule); } .statut-pilule--on { background: color-mix(in srgb, var(--c-accent) 14%, transparent); color: var(--c-accent); } .statut-pilule--soon { border: 1px solid var(--c-bord); color: var(--c-texte-tenu); font-family: var(--f-mono); } @media (max-width: 48rem) { /* jeton-check: ignore (breakpoint) */ .dates { grid-template-columns: 1fr; } } /* --- carte de demonstration (le dossier se perime) --- */ .demo-carte { background: var(--c-fond-eleve); border: 1px solid var(--c-bord); border-radius: var(--r-carte); overflow: hidden; box-shadow: var(--ombre-carte); } .demo-carte table { width: 100%; border-collapse: collapse; font-size: var(--t-base); } .demo-carte thead th { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: var(--ls-etiquette); text-transform: uppercase; color: var(--c-texte-tenu); text-align: start; padding: var(--e-4) var(--e-6); border-bottom: 1px solid var(--c-bord); } .demo-carte td { padding: var(--e-4) var(--e-6); border-bottom: 1px solid var(--c-bord); vertical-align: top; } .demo-carte tbody tr:last-child td { border-bottom: 0; } .demo-carte tbody tr { transition: background var(--d-court) var(--courbe); } .demo-carte tbody tr:hover { background: var(--c-fond-creux); } .demo-carte .ref { font-family: var(--f-mono); font-size: var(--t-s); color: var(--c-accent); white-space: nowrap; } .demo-carte .decroche { color: var(--c-pop); font-weight: 500; } .demo-note { padding: var(--e-6); border-top: var(--filet-accent) solid var(--c-accent); font-size: var(--t-m); background: var(--c-accent-lave); } .demo-note b { color: var(--c-texte); } /* --- deux langues --- */ .langues { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-6); } .langue { border-radius: var(--r-carte); padding: var(--e-8); } .langue--droit { background: var(--c-fond-creux); border: 1px solid var(--c-bord); } .langue--metier { background: var(--c-accent-profond); color: var(--c-texte-sur-sombre); } .langue .tab { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: var(--ls-etiquette); text-transform: uppercase; margin-bottom: var(--e-4); display: block; } .langue--droit .tab { color: var(--c-texte-tenu); font-family: var(--f-mono); } .langue--metier .tab { color: var(--c-accent-sur-sombre); } .reglement { font-family: var(--f-mono); font-size: var(--t-s); line-height: var(--lh-large); color: var(--c-texte-doux); margin: 0; } .reglement b { color: var(--c-texte); font-weight: 600; } .question { font-family: var(--f-titre); font-weight: 700; font-size: var(--t-xl); line-height: var(--lh-serre); letter-spacing: var(--ls-titre); margin: 0; } .reponses { margin-top: var(--e-5); display: flex; flex-wrap: wrap; gap: var(--e-2); } .reponses span { font-family: var(--f-mono); font-size: var(--t-s); padding: var(--e-2) var(--e-4); border-radius: var(--r-bouton); border: 1px solid color-mix(in srgb, var(--c-texte-sur-sombre) 30%, transparent); } @media (max-width: 48rem) { /* jeton-check: ignore (breakpoint) */ .langues { grid-template-columns: 1fr; } } /* --- par ou entrer --- */ .entrees { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-5); } .entree { display: block; background: var(--c-fond-eleve); border: 1px solid var(--c-bord); border-radius: var(--r-carte); padding: var(--e-6); box-shadow: var(--ombre-carte); transition: transform var(--d-court) var(--courbe), box-shadow var(--d-court) var(--courbe), border-color var(--d-court) var(--courbe); } .entree:hover { transform: translateY(-0.18em); box-shadow: var(--ombre-levee); border-color: color-mix(in srgb, var(--c-accent) 40%, var(--c-bord)); } .entree__tuile { display: inline-grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: var(--r-bouton); background: var(--c-accent-lave); color: var(--c-accent); margin-bottom: var(--e-4); } .entree__tuile svg { width: 1.35em; height: 1.35em; } .entree h3 { font-family: var(--f-titre); font-weight: 700; font-size: var(--t-l); letter-spacing: var(--ls-titre); display: flex; align-items: center; gap: var(--e-2); } .entree h3 .fleche { color: var(--c-accent); transition: transform var(--d-court) var(--courbe); margin-inline-start: auto; } .entree:hover h3 .fleche { transform: translateX(0.25em); } .entree p { color: var(--c-texte-doux); font-size: var(--t-s); margin-top: var(--e-2); } @media (max-width: 40rem) { /* jeton-check: ignore (breakpoint) */ .entrees { grid-template-columns: 1fr; } } /* --- prix --- */ .prix-band { background: var(--c-accent-profond); color: var(--c-texte-sur-sombre); } .prix-band h2 { color: var(--c-texte-sur-sombre); } .prix-band .chapeau { color: color-mix(in srgb, var(--c-texte-sur-sombre) 85%, transparent); } .prix-grille { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-6); margin-block: var(--e-8); } .prix-carte { border: 1px solid color-mix(in srgb, var(--c-texte-sur-sombre) 22%, transparent); border-radius: var(--r-carte); padding: var(--e-8); background: var(--c-fond-pied); } .prix-carte .role { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: var(--ls-etiquette); text-transform: uppercase; color: var(--c-accent-sur-sombre); } .prix-carte .chiffre { font-family: var(--f-titre); font-weight: 800; font-size: var(--t-3xl); line-height: var(--lh-serre); letter-spacing: var(--ls-titre-xl); font-variant-numeric: tabular-nums; margin-block: var(--e-3) var(--e-1); display: flex; align-items: baseline; gap: .15em; } .prix-carte .chiffre small { font-family: var(--f-mono); font-size: var(--t-s); font-weight: 500; color: color-mix(in srgb, var(--c-texte-sur-sombre) 72%, transparent); } .prix-carte .desc { color: color-mix(in srgb, var(--c-texte-sur-sombre) 85%, transparent); font-size: var(--t-s); } @media (max-width: 40rem) { /* jeton-check: ignore (breakpoint) */ .prix-grille { grid-template-columns: 1fr; } } /* --- en-tete de section de l'accueil --- */ .tete { max-width: 46ch; margin-bottom: var(--e-10); } .tete h2 { font-family: var(--f-titre); font-weight: 800; font-size: clamp(var(--t-2xl), 3.4vw, var(--t-3xl)); letter-spacing: var(--ls-titre); } .tete .chapeau { color: var(--c-texte-doux); font-size: var(--t-m); margin-top: var(--e-4); max-width: 56ch; } .prix-band .tete .chapeau { color: color-mix(in srgb, var(--c-texte-sur-sombre) 85%, transparent); } /* Les fleches SVG (bouton hero, cartes d'entree) ont une TAILLE : sans elle, dans un conteneur flex a grande fonte, le SVG s'etire et devient enorme. */ .fleche { width: 1.15em; height: 1.15em; flex: none; } .bouton-hero .fleche { width: 1.1em; height: 1.1em; } /* Le chiffre de prix est clair sur la carte sombre, explicitement. */ .prix-carte .chiffre { color: var(--c-texte-sur-sombre); } /* ===== /assets/css/ruptures.css ===== */ /* ========================================================================== ruptures.css - comment TOUT se replie, aux trois largeurs. ========================================================================== Groupe volontairement, et c'est le cas que la section 3 du document prevoit : ce fichier traite UN sujet de bout en bout. Eclater les media queries par composant obligerait a ouvrir douze fichiers pour comprendre une seule rupture, ce qui est le test de la recherche pris a l'envers. ========================================================================== */ /* ============================================================================= RESPONSIVE - trois ruptures, et rien qui se superpose (specification 8) ============================================================================= */ @media (max-width: 1000px) { /* Le menu horizontal passe en panneau. Le logo et le bouton du diagnostic restent dans la barre : ce sont les deux seules choses dont on a besoin sans ouvrir quoi que ce soit. */ .menu { display: none; } .bascule-menu { display: inline-flex; align-items: center; gap: var(--e-2); background: none; border: 1px solid var(--c-bord); border-radius: var(--r-m); padding: var(--e-2) var(--e-3); font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: var(--ls-etiquette); text-transform: uppercase; color: var(--c-texte); cursor: pointer; } /* Le sommaire devient un bloc repliable APRES le chapeau, ferme par defaut. Une seule colonne : il ne flotte pas a cote, il s'empile. */ .page--avec-sommaire { display: block; } .sommaire { position: static; max-height: none; margin-block: 0 var(--e-8); border: 1px solid var(--c-bord); border-radius: var(--r-m); padding: var(--e-4) var(--e-5); } /* Ici le sommaire EST repliable : le resume reparait, le titre mono s'efface. */ .sommaire > summary { display: list-item; font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: var(--ls-etiquette); text-transform: uppercase; cursor: pointer; } .sommaire__titre { display: none; } } @media (max-width: 700px) { :root { --gouttiere: var(--e-4); } .article > h1 { font-size: var(--t-2xl); } .chapeau { font-size: var(--t-m); } .pied__grille { grid-template-columns: 1fr; gap: var(--e-8); } .voisins { flex-direction: column; } .prose h2.etape { padding-inline-start: 0; } .etape__n { position: static; display: block; margin-block: 0 var(--e-1); } } /* ===== /assets/css/impression.css ===== */ /* ========================================================================== impression.css - la feuille papier des pages de contenu. ========================================================================== ========================================================================== */ /* ============================================================================= IMPRESSION - une page de contenu doit sortir lisible sur papier ============================================================================= */ @media print { body { padding-block-start: 0; } .entete, .panneau, .voile, .sommaire, .appel, .pied, .bascule-menu { display: none !important; } .page--avec-sommaire { display: block; } .prose > p, .prose > ul, .prose > ol, .chapeau { max-width: none; } a { color: inherit; text-decoration: underline; } .prose h2, .prose h3 { break-after: avoid; } .encart, .releve__ligne, table { break-inside: avoid; } }