/* --------------------------------------------------------------------------- Patte Blanche - source unique des tokens. Il y en avait deux : un :root dans front.py (public) et un autre dans front_pro.py (pro), portant les MEMES noms avec des valeurs DIFFERENTES - onze sur seize. Le public et le pro ne pouvaient pas ressembler au meme produit. C'est exactement le piege que front_render.py denonce pour les regles d'appariement : deux implementations des memes regles finissent par diverger. Ici c'etait le style qui divergeait. Reference retenue : les valeurs du public, sauf --gold - le #7E5A16 public tire au brun sale, le #C9962F du pro est l'or reel. REGLE : aucune valeur brute (hex, px) dans app.css ni pro.css. Ce qui manque se rajoute ICI, pas sur place. --------------------------------------------------------------------------- */ :root{ /* --- Fonds ----------------------------------------------------------- */ /* Le blanc de l'IMPRIMANTE, et lui seul. --paper (#FFFDF9) est un blanc casse : magnifique a l'ecran, il ferait poser de l'encre sur toute la surface d'une feuille A4. Le certificat d'engagement doit s'imprimer, la mention devant etre manuscrite. */ --impression:#FFFFFF; --paper:#FFFDF9; --cream:#F9F4EA; --cream2:#F1E7D6; --cream3:#EAE0CD; /* --- Encres ---------------------------------------------------------- */ /* Echelle re-espacee le 01/09/2026 apres mesure de contraste. --warm portait les deux styles les plus repetes du produit : les micro-libelles en capitales et la ligne secondaire des cartes. Mesure sur les fonds reels, il donnait 3,75 sur creme et 3,14 sur cream3 - la norme WCAG AA demande 4,5 pour du texte de cette taille. Autrement dit le texte le plus present du site etait sous le seuil de lisibilite, partout, depuis le debut. Assombrir --warm seul l'aurait colle a --ink3 et aurait aplati la hierarchie. Les trois neutres clairs descendent donc ensemble, en gardant leur ecart relatif. Les deux encres sombres ne bougent pas : elles passaient deja largement. --warm2 n'etait utilise nulle part. Il est supprime plutot que corrige : un token que personne n'emploie est une valeur de plus a maintenir juste. */ --ink:#33291F; --ink2:#4A3D2F; --ink3:#5F5142; --warm:#706149; /* --- Accents --------------------------------------------------------- */ /* --terra a ete assombri de 2,4 % le 01/09/2026, sans bouger de teinte (17,3 deg). L'ancienne valeur #C0562B donnait 4,49 sur --paper : zero virgule zero un sous le seuil AA, sur la couleur qui porte le plus de petit texte du produit - libelles de groupe, frais d'adoption, bouton de copie, compteurs. Un echec par arrondi reste un echec, et corriger vingt selecteurs un par un se serait redefait au premier ajout. #B65229 : 4,89 sur --paper, 4,53 sur --cream. */ --terra:#B65229; --terraLt:#E8926B; --terraDk:#9C3F1B; --green:#4C8050; --greenLt:#DFEBD9; --greenDk:#33552F; --gold:#C9962F; --goldLt:#FBF3DC; --goldDk:#7A5C15; --rouge:#A6412C; /* Fonds tres pales, releves dans app.css ou ils trainaient en dur (#FBEDE7 pour un refus, #FBF6E9 pour un inconnu). Ce sont des SURFACES, pas des accents : elles portent du texte, jamais l'inverse. */ --rougeLt:#FBEDE7; --goldPale:#FBF6E9; /* Deux crans du rouge que l'espace pro ecrivait en dur, faute de token : un trait clair pour les boutons de suppression, une encre sombre pour les messages d'erreur (7,02 sur --rougeLt, contre 5,38 pour --rouge). Ils sont nommes ici plutot que corriges sur place, comme l'exige CLAUDE.md : une valeur qui manque se decide, elle ne se contourne pas. */ --rougeBord:#E4C6BD; --rougeDk:#8A3524; /* Voile des feuilles courtes : la couche au-dessus d'une page, sans introduire une nouvelle couleur locale dans chaque module. */ --voile:rgba(51,41,31,.42); /* Le filet d'un drapeau : sans lui, la bande blanche de la France et de la Suisse se fond dans le creme et le drapeau parait ampute. Assez leger pour ne pas dessiner un cadre. */ --filetDrapeau:rgba(51,41,31,.16); /* --- Sur fond encre -------------------------------------------------- Le panneau lateral de l'espace structure et la carte des priorites posent du texte et des surfaces sur --ink. app.css ecrivait ces nuances a la main (quatorze rgba dans le heros d'une fiche) ; pro.css a un budget de zero valeur brute, et le nom vaut mieux que l'opacite : on relit « le second niveau de texte sur fond encre », pas « .72 ». Contrastes MESURES sur --ink #33291F, creme composee sur l'encre : plein 13,0 ; second 8,5 ; tertiaire 5,7. Tous au-dela de AA (4,5) ; le tertiaire ne l'est pas de AAA, donc il ne porte que des etiquettes, jamais une phrase qu'il faut lire. */ --surInk:var(--cream); --surInk2:rgba(249,244,234,.78); --surInk3:rgba(249,244,234,.6); /* Deux surfaces posees SUR l'encre : la banale, et celle qui porte une bonne nouvelle (« rien ne vous attend »). La seconde emprunte sa teinte au vert, sinon « a jour » se lit comme un avertissement de plus. */ --inkSur:rgba(249,244,234,.07); --inkSurVert:rgba(223,235,217,.12); /* L'element choisi dans le panneau lateral. Assez marque pour se voir du coin de l'oeil, assez sobre pour ne pas concurrencer le contenu. */ --inkChoisi:rgba(249,244,234,.1); /* Le halo chaud derriere la carte des priorites : une lueur, pas un aplat. Sans lui la carte est un rectangle noir au milieu de la creme. */ --inkHalo:rgba(192,86,43,.4); /* Encre legerement plus claire, pour la rayure du heros sans photo : elle doit se distinguer de --ink sans devenir un second fond. */ --inkRaye:#3A2F24; /* --- Sante : le bleu qui ne fait pas peur ---------------------------- Les regimes de pb/sante.py ont besoin d'une quatrieme famille, pour « ne se guerit pas, mais ne l'empeche pas de vivre » - le FIV, la surdite, l'amputation. Ni vert (ce serait mentir : ca ne se soigne pas), ni ambre (ce serait alarmer), et surtout pas rouge : un mot medical ne doit pas faire fuir AVANT d'avoir ete lu. C'est le seul endroit du produit ou la couleur porte une position editoriale. */ --calm:#4A6D7C; --calmLt:#E2EBEE; --calmDk:#2E4B57; /* --- Couleurs imposees par l'Etat ------------------------------------- Arrete du 28 juin 2023 : le message de sensibilisation se pose sur un jaune chaud (C0 M10 J100 N0) avec un texte noir. Ces deux valeurs ne sont PAS des choix de design et n'ont pas a s'accorder a la palette : les modifier serait ne plus appliquer le texte. Elles sont nommees ici pour que la feuille reste sans valeur brute, pas pour etre ajustees. */ --jaune-etat:#FFE500; --noir-etat:#000000; /* Le bleu et le rouge du drapeau (nuances officielles du pavillon national). Employer les COULEURS de la France n'est pas employer un embleme : un liseré tricolore ne se confond avec aucune marque de l'Etat, la ou une Marianne dessinee par nous serait la fabrication d'un embleme officiel. */ --bleu-france:#000091; --rouge-france:#E1000F; /* Depuis que plusieurs affections s'affichent cote a cote, « ne se guerit pas » et « plus serieux » ne peuvent plus porter la meme pastille : la distinction disparaissait a l'ecran. Le plus grave prend la teinte PLEINE de la meme famille - plus present, jamais alarmant. La regle du bloc ci-dessus tient : pas de rouge. */ --calmPlein:var(--calm); --calmSurPlein:#FFFDF9; /* 5,48 : AA */ /* Releve sur la maquette : griffes terracotta FRANC, coussinets bruns, tous de la meme couleur. Une patte blanche aux griffes assumees. */ --claw:var(--terra); --pad:var(--ink); /* ET LA MEME PATTE SUR UN FOND SOMBRE. Sur `--ink` - le panneau lateral des deux espaces, l'enseigne du portail pro - les coussinets valent `--ink` : ils sont invisibles, et il ne restait a l'ecran que les quatre griffes. Un site qui s'appelle Patte Blanche n'avait plus de patte (releve de Claire, 19/09/2026). Ce n'est pas le piege des deux `:root` : la valeur n'est pas redefinie sous le meme nom a la racine, c'est une VARIANTE nommee, posee ici une seule fois, et lue par les deux seuls selecteurs ou la marque est sur fond sombre. Les griffes passent au terracotta clair : `--terra` tombe a 2,4 sur l'encre, `--terraLt` tient. */ --clawSur:var(--terraLt); --padSur:var(--cream); /* --- Sur une photo (prototype du 21/09/2026) -------------------------- Le nom d'un animal se pose EN BAS de son portrait, sur un degrade d'encre : lisible sur n'importe quelle photo, sans assombrir le haut ou se trouve la tete. Le fort sert le fond encre de « Ceux que personne ne regarde ». Les pastilles posees sur la photo (le temps de route, « Aujourd'hui ») prennent un papier presque opaque : une photo claire ne doit pas les effacer. */ /* Le degrade FINIT sur l'encre pleine : c'est la ou le texte se pose, et une teinte translucide laissait le contraste dependre de la photo (l'audit le mesurait a 1,21 sur le fond creme dessous). */ --degrade-photo:linear-gradient(180deg,transparent,rgba(51,41,31,.88) 55%,#33291F); --degrade-photo-fort:linear-gradient(180deg,transparent,rgba(51,41,31,.9) 50%,#33291F); --papier-voile:rgba(255,253,249,.95); /* Le flou sur lequel une photo s'affiche entiere quand son cadre la couperait (fiche v5, 16/10/2026) : decoratif, il ne porte aucun texte. */ --flou-photo:blur(28px) saturate(1.1); --voile-bouton:rgba(51,41,31,.55); /* Le voile derriere le message d'entree de l'arrete : un noir NEUTRE, pas l'encre brune de nos feuilles. Le cadre jaune et noir de l'Etat se pose sur la page sans lui emprunter sa teinte ; a .55 il rend le #706e6a de la maquette sur le creme (#f9f4ea), la ou l'encre rendait #8c857b (controle QA du 13/10/2026). */ --voile-arrete:rgba(0,0,0,.55); /* Le filet du fond d'une preuve citee (« ✓ une maison avec jardin ») : l'or clair qui borde une question a poser. */ --filet-or:rgba(201,150,47,.28); /* --- Elevation ------------------------------------------------------- Une seule ombre servait a tout : carte, menu deroulant, fiche plein ecran. Trois objets a trois distances du lecteur portaient la meme, et rien ne disait lequel etait au-dessus de l'autre. Trois crans, et pas un de plus. L'ombre dit une distance, pas un style : au-dela de trois distances lisibles, on empile du flou. */ --sh-1:0 1px 2px rgba(51,41,31,.05), 0 10px 30px -18px rgba(51,41,31,.28); --sh-2:0 2px 6px rgba(51,41,31,.07), 0 18px 44px -22px rgba(51,41,31,.36); --sh-3:0 4px 12px rgba(51,41,31,.1), 0 40px 90px -30px rgba(51,41,31,.5); --sh:var(--sh-1); /* nom historique, garde pour l'existant */ /* --- Mouvement ------------------------------------------------------- Les durees etaient ecrites a la main : .14s, .16s, .4s, sans regle. Trois durees suffisent, et la courbe est la meme partout - c'est elle qui donne au produit sa maniere de bouger. */ --t-court:.14s; /* survol, pression : la reponse immediate */ --t-moyen:.24s; /* apparition d'un panneau, glissement */ --t-long:.42s; /* changement d'etat qu'on doit remarquer */ --e:cubic-bezier(.22,.61,.36,1); /* --- Traits ---------------------------------------------------------- « 1px solid var(--cream3) » etait ecrit 23 fois. Le jour ou la couleur des traits doit bouger, elle doit bouger d'un seul endroit. */ --tr:1px solid var(--cream3); --tr-clair:1px solid var(--cream2); --tr-fort:1.5px solid var(--cream3); --tr-sombre:1px solid rgba(249,244,234,.16); /* sur fond ink */ /* Un filet plus marque sur l'encre : le contour d'un bouton secondaire pose sur un bandeau sombre (administration, 12/10/2026). */ --tr-sombre-fort:1px solid rgba(249,244,234,.3); /* Contour des champs de saisie : --cream3 sur papier tenait a 1,15. --warm donne 4,6 sur --paper et 4,3 sur --cream : un champ se voit sans etre survole (maquette du 29/09/2026). Lu par socle.css. */ --champ-bord:var(--warm); /* Le TRAIT d'un champ, en une declaration (maquette du 02/10/2026). La regle du socle ne pose que la COULEUR et perd contre toute regle de composant qui a une classe : treize d'entre elles reposaient le trait creme (1,19 a 1,29) - mesure de l'audit du 10/10/2026. Un champ dont un composant ecrit le bord l'ecrit avec ce jeton. */ --tr-champ:1px solid var(--champ-bord); /* --- Plans ----------------------------------------------------------- Les valeurs de z-index etaient posees au cas par cas (50, 60). Une echelle nommee evite la surenchere ou chacun ajoute 10. */ --z-barre:10; --z-menu:50; --z-voile:60; --z-feuille:70; /* --- Focus ----------------------------------------------------------- Il n'existait aucun anneau de focus : au clavier, rien n'indiquait ou l'on se trouvait. C'est une regle d'accessibilite, pas un ornement. */ --focus:2px solid var(--terra); --focus-ecart:2px; /* Sur fond encre, --terra tombe a 2,4 : l'anneau passe au terracotta clair (5,1). Lu par socle.css. */ --focus-sur:2px solid var(--terraLt); /* --- Mesures --------------------------------------------------------- La largeur de lecture confortable et la largeur de page, nommees une fois. 1180px etait repete a la main dans deux feuilles. */ --mesure:65ch; /* longueur de ligne au-dela de laquelle on perd */ --page:1180px; /* L'espace de travail n'est pas une colonne de lecture : Le Coup de Patte compare un apercu et une file de publication. Sur un grand ecran, il peut respirer sans agrandir la prose elle-meme. */ --page-large:1440px; /* --- Typographie ----------------------------------------------------- 33 tailles distinctes circulaient, dont des demi-pixels (9.5, 10.5, 11.5, 12.5, 13.5, 14.5px). Ce n'etait pas une echelle : c'etait du reglage a l'oeil, ecran par ecran. */ /* Les trois familles. Elles etaient ecrites en toutes lettres dans app.css - 'Public Sans' six fois, 'IBM Plex Mono' cinq fois - et nulle part ailleurs, si bien que la feuille legale generee par display.py tournait, elle, sur la pile systeme : deux typographies pour un seul produit. */ --ff-corps:'Public Sans',-apple-system,BlinkMacSystemFont,sans-serif; --ff-titre:'Eczar',Georgia,serif; --ff-mono:'IBM Plex Mono',ui-monospace,monospace; /* Echelle unique (maquette du 29/09/2026), alignee sur l'espace pro : rien sous 13 px. L'ancienne descendait a 10,5 px pour les etiquettes mono et 12 px pour les notes - illisible a bout de bras sur un telephone, et deux demi-pixels de plus que ce que la regle permet. */ --fs-xs:13px; --fs-sm:14px; --fs-base:15px; --fs-md:16px; --fs-lg:17px; --fs-xl:21.5px; --fs-2xl:24px; --fs-3xl:32px; --fs-4xl:44px; --fs-display:clamp(27px,3.6vw,40px); /* Les trois titres du prototype du 21/09/2026 (« la maquette l'emporte »). Ce ne sont pas des crans pour arranger un ecran : ce sont les tailles que la maquette DECIDE, a largeur variable - le titre d'accueil, le titre d'une section, le nom d'un animal sur sa fiche. */ --fs-hero:clamp(36px,4.6vw,58px); --fs-section:clamp(26px,3.2vw,36px); --fs-fiche:clamp(34px,5vw,48px); /* Taille MINIMALE d'un champ de saisie, et ce n'est pas un choix esthetique : sous 16 px, Safari iOS zoome la page a chaque prise de focus, puis laisse l'utilisateur dezoomer a la main. Nos champs etaient a 15 px cote public et 13,5 cote pro - donc chaque saisie de code postal sur iPhone deplacait la page. --fs-lg est le premier cran au-dessus. */ --fs-champ:var(--fs-lg); /* --- Espacements ----------------------------------------------------- 90 valeurs distinctes de padding / margin / gap. Echelle posee ici ; la substitution reste a faire, ecran par ecran, a l'oeil. */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:34px; --sp-7:48px; /* Hauteur minimale d'une cible tactile. Mesure du 01/09/2026 a 360 px : les pastilles du panneau foyer faisaient 36,9 px, les options deroulantes 37,6, la croix de fermeture 25,6 x 21,5, le bouton de pause 26 x 26. Un doigt adulte couvre environ 45 px : sous ce seuil, on vise a cote, et c'est un panneau qu'on parcourt d'un pouce. Applique sur le TACTILE seulement : a la souris, agrandir tout aurait dilate des ecrans deja denses. */ --cible:44px; /* Une pastille de la barre des resultats, A LA SOURIS (maquette du 24/09/2026 : « des pastilles de meme hauteur »). Au doigt, elle prend --cible comme toute commande ; c'est l'ecart voulu « 44 px en mode tactile seulement » (controle QA du 13/10/2026). */ --pastille:40px; /* LA PATTE, une seule taille pour tout le site. Le meme SVG (`front.LOGO`, classe `.paw`) est pose par l'accueil, le dossier, l'espace pro et les pages legales - et sa taille etait ecrite DEUX fois : `.paw` dans `app.css`, `.marque svg` dans `pro.css`, trois declarations identiques dans deux feuilles qu'aucune page ne sert ensemble (/pro n'a pas `app.css`). Deux ecritures d'une meme regle finissent par en dire deux choses ; celle qui diverge aurait grandi la marque d'un seul cote. En `em` a dessein : la marque suit la taille du texte qui la porte, et l'enseigne du pro la grossit sans rien recopier. Mesure du 18/09/2026 - les deux feuilles portaient deja ces valeurs. */ --logo-l:1.58em; --logo-h:1.70em; /* Tuiles d'espece (dossier, « Vous cherchez ») : la photo et la colonne. */ --tuile:64px; --tuile-col:80px; --picto:38px; /* L'anneau d'une tuile cochee. */ --anneau:3px solid var(--terra); /* --- Rayons --- 21 valeurs distinctes. */ --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:18px; --r-pill:999px; --r-circle:50%; } /* ========================================================================== La coquille des espaces connectes : panneau lateral, barre, colonne. Servie par /pro ET par /famille (maquette du 16/09/2026). Elle vivait dans pro.css, que /famille ne sert pas : la recopier dans foyer.css aurait fait deux ecritures du meme panneau, et elles auraient diverge - le piege des deux :root. Aucune valeur brute ; les jetons sont dans tokens.css. Le panneau s'appelle `.panneau`, et c'est le SEUL a porter ce nom : les encarts de la fiche d'un animal le portaient aussi, et leurs regles (rayon, marge interieure), ecrites plus bas dans pro.css, s'appliquaient au panneau lateral - il etait en retrait, les coins arrondis, quand la maquette le pose d'un bord a l'autre. Ils s'appellent `.encart`. ========================================================================== */ /* Un `display` pose par une classe BAT le [hidden] du navigateur : la coquille cachee etait dessinee quand meme, par-dessus le portail, et la page debordait de 519 px a 360. Le piege n'a rien de theorique - il est invisible a la lecture du CSS et se voit a la mesure. */ .coquille{display:flex;min-height:100vh;align-items:stretch} .coquille[hidden]{display:none} /* --- Le panneau lateral ---------------------------------------------- */ .panneau{flex:none;width:230px;background:var(--ink);color:var(--surInk); padding:var(--sp-5) 0;display:flex;flex-direction:column;gap:var(--sp-5); position:sticky;top:0;height:100vh;overflow-y:auto} /* Mesure a 1440 : le panneau laisse 106 px au texte de la marque, et « Patte Blanche » en demande 150 a --fs-xl. Elle se cassait donc en deux lignes, et « ESPACE STRUCTURES » aussi. Dans le panneau la marque est un REPERE, pas un titre : le format heros appartient au portail, ou elle a toute la largeur. Un cran plus bas sur l'echelle, et elle tient. */ .panneau .marque{padding:0 var(--sp-5);font-size:var(--fs-lg);color:var(--surInk); text-decoration:none} .panneau .brand{color:var(--surInk)} /* Le sous-titre de la marque (« Espace structures », « Espace famille »). pro.css le pose pour toute la page ; /famille ne sert pas pro.css, et sans cette regle le sous-titre se collait au nom et sortait du panneau. */ .panneau .brand small{display:block;margin-top:var(--sp-1); font-family:var(--ff-mono);font-size:var(--fs-xs);letter-spacing:.16em; text-transform:uppercase;color:var(--surInk3)} .panneau .marque:hover .brand,.panneau .marque:focus-visible .brand{ color:var(--terraLt)} /* La taille de la marque se LIT, elle ne se recopie pas : c'etait la troisieme copie des memes deux valeurs (18/09/2026). Et la patte prend ici sa variante de fond sombre - sans quoi les coussinets sont de la couleur du panneau. */ .panneau .marque svg{width:var(--logo-l);height:var(--logo-h); --claw:var(--clawSur); --pad:var(--padSur)} /* Les cinq sections. Un bouton, pas un lien : on ne change pas de page, et un lien qui ne navigue pas ment au clic droit comme au lecteur d'ecran. */ .sections{display:flex;flex-direction:column;gap:2px} .sections button{display:flex;align-items:center;gap:var(--sp-2);width:100%; background:none;border:0;text-align:left;cursor:pointer;color:var(--surInk2); font:inherit;font-size:var(--fs-base);padding:10px var(--sp-5); min-height:var(--cible);transition:background var(--t-court) var(--e)} .sections button:hover{background:var(--inkSur);color:var(--surInk)} .sections button[aria-current="page"]{background:var(--inkChoisi); color:var(--surInk);font-weight:600;box-shadow:inset 3px 0 0 var(--terraLt)} /* Le titre d'un groupe de sections (« Plus » dans l'espace famille) : un repere, pas un bouton - il ne se prend pas au clavier. */ .sections .groupe{margin:var(--sp-4) 0 var(--sp-1);padding:0 var(--sp-5); font-family:var(--ff-mono);font-size:var(--fs-xs);letter-spacing:.14em; text-transform:uppercase;color:var(--surInk3)} /* Le compteur d'une section. Il ne s'affiche que s'il vaut quelque chose : un « 0 » a cote de « Familles » attire l'oeil sur ce qui n'attend pas. */ .sections .n{margin-left:auto;font-family:var(--ff-mono);font-size:var(--fs-xs); background:var(--inkSur);color:var(--surInk2);border-radius:var(--r-pill); padding:2px 8px;min-width:22px;text-align:center} .sections button[aria-current="page"] .n{background:var(--terra); color:var(--paper)} /* Une section FINIE (le dossier complet) : une coche sur fond vert. */ .sections .n.fait,.sections button[aria-current="page"] .n.fait{background:var(--green); color:var(--paper);font-family:inherit;font-weight:700} /* Le pied du panneau : qui est connecte, et par ou l'on sort. */ .qui{margin-top:auto;padding:0 var(--sp-5);display:flex;flex-direction:column; gap:var(--sp-2)} .qui .ligne{display:flex;align-items:center;gap:var(--sp-2);min-width:0} .qui .sigle{flex:none;width:34px;height:34px;border-radius:var(--r-pill); background-size:cover;background-position:center; background:var(--terra);color:var(--paper);display:flex;align-items:center; justify-content:center;font-family:var(--ff-titre);font-size:var(--fs-base); font-weight:600} /* Le nom de la structure TIENT SUR DEUX LIGNES. Coupe par une ellipse, il donnait « Les Quatre Pat... » : une structure a le droit de lire son propre nom dans son propre espace (capture du 16/09/2026). */ .qui .nom{font-size:var(--fs-base);color:var(--surInk);font-weight:600; line-height:1.25;overflow-wrap:anywhere} .qui .ou{font-size:var(--fs-xs);color:var(--surInk3);overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .qui .sortir{color:var(--surInk2);text-decoration:underline; background:none;border:0;padding:var(--sp-2) 0;cursor:pointer;font:inherit; font-size:var(--fs-sm);text-align:left;min-height:var(--cible)} .qui .sortir:hover{color:var(--terraLt)} /* --- La colonne de travail -------------------------------------------- */ .travail{flex:1;min-width:0;display:flex;flex-direction:column} /* La barre est une GRILLE DE TROIS COLONNES depuis la maquette du 22/09/2026 : le fil d'Ariane a gauche, ce qui se regle au centre, la date a droite. En `flex` avec `space-between`, le controle pays venait se coller au fil des qu'un ecran n'avait pas de champ de recherche, et sa place changeait d'un ecran a l'autre. Une colonne la fixe. La maquette empilait QUATRE `grid-template-columns` contradictoires et trois `!important` - la trace d'une seance d'iterations. Ce qui est ecrit ici est leur resultat effectif, en une seule regle : la recopier telle quelle aurait pose dans cette feuille ce que `tests/test_styles.py` existe pour empecher, et ses `!important` faisaient perdre les media queries, donc la barre ne se repliait plus. */ .barre{position:sticky;top:0;z-index:var(--z-barre);flex:none; min-height:56px;background:var(--cream);border-bottom:var(--tr); display:grid;grid-template-columns:auto minmax(0,1fr) auto; align-items:center;column-gap:var(--sp-4);box-sizing:border-box;width:100%; padding:0 var(--sp-5)} .barre .fil{grid-column:1;justify-self:start;display:block; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; font-size:var(--fs-base);color:var(--ink)} .barre .fil b,.barre .fil .sep,.barre .fil .ou{display:inline} .barre .fil [hidden]{display:none} .barre .fil .sep{color:var(--warm)} .barre .fil .ou{color:var(--warm);max-width:14rem;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} /* Le groupe central : ce qui se REGLE (chercher, le pays, la langue). */ .barre .centre{grid-column:2;display:flex;align-items:center;gap:var(--sp-3); justify-content:flex-end;min-width:0;max-width:100%} /* L'espace famille n'a pas de groupe central - sa barre ne porte que le fil, le controle et la date -, donc le controle prend la colonne lui-meme. */ .barre > .pz-barre-pays{grid-column:2;justify-self:end} .barre .jour{grid-column:3;justify-self:end;min-width:0;max-width:100%; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; font-family:var(--ff-mono);font-size:var(--fs-xs);color:var(--warm); letter-spacing:.14em;text-transform:uppercase} /* --- Telephone et tablette -------------------------------------------- Le panneau passe en barre horizontale defilante. Le cacher derriere un bouton demanderait un menu, un piege a focus et une touche Echap ; une barre defilante montre les cinq sections tout de suite. */ @media (max-width:900px){ /* `min-width:0` sur les deux enfants : sans lui, un enfant flex refuse de retrecir sous la taille de son contenu, et c'est la PAGE qui deborde - 519 px pour 360 a la premiere mesure. */ .coquille{flex-direction:column} /* La rangee des sections prend SA PROPRE LIGNE. Partagee avec la marque et le lien de sortie, il lui restait la largeur d'un bouton : trois sections sur quatre vivaient dans un defilement que rien n'annoncait. */ .panneau{width:auto;min-width:0;height:auto;position:static; flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--sp-2); padding:var(--sp-2) var(--sp-4);overflow:hidden} .panneau .marque{padding:0;font-size:var(--fs-lg);flex:none; display:flex;align-items:center;min-height:var(--cible)} .panneau .brand small{display:none} /* Les quatre sections PASSENT A LA LIGNE, elles ne defilent pas. A 390 px elles font 445 px : en defilement lateral, trois etaient invisibles et rien ne disait qu'elles existaient. Une navigation qu'il faut decouvrir au doigt n'en est pas une. Deux rangs coutent 44 px de hauteur ; c'est le prix, et il est payé une fois. */ .sections{flex-direction:row;flex-wrap:wrap;gap:var(--sp-1); flex:1 0 100%;min-width:0;order:3} /* `width:auto` neutralise le 100 % du panneau vertical : sans lui chaque section prend un rang entier et la barre en occupe quatre. */ .sections button{padding:8px var(--sp-3);white-space:nowrap;flex:none; width:auto;border-radius:var(--r-pill);min-height:var(--cible)} .sections .groupe{display:none} .sections button[aria-current="page"]{box-shadow:none;background:var(--terra); color:var(--paper)} .qui{margin-top:0;padding:0;flex:none;margin-left:auto;flex-direction:row; align-items:center} /* MON COMPTE RESTE ACCESSIBLE (maquette du 02/10/2026) : le lien du bloc « qui » se reduit a son sigle, il ne disparait plus. Masque en entier, il laissait le compte sans aucun chemin sur telephone. */ .qui .ou{display:none} .qui .ligne.qui-lien{display:flex;padding:0;margin:0;min-width:var(--cible); min-height:var(--cible);justify-content:center;background:none} .qui .qui-lien > span:not(.sigle):not(.qui-fl),.qui .qui-fl{display:none} .qui .sigle{width:40px;height:40px;font-size:var(--fs-sm)} /* Deux colonnes : la date part avec la troisieme. La garder aurait ouvert une colonne implicite, et la barre aurait deborde. */ .barre{grid-template-columns:auto minmax(0,1fr);padding:0 var(--sp-4)} .barre .jour{display:none} } @media (max-width:560px){ .barre .jour{display:none} .barre .fil{display:none} .barre{grid-template-columns:minmax(0,1fr)} /* UNE SEULE COLONNE, donc le groupe central y va : laisse en colonne 2, il ouvrait une colonne implicite et la barre debordait des qu'un element s'y ajoutait - la cloche l'a montre (14/10/2026, 373 px pour 360). */ .barre .centre{grid-column:1;justify-content:space-between;gap:var(--sp-2)} .barre > .pz-barre-pays{grid-column:1;justify-self:end} } /* La colonne du nom, dans le pied du panneau : sans `min-width:0` un nom long pousse la ligne au lieu de se laisser tronquer. `.qui .ligne` l'a deja ; l'enfant en a besoin AUSSI, et c'est ce qui etait ecrit en attribut dans `front_pro.py`. */ .qui .ligne > div{min-width:0} /* La barre « pays · langue » des espaces connectés (maquette du 22/09/2026) ------------------------------------------------------------------------- Elle vit ICI parce que `coquille.css` est la seule feuille que `/pro` et `/famille` servent tous les deux — c'est la leçon du panneau latéral du 16/09, et du studio le 08/09 : une règle écrite dans une feuille que la page ne sert pas est un écran sans style, et la recopier dans les deux est le piège des deux `:root`. Ce qui est PROPRE à un espace reste chez lui : `pro.css` masque le nom du pays, parce que la barre des structures porte déjà un fil d'Ariane et un champ de recherche sur la même ligne. */ .pz-barre-pays{position:relative;display:inline-flex;margin-left:auto} .pz-bp-bouton{display:inline-flex;align-items:center;gap:var(--sp-2); min-height:var(--cible);padding:6px 14px 6px 10px;border:var(--tr); border-radius:var(--r-pill);background:var(--paper);color:var(--ink); font:inherit;font-size:var(--fs-base);font-weight:600;cursor:pointer; white-space:nowrap} .pz-bp-bouton:hover{border-color:var(--terraLt)} .pz-bp-drap .drap{width:28px;height:20px;display:block} .pz-bp-drap .drap-eu{width:28px;height:20px} .pz-bp-lang{color:var(--warm);font-weight:400;font-family:var(--ff-mono); font-size:var(--fs-sm);letter-spacing:.06em} .pz-bp-bouton > [aria-hidden]{color:var(--warm);font-weight:400;font-size:var(--fs-sm)} .pz-bp-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:var(--z-menu); width:min(92vw,340px);background:var(--paper);border:var(--tr); border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:10px} .pz-pays-lab{margin:0;padding:6px 8px 4px;font-family:var(--ff-mono); font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase; color:var(--warm)} .pz-pays-liste{display:grid;gap:2px} .pz-bp-menu .opt-pays{display:flex;align-items:center;gap:10px;width:100%; min-height:40px;padding:4px 8px;border:0;border-radius:var(--r-sm); background:none;font:inherit;font-size:var(--fs-base);color:var(--ink); cursor:pointer;text-align:left} .pz-bp-menu .opt-pays:hover, .pz-bp-menu .opt-pays[aria-selected="true"]{background:var(--cream2)} .pz-bp-menu .opt-pays .drap{width:24px;height:16px} .pz-bp-menu .opt-pays .op-n{flex:1} .pz-bp-menu .opt-pays .op-c{font-size:var(--fs-sm);color:var(--warm)} .pz-bp-langue{margin-top:6px;padding:10px 6px 6px;border-top:var(--tr-clair); display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap} .pz-bp-langue .pz-pays-lab{flex:1 1 auto;margin:0;padding:0} .pz-bp-menu .seg{display:inline-flex;border:var(--tr);border-radius:var(--r-pill); overflow:hidden} .pz-bp-menu .seg a{display:inline-flex;align-items:center;min-height:36px; padding:0 12px;color:var(--ink2);font-family:var(--ff-mono); font-size:var(--fs-sm);letter-spacing:.06em;text-decoration:none} .pz-bp-menu .seg a[aria-current="true"]{background:var(--ink);color:var(--paper); font-weight:500} /* La langue du pays est PROPOSÉE, pas imposée : soulignée, jamais cochée. Quelqu'un qui a choisi « FR » depuis l'Allemagne veut lire en français. */ .pz-bp-menu .seg a.proposee{text-decoration:underline;text-underline-offset:3px} .pz-bp-note{margin:0;padding:6px 6px 2px;font-size:var(--fs-sm); color:var(--warm);line-height:1.5;text-wrap:pretty} /* Le bloc du bas OUVRE le compte (maquette du 23/09/2026) ------------------------------------------------------------------------- Il vit ICI, et pas dans `pro.css` ni dans `foyer.css` : les deux espaces portent le même bloc, et `coquille.css` est la seule feuille qu'ils servent tous les deux. La recopier deux fois est le piège des deux `:root`, pour la sixième fois dans ce dépôt. La ligne était un `div` avec deux `div` dedans ; c'est un `a` avec des `span`, parce qu'un lien ne peut pas contenir de bloc sans que le survol et le focus se déforment. Les deux règles ci-dessous rendent aux `span` la mise en colonne que les `div` donnaient d'eux-mêmes. */ .qui .qui-lien{color:inherit;text-decoration:none;border-radius:var(--r-md); padding:var(--sp-1) var(--sp-2);margin:0 calc(-1 * var(--sp-2));cursor:pointer} .qui .qui-lien:hover{background:var(--inkSur)} .qui .qui-lien:focus-visible{outline:2px solid var(--paper);outline-offset:1px} .qui .qui-lien > span:not(.sigle):not(.qui-fl){display:flex;flex-direction:column; min-width:0;flex:1} .qui .qui-lien .nom,.qui .qui-lien .ou{display:block} .qui .qui-fl{margin-left:auto;color:var(--surInk3);font-size:var(--fs-lg); line-height:1;flex:none} .qui .qui-lien[aria-current="page"]{background:var(--inkChoisi)} /* LA CLOCHE de l'espace structure (14/10/2026, maquette du 23/09). La cible fait 44 px, le compteur se pose sur son coin, la liste s'ouvre dessous. */ .cloche-z{position:relative;flex:none} .cloche{position:relative;display:inline-flex;align-items:center;justify-content:center; min-width:var(--cible);min-height:var(--cible);padding:0;border:0;border-radius:var(--r-circle); background:transparent;color:var(--ink);cursor:pointer} .cloche:hover{background:var(--paper)} .cloche svg{width:var(--sp-5);height:var(--sp-5)} .cloche-n{position:absolute;top:var(--sp-1);right:var(--sp-1);min-width:var(--sp-4); padding:0 var(--sp-1);border-radius:var(--r-pill);background:var(--terra);color:var(--cream); font-size:var(--fs-xs);font-weight:700;line-height:1.4;text-align:center} .cloche-liste{position:absolute;right:0;top:100%;z-index:var(--z-barre); width:min(22rem,calc(100vw - var(--sp-5)));max-height:70vh;overflow:auto; background:var(--cream);border:var(--tr);border-radius:var(--r-md); box-shadow:var(--sh);padding:var(--sp-2)} .cloche-liste .cloche-h{margin:var(--sp-1) var(--sp-2) var(--sp-2);font-weight:700;color:var(--ink)} .cloche-liste ul{list-style:none;margin:0;padding:0} .cloche-it{display:block;width:100%;min-height:var(--cible);text-align:left; padding:var(--sp-2);border:0;border-radius:var(--r-sm);background:transparent; color:var(--ink);cursor:pointer} .cloche-it:hover{background:var(--paper)} .cloche-it b{display:block;font-size:var(--fs-sm)} .cloche-it small{display:block;color:var(--ink3);font-size:var(--fs-xs)} .cloche-liste .neuve .cloche-it{border-left:var(--sp-1) solid var(--terra)} *{box-sizing:border-box} body{margin:0;background:var(--cream);color:var(--ink2); font:16px/1.6 'Public Sans',system-ui,-apple-system,sans-serif} h1,h2,h3{font-family:'Eczar',Georgia,serif;color:var(--ink);margin:0} a{color:var(--terra)} .wrap{max-width:940px;margin:0 auto;padding:26px 22px 80px} /* Le portail reste volontairement sobre avant connexion. Une fois dans son espace, le studio est un plan de travail : le laisser dans une colonne de formulaire a 940 px ecrasait l'apercu et la file sur les grands ecrans. Cette largeur ne concerne donc ni l'accueil ni le certificat imprime. */ @media (min-width:1100px){ body.pro-connecte .wrap{max-width:var(--page-large)} } /* La marque : un lien, a la taille du site public (--fs-display, patte en em), pas un texte un tiers plus petit. Meme repere des deux cotes du produit. LA TAILLE DE LA PATTE EST ICI, pas sur la barre qui la contenait. Elle vivait sur `.nav svg` ; la barre a disparu avec la refonte du 09/09, et la patte a rempli le bandeau entier faute de contrainte. C'est exactement ce qui venait d'arriver au tableau des annonces avec `.carte #fiches` : une regle ancree a l'ANCETRE depend de la page qui sert l'element. Elle vise donc la racine du composant. */ .marque{display:flex;align-items:center;gap:var(--sp-3);text-decoration:none; color:inherit;font-size:var(--fs-display)} .marque:hover .brand,.marque:focus-visible .brand{color:var(--terraDk)} .marque svg{width:var(--logo-l);height:var(--logo-h);flex:none} .brand{font-family:var(--ff-titre);font-size:inherit;font-weight:600;line-height:1; color:var(--ink);transition:color var(--t-court) var(--e)} .brand small{display:block;font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--warm)} .lab{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:var(--fs-xs); letter-spacing:.14em;text-transform:uppercase;color:var(--warm)} .carte{background:var(--paper);border:1px solid var(--cream3); border-radius:16px;padding:22px 24px;margin-bottom:18px} .duo{display:grid;grid-template-columns:1fr 1fr;gap:18px} @media(max-width:760px){.duo{grid-template-columns:1fr}} label{display:block;font-size:var(--fs-base);color:var(--ink3);margin:12px 0 4px} /* TOUS les champs de saisie, pas trois d'entre eux. `password` manquait a cette liste depuis toujours : le champ « Mot de passe » de la page de connexion tombait sur les valeurs par defaut du navigateur - 22 px de haut contre 46 pour le champ d'adresse juste au-dessus, police 13 px, rembourrage d'un pixel. `foyer.css` le stylait de son cote ; les deux feuilles avaient diverge, et c'est toujours celle qui diverge qui sert ce qu'il ne fallait pas. Mesure du 18/09/2026 a 375 px, pointeur tactile : six champs a 46 px et un seul a 22. `search`, `tel` et `date` etaient nus pour la meme raison. L'audit ne le voyait pas : il ENTRE dans l'espace, donc il ne mesure la page de connexion que les jours ou la session echoue. */ input[type=text],input[type=email],input[type=password],input[type=number], input[type=search],input[type=tel],input[type=date],input[type=url], select,textarea{ width:100%;padding:9px 11px;border:var(--tr-champ);border-radius:var(--r-sm); background:var(--paper);font:inherit;font-size:var(--fs-champ);color:var(--ink)} textarea{min-height:92px;resize:vertical} /* L'espace pro n'avait aucun etat de focus : app.css ne lui est pas servie, donc la regle globale du site n'y existe pas, et le token --focus n'y etait employe nulle part. Les benevoles qui saisissent au clavier n'avaient que l'anneau par defaut du navigateur, variable selon la machine. */ :focus-visible{outline:var(--focus);outline-offset:var(--focus-ecart)} .btn{background:var(--ink);color:var(--paper);border:0;border-radius:var(--r-pill); padding:11px 20px;font:inherit;font-size:var(--fs-base);font-weight:600;cursor:pointer} .btn:hover{background:var(--terra)} .btn.sec{background:none;color:var(--ink3);border:1px solid var(--cream3)} .btn.sec:hover{background:var(--cream2);color:var(--ink)} .btn.dang{background:none;color:var(--rouge);border:1px solid var(--rougeBord)} .btn.dang:hover{background:var(--rougeLt)} .btn[disabled]{opacity:.45;cursor:default} .licence{background:var(--cream);border-radius:var(--r-md);padding:14px 16px; font-size:var(--fs-base);line-height:1.65;color:var(--ink3);margin:14px 0} .coche{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-base); color:var(--ink2);margin:10px 0 16px} /* Une case de 13 px se vise mal au doigt. `accent-color` la teinte sans la deformer, et la taille suit le pointeur : agrandir a la souris aurait epaissi tous les formulaires du back-office sans raison. */ .coche input{margin-top:3px;flex:none;accent-color:var(--terra)} @media (pointer:coarse){ .coche input{width:24px;height:24px;margin-top:0} .coche{align-items:center;min-height:var(--cible)} /* La marque est un lien, et le seul de l'en-tete de la page de connexion : elle se touche. Elle y mesurait 37 px (18/09/2026). Sur l'accueil public elle depasse deja 44 - elle y suit `--fs-display` - et cette page-ci ne sert pas `app.css` : la regle doit vivre dans la feuille que l'ecran sert, pas dans celle qui lui ressemble. */ .marque{min-height:var(--cible)} } .msg{border-radius:10px;padding:11px 14px;font-size:var(--fs-base);margin:12px 0} .msg.err{background:var(--rougeLt);color:var(--rougeDk)} .msg.ok{background:var(--greenLt);color:var(--greenDk)} .msg.info{background:var(--goldLt);color:var(--goldDk)} .cand{display:flex;align-items:center;gap:14px;padding:12px 0; border-bottom:1px solid var(--cream2)} .cand:last-child{border-bottom:0} .cand b{font-size:var(--fs-md);color:var(--ink)} .cand .src{font-size:var(--fs-sm);color:var(--warm)} .cand .n{margin-left:auto;font-family:'Eczar',Georgia,serif;font-size:var(--fs-2xl); color:var(--terra);white-space:nowrap} .cand .n small{font-size:var(--fs-sm);color:var(--warm);font-family:'Public Sans'} .chiffres{display:flex;gap:28px;flex-wrap:wrap;margin:6px 0 0} .chiffres b{display:block;font-family:'Eczar',Georgia,serif;font-size:var(--fs-3xl); line-height:1.1;color:var(--ink)} table{width:100%;border-collapse:collapse;font-size:var(--fs-base);margin-top:10px} th{text-align:left;font-weight:600;color:var(--warm);font-size:var(--fs-xs); letter-spacing:.1em;text-transform:uppercase;padding:6px 8px; border-bottom:1px solid var(--cream2)} td{padding:7px 8px;border-bottom:1px solid var(--cream2);color:var(--ink2)} tr:last-child td{border-bottom:0} .pastille{display:inline-block;border-radius:var(--r-pill);padding:2px 9px; font-size:var(--fs-xs);font-weight:600} .pastille.on{background:var(--greenLt);color:var(--greenDk)} .pastille.off{background:var(--cream2);color:var(--warm)} /* Les gestes rendus a la structure. ----------------------------------------------------------------------- Cet ecran ne montrait qu'un tableau en lecture seule : quatre colonnes, aucune action possible. Une structure n'avait donc aucune raison de revenir apres sa revendication - or c'est la deuxieme visite qui fait la valeur du dispositif, pas la premiere. */ .pastille.attente{background:var(--goldLt);color:var(--goldDk)} /* Le doré et non le rouge : un animal en pause n'est pas une erreur, c'est une adoption en cours. Le rouge est reserve a ce qui a mal tourne. */ .msg.alerte{background:var(--goldLt);color:var(--goldDk); border-left:var(--sp-1) solid var(--gold)} /* Ancree a .carte : une classe seule qui impose une largeur atteint tous les elements qui la portent, y compris ceux qu'on ne regardait pas. C'est la regle verrouillee par tests/test_style.py, apprise d'un `footer{max-width:76ch}` qui avait reduit la barre d'action d'une fiche a 558 px dans une fenetre de 1120. */ .carte .aide{color:var(--ink3);font-size:var(--fs-base);line-height:1.6; max-width:var(--mesure);margin:var(--sp-2) 0 var(--sp-4)} /* Les gestes s'ENROULENT, ils ne s'alignent plus sur une seule ligne. Le sixieme bouton (« Photos a diffuser », 07/09/2026) a porte la ligne au-dela de la boite meme sur un ecran de 1440 : cliquer le dernier demandait de faire glisser le tableau, et le nom de l'animal sortait de vue au moment ou l'on agissait sur lui. Une ligne plus haute coute moins qu'une colonne qu'on doit aller chercher. */ .gestes{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center} .gestes button{background:none;border:1px solid var(--cream3);color:var(--ink3); border-radius:var(--r-pill);padding:var(--sp-2) var(--sp-3); font-size:var(--fs-xs);cursor:pointer; font-family:inherit} .gestes button:hover:not([disabled]){background:var(--cream2);color:var(--ink)} /* « C'est signé » sort l'annonce definitivement. Il se distingue des deux autres, qui sont reversibles. */ .gestes button.fort{border-color:var(--rougeBord);color:var(--rougeDk)} .gestes button.fort:hover:not([disabled]){background:var(--rougeLt)} .gestes button.doux{border-style:dashed} .gestes button[disabled]{opacity:.45;cursor:default} /* Les trois reponses a « toujours disponible ? ». La derniere sort l'annonce de la diffusion : elle se distingue des deux autres. */ .gestes button[data-rep="adopte"]{border-color:var(--rougeBord); color:var(--rougeDk)} .gestes button[data-rep="adopte"]:hover:not([disabled]){ background:var(--rougeLt)} .conf{font-size:var(--fs-xs);color:var(--greenDk);white-space:nowrap} /* La declaration de SIREN. ----------------------------------------------------------------------- Proposee seulement quand la demande reste en attente - le cas de 85 % des structures, celles dont l'adresse ne figure pas dans leurs propres annonces. Elle n'ouvre rien toute seule et le formulaire le dit : un SIREN est public, le declarer corrobore, ne prouve pas. */ /* La recherche de libelle : la porte d'entree reelle de cet ecran. Sans elle, une structure dont le compte ne porte pas exactement le libelle de ses annonces ne voyait rien du tout. */ .rech{display:flex;gap:var(--sp-3);align-items:flex-end;flex-wrap:wrap; margin-bottom:var(--sp-4)} .rech label{flex:1 1 22ch;font-size:var(--fs-base);color:var(--ink2); font-weight:600} .rech input{display:block;width:100%;margin-top:var(--sp-2); padding:var(--sp-3);border:var(--tr);border-radius:var(--r-md); font-family:inherit;font-size:var(--fs-champ);min-height:var(--cible); background:var(--paper);color:var(--ink);box-sizing:border-box} .rech button{flex:none;min-height:var(--cible)} /* Le certificat d'engagement : une page faite pour l'imprimante. ----------------------------------------------------------------------- La mention doit etre MANUSCRITE (art. D214-32-4) : ce document ne peut pas se signer a l'ecran, il doit sortir sur papier. Tout ce qui suit est donc dimensionne pour une feuille A4, pas pour une fenetre. */ .gestes .lien-cert{display:inline-flex;align-items:center; min-height:var(--cible);padding:var(--sp-2) var(--sp-3); font-size:var(--fs-xs);color:var(--terra);white-space:nowrap} /* Ancre a .wrap : une classe seule qui impose une largeur atteint tous les elements qui la portent. Regle verrouillee par test_style.py. */ .wrap.cert{max-width:52em} .cert h1{font-size:var(--fs-2xl);margin:0 0 var(--sp-2)} .cert h2{font-size:var(--fs-lg);margin:var(--sp-6) 0 var(--sp-2)} .cert ul{margin:0;padding-left:var(--sp-5);line-height:1.6} .cert li{margin-bottom:var(--sp-2)} .cert-ref{color:var(--ink3);font-size:var(--fs-base);margin:0 0 var(--sp-5)} .cert-vie{font-weight:600;margin:0 0 var(--sp-3)} .cert-note{color:var(--warm);font-size:var(--fs-xs);margin-top:var(--sp-2)} /* En TETE, pas en pied : il dit que nous ne delivrons pas ce certificat, et c'est ce qui conditionne l'usage de toute la page. Personne ne lit les pieds de page. */ .cert-avert{background:var(--goldLt);border-left:var(--sp-1) solid var(--gold); color:var(--goldDk);padding:var(--sp-4);margin-bottom:var(--sp-6); font-size:var(--fs-base);line-height:1.55} .cert-t{width:100%;border-collapse:collapse;margin-top:var(--sp-2)} .cert-t th{text-align:left;width:14em;font-weight:600;color:var(--ink2); padding:var(--sp-2) 0;vertical-align:top} .cert-t td{padding:var(--sp-2) 0} /* « — » dit qu'une case est vide, DANS sa ligne : la regle generale .vide (le vide d'un tableau entier, centre et rembourre) en faisait une ligne de 80 px, le tiret au milieu de la page (12/10/2026). */ .cert-t .vide{color:var(--warm);display:inline;padding:0;text-align:left;font-size:inherit} .cert-nav{display:flex;align-items:center;justify-content:space-between; gap:var(--sp-3);flex-wrap:wrap;padding:var(--sp-4) 0 var(--sp-5)} .cert-champ{display:inline-block;min-width:22em;border-bottom:1px solid var(--ink); min-height:1.4em} .cert-manuscrite{background:var(--cream);padding:var(--sp-4); border-radius:var(--r-md);line-height:1.6} .cert-manuscrite span{display:block;margin-top:var(--sp-2);font-weight:700; font-size:var(--fs-md)} .cert-signature{display:flex;gap:var(--sp-6);margin-top:var(--sp-5); flex-wrap:wrap} .cert-signature > div{flex:1 1 14em} .cert-trait{border-bottom:1px solid var(--ink);height:2.4em} .cert-trait.haut{height:5em} .cert-pied{margin-top:var(--sp-6);color:var(--warm);font-size:var(--fs-xs)} @media print{ /* A l'impression, seul le document compte : ni fond colore qui vide une cartouche, ni ombre, ni marge d'ecran. */ /* Blanc PUR, pas --paper : sur une feuille, --paper (#FFFDF9) ferait poser de l'encre sur toute la page pour rien. */ body{background:var(--impression)} .wrap.cert{max-width:none} .cert-avert{border:1px solid var(--goldDk);background:none} .cert-manuscrite{background:none;border:1px solid var(--cream3)} .cert h2{break-after:avoid} .cert-signature{break-inside:avoid} } .sir{margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:var(--tr)} .sir label{display:block;font-size:var(--fs-base);color:var(--ink2); font-weight:600} .sir .opt{font-weight:400;color:var(--warm);font-size:var(--fs-xs)} .sir input{display:block;margin-top:var(--sp-2);padding:var(--sp-3); border:var(--tr);border-radius:var(--r-md);font-family:inherit; font-size:var(--fs-champ);min-height:var(--cible);width:14ch; background:var(--paper);color:var(--ink);box-sizing:border-box} .carte .sir .aide{margin:var(--sp-3) 0} /* Au doigt, les gestes deviennent de vraies cibles. Mesures au rendu : 31 px de haut, pour 44 exiges. Cet ecran est fait pour un benevole qui vient une fois par an, souvent depuis un telephone ; rater « C'est signe » et toucher « Adoption en cours » a la place lui ferait croire l'annonce sortie alors qu'elle est seulement en pause. */ @media (pointer:coarse){ .gestes button{min-height:var(--cible);padding-left:var(--sp-4); padding-right:var(--sp-4)} } /* Le tableau defile DANS sa boite, la page ne defile jamais de travers. Mesure a 375 px : la cinquieme colonne (les gestes) portait la table a 446 px dans un conteneur de 281, et c'est la PAGE qui debordait - 493 px pour 375 disponibles. Un site qu'on doit faire glisser lateralement pour lire une ligne se referme. La regle etait ancree a `.carte`, et le tableau a change de boite le 09/09 : le debordement est revenu a l'identique, 519 px pour 360. Une regle qui depend de l'ancetre de son element depend de la page qui le sert - c'est le piege de `studio.css`, deux fois deja. Elle vise maintenant l'element lui-meme, ou qu'il vive. */ #fiches{overflow-x:auto} details summary{cursor:pointer;font-size:var(--fs-base);color:var(--terra); padding:4px 0;font-weight:600} footer{margin-top:34px;font-size:var(--fs-sm);line-height:1.7;color:var(--warm)} /* Le pied de l'espace prend la marge de l'ecran au-dessus (comparaison a la maquette du 15/10/2026) : nu, son texte collait au bord du panneau. Meme regle que le pied de l'espace famille (foyer.css). */ .travail > footer{margin-top:0;border-top:var(--tr);padding:var(--sp-6) var(--sp-6) var(--sp-7)} @media (max-width:900px){ .travail > footer{padding:var(--sp-5) var(--sp-4) var(--sp-6)} } /* Un bouton qui a la peau d'un lien. `.lien` n'etait style que dans app.css, que /pro ne sert pas : chaque composant le refaisait, et celui qui l'oubliait (« Modifier » le telephone d'Equipe) gardait l'apparence d'un bouton du navigateur (comparaison du 15/10/2026). La base vit ici ; un composant plus precis l'emporte toujours. */ .lien{appearance:none;background:none;border:0;padding:0;font:inherit;color:var(--terraDk); text-decoration:underline;text-underline-offset:3px;cursor:pointer} .lien:hover{color:var(--terra)} /* Ce que l'audit etendu du 02/09/2026 a vu le premier jour ou il a regarde les ecrans pro CONNECTES : trois cibles sous 44 px et un certificat qui debordait de 14 px a 360. Aucun de ces defauts n'existait sur l'ecran de connexion, le seul que l'outil auditait jusque-la. */ @media (pointer:coarse){ /* « Se deconnecter » : un lien de texte de 22 px dans la barre. */ .sortir,#sortir{display:inline-flex;align-items:center; min-height:var(--cible)} /* Les