/* ===== /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/entete-parcours.css ===== */ /* ========================================================================== layout/entete-parcours.css - l'en-tete reduit du tunnel, et rien d'autre. ========================================================================== Specification 5.E. C'est une feuille SEPAREE de layout/entete.css, et la raison n'est pas la taille du fichier : les deux en-tetes ne changent pas pour les memes raisons. Celui du site porte la navigation et evoluera avec elle ; celui-ci existe pour qu'il n'y ait PAS de navigation. Les fondre aurait fait qu'ajouter une entree au menu du site toucherait le tunnel. UNE SEULE SORTIE, ET ELLE EST ANNONCEE. « Un visiteur qui repond a des questions ne doit pas avoir dix portes de sortie sous les yeux » - mais il doit en avoir UNE, lisible, sinon la seule issue visible est le bouton precedent du navigateur, qui reposte le formulaire. ========================================================================== */ .entete-parcours { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100; background: var(--c-fond-eleve); border-block-end: 1px solid var(--c-bord); } .entete-parcours__barre { display: flex; align-items: center; gap: var(--e-4); height: var(--h-entete-reduit); max-width: var(--largeur-page); margin-inline: auto; padding-inline: var(--gouttiere); } .entete-parcours__marque { font-family: var(--f-titre); font-weight: 800; font-size: var(--t-base); letter-spacing: var(--ls-titre); color: var(--c-texte); text-decoration: none; white-space: nowrap; } /* `Quitter le test` est un lien DISCRET et non un bouton : c'est une sortie, pas une action qu'on encourage. */ .entete-parcours__sortie { margin-inline-start: auto; font-size: var(--t-s); color: var(--c-texte-doux); text-decoration: none; white-space: nowrap; } .entete-parcours__sortie:hover { color: var(--c-texte); text-decoration: underline; } .entete-parcours__marque:focus-visible, .entete-parcours__sortie:focus-visible { outline: var(--filet-epais) solid var(--c-accent); outline-offset: var(--decalage-focus); } /* --- La barre de progression ----------------------------------------------- */ /* Elle est SOUS l'en-tete et dans le meme bloc fixe : separee, elle se serait desolidarisee d'un pixel au defilement sur certains navigateurs, et ce pixel se voit sur un filet de 3 px. */ .progression { position: relative; height: var(--h-progression); background: var(--c-fond-creux); } .progression__jauge { height: 100%; background: var(--c-accent); /* La largeur est posee en attribut `style` par le serveur : c'est une DONNEE calculee, pas une valeur de charte, donc elle n'a pas de jeton. */ transition: width var(--d-moyen) var(--courbe); } /* Le compteur est pose SOUS la barre, a droite, hors du flux du contenu : dans le flux il aurait pousse le H1 vers le bas de trois lignes sur l'ecran le plus etroit. */ .progression__compteur { position: absolute; inset-block-start: 100%; inset-inline-end: var(--gouttiere); margin: 0; padding-block-start: var(--e-1); font-family: var(--f-mono); font-size: var(--t-compteur); letter-spacing: var(--ls-etiquette); text-transform: uppercase; color: var(--c-texte-tenu); } /* L'en-tete du tunnel est fixe : le contenu commence dessous. La valeur suit les deux hauteurs, jamais un nombre recopie. */ .corps-parcours { padding-block-start: calc(var(--h-entete-reduit) + var(--h-progression)); } /* ===== /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/bouton.css ===== */ /* ========================================================================== composants/bouton.css - un seul modele de bouton hors du site public. ========================================================================== Il vivait dans `gabarits/parcours.css`. Le gabarit F en a besoin lui aussi (« Telecharger en PDF »), et un gabarit qui recopie le bouton d'un autre est la premiere etape vers deux boutons qui ne se ressemblent plus. Le site public garde le sien, `.bouton-accent` dans `layout/entete.css` et `.appel` dans `composants/appel-action.css` : ce sont des elements de navigation et d'incitation, pas l'action d'un ecran. Les fondre aurait fait qu'un changement de bouton de menu touche le questionnaire. ========================================================================== */ .bouton { display: inline-block; font-family: var(--f-texte); font-size: var(--t-base); font-weight: 600; color: var(--c-accent-contraste); background: var(--c-accent); border: 0; border-radius: var(--r-m); padding: var(--e-3) var(--e-6); text-decoration: none; cursor: pointer; } .bouton:hover { filter: brightness(1.08); } .bouton:focus-visible { outline: var(--filet-epais) solid var(--c-accent); outline-offset: var(--decalage-focus); } /* Le retour est un bouton de formulaire, donc il doit CESSER de ressembler a un bouton : c'est un lien de service, pas l'action de l'ecran. */ .bouton-retour { font: inherit; font-size: var(--t-s); color: var(--c-texte-doux); background: none; border: 0; padding: var(--e-2) 0; cursor: pointer; text-decoration: underline; } .bouton-retour:hover { color: var(--c-texte); } .bouton-retour:focus-visible { outline: var(--filet-epais) solid var(--c-accent); outline-offset: var(--decalage-focus); } /* ===== /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/gabarits/parcours.css ===== */ /* ============================================================================= gabarits/parcours.css - les quatre premiers ecrans du tunnel. ============================================================================= Specification 5.E. Le cinquieme ecran est le RAPPORT, et il vit dans gabarits/rapport.css : ce n'est pas le meme objet. Les quatre premiers sont une interface qu'on traverse ; le dernier est un document qu'on garde, qu'on imprime et qu'on fait circuler. Les melanger avait deja une consequence visible - la feuille du tunnel portait des regles de tableau et une section `@media print` dont aucun des quatre ecrans ne se sert. CE FICHIER NE POSE PLUS DE REMISE A ZERO. Il en portait une (box-sizing, html, body, titres) qui doublait base.css, desormais dans le paquet du parcours. Deux remises a zero ne se contredisent pas tant qu'elles sont identiques, et elles cessent de l'etre a la premiere correction faite d'un seul cote. AUCUNE valeur en dur : tout vient de jetons.css, et bin/jetons-check.php le verifie. Les seules litterales admises sont dans les media queries, ou CSS interdit la variable. ============================================================================= */ /* --- La colonne, commune aux quatre ecrans --------------------------------- */ /* Deux largeurs seulement : l'accroche et l'analyse sont etroites parce qu'elles ne portent qu'une chose ; le questionnaire est plus large parce qu'une carte de reponse de 64 px de haut qui n'a que 560 px de large casse ses libelles en trois lignes. */ .colonne-parcours { max-width: var(--largeur-accroche); margin-inline: auto; padding-inline: var(--gouttiere); padding-block: var(--e-8) var(--e-16); } .colonne-parcours--question { max-width: var(--largeur-question); } /* L'ECRAN 4 EST PLUS LARGE QUE LES AUTRES, ET C'EST UNE MESURE, PAS UN GOUT. Sa contrainte est verticale - resultat et formulaire visibles ensemble sans defiler - et la largeur est le seul levier qui la desserre SANS retirer de contenu : a 632 px le paragraphe de l'article 13 tient sur sept lignes et la phrase de qualification sur deux ; a 840 il en faut cinq et une. Releve au navigateur : le bas du formulaire passe de 1175 px a 900. C'est la bonne facon de tenir la contrainte. L'autre - raccourcir l'information de l'article 13 pour gagner des pixels - reviendrait a degrader une mention legale au profit d'une mise en page. */ .colonne-parcours--resultat { max-width: var(--largeur-bloc); } /* --- Ecran 1 : l'accroche. Rien d'autre sur l'ecran ------------------------ */ .accroche h1 { font-size: var(--t-2xl); font-weight: 800; letter-spacing: var(--ls-titre-xl); margin-block: 0 var(--e-5); } .accroche__chapeau { font-size: var(--t-m); line-height: var(--lh-normal); color: var(--c-texte-doux); margin-block: 0 var(--e-8); } .accroche__mention { font-size: var(--t-s); color: var(--c-texte-doux); margin-block: var(--e-3) 0; } /* --- Ecran 2 : une question par ecran -------------------------------------- */ /* SANS JS ELLES SONT TOUTES LA, EMPILEES, et c'est voulu : le parcours doit aboutir sans script. Le module `parcours` pose `data-sequence` sur le formulaire, ce qui masque les questions deja repondues et n'en laisse qu'une. L'etat de reference reste celui du serveur dans les deux cas. */ .question { border: 0; margin: 0; padding: 0; margin-block-end: var(--e-12); } .question__legende { display: block; width: 100%; font-family: var(--f-titre); font-size: var(--t-xl); font-weight: 700; line-height: var(--lh-serre); letter-spacing: var(--ls-titre); padding: 0; margin-block-end: var(--e-3); } .question__aide { font-size: var(--t-aide); line-height: var(--lh-normal); color: var(--c-texte-doux); margin-block: 0 var(--e-5); } .question__intro { font-size: var(--t-s); line-height: var(--lh-normal); color: var(--c-texte-doux); background: var(--c-fond-creux); border-radius: var(--r-m); padding: var(--e-3) var(--e-4); margin-block: 0 var(--e-6); } .question__erreur { font-size: var(--t-s); color: var(--s-concerne); background: var(--s-concerne-fond); border-radius: var(--r-m); padding: var(--e-3) var(--e-4); margin-block: 0 var(--e-4); } /* --- Les cartes de reponse -------------------------------------------------- */ /* Pleine largeur, 64 px MINIMUM - minimum et non hauteur fixe : un libelle de deux lignes doit pousser la carte, pas deborder d'elle. La case elle-meme reste dans le flux et visible : la masquer au profit d'un faux bouton radio dessine coute l'etat natif de selection, et c'est celui que les technologies d'assistance lisent. */ .reponses { display: grid; gap: var(--e-2); } .reponse { display: flex; align-items: center; gap: var(--e-4); min-height: var(--h-reponse); padding: var(--e-3) var(--e-5); border: 1px solid var(--c-bord); border-radius: var(--r-m); background: var(--c-fond-eleve); cursor: pointer; transition: background var(--d-court) var(--courbe), border-color var(--d-court) var(--courbe); } .reponse:hover { border-color: var(--c-accent); background: var(--c-accent-lave); } .reponse:has(input:checked) { border-color: var(--c-accent); background: var(--c-accent-lave); box-shadow: inset var(--filet-epais) 0 0 0 var(--c-accent); } /* Le focus se pose sur la CARTE et non sur la case : la case fait 13 px au milieu d'une cible de 64, et un liseré autour d'elle seule ne se voit pas. */ .reponse:has(input:focus-visible) { outline: var(--filet-epais) solid var(--c-accent); outline-offset: var(--decalage-focus); } .reponse input { flex: none; margin: 0; } .reponse__texte { font-size: var(--t-base); line-height: var(--lh-normal); } /* L'intitule d'un groupe d'affichage. Il vient des donnees, et il porte un usage - jamais un niveau de risque : l'ordre du referentiel melange volontairement les classes, et les retrier revelerait la classification que les libelles se gardent de nommer. */ .reponses__groupe { 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-block: var(--e-5) var(--e-1); } .reponses__groupe:first-child { margin-block-start: 0; } /* --- La barre d'actions du questionnaire ----------------------------------- */ .actions { display: flex; align-items: center; gap: var(--e-4); margin-block-start: var(--e-8); } /* Le retour est a GAUCHE et le continuer a droite : l'ordre de lecture place l'action qui avance en fin de ligne, la ou le regard termine. */ .actions .bouton { margin-inline-start: auto; } /* LA SEQUENCE, posee par le module JS et par lui seul. Sans script, l'attribut n'existe pas et toutes les questions restent visibles, empilees : c'est le mode degrade, et il est complet. */ [data-sequence] .question--repondue { display: none; } /* --- Ecran 3 : l'analyse. Une attente REELLE, habillee -------------------- */ /* Le serveur recalcule le verdict, determine le profil de rapport et prepare les blocs pendant ces secondes. Le script ne fabrique pas l'attente, il l'allonge pour la rendre lisible. La difference n'est pas theorique : une attente feinte sur un site vendu par un DPO est une faute qui se paie. */ .analyse { min-height: 40vh; /* jeton-check: ignore - une proportion de fenetre n'est pas une mesure de charte */ display: grid; place-content: center; text-align: center; } .analyse__etat { font-family: var(--f-titre); font-size: var(--t-l); font-weight: 700; letter-spacing: var(--ls-titre); color: var(--c-texte); margin: 0; min-height: calc(var(--t-l) * var(--lh-normal) * 2); } /* LES CINQ MESSAGES SE SUCCEDENT AU MEME ENDROIT, jamais en liste qui s'allonge : une liste qui grandit deplace le regard a chaque ligne et donne a une attente de trois secondes l'air d'un traitement par lots. */ .analyse__etat > span { display: block; animation: analyse-releve var(--d-moyen) var(--courbe) both; } /* PAS DE REGLE DE MASQUAGE ICI, ET C'EST LE CORRECTIF. `display: block` ci-dessus ecrasait `[hidden]` du navigateur, qui n'a pas `!important` : les cinq messages sortaient tous ensemble. La premiere version du correctif reposait des `[hidden] { display: none }` locaux, un par element masquable - c'est-a-dire une liste a tenir a jour, donc un oubli programme. La regle unique vit desormais dans `base.css`, chargee par tous les paquets, et `bin/masquage-check.php` la garde en vie. Ne rien remettre ici : un masquage local redeviendrait une liste. */ @keyframes analyse-releve { from { opacity: 0; transform: translateY(var(--e-2)); } to { opacity: 1; transform: none; } } .analyse__filet { /* `width: 100%` et non la largeur de la colonne : le filet portait `--largeur-accroche`, soit 560 px dans une boite de contenu qui en fait 512 une fois la gouttiere retiree. Il depassait donc du texte qu'il accompagne, des deux cotes, et seul `max-width: 100%` empechait la page de defiler. */ width: 100%; height: var(--h-progression); margin-block-start: var(--e-6); background: var(--c-fond-creux); overflow: hidden; } .analyse__filet::after { content: ""; display: block; width: 40%; /* jeton-check: ignore - proportion de la piste, pas une mesure */ height: 100%; background: var(--c-accent); animation: analyse-va-et-vient 1.4s var(--courbe) infinite; /* jeton-check: ignore - cadence d'un indicateur indetermine, hors des trois durees d'interaction */ } @keyframes analyse-va-et-vient { from { transform: translateX(-100%); } to { transform: translateX(250%); } } /* MOUVEMENT REDUIT : UN SIMPLE « ANALYSE EN COURS » (specification 5.E). La bascule est ici, en CSS, et non dans le module : elle doit tenir meme si le script ne charge pas, et une preference d'affichage n'a pas a transiter par du JavaScript. La regle ne peut pas non plus vivre dans les jetons, qui mettent des durees a zero - une duree nulle sur une animation infinie la laisserait tourner, et la succession des cinq messages resterait. */ .analyse__reduit { display: none; } @media (prefers-reduced-motion: reduce) { .analyse__sequence { display: none; } .analyse__reduit { display: block; } } /* L'ECHEC EST FRANC, ET IL NE PROPOSE PAS DE VERDICT. Un repli silencieux vers un verdict par defaut serait un mensonge sur le seul ecran ou le visiteur nous accorde sa confiance sans contrepartie. */ .analyse__echec { border: 1px solid var(--s-concerne); border-radius: var(--r-m); background: var(--s-concerne-fond); color: var(--s-concerne); padding: var(--e-5); text-align: start; } .analyse__echec p { margin-block: 0 var(--e-4); } .analyse__echec p:last-child { margin-block-end: 0; } /* --- Ecran 4 : le resultat, puis le formulaire ----------------------------- */ /* LES DEUX BLOCS SONT VISIBLES ENSEMBLE SANS DEFILER sur un ecran de bureau, et c'est la contrainte qui commande toutes les mesures de cette section : le resultat est compact, les champs vont par deux, et le resultat ne dit QU'UNE phrase de qualification. Aucune obligation, aucun delai, aucun renvoi d'article : c'est exactement ce qui s'echange contre des coordonnees a l'ecran suivant. */ .resultat { border: 1px solid var(--c-bord); border-radius: var(--r-l); background: var(--c-fond-eleve); overflow: hidden; box-shadow: var(--ombre-carte); margin-block-end: var(--e-5); } /* Le bandeau est un FILET DE COULEUR de 6 px, sans texte. Il en portait un - « Le reglement s'applique » - qui redisait le verdict juste au-dessus du verdict : deux formulations du meme fait se contredisent tot ou tard, et celle du haut n'etait pas celle que le referentiel versionne. */ .resultat__bandeau { height: var(--h-bandeau-statut); } .resultat__corps { padding: var(--e-5) var(--e-6); } .resultat__pret { font-size: var(--t-s); color: var(--c-texte-doux); margin-block: 0 var(--e-2); } .resultat__verdict { font-family: var(--f-titre); font-size: var(--t-verdict); font-weight: 800; letter-spacing: var(--ls-titre-xl); line-height: var(--lh-serre); margin-block: 0 var(--e-3); } .resultat__qualification { font-size: var(--t-m); line-height: var(--lh-normal); color: var(--c-texte-doux); margin: 0; } .ton-concerne .resultat__bandeau { background: var(--s-concerne); } .ton-attention .resultat__bandeau { background: var(--s-attention); } .ton-hors-champ .resultat__bandeau { background: var(--s-hors-champ); } .ton-concerne .resultat__verdict { color: var(--s-concerne); } .ton-attention .resultat__verdict { color: var(--s-attention); } .ton-hors-champ .resultat__verdict { color: var(--s-hors-champ); } /* Les quatre espacements internes du formulaire sont a UN CRAN en dessous de ce que porterait une page de contenu (--e-4 au lieu de --e-5, --e-5 au lieu de --e-6). L'ecran est dense par contrainte, pas par negligence : il doit tenir en entier sous la ligne de flottaison, et chaque cran gagne seize pixels. */ .formulaire { border: 1px solid var(--c-bord); border-radius: var(--r-l); background: var(--c-fond-eleve); padding: var(--e-5) var(--e-6); } .formulaire h2 { font-size: var(--t-l); font-weight: 700; margin-block: 0 var(--e-2); } .formulaire__annonce { font-size: var(--t-s); line-height: var(--lh-normal); color: var(--c-texte-doux); margin-block: 0 var(--e-4); } .champs { display: grid; gap: var(--e-4); } .champ { display: grid; gap: var(--e-1); } .champ__etiquette { font-size: var(--t-s); font-weight: 600; } .champ input[type="text"], .champ input[type="email"], .champ input[type="tel"] { font: inherit; padding: var(--e-3); border: 1px solid var(--c-bord); border-radius: var(--r-s); background: var(--c-fond); color: var(--c-texte); } .champ input:focus-visible { outline: var(--filet-epais) solid var(--c-accent); outline-offset: var(--decalage-focus); } .champ__mention { font-weight: 400; color: var(--c-texte-doux); } /* --- Les deux cases -------------------------------------------------------- */ /* ELLES SONT VISUELLEMENT IDENTIQUES, et ce n'est pas une preference de style : c'est la condition de validite du consentement de la seconde. Une seule classe pour les deux, aucun modificateur, aucune mise en avant de l'une - si l'interface suggerait que la case de recontact conditionne quoi que ce soit, le consentement tomberait faute d'etre libre. Ne PAS ajouter ici de `.case--obligatoire`, d'asterisque, de fond teinte ni de filet sur l'une des deux. La difference de regime juridique entre elles est REELLE - la premiere est une mesure precontractuelle, la seconde un consentement - mais elle se joue dans le texte du libelle et dans ce que le serveur en fait, jamais dans leur apparence. */ .cases { display: grid; gap: var(--e-3); margin-block: var(--e-4) 0; } .case { display: flex; align-items: flex-start; gap: var(--e-3); font-size: var(--t-s); line-height: var(--lh-normal); cursor: pointer; } /* Le telephone parait quand la case de recontact est cochee, ET RIEN QU'EN CSS. `:has()` et pas un module : une regle d'interface qui touche a un montage de consentement ne doit pas dependre du chargement d'un script. La degradation va dans le bon sens - sans `:has`, le champ reste simplement visible. */ [data-telephone] { display: none; } .formulaire:has(#optin:checked) [data-telephone] { display: grid; } .case input { flex: none; margin-block-start: var(--e-1); } .case:has(input:focus-visible) { outline: var(--filet-epais) solid var(--c-accent); outline-offset: var(--decalage-focus); } .case a { color: var(--c-accent-profond); } .note-info { font-size: var(--t-mention-legale); line-height: var(--lh-normal); color: var(--c-texte-doux); margin-block: var(--e-4) 0; } /* LE BOUTON ET SA MENTION COTE A COTE. La mention posee DESSOUS ajoutait trente-cinq pixels et faisait passer le bas du formulaire de 893 a 928 px, donc sous la ligne de flottaison que ce gabarit doit tenir. A cote, elle ne coute rien en hauteur et se lit au moment de decider. `align-items: center` et non `baseline` : le bouton est plus haut que le texte, et les aligner sur la ligne de base ferait remonter le texte au-dessus de son centre. */ .formulaire__envoi { display: flex; align-items: center; gap: var(--e-5); flex-wrap: wrap; margin-block: var(--e-4) 0; } .formulaire__envoi .bouton { flex: none; } .formulaire__envoi .note-info { margin: 0; } /* Le pot de miel : invisible a l'oeil, atteignable par un robot, et JAMAIS masque par `display:none` que certains robots reconnaissent. */ .pot-de-miel { position: absolute; left: -9999px; /* jeton-check: ignore - mise hors ecran, pas une mesure de charte */ width: 1px; height: 1px; overflow: hidden; } /* --- Ruptures. La specification 5.E donne 700 px pour l'appariement --------- */ @media (min-width: 700px) { /* LES CHAMPS VONT PAR DEUX, et c'est ce qui fait tenir le resultat et le formulaire ensemble sans defiler : a une colonne, les cinq champs seuls ajoutent plus de 300 px de hauteur. */ .champs { grid-template-columns: 1fr 1fr; } /* La societe et l'adresse prennent la ligne entiere : ce sont les deux valeurs les plus longues, et les couper en demi-colonne les rend illisibles a la relecture. */ .champ--large { grid-column: 1 / -1; } } @media (max-width: 699px) { /* La gouttiere passe a 16 px (specification 8). Reprise ici et non heritee de ruptures.css : le tunnel ne charge pas cette feuille, qui ne replie que des elements qu'il n'a pas. */ :root { --gouttiere: var(--e-4); } .colonne-parcours { padding-block: var(--e-8) var(--e-12); } .question__legende { font-size: var(--t-l); } .resultat__verdict { font-size: var(--t-xl); } }