/* ---------------------------------------------------------------------------
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%;
}
*{box-sizing:border-box}
/* `hidden` doit gagner contre tout `display` pose par une classe.
Sans cette regle, .sec{display:flex} l'emporte sur la valeur par defaut
du navigateur et la section reste visible : l'accueil affichait le titre
« Ils s'epanouiraient chez vous » au-dessus d'une liste vide. */
[hidden]{display:none !important}
body{margin:0;background:var(--cream);color:var(--ink);
font-family:var(--ff-corps);
font-size:var(--fs-md);line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--ff-titre);font-weight:600;margin:0;
line-height:1.12;letter-spacing:-.005em;text-wrap:balance}
a{color:var(--terra)}
.wrap{max-width:1180px;margin:0 auto;padding:0 26px}
/* micro-libelles en mono capitales, tres espaces */
.lab{font-family:var(--ff-mono);font-size:var(--fs-xs);
letter-spacing:.16em;text-transform:uppercase;color:var(--warm)}
/* barre */
.nav{display:flex;align-items:center;gap:var(--sp-3);
padding:var(--sp-5) 0 var(--sp-4)}
/* Le logo est un bouton : il doit donc annuler l'habillage du navigateur
sans perdre l'apparence qu'il avait quand il n'en etait pas un. */
.marque{display:flex;align-items:center;gap:var(--sp-3);background:none;border:0;
padding:0;color:inherit;cursor:pointer}
.marque:hover .brand{color:var(--terraDk)}
/* La marque est a la taille du titre : --fs-display, soit le meme
clamp(27px, 3,6vw, 40px). Les deux grandissent donc ensemble d'un
telephone a un grand ecran, au lieu de diverger.
La patte est dimensionnee en `em` et non en pixels : c'est ce qui la fait
suivre le clamp. Des pixels fixes l'auraient laissee minuscule a cote
d'une marque de 40 px sur grand ecran, et enorme a cote de 27 sur
telephone. Les rapports (1,58 et 1,70) sont ceux d'origine. */
.marque{font-size:var(--fs-display)}
.paw{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;white-space:nowrap;transition:color var(--t-court) var(--e)}
/* La baseline est un cran SOUS la marque, pas a sa hauteur.
A --fs-display elle mesurait 496 px contre 251 pour « Patte Blanche » :
son interlettrage de petite capitale la rend deux fois plus large a
taille egale, si bien qu'elle criait plus fort que le nom qu'elle
accompagne. A --fs-3xl elle reste presente sans dominer.
L'interlettrage est reduit de .16em a .02em : a cette taille, l'espacement
des petites capitales etirait la ligne sans rien ajouter a la lecture. */
.nav .right{margin-left:auto;display:flex;gap:var(--sp-4);align-items:center;
font-size:var(--fs-sm);color:var(--ink3);letter-spacing:.14em}
/* --fs-3xl, c'etait la taille d'un titre pour une baseline : elle
concurrencait la marque au lieu de la souligner (porteur du projet,
02/09/2026). Une etiquette : petite, espacee, en retrait. */
/* Entree de l'espace des structures.
-----------------------------------------------------------------------
Cet espace existait, servait sur /pro, et RIEN n'y menait : ni la barre,
ni le pied de page. Il etait joignable en tapant l'adresse, c'est-a-dire
par personne - zero compte cree.
Traite comme une cible tactile a part entiere (--cible) : le benevole qui
le cherche le fait souvent depuis un telephone, une fois par an, et rate
un lien de texte serre entre deux autres. */
.pro-lien{display:inline-flex;align-items:center;min-height:var(--cible);
padding:var(--sp-2) var(--sp-4);margin-left:var(--sp-4);
font-size:var(--fs-base);color:var(--terra);text-decoration:none;
border:var(--tr);border-radius:var(--r-pill);white-space:nowrap}
.pro-lien:hover,.pro-lien:focus-visible{background:var(--cream);
color:var(--terraDk)}
/* Cible tactile pleine : mesure a 360 px, le lien faisait moins de 44 px
de haut. C'est la porte d'entree des structures ; la rater au doigt
revient a ne pas l'avoir. */
.pied-lien{display:inline-flex;align-items:center;min-height:var(--cible);
color:var(--terra);font-weight:600}
.pied-lien:hover,.pied-lien:focus-visible{color:var(--terraDk)}
/* Et la LARGEUR, au doigt (QA du 13/10/2026) : « Tarifs » faisait 37 px de
large pour 44 de haut - un libelle court fait une cible etroite. Ce n'est
pas un lien au milieu d'une phrase, c'est une ligne de liens. */
@media (pointer:coarse){
.pied-lien{min-width:var(--cible);justify-content:center}
}
/* bandeau d'entete : titre + panneau foyer
-----------------------------------------------------------------------
Mesure a 1 440 : la prose tenait sur 477 px dans une colonne qui en offre
660, et le panneau foyer, haut de 131 px a cote d'un texte de 173,
laissait un trou sous lui a droite. Tout le poids tombait a gauche alors que la place
existait. Deux corrections, aucune n'ajoute d'ornement :
- la prose reprend la mesure de lecture du produit (--mesure, 65
caracteres) au lieu d'un 52ch pose a la main : deux lignes au lieu de
trois, et la colonne est occupee jusqu'au bout ;
- le panneau s'etire a la hauteur du texte (`align-items:stretch`) : les
deux moities du bandeau se terminent ensemble. */
.top{background:var(--cream2);border-radius:var(--r-lg);padding:var(--sp-6);
display:flex;gap:var(--sp-6);align-items:stretch;flex-wrap:wrap}
/* min-width:300px + 72 px de padding du panneau + 52 px de la page = 424 px
de largeur minimale. En dessous, la page deborde : mesure 362 px de
contenu pour 360 de fenetre. `min()` laisse la colonne se replier au lieu
de pousser. */
.top .txt{flex:1 1 420px;min-width:min(300px,100%)}
.top h1{font-size:var(--fs-display)}
.top h1 em{font-style:italic;color:var(--terra);display:block}
.top p{color:var(--ink3);margin:var(--sp-4) 0 0;max-width:var(--mesure);
font-size:var(--fs-md)}
.foyer{background:var(--paper);border-radius:var(--r-md);padding:var(--sp-4);
min-width:min(290px,100%);flex:0 1 360px}
.foyer .hd{display:flex;align-items:center;margin-bottom:var(--sp-3)}
/* Vise la COMMANDE, pas la balise. « Modifier » etait un `` -
un lien sans destination - et la regle le ciblait par `a`. Le jour ou il
est devenu le bouton qu'il aurait toujours du etre, il s'est colle au
libelle « Votre foyer ». Un selecteur qui depend de la balise casse des
qu'on corrige la balise. */
.foyer .hd .lien{margin-left:auto;font-size:var(--fs-base);
text-decoration:none}
.foyer .hd .lien:hover{text-decoration:underline}
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-content:flex-start}
.chip{background:var(--cream);border:var(--tr);border-radius:var(--r-pill);
padding:var(--sp-1) var(--sp-3);font-size:var(--fs-sm);color:var(--ink2)}
/* filtres */
.filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
padding:26px 0 4px}
.f{border:var(--tr-fort);background:var(--paper);border-radius:var(--r-pill);
padding:8px 16px;font:inherit;font-size:var(--fs-base);color:var(--ink2);
cursor:pointer;transition:var(--t-court) var(--e);white-space:nowrap}
.f:hover{border-color:var(--terraLt)}
select.f{max-width:230px}
.f[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);
color:var(--paper)}
.f.app{border-color:var(--terra);color:var(--terra);background:var(--paper)}
/* .7 ramenait la croix a 2,47 de contraste : le geste le plus utile de la
barre - retirer un filtre - etait le moins lisible. L'attenuation la
distinguait du libelle ; une taille legerement moindre y suffit. */
.f.app .x{margin-left:7px;font-size:var(--fs-sm)}
/* « Réinitialiser » retire les pastilles voisines : il ne doit pas leur
ressembler, sinon on le prend pour un filtre de plus et on le coche.
Trait discontinu, encre sourde, aucune couleur de marque. */
.f.raz{border:1px dashed var(--cream3);color:var(--warm);background:none}
.f.raz:hover{border-color:var(--warm);color:var(--ink3)}
/* Meme faute que sur .f.app, commise le meme jour : .6 ramenait la croix
a 2,47. La pastille est deja discrete par son trait discontinu et son
encre sourde ; attenuer en plus le seul symbole qu'on doit reconnaitre
etait une attenuation de trop. */
.f.raz .x{margin-left:7px;font-size:var(--fs-sm)}
.filters .note{margin-left:auto;font-size:var(--fs-sm);color:var(--warm);
text-align:right}
/* titre de section + compte */
.sec{display:flex;align-items:baseline;gap:12px;padding:26px 0 14px;
flex-wrap:wrap}
.sec h2{flex:0 0 auto}
.sec h2{font-size:var(--fs-2xl)}
.sec .cnt{background:var(--cream3);border-radius:var(--r-pill);padding:2px 10px;
font-size:var(--fs-sm);color:var(--ink3)}
.sec .sub{margin-left:auto;font-size:var(--fs-sm);color:var(--warm)}
/* grille de cartes */
.grid{display:grid;gap:20px;padding-bottom:56px;
grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.card{background:var(--paper);border:var(--tr);
border-radius:14px;overflow:hidden;display:flex;flex-direction:column;
box-shadow:var(--sh);cursor:pointer;transition:var(--t-court) var(--e)}
.card:hover{transform:translateY(-2px);border-color:var(--terraLt)}
.card.sale{border-top:3px solid var(--terra)}
/* L'image est sortie du flux : sinon une photo en portrait impose sa
propre hauteur au conteneur et le rapport 4/3 saute. */
/* Sur sa propre ligne : `width:100%` ne suffit pas dans un conteneur
flex, il faut imposer la base pour provoquer le retour. */
.ph{position:relative;aspect-ratio:4/3;background:var(--cream2);
overflow:hidden}
.ph img{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;display:block}
.ph .badge{position:absolute;top:10px;left:10px;background:rgba(255,253,249,.95);
border-radius:var(--r-pill);padding:4px 11px;font-size:var(--fs-sm);font-weight:600;
color:var(--greenDk);display:flex;align-items:center;gap:5px}
.ph .badge .dot{width:6px;height:6px;border-radius:var(--r-circle);background:var(--green)}
.ph .badge.att{background:var(--paper);color:var(--gold)}
.ph .badge.att .dot{background:var(--gold)}
.ph .badge.v{color:var(--terraDk)}
.ph .badge.urgent{color:var(--rouge)}
.ph .badge.v .dot{background:var(--terra)}
/* Attente longue. Pleine et terracotta, pas discrete : c'est la seule
information qu'aucun autre site n'affiche, et celle qui change un regard.
Au-dela d'un an, on cesse de la murmurer. */
.ph .badge.long{background:var(--terra);color:var(--paper);font-weight:700}
/* Nouveau. Vert plein : c'est la seule vignette de la carte qui annonce une
bonne nouvelle, et elle ne peut jamais coexister avec l'attente longue.
Voir front.est_nouveau - elle ne s'affiche que lorsque le corpus est
assez ancien pour que « nouveau » veuille dire quelque chose. */
.ph .badge.neuf{background:var(--green);color:var(--paper);font-weight:700}
/* Le mot medical, et ce qu'il veut dire, sur la carte. Toutes les affections
sont montrees, chacune de sa couleur ; le libelle explicatif n'apparait
qu'une fois, pour la plus lourde. */
.mal{align-self:flex-start;display:inline-flex;align-items:baseline;gap:var(--sp-1);
border-radius:var(--r-pill);padding:3px 10px;
font-size:var(--fs-xs);font-weight:600}
/* L'opacite .85 faisait tomber « · se gère » a 4,10 sur le fond ambre de
la pastille. C'est le mot qui explique l'affection - ce que le produit
promet d'expliquer justement. La graisse le distingue deja du nom du
mal ; l'attenuer en plus ne servait qu'a le rendre penible a lire. */
.mal span{font-weight:400}
.mal.soigne{background:var(--greenLt);color:var(--greenDk)}
.mal.gere{background:var(--goldLt);color:var(--goldDk)}
.mal.vit{background:var(--calmLt);color:var(--calmDk)}
.mal.serieux{background:var(--calmPlein);color:var(--calmSurPlein)}
/* Une affection citee sans certitude porte un « ? » et un trait
interrompu : le doute se voit sur la pastille, il n'a pas besoin
d'etre re-ecrit a cote de chaque nom. */
.mal.doute{background:none;box-shadow:inset 0 0 0 1px currentColor;
opacity:.85}
/* « Serieux » est le seul regime dont l'encre est CLAIRE : elle vit sur un
fond plein. Sans cette ligne, la variante douteuse - qui retire le fond -
ecrivait du creme sur du creme, contraste 1,00, texte invisible. Et ce
n'est pas un cas rare : la leucose est mentionnee sans resultat sur 447
fiches contre 136 affirmees, donc c'etait le cas DOMINANT du regime. */
.mal.serieux.doute{color:var(--calmDk)}
.mal i{font-style:normal;font-weight:700;margin-left:3px}
.maux{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-1)}
.maux .mal{margin:0}
.mq{flex:1 0 100%;color:var(--warm);font-size:var(--fs-xs)}
/* Deux contraintes qu'aucun autre site n'affiche : la zone d'adoption, et la
date a laquelle nous avons constate l'annonce en ligne. Elles ne
s'affichent que lorsqu'elles CONTRAIGNENT - la norme ne merite pas de
pixels, l'exception oui. */
/* Visible seulement pour les technologies d'assistance. `display:none` les
cacherait aussi : il faut sortir du cadre, pas disparaitre. */
/* Petits ecrans : rendre au CONTENU la place que prend l'habillage.
Mesure a 360 x 640 : le panneau foyer faisait 572 px dont 174 d'en-tete et
148 de pied - 56 % de decor - et n'exposait que 250 px des 1 736 px de
questions, soit 14 % a la fois. Le bloc sombre, lui, depensait 34 px de
marge de chaque cote, soit 19 % de la largeur d'un telephone. */
@media (max-width:560px){
/* `white-space:nowrap` sur « Vous etes une structure ? » poussait le
bord droit du document a 471 px pour une fenetre de 360 : la PAGE
entiere defilait de travers, sur tous les ecrans, parce que la barre
est partout. Mesure par tools/audit.py, invisible a la relecture.
La barre passe donc a la ligne et le lien s'y etale. */
.nav{flex-wrap:wrap}
.pro-lien{white-space:normal;margin-left:0;flex:1 1 100%;
justify-content:center;text-align:center}
/* A 27 px, « Patte Blanche » et la baseline ne tiennent pas cote a cote :
le nom se cassait en deux lignes. La baseline est un ornement, le nom
est la marque - c'est l'ornement qui cede. */
.nav .right{display:none}
.foyer-form .fh{padding:14px 18px 12px}
.foyer-form .fh h2{font-size:var(--fs-xl)}
.foyer-form .fh p{display:none}
.foyer-form .ff{padding:12px 18px}
.foyer-form .fb{padding-left:18px;padding-right:18px}
.bloc-alerte{padding:var(--sp-5) var(--sp-4) var(--sp-4)}
.top{padding:var(--sp-5) var(--sp-4)}
}
/* Cibles tactiles.
Le pointeur grossier - un doigt - vise moins bien qu'une souris. La regle
ne s'applique donc QUE la : `pointer:coarse`. Elle agrandit sans rien
deplacer, en jouant sur la hauteur minimale et l'alignement vertical. */
@media (pointer:coarse){
/* Une REGLE, plus une liste de selecteurs.
La premiere version enumerait les commandes connues, et ne couvrait donc
que celles auxquelles j'avais pense. L'audit etendu aux ecrans ouverts
par le script en a trouve quatre qui manquaient - dont « Annonce
d'origine », le lien vers la source, c'est-a-dire l'action la plus
importante du produit. Une enumeration oublie ; une regle non.
Les liens en PROSE sont exclus : imposer 44 px a un mot souligne au
milieu d'un paragraphe casserait l'interligne sans rien gagner. */
button, input, select, textarea, [role="button"], summary,
a.sec, a.btn, a.f, a.cta{
min-height:var(--cible);
}
.pills .f, .opt, .dd-t, .f, .lien, a.sec{
display:inline-flex;align-items:center}
.foyer-form .close, .doc .close{min-width:var(--cible);
display:inline-grid;place-items:center;padding:0}
.carrousel .pause{width:var(--cible);height:var(--cible)}
/* Une case a cocher ne grossit pas : c'est sa LIGNE qu'on touche. */
input[type=checkbox], input[type=radio]{min-height:0}
}
/* Un bouton qui a l'apparence d'un lien.
`` etait employe pour trois commandes - « Modifier »,
« Toutes les questions », « Revoir mes reponses » - qui ne menent nulle
part. Un lecteur d'ecran annoncait « lien », et la barre d'espace ne les
activait pas. Ce sont des boutons ; seule leur peau est celle d'un lien. */
.lien{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)}
/* Le lien d'evitement ne se montre qu'une fois atteint au clavier. */
.evitement{position:absolute;left:var(--sp-2);top:-100px;z-index:var(--z-barre);
background:var(--paper);color:var(--ink);padding:var(--sp-2) var(--sp-4);
border-radius:var(--r-sm);box-shadow:var(--sh-2);
font-size:var(--fs-md);font-weight:600;transition:top var(--t-court) var(--e)}
.evitement:focus{top:var(--sp-2)}
.zn{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
color:var(--ink3);font-size:var(--fs-xs);font-weight:600}
.zn::before{content:"";width:6px;height:6px;border-radius:var(--r-circle);
background:var(--calm);flex:none}
.zn.vieille{color:var(--goldDk)}
/* De l'autre cote de la frontiere : le drapeau tient lieu de pastille. */
.zn.frontiere::before{content:none}
.zn.frontiere svg{width:1.15em;height:auto;flex:none}
.zn.vieille::before{background:var(--goldDk)}
.verif.vieille{color:var(--goldDk)}
/* Date de mise a jour publiee par le refuge.
-----------------------------------------------------------------------
481 annonces diffusees n'avaient pas bouge depuis 2023 ou avant, dont 69
depuis 2017 et 2 depuis 2009. La carte n'en disait rien d'explicite : sa
duree relative, « 8 ans et 11 mois qu'elle attend », se lit comme un long
sejour en refuge et non comme une annonce probablement morte.
Discret par defaut - c'est une mention de provenance, pas une alerte -
mais souligne au-dela de deux ans, la ou la question change de nature.
Le doré, pas le rouge : nous ne savons PAS que l'annonce est caduque, la
source la diffuse toujours. Le rouge affirmerait ce que nous ignorons. */
.maj{margin:var(--sp-2) 0 0;font-size:var(--fs-xs);color:var(--ink3)}
.maj.ancienne{color:var(--goldDk);font-weight:600}
.maj.muette{color:var(--warm);font-style:italic}
/* Confirmee par la structure elle-meme.
Le vert, et non le doré de la date : ce n'est pas une reserve, c'est le
seul endroit du produit ou l'information ne vient pas d'un crawl mais du
refuge lui-meme. Sobre malgre tout - un badge tapageur ferait passer les
autres annonces pour douteuses, alors qu'elles ne le sont pas : elles
n'ont simplement pas encore de structure inscrite. */
.conf-pb{margin:var(--sp-2) 0 0;font-size:var(--fs-xs);color:var(--greenDk);
font-weight:600}
.conf-pb::before{content:"";display:inline-block;width:var(--sp-2);
height:var(--sp-2);border-radius:var(--r-circle);background:var(--green);
margin-right:var(--sp-2);vertical-align:middle}
/* L'animal n'est pas encore la.
-----------------------------------------------------------------------
2 406 annonces diffusees. Le fait change la decision - on ne s'engage pas
de la meme facon pour un chien qu'on voit samedi et pour un chien qui
arrive dans trois mois - donc il se lit avant le reste de la carte.
Le doré : c'est une reserve, pas un defaut. L'animal existe, l'annonce est
vraie, il faut seulement du temps. Le rouge est garde pour ce qui empeche.
`.mur` : la structure ne fait PAS voyager l'animal. Ce n'est plus une
attente, c'est une impossibilite pour qui n'est pas sur place - alors le
ton durcit d'un cran. */
.loin{margin:var(--sp-2) 0 0;font-size:var(--fs-xs);color:var(--goldDk);
font-weight:600;line-height:1.45}
.loin::before{content:"";display:inline-block;width:var(--sp-2);
height:var(--sp-2);border-radius:var(--r-circle);background:var(--gold);
margin-right:var(--sp-2);vertical-align:middle;flex:none}
.loin.mur{color:var(--rougeDk)}
.loin.mur::before{background:var(--rouge)}
.ph .route{position:absolute;top:10px;right:10px;background:rgba(255,253,249,.95);
border-radius:var(--r-pill);padding:4px 11px;font-size:var(--fs-sm);font-weight:600;
color:var(--ink2)}
/* La page de la source relue a l'ouverture dit que l'animal n'y est plus. */
.carte .retiree{margin:0 0 var(--sp-3);padding:var(--sp-3);border-radius:var(--r-md);
background:var(--cream2);color:var(--terraDk);font-weight:600;line-height:1.45}
/* L'animal arrive de l'etranger : une pastille dans le corps de la carte. */
/* --goldDk, pas --gold : 2,62 de contraste pour 4,5 exiges a cette taille
(audit du 21/09/2026, les premieres cartes etrangeres de l'accueil). */
.card .etranger{margin:0;font-size:var(--fs-xs);font-weight:600;color:var(--goldDk)}
/* Le niveau de confiance du lieu, colle au temps : « 1 h 05 · estimé ». */
.ph .route .fiab{font-weight:400;font-size:var(--fs-xs);color:var(--ink3)}
.carte .ct .fiab-note{display:block;margin-top:6px;font-size:var(--fs-xs);
line-height:1.4;color:var(--paper);opacity:.7}
.body{padding:15px 16px 16px;display:flex;flex-direction:column;gap:7px;flex:1}
.line1{display:flex;align-items:baseline;gap:10px}
/* Le nom prend la place : c'est par lui qu'on reconnait l'animal. */
.line1 h3{font-size:var(--fs-2xl);line-height:1.15}
/* Les sources ecrivent « milou » ou « TIGROU » ; l'initiale est
normalisee a l'affichage sans toucher a la donnee. */
.line1 h3::first-letter,.doc .hi h2::first-letter{
text-transform:uppercase}
/* La reference de gestion du refuge sert a retrouver l'animal sur place, pas
a le reconnaitre : petite, grise, jamais en gras. */
.ref{margin:2px 0 0;font-family:var(--ff-mono);
font-size:var(--fs-xs);letter-spacing:.08em;color:var(--warm);font-weight:400}
.doc .hi .ref{margin:4px 0 0}
.line1 .fee{margin-left:auto;color:var(--terra);font-weight:600;font-size:var(--fs-base);
white-space:nowrap}
.line1 .fee small{display:block;font-weight:400;font-size:var(--fs-xs);
color:var(--warm);text-align:right}
.line2{color:var(--ink3);font-size:var(--fs-base)}
/* Pastille de source : monogramme + nom court, une couleur par source.
Aucun logo tiers - voir pb/front.SOURCES pour le motif. */
.src-p{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);
color:var(--ink3)}
.src-p .mono{display:inline-flex;align-items:center;justify-content:center;
min-width:26px;height:18px;padding:0 5px;border-radius:var(--r-xs);
font-family:var(--ff-mono);font-size:var(--fs-xs);
font-weight:500;letter-spacing:.06em;color:var(--paper)}
.src-p.t-terra .mono{background:var(--terra)}
.src-p.t-green .mono{background:var(--green)}
.src-p.t-gold .mono{background:var(--gold)}
.src-p.t-warm .mono{background:var(--warm)}
.app{background:var(--cream);border:var(--tr);border-radius:var(--r-sm);
padding:8px 10px;font-size:var(--fs-sm);color:var(--ink2)}
.app .lab{display:block;margin-bottom:3px;color:var(--terra)}
.mini{margin-top:auto;padding-top:11px;border-top:var(--tr-clair);
font-size:var(--fs-sm);color:var(--warm);display:flex;gap:8px;
justify-content:space-between}
/* fiche */
/* ================= LA FICHE ================= */
/* Elle ne liste plus des criteres : elle met face a face ce que le foyer a
declare et ce que l'annonce repond. Le verdict est lisible sans defiler,
et l'inconnu n'est jamais affiche deux fois - il devient une question. */
.doc.carte{max-width:1120px;background:var(--paper);overflow:visible}
/* ---- en-tete immersif ---- */
/* La photo prend sa propre colonne.
En fond du bandeau, elle subissait un rapport de 2,6:1 (1120 x 430) :
`cover` y decoupait une bande horizontale au milieu d'une photo carree,
et l'on voyait une tranche de l'animal, le crane coupe. Aucun reglage de
`background-position` ne rattrape ce rapport - c'est le rapport qu'il
fallait changer.
A gauche la photo, a 46 % de la largeur, soit environ 1,2:1. A droite le
nom sur l'encre pleine : plus lisible que du blanc sur photo, et la photo
n'a plus besoin d'etre assombrie pour porter du texte. */
.carte .hero{display:grid;grid-template-columns:46% 1fr;
background:var(--ink);color:var(--paper);border-radius:18px 18px 0 0;
overflow:hidden}
.carte .hph{background:var(--ink) center 38%/cover no-repeat;min-height:430px}
/* 38 % et non 50 % : sur une photo d'animal la tete est dans le tiers
superieur, et c'est elle qu'on regarde. */
.carte .hin{display:flex;flex-direction:column;justify-content:space-between;
gap:var(--sp-5);padding:22px 34px 30px;min-width:0}
.carte .hero.sans .hph{background:
repeating-linear-gradient(135deg,var(--inkRaye) 0 10px,var(--ink) 10px 20px)}
.carte .htop{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.carte .verif,.carte .att{display:inline-flex;align-items:center;gap:8px;
background:rgba(249,244,234,.12);border:1px solid rgba(249,244,234,.18);
border-radius:var(--r-pill);padding:7px 14px;font-size:var(--fs-sm);
color:rgba(249,244,234,.92);backdrop-filter:blur(6px)}
.carte .verif .lm{width:16px;height:17px;flex:none}
.carte .verif .lm ellipse,.carte .verif .lm path:not(.cl){fill:var(--paper)}
.carte .verif .lm .cl{fill:var(--terraLt)}
/* Une case par mois : l'attente se voit avant de se lire. */
.carte .att .mois{display:inline-flex;gap:3px}
.carte .att .mois i{width:7px;height:13px;border-radius:2px;
background:rgba(249,244,234,.2)}
.carte .att .mois i.on{background:var(--terraLt)}
.carte .hero .close{position:static;margin-left:auto;flex:none;background:rgba(249,244,234,.14);
color:var(--paper);border:0;width:36px;height:36px;border-radius:var(--r-circle);
font-size:var(--fs-md);cursor:pointer}
.carte .hero .close:hover{background:rgba(249,244,234,.26)}
.carte .hbas{display:flex;align-items:flex-end;gap:28px;flex-wrap:wrap}
.carte .hnom{flex:1 1 320px;min-width:0}
.carte .hnom h2{font-size:clamp(34px,3.4vw,52px);line-height:1;margin:0;color:var(--paper);
letter-spacing:-.02em}
.carte .hnom h2::first-letter{text-transform:uppercase}
.carte .hnom .ref{color:rgba(249,244,234,.45);margin:6px 0 0}
.carte .hnom .sous{margin:10px 0 0;font-size:var(--fs-md);color:rgba(249,244,234,.82)}
.carte .hscore{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
/* Le pattometre : une foulee qui marche vers l'utilisateur. */
.carte .pattes{display:flex;gap:6px}
.carte .pt{width:26px;height:28px;display:block;opacity:.28}
.carte .pt.on{opacity:1}
.carte .pt .pw{width:100%;height:100%}
.carte .pt .pw ellipse,.carte .pt .pw path{fill:rgba(249,244,234,.55)}
.carte .pt.on .pw ellipse,.carte .pt.on .pw path{fill:var(--green)}
.carte .accord{background:var(--green);color:var(--paper);border-radius:var(--r-pill);
padding:9px 18px;font-size:var(--fs-base);font-weight:600}
/* L'invitation prend la place du verdict quand il n'y a pas de verdict a
rendre. Elle n'est PAS verte : le vert dit « ca s'accorde », et rien ne
s'accorde encore. Terracotta, comme tout ce qui appelle une action. */
.carte .accord.invite{background:var(--terra);border:0;cursor:pointer;
font-family:inherit;text-align:left;line-height:1.25;
transition:background var(--t-court) var(--e)}
.carte .accord.invite:hover{background:var(--terraDk)}
/* ---- corps : dialogue + rail ---- */
.carte .corps{display:grid;grid-template-columns:1fr 330px;gap:20px;
padding:22px 34px 8px;background:var(--cream)}
.carte .col{min-width:0}
.dial{background:var(--paper);border:var(--tr);
border-radius:16px;padding:20px 22px}
.dial .dh{display:flex;align-items:center;gap:14px;padding-bottom:14px;
border-bottom:var(--tr-clair);margin-bottom:16px}
.dial .chez,.dial .rep-t{font-family:var(--ff-mono);
font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;
color:var(--warm)}
.dial .rep-t{margin-left:auto}
.dial .griffe .gr{width:40px;height:14px;color:var(--terraLt)}
/* Chaque critere : une bulle du foyer a gauche, la reponse de l'annonce a
droite. La citation est la seule source de verite. */
.ech{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);
gap:14px;align-items:start;margin-bottom:12px}
.ech .vous{background:var(--cream2);border-radius:14px 14px 14px 4px;
padding:12px 15px;font-size:var(--fs-base);color:var(--ink2)}
.ech .rep{background:var(--greenLt);border-radius:14px 14px 4px 14px;
padding:12px 15px;font-size:var(--fs-base);color:var(--ink2)}
.ech .rep.non{background:var(--rougeLt)}
.ech .rep.calc{background:var(--cream2)}
.ech .rep i{font-style:italic}
.ech .rep b{font-family:var(--ff-titre);font-size:var(--fs-lg)}
.ech .rep .src{display:block;margin-top:6px;
font-family:var(--ff-mono);font-size:var(--fs-xs);
color:var(--warm);letter-spacing:.04em}
/* L'inconnu devient une action, jamais un constat repete. */
.aquest{margin-top:16px;background:var(--goldLt,var(--goldLt));border-radius:14px;
padding:15px 17px}
.aquest .qt{margin:0 0 12px;font-size:var(--fs-base);color:var(--ink2);
display:flex;align-items:center;gap:9px}
.aquest .qt .gr{width:26px;height:10px;color:var(--gold);flex:none}
.aquest .qs{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.aquest .q{flex:1 1 220px;background:var(--paper);border-radius:var(--r-md);
padding:11px 14px;font-size:var(--fs-base);color:var(--ink2);
border:1px solid rgba(201,150,47,.28)}
.aquest .copier{background:none;border:0;font:inherit;font-size:var(--fs-base);
/* --terraDk et non --terra : sur le fond --goldLt du bloc, la terracotta
franche mesure 4,48 pour 4,5 exige (audit du 04/09/2026). */
font-weight:600;color:var(--terraDk);cursor:pointer;padding:8px 4px}
.aquest .copier:hover{text-decoration:underline}
.aquest .copier.ok{color:var(--green)}
/* Le texte source, avec ce qui fonde chaque preuve surligne. */
.source{margin-top:18px;background:var(--paper);border:var(--tr);
border-radius:16px;padding:18px 22px}
.source .lab{display:block;margin-bottom:10px}
.source p{margin:0;font-size:var(--fs-base);line-height:1.75;color:var(--ink3);
font-style:italic}
.source mark{background:var(--greenLt);color:var(--ink);padding:1px 3px;
border-radius:var(--r-xs);font-style:normal}
/* ---- rail droit ---- */
.carte .rail{display:flex;flex-direction:column;gap:14px;min-width:0}
.carte .ct{background:var(--ink);color:var(--paper);border-radius:16px;
padding:18px 20px}
.carte .ct b{display:block;font-family:var(--ff-titre);font-size:var(--fs-3xl);
line-height:1;color:var(--terraLt)}
.carte .ct b small{font-size:var(--fs-md);color:rgba(249,244,234,.6)}
.carte .ct .km{display:block;margin-top:4px;font-size:var(--fs-sm);
color:rgba(249,244,234,.6)}
.carte .ct .route{display:flex;align-items:center;gap:6px;margin:14px 0 12px}
.carte .ct .dep{width:8px;height:8px;border-radius:var(--r-circle);
background:var(--terraLt);flex:none}
.carte .ct .trait{flex:1;height:0;border-top:2px dashed rgba(249,244,234,.28)}
.carte .ct .pw{width:18px;height:19px;flex:none}
.carte .ct .pw ellipse,.carte .ct .pw path{fill:rgba(249,244,234,.55)}
.carte .ct p{margin:0;font-size:var(--fs-sm);line-height:1.55;
color:rgba(249,244,234,.68)}
.carte .ct.muet b{color:rgba(249,244,234,.5)}
.carte .cs,.carte .cq{background:var(--paper);border:var(--tr);
border-radius:16px;padding:16px 18px}
.carte .cq ol{margin:10px 0 0;padding-left:0;list-style:none;counter-reset:e}
.carte .cq li{counter-increment:e;position:relative;padding-left:26px;
margin-bottom:9px;font-size:var(--fs-base);color:var(--ink2);line-height:1.5}
.carte .cq li:last-child{margin-bottom:0}
.carte .cq li::before{content:counter(e) ".";position:absolute;left:0;
font-weight:700;color:var(--terra)}
.carte .cq li small{display:block;color:var(--warm);font-size:var(--fs-xs)}
/* ---- barre d'action ---- */
/* Patte Blanche ne gere jamais l'adoption : elle prepare, l'utilisateur agit. */
.carte .agir{display:flex;align-items:center;gap:20px;flex-wrap:wrap;
background:var(--ink);color:var(--paper);padding:20px 34px;
border-radius:0 0 18px 18px;margin-top:14px}
.carte .agir .btn{background:var(--terraLt);color:var(--ink);flex:none}
.carte .agir .btn:hover{background:var(--terra);color:var(--paper)}
.carte .agir p{margin:0;flex:1 1 260px;font-size:var(--fs-base);
color:rgba(249,244,234,.72);line-height:1.5}
.carte .agir p b{color:var(--paper)}
.carte .agir .sec{color:rgba(249,244,234,.8);font-size:var(--fs-base);
border:1px solid rgba(249,244,234,.28);border-radius:var(--r-pill);
padding:9px 16px;text-decoration:none;white-space:nowrap}
.carte .agir .sec:hover{border-color:var(--terraLt);color:var(--paper)}
/* Signaler un probleme.
-----------------------------------------------------------------------
Discret, et volontairement : il ne s'adresse pas a la personne qui
decouvre l'animal, mais a celle qui revient apres coup. Un bouton criard
ferait douter de toutes les structures, y compris des 1 500 qui font leur
travail. Il doit rester TROUVABLE, pas visible - d'ou une cible tactile
pleine malgre la sobriete. */
.carte .agir .signal{background:none;border:0;padding:var(--sp-2) 0;
color:var(--cream3);font-size:var(--fs-base);font-family:inherit;
text-decoration:underline;cursor:pointer;min-height:var(--cible)}
.carte .agir .signal:hover,.carte .agir .signal:focus-visible{
color:var(--paper)}
/* « Est-il toujours disponible ? »
-----------------------------------------------------------------------
Beaucoup plus present que « signaler un probleme », et pour une raison
simple : c'est la question que tout le monde se pose sur une annonce de
2017, et la seule que nous puissions faire remonter a quelqu'un capable
d'y repondre. */
.carte .agir .dispo{background:none;color:var(--paper);
border:1px solid var(--terraLt);border-radius:var(--r-pill);
padding:var(--sp-2) var(--sp-4);font-size:var(--fs-base);
font-family:inherit;cursor:pointer;min-height:var(--cible);white-space:nowrap}
.carte .agir .dispo:hover:not([disabled]){background:var(--terraLt);
color:var(--ink)}
.carte .agir .dispo.ok{border-color:var(--green);color:var(--paper);
cursor:default;white-space:normal}
.carte .agir .dispo.ko{border-color:var(--rougeBord);white-space:normal}
/* Le formulaire, sous la barre d'action et non dedans : il change la nature
de la page - on ne cherche plus un animal, on raconte ce qui s'est passe. */
.sig-zone{padding:var(--sp-5) var(--sp-6) var(--sp-6)}
.sig h3{margin:0 0 var(--sp-3);font-size:var(--fs-lg)}
/* Ce que nous ne pouvons PAS faire, avant de demander quoi que ce soit.
Recueillir un signalement en laissant croire qu'on agira a la place de
l'Etat ferait renoncer la famille a la seule demarche qui compte. */
.sig-cadre{background:var(--goldPale);border-left:var(--sp-1) solid var(--gold);
padding:var(--sp-3) var(--sp-4);margin:0 0 var(--sp-4);
font-size:var(--fs-base);line-height:1.55;color:var(--ink2)}
.sig label{display:block;margin-bottom:var(--sp-4);font-size:var(--fs-base);
color:var(--ink2);font-weight:600}
.sig select,.sig textarea,.sig 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);
font-weight:400;background:var(--paper);color:var(--ink);
min-height:var(--cible);box-sizing:border-box}
.sig textarea{resize:vertical;line-height:1.5}
.sig .opt{font-weight:400;color:var(--warm);font-size:var(--fs-xs)}
.sig-cmd{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap}
.sig-msg .err{color:var(--rougeDk);font-size:var(--fs-base)}
.sig-fin{background:var(--greenLt);border-radius:var(--r-md);
padding:var(--sp-4);color:var(--greenDk)}
.sig-fin h3{margin:0 0 var(--sp-2)}
.sig-fin p{margin:0 0 var(--sp-2);line-height:1.55;font-size:var(--fs-base)}
.sig-fin a{color:var(--greenDk)}
@media (max-width:900px){
.carte .corps{grid-template-columns:1fr;padding:18px 20px 8px}
/* Sous 900 px la photo passe AU-DESSUS, en 4/3 : une colonne de 46 % sur
un telephone ne laisserait ni a la photo ni au texte de quoi exister. */
.carte .hero{grid-template-columns:1fr}
.carte .hph{min-height:0;aspect-ratio:4/3}
.carte .hin{padding:18px 20px 24px}
/* Empile, le rang de badges passe a la ligne et le bouton de fermeture
se retrouvait seul sur la sienne. Il reprend la place qu'on lui cherche
d'instinct : en haut a droite, sur la photo. */
.carte .hero{position:relative}
.carte .hero .close{position:absolute;top:12px;right:12px;
background:rgba(42,33,26,.55);backdrop-filter:blur(4px)}
.carte .hnom h2{font-size:var(--fs-4xl)}
.carte .hbas{gap:16px}
.carte .hscore{align-items:flex-start}
.ech{grid-template-columns:1fr}
.carte .agir{padding:18px 20px}
}
/* ---------- ce que la structure documente ---------- */
.struct{margin:0 30px 4px;padding:18px 20px;background:var(--cream2);
border-radius:14px}
.struct .sh{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
margin-bottom:14px}
.struct .sh b{font-family:var(--ff-titre);font-size:var(--fs-lg)}
.struct .sh .cnt{margin-left:auto;font-size:var(--fs-sm);color:var(--warm)}
.mesures{display:grid;gap:8px}
.mes{display:grid;grid-template-columns:1fr 120px 46px;align-items:center;
gap:12px;font-size:var(--fs-sm);color:var(--ink3)}
.mb{height:6px;border-radius:var(--r-pill);background:var(--cream3);overflow:hidden}
.mb i{display:block;height:100%;border-radius:var(--r-pill)}
.mb i.hi{background:var(--green)}
.mb i.mi{background:var(--gold)}
.mb i.lo{background:var(--terra)}
.mv{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;
color:var(--ink2)}
.struct .avert{margin:14px 0 0;font-size:var(--fs-sm);color:var(--warm);
line-height:1.5}
@media (max-width:720px){
.struct{margin:0 22px 4px}
.mes{grid-template-columns:1fr 70px 42px}
}
/* ---------- menu deroulant a choix multiple ---------- */
/* Des pastilles pour 16 especes noyaient la barre, et tronquer les 316 races
a 8 rendait les 308 autres inatteignables. Le menu montre tout, avec un
filtre de saisie quand la liste est longue. */
.dd{position:relative;display:inline-block}
.dd-t{display:inline-flex;align-items:center;gap:10px;min-width:210px;
justify-content:space-between;text-align:left}
.dd-t .cv{color:var(--warm);font-size:var(--fs-xs)}
.dd-t[aria-expanded="true"]{border-color:var(--terra)}
/* Position fixe, calculee par placerDD() : en absolu le menu etait rogne
par le corps defilant du formulaire. */
.dd-p{position:fixed;z-index:var(--z-voile);min-width:280px;box-shadow:var(--sh-2);
max-width:340px;background:var(--paper);border:var(--tr);
border-radius:var(--r-md);padding:8px;box-shadow:0 18px 40px -18px rgba(51,41,31,.4)}
.dd-p[hidden]{display:none}
.dd-s{width:100%;box-sizing:border-box;margin-bottom:6px;padding:7px 10px;
border:var(--tr);border-radius:var(--r-sm);font:inherit;font-size:var(--fs-champ);
background:var(--cream)}
.dd-l{max-height:230px;overflow-y:auto}
.dd-o{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:var(--r-sm);
font-size:var(--fs-base);color:var(--ink2);cursor:pointer}
.dd-o:hover{background:var(--cream)}
.dd-o[data-on="1"]{background:var(--cream2);color:var(--ink);font-weight:600}
.dd-o input{accent-color:var(--terra);width:14px;height:14px;flex:none}
/* Les deux commandes du menu, cote a cote et de meme poids : ni l'une ni
l'autre n'est le geste « normal ». Desactivees quand elles n'ont rien a
faire, plutot que retirees - un bouton qui disparait deplace le bas du
panneau sous le curseur. */
.dd-cmd{display:flex;gap:var(--sp-2);margin-top:var(--sp-2);
padding-top:var(--sp-2);border-top:var(--tr-clair)}
.dd-cmd button{flex:1 1 0;background:none;border:var(--tr);
border-radius:var(--r-sm);padding:7px 10px;font:inherit;
font-size:var(--fs-sm);color:var(--terraDk);cursor:pointer;
transition:var(--t-court) var(--e)}
.dd-cmd button:hover:not(:disabled){background:var(--cream);
border-color:var(--terraLt)}
/* Un bouton desactive reste un bouton qu'il faut pouvoir LIRE : c'est en le
lisant qu'on comprend pourquoi il ne sert a rien pour l'instant. L'opacite
de .55 le ramenait a 2,34 de contraste pour 4,5 exige - mesure par
tools/audit.py aux quatre largeurs, jamais visible a la relecture du CSS.
La couleur seule suffit a le donner pour inactif. */
.dd-cmd button:disabled{color:var(--warm);cursor:default}
/* ---------- panneau foyer : une seule fenetre ---------- */
/* Neuf ecrans successifs : on repondait sans rien voir, et le nombre de
resultats n'apparaissait qu'a la fin. Tout tient ici, et le compteur du
pied de panneau se met a jour a chaque clic. */
.foyer-form{max-width:760px;display:flex;flex-direction:column;
/* `vh` d'abord, en repli : il fige la hauteur sur la fenetre barre d'URL
DEPLOYEE, donc le panneau depassait le visible des qu'elle se retractait.
`dvh` suit la hauteur reellement affichee ; les moteurs qui l'ignorent
gardent la premiere ligne. */
max-height:calc(100vh - 68px);
max-height:calc(100dvh - 68px)}
.foyer-form .fh{position:relative;padding:22px 28px 18px;background:var(--paper);
border-bottom:var(--tr)}
.foyer-form .fh h2{font-size:var(--fs-2xl);margin:8px 0 4px}
.foyer-form .fh p{color:var(--ink3);font-size:var(--fs-base);margin:0;max-width:52ch}
.foyer-form .fb{overflow-y:auto;padding:6px 28px 20px}
.grp{padding:18px 0 4px;border-bottom:var(--tr)}
.grp:last-child{border-bottom:0}
.gt{display:block;font-family:var(--ff-mono);
font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;
color:var(--terra);margin-bottom:12px}
/* --warm donnait 4,25 sur le fond du panneau : c'est la CONFIRMATION que
le code postal a ete reconnu, le seul retour que recoit la personne qui
vient de saisir. --ink3 la porte a 6,25. */
.etat{font-size:var(--fs-sm);color:var(--ink3)}
/* Le MEME indicateur portait deux couleurs selon l'endroit : --green dans
le panneau, --greenDk dans l'accueil. La variante claire tombait a 4,25 -
sur la confirmation que le code postal a ete reconnu, c'est-a-dire le
seul retour que recoit la personne qui vient de saisir. On aligne sur la
variante sombre, qui passe partout. */
.etat.ok{color:var(--greenDk)}
.etat.ko{color:var(--terraDk)}
.foyer-form .ff{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
padding:16px 28px;background:var(--paper);border-top:var(--tr)}
.compte{font-size:var(--fs-base);color:var(--ink3)}
.compte b{font-family:var(--ff-titre);font-size:var(--fs-xl);color:var(--ink);
margin-right:4px}
.foyer-form .ff .btn{margin-left:auto}
.sheet{position:fixed;inset:0;background:rgba(51,41,31,.42);z-index:var(--z-menu);
display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;
padding:34px 20px}
.sheet[hidden]{display:none}
.doc{background:var(--cream);border-radius:var(--r-lg);max-width:960px;width:100%;
overflow:hidden;box-shadow:0 30px 80px -30px rgba(51,41,31,.5)}
.doc .hd{position:relative;display:flex;gap:22px;padding:24px 28px 20px;background:var(--paper);
border-bottom:var(--tr);flex-wrap:wrap}
.doc .hd img{width:190px;height:150px;object-fit:cover;border-radius:var(--r-md);
flex:none}
.doc .hi{flex:1 1 280px;display:flex;flex-direction:column;gap:9px}
.doc .hi h2{font-size:var(--fs-3xl)}
/* Le bouton de fermeture du PANNEAU FOYER, et lui seul.
Ecrit `.close{position:absolute}` il visait aussi celui de la fiche, qui
vit dans le flux du bandeau. Tant que le bandeau etait `position:relative`
l'ecart passait inapercu ; sa restructuration en grille l'a supprime, et
le bouton s'est ancre sur la fenetre - il flottait au-dessus du document,
hors du bandeau sombre, a 16 px du haut de l'ecran.
Deuxieme collision de la meme famille que footer{} : un selecteur trop
large qui atteint un composant qu'il n'a jamais vise. On l'ancre a son
parent, et la fiche redefinit explicitement ce qu'elle attend. */
.foyer-form .close{position:absolute;top:16px;right:18px;background:none;
border:0;font-size:var(--fs-xl);color:var(--warm);cursor:pointer;
line-height:1;padding:0 4px}
.two{display:flex;gap:10px;flex-wrap:wrap}
.two>div{flex:1 1 190px;border-radius:10px;padding:9px 12px}
.declared{background:var(--cream2)}
.detected{background:var(--paper);border:1.5px solid var(--terraLt)}
.two b{display:block;font-size:var(--fs-base);font-weight:600;margin-top:2px}
.verdict{margin:0;padding:16px 28px 18px;background:var(--greenLt);
font-size:var(--fs-base)}
.verdict .vh{display:flex;align-items:center;gap:12px}
/* Aucune raison etablie : le vert promettrait une verification qui n'a pas eu
lieu. On passe a l'ambre, la couleur de l'inconnu dans tout le produit. */
.verdict.muet{background:var(--goldPale)}
.verdict.muet .ring{background:var(--gold)}
/* Les raisons verifiees, c'est le coeur de la promesse : « on lit chaque
annonce pour vous ». Elles etaient calculees par le moteur et jamais
montrees. Chacune porte la coche-griffe. */
ul.raisons{list-style:none;margin:14px 0 0;padding:0;display:grid;
gap:7px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
ul.raisons li{display:flex;align-items:flex-start;gap:8px;font-size:var(--fs-base);
line-height:1.45;padding:7px 11px;border-radius:var(--r-sm);background:var(--paper)}
ul.raisons li.oui{color:var(--ink2);box-shadow:inset 3px 0 0 var(--green)}
ul.raisons li.non{color:var(--ink2);box-shadow:inset 3px 0 0 var(--terra)}
ul.raisons li.ask{color:var(--ink3);box-shadow:inset 3px 0 0 var(--gold)}
ul.raisons li .t::first-letter{text-transform:uppercase}
.mini-cg{flex:none;width:14px;height:14px;color:var(--green);margin-top:2px}
.mini-cg .cg{width:14px;height:14px}
ul.raisons .b{flex:none;width:14px;text-align:center;font-weight:700;
font-family:var(--ff-mono);font-size:var(--fs-sm);
margin-top:1px}
ul.raisons li.non .b{color:var(--terra)}
ul.raisons li.ask .b{color:var(--gold)}
.verdict .ring{width:30px;height:30px;border-radius:var(--r-circle);background:var(--green);
color:var(--paper);display:flex;align-items:center;justify-content:center;
flex:none}
.verdict .cg{width:16px;height:16px}
.verdict b{font-family:var(--ff-titre);font-size:var(--fs-lg);font-weight:600}
.verdict span{color:var(--ink3);font-size:var(--fs-base)}
.doc .bd{padding:22px 28px 28px}
.doc .bd h3{font-size:var(--fs-xl);margin-bottom:14px}
.doc .bd h3 span{font-family:var(--ff-mono);
font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;
color:var(--warm);margin-left:10px}
table.crit{width:100%;border-collapse:collapse;font-size:var(--fs-base)}
table.crit td{padding:11px 12px 11px 0;border-bottom:var(--tr);
vertical-align:top}
table.crit tr:last-child td{border-bottom:0}
/* Le libelle est lu, pas debogue : « Entente chats » et non « ok_chat ».
Le mono reste pour les micro-libelles, pas pour le contenu. */
td.k{width:auto;min-width:170px;font-weight:600;font-size:var(--fs-base);
color:var(--ink);white-space:nowrap}
td.k .dot{display:inline-block;width:6px;height:6px;border-radius:var(--r-circle);
margin-right:8px;vertical-align:middle}
/* Cette colonne n'apparait que si elle porte une citation : voir
front_client.fiche(). Elle n'a donc plus qu'un seul contenu. */
td.q{color:var(--ink3);font-style:italic}
td.v{width:120px;text-align:right;font-weight:600;white-space:nowrap}
td.v small{display:block;font-weight:400;font-size:var(--fs-xs);color:var(--warm);
font-style:normal}
tr.unknown td{background:var(--goldPale)}
tr.unknown td.q{font-style:normal;color:var(--gold)}
.contact{margin-top:22px;background:var(--paper);border:var(--tr);
border-radius:var(--r-md);padding:16px 18px;display:flex;gap:18px;
align-items:center;flex-wrap:wrap}
.contact .t{flex:1 1 260px;font-size:var(--fs-base);color:var(--ink3)}
.contact .t b{display:block;color:var(--ink);font-size:var(--fs-base)}
.btn{border:0;border-radius:var(--r-pill);padding:12px 24px;font:inherit;
font-size:var(--fs-base);font-weight:600;cursor:pointer;background:var(--terra);
color:var(--paper);text-decoration:none;display:inline-block}
.btn:hover{background:var(--terraDk)}
/* zero resultat */
.zero{background:var(--paper);border:var(--tr);border-radius:var(--r-lg);
padding:30px 32px;max-width:660px;margin:16px 0 60px;box-shadow:var(--sh-3)}
.zero h2{font-size:var(--fs-2xl);margin-bottom:8px}
.zero h2 em{font-style:italic;color:var(--terra)}
.zero p{color:var(--ink3);margin:0 0 18px;font-size:var(--fs-md)}
.widen{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
gap:9px}
.widen button{width:100%;text-align:left;background:var(--cream);
border:var(--tr-fort);border-radius:var(--r-md);padding:12px 15px;
font:inherit;font-size:var(--fs-base);color:var(--ink2);cursor:pointer;display:flex;
gap:12px;align-items:center;transition:var(--t-court) var(--e)}
.widen button:hover{border-color:var(--terraLt);background:var(--paper)}
.widen .g{background:var(--greenLt);color:var(--greenDk);font-weight:700;
border-radius:var(--r-pill);padding:2px 10px;font-size:var(--fs-base);white-space:nowrap}
/* separateur-griffure */
.scratch{height:12px;margin:8px 0 0;position:relative;overflow:hidden}
.scratch::before{content:"";position:absolute;inset:0;background:
repeating-linear-gradient(74deg,var(--cream3) 0 2px,transparent 2px 14px)}
/* Le pied de PAGE, et lui seul.
Ecrit `footer{...}` il visait tous les