/*
Theme Name: Pas ici
Description: Thème du site « Violences — Pas ici » de la Ville de Vernier, au pixel de la maquette Figma V3 de Margaux Michel (alveo.design). Interactions subtiles et modernes dans l'esprit de la maquette (règle gravée 28/07 : 100 %, pas 99 %).
Author: alveo.design
Version: 1.9.102
Text Domain: pasici
*/
/* 1.9.75 (07/09, 20h10) : LE DESSIN TOUCHE ENFIN LE BAS DE LA BANDE — le dernier des trois
   nombres qui avaient glisse. La 1.9.73 puis la 1.9.74 ont ramene la bande a 402/513, la
   maquette ; il restait 35 px sous le dessin, mesures au navigateur sur « Arracher un voile »
   (bande 0..513, `.fiche-blob` top 111 h 402, `::before` -36..513, background-position 0px 47px,
   size 700px auto, PNG 1400x934 donc 467 peints : bas du dessin 478 contre 513). L'ecart vient
   de `top:-147px`, calcule pour une boite dont le HAUT etait a 145 — elle est a 111 depuis que
   `.fiche-blob` porte `margin-block-start:-34px`, qui annule le padding haut du cadre. Pour un
   haut a 111, la valeur qui pose l'aplat au y=-2 de la maquette est **-113**. Corrige sur les
   fiches posees (`--place`) et sur l'image du mode `--libre`, qui portait le meme -147. */

/* 1.9.74 (07/09, 20h10) : LA BOITE DU DESSIN NE POUSSE PLUS LA BANDE A 437. La 1.9.70 lui
   donnait min-height 403 (la hauteur du slot Figma) ; avec les 34 px de remplissage haut du
   cadre, la bande faisait 437, pas 402, et il restait 35 px de forme sous chaque dessin
   (mesure Stephane sur trois fiches, le meme ecart partout : un ecart CONSTANT est une
   constante du theme, pas un dessin). 402 - 34 = 368 : la bande retombe a 402, le bas des
   dessins de Margaux (dy + dh = 402 dans les boites relevees) touche le bas de la bande. */

/* 1.9.73 (07/09, 19h55) : 402, PAS 436. La 1.9.72 donnait au cadre de bande min-height 436 en
   additionnant les 34 px de remplissage haut aux 402 de la maquette ; or le cadre est en
   border-box, le remplissage est DANS la hauteur : la bande faisait 34 px de trop et les
   dessins qui s'arretent a 402 chez Margaux (« Les cliches racistes ») laissaient un liseré
   de forme dessous. La bande fait 402, comme la V4 sous le menu. */

/* 1.9.72 (07/09, 19h45) : LA BANDE FAIT LA HAUTEUR DE LA MAQUETTE, ET LE BLOC DE TEXTE S'ANCRE
   EN HAUT (Stephane, « Arracher un voile » apres la 1.9.71 : du rose sous le dessin). La 1.9.65
   calait la colonne EN BAS avec 132 px sous le titre : juste pour un titre de deux lignes (la
   seule fiche mesuree), faux des trois lignes et deux etiquettes, ou la colonne depasse 403 px
   et pousse la bande plus bas que les 402 de la maquette ; le dessin, ancre par le haut depuis
   la 1.9.71, ne l'atteint plus. Mesure V4 sur trois fiches : le HAUT du bloc est fixe
   (etiquette a 89 px sous le menu), le bas varie avec le titre, et la bande fait TOUJOURS 513,
   soit 402 sous le menu. Remede : la colonne s'ancre en haut, sans remplissage bas ; le cadre
   de bande prend min-height 436 (34 de remplissage + 402), donc la bande ne grandit qu'au-dela
   de la maquette, et le dessin, place a son dy, arrive au bas ou deborde comme chez Margaux. */

/* 1.9.71 (07/09, 19h30) : LE DESSIN SE POSE OU LA MAQUETTE LE POSE, PLUS AU BAS PAR DEFAUT
   (Stephane, « Arracher un voile » : « trop haut ici aussi, pourquoi ? »). Dans la V4, ce
   dessin commence sous le menu (dy du releve) et DEBORDE de la bande par le bas, coupe par le
   cadre. L'ancrage « bottom » (1.9.45) prenait le bas du dessin et le collait au bas de la
   bande : tout le dessin remontait de la hauteur du debordement. Le « trou sous le dessin »
   que la 1.9.45 voulait fermer avait une autre cause, la boite de 403 px qui ne s'etirait pas,
   reglee par la 1.9.70 : la boite couvre maintenant toute la bande, la forme aussi, et un
   dessin ancre par le haut n'a plus de trou dessous (la bande coupe ce qui depasse, exactement
   comme le cadre Figma). Remede : `background-position: dx dy` pour toutes les fiches posees
   (le comportement de l'exception `--haut`, qui devient la regle), et l'img du mode `--libre`
   ancree par `top` de la meme facon. Un dessin plus court que la bande garde alors l'espace
   que Margaux lui laisse : c'est la maquette qui decide, pas une regle du theme. */

/* 1.9.70 (07/09, 19h) : LE DESSIN COLLE ENFIN AU BAS, SUR TOUTES LES FICHES (Stephane : « toutes
   les fiches ont leur image mal placee, elle doit etre collee en bas »). La 1.9.68 disait
   `align-self:stretch` a la boite, et la boite ne s'etirait PAS : `.fiche-blob` porte
   `height:403px`, et une hauteur fixe rend l'etirement inoperant (grille : stretch ne
   s'applique qu'a une hauteur auto). Le dessin restait donc ancre au bas d'une boite de 403,
   pendant que la bande, plus haute depuis la 1.9.65 (colonne calee en bas + etiquettes), le
   depassait dessous. C'etait invisible tant que la bande faisait exactement 437 = 34 + 403.
   Remede, mesure et pas devine : au-dessus de 900 px la boite passe en `height:auto;
   min-height:403px` — elle s'etire jusqu'au bas de la bande, l'aplat garde son `top:-147px`
   (mesure depuis le haut, inchange), et `bottom:0` de l'img comme du fond `--place` retombe
   sur le bas de la bande. L'exception `--haut` (1.9.47) reste ancree par le haut. */

/* 1.9.69 (07/09) : RECHERCHE COUPEE POUR L'OUVERTURE (Stephane : « enleve la recherche pour
   demain, desactive-la, et rappelle-moi mercredi »). Coupe-circuit dans header.php : l'option
   `pasici_recherche_active` ('1' pour afficher ; absente ou '0' = rien). Aucune regle CSS ne
   change : la loupe, le champ et les suggestions ne sont simplement plus rendus. Le JS de
   functions.php teste l'existence du bouton avant d'agir (`if(!b)return`), donc il se tait.
   Rallumer : wp option update pasici_recherche_active 1. Rappel arme pour mercredi 09/09.

/* 1.9.68 (07/09) : « le visuel doit toujours etre colle en bas, comme ici, verifie partout »
   (Stephane, capture de « Violence entre les parents », fleche vers le bas de la bande).
   La regle existait depuis la 1.9.45 — pour les SEULES fiches dont le dessin est pose par la
   chaine Figma (`.fiche-blob--place`, boite etiree jusqu'au bas). Les autres gardaient l'img
   de la 1.9.16 : `bottom:0` d'une boite de 403 px NON etiree, donc collee au bas de la boite,
   pas au bas de la bande. Tant que la bande faisait 437 px ca ne se voyait pas ; la 1.9.65
   (colonne de texte calee en bas avec 132 px sous le titre, etiquettes sur deux lignes) a
   rehausse la bande sur les titres longs, et l'ecart est apparu sous le dessin.
   Remede : la boite s'etire pour TOUTES les fiches (align-self:stretch), plus seulement
   `--place`. L'aplat ne bouge pas (son `top:-147px` se mesure depuis le haut de la boite) et
   l'img `bottom:0` retombe sur le bas de la bande. Une seule exception reste, ECRITE (1.9.47,
   meta `pasici_dessin_haut`, « L'entourage doit etre sur… ») : collee en bas, la zone sombre
   du dessin passe sous le menu et le rend illisible. Elle se retire en supprimant la meta.

/* 1.9.67 (07/09) : le bouton « Quitter le site » mene a https://www.google.ch/ (Stephane :
   « lien pour le bouton quitter google.ch »), en remplacement de la meteo choisie le 04/09.
   Deux endroits dans footer.php, le href et le `location.replace` de la touche Echap : les deux.

/* 1.9.66 (07/09) : « par dessus … toujours par dessus dans ces fiches » (capture Stephane, fiche
   « Derriere l'ecran les mots blessent » : la forme grise coupait l'etiquette « VIOLENCE
   VERBALES, PSYCHOLO… »). Meme cause que le titre en 1.9.31/1.9.38 : la forme (`.fiche-blob::before`,
   z-index 0) et le dessin (img, z-index 1) viennent APRES la colonne dans le document et gagnent
   sur tout ce qui n'a pas son propre niveau. Le titre avait recu z-index:2 ; « Retour » et les
   etiquettes ne l'avaient pas. Ils passent au meme niveau que le titre : quoi que fasse la
   largeur, rien de la colonne ne passe plus sous la forme. La 1.9.65 (retour a la ligne dans
   la largeur du titre) reste : elle evite le chevauchement, celle-ci decide qui gagne s'il a lieu.

/* 1.9.65 (07/09) : « attention pour visibilite on descend cela » (capture Stephane, fiche
   « Sa tenue, son choix », fleches sur les etiquettes et le titre). Deux defauts, une cause :
   depuis le retour de « ← Retour » + etiquettes (1.9.61), la colonne de texte a grandi et,
   centree verticalement, elle est MONTEE ; et la rangee d'etiquettes n'avait pas de largeur,
   elle filait sous la forme menthe (« VIOLENCES SEX » coupe). MESURE V4 (Page-detail) : le
   titre occupe y=261..381 dans une bande de 111..513, soit 132 px sous lui ; l'etiquette est
   a y=200, dans la largeur du titre (104..563). Remede au noeud : la colonne s'aligne en BAS
   du bandeau avec 132 px sous le titre (92 + les 40 du h1) — quel que soit le nombre de lignes,
   c'est le bas du titre qui est fixe, comme dans la maquette ; et les etiquettes prennent la
   largeur du titre (459 px) et passent a la ligne au lieu de passer sous le dessin. En
   colonne unique (<= 900 px), rien ne change.

/* 1.9.64 (07/09) : DEUX CAPTURES DE STEPHANE SUR LA RECHERCHE, sur violences-pas-ici.ch.
   ① « attention z-index » : sur une fiche, le titre menthe du bandeau passait PAR-DESSUS la
   liste de suggestions. Cause : `body.single-vignette .chapeau` est en z-index:2 (1.9.2x, pour
   passer devant la forme) et `.bandeau-fiche h1` AUSSI en z-index:2 (1.9.31), plus loin dans le
   document. Le z-index:50 des suggestions vit DANS le contexte du chapeau : il ne peut rien
   contre un h1 qui bat le chapeau lui-meme. Remede : le chapeau porte son propre contexte
   (position:relative; z-index:30) sur TOUTES les pages, au-dessus de tout contenu de page ;
   rien ne bouge, la liste passe devant. Le bouton Quitter (fixed, 9000) reste au-dessus.
   ② « loupe recherche pas trop visible » : icone menthe sans fond, posee dans la marge sur le
   cercle bleu clair du heros. Fond OPAQUE menthe, icone prune, vert au survol : meme paire que
   le bouton CHERCHER, lisible sur prune comme sur bleu.

   1.9.63 (04/09) : sur grand ecran, la loupe sort de la rangee du menu et se pose dans la marge
   a droite du cadre ; le menu retrouve le bord droit, comme dans la maquette.

   1.9.62 (04/09) : le bouton « Quitter le site » prend le design de Margaux (maquette HP V4) :
   pastille rose, capitales serrees, icone de sortie, sans la mention de la touche.

   1.9.61 (04/09, apres-midi) : retours WhatsApp de Margaux. Sur les fiches, « ← Retour » et
   les etiquettes de categorie reviennent (page-detail V4 mise a jour, sa demande). Les logos
   et les noms des partenaires sont des liens. Nesrine : les trois temoignages d'une fiche ont
   une case d'ecriture (boite « Temoignages » de l'ecran de la fiche).

   1.9.60 (04/09) : l'ancre des structures d'aide (#s-<id>) portait l'identifiant de la PAGE
   (get_the_ID() dans une boucle qui ne passe pas par the_post()) : toutes les fiches avaient
   « s-9 ». Elle porte l'identifiant de la structure, comme la recherche l'attend.

   1.9.59 (04/09) : RECHERCHE (visio). Loupe dans le chapeau, champ avec suggestions
   (point REST pasici/v1/recherche), page de resultats search.php listant pages, articles,
   fiches et structures d'aide. Les structures menent a leur ancre sur « Trouver de l'aide ».

   1.9.58 (04/09) : audit des liens. Les boutons « Contact » d'Espace pro et de Partenaires
   ecrivent au service (la page Contact est cachee, ils menaient a un 404). Le commentaire qui
   citait l'ancienne adresse de preproduction est neutralise.

   1.9.57 (04/09, apres la visio) : le bouton Quitter mene a la meteo (meteosuisse) et non a
   Google, comme violencequefaire.ch ; le logo n'a plus d'effet au survol (Margaux).

   1.9.56 (04/09) : menu mobile sur deux lignes, plus de lien tranche au bord (« TROUVER DE »
   a 375 px). La rangee defilait a l'horizontale sans indice visuel.

   1.9.55 (04/09) : la ligne de credit du pied porte deux liens, « alveo » vers alveo.design et
   « Ville de Vernier » vers vernier.ch (Stephane, capture). Meme encre, soulignement fin.

   1.9.54 (04/09 midi) : BOUTON « QUITTER LE SITE » en bas a droite (Stephane, modele
   violencequefaire.ch ; Nesrine : « bouton echappatoire »). Clic ou touche Echap : la page est
   remplacee par Google, sans trace dans l'historique du bouton precedent. Pastille rose de la
   charte, encre prune, libelle court sur telephone.

   1.9.53 (04/09 matin) : RETOURS DE MARGAUX (mails 09:12 a 09:35). Un seul bandeau defilant,
   celui du pied (decision d'equipe, redemandee par Nesrine). « En cas d'urgence » centre.
   Le carrousel de l'accueil revient au debut quand on filtre (la premiere carte restait coupee).
   Le titre « situations non urgentes » accepte un retour a la ligne (ECOUTE ET / CONSEILS).
   Quatre tailles de texte dans l'editeur des fiches.
   Sous-pages Agir : picto au bord du cadre, colonnes 540/475 avec 65 px (mesure V4).

   1.9.52 (03/09 soir) : PAGE CONTACT CACHEE (Nesrine, test avec les jeunes : « nous craignons
   de recevoir des demandes d'aide, alors que nous ne sommes pas formees pour cela »). La page
   passe en privee, et le bouton « Contact » du pied ne s'affiche que si elle est publiee :
   un bouton vers un 404 sur chaque page serait pire que la page. Le contact de la Ville reste
   dans le pied (022 306 06 70, scs@vernier.ch).

   1.9.51 (03/09 soir) : PREMIER LOT DES RETOURS DE NESRINE (mail de 19h19), sur le site
   MIGRE (violences-pas-ici.ch) : « En cas d'urgence » devient une case (urg_titre) ; le bloc
   « Tu cherches de l'aide ? » lit deux cases de l'accueil (cta_texte, cta_142), la virgule
   apres 7j/7 disparait ; les quatre logos non urgents deviennent des liens ; les volets se
   referment au retour sur la page (pageshow) ; et sur mobile le titre d'une fiche d'aide se
   distingue enfin de son texte : mesure a 375 px, titre 17px/500 contre texte 16px/500 —
   indiscernables, c'est exactement ce qu'elle decrivait.

   1.9.50 (03/09) : ☠️ LA 1.9.49 A DEPLACE QUATORZE FICHES EN LA POSANT. Elle rangeait l'ordre
   general dans `menu_order`, le champ que WordPress prevoit pour cela, en pariant qu'il valait
   0 partout tant que personne n'avait range. Mesure faite APRES la pose, page servie comparee
   a sa version d'avant : 14 des 50 fiches avaient bouge. Des valeurs non nulles trainaient en
   base, venues d'aucun job du depot. L'ordre general vit desormais dans une liste d'ID
   (`pasici_ordre_general`), comme les domaines, et la requete rend l'ordre de saisie tel quel :
   une liste vide ne peut rien deplacer. Le banc interdit desormais le tri sur menu_order.
   La lecon est plus large que ce module : « ce champ est a zero » est une SUPPOSITION sur une
   base qu'on n'a pas ecrite, et elle se controle en comparant la page servie, pas en relisant.

   1.9.49 (03/09) : L'ORDRE DES FICHES D'AIDE, DOMAINE PAR DOMAINE. Nesrine Ghulam (Ville de
   Vernier, 02/09) : « pour la categorie discrimination raciale, les 3 dernieres adresses sont
   celles que l'on souhaiterait avoir en premier ». Les 50 fiches sortaient dans leur ordre de
   SAISIE, et rien dans l'administration ne permettait d'en changer.
   Ce n'est pas un tri general : le Centre LAVI est dans SIX domaines, le descendre pour la
   discrimination raciale l'aurait descendu en aide juridique et chez les seniors, ou il doit
   rester en tete. Chaque domaine porte donc son ordre (meta du terme), l'ordre general reste
   le `menu_order` des fiches, et l'ecran « Ordre d'affichage » (pasici-rangement.php) range les
   deux au glisser-deposer, ou aux fleches pour qui navigue au clavier.
   ⚠️ La pose ne deplace RIEN : menu_order vaut 0 partout tant que personne n'a range, et le
   tri secondaire par date rend exactement l'ordre servi jusqu'ici.

   1.9.48 (01/09) : LES DEUX EXCEPTIONS PERDAIENT CONTRE LA REGLE GENERALE. Meme specificite
   (0,2,1), et la regle qui masque l'image vient apres dans la feuille : a egalite, le dernier
   gagne. Sur « Les emotions », la dispense retirait bien le dessin de la forme mais ne
   rallumait pas l'image — plus de dessin du tout. Qualifier sur les DEUX classes porte la
   specificite a (0,3,1) : les exceptions gagnent, et ne dependent plus de l'ordre des blocs.
   Une exception qui ne tient que par sa position dans le fichier est une dette.

   1.9.47 (01/09) : L'EXCEPTION A L'ANCRAGE PAR LE BAS, pour « L'entourage doit etre sur ».
   Stephane : « descends l'image ici pour qu'on puisse lire le menu ». Son dessin fait 658x822,
   bien plus haut que la bande : colle en bas, son sommet remonte a -308 et une zone sombre
   passe sous les liens. La maquette le pose a dy=-65, ou c'est le coussin clair qui s'y trouve.
   On rend son calage releve a cette fiche, par une meta — pas par un reglage a l'estime.

   1.9.46 (01/09) : L'EXCEPTION AU DECOUPAGE, POUR « Les emotions n'ont pas de genre ».
   Stephane : « exception ici, l'image deborde a droite, on a besoin de la voir ». Dans la V4 le
   personnage de droite sort de la forme et va jusqu'au bord du cadre ; decoupe, son visage est
   ampute. Le PRINCIPE ne change pas — un dessin est decoupe par la forme — mais une meta
   (`pasici_dessin_libre`) en dispense une fiche, et le module DIT pourquoi et ce qui se passe a
   la place. Une exception legitime s'ecrit ; c'est le silence qui est interdit.

   1.9.45 (01/09) : TOUTES LES IMAGES COLLEES EN BAS A 0 (Stephane). Le dessin doit toucher le
   bas de la bande ET rester decoupe par la forme — les deux tiennent ensemble en etendant la
   BOITE de la forme jusqu'en bas tout en EPINGLANT le masque a `0 0` / `753x630`. Le masque
   etant ancre en haut a gauche et de taille fixe, la forme ne bouge pas d'un pixel ; seule la
   boite grandit, et le dessin se cale sur son `bottom`. Sans cet epinglage, l'heritage
   `center/contain` deformerait la forme — c'etait le defaut de la 1.9.40.

   1.9.44 (01/09) : LE DESSIN EST PEINT DANS LA FORME. Stephane : « pose l'image sous le fond
   bordeau ». La forme `.fiche-blob::before` est deja masquee par forme-hero.svg : en y peignant
   le dessin comme couche de fond, il herite du masque et ne peut plus deborder — le probleme
   devient impossible au lieu d'etre corrige. Un seul element, aucun empilement a raisonner.
   Les deux tentatives de masque precedentes sont annulees : sur le conteneur (1.9.40) il
   decoupait un rectangle, sur l'image (1.9.43) il effacait tout, aplat compris.

   1.9.43 (01/09) : LE DESSIN EST DECOUPE PAR LA FORME, DONC IL NE DEBORDE PLUS SUR LE PRUNE.
   Question de Stephane : « est-ce que l'image est sous le fond bordeau ? » Non — le fond d'un
   element se peint sous ses descendants, et le dessin en est un. Le masque va sur l'IMAGE, ou
   son calage se deduit des nombres du releve (l'aplat est a -dx,-dy de l'image, en 753x630) et
   ne depend d'aucune hauteur, contrairement a la 1.9.40 qui le posait sur le conteneur.

   1.9.42 (01/09) : LE DESSIN RETROUVE LE PLACEMENT DE LA MAQUETTE, ET J'ANNULE MON PROPRE
   ANCRAGE PAR LE BAS. Stephane, comparaison maquette/site sur « Violence entre les parents » :
   sur le site le dessin deborde de la forme et parait plus gros.
   La maquette pose ce dessin a dx=0, dy=90 dans son aplat, en 760x506. Son bas tombe donc a
   594 quand la bande s'arrete a 513 : elle le COUPE de 81 px, et c'est pour ca que les pieds du
   garcon y sont rognes. La 1.9.39 l'ancrait par le BAS — ma reponse a « descends jusqu'au
   bas » — donc au lieu d'etre coupe de 81 px il etait POUSSE jusqu'au bord, hors de la forme.
   Le releve donne dy fiche par fiche : on le sert. Un placement mesure vaut mieux qu'un
   ancrage qui repond a un symptome.

   1.9.41 (01/09) : LE MASQUE DE LA 1.9.40 EST RETIRE — IL CASSAIT L'IMAGE SUR LES 14 FICHES.
   Capture Stephane : « l'image est cassee, remets comme avant ». Le masque decoupait un
   RECTANGLE au lieu de la forme. Ma contre-epreuve etait verte parce qu'elle mesurait ce que
   le masque RETIRAIT (337 809 pixels, 100 % du dessin) et jamais ce qui RESTAIT.

   1.9.40 (01/09) : LA FORME SERT DE MASQUE — LE DESSIN NE DEBORDE PLUS SUR LE PRUNE.
   Stephane : « la forme dans le background prune doit etre propre ». Le bras et les pieds du
   personnage sortaient de l'aplat sur le fond prune. C'est aussi l'explication du releve : les
   dessins font 658x822, 634x423, 611x408 pour un aplat de 753x630 — ils sont dessines plus
   grands PARCE QU'ILS SONT MASQUES. Le masque va sur le conteneur, a la boite exacte de
   l'aplat, donc il decoupe le fond et l'image d'un seul geste.

   1.9.39 (01/09) : LE DESSIN DESCEND JUSQU'AU BAS DE LA BANDE, ET LA PASTILLE DE CATEGORIE
   PART. Deux demandes de Stephane sur la meme capture. Le dessin etait ancre par le haut
   (--dy du releve) : son bas tombait ou il tombait, et l'ecart avec le bas de la bande
   grandissait avec la hauteur du titre. La maquette, elle, fait COINCIDER le bas du dessin et
   le bas de la bande (image a y=111 sur 403 dans une bande de 513) : l'ancrage passe donc en
   bas, ce qui donne le bon resultat a toute hauteur, sans nombre a accorder.
   La pastille de categorie existe dans la maquette (Frame 6, 252x46, #A0DBC4, y=200) : la
   retirer est un ARBITRAGE de Stephane contre le releve, pas une correction d'ecart.

   1.9.38 (01/09) : LE TITRE DE FICHE PASSE AU-DESSUS DU DESSIN. Capture Stephane sur
   « Violence entre les parents » : la troisieme ligne du titre disparaissait sous l'illustration
   posee en 1.9.35. Le h1 etait en z-index:1 (correctif 1.9.31, pour passer devant l'aplat) et le
   dessin aussi — a niveau egal, le dernier peint dans le document gagne, et c'est le dessin.
   Le titre passe a 2. Meme faute-mere qu'en 1.9.31, un cran plus loin : on regle un empilement
   contre UN voisin et on oublie celui qui arrive ensuite.

   1.9.37 (01/09) : LA FORME DES TROIS PAGES « AGIR » MONTE DANS LA BANDE PRUNE. Capture
   Stephane, trois fleches rouges sur son sommet. La V4 la pose 14 px au-dessus du bas de la
   bande ; le site la servait 24 px en dessous. 38 px d'ecart, IDENTIQUES sur les trois pages —
   c'est cette identite qui prouve qu'on corrige une regle et non un cas. Marge -40 -> -78.

   1.9.36 (01/09) : LE LOGO DE LA VILLE PASSE EN COULEURS DANS LE PIED. Capture Stephane :
   « le logo du footer a changer ». Le pied servait le SVG en currentColor, donc monochrome. Le
   logo officiel, exporte du nœud `image 7` de la HP de la maquette en 3x, mesure 447x135 et
   porte trois teintes reelles : #000000, #C4281A et #229258. Le SVG monochrome reste en repli.

   1.9.35 (01/09) : LES FICHES RETROUVENT LA COMPOSITION DE LA V4, PAR LE BON CHEMIN. La
   1.9.33 avait tente de faire monter la SCENE cuite derriere le menu ; sa propre mesure l'a
   condamnee (dessin sous les liens, encre prune a 1,00:1). La V4 ne compose pas une image
   cuite : un aplat de couleur UNIE, et le dessin dedans. Le releve confirme la regularite au
   pixel — les 11 aplats font TOUS 753x630 a (583,-2) — et donne, fiche par fiche, la place du
   dessin. L'aplat etant une couleur connue, le contraste de l'encre du menu se CALCULE au lieu
   de se parier : il passe le seuil AA sur les 11, de 5,96 a 10,92:1.
   Trois fiches restent en diagnostic (leur dessin n'est pas trouve dans l'aplat) et deux n'ont
   pas de bande au Style Guide : elles gardent leur rendu actuel, et c'est dit plutot que taise.

   1.9.34 (01/09) : LA 1.9.33 EST RETIREE, ET C'EST SA PROPRE MESURE QUI L'A CONDAMNEE.
   Faire monter l'image cuite derriere le menu retrouvait la composition de la V4, mais mettait
   le DESSIN sous les liens, pas l'aplat plat de la maquette. Pixels lus sur six fiches : sous
   deux liens d'« Amour ne rime pas avec controle », #242424 et #333333 — encre prune a 1,23:1
   et 1,00:1. J'avais remis un menu invisible, sur une autre fiche que celle que je venais de
   reparer. Et mon controle avait failli le laisser passer : il comparait a UNE couleur
   (#5A1C3A) au lieu de CALCULER le contraste, et affichait « sur l'aplat » sur du noir.
   Aucune encre ne sauve ce cas : sur #BFBFBF la menthe tombe a 1,18, sur #242424 le prune a
   1,00. La composition de la V4 demande un RE-EXPORT des scenes aux bornes de l'aplat, pas un
   reglage CSS. En attendant, l'image reste sous l'en-tete et le menu garde 7,4:1 partout.

   1.9.33 (01/09) : LES 14 FICHES RETROUVENT LA COMPOSITION DE LA MAQUETTE. Stephane, deux
   captures cote a cote : dans la V4 l'aplat monte jusqu'en haut de la bande et le menu est
   pose DESSUS, en prune ; sur le site il commencait sous l'en-tete. Le visuel de ces fiches
   n'est pas une forme CSS mais une image cuite (aplat + dessin ensemble) : elle fait 1280x660
   en naturel, soit exactement la largeur de bande de la maquette, et le theme l'enfermait
   dans une colonne de 411 px a partir de y=111. Elle passe en calque, `top:0`, taille
   naturelle — la V4 coupe l'aplat de 117 px en bas, on en coupe 146, meme geste a 5 % pres.
   L'encre du menu suit : `:has(.fiche-blob,.fiche-scene)` couvre les deux familles de fiches.
   ⚠️ A MESURER APRES POSE, et c'est ecrit ici pour que ce ne soit pas oublie : que chaque lien
   du menu tombe bien DANS l'aplat sur les 14 fiches. A 1280, le premier lien est a x=608 et
   l'aplat de la maquette commence a x=583 : 25 px de marge. Un lien qui deborderait a gauche
   retomberait en prune sur prune — le defaut meme qu'on vient d'eteindre.

   1.9.32 (01/09) : LE MENU DES FICHES ETAIT PEINT ET INVISIBLE, PRUNE SUR PRUNE. Mesure au
   navigateur sur /vignette/derriere-lecran-les-mots/ : `.fiche-blob` = null, et sous chaque
   lien la pile rend `.bandeau-fiche[rgb(90,28,58)]` pour une encre `rgb(90,28,58)`. 1,0:1.
   La regle qui met l'encre en prune est juste — la V4 pose les liens en prune SUR LA FORME
   jaune — mais elle supposait la forme toujours presente. Sur une fiche dont le visuel est en
   PAYSAGE, le gabarit ne pose pas `.fiche-blob` du tout. `:has(.fiche-blob)` fait porter la
   regle par le fait au lieu de l'hypothese ; sans forme, le menu reste menthe sur prune,
   7,4:1. Contre-epreuve dans un vrai Chromium, feuille servie contre feuille corrigee :
   la servie rend l'encre et le fond IDENTIQUES sur une fiche paysage, la corrigee non.
   Et le pied : le telephone, le courriel et l'adresse etaient ecrits EN BLANC SUR BLANC.
   La carte Vernier a perdu son fond prune sans que `color:var(--blanc)` suive — une
   demi-migration, invisible par construction. Le « · » solitaire de la capture de Stephane
   etait le separateur entre deux liens qu'on ne voyait pas. Le pied de la HP fait loi sur
   tout le site (arbitrage Stephane, 01/09) : ni pave prune ni bouton rose, malgre les trois
   ecrans internes du releve qui les portent.

   1.9.31 (01/09) : LE TITRE DE FICHE PASSE ENFIN AU-DESSUS DE LA FORME. Capture Stephane,
   « Derriere l'ecrar » : la forme grise recouvrait la fin de la premiere ligne. La cause
   n'etait pas le calage — c'etait l'ordre de peinture. `.fiche-blob::before` vient apres le
   h1 dans le document et gagne a z-index egal. La 1.9.25 avait deplace la colonne de 17 px
   pour ecarter les deux ; c'etait juste au nœud, mais insuffisant par nature : tant que le
   titre n'a pas son contexte d'empilement, tout allongement de texte le fait repasser
   dessous. z-index:1, rien ne bouge, le recouvrement ne peut plus revenir. */
/* 1.9.30 (01/09) : LE MENU DES FICHES ETAIT PRUNE SUR PRUNE — suite immediate de la 1.9.29.
   Signale par Stephane. Sur la fiche, l'encre du menu est prune A DESSEIN : la forme jaune
   passe derriere lui (releve : menu a y51 en #5A1C3A, forme a y-2 en #FEEFAC). En portant le
   retrait du bandeau de 85 a 111 sans toucher au `top` de la forme, je l'ai fait descendre de
   +6 a +32 : le menu est repasse sur le fond prune. Top recalcule poste par poste, 145 - 2 =
   -147, la valeur du nœud. */
/* 1.9.29 (01/09) : LE MENU AVAIT DISPARU DES FICHES — regression de ma 1.9.21, signalee par
   Stephane. Le bandeau de fiche remonte sous le chapeau transparent par un margin negatif
   CABLE EN DUR sur la hauteur du chapeau (85). En portant ce chapeau a 111 pour absorber le
   retrait de la barre haute, ce -85 n'a pas suivi : 26 px de decalage, la navigation sortait
   de la forme coloree et retombait sur le fond prune, en encre prune. Invisible. Les deux
   valeurs sont maintenant nommees ensemble, avec la raison. */
/* 1.9.28 (01/09) : TREIZE ECARTS DE LA SECONDE PASSE, tous confrontes au nœud V4 et juges.
   ⚠️ LE PLUS IMPORTANT EST UNE CORRECTION DE MA PROPRE ERREUR. La 1.9.19 avait porte le logo
   du pied a 46,9 px PARTOUT, sur la foi du seul ecran que j'avais regarde. Releve refait sur
   les QUINZE : la V4 dit 40,37 sur treize ecrans, 46,86 uniquement sur la HP. Le defaut
   revient a 40,4 et l'accueil garde son 46,9. Generaliser une valeur lue sur un ecran est
   exactement la faute que ce depot nomme depuis le debut : on mesure la couverture, pas le
   premier objet venu.
   ⚠️ ET LA MARQUE DU CHAPEAU REVIENT SUR L'ACCUEIL. `if (!is_front_page())` la masquait, sans
   une ligne pour dire pourquoi. Le nœud tranche : la HP porte « VIOLENCES » a y17 x101 en
   corps 40,37 dans son chapeau, EN PLUS du titre geant du heros. Les deux coexistent dans la
   maquette. Un choix non ecrit qui contredit le nœud n'est pas un choix, c'est un oubli.
   Le reste, chacun mesure au nœud : titres des cartes « Structure d'aide » 21/700/23,5 ->
   25/500/28 ; interlettrage du titre de la section neuve 0,35 -> 2,1 px ; bouton « Site » 12
   -> 16 ; bandeau de citation d'A propos 32/40/600 -> 35/36/500, dernier de sa famille reste
   en arriere ; macaron d'A propos 270 -> 315 ; interligne des libelles du formulaire 35 ->
   28 ; graisse et interlettrage de la liste des contributions ; interlettrage du titre
   « Ont contribue » ; ecart du menu 34 -> 32 ; et l'interlettrage des titres et etiquettes de
   vignette remis a ZERO, le global h3 leur en donnait 0,5 que le nœud ne demande pas. */
/* 1.9.27 (01/09) : LE PIED PASSE A LA V4, plus trois graisses rendues par la flotte.
   ① LE PIED (capture Stephane : « c'est ce footer de la v4 qui doit etre en place, sur
     toutes les pages ») : le bloc de la Ville n'est plus une carte prune arrondie a encre
     blanche — la V4 pose le logo et les coordonnees sur le FOND BLANC du pied. Le logo est
     en currentColor, il devient prune sans qu'on touche au SVG. Le texte « Un projet
     porte… » change de colonne : la V4 le met a DROITE sous le logo (x829 y3483), pas sous
     VIOLENCES. Et CONTACT n'est plus un bouton rose : la V4 le sert comme les trois autres
     entrees de la colonne, en 16/700 la ou elles sont en 20/500, sans aucun rectangle
     derriere lui dans le releve.
   ② TROIS GRAISSES, chacune confirmee par un juge qui a refait la cascade a la main :
     l'accroche du heros 600 -> 500 (nœud 539:1629 ; la fonte porte un dessin 600 distinct,
     l'ecart etait donc reel a l'ecran) ; les titres des cartes « Comment agir » 700 -> 500
     sur les DEUX ecrans que la regle sert, accueil et Agir, six nœuds qui demandent tous
     500 ; et l'interlettrage du seul H2 nu de la fiche, mesure a 0 sur la page servie la ou
     ses trois voisins portent 2,1 px. */
/* 1.9.26 (01/09) : LE TITRE DES TROIS PAGES « AGIR » ETAIT DU MAUVAIS COTE. La V4 met le
   titre a gauche (x101) et l'intro a droite (x640-705) ; le site servait la silhouette a
   gauche, le titre a droite, l'intro dessous. La cause etait l'ORDRE DES ENFANTS de la
   grille : le gabarit pose la silhouette avant le titre, elle prenait la premiere cellule.
   Dans la maquette elle n'est pas une colonne mais un pictogramme de 70x70 a -11 px du bord
   et 16 px au-dessus du titre. Sortie du flux, titre et texte places explicitement, retrait
   de premiere ligne pour le pictogramme. Le ratio n'est pas touche : la maquette n'en pose
   pas le meme sur les trois ecrans. */
/* 1.9.25 (01/09) : LA FORME DU BANDEAU DE FICHE MORDAIT SUR LE TITRE. Capture Stephane :
   « Derriere l'ecran les mots blessent » entame par le blob gris. Mesure au nœud : la V4
   place l'image a x729, la forme 146 px avant (583), et le titre finit a 563 — 20 px d'air.
   Le rapport de grille 1.1/.9 faisait commencer la colonne a 712, donc la forme a 566 :
   3 px du titre, et son bord arrondi passait dessus. 1.13/.87 remet la colonne a 729. */
/* 1.9.24 (01/09) : LA FORME VERTE DU BLOC D'AIDE DISPARAIT, ET LE TEXTE REVIENT A GENEVE.
   Captures de Stephane (« enleve element vert ici », puis « fond comme maquette ici » sur
   /reconnaitre/) : la V4 sert « Tu cherches de l'aide ? » en PRUNE UNI, badge 142 pose
   dessus, sans onde. Le vecteur onde-v4.svg avait ete pose le 24/08 d'apres la V3 ; la V4
   ne le porte plus. Le fond vert du telephone tombe avec lui — le bloc est prune partout,
   et le 142 y est lisible depuis le correctif 1.9.22.
   LE TEXTE : la V4 ecrit « De nombreuses structures a Geneve » sur les NEUF ecrans qui
   portent ce bloc, et « 142 - Numero gratuit d'aide aux victimes. » SANS « en Suisse ».
   Corrige dans parts/cta-aide.php et page-aide.php. ⚠️ PAS dans page-urgences.php : la V4
   y ecrit elle-meme « en Suisse », c'est le seul ecran dans ce cas, et un remplacement
   global aurait contredit la maquette en croyant la suivre.
   LE MACARON DE FICHE remonte et grandit (« remonte un peu le pas ici comme maquette ») :
   Page-detail V4 le place a x754 y716 quand le titre de bande 3 est a x104 y791 — 75 px
   AU-DESSUS du titre, et 275 de large. Le theme le posait a top:0, c'est-a-dire 26 px
   au-dessus (padding 82 de la section + margin 26 du titre), et le bornait a 240. */
/* 1.9.23 (01/09) : NEUF ECARTS DE LA FLOTTE, tous confirmes par un juge qui a rouvert les
   fichiers. 28 agents ont audite les 15 ecrans contre la maquette, 24 ecarts ont survecu au
   jugement ; voici ceux que le CODE porte et qui se corrigent sans toucher au contenu.
   ① LE 5e BLOC DE LA PAGE TEMOIN N'AVAIT AUCUNE REGLE. `.sp-apres` (« Prends soin de toi »,
     texte de la Ville pose le 18/08) n'existait dans AUCUNE ligne du thème : son titre
     tombait au defaut du navigateur (~18,7 px) et son texte a 16, colles par le `*{margin:0}`
     de la feuille, au milieu d'une bande dont les voisins servent 35 et 25.
   ② LE TITRE DU HEROS DEBORDAIT L'ECRAN SUR TELEPHONE : son clamp a un plancher de 72 px que
     rien ne reprenait sous 900. A 390 px, « VIOLENCES » demande ~420 px pour 346 disponibles.
     Le macaron, en absolu, se posait par-dessus une fois le mot retreci.
   ③ ET ④ DEUX CORRECTIFS FIGMA ETAIENT MORTS DANS LA CASCADE, ecrits sur un selecteur nu que
     le selecteur composé bat : les labels du formulaire (25/500/0,5 poses sur `label`, battus
     par `.formulaire label` qui servait 20/600) et les legendes des trois numeros d'urgence
     (25/28 poses sur `figcaption`, battus par `.pastilles figcaption` qui servait 19/24).
     Un jeton juste et MAL AFFECTE ne se voit pas a la relecture — on porte la valeur sur la
     regle qui gagne.
   ⑤ .bandeau-split p : 25/28 et non 20/23 — l'intro des trois pages « agir » etait servie une
     taille en dessous de son nœud. ⑥ .bandeau-question p : 35/36/500/0,7 releves, contre un
     clamp 20->28 invente. ⑦ .sig-bloc h3 : graisse 500, comme les cinq titres de sa famille.
     ⑧ .carte-agir p : l'interlettrage .02em que l'intro du meme ecran portait deja.
   ⑨ HORS FEUILLE, deux corrections du meme lot : « invitation àporter plainte » (mot colle)
     corrige DANS LES DEUX fichiers — le gabarit ET la source, sinon la faute repart a la
     prochaine regeneration ; et l'administration de la Ville, qui ANNONÇAIT LES DEUX SOUS-
     PAGES DANS LA MAUVAISE COULEUR (temoin donne pour orange, auteur pour mauve) alors que
     les gabarits portent `sp-mauve` et `sp-orange`. Ce tableau sert a la Ville a reconnaitre
     l'ecran qu'elle edite : deux libelles echanges l'envoient corriger le mauvais. */
/* 1.9.22 (01/09) : LE 142 ETAIT INVISIBLE SUR TOUTES LES PAGES INTERNES. Dernier des huit
   blocs rouges de la V4 (celui pose sur « Tu cherches de l'aide ? », en double sur l'accueil
   et sur Reconnaitre). En comparant les deux versions, un seul texte change : « 142 — Numéro
   gratuit d'aide aux victimes » passe de #5A1C3A a #FFFFFF sur Reconnaitre, et reste prune
   sur l'accueil. Deux valeurs pour le meme texte selon la page : la signature d'un jeton.
   Le bloc en portait un — `--cta-encre`, blanc par defaut, prune sous .home ou le fond
   s'inverse — et .cta-aide__droite p ecrivait `var(--prune)` EN DUR. Juste sur l'accueil
   par coincidence, PRUNE SUR PRUNE partout ailleurs : contraste 1:1 sur le paragraphe qui
   donne le numero gratuit d'aide aux victimes, 24h/24, sur un site destine a des jeunes qui
   cherchent de l'aide. Une ligne, et elle soigne la cause : ecrire « blanc » aurait casse
   l'accueil dans l'autre sens. */
/* 1.9.21 (01/09) : LA BARRE HAUTE MENTHE DISPARAIT — bloc rouge de Margaux (Rectangle 56,
   pose sur la zone du menu de Reconnaitre), confirme au releve des deux versions.
   En V3, le bloc `menu` de 111 px se decoupait en topbar menthe 26 px (Rectangle 52,
   #A0DBC4, portant « Numéros d'urgence » et « ESPACE pro ») + chapeau prune 85 px. En V4,
   Rectangle 52 n'existe plus, les deux liens ont disparu, et le bloc `menu` fait TOUJOURS
   111 px : le chapeau prend toute la bande, son contenu se recentre.
   ⚠️ LE CHAPEAU PASSE DONC DE 85 A 111, et ce n'est pas cosmetique : le laisser a 85 aurait
   remonte la page entiere de 26 px et decale TOUTES les bandes suivantes — le defaut du
   03/08, ou un decalage unique se lit comme un ecart sur chaque bande dans pixel-vernier.
   Les regles .topbar sont retirees (plus aucun gabarit ne les porte, y compris la variante
   mobile) ; la mesure qui les justifiait reste en commentaire, c'est elle qui explique le 111.
   « Espace pro » n'est pas perdu : la V4 le garde au PIED, avec À PROPOS, PARTENAIRES et
   CONTACT — le site l'y sert deja. « Numéros d'urgence » n'est plus nulle part, et son ecran
   porte l'annotation « Page n'existe plus ». Les trois numeros vitaux (144, 117, 142) sont
   servis par « Trouver de l'aide » : rien de ce qui compte pour une personne en danger ne
   quitte l'ecran.
   ⚠️ LA PAGE /urgences/ N'EST PAS DEPUBLIEE ICI. Retirer un lien est reversible et c'est ce
   que la maquette dessine ; depublier une page ne l'est pas, et une note de maquette n'est
   pas un ordre de suppression. Elle reste en ligne, sans entree de menu, jusqu'a arbitrage. */
/* 1.9.20 (01/09) : « POUR LES SITUATIONS NON URGENTES » — la bande que la V4 ajoute a
   Trouver de l'aide, et le deplacement de menthe qui va avec. Stephane : « intègre le bloc
   Frame 52 », puis par QCM « export + section complete, editable ».
   ① LA SECTION NEUVE, au releve du nœud (Frame 51, 1280x606 a y891, fond #A0DBC4) : titre
     corps 70 graisse 700 EN CASSE NORMALE (d'ou un h2 propre : .section-titre force les
     capitales), paragraphe corps 20 sur 526 de large, et quatre logos en grille 2x2 avec
     leur legende. Les textes sont editables par la Ville (six cases neuves) ; les logos sont
     des images de charte, versionnees dans img/ comme les quatre logos partenaires deja la.
   ② LA MENTHE SE DEPLACE, et c'est un ecart a part entiere : en V3 la bande « En cas
     d'urgence » etait #A0DBC4 (le theme la sert ainsi, il avait raison) ; en V4 elle passe
     en blanc et la menthe revient a la section neuve. Deux bandes menthe collees auraient
     efface la separation que la maquette dessine.
   ⚠️ C'EST FRAME 51 QUI A ETE INTEGREE, PAS FRAME 52. Frame 52 est posee A COTE des ecrans
   et porte des legendes de brouillon — « De 11 a 20 ans », « Section jeunes », et un
   « Sous-titre » jamais rempli. Frame 51, dans l'ecran, porte « 11-20 ans », « 18-25 ans »,
   « Pour toutes questions liees a violences dans le couple », « Des 11 ans, 24/24h ».
   L'appariement logo<->legende vient de la geometrie et se recoupe avec la realite des
   services (ciao 11-20, On t'ecoute 18-25, VQF.ch le couple, 147 des 11 ans 24h/24).
   ⚠️ ET LES DEUX TEXTES « NEUFS » DE SIGNALER N'ONT PAS ETE TOUCHES : mesure faite, ils sont
   DEJA servis dans la reponse « Pour les mineurs » depuis le 18/08. La V3 date du 11/08 :
   c'est la maquette qui a rattrape le site, pas l'inverse. Les integrer aurait duplique
   deux paragraphes a l'ecran. */
/* 1.9.19 (01/09) : LES PREMIERS ECARTS DE LA MAQUETTE V4, et eux seuls. Stephane :
   « le site doit etre comme la maquette v4 .. comparer chaque page et ajuster », Margaux
   presente dans la journee. Le releve V4 (job figma-vernier-v4 : 1 862 nœuds, 15 ecrans,
   maquette modifiee le matin meme) est entre au depot, et le diff V3->V4 rend une liste
   COURTE : 9 ecrans sur 14 sont identiques — le site etant deja aligne V3, ils sont bons.
   Deux ecarts se corrigent ici, ce sont les seuls que le code porte :
   ① LE LOGO DU PIED GROSSIT : 40,4 -> 46,9 px (graisse 600 inchangee). Sur toutes les
     pages. Le logo du CHAPEAU ne bouge pas (40,37 / 700 / menthe dans les deux versions),
     et il a sa propre regle : rien a arbitrer.
   ② « Contactez la Delegation a l'integration et a l'egalite » -> « Contactez le service
     de la cohesion sociale », sur Espace pro et Partenaires. C'est un DEFAUT editable
     (pasici_t) : si la Ville a deja saisi ce bloc, l'ecran ne bougera pas — le defaut,
     lui, cesse d'etre faux.
   ⚠️ CE QUI N'A PAS ETE TOUCHE, et pourquoi c'est la moitie qui compte. La mention
   HISTORIQUE de la DIE reste intacte sur A propos, son contenu et Contact : ces trois
   ecrans sont INCHANGES dans la V4, et remplacer un nom d'organisme partout aurait
   reecrit une phrase que la maquette n'a pas touchee. On ne corrige que ce que le diff
   nomme. Le titre geant de la HP non plus n'a pas bouge : le theme sert #6E5362 la ou la
   maquette dit #A0DBC4, et ce n'est PAS un ecart — c'est de la menthe a 29 % sur le
   prune #5A1C3A, resolu sur les TROIS canaux (0,286 / 0,288 / 0,290). Une couleur rendue
   n'est pas une couleur declaree (regle du 29/08), et corriger celle-la aurait casse un
   heros juste. */
/* 1.9.16 (01/09) : LA SCENE DE LA BANDE SERVIE TELLE QUELLE sur la fiche. Serie de
   captures Stephane : chaque bande du Style Guide PLACE son dessin a sa maniere (debord
   droit, assise au sol, echelle) et le blob CSS uniforme rendait « un placement un peu
   different » fiche apres fiche. La meta `pasici_fiche_scene` (job
   vernier-scenes-styleguide : zone visuelle de la bande, x>=500 y>=111, exportee 2x et
   recadree — blob + dessin + fond prune aplatis) est ancree au bord DROIT de l'ecran,
   assise sur le bas de bande, hauteur 403. Le fond prune cuit dans l'image est le meme
   que celui du bandeau : la couture est invisible. Sans meta, blob CSS inchange. */
/* 1.9.15 (01/09) : LES CARTES DU MUR SUIVENT LA FICHE (capture Stephane : « pourquoi
   c'est pas applique ici ? »). pasici_vignettes() ne sert plus l'image mise en avant que
   si c'est un vrai recadrage PORTRAIT (les « -carte » 240x300) ; un paysage en `cover`
   dans une case portrait donnait le zoom sauvage vu sur « Attention aux faux discours ».
   Sinon : dessin nu de la fiche (pasici_fiche_visuel), ENTIER (`contain`), sur la forme
   a la couleur de la vignette (pasici_couleur, repli #FEEFAC) — la composition des
   cartes des planches du Style Guide. Le repli teinte reste le dernier filet (« Sa
   tenue, son choix » n'a ni image ni dessin). Rien ne change pour les cartes qui avaient
   deja leur recadrage portrait. */
/* 1.9.14 (01/09) : correctif du ② de la 1.9.13, MESURE en prod dix minutes apres la pose.
   L'image a largeur naturelle (695 px) gonflait la PISTE de grille du bandeau : colonnes
   296/751 au lieu de ~700/411, titre « Attention aux faux discours » sur TROIS lignes
   (la maquette en veut deux, h1 max-width:459 devenu inatteignable) et etiquette de
   categorie repliee. Le dessin passe en ABSOLU dans .fiche-blob (bottom/left) : il ne
   contribue plus au calcul de la grille, la colonne revient a 411, et son debord droit
   reste coupe par l'overflow:hidden du bandeau. Sous 900 px l'image redevient statique
   (un blob en hauteur auto s'ecraserait a 0 avec un enfant absolu). */
/* 1.9.13 (01/09) : la fiche suit les notes de Stephane sur la V4 (« vignettes pas bon,
   voir style guide ») — trois gestes, tous sur le bandeau de fiche :
   ① LA FORME PREND LA COULEUR PRINCIPALE DE LA VIGNETTE. Le trace ne change pas
   (forme-hero.svg), mais il passe de background-image a MASQUE : la couleur vient de
   `--forme`, posee en ligne par single-vignette.php depuis la meta `pasici_couleur`
   (remplie par le job vernier-formes-couleurs depuis la bande du Style Guide). Sans meta,
   repli #FEEFAC : la fiche « Son intimite » (Page-detail V4, forme relue FEEFAC le 01/09)
   ne bouge pas d'un pixel.
   ② LE DESSIN N'EST PLUS TROP PETIT. Les exports du Style Guide sont souvent PAYSAGE
   (1024x593) : `contain` dans la boite 411x403 les rendait a 238 px de haut, perdus dans
   la forme (capture « Attention aux faux discours »). L'image passe a hauteur fixe 403 et
   largeur naturelle : un paysage s'etale (~700 px), un portrait (822x806, « Son
   intimite ») rend toujours 411 — inchange.
   ③ PLUS COLLE A DROITE DES 1200 px : le debord du dessin part vers le bord DROIT de
   l'ecran et c'est l'overflow:hidden du bandeau qui coupe, comme les bandes du Style
   Guide qui filent bord a bord. Sous 900 px rien ne change (garde max-width:100%). */
/* 1.9.12 (28/08) : les PAGES passent aux blocs elles aussi (« les pages aussi en blocs »),
   SAUF celles qui portent des cases nommees. La regle est mecanique, pas une liste de slugs :
   une page a des cases, elle garde son ecran de cases ; une page n'en a pas, son contenu est
   bien ce que l'editeur pilote, elle passe aux blocs. Le jour ou une page recevra des champs,
   elle basculera toute seule.
   ☠️ POURQUOI LES TREIZE PAGES DU SITE GARDENT LEURS CASES. Mesure du 28/08 : pas un seul de
   leurs gabarits n'appelle `the_content()` (verifie sur les quatorze page-*.php et
   front-page.php, seul page-pour-margaux.php le fait). Y ouvrir un editeur de blocs, ce serait
   offrir un endroit ou ecrire un texte que le site ne montrera nulle part, tout en repoussant
   les vraies cases dans le tiroir du bas : trait pour trait le defaut du 02/08 (« j'ai ajoute
   des 22 et 2222 mais je les vois pas en frontoffice »). Ces caracteres sont d'ailleurs
   TOUJOURS dans le contenu invisible de la page Agir (« Tu es vi22222ctim », relu par l'API le
   28/08), avec les remplissages « Contenu a integrer depuis la maquette V3 » de cinq autres.
   Choix de Stephane, mis devant la mesure.
   Ce que la Ville ne regle plus sur une page en blocs : hierarchie et ordre des pages, image
   mise en avant, extrait, commentaires. espace-client les retirait deja de l'ecran classique
   par remove_meta_box ; l'editeur de blocs les affiche en panneaux NATIFS, que remove_meta_box
   n'atteint pas. Seul le retrait du SUPPORT vaut pour les deux ecrans. L'editeur, lui, n'est
   jamais retire, et un administrateur ne perd rien. */
/* 1.9.11 (28/08) : deux defauts vus a l'ecran apres la 1.9.10, tous deux invisibles au code.
   ① LES CHAMPS TOMBAIENT DANS UN TIROIR. « Adresse » et « Site web » d'une structure, la
   « Statistique » d'une vignette sont des boites classiques : l'ecran classique les posait
   sous le texte (le mode d'emploi dit encore « juste en dessous »), l'editeur de blocs les
   range dans un tiroir REPLIE au bas de l'ecran. Le champ existe, il est introuvable, et un
   champ introuvable est un champ vide. Le tiroir s'ouvre desormais tout seul, et seulement
   s'il porte vraiment une boite.
   ② LA BALISE QUI DEVAIT SURVIVRE A L'ENREGISTREMENT. Le role « Redaction Ville » n'a pas
   `unfiltered_html` : ce qu'il enregistre passe par wp_kses_post, qui supprime EN SILENCE ce
   qui n'est pas sur sa liste. Sans `details` et `summary` nommees, la premiere sauvegarde
   d'une vignette par la Ville aurait aplati les volets en texte suivi, sans erreur, sans
   avertissement, et personne n'aurait fait le lien avec l'editeur. WordPress les autorise
   depuis la 5.5 ; on ne fait pas dependre le contenu du client d'une version d'hebergeur.
   Ces deux balises sont inertes, les nommer n'ouvre aucune porte.
   Controles mesures a l'ecran au passage : le contenu de la vignette 507 relu en un titre et
   quatre volets, le post NON marque modifie (rien ne pousse a enregistrer par accident), la
   page « Agir » toujours en cases nommees, le plein ecran eteint, la palette a huit teintes de
   la charte, l'editeur de code ferme, aucune erreur de console. */
/* 1.9.10 (28/08) : la relecture du contenu ancien avait lieu TROP TOT et n'avait donc jamais
   lieu du tout. `wp.domReady` se declenche quand la page est prete, pas quand l'editeur a recu
   le contenu du post, qui arrive plus tard par l'API REST : au domReady, `getBlocks()` rend un
   tableau VIDE, la relecture ne trouve rien a relire et ne se plaint de rien. Mesure a l'ecran
   apres la pose de la 1.9.9 : la vignette « Amour ne rime pas avec controle » gardait son bloc
   classique alors que la meme relecture, jouee a la main dans la console, rendait proprement
   un titre et un bloc « Volets depliants ». Un defaut qui se donne exactement l'air d'un ecran
   qui marche. La relecture attend desormais les blocs, et son attente sait renoncer (une
   vignette neuve n'en aura jamais).
   Fidelite mesuree sur cette meme vignette avant de reposer : texte identique au caractere
   pres (2624), memes balises, les quatre volets retrouves ; seul un volet VIDE recoit un
   paragraphe vide.
   Deuxieme correctif : le mot d'explication et la relecture valent pour TOUT LE MONDE, pas
   seulement pour la Ville. L'ecran classique affichait deja sa note a l'administrateur, et un
   administrateur qui verrait un autre contenu que sa cliente ne pourrait rien depanner. Seules
   les preferences d'interface (plein ecran, guide) restent le cadre de la Ville. */
/* 1.9.9 (28/08) : les articles, les vignettes et les structures reviennent a l'editeur de
   BLOCS, cadre (mu-pasici-editeur.php, nouveau). Demande de Stephane : « reactive gutenberg
   pour les articles et custom post, l'edition doit etre comme pour les pages, ultra simple et
   cadree ». Les deux moities comptent : le 02/08, les blocs avaient ete coupes partout parce
   qu'ils arrivaient nus (90 blocs, couleurs libres, plein ecran qui efface le menu de la
   Ville, « bloc classique » gris sur tout contenu ecrit avant eux). Le module rend donc les
   blocs ET pose le cadre dans le meme fichier, pour qu'on ne puisse pas poser l'un sans
   l'autre : dix blocs, la palette de la charte, pas d'editeur de code, pas de plein ecran.
   Les PAGES ne bougent pas, elles gardent leurs cases nommees (mu-pasici-champs) : c'est
   l'etalon que Stephane cite, pas la chose a changer.
   Deux blocs maison, « Volets depliants » et « Volet », rendent exactement le balisage
   <div class="accordeons"><details><summary> que cette feuille style depuis le 1.0 : aucune
   regle CSS ajoutee, aucune vignette a retoucher. Ils remplacent la composition en « HTML
   personnalise », qui montrait du code a la Ville.
   Le contenu deja ecrit (les dix vignettes en ligne) est relu en blocs a l'ouverture, et
   SEULEMENT si la relecture ne laisse aucun residu illisible : au moindre doute le bloc
   classique reste intact. Un ecran moins joli se repare, un texte perdu non.
   ☠️ Le filtre `use_block_editor_for_post_type` a ete RETIRE de pasici-espace-client au lieu
   d'y etre modifie : deux filtres de meme priorite s'enchainent dans l'ordre de chargement des
   mu-plugins, « espace-client » passe apres « editeur » dans l'alphabet, et sa reponse aurait
   ecrase la nouvelle sans une erreur ni une ligne de journal.
   Banc : deploy/tools/banc-pasici-editeur.php, 42 cas, dont les pages qui doivent RESTER
   classiques et le cadre qui ne doit PAS toucher un administrateur ; eprouve capable de rougir
   sur trois fautes rejouees (types vides, filtre voisin revenu, garde de relecture retiree). */
/* 1.9.8 (28/08) : le logo fase n'est plus decoupe. « reseau cohesion » etait ampute de
   moitie DANS le fichier image (logo-fase.webp, 275x138, exporte rogne au 1.2.0), pas a
   l'affichage : le CSS .logos img{height:96px} etait sain, et c'est pour ca qu'aucune
   retouche de feuille n'aurait rien change. Remplace par le logo VECTORIEL officiel de la
   FASe (fase.ch/wp-content/themes/buxum-child/img/logo.svg, viewBox 244.7x128.1, SHA-1
   verifie identique a la source) : entier, net a toute densite d'ecran, et au gabarit exact
   de la maquette (183,4 px de large a 96 de haut, contre 191,3 pour le webp rogne).
   Le .webp fautif est retire du payload pour qu'il ne resserve jamais ; le nom de fichier
   change au passage, ce qui evite que le navigateur d'un visiteur ressorte l'ancienne image
   de son cache. Banc : page /partenaires/ servie par la prod, feuille et image locales,
   les 4 logos mesures top 1770 / bottom 1866, alignement inchange. */
/* 1.9.6 (24/08) — l'edition facile vaut pour TOUT le contenu (Stephane : « les articles et
   customs posts aussi ») : editeur simple pour tous les types (les articles ouvraient
   encore Gutenberg), bouton « Rangees » sur tout type public a zone de texte, mot
   d'explication sur les articles. PHP seul. */
/* 1.9.7 (24/08) — les TEXTES des bandeaux Agir a la V4 (« comme ici les textes pour ces
   3 pages ») : le debut du texte de la Ville monte dans le bandeau (a droite du titre),
   la section blanche continue avec le reste — victime et temoin y montent tout leur
   premier paragraphe (blanc = corps directement), auteur·ice ses deux premieres phrases
   (« Rien n'excuse… » reste au blanc). PHP seul : templates deplaces sans retape
   (litteraux decoupes au script), gabarit a lead conditionnel, generateur mis d'accord
   (BANDEAU_PHRASES). Les anciennes intros fixes disparaissent, remplacees par la V4. */
/* 1.9.6 (24/08) — les formes Agir au TRACE EXACT de la V4 (manifeste figma-agir-v4, 2e
   passe) : Vector 1 665x557 en masque (img/agir-forme-v4.svg) sur var(--sp), debordement
   droit retabli (la V4 confirme la geometrie V3), verticale a bande+24 (marge -40), et le
   texte du blob revient au 55/60/1,65 re-mesure. Temoin herite du meme tracé en mauve en
   attendant l'appariement de son cadre. */
/* 1.9.5 (24/08) — le contenu du panneau aide reste SUR le vert a toute largeur : retrait
   droit fixe 100px (il grandissait avec l'ecran, le texte s'eteignait sur le prune —
   capture Stephane), texte a 310px (nœud), et l'aplat vert REVIENT sur telephone (le blob
   y est masque et le fond etait devenu transparent en 1.9.2). */
/* 1.9.4 (24/08) — style des liens du bloc contributions (.contrib li a : encre du texte,
   souligne) — le PHP au texte V4 mesure etait deja pose, il manquait l'habit des liens. */
/* 1.9.3 (24/08) — les formes des sous-pages Agir REMONTENT jusqu'a la bande prune
   (capture Stephane : « la forme remonte comme dans la maquette .. regarde ») :
   marge -64px sur .sp-blob, qui annule le coussin de section pour la forme seule.
   Provisoire au meme titre que les silhouettes — le manifeste figma-agir-v4 donnera
   le rel.y exact des trois cadres. */
/* 1.9.2 (24/08) — l'onde de « Tu cherches de l'aide ? » : le VECTEUR V4 exporte, pose au
   pixel (blob festonne 688x676, droite −163,74 / haut −107,46 — placement demontre par
   trois mesures croisees, banc navigateur a l'appui). Detail au bloc .cta-aide__droite. */
/* 1.9.1 (24/08, pendant la visio) — illustrations de fiche assises sur le BAS de la bande
   (object-position:bottom) : les scenes rectangulaires flottaient avec un vide au-dessous
   (« corrige ces blancs ou aligne sur le bas ») ; les decoupes plein cadre ne bougent pas. */
/* 1.9.0 (24/08) — sous-pages Agir au dessin V4 (captures Stephane : « inspire toi de la
   maquette pour les formes de droite et le placement du texte .. sur un ou 2 colonnes ») :
   · la forme est CONTENUE dans la page (fini le debordement V3 et le translateY), une
     silhouette par role (bol jaune / goutte mauve / galet orange), PROVISOIRE en
     border-radius jusqu'aux vecteurs exacts du job figma-agir-v4 ;
   · texte en 1 ou 2 colonnes : au-dela de 900 caracteres, le dernier paragraphe du corps
     continue SOUS la forme (colonne .sp-cote) — seule la page auteur·ice bascule, comme
     dans la V4 ; la coupe se fait au rendu, le champ pc_corps reste entier ;
   · le texte du blob redescend a l'echelle de la forme (40/46, provisoire aussi). */
/* 1.8.4 (24/08) — RANGEES pour le VRAI editeur (capture Stephane : « c'est pas encore en
   prod ? ») : la 1.8.3 visait Gutenberg, or pages/vignettes/structures s'editent dans
   l'editeur CLASSIQUE (choix du 02/08). Meme bouton flottant, meme panneau, insertion au
   curseur via TinyMCE, colonnes visibles dans l'editeur (content_style) et grille cote
   site (« rangees maison » ci-dessous). mu-pasici-blocs.php ④. */
/* 1.8.3 (24/08) — deux demandes Stephane, PHP/JS d'administration :
   · TEXTE ENRICHI dans les cases de l'espace client (« option bold, lien et autre
     indispensable ») : zones editables avec barre G/I/Lien, stockage inchange (chaine +
     balises en ligne kses), historique/catalogue intacts ; le bandeau defilant RETIRE
     les balises (une balise n'a pas de sens en defilement). mu-pasici-champs.php.
   · RANGEES EN UN CLIC dans l'editeur (« eviter de coller des codes .. systeme
     maison », prio 1) : bouton flottant « Rangees », 4 gabarits, pose au point
     d'insertion par l'API blocs — plus de presse-papiers. mu-pasici-blocs.php ③. */
/* 1.8.2 (24/08) — trois captures de Stephane, trois gestes :
   · bouton « Site → » des cartes annuaire en VERT (--vert, encre prune) — nouvelle
     variante .btn--vert, la carte menthe garde son contraste ;
   · « elements pas plus long que leurs textes » : les pilules de categorie des cartes
     annuaire recoivent la cesure pasici_tag_deux_lignes (seuil 30 — les libelles qui
     tiennent sur une ligne y restent), meme remede que les vignettes le 24/08 matin ;
   · PARTENAIRES « police trop grande » : le lead redescend au corps releve (25/28 g500,
     partage avec Espace pro ; A propos garde 35/36 par regle scopee) et « Ont contribue
     au contenu : » passe de --fs-h2 (70) a 35/36 g500 — le releve du 12/08, pas le double. */
/* 1.8.1 (24/08) — PHP seul, trois gestes :
   · le coeur de la barre basse en inline-block DANS l'element : la regle globale
     `img,svg{display:block}` en faisait un bloc et cassait la ligne malgre nowrap
     (mesure : 57px -> 22px) ;
   · la fiche prefere son visuel dedie `pasici_fiche_visuel` (dessin transparent V4,
     pose par deploy/jobs/vernier-fiches-transparentes.sh) — le blanc peint dans les
     recadrages carte disparait fiche par fiche, repli inchange sans meta ;
   · figma-onde-v4 (2e passe) exporte aussi les boites des ancetres, pour reproduire le
     recadrage exact de la forme verte 799x811 de la V4. */
/* 1.8.0 (24/08) — TUTORIELS VIDEO de l'administration (Stephane : « plusieurs vidéos selon
   le thème .. sous-titres .. liées en haut de la page Bibliothèque, vignette qui ouvre un
   popover »). La page Bibliothèque (mu-pasici-blocs.php) porte la vignette et le popover ;
   les videos elles-memes sont tournees par deploy/jobs/pasici-tutos.sh (hors git) et la
   vignette ne s'affiche que quand elles existent. Tournage : deploy/tools/pasici-tutos.mjs. */
/* 1.7.7 (24/08) — barre basse : le credit « Fait avec ♥ par alveo · © Ville de Vernier »
   sur UNE ligne (white-space:nowrap sur le span) — il se pliait en trois autour du coeur. */
/* 1.7.6 (24/08) — l'onde encore (« c'est cette forme qui est pas net ») : lisser les 63
   points du releve gardait leur bruit d'arrondi en petites bosses parasites. La courbe ne
   passe plus que par les 8 extrema majeurs, en Catmull-Rom centripete — trois grandes
   ondulations nettes, meme silhouette. Detail dans parts/cta-aide.php. */
/* 1.7.5 (24/08) — carte VERNIER du pied : le SVG OFFICIEL de la Ville (mot + symbole +
   baseline d'un bloc, img/logo-vernier.svg rapatrie de vernier.ch) remplace l'imitation
   texte + « ◳ ». Capture V4 de Stephane ; banc navigateur : rendu identique a la maquette. */
/* 1.7.4 (24/08) — barre basse : « amour » remplace par un coeur SVG maison (currentColor,
   aria-label complet sur le span). Demande Stephane ; PHP seul. */
/* 1.7.3 (24/08) — deux demandes de Stephane, PHP seul (aucune regle CSS ne change) :
   · le bandeau defilant du PIED lit le meme champ « Bandeau défilant » que celui du haut
     (ID de la page d'accueil passe explicitement — pasici_v lit la page courante par
     defaut) : un seul endroit pour l'admin, fini les phrases en dur du footer ;
   · le macaron « PAS ICI » du pied passe en PRUNE a encre VERTE (maquette V4) — le vert
     du 1.6.7 venait de la V3. L'en-tete reste vert a encre prune. */
/* 1.7.2 (24/08) — capture Stephane : « forme verte pixelisee ». L'onde de la section
   « Tu cherches de l'aide ? » etait decoupee par un polygon() a pourcents entiers :
   ~6 px par marche sur la hauteur du bloc. Meme trace, lisse en courbe via le clipPath
   SVG #pasici-onde (objectBoundingBox) — detail au bloc .cta-aide__droite::before. */
/* 1.7.1 (24/08) — capture Stephane, deux defauts sur la rangee « Reconnaitre une violence » :
   · « pas de flou ici » : le fondu des pastilles de filtre s'affichait meme quand aucune
     pastille n'est coupee (pixel fantome 876 vs 875). Il ne s'allume plus que s'il reste
     reellement du contenu a droite — detail au bloc `.chips-piste--suite`.
   · « bouton pas toute la largeur » : l'etiquette « Violence verbales, psychologiques »
     s'etirait sur les 216 px de la carte des qu'elle passait sur deux lignes. La maquette
     (nœud 127x24) coupe la ligne A LA MAIN et la pastille epouse sa plus longue ligne :
     meme geste desormais cote PHP (retour a la ligne insere au milieu du libelle long),
     detail dans functions.php au rendu des cartes. */
/* 1.7.0 (20/08) — le texte des trois blobs « agir » aux valeurs de la maquette :
   55/60/700/1,65 au lieu de 40/46/800/normal. Unanime aux trois cadres, donc global ;
   le telephone garde EXACTEMENT son comportement d'avant. */
/* 1.6.9 (20/08) — l'interlettrage de Partenaires : ma classe perdait contre `h2.section-titre`.
   Doublee, elle passe a 0-2-0 et gagne sans toucher les 8 noeuds qui veulent 2,1. */
/* 1.6.8 (20/08) — Partenaires : le seul titre de section que la maquette veut petit
   (35/36/500/0,7 au lieu de 70/70/700/2,1) + les intitules de la rangee de logos.
   Porte par une classe DEDIEE : la classe globale aurait casse 8 noeuds conformes. */
/* 1.6.7 (20/08) — RECETTE STEPHANE : ce qui tourne, ce qui deborde, ce qui manque de vert.
   · la bulle 142 et les pastilles 144/117 ne tournent plus (ni au repos, ni au survol) ;
   · le macaron « PAS ICI » du pied passe au VERT, comme la maquette ;
   · sur telephone : deux fiches par rangee, et le menu sur UNE rangee qui defile ;
   · les attributs de taille du badge 142 disaient 219x222 pour un fichier de 286x338.
   Chaque ligne porte sa cause au-dessus d'elle. Les points de la recette qui demandent une
   mesure contre Figma (marges des blocs « agir », corps de /partenaires/, taille des cartes
   d'aide) ne sont PAS ici : ils attendent leur mesure, pas une intuition. */
/* 1.6.6 (18/08) — URGENT : le blob des pages « Agir » s'etirait en ovale haut.
   Capture de Stephane sur /agir-auteur/ : « la forme est pas comme cela pas etiree ». Mesure au
   navigateur avec le texte reel : 665 x 1340 a 1440 px, 665 x 1868 a 1000 px, la ou la maquette
   dit 665,4 x 556,8. Plus du DOUBLE de la hauteur, rapport tombe de 1,195 a 0,356.
   LA CAUSE N'ETAIT PAS LA LARGEUR (elle etait juste, corrigee le 06/08) : dans une grille CSS un
   element s'etire par defaut a la hauteur de sa RANGEE. Tant que la colonne de texte etait
   courte le defaut ne se voyait pas ; le texte de la Ville pose CE MATIN (1.6.3) l'a allongee,
   et le blob a suivi. `min-height:557px` ne borne qu'un PLANCHER — un plancher ne retient pas
   un etirement, et c'est ce qui a fait passer le defaut pour impossible.
   REMEDE : `align-self:start` (il prend SA hauteur, pas celle de la rangee) + `aspect-ratio`
   (il garde la forme de la maquette a toute largeur). `min-height` retire du bloc bureau.
   MESURE APRES, texte reel, cinq largeurs : 1440 et 1000 -> 665 x 556 (rapport 1,196 contre
   1,195 attendu) ; 900 -> 856 x 716 ; 700 -> 656 x 549 ; 390 -> 359 x 300. Le rapport de la
   maquette tient partout, la regle telephone (width:auto, min-height:300) reste servie. */
/* 1.6.5 (18/08) — la page « Signaler » recoit son contenu, et l'envoi cesse de refuser.
   Capture de Stephane : « tu as pas mis le contenu ici pourquoi ? ». Parce que je n'avais
   traite que les 3 DERNIERES diapositives, celles qu'il avait designees. La page « Signaler »
   est a la diapositive 35 — une avant. Je me suis arrete au perimetre annonce sans regarder
   ce qu'il y avait juste a cote.
   Les CINQ volets sont desormais remplis mot pour mot (900 a 1230 caracteres chacun), plus
   DEUX blocs que la page n'affichait pas du tout : « La realite des procedures judiciaires »
   et le renvoi vers Juris Conseil Junior. Ils vivent HORS des accordeons a dessein — ce sont
   des choses a lire avant de decider, les enfermer dans un volet reviendrait a les cacher — et
   ils n'avaient aucun style : `.sig-bloc` et `.sig-note` le posent.
   ⚠️ Le volet « Pour les mineurs » vit dans un SECOND tableau de la meme diapositive ; le
   chercher dans le premier ne l'aurait pas trouve. Et l'appariement se fait sur le titre
   APOSTROPHES NORMALISEES : le PPT ecrit « d'office » avec l'apostrophe typographique, la page
   avec la droite — comparer les chaines telles quelles laissait UN volet vide, qui aurait eu
   exactement l'air des quatre autres. Le generateur EXIGE 5 sur 5.
   ☠️ ET 1.6.4 N'ETAIT PAS EN LIGNE : `banc-vernier-envoi` a refuse la pose (« mu-plugins —
   attendu 3, obtenu 4 · VT_BANC_KO — rien n'est pose »). J'avais ajoute la page Charte au job
   sans toucher au compte attendu de son banc — un « 3 » ECRIT EN DUR, le seul compte de ce
   banc qui ne se calculait pas depuis la source, donc le seul incapable de suivre. Il se
   deduit maintenant du JOB lui-meme, et il sait toujours rougir : job annoncant 5 contre
   manifeste a 4 rend bien KO (verifie dans les deux sens). */
/* 1.6.4 (18/08) — page d'administration « Charte graphique » (demande Stephane : « cree pour
   les admin une Page charte graphique .. hierarchie h1, h2 etc.. couleurs et autres »).
   ELLE LIT CETTE FEUILLE, ELLE NE RECOPIE RIEN : une charte qui retape ses valeurs se perime
   au premier correctif et rien ne le dit — on lirait « le prune est #5A1C3A » sur un ecran
   d'admin pendant que le site en sert un autre. Meme piege que le tableau des quotas.
   ⚠️ Elle ne lit que le bloc `:root` DE TETE : `--intro-max` est redefini SEPT fois dans des
   media queries, et une expression qui balaierait le fichier retiendrait la derniere valeur
   rencontree — celle d'une largeur particuliere — en la presentant comme LA valeur.
   Elle calcule aussi les CONTRASTES des paires reellement servies (WCAG 2.1, seuil AA), parce
   qu'un ratio ne se juge pas a l'oeil : le menu de la fiche etait a 1,35:1 ce matin.
   Banc : php deploy/tools/banc-charte.php — 12 cas, dont le cas 4 qui montre qu'un parseur
   naif rend 111px sur le meme corpus (sans lui, le cas 1 ne prouverait rien) et cinq
   contrastes dont on connait la reponse d'avance (21,00 blanc/noir, 1,00 sur soi-meme). */
/* 1.6.3 (18/08) — les 3 sous-pages « Agir » recoivent enfin leur texte, et surtout leurs
   VOLETS PROPRES. Source : les 3 dernieres diapositives du PowerPoint de la Ville « Projet VSS
   jeunes v5 juin 2026 » (envoye par Stephane le 18/08), extraites et GENEREES —
   `deploy/tools/agir-sous-pages-gen.py`, jamais retapees (8 000 caracteres se recopient avec
   des ecarts invisibles).
   ☠️ LE DEFAUT PRINCIPAL N'ETAIT PAS L'ABSENCE DE TEXTE. `parts/agir-sous-page.php` codait EN
   DUR les quatre volets « Que faire ? » de la VICTIME, servis a l'identique sur les trois
   pages : /agir-auteur/ proposait « Garde des traces » et « Tes droits » a quelqu'un qui vient
   de reconnaitre commettre des violences. C'est le meme defaut que celui corrige le 14/08 une
   ligne plus haut (un gabarit partage dont le repli est le contenu d'un seul de ses cas), qui
   s'etait arrete au texte d'accueil. Les volets viennent desormais de `$pasici_sp`, et un role
   sans volets le DIT au lieu d'emprunter.
   Les quatre titres par role, tels que la Ville les ecrit : cible = securite / soutien /
   traces / droits ; temoin = securite / intervenir / soutenir / confronter ; auteur·ice = oser
   en parler / s'engager a arreter / respecter l'espace / assumer. Le temoin porte en plus un
   5e bloc (« Prends soin de toi ») que les deux autres n'ont pas — affiche s'il existe.
   Le blob « Ce n'est pas de ta faute ! » reste a la VICTIME SEULE : la maquette le montre sur
   les trois ecrans, mais c'est du remplissage (n°29) et le PPT ne le donne que pour elle. Le
   poser sur /agir-auteur/ repeterait le mal du 14/08.
   Banc : php deploy/tools/banc-agir-sous-pages.php (13 cas), dont le cas 3 qui REJOUE l'etat
   d'avant — auteur empruntant les volets de la victime — et exige 4 partages detectes. */
/* 1.6.2 (18/08) — capture de Stephane sur les accordeons : « meme taille des V des accordeons
   que la maquette ». Le site dessinait ce chevron comme un CARACTERE (`content:"∨"` a .65em),
   la maquette pose un VECTOR. Encre reelle du glyphe dans Nohemi (canvas, actualBoundingBox)
   contre le noeud Figma 247:588 :
     servi   ∨ a 22,75px/700  ->  13,0 x 15,0   rapport L/H = 0,867
     maquette          vector ->  17,75 x 17,33 rapport L/H = 1,024
   Trop petit sur les DEUX axes ET mal proportionne : aucun `font-size` ne peut rendre les deux
   dimensions. D'ou le TRACE, pas un nombre — 111 octets extraits par le job figma-pasici-chevron
   (les 3 instances de la maquette concordent), poses en fond SVG par pasici-chevron-gen.py.
   Pose en `em` et non en px : l'ancienne regle valait .65em, donc le chevron suivait le titre.
   Le figer aurait ete un changement silencieux, et la maquette ne dit rien des largeurs
   intermediaires (regle d'or n°29). Le rapport vient de DEUX mesures — boite du chevron et
   corps du titre (35 px), lus dans le meme releve : 0,5071 x 0,4951 em.
   ☠️ ET UN PIEGE QUE J'AI POSE MOI-MEME : en passant des px aux em j'ai garde `font-size:0`
   (qui eteignait le glyphe). Les `em` d'un pseudo-element se resolvent sur SA police : le
   chevron a peint 0x0 — juste dans le fichier, absent a l'ecran. Corrige en `font-size:1em`,
   et le cas est fige au banc (cas 7-8). Mesure au navigateur sur la feuille servie :
   1440/1280 -> 17,73 x 17,33 (cible 17,75 x 17,33) ; 1000 -> 15,80 ; 700 -> 13,27, rapport
   constant a 0,507. Banc : node deploy/tools/banc-chevron-accordeon.mjs (8 cas apparies). */
/* 1.6.1 (17/08) — capture de Stephane sur l'en-tete : « couleur du menu en violet sur fond
   jaune s'il te plait ». LU DANS LA MAQUETTE AVANT D'ECRIRE, et le releve tranche seul : sur
   les 14 ecrans, UN SEUL met l'encre du menu en #5A1C3A — « Page-detail », la fiche. Les 13
   autres la veulent #A0DBC4, ce que le site servait deja. Une regle non bornee aurait casse
   treize ecrans pour en reparer un.
   Il n'y avait RIEN a construire : `.chapeau` est deja transparent sur la fiche et le blob
   `.fiche-blob::before` (753x630, remonte de -113px, servi en #FEEFAC) passe SOUS la
   navigation — c'est exactement le noeud `Vector 1` de la maquette (753,2 x 629,5). Le jaune
   etait juste ; seule l'encre restait menthe. Le logo reste menthe : il est a GAUCHE du blob,
   sur le bordeaux, et la maquette l'y met en #A0DBC4 (arbitrage Stephane : ne pas y toucher).
   Contraste WCAG mesure : menthe sur #FEEFAC = 1,35:1 (seuil AA 4,5) -> prune = 10,92:1. Le
   soulignement de survol suit l'encre : en --vert il etait invisible sur le jaune.
   ⚠️ BORNE A 901px, ET C'EST LA GARDE, pas un reglage : `.fiche-blob::before` passe en
   `display:none` sous 900px, donc plus aucun jaune derriere le menu. Sans borne, le menu
   serait prune sur prune — 1,0:1 — sur tous les telephones. Mesure dans un vrai Chromium sur
   la feuille servie, aux deux cotes : 1440/1100/901 -> prune sur #FEEFAC, 10,92:1 ; 900/600 ->
   menthe sur #5A1C3A, 8,08:1. Contre-epreuve sur la feuille d'AVANT : 1,35:1 sur les trois
   largeurs larges, c'est-a-dire le defaut de la capture. */
/* 1.6.0 (17/08) — capture de Stephane, maquette Figma a gauche et le site de preproduction a droite,
   inspecteur ouvert sur `.vignette .tags b` : « Background couleur et autres differences ».
   Trois ecarts de COULEUR/FORME mesures dans la bande blanche de l'accueil, aucun devine :
   · etiquettes de vignette — les deux couleurs etaient inversees DEPUIS LE 1.4.2, qui avait
     pris l'encre du nœud de texte pour le fond du conteneur. Retour au sens de la maquette :
     fond #5A1C3A, encre #FCC8D7. Trois mesures concordantes, dont un histogramme de HP.png
     qui ne passe par aucun relevé (detail complet au-dessus de la regle).
   · pastille ACTIVE — encre #FACDE1 et non blanche (nœud « Toutes », identique sur les trois
     ecrans qui portent des pastilles).
   · fleches du carrousel — 47x46 rayon 14 encre #FACDE1, ecart 17 (etait 38x32 rayon 10 encre
     blanche, ecart 8 : cible de 32 px, sous le minimum de 44). */
/* 1.4.1 (12/08) — deux correctifs d'affichage, tous deux nes d'une capture de Stephane :
   · [hidden] global : le filtre de « Trouver de l'aide » masquait bien les cartes hors
     categorie, mais `.structure{display:flex}` les reaffichait. Le filtre marchait ; c'est le
     masquage qui n'existait pas. Correction globale plutot qu'un troisieme patch par composant.
   · repli des pastilles sous 780px : 3 visibles + bouton « + N autres ». Sur telephone les 10
     pastilles occupaient tout l'ecran avant la premiere carte.
   1.4.2 (12/08) — deux ecarts a la maquette, MESURES sur le releve du 11/08 :
   · ⚠️ DEFAIT EN 1.6.0, ET LA LIGNE RESTE ICI POUR QU'ON NE LA REFASSE PAS : « la maquette
     pose le fond #FCC8D7 (rose) et le texte prune » etait FAUX — #FCC8D7 est l'encre du nœud
     de TEXTE, le conteneur porte #5A1C3A. Le releve nomme `fond` les deux, d'ou l'inversion.
   · ombre du bouton au survol portee a 90 % (etait 55 %). Le deplacement et l'opacite du
     bouton ne changent pas : c'est l'ombre seule qui etait trop legere. */
/* MASQUAGE — la règle qui doit précéder tout le reste.
   L'attribut `hidden` ne masque que par un `display:none` de la feuille du navigateur : la
   MOINDRE règle `display` posée sur l'élément l'emporte, et l'élément reste visible alors que
   le code l'a masqué. 12/08 : le filtre de la page « Trouver de l'aide » posait bien `hidden`
   sur les cartes hors catégorie, mais `.structure{display:flex}` les réaffichait — le filtre
   semblait cassé alors qu'il faisait exactement son travail.
   Le défaut n'était pas nouveau : `.vignette[hidden]{display:none!important}` existait depuis
   toujours, et personne n'avait écrit l'équivalent pour `.structure`. Un correctif par
   composant se paie une fois par composant, et le suivant l'oubliera aussi. La règle est donc
   GLOBALE — c'est la cause qu'on soigne, pas la carte qui dépasse. */
[hidden]{display:none!important}

:root{
	/* palette V3 (relevé Figma + écrans) */
	--prune:#5A1C3A;--prune-2:#541F39;--prune-3:#4C1530;
	--menthe:#A0DBC4;--vert:#C8EFAE;
	--rose:#FCC8D7;--rose-btn:#FACDE1;--corail:#FF8585;--mauve:#D6C0CD;--bleu:#CCE3FF;
	--jaune:#FEEFAC;--jaune-2:#F3EBA7;--jaune-vif:#FFD60A;--orange:#FFC48C;
	--brun:#621E01;--blanc:#FFFFFF;--noir:#111111;
	--r-btn:10px;--r-chip:14px;--r-carte:14px;
	/* ECHELLE TYPOGRAPHIQUE V3 — panneau « Text styles » du fichier Figma (03/08) :
	   h1 90/90 · H2 70/70 · h4 35/36 · p 25/28 · p2 20/23.
	   FORME : clamp(plancher@390px, rampe, CIBLE). La borne haute EST la cible, et la rampe
	   sature a 1230px — PAS 1280. Raison mesuree : `100vw` inclut la barre de defilement,
	   donc calibrer pile sur 1280 rendrait la valeur servie dependante du navigateur (1280 en
	   capture headless, ~1265 de contenu dans un Chrome de bureau). En saturant 40px avant, la
	   cible est atteinte AU PIXEL des 1230, partout. Les 50px de plage plate sont invisibles.
	   Rampe : coefficient vw = (cible-plancher)/8,4 ; origine = cible-(cible-plancher)x1,4643.
	   NE JAMAIS reecrire une taille en dur ailleurs : l'echelle a vecu en 7 copies, c'est
	   exactement pour cela qu'elle etait fausse a 10 endroits. */
	--fs-h1:clamp(56px,calc(40.2143px + 4.0476vw),90px);--lh-h1:1;
	--fs-h2:clamp(34px,calc(17.2857px + 4.2857vw),70px);--lh-h2:1;
	--fs-h4:clamp(21px,calc(14.5000px + 1.6667vw),35px);--lh-h4:1.03;
	--fs-p:clamp(17px,calc(13.2857px + 0.9524vw),25px);--lh-p:1.12;
	--fs-p2:clamp(16px,calc(14.1429px + 0.4762vw),20px);--lh-p2:1.15;
	--fs-nav:18px;--lh-nav:21px;
	--contenu:1080px;--gouttiere:20px;
	--police:'Nohemi',-apple-system,'Segoe UI',Roboto,Arial,sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--police);background:var(--blanc);color:var(--prune);line-height:1.4}
a{color:var(--prune)}
img,svg{max-width:100%;height:auto;display:block}
/* 04/08 — LE CONTENU FAISAIT 1036 AU LIEU DE 1080, ET C EST GLOBAL. `--contenu` est juste :
   la maquette place ses colonnes a x99-104 sur TOUS les ecrans, soit 100 px de marge et 1080
   de contenu dans un cadre de 1280. Mais `.cadre` posait ces 22 px de padding A L INTERIEUR
   des 1080 (box-sizing: border-box), donc la colonne servie ne faisait que 1036 — 44 px de
   moins que la maquette, sur toutes les pages.
   Consequence mesuree sur l'accueil : les cartes « agir » font 332 px au lieu de 344/343/362,
   leur texte prend UNE LIGNE DE PLUS (+28 px, soit exactement un interligne), et la bande
   entiere derive de +26. Une cause horizontale qu'aucune mesure de hauteur ne pouvait nommer.
   On ajoute donc le padding a la largeur au lieu de le prendre dedans : a 1280 le cadre fait
   1124, centre → marges 78, et le contenu commence a 78+22 = 100. La valeur de la maquette. */
.cadre{max-width:calc(var(--contenu) + 44px);margin-inline:auto;padding-inline:22px}

/* ═══ barre haute menthe — RETIREE EN V4 (01/09) ═══
   Les regles .topbar sont supprimees plutot que laissees orphelines : plus aucun gabarit ne
   rend cet element, et une regle que rien ne porte est du code mort qui survit aux relectures.
   La MESURE, elle, est conservee juste en dessous : c'est elle qui explique le 111 du chapeau,
   et la perdre ferait rouvrir la question a la prochaine comparaison. */
/* 04/08 — HAUTEURS DE BANDE MESUREES DANS LE NOEUD FIGMA, pas des marges choisies.
   Ecran HP : le bloc `menu` fait 111,1 px et se decoupe en topbar menthe 26 px (`Rectangle 52`,
   texte corps 14 a y3) + chapeau prune 85 px (nav corps 18 a y51, groupe de marque haut de 74).
   Le theme servait 29 + 54 = 83 : 28 px de moins, et c'est de la que naissaient les 59 px
   d'ecart du bloc heros — la bande y620-720 a 100 % de difference dans `pixel-vernier`.
   On impose la HAUTEUR de la bande et on laisse le contenu se centrer : une hauteur mesuree
   tient quand le contenu change, un `padding` recalcule a la main, non. */

/* ═══ chapeau prune ═══ */
.chapeau{background:var(--prune);position:relative;z-index:30}
/* 01/09 — 85 -> 111 : LA BANDE NE CHANGE PAS DE HAUTEUR, elle change de contenu. La V4
   retire la topbar menthe de 26 px (voir header.php) ; le bloc `menu` de la maquette fait
   toujours 111 px, mesure identique en V3 et en V4. Si le chapeau restait a 85, la page
   entiere remonterait de 26 px et TOUTES les bandes suivantes seraient decalees — c'est
   exactement le defaut de 2026-08-03 (un decalage unique se lit comme un defaut sur chaque
   bande dans pixel-vernier). On impose la hauteur mesuree, le contenu se centre. */
.chapeau .cadre{display:flex;align-items:center;gap:24px;min-height:111px;padding-block:0}
/* 04/08 — LA GRAISSE 800 N'EXISTE NULLE PART DANS LA MAQUETTE. Inventaire du fichier Figma :
   Nohemi 700 (x292), 500 (x223), 600 (x110). Zero 800. Le theme en servait SEPT.
   Noeud « VIOLENCES » du chapeau (HP y40) : corps 40,4 · graisse 700 · interlettrage 1,21px.
   Le theme servait 34px / 800 / .01em — les trois faux, sur la marque de toutes les pages.
   (Ce n'est PAS une graisse synthetisee : les six fichiers 400-900 sont bien livres. C'est un
   choix de graisse qui ne vient pas de la maquette.) */
.marque{display:inline-flex;align-items:center;text-decoration:none;
	color:var(--menthe);font-weight:700;font-size:40.4px;letter-spacing:.03em;line-height:1}
/* 73 px, pas 56 : le macaron de l'en-tete est le noeud `Group 15` (73x74) du composant
   `menu`, et le bloc entier `Group 32` fait 288x74 — le texte VIOLENCES en occupe 231, donc
   le macaron le chevauche de 16 px. Mesure au noeud, pas a l'oeil. Meme correction que celle
   du pied (56 -> 73) : la valeur venait du meme reglage approximatif. */
.marque .sticker{width:73px;margin-inline-start:-16px;margin-block-start:6px}
.sticker{display:inline-block;transform:none;transition:transform .25s ease}
/* ☠️ transform:none — l'inclinaison du logo est DANS les tracés du SVG exporté de Figma
   (16/08). La rotation CSS de -12° datait du sticker REDESSINÉ, dont le feston était droit
   et qu'il fallait pencher à la main. Appliquée au vrai dessin, elle l'inclinait DEUX FOIS.
   Le survol garde son mouvement, il part simplement de 0. */
/* 04/09 (visio, Margaux) : « logo, pas d effet hover ». La rotation du macaron au survol est retiree. */
.chapeau nav{margin-inline-start:auto}
/* 01/09 (flotte) — 32 au releve, pas 34. La ligne du bloc telephone n'est pas touchee. */
.chapeau nav ul{display:flex;gap:32px;list-style:none;flex-wrap:wrap}
.chapeau nav a{color:var(--menthe);text-decoration:none;font-weight:600;font-size:var(--fs-nav);
	line-height:var(--lh-nav);letter-spacing:1.4px;text-transform:uppercase;position:relative;padding-block:6px}
.chapeau nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
	background:var(--vert);border-radius:2px;transform:scaleX(0);transform-origin:left;
	transition:transform .22s ease}
.chapeau nav a:hover::after,.chapeau nav .current-menu-item a::after,
.chapeau nav .current_page_item a::after{transform:scaleX(1)}

/* ═══ bandeau titre de page (pages interieures) ═══ */
/* 10/08 — LE BANDEAU FAIT 529 SUR HUIT ECRANS SUR NEUF, et le theme en servait 555 partout.
   Mesure au noeud (reference-figma-v3.json, Frame 54 de chaque ecran) : Reconnaitre, Agir,
   Trouver de l'aide, Signaler, Contact, Espace pro, Partenaires, A propos → h529 EXACTEMENT ;
   seul « numeros d'urgence » sort du rang (h921, deux lignes de titre geant). Le menu occupe
   les 111 premiers px (topbar 26 + chapeau 85, mesures servies exactes) : il reste 418 au
   bandeau. Le theme servait 56 + contenu + 72, ce qui donnait 444 sur Reconnaitre — 26 px de
   trop, repercutes sur TOUT ce qui suit, sur les huit ecrans a la fois.
   POURQUOI UNE HAUTEUR FIXE ET UN CENTRAGE, plutot que deux paddings : les paddings hauts et
   bas de la maquette ne sont PAS constants d'un ecran a l'autre (62/53 sur Reconnaitre, 34/41
   sur Trouver de l'aide, 85/59 sur Contact) alors que la HAUTEUR, elle, l'est. Le centre du
   contenu tombe entre 312 et 336 sur les huit — soit le milieu de la zone (320). La regle qui
   explique les huit ecrans est donc « boite de 418, contenu centre », pas huit paddings.
   Le padding de 24 n'est qu'un garde-fou : sous 900 px la hauteur fixe est relachee (voir la
   requete media), sinon un titre long deborderait au lieu de pousser. */
.bandeau-titre{background:var(--prune);text-align:center;padding:24px 22px;
	min-height:418px;display:flex;flex-direction:column;justify-content:center}
/* 11,6vw rendait 148,48 px a 1280 — la maquette dit 149,0. 11,641vw tombe juste. */
.bandeau-titre h1{color:var(--vert);font-weight:700;text-transform:uppercase;
	font-size:clamp(56px,11.641vw,149px);line-height:.997;letter-spacing:.03em}
/* Largeur et respiration de l'intro : elles sont PROPRES A CHAQUE ECRAN dans la maquette (de
   449 px sur Espace pro a 854 sur Signaler). Le theme en servait 640 pour tout le monde, d'ou
   des retours a la ligne qui ne sont ceux d'aucun ecran. Les valeurs vivent plus bas, une
   ligne par ecran ; 640/28 restent le defaut pour une page sans releve. */
.bandeau-titre .intro{color:var(--blanc);max-width:var(--intro-max,640px);
	margin:var(--intro-gap,28px) auto 0;
	font-size:var(--fs-p);line-height:var(--lh-p);font-weight:500;letter-spacing:.02em}
.bandeau-titre .intro b,.bandeau-titre .intro strong{font-weight:700}
/* LES HUIT INTROS, RELEVEES AU NOEUD (largeur de la boite de texte ; ecart entre le bas du
   titre et le haut de l'intro). Aucune n'est devinee : chacune sort de reference-figma-v3.json.
   Un ecran sans modificateur garde le defaut ci-dessus — il n'est pas casse, il n'est pas
   encore mesure. */
.bt--reconnaitre{--intro-max:673px;--intro-gap:12px}
.bt--agir       {--intro-max:653px;--intro-gap:1px}
.bt--aide       {--intro-max:854px;--intro-gap:11px}
.bt--signaler   {--intro-max:854px;--intro-gap:22px}
.bt--contact    {--intro-max:659px;--intro-gap:53px}
.bt--espace-pro {--intro-max:449px;--intro-gap:37px}
.bt--partenaires{--intro-max:659px;--intro-gap:53px}
.bt--a-propos   {--intro-max:449px;--intro-gap:16px}

/* ═══ heros accueil ═══ */
/* titre geant : encre #6E5362 MESUREE dans HP.png (plus claire que le fond, pas plus
   foncee — lecon recette 28/07 : une couleur ne se juge pas a l'oeil, elle s'echantillonne) */
/* 04/08 — mesure du noeud HP : le bloc `menu` finit a 111, le mot « VIOLENCES » commence a
   157 → 46 px, pas 48. Et la bande entiere fait 675 : 111 (menu) + 564 (heros). */
.heros-hp{background:var(--prune);padding:46px 22px 108px}
.heros-hp .geant{position:relative;max-width:1080px;margin-inline:auto}
/* 04/08 — LES QUATRE VALEURS VIENNENT DU FICHIER FIGMA, plus d'une lecture d'image.
   Noeud « VIOLENCES » de l'ecran HP (reference-figma-v3.json, deposee par le job figma-vernier) :
   corps 163.3 · interligne 181.4 (ratio 1.111) · graisse 700 · interlettrage 4.90px (= .03em),
   boite 933x182. Le theme servait 196px/800/0 : 20 % trop gros, une graisse de trop, et aucun
   interlettrage — sur le mot le plus grand de la page d'accueil.
   La rampe est recalculee pour passer par les MEMES deux points qu'avant (72px a 470px de large)
   et arriver a 163.3 exactement a 1280, la largeur de l'export. */
.heros-hp h1{color:#6E5362;font-weight:700;text-transform:uppercase;
	font-size:clamp(72px,calc(19.02px + 11.272vw),163.3px);line-height:1.111;letter-spacing:.03em}
.heros-hp .sticker{position:absolute;right:0;top:8%;width:clamp(124px,15.2vw,194px);
	filter:drop-shadow(0 6px 18px rgba(0,0,0,.18))}
/* Le groupe de marque finit a y339 dans la maquette, les deux colonnes de texte commencent a
   y424 : 85 px d'air, pas 56. C'est la que dormaient 29 des 31 px qui manquaient au heros. */
.heros-hp .colonnes{max-width:1080px;margin:85px auto 0;display:grid;
	grid-template-columns:1fr 1fr;gap:48px}
/* 01/09 (flotte) — 500 et non 600 : nœud 539:1629 de la HP, corps 35 / graisse 500. La
   fonte porte bien un dessin 600 distinct (fonts/nohemi-600.woff2), l'ecart etait donc reel
   a l'ecran, sur les trois lignes vertes les plus visibles de l'accueil. */
.heros-hp .accroche{color:var(--vert);font-weight:500;font-size:var(--fs-h4);line-height:var(--lh-h4)}
.heros-hp .detail{color:var(--blanc);font-size:var(--fs-p);line-height:var(--lh-p)}

/* ═══ bandeau defilant ═══ */
.marquee{background:var(--menthe);overflow:hidden;padding-block:15px;white-space:nowrap}
.marquee__piste{display:inline-flex;animation:defile 28s linear infinite}
.marquee__piste span{display:inline-flex;align-items:center}
.marquee b{color:var(--prune);font-weight:700;font-size:var(--fs-p2);line-height:var(--lh-p2);letter-spacing:.02em}
/* U+25CF EST ABSENT de la table cmap du Nohemi sous-ensemble (verifie sur les 6 graisses) :
   servie telle quelle, la puce tombe dans une police de repli inconnue et sa taille n'est PAS
   decidee par ce CSS. On la dessine. Mesure maquette : disque plein de 18px, marges 16px. */
.marquee i{color:var(--prune-2);font-style:normal;font-size:0;margin-inline:16px;
	flex:0 0 auto;width:18px;height:18px;border-radius:50%;background:currentColor}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee:hover .marquee__piste{animation-play-state:paused}

/* ═══ titres de section ═══ */
.section-titre--centre{text-align:center}
.section-titre{color:var(--prune);font-weight:700;text-transform:uppercase;
	font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:.005em}
/* 04/08 — mesure du noeud (bande y728 h939) : le titre commence a 82, le bouton finit a 887,
   la bande a 939 → 82 en haut, 52 en bas. Le theme servait 64/64 : symetrique et faux des
   deux cotes, ce qui se compense a moitie et masque l'ecart. */
.section-blanc{padding-block:82px 52px}
/* Les 82 px ci-dessus sont la mesure de la bande blanche de l'ACCUEIL. Sur Reconnaitre la
   maquette met les pastilles a 62 px du haut de la bande (section y530, pastilles y592), et
   `.chips` apporte deja 26 de marge : il reste 36 de padding. Servir 82 ici posait les
   pastilles 46 px trop bas, et la grille entiere avec elles. */
.section-blanc--vignettes{padding-block-start:36px}
/* La piste des pastilles commence a 106 dans la maquette, les cartes a 102 : 4 px de retrait,
   et le contenu de `.cadre` demarre a 100. D'ou ces 6 px, qui ne sont pas un tatonnement. */
.section-blanc--vignettes .chips{margin-inline-start:6px}

/* ═══ 11/08 — LA BANDE BLANCHE DE L'ACCUEIL : 931 SERVIS POUR 939 ══════════════════════════
   LE DEFICIT DE 8 PX N'EST PAS UN ECART, C'EN EST QUATRE QUI SE COMPENSENT A MOITIE — et
   c'est pour ca que trois passes l'avaient manque : le total est petit, chaque terme ne l'est
   pas. Mesure `vernier-hauteurs` du 11/08 08:04Z (DOM reel, 1280, deconnecte), confrontee aux
   noeuds de reference-figma-v3.json. Origines relatives au HAUT DU CONTENU (apres les 82 de
   padding), maquette a gauche du « pour » :

     titre -> intro          26 pour 18 servis    -8   (le gros du deficit)
     intro -> pastilles      25 pour 26 servis    +1
     pastilles -> cartes     56 pour 60 servis    +4
     cartes -> bouton        42 pour 36 servis    -6
                                          somme   -8   →  82 + 805 + 52 = 939

   ET UN CINQUIEME TERME QUI N'EST PAS UNE DISTANCE : la pastille rendait 46,39 px de haut au
   lieu de 46 (voir `.chip` plus bas, `font:inherit` qui effacait le corps du noeud). Les quatre
   marges ci-dessus corrigees, la bande restait a 940 a cause de ces 0,39 px propages a tout ce
   qui suit. C'est le genre de residu qu'aucune relecture ne trouve : il faut le banc.
   Preuve avant pose : `node deploy/tools/banc-bande-blanche.mjs` — il rejoue la bande dans
   Chromium avec cette feuille et les vraies polices, retrouve 931 sur l'etat d'AVANT (celui
   mesure en prod, bug des pastilles compris) et rend 939 avec le modificateur.

   POURQUOI UN MODIFICATEUR D'ECRAN PLUTOT QUE DE CORRIGER LES REGLES GENERALES : les quatre
   valeurs vivent dans des regles PARTAGEES. `.p-intro` sert 5 gabarits — sur `signaler` elle
   est le PREMIER enfant du cadre, la passer a 26 y descendrait toute la page de 8 px ; sur
   `a-propos` et `partenaires` elle suit un `.lead`, pas un titre de section. `.centre` sert 4
   gabarits, dont le bouton d'envoi du formulaire de Contact — l'ecran le plus proche de la
   maquette des quatorze (17,16 %), qu'un +6 px degraderait pour rien. Une valeur relevee sur
   UN ecran ne se generalise pas aux treize autres : c'est exactement la lecon du bandeau de
   titre, ou huit paddings differents cachaient une hauteur commune de 418. Ici c'est
   l'inverse — pas de regle commune a trouver, donc pas de regle commune a ecrire. */
.section-blanc--hp .section-titre + .p-intro{margin-block-start:26px}
.section-blanc--hp .chips{margin-block-start:25px}
.section-blanc--hp .vignettes--fil{margin-block-start:30px}
.section-blanc--hp .centre{margin-block-start:42px}

/* LE HEROS SERT 671 POUR 675, ET ON N'Y TOUCHE PAS — c'est une decision, pas un oubli.
   Meme mesure du 11/08 : `section.heros-hp` rend 560 px sous un menu de 111 (topbar 26 +
   chapeau 85), la maquette veut 563,9 sous 111,1. Le deficit se decompose en deux termes,
   et aucun des deux n'est un defaut du theme :
     · le titre rend 163,3 x 1,111 = 181,42 la ou le noeud annonce une boite de 182 — 0,58 px,
       c'est l'arrondi de la boite Figma, pas un reglage ;
     · la colonne droite rend 5 lignes x 28 = 140 la ou le noeud annonce 143.
   LA PREUVE QUE 143 EST DU JEU ET NON UNE MESURE : l'intro de cette meme bande blanche, meme
   police, meme interligne 28, annonce 56 au noeud — soit EXACTEMENT 2 x 28. Une boite Figma
   qui tombe juste et une autre qui deborde de 3 px avec le meme style, c'est que la seconde a
   ete redimensionnee a la main. Rembourrer le heros de 4 px pour faire baisser un pourcentage
   serait inventer du vide, comme inventer des vignettes pour remplir une grille. */

/* ═══ boutons & chips ═══ */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:42px;padding:10px 15px;
	border:0;cursor:pointer;border-radius:var(--r-btn);font-weight:700;text-decoration:none;
	font-size:16px;letter-spacing:2px;text-transform:uppercase;font-family:var(--police);
	transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}
/* visio Margaux 10/08 : « effet hover sur bouton ok mais pas l'ombre — 90 % ». La note de
   Stephane (16h28) redit la moitie restee ouverte : l'OMBRE manquait toujours. Valeur derivee
   de l'ombre systeme des cartes (.structure:hover) — le releve Figma ne porte pas les effets
   de survol ; a confronter en seance mercredi, et ajuster si Margaux donne la valeur exacte. */
/* Ombre au survol a 90 % (Stephane, 12/08 : « effet hover sur bouton ok mais pas l'ombre —
   90% opacite de l'ombre »). Le deplacement et l'opacite du bouton ne changent pas : c'est
   l'ombre seule qui etait trop legere, a 55 %. */
.btn:hover{transform:translateY(-2px);opacity:.9;box-shadow:0 12px 24px -12px rgba(90,28,58,.9)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn--rose{background:var(--rose-btn);color:var(--prune)}
.btn--prune{background:var(--prune);color:var(--blanc)}
/* 24/08 (Stephane : « bouton SITE couleur vert ») — le bouton des cartes annuaire passe du
   prune au vert de la palette (--vert, celui de l'encre du macaron du pied), encre prune :
   sur la carte menthe, c'est le seul vert qui reste lisible. */
.btn--vert{background:var(--vert);color:var(--prune)}
.chips{display:flex;flex-wrap:wrap;gap:13px;margin-block:26px}
.chip{display:inline-block;padding:12px 19px;border-radius:var(--r-chip);cursor:pointer;
	background:var(--rose);color:var(--prune);font-weight:700;font-size:15px;line-height:22px;
	letter-spacing:.05em;text-transform:uppercase;text-decoration:none;border:0;
	font-family:var(--police);transition:transform .15s ease,background-color .15s ease}
.chip:hover{transform:translateY(-1px)}
/* LES PASTILLES SONT DEVENUES DES BOUTONS (03/08). Elles etaient cinq <span> inertes : jolies,
   inaccessibles au clavier, annoncees comme du texte par un lecteur d'ecran, et surtout sans
   aucun code derriere — on cliquait, rien ne bougeait. Sur un site ou des jeunes cherchent de
   l'aide, un filtre qui a l'air d'un filtre sans en etre un fait croire que le site est casse.
   Le passage a <button> impose de neutraliser le style natif : sans ces trois lignes, le
   navigateur repeint un fond gris et une bordure par-dessus la charte. */
/* ⚠️ 11/08 — CETTE LIGNE PORTAIT `font:inherit`, ET ELLE EFFACAIT LA TYPOGRAPHIE DE LA REGLE
   DU DESSUS. `font:` est un RACCOURCI : `font:inherit` ne remet pas seulement la famille, il
   remet AUSSI `font-size` et `line-height` a la valeur heritee. Les `font-size:15px` et
   `line-height:22px` releves au noeud etaient donc morts depuis le 03/08 — mesure dans Chrome
   ce matin : les pastilles servaient **16 px / 22,4**, la maquette en demande **15 / 22,5** sur
   les trois ecrans qui en portent (accueil, Reconnaitre, Trouver de l'aide).
   Personne ne l'a vu parce que le degat etait SOUS-PIXELLIQUE au bon endroit : la pastille
   finissait a 46,39 px au lieu de 46, l'oeil ne voit rien, et un releve arrondi affiche « 46 ».
   Ces 0,39 px se propageaient pourtant a tout ce qui suit et laissaient la bande blanche a
   940 px au lieu de 939 — le dernier pixel qui resistait au correctif.
   La famille n'a jamais eu besoin de ce raccourci : la regle du dessus pose deja
   `font-family:var(--police)`. On retire donc `font:inherit` au lieu de le reparer — c'est le
   `appearance:none` et le `border:0` qui neutralisent le bouton natif, pas lui. */
.chip{appearance:none;border:0;font-weight:700;text-align:center}
.chip:focus-visible{outline:3px solid var(--prune);outline-offset:2px}
.agir-hp .chip:focus-visible,.peau-prune .chip:focus-visible{outline-color:var(--vert)}
.chip-vide{opacity:.55;font-variant-numeric:tabular-nums;margin-inline-start:4px}
/* `hidden` retire l'element de l'arbre d'accessibilite ; masquer en CSS seul le laisserait
   annonce par un lecteur d'ecran alors qu'il est invisible a l'ecran. Le !important est la
   parce que l'attribut `hidden` n'est qu'un `display:none` de la feuille par DEFAUT du
   navigateur : n'importe quelle regle d'auteur qui donne un display a .vignette le bat, et
   la carte reapparaitrait. La regle est donc ecrite ici plutot que supposee. */
.vignette[hidden]{display:none!important}
.vignettes-vide{margin-block:28px;color:var(--prune);font-size:var(--fs-p2);line-height:var(--lh-p2)}
.peau-prune .vignettes-vide,.agir-hp .vignettes-vide{color:var(--blanc)}
/* Contenu de demonstration : visible d'un coup d'oeil, pour qu'aucune carte fictive ne parte
   en presentation sans qu'on le sache. Le liseré ne change AUCUNE dimension (outline, pas
   border) — une carte de demonstration doit occuper exactement la place de la vraie. */
/* position:relative est INDISPENSABLE ici : sans lui, le badge « exemple » s'ancrerait au
   premier ancetre positionne — la section entiere — et irait se coller dans son coin, loin de
   la carte qu'il designe. */
.vignette--fictif{position:relative;outline:2px dashed rgba(90,28,58,.45);outline-offset:-2px}
.vignette--fictif::after{content:"exemple";position:absolute;top:8px;right:8px;z-index:2;
	background:var(--prune);color:var(--blanc);border-radius:8px;padding:3px 8px;
	font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
/* 17/08 — L'ENCRE DE LA PASTILLE ACTIVE EST ROSE, PAS BLANCHE. Nœud « Toutes » relevé sur les
   TROIS ecrans qui portent des pastilles (HP, Reconnaitre, Trouver de l'aide) : conteneur
   #5A1C3A, texte #FACDE1, 101x46 — la meme valeur trois fois, donc une regle et pas un cas.
   Le blanc venait du couple par defaut « fond fonce → texte blanc » ; il rendait la pastille
   choisie plus dure que tout le reste de la charte. 8,96:1, aucun probleme de lisibilite. */
.chip.actif{background:var(--prune);color:var(--rose-btn)}
/* REPLI DES PASTILLES SUR ECRAN ETROIT — 3 visibles, le reste derriere « + ».
   Capture Stephane 12/08 : sur telephone les 10 pastilles de « Structure d'aide » remplissent
   l'ecran AVANT la premiere carte. On filtrait une liste qu'on ne voyait pas.
   Le bouton n'existe pas sur grand ecran : au-dessus de 780px tout reste affiche, donc rien
   ne change pour l'usage bureau — la capture visait le telephone, on ne touche pas au reste.
   ⚠️ On masque par une CLASSE, pas par l'attribut `hidden` : le meme jour, le filtre de /aide/
   posait `hidden` sur les cartes et `display:flex` les reaffichait. Ici le masquage doit en
   plus etre CONDITIONNEL a la largeur — un attribut ne sait pas faire ca, une media query si. */
.chips-plus{display:none}
@media (max-width:780px){
	.chips-plus{display:inline-block;appearance:none;border:0;cursor:pointer;
		padding:12px 19px;border-radius:var(--r-chip);background:var(--prune);color:var(--blanc);
		font-weight:700;font-size:var(--fs-p2);font-family:inherit}
	.chips-plus:focus-visible{outline:3px solid var(--prune);outline-offset:2px}
	/* Au repli, on ne garde que les 3 premieres. `.chip.actif` est TOUJOURS reaffichee :
	   sans cette ligne, choisir « Seniors » puis replier ferait disparaitre la pastille qui
	   dit ce qu'on regarde — l'ecran mentirait sur son propre etat. */
	.chips[data-replie] .chip:nth-of-type(n+4){display:none}
	.chips[data-replie] .chip.actif{display:inline-block}
}
.chips-rang{display:flex;align-items:center;justify-content:space-between;gap:16px}
/* La piste des pastilles : UNE rangee, largeur de la maquette (Frame 18 : 875 px), defilement
   horizontal plutot que retour a la ligne. Sans elle, les pastilles s'empilaient sur trois
   rangees et la section blanche faisait 990 px au lieu de 939. La barre de defilement est
   masquee : les fleches a droite sont le geste prevu par la maquette. */
.chips-piste{display:flex;align-items:center;gap:16px;flex:0 1 875px;min-width:0;
	overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.chips-piste::-webkit-scrollbar{display:none}
.chips-piste>*{flex:0 0 auto}
/* visio Margaux 10/08 : « filtres coupés sur la page d'accueil » — le bord droit tranchait une
   pastille net, sans rien dire qu'il y en a d'autres. Le fondu dit « ça continue », le défilement
   existait déjà.
   ☠️ 24/08 (capture Stephane : « pas de flou ici ») — LE FONDU S'AFFICHAIT MEME QUAND RIEN
   N'EST COUPE. A 1280 la piste mesure 875 px pour 876 de contenu : TOUT est visible, et le
   fondu grisait quand meme « INTRAFAMILIALES » — il disait « ça continue » alors que rien ne
   continue. Le masque est donc porte par la classe `.chips-piste--suite`, posee par le JS
   (pasici_filtre_js) SEULEMENT quand il reste du contenu a droite (tolerance 4 px, le pixel
   fantome de l'arrondi sub-pixel est precisement ce qui allumait le fondu a tort), et retiree
   une fois la piste defilee au bout. La demande de Margaux reste servie : une pastille
   reellement coupee est toujours annoncee par le fondu. Sans JS : pas de fondu — degrade
   honnete, on voit une coupe nette plutot qu'un voile qui ment. */
.chips-piste--suite{mask-image:linear-gradient(90deg,#000 90%,transparent);
	-webkit-mask-image:linear-gradient(90deg,#000 90%,transparent)}
/* 17/08 — LES DEUX FLECHES ETAIENT PLUS PETITES QUE LA MAQUETTE, ET DE LA MAUVAISE ENCRE.
   Nœuds HP (Button x1076 et x1140, y990) : 47x46, rayon 14, fond #5A1C3A, glyphe #FACDE1,
   corps 15 — et 17 px entre les deux (1140 - (1076+47)). Le theme servait 38x32, rayon 10,
   glyphe blanc, corps 16, ecart 8 : une cible de 32 px de haut sous le minimum de 44 px, a
   cote de pastilles de 46. Elles sont dans la meme rangee que les pastilles (hauteur 46
   commune), donc les remettre a 46 ne bouge PAS la hauteur de la bande blanche — c'est ce qui
   rend ce correctif sans effet de bord sur les 939 px mesures plus haut.
   Le rayon vient de `--r-chip` (14) et non de `--r-btn` (10) : la maquette donne 14 aux
   pastilles ET aux fleches, 10 au seul bouton « tout voir ». */
.fleches{display:flex;gap:17px}
.fleche{width:47px;height:46px;border:0;border-radius:var(--r-chip);background:var(--prune);
	color:var(--rose-btn);font-size:15px;font-weight:700;cursor:pointer;
	transition:transform .15s ease,background-color .15s ease}
.fleche:hover{transform:translateY(-1px);background:var(--prune-3)}
/* Le carrousel de l'accueil porte les MEMES cartes que la grille de Reconnaitre : meme largeur
   de 242 et meme gouttiere de 36, relevees sur HP (x102/380/658/936). */
.vignettes--fil{display:grid;grid-auto-flow:column;grid-auto-columns:242px;
	overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-block-start:34px;gap:36px}
.vignettes--fil::-webkit-scrollbar{display:none}
.vignettes--fil .vignette{scroll-snap-align:start}

/* ═══ cartes vignettes (accueil + reconnaitre) ═══ */
/* 10/08 — LA CARTE EST LA MEME SUR L'ACCUEIL ET SUR RECONNAITRE, et la maquette la donne au
   pixel : 242 x 442, colonnes a x102/380/658/936 (pas de 278 → GOUTTIERE 36, pas 20), bloc de
   4 colonnes large de 1076 centre dans les 1080 du contenu. Le theme servait des colonnes
   elastiques (`minmax(230px,1fr)`) avec la gouttiere globale de 20 : a 1280 ca donnait des
   cartes de 255 et un pas de 275. Toutes les cartes etaient donc trop larges de 13 px, et
   toute la grille decalee — sur les DEUX ecrans.
   `auto-fill` en largeur FIXE plutot que `repeat(4, …)` : a 1280 il pose exactement 4 colonnes
   (4x242 + 3x36 = 1076 ≤ 1080), et il en pose 3 puis 2 quand la fenetre retrecit, sans qu'une
   requete media ait a le prevoir. */
.vignettes{display:grid;grid-template-columns:repeat(auto-fill,242px);justify-content:center;
	gap:36px;max-width:1076px;margin-inline:auto;margin-block-start:34px}
/* L'ECART PASTILLES → CARTES N'EST PAS LE MEME SUR LES DEUX ECRANS : 56 px sur l'accueil
   (pastilles y987+46, cartes y1089), 66 sur Reconnaitre (y592+46, cartes y704). Le 66 est donc
   pose ICI et pas sur `.vignettes`, sinon il pousse aussi le carrousel de l'accueil — mesure
   du banc : il descendait de 32 px. `.chips` apporte 26 de marge basse qui se fond dans
   celle-ci (marges adjacentes) : 66 est bien l'ecart total, pas un ajout. */
.section-blanc--vignettes .vignettes{margin-block-start:66px}
/* 442 EXACTEMENT, pas « au moins 442 » : dans la maquette les quatre cartes d'une rangee ont la
   meme hauteur quel que soit le nombre de lignes de leur titre, et le titre commence toujours a
   350 du haut de la carte (11 + image 270 + 13 + tags 43 + 13). Avec `min-height`, un titre de
   trois lignes gonflait sa carte et decalait la rangee suivante — c'est ce qui rendait les
   rangees servies hautes de 455 et 479 la ou la maquette en veut 442. Le titre le plus long
   des dix (trois lignes, 73 px) finit a 423 : il tient. */
.vignette{background:var(--menthe);border-radius:var(--r-carte);padding:11px 13px;height:442px;
	transition:transform .22s ease,box-shadow .22s ease}
.vignette:hover{transform:translateY(-4px);box-shadow:0 16px 34px -20px rgba(90,28,58,.5)}
/* 215 x 270 au noeud. `aspect-ratio:4/5` sur 215 rendait 268,75 — pres, mais la hauteur de la
   carte etant desormais fixe, une image plus courte de 1,25 px remonte tout le bloc du bas. */
.vignette img{border-radius:10px;width:100%;height:270px;object-fit:cover}
/* 1.9.15 — LE DESSIN NU SUR SA FORME (cartes du Style Guide). Quand la vignette n'a pas
   de vrai recadrage portrait, la carte pose le dessin de fiche ENTIER (`contain`, jamais
   de zoom sauvage) sur la couleur de la vignette (`--forme`, meta pasici_couleur, repli
   #FEEFAC). Le padding donne l'air du dessin dans sa case, comme les planches. */
.vignette-forme{display:block;border-radius:10px;height:270px;background:var(--forme,#FEEFAC);
	overflow:hidden}
.vignette .vignette-forme img{object-fit:contain;border-radius:0;padding:10px;box-sizing:border-box}
/* REPLI D'ILLUSTRATION — meme boite que l'image (270 px), donc aucune carte ne se deforme
   quand Margaux livrera les 12 manquantes : le repli s'efface, l'image prend sa place.
   Aplat de la charte + deux halos radiaux tres doux : de loin c'est une texture, de pres
   ca ne pretend pas etre une photo. Aucun texte : « image manquante » ecrit sur un mur
   destine a des jeunes qui cherchent de l'aide dirait « site inacheve », pas « en cours ». */
.vignette-repli{border-radius:10px;width:100%;height:270px;
	background-color:var(--rose);
	background-image:radial-gradient(circle at 28% 30%,rgba(255,255,255,.55) 0,transparent 42%),
		radial-gradient(circle at 74% 76%,rgba(90,28,58,.14) 0,transparent 46%)}
.vignette-repli--1{background-color:var(--jaune)}
.vignette-repli--2{background-color:var(--bleu)}
.vignette-repli--3{background-color:var(--mauve)}
.vignette-repli--4{background-color:var(--orange)}
.vignette-repli--5{background-color:var(--vert)}
/* tags empiles UN PAR LIGNE comme la maquette (lecon recette 28/07) */
.vignette .tags{display:flex;flex-direction:column;align-items:flex-start;gap:3px;margin-block:13px}
/* Fond PRUNE et encre ROSE CLAIR : le releve donne #5A1C3A sur #FCC8D7. Le theme servait
   prune-3 sur blanc — deux ecarts qui se voyaient a peine separement et changeaient la couleur
   de l'etiquette ensemble. Corps 12 (et non 11) : 4 + 12 + 4 = les 20 px de la maquette. */
/* ☠️ 17/08 — LE CORRECTIF DU 12/08 A INVERSE CE QUI ETAIT JUSTE, et il faut dire pourquoi
   sinon le prochain le refera. Sa note disait : « le conteneur de chaque etiquette porte le
   fond #FCC8D7 ». Le conteneur ne porte pas ce fond — c'est le NŒUD DE TEXTE qui le porte.
   Dans un relevé Figma, `fond` sur un FRAME est la couleur de la boite, sur un TEXT c'est la
   couleur de l'ENCRE. Les deux s'appellent `fond` : c'est tout le piege, et il produit
   exactement une inversion.
   TROIS MESURES CONCORDANTES, deux du relevé et une de l'image (donc independante du relevé) :
     · reference-figma-v3.json  (03/08) — HP et Reconnaitre : Button FRAME fond #5A1C3A,
       TEXT « Violence numeriques » fond #FCC8D7 ;
     · releve-frais-20260812.json (12/08, le relevé meme que citait la note) — a l'identique ;
     · HP.png, histogramme du rectangle de la pastille (115,1383 161x20) : 64 % #5A1C3A,
       11 % #FCC8D7. Un fond occupe la majorite des pixels, une encre la minorite — donc le
       fond EST le prune. Aucune lecture de JSON la-dedans.
   Et la demande de Stephane du 12/08 (« les tags devraient etre rose comme maquette ») est
   SERVIE par ce sens-ci, pas par l'autre : avant le 12/08 le theme servait prune-3 sur BLANC.
   Ce qui manquait etait le rose de l'ENCRE, pas un fond rose. Contraste identique dans les
   deux sens (8,65:1), donc rien a arbitrer cote lisibilite. */
.vignette .tags b{background:var(--prune);color:var(--rose);border-radius:999px;
	padding:4px 11px;font-size:12px;line-height:12px;font-weight:700;letter-spacing:0;text-transform:uppercase}
/* 01/09 (flotte) — le nœud ne porte AUCUN interlettrage ; le global h3 en mettait 0,5. */
.vignette h3{color:var(--prune);font-weight:700;font-size:22.62px;line-height:24px;letter-spacing:0}
.centre{text-align:center;margin-block-start:36px}

/* ═══ section « comment agir » (fond prune + blob vert) ═══ */
/* Bande « agir » (y1667 h685) : le titre « Comment agir ? » commence a 97, les trois cartes
   finissent a 615, la bande a 685 → 97 en haut, 70 en bas. Le theme servait 72/72. */
.agir-hp{background:var(--prune);position:relative;overflow:hidden;padding-block:97px 70px}
.agir-hp::before{content:"";position:absolute;right:-12%;top:18%;width:56%;height:120%;
	background:var(--menthe);border-radius:48% 52% 46% 54%/58% 44% 56% 42%}
.agir-hp .cadre{position:relative}
.agir-hp .entete{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.agir-hp .section-titre{color:var(--blanc)}
.agir-hp .chapo{color:var(--blanc);max-width:20em;margin-block:22px 40px;font-size:var(--fs-p);line-height:var(--lh-p)}
.cartes-agir{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gouttiere)}
/* 04/08 — la carte de la maquette (Frame 9 : x92 l344 h272) se decompose au pixel :
   20 · titre 84 · 25 · texte 56 · 25 · bouton 42 · 20 = 272, et 20 px a gauche aussi
   (titre a x112, carte a x92). Le theme servait 26/24/22 de padding et 16 de gouttiere :
   la carte faisait 290, soit +18, et c'est ce qui portait les +16 px de toute la bande. */
/* 04/08 10h20 — J AVAIS LU 25 SUR LA PREMIERE CARTE ET GENERALISE. Les trois cartes de la
   maquette ont des gouttieres DIFFERENTES pour atteindre la MEME hauteur de 272 :
     carte 1   20 · titre 84 · 25 · texte 56 · 25 · bouton 42 · 20 = 272
     carte 2   20 · titre 86 · 10 · texte 84 · 10 · bouton 42 · 20 = 272
   Ce n'est donc pas une gouttiere fixe : c'est une HAUTEUR FIXE et l'espace restant reparti
   entre les trois blocs. Une gouttiere de 25 posee sur le contenu le plus long donne 300.
   `space-between` reproduit exactement les deux cas sans qu'aucune valeur ne soit devinee. */
.carte-agir{border-radius:var(--r-carte);padding:20px;background:var(--blanc);
	display:flex;flex-direction:column;min-height:272px;justify-content:space-between;
	transition:transform .22s ease,box-shadow .22s ease}
.carte-agir:hover{transform:translateY(-4px);box-shadow:0 16px 34px -18px rgba(0,0,0,.35)}
/* 01/09 (flotte) — 500 et non 700, sur les DEUX ecrans que cette regle sert : les cartes
   « Comment agir » de l'accueil (nœuds 539:1679/1689/1700) et celles de la page Agir
   (539:1212/1222/1233). Les six nœuds demandent 500. Deux crans d'ecart sur des titres de
   25 px poses au milieu de la page. */
.carte-agir h3{color:var(--prune);font-weight:500;font-size:25px;line-height:28px}
.carte-agir p{color:var(--prune);font-size:var(--fs-p);line-height:var(--lh-p);letter-spacing:.02em}
/* la maquette sert le bouton PLEIN (98x42) dans les cartes aussi : la surcharge reduite
   n'existe nulle part dans les exports. */
/* plus de `margin-block-start:auto` : il collait le bouton en bas et laissait TOUT l'espace
   entre le texte et lui, au lieu de le repartir comme la maquette. `space-between` s'en charge. */
.carte-agir .btn{align-self:flex-start}
.carte-agir--jaune{background:var(--jaune)}
.carte-agir--orange{background:var(--orange)}
.carte-agir--mauve{background:var(--mauve)}

/* ═══ CTA « tu cherches de l'aide ? » ═══ */
/* LE BLOC ALTERNE AVEC LA SECTION QUI LE PRECEDE, il n'est pas « inverse ». Mesure sur les
   TROIS ecrans ou il apparait : fond BLANC sur HP.png (il suit agir-hp, prune), fond PRUNE sur
   Reconnaitre.png et Page-detail.png (ils suivent une section blanche) — meme onde au pixel
   pres dans les trois cas. L'audit du 03/08 concluait a une inversion globale : la poser aurait
   casse deux pages sur trois.
   ET L'ENCRE DOIT SUIVRE LE FOND : le blanc n'est pas herite ici, il est ecrit en dur sur les
   enfants. Retourner le fond seul donnerait blanc sur blanc, ratio 1,00:1 — texte invisible.
   D'ou la paire de variables plutot que deux editions independantes. */
/* ⚠️ 11/08 — LE PANNEAU MENTHE DOIT DEBORDER JUSQU'AU BORD DE L'ECRAN, SINON SON TEXTE
   DISPARAIT SOUS L'ONDE (capture Stephane : « 142 – Numero gratuit… » illisible, coupe en
   « ide aux / nes en / uisse. »).
   LA COLONNE ETAIT PLAFONNEE A 524 PX PENDANT QUE SON PADDING DROIT SUIVAIT LA FENETRE. Ce
   padding, `(100vw - 1280px)/2 + 100`, est juste dans son intention : il aligne le texte sur
   la grille de 1280 quel que soit l'ecran. Mais applique DANS une colonne qui, elle, reste a
   524, il la mange. Mesure (banc, largeur de boite de texte disponible) :
     1280 -> 380 px    1440 -> 300    1600 -> 220    1920 -> 60    1999 -> 21    2560 -> 0
   Sous ~1700 px de fenetre le texte ne rentre plus, et comme il ne peut pas devenir plus
   etroit que son mot le plus long (158 px), il DEBORDE A GAUCHE — a 1999 px il commence a
   -93 px du bord de la colonne, c'est-a-dire en plein dans l'onde de 126 px.
   Le defaut ne pouvait pas se voir a 1280, la largeur ou tout le chantier mesure. C'est un
   ecran de 1920 ou 2560 qui le revele — donc l'ecran de la plupart des gens.
   LA CORRECTION : la colonne emporte le debordement au lieu de le subir. Elle vaut desormais
   524 + la moitie de ce qui depasse de 1280, exactement ce que le padding lui reprend : la
   boite de texte fait 380 px a TOUTES les largeurs, et le panneau va au bord comme au dessin.
   Sous 900 px la requete media repasse en colonne unique et le padding retombe a 44 : intact. */
.cta-aide{--cta-fond:var(--prune);--cta-encre:var(--blanc);
	background:var(--cta-fond);display:grid;overflow:hidden;
	grid-template-columns:1fr calc(min(524px,41%) + max(0px,(100vw - 1280px)/2))}
.home .cta-aide{--cta-fond:var(--blanc);--cta-encre:var(--prune)}
.cta-aide__gauche{padding:72px 22px 72px;max-width:640px;margin-inline-start:max(22px,calc((100vw - 1280px)/2 + 78px))}
/* « tu souhaites faire un signalement » (HP y2935) : corps 70 · graisse 700 · interlettrage 2,10px.
   C'est le 2e ecart de la page dans `vernier-causes` (11 080 px), et l'outil disait deja
   « plus d'encre sur le site » — deux mesures independantes qui designent la meme graisse. */
.cta-aide__gauche h2{color:var(--cta-encre);font-weight:700;text-transform:uppercase;
	font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:.03em}
.cta-aide__gauche p{color:var(--cta-encre);margin-block:26px 34px;font-size:var(--fs-h4);line-height:var(--lh-h4);font-weight:500;letter-spacing:.02em}
.cta-aide__droite{position:relative;background:transparent;display:flex;flex-direction:column;
	justify-content:center;align-items:flex-end;gap:22px;text-align:right;
	/* ☠️ 24/08 (capture Stephane : « texte cache a droite .. selon la largeur ») — ce
	   retrait droit GRANDISSAIT avec l'ecran ((100vw-1280)/2+100) pendant que le blob,
	   lui, est ancre au bord droit : au-dela de ~1400px le texte prune sortait du vert et
	   s'eteignait sur le prune. Retrait FIXE de 100px (la valeur maquette a 1280) : le
	   contenu reste sur le blob a TOUTE largeur. */
	padding:56px 100px 56px 44px}
/* ═══ LE BLOB VERT DE LA V4, EXPORTE ET POSE AU PIXEL (24/08, « exporte la forme de droite
   .. pour l'avoir exactement pareil a gauche »). Trois reconstructions successives (polygone
   a pourcents entiers → lissage des 63 points → courbe epuree a 8 ancres) n'ont jamais
   convaincu : la V4 ne dessine pas une bande ondulee mais UN VECTEUR FESTONNE COMPLET de
   688x676 (img/onde-v4.svg, export du nœud I…;248:1737), dont la bande ne montre que le
   bord gauche.
   PLACEMENT MESURE, PAS DEVINE — trois sources croisees au dixieme :
     · boite de layout du nœud : 799,18x811,07 a dx 700 / dy −175 de la bande (1280x497) ;
     · export : 688x676 — la boite de layout est CENTREE autour du rendu, marges
       (799,18−688)/2 = 55,59 et (811,07−676)/2 = 67,54 ;
     · absoluteRenderBounds (3e passe du job figma-onde-v4) : bord gauche VISIBLE a
       x 755,74 = 700 + 55,59 ✓ (concordance a 0,15 px pres).
   D'ou : rendu a droite −163,74 px (= 1280 − 755,74 − 688), haut −107,46 (= −175 + 67,54).
   ANCRE A DROITE et non a gauche : a toute largeur d'ecran le blob colle au bord droit
   comme dans la maquette, son debord droit reste hors champ (overflow:hidden du parent).
   Le panneau devient transparent : le vert EST le blob, plus une couche a decouper — le
   clipPath #pasici-onde de parts/cta-aide.php part avec. Verifie au banc navigateur
   (bande 1280x497 repliquee) contre la capture V4 : bord festonne et badge au meme endroit. */
/* ⚠️ 01/09 — LA FORME VERTE EST RETIREE. Captures de Stephane (« enleve element vert ici »,
   puis « fond comme maquette ici » sur /reconnaitre/) : la V4 sert ce bloc en PRUNE UNI, le
   badge 142 pose dessus, sans onde. Le vecteur onde-v4.svg avait ete pose le 24/08 d'apres
   la V3 ; la V4 ne le porte plus. On retire la regle plutot que de la neutraliser : une
   declaration que rien ne rend est du code mort qui survit aux relectures. Le fichier
   img/onde-v4.svg reste au depot, il sert ailleurs. */
/* Au-dela de 1280, la partie VISIBLE du blob garde ~524 px depuis le bord droit : les
   enfants du panneau se bornent a 420 px pour rester poses sur le vert (badge 286, texte
   ~310 au releve — invisible a 1280, garde-fou au-dela). */
.cta-aide__droite>*{max-width:420px}
.cta-aide__droite>*{position:relative}
/* 310px = la largeur du nœud texte (releve V3, confirme V4) : a 100px du bord, la ligne la
   plus longue finit a 410 — sous la bosse la plus rentrante du feston (414). 34em laissait
   la ligne s'etendre jusque dans le prune. */
/* ⚠️ 01/09 — CE TEXTE ETAIT PRUNE SUR PRUNE, donc INVISIBLE, sur toutes les pages
   internes. Contraste 1:1, sur le paragraphe qui donne le 142 — le numero gratuit d'aide
   aux victimes, 24h/24. Le bloc porte deja les deux jetons qu'il faut : `--cta-encre` vaut
   blanc par defaut et prune sur l'accueil (.home, ou le fond s'inverse), et le titre comme
   le paragraphe de gauche s'en servent. Celui-ci ecrivait `var(--prune)` EN DUR : juste sur
   l'accueil par coincidence de fond, faux partout ailleurs.
   Trouve par la maquette V4, qui passe ce texte en #FFFFFF sur Reconnaitre (bloc rouge de
   Margaux) alors qu'il reste prune sur l'accueil — deux valeurs differentes pour le meme
   texte, c'est-a-dire la signature d'un jeton, pas d'une couleur. Le correctif soigne donc
   la CAUSE (un jeton non utilise la ou il devait l'etre) et pas le symptome : ecrire
   « blanc » ici aurait casse l'accueil dans l'autre sens. */
.cta-aide__droite p{color:var(--cta-encre);font-size:var(--fs-p);line-height:var(--lh-p);max-width:310px;text-align:right;font-weight:500;letter-spacing:.02em}
/* 20/08 — ROTATION RETIREE (Stephane : « pas de travers la bulle jaune 142 »). L'inclinaison
   de 3 degres etait un choix de theme, elle n'est nulle part dans la maquette.
   ⚠️ ELLE PORTAIT UN EFFET DE BORD, et le retrait ne le reproduit pas par accident : ce
   `rotate` creait un contexte d'empilement, et c'est LUI qui faisait peindre le badge
   au-dessus de l'onde (voir le commentaire ci-dessus). Ce role est desormais tenu par
   `.cta-aide__droite>*{position:relative}`, deja pose, et dont le badge est bien un enfant
   DIRECT (`parts/cta-aide.php`, ligne 8) — verifie avant le retrait, pas apres. */
.badge142{width:132px;transition:transform .25s ease}
.cta-aide__droite:hover .badge142{transform:scale(1.05)}

/* ═══ section signalement (hp) ═══ */
/* Meme alternance, en miroir, et l'audit ne l'avait pas vue : prune sur la HP, BLANC a encre
   prune sur la fiche (mesure Page-detail.png). */
.signal-hp{--sig-fond:var(--prune);--sig-encre:var(--blanc);background:var(--sig-fond);padding-block:84px}
.single-vignette .signal-hp{--sig-fond:var(--blanc);--sig-encre:var(--prune)}
/* « Tu cherches de l'aide ? » (HP y2418 et y2915) : corps 70 · graisse 700 · interlettrage 2,10px.
   3e ecart de la page (9 121 px), lui aussi annonce « plus d'encre sur le site ». */
.signal-hp h2{color:var(--sig-encre);font-weight:700;text-transform:uppercase;
	font-size:var(--fs-h2);line-height:var(--lh-h2);max-width:12em;letter-spacing:.03em}
.signal-hp p{color:var(--sig-encre);margin-block:22px 32px;max-width:24em;font-size:var(--fs-p);line-height:var(--lh-p)}

/* ═══ pastilles urgence ═══ */
.pastilles{display:grid;grid-template-columns:repeat(3,minmax(180px,240px));
	justify-content:center;gap:60px;margin-block:44px}
.pastilles figure{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.pastille{width:150px}
/* « pas d effet rotation .. en hover ou autre ici » (Stephane, 20/08) : le grossissement
   reste, il dit que la pastille repond ; la rotation part. */
/* 1.9.90 (08/09, 02h25) : AU-DELA DE 1280 PX LA FORME REJOINT LE BORD DROIT. Elle faisait
   753 px fixes, la largeur de la maquette : mesure avant, prune visible a droite sur 48 px a
   1440, 168 a 1680, 288 a 1920 (rien a 1280, elle y depasse deja de 37). Second calque de
   masque rectangulaire de 700 px au bord, compose en `add` ; `background-position` et
   `background-size` du dessin ne sont PAS touches, il ne bouge donc pas. Borne a 1281 px. */

/* 1.9.89 ⑪ — L'EFFET DE SURVOL DES PASTILLES EST RETIRE (capture Stephane sur /aide/). La
   regle etait `.pastilles figure:hover .pastille{transform:scale(1.05)}` ; mesure avant
   correctif au navigateur, souris posee sur la pastille « Urgences medicales » (144) : la
   boite passait de 150x146,81 a 157,5x154,15, `matrix(1.05,…)`. La `transition:transform`
   de `.pastille` part avec elle : aucune autre regle ne pose de `transform` sur cet element,
   elle n'avait plus d'objet. Ce sont des numeros d'urgence, pas des vignettes a explorer. */
/* ⚠️ 01/09 — MEME PIEGE DE CASCADE QUE LES LABELS. Le 25/28 de la maquette etait pose sur
   le selecteur nu `figcaption` ; `.pastilles figcaption` le bat, et les legendes des trois
   numeros d'urgence sortaient a 19/24 sur /aide/ comme sur /urgences/. */
.pastilles figcaption{font-size:25px;line-height:28px;font-weight:500}
.peau-prune{background:var(--prune)}
.peau-prune .pastilles figcaption{color:var(--blanc)}
.peau-menthe{background:var(--menthe);padding-block:56px}
/* ── « POUR LES SITUATIONS NON URGENTES » — Frame 51 de la V4 ────────────────────────────
   Section neuve : elle n'existe pas en V3, et le site ne la porte pas. Releve au nœud
   (Frame 51, 1280x606 a y891, fond #A0DBC4), coordonnees ramenees au bord de la bande :
     titre        x95  y84   corps 70 graisse 700 — EN CASSE NORMALE, pas en capitales :
                  c'est pour ca qu'on ne reutilise pas .section-titre, qui force uppercase ;
     paragraphe   x98..624  (526 de large)  y252  corps 20 graisse 500 ;
     grille logos x704..1216 (512)          y234  — deux colonnes, deux rangees :
                    ciao   x763 y234 105x57   legende « 11-20 ans »            y319
                    ontec. x948 y234 229x33   legende « 18-25 ans »            y308
                    vqf    x753 y376 124x97   legende « …dans le couple »      y479
                    147    x1017 y396  89x111 legende « Des 11 ans, 24/24h »   y507
   Le rapport 526/512 des deux colonnes est repris tel quel ; l'ecart entre elles (704-624)
   fait 80. Sous 900 px les colonnes s'empilent : la maquette ne decide qu'a ses largeurs. */
.aide-nonurg{background:var(--menthe);padding-block:56px}
.aide-nonurg h2{color:var(--prune);font-weight:700;font-size:var(--fs-h2);line-height:var(--lh-h2);
	letter-spacing:.03em;margin:0 0 30px;max-width:16ch;text-wrap:balance}
.aide-nonurg .duo{display:grid;grid-template-columns:526fr 512fr;gap:80px;align-items:start}
.aide-nonurg .texte{color:var(--prune);font-size:var(--fs-p2);line-height:var(--lh-p2);
	font-weight:500;margin:0}
.aide-nonurg .logos{display:grid;grid-template-columns:1fr 1fr;gap:46px 40px;justify-items:center}
.aide-nonurg figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:20px;
	text-align:center;justify-content:flex-start}
/* hauteur bornee, largeur libre : les quatre logos n'ont ni le meme format ni le meme rapport
   (105x57, 229x33, 124x97, 89x111). Une largeur commune en ecraserait trois sur quatre. */
/* 1.9.77 — CHAQUE logo a SA taille, celle du nœud Figma. Le `max-height:97px` commun donnait a
   ciao 177x96 (dessine 105x57) et a 147 77x96 (dessine 89x111) : deux des quatre n'etaient
   justes que parce que leur rapport tombait sur le plafond, et le commentaire deux lignes plus
   haut citait deja les quatre tailles sans les appliquer. Les tailles arrivent en attributs
   width/height du HTML (page-aide.php), ce qui supprime aussi le saut de mise en page ;
   `height:auto` garde le rapport quand la colonne devient plus etroite que le logo.
   ⚠️ Poser le PHP SANS cette ligne ne changerait RIEN a l'ecran : le plafond continuerait de
   brider. Un controle qui lirait le HTML servi verrait les bons attributs et dirait « fait ». */
.aide-nonurg figure img{max-width:100%;height:auto;object-fit:contain}
/* 1.9.89 (08/09, 01h45) : ⑪ l'effet de survol des pastilles de numeros d'urgence est retire
   (grossissement de 5 % mesure au navigateur : 150x146,81 -> 157,5x154,15), et la transition
   qui ne servait qu'a lui part avec. ⑫ les legendes des quatre logos de /aide/ ne sont plus
   soulignees : le soulignement venait du `<a>`, pas du `figcaption` qui avait deja `none`. Le
   lien reste cliquable et son focus clavier garde un contour visible. */

/* 1.9.88 (08/09, 01h05) : PLUS DE BANDEAU BLANC EN HAUT DES FICHES. `body.single-vignette
   .bandeau-fiche` remontait de -111px en supposant un chapeau de 111 : vrai a 1440, faux des
   que le menu passe a la ligne (125 a 901, 142 a 390), d'ou 14 puis 31 px de fond blanc
   au-dessus du prune, VISIBLES PAR UN VISITEUR (mesure sans session WordPress, `#wpadminbar`
   absent, marges html/body a 0). Le retrait suit maintenant la hauteur reelle du chapeau,
   publiee dans `--h-chapeau` ; repli 111px si le JS ne tourne pas. */

/* 1.9.87 (08/09, 00h45) : L'ANCRE SE LIT SUR LE PARAGRAPHE. Ma 1.9.86 mesurait le temoin, qui
   vit dans la grille du heros : il heritait de la gouttiere (bouton 50 px sous le paragraphe au
   lieu de 2) et s'alignait a gauche de sa colonne (314 px trop a gauche). Mesure au navigateur
   avant correctif. La maquette exprime la place PAR RAPPORT AU PARAGRAPHE : le JS lit donc
   `.heros-hp .detail` et pose le bouton 2 px sous son bas, bord droit sur le sien. Le temoin ne
   sert plus qu'a dire QUAND basculer. */

/* 1.9.86 (08/09, 00h30) : SUR L'ACCUEIL, LE BOUTON « QUITTER » COMMENCE DANS LE HEROS, a la
   place que lui donne la maquette (2 px sous le paragraphe « Une violence, ca peut etre… »,
   bord droit sur celui de sa colonne — mesure prise sur l'export du cadre HP au depot), puis
   passe en flottant bas-droite des que cette place sort de l'ecran. Temoin invisible +
   IntersectionObserver + fondu d'opacite. L'etat par defaut reste `fixed` : sans JS, le bouton
   est flottant et la sortie d'urgence reste atteignable. Rien ne change sur les autres pages. */

/* 1.9.85 (07/09, 23h55) : LE BOUTON « QUITTER LE SITE » REPASSE EN CAPITALES. Arbitrage de
   Stephane sur capture Figma, qui renverse celui du QCM de 18h30 : le corpus ne porte pas
   `textCase`, la largeur mesuree (128 px) avait fait pencher pour les minuscules, la capture
   tranche pour les capitales. L'interlettrage reste 0,75 et le corps 15, valeurs du nœud
   724:2424 ; le fond corail, le rayon 14 et la hauteur 46 ne bougent pas.
   ⚠️ RESTE DU : l'icone du nœud 724:2428 (« image 8 [Vectorized] », 22x22). Elle exige
   FIGMA_TOKEN, absent de la session Mac : le SVG en ligne de footer.php porte encore le
   pictogramme maison. Non fait, pas oublie. */

/* 1.9.84 (07/09, 23h05) : LES TROIS RESPIRATIONS DE L'ACCUEIL SOUS 900 PX (capture iPhone de
   Stephane, 20h10). Mesure avant : haut du heros 46, bas du heros 78, haut de la section
   blanche 82. Apres : 61 (+15), 63 (-15), 67 (-15). La section blanche visee est celle qui
   SUIT le heros (`.heros-hp + .section-blanc`), pas toutes les sections blanches du site.
   Rien ne change au-dessus de 900 px. */

/* 1.9.83 (07/09, 22h45) : LA RESERVE VA SUR `.barre-basse`, PAS SUR `.pied`. Ma 1.9.82 avait
   pose les 52 px sous le pied ; la preuve d'apres a montre « Politique de confidentialite » et
   « Ville de Vernier » toujours recouverts, parce qu'ils vivent dans `div.barre-basse`, le bloc
   qui vient APRES le pied et qui termine le document. Un retrait sous le pied ne faisait que
   pousser la barre-basse plus bas. Correction : la reserve sur le dernier bloc de la page. */

/* 1.9.82 (07/09, 22h30) : SOUS 900 PX, PLUS AUCUNE COMMANDE SOUS LES BOUTONS FIXES. Mesure
   avant correctif, page defilee jusqu'au bas a 390 : « Politique de confidentialite » et
   « Ville de Vernier » etaient recouverts par « Quitter le site » et la pastille cookies, et en
   fin de document aucun defilement ne pouvait les degager. Reserve de 52 px (hauteur du plus
   grand bouton fixe, 40, + 12) ajoutee au retrait bas du pied : 69 -> 121. Aucun des deux
   boutons n'est cache ni reduit. Rien ne change au-dessus de 900 px. */

/* 1.9.81 (07/09, 22h05) : SOUS 900 PX, LE HEROS PERD 30 PX DE PRUNE EN BAS (Stephane, capture
   iPhone 19h37). La distance bas du dernier paragraphe -> bas du heros valait 108 px et venait
   ENTIEREMENT du `padding-bottom` du heros, mesure avant correctif : 108 -> 78. Aucune marge
   negative : le fond du heros est peint, une marge negative ferait remonter la section blanche
   PAR-DESSUS le prune au lieu de raccourcir le prune. Rien ne change au-dessus de 900 px. */

/* 1.9.80 (07/09, 21h40) : LE TITRE GEANT DE L'ACCUEIL DISPARAIT SOUS 900 PX (doublon du logo,
   capture iPhone de Stephane 19h24). Le h1 reste dans le document, masque visuellement seulement
   (patron `.lecteur-ecran`) : il porte le referencement et la structure pour les lecteurs
   d'ecran. Le macaron, decoratif et deja present dans le logo, passe en display:none. La colonne
   perd son retrait haut de 85 px pour que l'accroche remonte sans laisser de trou. */

/* 1.9.79 (07/09, 20h55) : LA FORME MOBILE ETAIT PEINTE ET VIDE — regression de ma 1.9.78,
   attrapee par une capture de Stephane (« Sans consentement », forme rose sans dessin). La
   regle mobile posait display, taille, masque et position, mais PAS `background-image` : celle
   du bureau vit dans `@media (min-width:901px)` et ne descend pas. Toutes les fiches `--place`
   non `--libre` etaient vides sous 900 px. Mesure : `background-image:none` a 768 et 390,
   `posee` a 950 et au-dessus. La leçon est celle du depot : ma preuve de la 1.9.78 mesurait la
   GEOMETRIE du pseudo-element, jamais ce qu'il PEINT — elle ne pouvait pas rougir. */

/* 1.9.78 ② — LA 1.9.77 N'AVAIT PAS SUFFI, ET LA MESURE L'A DIT. Les attributs width/height
   etaient bien dans le HTML servi, mais `.logos img{height:96px;width:auto}` (plus bas) impose
   un `width:auto` en CSS, qui bat un attribut de presentation : les quatre logos rendaient
   encore leur taille naturelle (ciao 210x114 pour 105x57 dessine). La taille passe donc par
   une VARIABLE posee en ligne sur la figure (--lw/--lh, valeurs du releve), et par un selecteur
   plus specifique que `.logos img`. `aspect-ratio` tient le rapport quand la colonne devient
   plus etroite que le logo, ce qu'un `height` fixe ne saurait pas faire. */
.aide-nonurg .logos img{width:var(--lw);height:auto;aspect-ratio:var(--lw)/var(--lh);max-width:100%}
/* 1.9.89 ⑫ — LES LEGENDES DES LOGOS NE SONT PLUS SOULIGNEES (capture Stephane comparee au
   cadre « Trouver de l'aide »). Mesure avant : le `<a>` portait `text-decoration-line:
   underline`, et le soulignement se peint sur toute sa descendance, donc sur la legende — le
   `figcaption` avait pourtant deja `none`, ce qui montre que le retirer LA ne suffisait pas.
   La legende garde son corps 20 et sa graisse 500, qui sont ceux du nœud et n'ont pas bouge.
   ⚠️ LE LIEN RESTE UN LIEN : on retire un soulignement, pas une affordance. Le focus clavier
   garde donc un contour VISIBLE et explicite — sans lui, retirer le soulignement rendrait la
   cible invisible au clavier, ce qui serait un recul d'accessibilite, pas une correction. */
.aide-nonurg .logos a{text-decoration:none}
.aide-nonurg .logos a:focus-visible{outline:3px solid var(--prune);outline-offset:4px;border-radius:4px}
.aide-nonurg figcaption{color:var(--prune);font-size:var(--fs-p2);line-height:var(--lh-p2);
	font-weight:500;max-width:22ch}
@media (max-width:900px){
	.aide-nonurg .duo{grid-template-columns:1fr;gap:38px}
	.aide-nonurg h2{max-width:none}
}
.peau-menthe .pastilles figcaption{color:var(--prune)}
.peau-menthe .section-titre{text-align:center}

/* ═══ cartes structures d'aide ═══ */
.structures{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
	gap:var(--gouttiere);margin-block-start:30px}
.structure{background:var(--menthe);border-radius:var(--r-carte);padding:22px 22px 24px;
	display:flex;flex-direction:column;gap:12px;transition:transform .22s ease,box-shadow .22s ease}
.structure:hover{transform:translateY(-4px);box-shadow:0 16px 34px -20px rgba(90,28,58,.5)}
.structure .tags{display:flex;flex-wrap:wrap;gap:6px}
/* 17/08 — LA MAQUETTE DONNE DEUX CONVENTIONS OPPOSEES AUX DEUX ETIQUETTES, ET C'EST VOULU.
   Nœuds « Soins medicaux » / « Seniors » / « Personnes LGBTIQA+ » de Trouver de l'aide :
   conteneur #FCC8D7 avec encre #5A1C3A — l'INVERSE de l'etiquette de vignette (fond #5A1C3A,
   encre #FCC8D7). C'est precisement cette dissymetrie qui a fait deraper le 12/08 : voyant les
   etiquettes de structure roses, on a « harmonise » celles des vignettes. Ce n'est pas une
   incoherence de Margaux, c'est ce qui distingue une carte de vignette d'une carte d'aide.
   Deux valeurs corrigees ici, relevees au nœud : le rose est #FCC8D7 (`--rose`) et non #FACDE1
   (`--rose-btn`, la teinte des BOUTONS) ; et le corps est 15, pas 10 — la boite fait 23 px
   (4 + 15 + 4) avec un interligne de 15, alors que 10 px sans interligne pose rendait 22 par
   le `line-height:1.4` du corps de page. Une etiquette de 10 px etait aussi la plus petite
   typographie du site, pour un texte en capitales. */
.structure .tags b{background:var(--rose);color:var(--prune);border-radius:999px;
	padding:4px 11px;font-size:15px;line-height:15px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
/* Note Stephane 10/08 (« 3 affiche et un accordeon + ») : au-dela de 3 domaines, les suivants
   naissent `hidden` et ce bouton les revele. Meme pilule que les tags mais PRUNE : ce qui se
   clique ne doit pas se confondre avec ce qui se lit. Il s'efface une fois ouvert. */
/* 17/08 — ce bouton n'est PAS dessine dans la maquette (etat non dessine = le notre, regle
   d'or n°29), mais il vit DANS la rangee des etiquettes : il suit leur corps, sinon il
   depasse ou rapetisse la ligne. Il passe donc de 10 a 15 avec elles, et garde son encre
   claire, qui est ce qui le distingue de ce qui se lit. `line-height:inherit` valait 1,4 du
   corps de page — d'ou une pilule plus haute que ses voisines : pose a 15 comme elles. */
.structure .tags-plus{appearance:none;border:0;cursor:pointer;background:var(--prune);
	color:var(--rose-btn);border-radius:999px;padding:4px 11px;font-size:15px;font-weight:700;
	letter-spacing:.05em;font-family:var(--police);line-height:15px}
.structure .tags-plus:focus-visible{outline:3px solid var(--prune);outline-offset:2px}
.structure .tags b[hidden]{display:none}
/* 01/09 (flotte) — 25/500/28 au nœud, contre 21/700/23,5 servis. */
.structure h3{color:var(--prune);font-weight:500;font-size:var(--fs-p);line-height:var(--lh-p)}
.structure p{color:var(--prune);font-size:var(--fs-p2);line-height:var(--lh-p2)}
/* 11/08 — UNE ADRESSE MAIL DEBORDAIT SA CARTE DE 37 PX, et c'est le nouvel etage 1920 de
   `pixel-vernier` qui l'a trouvee a son premier passage : « 076 382 55 84 ·
   stopdiscriminations@dialogai.org » sur Trouver de l'aide (boite 303, il lui en fallait 318).
   POURQUOI CELLE-LA ET PAS UNE URL PLUS LONGUE — la question vaut la reponse. Un navigateur
   coupe volontiers apres un `/` ou un `-` : une adresse web de 67 caracteres se replie toute
   seule. Mais `@` et `.` NE SONT PAS des occasions de coupure : un mail est un seul mot
   insecable, et un mot insecable ne rentre pas dans une carte plus etroite que lui.
   `overflow-wrap:anywhere` — et pas `break-word` — parce que lui seul entre dans le calcul de
   la largeur minimale du contenu : sans ca l'element flex refuse encore de se retrecir.
   ET ON SOIGNE LA CAUSE, PAS CETTE ADRESSE-LA : les structures d'aide sont saisies par la
   Ville. La prochaine adresse longue arrivera sans nous. Verifie au banc sur quatre cas, dont
   un mail de 57 caracteres (165 px de debordement avant, zero apres) et une adresse ordinaire
   qui ne doit surtout pas changer. */
.structure .adresse{display:flex;gap:8px;font-weight:600;min-width:0;overflow-wrap:anywhere}
/* Note Stephane 10/08 (« icon a reprendre sur maquette en svg pin point ») : l'emoji 📍 rendait
   l'epingle de l'OS, differente sur chaque appareil et jamais celle de la maquette. Un masque
   SVG peint dans --prune suit la charte partout. Le dessin : goutte pleine, cercle evide
   (fill-rule evenodd), comme sur l'ecran « Trouver de l'aide » V3. */
.structure .adresse::before{content:"";flex:0 0 auto;width:14px;height:18px;margin-block-start:2px;
	background:var(--prune);
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Cpath fill-rule='evenodd' d='M8 0a8 8 0 0 0-8 8c0 5.6 8 12 8 12s8-6.4 8-12a8 8 0 0 0-8-8zm0 11.2a3.2 3.2 0 1 1 0-6.4 3.2 3.2 0 0 1 0 6.4z'/%3E%3C/svg%3E") center/contain no-repeat;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Cpath fill-rule='evenodd' d='M8 0a8 8 0 0 0-8 8c0 5.6 8 12 8 12s8-6.4 8-12a8 8 0 0 0-8-8zm0 11.2a3.2 3.2 0 1 1 0-6.4 3.2 3.2 0 0 1 0 6.4z'/%3E%3C/svg%3E") center/contain no-repeat}
/* 01/09 (flotte) — le 12 px etait local ; le nœud dit 16, celui de .btn. */
.structure .btn{align-self:flex-start;min-height:32px;padding:5px 12px;margin-block-start:auto}

/* ═══ accordeons (signaler) ═══ */
.accordeons{max-width:820px;margin-block:36px}
.accordeons details{border-bottom:0;padding-block:14px}
.accordeons summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;
	color:var(--prune);font-weight:500;font-size:var(--fs-h4);line-height:var(--lh-h4);
	transition:color .15s ease}
.accordeons summary::-webkit-details-marker{display:none}
.accordeons summary::after{content:"∨";font-weight:700;font-size:.65em;
	transition:transform .22s ease}
.accordeons details[open] summary::after{transform:rotate(180deg)}
/* ═══ CHEVRON DES ACCORDEONS — POSE PAR pasici-chevron-gen.py, NE PAS EDITER ═══ */
/* Trace EXACT du noeud « > » de la maquette (fill), pas le caractere ∨ : celui-ci rendait
   13,0x15,0 la ou la maquette veut 17.75x17.33, et son rapport L/H (0,855) interdit d'y arriver
   par un `font-size` — voir l'en-tete de pasici-chevron-gen.py. */
.accordeons summary::after{
	content:"";
	width:0.5071em;height:0.4951em;flex:0 0 auto;   /* 17.75 x 17.33 px pour un titre de 35.0 px */
	background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.00 0.00 17.75 17.33'%3E%3Cpath d='M0 0L4.34 1.89707e-07L8.88125 14.8663L13.4138 5.86334e-07L17.7538 7.76041e-07L10.8938 17.3337L6.86 17.3337L0 0Z' fill='%235A1C3A'/%3E%3C/svg%3E") no-repeat center/contain;
	font-size:1em;                     /* ☠️ PAS 0 : les `em` ci-dessus se resolvent sur
	                                       la police de CE pseudo-element. `font-size:0` a
	                                       fait peindre 0x0 — juste dans le fichier, absent
	                                       a l'ecran. `1em` = le corps du titre, qui est
	                                       exactement l'ancrage du rapport mesure. */
}
/* ═══ fin chevron des accordeons ═══ */
.accordeons summary:hover{color:var(--prune-3);text-decoration:underline;text-decoration-thickness:2px}
.accordeons details>div{padding:14px 4px 10px;font-size:var(--fs-p);line-height:var(--lh-p);max-width:42em}
/* ── Deux blocs de la page « Signaler » qui ne sont PAS des volets ───────────────────────
   La diapositive 35 de la Ville porte, apres les cinq volets, un encadre « La realite des
   procedures judiciaires » et un renvoi vers Juris Conseil Junior. Ils vivent hors des
   accordeons a dessein : ce sont des choses a LIRE, pas a deplier — les enfermer dans un
   volet reviendrait a les cacher, alors que c'est precisement ce qu'on veut que la personne
   lise avant de decider. Ils n'avaient aucun style : sans ces regles, ils s'affichaient en
   texte nu au bas de la page. */
.sig-bloc{background:var(--jaune);border-radius:var(--r-carte);padding:26px 28px;
	margin-block-start:36px;max-width:820px}
/* ⚠️ 01/09 — LE 5e BLOC DE LA PAGE TEMOIN N'AVAIT AUCUNE REGLE. `.sp-apres` est ecrit par
   parts/agir-sous-page.php et rempli par la seule page-agir-temoin.php (« Prends soin de
   toi », venu du PowerPoint de la Ville le 18/08). Zero ligne le stylait : son h3 tombait au
   defaut du navigateur (~18,7 px) et son p a 16, colles l'un a l'autre par le `*{margin:0}`
   de la feuille — au milieu d'une bande dont les voisins servent 35 et 25. Il reprend ici
   l'echelle maison, sur le patron de .sig-bloc, l'autre bloc hors-accordeon du site. */
.sp-apres{max-width:820px;margin-block-start:36px}
.sp-apres h3{color:var(--prune);font-size:var(--fs-h4);line-height:var(--lh-h4);font-weight:500;margin:0 0 14px}
.sp-apres p{color:var(--prune);font-size:var(--fs-p);line-height:var(--lh-p);margin:0 0 10px}
.sp-apres p:last-child{margin-block-end:0}
/* 01/09 — graisse 500 et non 700 : le nœud Figma de ce titre, comme les cinq autres titres
   de la meme famille, est en 500. Le 700 etait un choix de theme. */
.sig-bloc h3{color:var(--prune);font-size:var(--fs-h4);line-height:var(--lh-h4);
	font-weight:500;margin:0 0 12px}
.sig-bloc p{color:var(--prune);font-size:var(--fs-p2);line-height:var(--lh-p2);margin:0 0 10px}
.sig-bloc p:last-child{margin-block-end:0}
.sig-note{max-width:820px;margin-block-start:20px;padding:16px 20px;border-radius:var(--r-carte);
	background:var(--menthe);color:var(--prune);font-size:var(--fs-p2);line-height:var(--lh-p2);
	font-weight:600}

/* ── Boutons de telechargement (kit professionnel, communique de presse) ─────────────────
   26/08, demande de Nesrine. Ils reprennent le bouton du site (.btn) et n'inventent pas une
   forme de plus ; seule la teinte change, pour qu'un telechargement ne se confonde pas avec
   une navigation. Ils s'enroulent : quatre affiches plus un flyer ne tiennent pas sur une
   ligne de telephone, et une rangee qui deborde fabrique exactement le defilement horizontal
   que le corpus de rendu traque. */
.kit-docs{display:flex;flex-wrap:wrap;gap:12px;margin-block-start:28px;max-width:820px}
.btn--doc{background:var(--menthe);color:var(--prune);font-weight:700}
.btn--doc:hover{background:var(--vert)}
/* La cible tactile : 44 px est le plancher que le corpus de rendu mesure sur tout le site. */
.btn--doc{min-height:44px;display:inline-flex;align-items:center}
.section-docs{padding-block-start:0}

/* ═══ pied de page ═══ */
/* 04/08 — mesure du noeud (bande pied de la maquette, y3362 h383) : le bloc du pied occupe
   0..352 avec 69 px d'air en haut ET en bas (Frame 57 : y69, h214), puis la barre menthe
   Frame 56 : y352, h31. Le theme servait 64/40 et une barre de 48 — soit 29 px de moins sur
   la bande entiere, le plus gros ecart restant de la page. */
.pied{padding-block:69px 69px}
.pied .cadre{display:grid;grid-template-columns:1fr .85fr 1.2fr;gap:44px;align-items:start}
.pied .logo-pied{display:inline-flex;align-items:center;color:var(--prune);
	/* Pied : corps 46,9 · graisse 600 — le pied reste PLUS LEGER que le chapeau (700),
	   et le theme servait 800 aux deux. Deux crans d'ecart sur le logo du pied.
	   ⚠️ 01/09 — LA V4 A GROSSI CE LOGO, et lui seul. Le 40,4 ci-dessus venait du relevé V3
	   (HP y3468) et etait juste a l'epoque. Le relevé V4 (job figma-vernier-v4, page
	   « Maquettes V4 », noeud VIOLENCES du pied a y3265) donne 46,86 · graisse 600 · #5A1C3A.
	   Le logo du CHAPEAU, lui, ne bouge pas : 40,37 · graisse 700 · #A0DBC4 dans les deux
	   versions — c'est pour ca qu'on ne touche qu'a `.pied .logo-pied`, qui est sa propre
	   regle et ne sert aucun autre ecran. */
	font-weight:600;font-size:40.4px;letter-spacing:.03em;text-decoration:none;line-height:1}
/* ⚠️ 01/09, CORRECTION D'UNE ERREUR DE CE MATIN. La 1.9.19 avait porte ce logo a 46,9 px
   PARTOUT, sur la foi du seul ecran regarde. Releve refait sur les quinze : la V4 dit 40,37
   sur TREIZE ecrans et 46,86 uniquement sur la HP. Generaliser une valeur lue sur un ecran
   est exactement la faute que ce depot passe son temps a nommer. */
.home .pied .logo-pied{font-size:46.9px}
/* ☠️ 56 px ETAIT UNE VALEUR CHOISIE A L'OEIL. La maquette dit 73x74 (noeud Figma
   `190:1328` « Group 15 », x=-5374 y=3363 dans le cadre HP) — mesure, pas estimation.
   Ecart de 17 px sur un macaron de 5 cm : invisible isolement, evident cote a cote. */
.pied .logo-pied .sticker{width:73px;margin-inline-start:-14px;margin-block-start:8px}
.pied .porteur{margin-block-start:14px;font-size:var(--fs-p2);line-height:var(--lh-p2);font-weight:500;letter-spacing:.02em}
.pied nav{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.pied nav a:not(.btn){color:var(--prune);text-decoration:none;font-weight:500;font-size:var(--fs-p2);line-height:var(--lh-p2);
	letter-spacing:.02em;text-transform:uppercase;transition:opacity .15s ease}
.pied nav a:hover{opacity:.65}
/* 01/09 — CONTACT n'est plus un bouton : la V4 le sert comme les trois autres entrees de
   la colonne, en corps 16 / graisse 700 la ou elles sont en 20/500 (nœuds x540 du pied).
   Aucun rectangle derriere lui dans le releve. La regle .btn du pied disparait avec. */
.pied nav .pied-contact{font-size:16px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
/* 04/08 — LES 12 PX QUI MANQUAIENT A LA PAGE ENTIERE ETAIENT ICI.
   Noeud « Frame 57 » du pied dans la maquette (reference-figma-v3.json) : h214, compose de
   `image 2` (245x110, le logo VERNIER) puis d'un bloc texte h96. Le theme remplace l'image par
   deux lignes de texte qui n'occupent que ~98 px : la colonne fait 202 au lieu de 214.
   Comme c'est la colonne la PLUS HAUTE du pied, ces 12 px SONT l'ecart de hauteur du pied
   (-12) et l'essentiel de celui de la page (-16 sur 3745).
   Preuve que ca depasse le pied : le profil horizontal de la bande y3700-3720 est un PLATEAU
   sur toute la largeur (75,19 %), pas deux pics — ce n'est donc pas la barre basse qui est
   fausse, ce sont les deux images qui ne se superposent plus, decalees de ces 16 px.
   La zone reprend donc la hauteur que la maquette reserve a l'image. On ne fabrique PAS le
   logo : on lui rend sa place, et le fichier 245x110 reste attendu. */
/* 01/09 — LE BLOC N'EST PLUS UNE CARTE PRUNE (V4 : le logo de la Ville et ses coordonnees
   sur le fond blanc du pied). ⚠️ MAIS LA MIGRATION ETAIT A MOITIE FAITE, et c'est un defaut
   visible : le fond avait ete retire, `.carte-vernier a{color:var(--blanc)}` etait reste. Le
   numero de telephone, le courriel et l'adresse du site etaient donc ecrits EN BLANC SUR
   BLANC — invisibles, sur toutes les pages, sans qu'aucun controle puisse le voir. Une
   demi-migration coute plus cher qu'une migration absente : elle ne se remarque pas.
   ⚠️ ET L'ARBITRAGE QUI FERME LE SUJET (Stephane, 01/09) : « le footer de la home v4 va sur
   l'ensemble du site ». Les trois ecrans INTERNES du releve V4 portent bien, eux, un pave
   `Frame 57` de 390x214 rempli #5A1C3A a encre blanche, et un `Button` rose #FACDE1 pour
   CONTACT. Ils ne s'appliquent PAS : c'est la HP qui fait loi partout, sur decision de
   Stephane. Un arbitrage vaut mieux qu'un releve, et c'est ecrit ici pour qu'aucune session ne
   « corrige » le pied vers les ecrans internes en croyant bien faire. */
.carte-vernier{background:none;color:var(--prune);border-radius:0;
	padding:0;font-size:var(--fs-p2);line-height:var(--lh-p2);font-weight:500;letter-spacing:.02em}
.carte-vernier a{color:inherit}
.carte-vernier .porteur{margin-block:14px 6px}
/* 24/08 (V4) — le logo est le SVG OFFICIEL de la Ville (mot + symbole + baseline d'un bloc,
   voir footer.php) : les anciennes regles .vlogo/.vsous qui imitaient le logo au texte et au
   caractere « ◳ » partent avec. 190px : proportion mesuree sur la capture V4 (le bloc contact
   de 310px du releve V3 couvre ~80 % de la carte, le logo ~la moitie). currentColor herite du
   blanc de la carte. */
.carte-vernier .vlogo-vernier{display:block;width:190px;max-width:100%;margin-block-end:16px}
.carte-vernier .vlogo-vernier svg{display:block;width:100%;height:auto}
/* 01/09 — le logo officiel est une IMAGE en couleurs, plus un SVG en currentColor : elle suit
   la meme largeur, et `height:auto` garde son rapport (447x135 mesure sur le fichier). */
.carte-vernier .vlogo-vernier img{display:block;width:100%;height:auto}
.carte-vernier a{color:var(--prune);text-decoration:none}
.carte-vernier a:hover{text-decoration:underline}
.barre-basse{background:var(--menthe)}
.barre-basse .cadre{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:31px;padding-block:0}
.barre-basse,.barre-basse a{color:var(--prune);font-size:var(--fs-p2);line-height:var(--lh-p2);font-weight:500;letter-spacing:.02em;text-decoration:none}
.barre-basse a:hover{text-decoration:underline}
/* 24/08 (capture Stephane) : « Fait avec ♥ par alveo · © Ville de Vernier » se pliait en
   trois lignes autour du coeur SVG des que le flex serrait le span. La ligne entiere tient
   sur une seule (~295 px a fs-p2), meme en colonne telephone (le cadre passe en colonne a
   la requete media, pas le texte) — on interdit le pli plutot que de negocier sa position. */
.barre-basse span{white-space:nowrap}

/* ═══ contenu generique (page.php, tutoriel...) ═══ */
.contenu{max-width:var(--contenu);margin-inline:auto;padding:48px 22px}
/* RANGEES MAISON (24/08, prio 1 Stephane) : la structure que pose le bouton « ▦ Rangées »
   de l'editeur classique (mu-pasici-blocs.php ④). Grille cote site, empilement sous 760px.
   Le !important du telephone bat les 4 variantes d'un coup — c'est son seul usage. */
.rangee{display:grid;gap:28px;margin-block:24px}
.rangee--2{grid-template-columns:1fr 1fr}
.rangee--3{grid-template-columns:1fr 1fr 1fr}
.rangee--23{grid-template-columns:2fr 1fr}
.rangee--32{grid-template-columns:1fr 2fr}
@media(max-width:760px){.rangee{grid-template-columns:1fr!important}}
.contenu p,.contenu li{font-size:var(--fs-p);line-height:var(--lh-p);max-width:42em}
.contenu p+p{margin-block-start:12px}
.contenu h2{margin-block:36px 14px}
/* LES TITRES TAPES DANS L'EDITEUR n'avaient aucune taille : `.contenu h2` ne posait qu'une
   marge, donc un h2 saisi par la Ville tombait sur le defaut du navigateur (~27px) sur un
   site dont les h2 font 70. L'echelle doit exister comme regle d'ELEMENT dans les conteneurs
   de contenu, pas seulement comme classe posee a la main. */
.contenu h2,.fiche-corps h2,.contenu-edite h2{font-size:var(--fs-h2);line-height:var(--lh-h2)}

/* ═══ Page-détail, bande 3 — DEUX ÉCARTS MESURÉS, DEUX CAUSES DISTINCTES (15/08) ═══
   Relevé Chrome en prod : la bande sert 489 px pour 547 en maquette. Le budget se bouclait sans
   reste, donc rien n'était « perdu » : deux postes se compensaient à moitié.

   ① LE TITRE TOMBE SUR UNE SEULE LIGNE. La maquette le pose sur DEUX (nœud « Revenge porn &
      sextorsion », h=140 = 2 x 70, corps 70 / interligne 70 / graisse 700). Ce n'est pas la
      police qui manque — elle est déjà au plafond de 70 — c'est la LARGEUR : le nœud fait
      641 px dans la maquette, le thème lui en donnait 1080. À 70 px le texte mesure ~1061 px :
      il tient sur une ligne dans 1080 et passe sur deux dans 641. Un `max-width` corrige donc
      la cause ; forcer un retour à la ligne dans le contenu l'aurait masquée, et se serait
      défait au premier changement de titre.

   ② LES ACCORDÉONS SONT TROP HAUTS. La maquette pose 36 px par volet fermé et 57 px d'un début
      au suivant — soit 21 px d'espace. Le thème servait 63,1 px collés : le `summary` mesure
      bien 35,1 px (conforme), mais `details` ajoutait 14 px de padding en haut ET en bas.
      L'espace inter-volets se pose donc en `margin`, pas en `padding` : un padding grossit le
      volet lui-même, une marge sépare deux volets. C'est exactement la distinction que l'écart
      révèle.

   ⚠️ Ciblé sur `.fiche-corps` À DESSEIN. `.accordeons` sert aussi via mu-pasici-blocs sur
   d'autres écrans, dont la mesure ne dit rien ici. Changer la règle générale pour un écran
   particulier, c'est le défaut évité le même jour sur `--fs-p`. */
.fiche-corps h2{max-width:641px}
.fiche-corps .accordeons details{padding-block:0;margin-block-end:21px}
.fiche-corps .accordeons details:last-of-type{margin-block-end:0}
.contenu h4,.fiche-corps h4,.contenu-edite h4{font-size:var(--fs-h4);line-height:var(--lh-h4)}
/* les paragraphes d'intro etaient ecrits en style= dans le PHP, donc hors de portee de tout
   jeton : un changement d'echelle les aurait oublies par construction */
.p-intro{font-size:var(--fs-p);line-height:var(--lh-p);max-width:42em;margin-block-start:18px}
.p-intro--fort{font-weight:500}
.contenu ul{padding-inline-start:22px;margin-block:12px}
.contenu .avalider{opacity:.7;font-size:14px}
.grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(242px,1fr));gap:var(--gouttiere);margin-block:18px}
.carte{border-radius:var(--r-carte);padding:24px 22px;background:var(--menthe)}
.carte h3{margin-block-end:8px}
.carte.rose{background:var(--rose)}
.carte.vert{background:var(--vert)}
.carte.baie{background:var(--prune);color:var(--blanc)}
.carte.baie h3{color:var(--blanc)}
.urgence{background:var(--prune);color:var(--blanc);border-radius:var(--r-carte);padding:24px;margin-block:24px}
.urgence ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;padding:0}
.urgence li{background:rgba(255,255,255,.12);border-radius:10px;padding:12px}
.urgence b{font-size:30px;display:block}

/* ═══ vignette cliquable & fiche vignette ═══ */
a.vignette{text-decoration:none;display:block}
.bandeau-fiche{background:var(--prune);overflow:hidden;
	/* 1.9.16 : ancre de la scene (l'image absolue se cale sur le bandeau, donc sur les
	   bords de l'ecran, comme dans la maquette) */
	position:relative}
/* 1.9.17 : ANCRE AU CADRE, PAS A L'ECRAN (capture Stephane « position ») : au bord de
   l'ecran, sur un grand moniteur, la scene partait loin du titre (blob a 70 % de la
   largeur au lieu des 44 % de la maquette). La maquette raisonne par rapport au cadre :
   la scene reprend le slot du blob (411 a droite du cadre) et deborde de 56 px comme la
   forme V3 (« la forme deborde 56 px a droite du cadre »). A 1280 de large, c'est le
   bord de l'ecran de la maquette, au pixel. Au-dela, la scene reste collee au cadre et
   la distance titre->dessin ne bouge plus. */
.fiche-scene{width:min(411px,100%);height:403px;justify-self:end;align-self:start;
	margin-block-start:-34px}
/* La boite de la colonne garde sa hauteur (elle tient la grille et donc la place du titre) ;
   c'est l'IMAGE qui devient un calque au-dessus, en haut de la bande. */
/* L'image reste absolue contre le BANDEAU (verticale : assise sur le bas de bande,
   c'etait juste). L'horizontale, MESUREE dans la bande (1.9.18, capture « le t de
   consentement coupe ») : la scene va de x=500 a x=1280 pour un contenu de 1080 centre
   a 100 du bord -> son bord droit = bord du contenu + 100, donc
   right = 100vw - ((100vw - 1080px)/2 + 1080 + 100) = 50vw - 640px, borne a 0.
   Consequence qui fait la regle : le bord gauche de l'image tombe a contenu + 400, et
   le blob (qui commence ~60 px plus loin dans l'export) AFFLEURE la boite de titre de
   459 px sans jamais la couvrir — a toutes les largeurs d'ecran. */
/* ⚠️ 01/09, 1.9.34 — L'IMAGE REDESCEND SOUS L'EN-TETE, ET C'EST UNE MESURE QUI L'IMPOSE.
   La 1.9.33 la faisait monter au haut de la bande pour retrouver la composition de la V4
   (demande de Stephane, deux captures cote a cote). Geometriquement c'etait juste : l'image
   cuite fait 1280x660, soit la largeur de bande de la maquette. Mais la lecture du PIXEL REEL
   sous chaque lien, sur six fiches, a rendu ceci :
     · « Derriere l'ecran »            #BFBFBF  -> prune 6,87:1   lisible
     · « Amour ne rime pas… » lien 1   #242424  -> prune 1,23:1   ILLISIBLE
     · « Amour ne rime pas… » lien 2   #333333  -> prune 1,00:1   ILLISIBLE
   Sous le menu il n'y a pas l'aplat plat de la maquette : il y a le DESSIN, dont les valeurs
   vont du noir au pastel. Et aucune encre ne s'en sort — sur #BFBFBF la menthe tombe a 1,18,
   sur #242424 le prune tombe a 1,00. Poser une couleur fixe au-dessus d'une image quelconque,
   c'est parier sur son contenu.
   CE QUI MANQUE VRAIMENT N'EST PAS UNE REGLE CSS : c'est le RECADRAGE des scenes. La V4 met
   sous le menu la partie PLATE de l'aplat, le dessin commence plus bas (nœud image a y=111
   dans un aplat qui part de y=-2). Nos exports, eux, sont recadres sur la zone visuelle : le
   dessin y monte jusqu'en haut. Tant que les scenes ne sont pas re-exportees aux bornes de
   l'aplat, l'image reste sous l'en-tete et le menu garde le prune de la bande, 7,4:1 partout.
   La composition demandee revient avec le re-export, pas avec un reglage. */
.fiche-scene img{position:absolute;bottom:0;right:max(0px,calc(50vw - 640px));
	height:403px;width:auto;max-width:none;display:block}
@media (max-width:900px){
	.fiche-scene{width:100%;height:auto;margin:0}
	.fiche-scene img{position:static;width:100%;max-width:100%;height:auto;
		max-height:320px;object-fit:contain;object-position:right bottom}
}
/* ⚠️ 01/09 — 17 PX QUI FONT MORDRE LA FORME SUR LE TITRE (capture Stephane : le titre
   « Derriere l'ecran les mots blessent » entame par le blob). La maquette place l'image du
   bandeau a x729 et la forme 146 px avant, soit 583 ; le titre finit a 563 (x104 + sa boite
   de 459) — 20 px d'air. Le rapport 1.1/.9 faisait commencer la colonne a 712 : la forme
   demarrait a 566, soit 3 px du titre, et son bord arrondi mordait dessus.
   1.13/.87 place la colonne a 729, exactement le nœud. Ce n'est pas un reglage a l'œil :
   pour un cadre de 1152 et un gap de 32, 1.13/2.0 x 1120 = 633, plus la marge de 64 et le
   gap, font 729. */
.bandeau-fiche .cadre{display:grid;grid-template-columns:1.13fr .87fr;gap:32px;align-items:center;padding-block:34px 0}
.chip-cat{display:inline-block;background:var(--menthe);color:var(--prune);border-radius:var(--r-chip);
	/* AUX NOEUDS : le texte est en corps 21,23 / interligne 21,33 / graisse 700 / interlettrage 0,
	   et la pastille qui l'entoure (`Frame 6`) fait 252x46 pour un texte de 199x21 — soit 26,5 px
	   de marge horizontale et 12,5 px de verticale. Le theme servait 13 px et 8/16 : la pastille
	   faisait 194x34, soit 26 % trop petite, et son texte 62 % du corps dessine.
	   L'interlettrage etait a .05em ; la maquette dit 0. */
	padding:12.5px 26.5px;font-weight:700;font-size:21.23px;line-height:21.33px;
	letter-spacing:0;margin-block-end:16px}
/* ☠️ 04/08 — CE BLOC A PRIS LES VALEURS DU MAUVAIS NŒUD, et la note ci-dessous le disait
   sans le savoir : « corps 70 · interligne 70 · interlettrage 2.10 » sont les valeurs de
   « Revenge porn & sextorsion » — le titre de la BANDE 3, boîte 641x140. Le titre de HÉROS,
   « Son intimité n'est pas un trophée », est un autre nœud : **corps 55 · interligne 60 ·
   interlettrage 0**, boîte 459x120, donc DEUX lignes par construction.
   Conséquence servie jusqu'au 16/08 : 70/70 avec 2,1 d'interlettrage → le titre passait sur
   QUATRE lignes (mesuré : 576x250 px) là où la maquette en montre deux. Le correctif du 04/08
   avait raison de dire que 44 px était trop petit ; il a corrigé vers la mauvaise cible.
   LEÇON : dans un même écran, plusieurs titres portent des valeurs différentes. On identifie
   le nœud par SON TEXTE, jamais par « le titre de cet écran ».
   La rampe atteint 55 px dès 1200 et s'y arrête — au-dessus, la maquette ne grandit plus. */
/* ⚠️ 01/09 — LE TITRE PASSE AU-DESSUS DE LA FORME, ET C'EST STRUCTUREL. Capture Stephane :
   « Derriere l'ecran les mots blessent » tronque en « Derriere l'ecrar », la forme grise
   peinte par-dessus la fin de la premiere ligne. La cause n'est pas un ecart de quelques
   pixels — c'est l'ORDRE DE PEINTURE : `.fiche-blob::before` est un pseudo-element de
   `.fiche-blob`, qui vient APRES le h1 dans le document. A z-index egal, le dernier peint
   gagne : des que la forme touche le titre, elle le recouvre. Aucun reglage de largeur ne
   rend ca robuste, seul un contexte d'empilement le fait.
   z-index:1 suffit et ne deplace RIEN : le titre garde sa position, il cesse simplement de
   passer dessous. Meme valeur que `.fiche-blob img`, qui est deja au-dessus de la forme pour
   la meme raison. */
/* ⚠️ 01/09, 1.9.38 — LE TITRE PASSE AU-DESSUS DU DESSIN, PAS SEULEMENT DE L'APLAT. La 1.9.31
   avait mis le h1 en z-index:1 pour qu'il repasse devant `.fiche-blob::before` (z-index 0) :
   c'etait juste, et insuffisant des que le dessin a pris sa place propre. `.fiche-blob img` est
   AUSSI en z-index:1, et il vient APRES le h1 dans le document : a niveau egal, le dernier peint
   gagne. Capture Stephane sur « Violence entre les parents » : la troisieme ligne du titre
   disparaissait sous le dessin. Dans la maquette les deux ne se croisent pas — la colonne de
   titre y est plus etroite — mais sur le site la grille est plus large et ils se chevauchent.
   Un titre couvert par une illustration est un defaut dans tous les cas : le titre passe a 2. */
.bandeau-fiche h1{position:relative;z-index:2;color:var(--menthe);font-weight:700;
	font-size:clamp(28px,4.58vw,55px);line-height:calc(60 / 55);letter-spacing:0;
	/* 459 px = la LARGEUR DE LA BOÎTE du nœud dans la maquette, pas une valeur d'ambiance.
	   Sans elle le titre tenait bien sur deux lignes, mais coupait ailleurs (568+288 px au
	   lieu de la coupure dessinée). Même geste que le `max-width:641px` du titre de bande 3,
	   posé le 15/08 pour la même raison : dans cette maquette, c'est la LARGEUR qui décide
	   du nombre de lignes, jamais le corps. */
	max-width:459px;
	padding-block-end:40px}
/* ══ LE BANDEAU DE FICHE, AUX NŒUDS (16/08) ══════════════════════════════════════════════
   Ce qui était servi : une forme jaune dessinée en CSS (`border-radius` 50%/100%) et une image
   plafonnée à `max-height:300px` → 268,9 x 300 dans un bandeau de 370.
   Ce que la maquette pose, mesuré nœud par nœud dans reference-figma-v3.json :
     · le bandeau            402 px sous le menu (Frame 1 = 513, menu = 111)
     · l'illustration        247:568, boîte 411 x 403, à x=729 y=0 du haut de bande
     · la forme jaune        247:567, VECTEUR 753 x 630, à x=583 y=-113
   La forme DÉBORDE la bande de 113 px en haut et de 115 en bas, et de 56 px à droite du cadre :
   c'est ce débordement, découpé par `overflow:hidden`, qui donne le « bord à bord ». Une
   ellipse CSS ne pouvait pas le rendre — d'où le vrai tracé exporté (img/forme-hero.svg).
   Les décalages sont RELATIFS à l'illustration (583-729 = -146 ; -113 - 0 = -113), donc ils
   tiennent quelle que soit la largeur de la colonne.
   ⚠️ L'IMAGE RESTE CELLE DE LA FICHE (`the_post_thumbnail`) : chaque vignette a la sienne, et
   poser ici l'export du nœud mettrait l'illustration de « Son intimité… » sur les 16 fiches.
   `object-fit:cover` + `object-position:top` reproduit le cadrage de la maquette — un nœud
   Figma à remplissage image se comporte exactement comme un `cover`. */
.bandeau-fiche{min-height:402px}
.fiche-blob{position:relative;align-self:start;background:none;border-radius:0;padding:0;
	width:min(411px,100%);height:403px;justify-self:end;margin-inline-end:clamp(0px,4vw,56px);
	/* Le noeud est a y=0 DU HAUT DE BANDE (111 du haut de cadre = juste sous le menu), et il
	   fait 403 pour une bande de 402 : il la remplit et se fait couper en bas par
	   `overflow:hidden` — c'est le telephone tranche du dessin. `align-self:end` le posait en
	   bas, d'ou les ~100 px de bordeaux au-dessus. Le retrait negatif annule le padding haut du
	   cadre pour que l'image touche vraiment le bord. */
	margin-block-start:-34px}
/* 1.9.13 : meme trace, mais en MASQUE — la couleur vient de `--forme` (meta
   `pasici_couleur`, posee en ligne par le gabarit), repli #FEEFAC = la couleur cuite dans
   le SVG jusqu'ici : sans meta, rien ne change a l'ecran. */
/* ⚠️ 01/09 — LE TOP EST RECALCULE, ET C'EST LA SUITE DE MA REGRESSION DU MENU. La forme
   passe DERRIERE la navigation : c'est pour ca que l'encre du menu est prune sur la fiche
   (releve : menu a y51 en #5A1C3A, forme « Vector 1 » a y-2 en #FEEFAC). Elle doit donc
   commencer tout en haut de la page.
   Le calcul, poste par poste, plutot qu'un tatonnement : `.fiche-blob` est en align-self:start,
   il commence donc a 111 (le retrait du bandeau sous le chapeau) + 34 (le padding haut du
   cadre) = 145 du haut de la page. Pour que la forme demarre a -2 comme dans la maquette,
   il faut top = -2 - 145 = -147.
   ⚠️ 07/09, 1.9.75 — CE PARAGRAPHE ETAIT PERIME, ET IL A FAIT PEUR AU BON CHIFFRE. Il disait
   que -113 fait regresser le menu. C'etait vrai AVANT `margin-block-start:-34px`, pose depuis
   sur `.fiche-blob` dix lignes plus haut : ce retrait annule le padding haut du cadre, donc la
   boite ne commence PAS a 111+34=145, elle commence a **111** (mesure au navigateur, pas
   deduite). Pour un haut a 111, top = -2 - 111 = **-113**, et l'aplat repart donc a y=-2, la
   valeur de la maquette : il couvre le menu exactement comme avec -147, puisque c'est la MEME
   position finale. Le -147 ne posait plus l'aplat a -2 mais a -36, 34 px trop haut, et le
   dessin montait avec lui. La regle de base garde -147 pour une fiche SANS dessin ; les fiches
   posees (`--place`) et le mode `--libre` prennent -113 plus bas. Troisieme fois que ce trio de
   nombres glisse : il se mesure au navigateur avant d'etre change, jamais recalcule de tete. */
.fiche-blob::before{content:"";position:absolute;left:-146px;top:-147px;width:753px;height:630px;
	background:var(--forme,#FEEFAC);z-index:0;pointer-events:none;
	-webkit-mask:url("img/forme-hero.svg") no-repeat center/contain;
	mask:url("img/forme-hero.svg") no-repeat center/contain}
/* ☠️ `cover` A SUR-RECADRÉ, et le mesurer valait mieux que le supposer. Le nœud Figma est
   une boîte 411x403 à remplissage image — donc un `cover`, en théorie. Mais l'image SERVIE
   (`v-intimite.webp`, 484x540) n'a pas le même cadrage que la source de la maquette : le
   `cover` mangeait la main et la moitié gauche du téléphone. Deux cadrages différents ne se
   réconcilient pas par une propriété CSS.
   `contain` montre le dessin ENTIER, sans déformation, dans la boîte de la maquette. Ce n'est
   pas le cadrage dessiné — c'est le plus proche possible avec l'image que le site possède.
   Le cadrage exact demanderait de reverser dans la médiathèque l'export du nœud 247:568
   (déposé en 822x806 dans deploy/logs/pasici-dessins/), fiche par fiche : c'est un geste de
   CONTENU, pas de thème, et il appartient à Stéphane. */
/* 24/08 (visio, captures Stephane : « corrige ces blancs ou aligne sur le bas ») —
   BOTTOM et non TOP : les illustrations RECTANGULAIRES (scenes completes de Margaux, ciel
   et sol peints dans l'oeuvre) sont plus courtes que la boite de 403 px ; calees en haut,
   elles flottaient avec un vide au-dessous. Assises sur le BAS, elles posent leur ligne de
   sol sur le bord de bande. Les decoupes plein cadre (822x806) remplissent la boite :
   `object-position` n'a aucun effet sur elles, l'intimite ne bouge pas d'un pixel. */
/* 1.9.13 : hauteur fixe, largeur NATURELLE. Un export paysage du Style Guide (1024x593)
   rendait 238 px de haut en `contain` dans la boite 411 — perdu dans la forme. A hauteur
   403 il s'etale (~700 px) et son debord part vers le bord droit de l'ecran, coupe par
   l'overflow:hidden du bandeau (le « bord a bord » des bandes du Style Guide). Un export
   portrait (822x806) rend 411x403 comme avant : « Son intimite » ne bouge pas. */
/* 1.9.14 : ABSOLU, pas relatif — a largeur naturelle, l'image contribuait au calcul de
   la piste de grille (mesure : colonnes 296/751, titre sur trois lignes). Sorti du flux,
   le blob garde ses 411 px et le titre retrouve ses deux lignes ; le debord droit du
   dessin est toujours coupe par l'overflow:hidden du bandeau. */
.fiche-blob img{position:absolute;bottom:0;left:0;z-index:1;display:block;
	width:auto;max-width:none;height:403px;max-height:none}
/* ⚠️ 01/09, 1.9.35 — LE DESSIN A SA PLACE PROPRE, RELEVEE DANS LA MAQUETTE.
   L'aplat `.fiche-blob::before` fait 753x630 et commence a (-146,-147) de la boite : le releve
   `vernier-formes-dessins` a confirme qu'il est IDENTIQUE sur les 11 fiches, au pixel du
   `Vector 1` de la V4 (753x630 a 583,-2 dans la bande). Ce qui change d'une fiche a l'autre,
   c'est la place du DESSIN dedans, et elle est desormais chiffree : --dx/--dy/--dw, poses en
   ligne par le gabarit parce que ce sont des donnees de contenu, pas du style.
   Les valeurs sont en pixels fixes, comme l'aplat lui-meme : la maquette est dessinee a 1280
   et l'aplat ne s'etire pas — un dessin en pourcentage divergerait de lui des la premiere
   largeur differente.
   Sans les variables, rien ne change : la regle ci-dessus continue de servir. */
@media (min-width:901px){
	/* ⚠️ 01/09, 1.9.39 — LE DESSIN DESCEND JUSQU'AU BAS DE LA BANDE (Stephane, fleches rouges
	   vers le bas sous l'illustration : « et descend jusqu'au bas »). Il restait une bande
	   claire entre le bas du dessin et le bas du bandeau.
	   POURQUOI L'ANCRAGE PASSE EN BAS, et pourquoi ce n'est pas un reglage : la maquette pose
	   le nœud image de la page-detail a y=111 sur 403 de haut dans une bande de 513 — son bas
	   COINCIDE avec le bas de la bande. En ancrant par le haut (--dy), le bas du dessin tombait
	   ou il tombait, et l'ecart grandissait avec la hauteur de la bande, qui depend du titre :
	   6 px sur un titre court, bien plus sur trois lignes. Un ancrage par le bas donne le bon
	   resultat A TOUTE HAUTEUR de bande, sans nombre a accorder.
	   `align-self:stretch` fait descendre la boite jusqu'au bas du cadre — le bandeau n'a pas
	   de remplissage bas, donc c'est le bas de la bande. L'aplat, lui, ne bouge pas : son
	   `top:-147px` se mesure depuis le HAUT de la boite, que l'etirement ne deplace pas. */
	/* ⚠️ 01/09, 1.9.41 — LE MASQUE DE LA 1.9.40 EST RETIRE : IL CASSAIT L'IMAGE.
	   L'intention etait juste (Stephane : « la forme dans le background prune doit etre
	   propre ») et ma contre-epreuve etait verte — elle mesurait que le masque RETIRAIT des
	   pixels du dessin, et 100 % de ce qu'il retirait etait bien du dessin. Elle ne mesurait
	   PAS ce qui RESTAIT : sur les 14 fiches servies, le masque a decoupe un RECTANGLE au lieu
	   de la forme, et l'image est apparue tronquee. Un controle qui verifie ce qu'on enleve
	   sans regarder ce qui reste ne peut pas voir ce defaut-la — c'est la faute-mere du depot
	   sous une forme neuve.
	   La cause probable, a mesurer avant toute nouvelle tentative : `mask` sur le CONTENEUR
	   prend sa boite de reference sur l'element, dont la hauteur vient de `align-self:stretch`
	   et varie avec le titre ; la boite de l'aplat (-146,-147, 753x630) n'y correspond pas.
	   Le debordement du dessin sur le prune revient donc, et c'est assume : un dessin qui
	   deborde se voit et se corrige, un dessin tronque n'est plus le dessin. */
	.fiche-blob{align-self:stretch;height:auto;min-height:368px}
	.fiche-blob--place{align-self:stretch}
	/* ⚠️ 01/09, 1.9.44 — LE DESSIN EST PEINT DANS LA FORME, PLUS POSE PAR-DESSUS.
	   Stephane : « pose l'image sous le fond bordeau et le souci sera resolu ». C'est la bonne
	   direction, et elle rend le probleme impossible au lieu de le corriger : le fond d'un
	   element se peint sous ses descendants, donc aucune couche de bordeaux ne pourra jamais
	   recouvrir un dessin qui est DANS la bande. Deux tentatives de masque l'ont montre a mes
	   depens — sur le conteneur (1.9.40) il decoupait un rectangle, sur l'image (1.9.43) il
	   effacait tout.
	   La forme `.fiche-blob::before` est DEJA masquee par `forme-hero.svg`. En y peignant le
	   dessin comme couche de fond, il herite du masque : il ne peut plus deborder, quels que
	   soient sa taille et son placement. Un seul element, aucun empilement a raisonner.
	   Les trois nombres sont ceux du releve, poses en ligne par le gabarit : le dessin est a
	   (dx, dy) de la forme et large de dw. `--dessin` porte son adresse. */
	/* ⚠️ 01/09, 1.9.45 — TOUTES LES IMAGES COLLEES EN BAS A 0 (Stephane). Deux exigences qui
	   semblaient s'exclure : le dessin doit toucher le bas de la bande, ET rester decoupe par la
	   forme. Elles tiennent ensemble en etendant la BOITE de la forme jusqu'en bas tout en
	   EPINGLANT le masque a sa taille et a sa position d'origine.
	   Pourquoi la forme ne bouge pas d'un pixel : le masque est pose a `0 0` en `753px 630px`,
	   donc ancre en HAUT A GAUCHE de la boite — et le haut de la boite ne change pas (`top:-147px`
	   est inchange). Seule sa hauteur grandit, et un masque `no-repeat` de taille fixe ignore la
	   hauteur. Sans cet epinglage, l'heritage `center/contain` de la regle de base recadrerait et
	   deformerait la forme des que la boite grandit : c'est exactement le defaut de la 1.9.40.
	   Le dessin, lui, se cale sur `bottom` de cette boite etendue — donc sur le bas de la bande,
	   puisque `align-self:stretch` fait descendre la boite jusque-la. Et il reste dans la forme,
	   parce qu'un masque decoupe TOUT le rendu de l'element, fonds compris. */
	.fiche-blob--place::before{
		top:-113px;
		bottom:0;height:auto;
		-webkit-mask-position:0 0;mask-position:0 0;
		-webkit-mask-size:753px 630px;mask-size:753px 630px;
		-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
		background-image:var(--dessin,none);
		background-repeat:no-repeat;
		background-position:calc(var(--dx,0) * 1px) calc(var(--dy,0) * 1px);
		background-size:calc(var(--dw,400) * 1px) auto;
		background-color:var(--forme,#FEEFAC)}
	/* ⚠️ 01/09, 1.9.46 — L'EXCEPTION AU DECOUPAGE, ET ELLE EST ECRITE PLUTOT QUE DECIDEE EN
	   SILENCE. Stephane, comparaison maquette/site sur « Les emotions n'ont pas de genre » :
	   « exception ici, l'image deborde a droite, on a besoin de la voir (comme sur la maquette) ».
	   Dans la V4 le personnage de droite sort de la forme et va jusqu'au bord du cadre ; decoupe
	   par la forme, son visage est ampute.
	   LE PRINCIPE NE CHANGE PAS : un dessin est decoupe par la forme. Cette fiche en est
	   DISPENSEE par une meta (`pasici_dessin_libre`), qui pose la classe ci-dessous. Le dessin
	   revient alors dans son `<img>`, sans masque — donc visible en entier, y compris hors de la
	   forme. Meme doctrine que les popovers : une exception legitime s'ECRIT dans le module,
	   avec ce qui se passe a la place ; c'est le silence qui est interdit.
	   Deux consequences assumees et dites : le dessin peut alors mordre sur le prune (c'est le
	   but), et il n'est plus tenu par la forme si la maquette change — cette fiche est a
	   reverifier a chaque nouvelle version de la V4. */
	/* ⚠️ 01/09, 1.9.47 — L'EXCEPTION A L'ANCRAGE PAR LE BAS. Stephane, comparaison maquette/site
	   sur « L'entourage doit etre sur, pas menacant » : « descends l'image ici pour qu'on puisse
	   lire le menu ». Le dessin y fait 658x822, bien plus haut que la bande : colle en bas, son
	   sommet remonte a -308, et c'est une zone SOMBRE de l'illustration qui passe sous le menu.
	   La maquette le pose a dy=-65 — la, c'est le coussin clair qui se trouve derriere les liens,
	   et le menu se lit. On rend donc a cette fiche son calage releve, au lieu de deplacer le
	   dessin a l'estime jusqu'a ce que ca passe.
	   Meme regle que l'exception precedente : la dispense est portee par une meta
	   (`pasici_dessin_haut`), pas par un cas particulier cache dans la feuille. */
	.fiche-blob--place.fiche-blob--haut::before{background-position:calc(var(--dx,0) * 1px) calc(var(--dy,0) * 1px)}
	/* ⚠️ 01/09, 1.9.48 — L'EXCEPTION PERDAIT CONTRE LA REGLE GENERALE. Les deux selecteurs
	   avaient la MEME specificite (0,2,1) et celui qui masque l'image (`.fiche-blob--place img`)
	   vient APRES dans la feuille : a egalite, le dernier gagne. La dispense s'appliquait donc a
	   l'aplat (le dessin disparaissait de la forme) sans s'appliquer a l'image (qui restait
	   cachee) : resultat, plus de dessin du tout sur cette fiche.
	   Qualifier sur les DEUX classes porte la specificite a (0,3,1) : l'exception gagne, et elle
	   ne depend plus de l'ordre des regles — donc elle survivra a un futur deplacement de bloc.
	   Une exception qui ne tient que par sa position dans le fichier est une dette. */
	.fiche-blob--place.fiche-blob--libre::before{background-image:none}
	.fiche-blob--place.fiche-blob--libre img{opacity:1;position:absolute;z-index:1;display:block;
		left:calc(-146px + var(--dx,0) * 1px);top:calc(-113px + var(--dy,0) * 1px);bottom:auto;
		width:calc(var(--dw,400) * 1px);height:auto;max-width:none;max-height:none}
	/* L'image reste dans le document pour le sens et le referencement, mais elle n'est plus
	   peinte : c'est la forme qui la porte. `visibility` plutot que `display:none` — un
	   navigateur qui ne comprendrait pas `var()` dans un fond garderait au moins l'element. */
	.fiche-blob--place img{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;
		pointer-events:none}
}
/* 16/08, suite : l'illustration servie est desormais l'EXPORT du noeud 247:568 (822x806 =
   411x403 @2x, fond transparent). Elle a donc EXACTEMENT le cadrage dessine, et `contain`
   la rend au pixel dans sa boite au lieu de la reduire. L'ancien webp (484x540) portait un
   aplat blanc derriere le telephone — visible en clair sur la forme jaune ; l'export est en
   RGBA, le blanc disparait. Sauvegarde serveur : `v-intimite.webp.avant-figma`. */
/* ⚠️ 1.9.100 — LE DEFAUT DE LA 1.9.98/99, ATTRAPE A LA MESURE ET PAS A LA RELECTURE.
   La 1.9.98 n'allumait le dessin telephone que dans `@media (max-width:900px)` et croyait, par
   la, qu'il n'existait pas ailleurs. Faux : une <img> est visible par defaut. Mesure a 1440 sur
   « Les cliches racistes » apres la pose des 14 metas : `fiche-dessin-mobile` en display:block,
   411 px de large, PAR-DESSUS le dessin de bureau — la fiche `--libre` remet justement toutes
   ses images en `opacity:1;display:block`, donc les deux se superposaient.
   Le remede est une seule declaration, et elle vit HORS de toute requete de media : l'image
   telephone est masquee par defaut, partout, et c'est le bloc mobile qui l'allume. « Rien ne
   change au-dessus de 900 px » ne peut pas s'obtenir en n'ecrivant rien au-dessus de 900 px. */
.fiche-dessin-mobile{display:none}

/* ⚠️ 1.9.101 — ET LA 1.9.100 NE SUFFISAIT PAS : C'EST UNE COLLISION DE SPECIFICITE.
   Mesure a 1440 APRES la 1.9.100 servie : `fiche-dessin-mobile` toujours en display:block sur
   « Les cliches racistes » ET sur « Arracher un voile ». La declaration de base ci-dessus pese
   (0,1,0) ; elle perd contre `.fiche-blob img` (0,1,1) et contre
   `.fiche-blob--place.fiche-blob--libre img` (0,2,1), qui remettent toutes deux display:block
   au-dessus de 900 px. Une regle ecrite n'est pas une regle appliquee.
   Le masquage se refait donc a la BONNE FORCE, et **dans le media bureau** : sous 900 px il
   n'existe pas du tout, donc il ne peut pas gagner contre le bloc telephone (dont le selecteur
   pese (0,2,1) et qui, lui, est mesure bon a 390). */
@media (min-width:901px){
	.fiche-blob img.fiche-dessin-mobile,
	.fiche-blob--place.fiche-blob--libre img.fiche-dessin-mobile{display:none}
}

@media (max-width:900px){
	/* La maquette n'a qu'une largeur : sous 900 px on revient à une image qui respire, plutôt
	   que d'inventer un cadrage que personne n'a dessiné. */
	.bandeau-fiche{min-height:0}
	.fiche-blob{width:100%;height:auto;margin-inline-end:0}
	.fiche-blob::before{display:none}
	/* 1.9.13-14 : la largeur naturelle du bureau deborderait un petit ecran, et un enfant
	   absolu ecraserait le blob en hauteur auto — on revient a une image statique et
	   contenue, comme avant. */
	.fiche-blob img{position:static;width:100%;max-width:100%;height:auto;max-height:320px;object-fit:contain}

	/* ══ 1.9.78 ③ — LA FORME EST REJOUEE A L'ECHELLE DU TELEPHONE ════════════════════════
	   Capture Stephane a 390 px sur « L'entourage doit etre sur ses gardes » : dessin petit,
	   centre, du prune vide entre le titre et lui. MESURE avant correctif, au navigateur :
	   `::before` en display:none, l'img en `position:static` dans une boite 350x320 avec
	   `object-fit:contain`, et l'image servie fait 390x487 dont **les 99 premieres lignes sont
	   entierement transparentes**. L'export est le CADRE entier, pas le dessin : `contain` le
	   reduit donc a 256 px de large dans 350, et reserve 65 px de vide en haut. Une image qui
	   « respire » quand elle porte son propre cadre, c'est un dessin qui flotte.
	   LE REMEDE N'INVENTE AUCUN CADRAGE, il rejoue celui de la maquette a l'echelle : la forme
	   fait 753 de large dans la V4, donc tout se met a l'echelle `100vw / 753`. Le blob prend
	   la largeur de la fenetre bord a bord (`width:100vw` + la marge negative qui sort du
	   cadre), sa hauteur suit le rapport de la forme, et `::before` repeint la forme masquee
	   avec le dessin dedans, aux memes --dx/--dy/--dw que le bureau, simplement multiplies.
	   Les fiches `--libre` (dessin fourni pose en <img>) gardent leur exception : la forme sans
	   dessin, et l'image absolue a la meme echelle. */
	/* ⚠️ 1.9.102 — `justify-self:start` : LE PLEIN ECRAN N'EN ETAIT PAS UN DEPUIS LA 1.9.78.
	   GO Stephane du 08/09. Le blob herite de `justify-self:end` du bureau, ou il est a DROITE
	   de la grille. Dans la colonne mobile — 350 px de large qui commence a x=20 — une boite de
	   100vw alignee a la FIN se pose a -20..370 : 20 px sortent a gauche (coupes par
	   `overflow:hidden`) et 20 px de prune nu restent a DROITE.
	   MESURE SUR LA PEINTURE, pas sur la boite, sur « Amour ne rime pas avec controle » a 390 :
	   la derniere colonne peinte en #B0D8AA est **x=369** pour une fenetre de 390. Les cinq
	   valeurs de `justify-self` relevees une par une : end -20..370, center -10..380, start,
	   stretch et auto 0..390. C'est un releve, pas une lecture de la cascade.
	   La marge negative reste : c'est elle qui sort du padding du cadre. `justify-self` decide
	   seulement d'ou l'on part. Rien au-dessus de 900 px n'est touche. */
	.fiche-blob--place{position:relative;width:100vw;justify-self:start;
		margin-inline-start:calc(50% - 50vw);
		height:calc(630 * 100vw / 753);margin-block-start:0;overflow:hidden}
	/* ⚠️ 1.9.79 — `background-image` EST DANS CETTE REGLE, ET C'EST TOUT LE SUJET. La 1.9.78
	   a rejoue la geometrie mobile (taille, position, masque) en oubliant l'image elle-meme :
	   la declaration `background-image:var(--dessin,none)` ne vit que dans le
	   `@media (min-width:901px)`. Resultat : sous 900 px la forme etait peinte et VIDE sur
	   toutes les fiches `--place` non `--libre`, l'img etant par ailleurs masquee par la regle
	   juste en dessous. Ma preuve de la 1.9.78 mesurait le display, la taille et la position du
	   pseudo-element — pas ce qu'il PEINT : elle ne pouvait pas rougir. C'est la faute-mere du
	   depot, commise en la commentant ailleurs le meme soir. */
	.fiche-blob--place::before{display:block;position:absolute;left:0;top:0;
		width:100vw;height:calc(630 * 100vw / 753);
		background-image:var(--dessin,none);background-repeat:no-repeat;
		-webkit-mask-size:100% 100%;mask-size:100% 100%;
		-webkit-mask-position:0 0;mask-position:0 0;
		-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
		background-size:calc(var(--dw,400) * 100vw / 753) auto;
		/* 1.9.97 (08/09, 07h10) : LE BOUTON ANCRE SE CALE SUR LE BAS DU HEROS, AUX DEUX TAILLES.
   Au-dessus de 900 px il quitte sa place sous le paragraphe pour aller en bas a droite du
   prune, a **40 px** du bord bas ; sous 900 px il reste a **15 px**, inchange. Bord droit
   toujours celui de la colonne de texte. La bascule au defilement n'est pas touchee. */

/* 1.9.96 (08/09, 07h00) : LE BOUTON ANCRE DESCEND DE 20 PX. Au-dessus de 900 px il etait a
   +2 px sous le paragraphe, la valeur mesuree du nœud 724:2423 ; Stephane le veut plus bas.
   Ecart assume de 20 px avec la maquette, pris sur sa demande, annulable en remettant 2.
   Sous 900 px rien ne change : le bouton y est cale a 15 px du bas du prune (1.9.92). */

/* 1.9.95 — ANCRAGE PAR LE BAS SOUS 900 PX. Le `dy` de la maquette est mesure a 1280,
		   dans une bande de 513 ; sur telephone la bande est plus haute (le titre passe sur
		   quatre ou cinq lignes) et le dessin, place a son dy mis a l'echelle, s'arretait avant
		   le bas. Mesure avant, a 390 : **60 px de forme vide sous le dessin** sur « Derriere
		   l'ecran » et « Les cliches racistes », 17 sur « Violence entre les parents ».
		   Le `dx` ne bouge pas : seul le calage vertical passe en `bottom`. */
		background-position:calc(var(--dx,0) * 100vw / 753) bottom}
	.fiche-blob--place img{display:none}
	.fiche-blob--place.fiche-blob--libre::before{background-image:none}
	.fiche-blob--place.fiche-blob--libre img{display:block;position:absolute;z-index:1;opacity:1;
		/* 1.9.95 — meme regle pour les fiches a dessin fourni : l'img se cale par le BAS. */
		left:calc(var(--dx,0) * 100vw / 753);top:auto;bottom:0;
		width:calc(var(--dw,400) * 100vw / 753);height:auto;max-width:none;max-height:none}

	/* ══ 1.9.98 — LE DESSIN RETAILLE POUR LE TELEPHONE (GO Stephane 08/09 08h30) ═══════════
	   Margaux a redecoupe les 16 dessins pour le portrait (Style Guide, cadres 62 a 78) : un
	   fond prune PLEIN, le dessin dedans, AUCUNE forme de couleur. Ce n'est donc pas un
	   recadrage de la boite existante — c'est une autre image. On la sert telle quelle.
	   La regle ne s'allume QUE si la fiche porte `pasici_dessin_mobile` : sans cette meta, le
	   rendu d'avant, a l'identique (forme masquee + dessin en fond). Et rien de tout ce bloc
	   n'existe au-dessus de 900 px : le bureau ne bouge pas d'un pixel.
	   Trois choses que la regle doit gagner, et chacune contre une regle deja posee ici :
	   la forme `::before` (declaree juste au-dessus, display:block), le dessin de bureau
	   (`--libre img`, display:block), et le repli `.fiche-blob img` (max-height:320px). D'ou
	   le selecteur a deux classes, et `:not(.fiche-dessin-mobile)` pour ne masquer que les
	   AUTRES images — masquer `img` tout court emporterait celle qu'on vient d'ajouter. */
	/* ⚠️ `justify-self:start` N'EST PAS UN REGLAGE, C'EST CE QUI FAIT LE BORD A BORD. Mesure au
	   navigateur a 390 sur « Les cliches racistes » : le blob herite de `justify-self:end` (il est
	   a DROITE de la grille au bureau). Dans une colonne de 350 px qui commence a x=20, une boite
	   de 100vw alignee a la FIN se pose a **-20..370** : 20 px du dessin sortent a gauche et
	   20 px de prune nu restent a droite. Le meme essai, `justify-self` mis a `start` : 0..390.
	   Les cinq valeurs ont ete mesurees une par une (end -20..370, center -10..380, start,
	   stretch et auto 0..390) : ce n'est pas une deduction de la cascade, c'est un releve.
	   ⚠️ Et c'est aussi un defaut EXISTANT, non corrige ici : `.fiche-blob--place` porte le meme
	   `justify-self:end`, donc les fiches servies aujourd'hui a 390 ont, elles aussi, 20 px de
	   prune nu au bord droit. Signale a Stephane, pas touche dans le meme geste. */
	.fiche-blob--mob{position:relative;width:100vw;justify-self:start;
		margin-inline-start:calc(50% - 50vw);
		height:auto;min-height:0;margin-block:0;overflow:hidden}
	.fiche-blob--mob::before{display:none}
	.fiche-blob--mob img:not(.fiche-dessin-mobile){display:none}
	/* `vertical-align:bottom` n'est pas une coquetterie : une <img> est en ligne, elle repose
	   sur la ligne de base et laisse ~4 px de fond sous elle. C'est exactement le liseret de
	   prune qu'on cherche a supprimer. */
	.fiche-blob--mob img.fiche-dessin-mobile{display:block;position:static;
		width:100%;max-width:none;height:auto;max-height:none;object-fit:fill;
		margin:0;vertical-align:bottom}
	/* Le cadre de la bande ferme a 0 en bas des que la fiche sert un dessin mobile : sans ca
	   le dessin s'arreterait au-dessus du padding, et « cale au bas de la bande » serait faux
	   d'une dizaine de pixels que personne ne verrait dans le code. */
	.bandeau-fiche:has(.fiche-blob--mob) .cadre{padding-block-end:0;row-gap:0}
}
/* ═══ bande statistique — VALEURS LUES DANS LA MAQUETTE, pas approchees (15/08) ═══
   Mesure Chrome en prod : la bande servait 108 px la ou la maquette en pose 182 — le plus gros
   ecart de hauteur de Page-detail (-74 px sur -154 au total), et le 2e ecran le plus eloigne du
   site. La cause n'etait PAS le fond ni le cadre : c'est le TEXTE.
   Noeud 247:582 de la maquette, lu par l'API le 03/08 : corps 35, interligne 36, graisse 500,
   interlettrage 0,7, Nohemi. Le theme servait `--fs-p` (clamp plafonne a 25 px) et `--lh-p`
   (1.12) — soit 28 px par ligne. A 35 px le texte prend TROIS lignes de 36 (108 px) la ou il
   n'en prenait que deux de 28 (56 px). L'ecart de hauteur n'etait donc pas un padding a
   rallonger : c'etait une taille de police, et un padding a rallonger l'aurait masque en
   dessinant faux.
   Le padding suit la meme mesure : 182 - 108 = 74, soit 37 en haut et 37 en bas (le theme en
   servait 26). 37 + 108 + 37 = 182 = la maquette, exactement.
   `--fs-p` n'est PAS touchee : elle sert partout ailleurs, et cette bande a sa propre valeur
   dans la maquette. Une variable globale changee pour un cas particulier casse les autres. */
.bandeau-stat{background:var(--menthe);padding-block:37px}
.bandeau-stat p{color:var(--prune);font-size:35px;line-height:36px;letter-spacing:.7px;font-weight:500;max-width:46em}
/* 01/09 (flotte) — L'INTERLETTRAGE MANQUANT DU SEUL H2 NU DE LA FICHE. Les quatre H2 de
   Page-detail demandent 2,1 px (.03em a 70) ; celui-ci sortait a 0, mesure sur la page
   SERVIE. Ce n'est pas un oubli mais le reliquat d'un arbitrage : la regle `h2{letter-
   spacing:2.1px}` a existe, elle fuyait sur h2.section-titre (que la maquette veut a 0,7)
   et a ete retiree en 1.4.3 ; son remplacant du 16/08 a ete restreint a h2.section-titre,
   laissant decouvert le H2 qu'injecte the_content(). Le scope `.fiche-corps` est ce qui
   rend le geste sur : il ne peut pas atteindre section-titre. Et .03em plutot que 2.1px
   fixe, comme les deux H2 voisins deja conformes : la valeur suit alors le clamp aux
   petites largeurs. */
.fiche-corps h2{color:var(--prune);font-weight:700;text-transform:uppercase;font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:.03em;margin-block:26px 18px}
.fiche-corps p,.fiche-corps li{font-size:var(--fs-p);line-height:var(--lh-p);max-width:42em}

/* ═══ témoignages de fiche (V3 Page-détail : bande menthe 870 px, 3 cartes 392 px) ═══ */
.fiche-temoins{background:var(--menthe);padding-block:83px 166px}
.fiche-temoins .tem-intro{color:var(--prune);font-weight:500;font-size:var(--fs-h4);
	line-height:var(--lh-h4);letter-spacing:.02em;margin-block:16px 0;max-width:19em}
.grille-tem{display:grid;grid-template-columns:repeat(3,1fr);gap:23px;margin-top:71px}
.tem-carte{display:flex;flex-direction:column;align-items:flex-start;
	border-radius:var(--r-carte);padding:23px 20px;min-height:392px;color:var(--prune)}
.tem-carte--jaune{background:#FEEFAC}
.tem-carte--orange{background:#FFC48C}
.tem-carte--mauve{background:var(--mauve)}
.tem-carte h3{font-size:25px;line-height:28px;font-weight:500;letter-spacing:.02em;margin:0}
.tem-carte p{font-size:var(--fs-p2);line-height:23px;font-weight:500;letter-spacing:.02em;
	margin-block:21px 22px}
.tem-carte .btn{margin-top:auto}
/* la maquette teinte le libellé du bouton de la carte mauve dans la couleur de sa carte */
.tem-carte--mauve .btn--prune{color:var(--mauve)}
@media(max-width:900px){.grille-tem{grid-template-columns:1fr;gap:16px;margin-top:44px}
	.tem-carte{min-height:0}
	.fiche-temoins{padding-block:56px 72px}}

/* ═══ sous-pages agir (teintes jaune/orange/mauve) ═══ */
/* 06/08 — LA TEINTE DE LA PAGE EST UNIQUE, et elle se pose sur un ANCETRE COMMUN.
   Deux defauts qui n'en font qu'un, mesures sur les composites des 3 sous-pages :
   ① `--sp` etait posee sur `.bandeau-split`, alors que ses consommateurs `.sp-blob` et
      `.sp-quefaire` (plus bas dans ce fichier) en sont les FRERES, pas les descendants.
      — les numeros de ligne ne sont pas cites : ils se decalent au premier ajout, et un
      renvoi faux coute plus cher que pas de renvoi. Une variable CSS
      n'est heritee QUE par les descendants : `--sp` n'arrivait jamais, `background:var(--sp)`
      devenait invalide au calcul, et le fond retombait a `transparent`. D'ou le grand blob
      (Vector 1, y515 l665 h557) ABSENT du site — 17,4 % des ecarts sur agir-auteur·ice,
      21,6 % sur agir-temoin, premier poste des deux ecrans — et la bande « Que faire ? »
      servie en blanc au lieu de sa teinte. Le h1, lui, s'affichait juste : il EST descendant
      de `.bandeau-split`. La variable marchait la ou elle etait heritee et nulle part ailleurs.
      La classe est donc portee par `.sp-page` (cf. parts/agir-sous-page.php), ancetre des trois.
   ② Une seule teinte par ecran dans la maquette — titre ET blob : agir-victime #F3EBA7,
      agir-temoin #D6C0CD, agir-auteur·ice #FFC48C (verifie au noeud, titre et Vector 1
      portent la meme valeur sur les trois). Deux variables pour une seule teinte, c'est ce
      qui avait laisse `.sp-jaune` servir #FEEFAC au blob et #F3EBA7 au titre — un seul nom
      rend l'ecart impossible a reintroduire. */
.sp-jaune{--sp:var(--jaune-2)}
.sp-orange{--sp:var(--orange)}
.sp-mauve{--sp:var(--mauve)}
.bandeau-split{background:var(--prune);padding-block:56px 84px}
/* ⚠️ 01/09 — LE TITRE ETAIT DU MAUVAIS COTE. Captures Stephane sur les trois pages agir :
   la V4 met le TITRE a gauche (x101) et le TEXTE d'intro a droite (x640 a 705) ; le site
   servait la silhouette a gauche, le titre a droite et le texte dessous.
   La cause n'est pas la grille, elle est l'ORDRE DES ENFANTS : le gabarit place la
   silhouette AVANT le titre, elle prenait donc la premiere cellule et poussait tout d'un
   cran. Or dans la maquette la silhouette n'est pas une colonne : c'est un pictogramme de
   70x70 pose a -11 px du bord du cadre et 16 px au-dessus du titre, DEVANT lui.
   On la sort donc du flux (absolue) et on place explicitement titre et texte. Le titre
   garde un retrait de premiere ligne pour lui laisser la place, comme dans la maquette ou
   sa boite (562 de large a x101) englobe la zone du pictogramme.
   ⚠️ LE RATIO N'EST PAS TOUCHE, et c'est deliberé : la maquette ne pose pas la meme
   repartition sur les trois pages (1,01 / 1,19 / 0,94 selon l'ecran) — il n'y a donc pas
   de valeur unique a copier, et le 1.2/.8 vient d'un releve du 04/08. Un ratio se discute,
   un titre du mauvais cote non. */
/* 04/09 — Margaux (capture a 1440) : « picto mal place », « texte a droite mal place ». MESURE
   contre la V4 (agir-temoin, cadre 100→1180) : le picto est AU BORD du cadre (x=100), pas
   11 px dehors ; le titre occupe 540 px et l'intro 475 px avec 65 px entre les deux, soit
   presque moitie-moitie (le site servait 60/40 avec 44 px, l'intro trop etroite et trop a
   droite). Les colonnes sont en proportions de la maquette, pas en pixels : elles suivent la
   largeur du cadre. */
.bandeau-split .cadre{display:grid;grid-template-columns:540fr 475fr;gap:65px;align-items:start;position:relative}
.bandeau-split .cadre > span{position:absolute;left:0;top:0;width:70px;height:70px;z-index:1;
	display:block;pointer-events:none}
.bandeau-split .cadre > span svg{width:100%;height:100%;display:block}
.bandeau-split h1{grid-column:1;grid-row:1;text-indent:86px}
.bandeau-split p{grid-column:2;grid-row:1}
/* Sous 900 px la maquette ne dit rien : une seule colonne, et le pictogramme reprend sa
   place dans le flux plutot que de se poser sur un titre replie. */
@media (max-width:900px){
	.bandeau-split .cadre{grid-template-columns:1fr}
	.bandeau-split .cadre > span{position:static;margin-block-end:12px}
	.bandeau-split h1{grid-column:1;grid-row:auto;text-indent:0}
	.bandeau-split p{grid-column:1;grid-row:auto}
}
/* 04/08 — `parts/agir-sous-page.php` sert les trois ecrans « agir - victime / témoin /
   auteur·ice ». Leur titre « Que faire ? » vaut, dans les trois : corps 70 · interligne 137
   (ratio 1.957 — la maquette laisse deliberement de l'air sous ce titre) · graisse 700 ·
   interlettrage 2.10px (= .03em). Le theme servait 50px/1.1/aucun interlettrage. */
/* 04/08 10h45 — RELEVE DES 97 AGENTS, verifie au noeud avant d'etre pose. Le h1 des trois
   sous-pages « agir » servait les metriques d'un AUTRE titre : la maquette dit 55/60 avec un
   interlettrage NUL (« J'ai vecu quelque chose de similaire » y240 h120 · « Je connais
   quelqu'un… » y230 h180 · « Je me reconnais… » y240 h123 — les trois identiques), le theme
   servait 70 de corps, 1,957 d'interligne (soit 137 px de hauteur de ligne) et .03em.
   Un jeton juste, MAL AFFECTE : c'est le defaut le plus cher du relevé apres la section
   absente, ~154 px par page sur trois pages. */
/* ── Le pictogramme des 3 pages « agir » ─────────────────────────────────────────────────
   26/08, Nesrine : « les pictogrammes en haut a gauche sont tres petits. Serait-il possible de
   les agrandir et de les centrer ? »

   MESURE AVANT CORRECTIF (job vernier-picto-fichiers, journal 20260826-115440), sur les trois
   pages, identique : 70x70 px sur grand ecran, 56x56 sur telephone. 70x70 est la taille du
   viewBox — autrement dit AUCUNE regle ne le dimensionnait, il servait sa valeur intrinseque.
   La seule regle `.pi-sil` de cette feuille vise `.tem-carte`, un autre ecran.

   ET LA MESURE A DIT PLUS QUE LA DEMANDE : le pictogramme occupe A LUI SEUL la colonne de
   gauche (622 px), et le titre est en colonne de droite (x=846). Un dessin de 70 px au milieu
   d'une cellule vide de 622 — voila pourquoi il paraissait « perdu en haut a gauche » autant
   que petit. Le centrer sans l'agrandir n'aurait donc regle que la moitie de ce qu'elle voit.

   ⚠️ CE QUI N'EST PAS TRANCHE ICI, et qui est signale a Margaux : que le titre soit en colonne
   2 pendant que le pictogramme tient la colonne 1 est peut-etre l'intention de la maquette,
   peut-etre pas. Ce point-la touche la composition, il revient a la designer — on ne le corrige
   pas au passage sous couvert d'agrandir une icone.

   La taille suit l'echelle du site (clamp, comme la typographie) plutot qu'un nombre fixe : a
   160 px elle repond au titre geant sans l'ecraser, et elle redescend a 96 px sur telephone,
   ou la colonne fait 350 px. */
.bandeau-split .pi-sil{width:clamp(96px,11vw,160px);height:auto;display:block;margin-inline:auto}

.bandeau-split h1{color:var(--sp);font-weight:700;
	font-size:clamp(32px,calc(12.47px + 4.494vw),55px);line-height:1.0909;letter-spacing:0}
/* 01/09 — 25/28 et non 20/23 : le nœud d'intro des trois bandeaux « agir » est un `p`
   (25/28), pas un `p2`. Servi une taille en dessous depuis l'origine. */
.bandeau-split p{color:var(--blanc);font-size:var(--fs-p);line-height:var(--lh-p);padding-block-start:8px}
.sp-corps{padding-block:64px 0;overflow:hidden}
.sp-corps .cadre{display:grid;grid-template-columns:1.05fr .95fr;gap:44px}
.sp-texte p{font-size:var(--fs-p);line-height:var(--lh-p)}
.sp-texte p+p{margin-block-start:16px}
/* Le blob de la maquette (Vector 1, y515 l665 h557) fait 557 px sur agir-victime ET sur
   agir-auteur·ice — mesure identique des deux cotes. Le theme en servait 420. */
/* 06/08 — LARGEUR : le blob DÉBORDE de la page, et c'est voulu par la maquette.
   Une fois le fond réapparu (cf. la teinte plus haut), `vernier-causes.py` a montré que le
   même nœud restait en tête sur agir-victime — non plus « absent » (x0,12) mais « PLUS d'encre
   sur le site » (x3,31). Le blob était là, à la bonne place, et de la mauvaise TAILLE : item de
   grille, il prenait sa cellule — (1080 − 44) × 0,95 / 2 = **492 px** — quand la maquette lui
   en donne **665** (x685 → bord droit 1350, soit 70 px HORS de la page de 1280 ; c'est un
   débordement délibéré, que `.sp-corps{overflow:hidden}` coupe déjà proprement).
   26 % de largeur manquante sur une surface de 665×557 : assez pour que le score d'un écran ne
   bouge pas alors que le correctif précédent avait bien pris. `justify-self:start` ancre le
   bord gauche à x688 (mesuré à 3 px de la maquette) au lieu de laisser la grille le recentrer. */
/* ☠️ 18/08 — LE BLOB S'ETIRAIT EN OVALE HAUT, et la largeur n'y etait pour rien.
   Capture de Stephane sur /agir-auteur/ : « la forme est pas comme cela pas etiree ». Mesure au
   navigateur, texte reel de la page : 665 x 1340 a 1440 px, et 665 x 1868 a 1000 px — la
   maquette dit 665 x 557. Plus du DOUBLE de sa hauteur, et le rapport tombait de 1,195 a 0,356.
   LA CAUSE : dans une grille CSS, un element s'etire par defaut a la hauteur de sa RANGEE
   (`align-self:stretch`). Tant que la colonne de texte etait courte, personne ne le voyait ;
   le texte de la Ville pose ce matin l'a allongee, et le blob a suivi. `min-height` ne borne
   qu'un plancher — rien ne bornait le plafond, et un plancher ne retient pas un etirement.
   LE REMEDE tient en deux mots : `align-self:start` (il prend SA hauteur, pas celle de la
   rangee) et `aspect-ratio` (il garde la forme de la maquette quelle que soit sa largeur).
   `min-height` est retire : il aurait fixe un plancher a 557 px pendant que le rapport, lui,
   demande une hauteur proportionnelle sous les grandes largeurs. */
/* ═══ 24/08 — LA V4 REDESSINE CES FORMES, ET LE TEXTE COULE DESSOUS (captures Stephane,
   « inspire toi de la maquette pour les formes de droite et le placement du texte ») ═══
   Les mesures 665x557 ci-dessus etaient celles de la V3 : la V4 CONTIENT la forme dans la
   page (plus de debordement a droite, donc plus de translateY ni de marge negative), lui
   donne une silhouette PROPRE A CHAQUE ROLE (bol jaune sur victime, goutte haute mauve sur
   temoin, galet orange sur auteur·ice), et fait continuer le texte long SOUS la forme
   (.sp-cote : colonne forme + suite). Le blob n'est plus un item de grille : l'etirement
   du 18/08 ne peut plus revenir par la rangee.
   ⚠️ SILHOUETTES PROVISOIRES, calees sur les captures V4 : les traces exacts arrivent par
   le job figma-agir-v4 (export des vecteurs, comme l'onde) — une courbe redessinee ne
   coincide avec une courbe dessinee que par hasard. A la pose des SVG, ces border-radius
   tombent. */
.sp-cote{display:flex;flex-direction:column;gap:28px;min-width:0}
/* 1.9.3 — « la forme remonte comme dans la maquette » (capture Stephane) : dans la V4 la
   forme part DU BAS DE LA BANDE prune, pas du debut du texte — les 64 px de coussin de
   .sp-corps sont annules pour elle seule ; le texte, lui, garde son depart. Valeur exacte
   a affiner par le rel.y du manifeste figma-agir-v4 quand il tombe. */
/* ═══ 1.9.6 — LE TRACE EXACT, plus rien d'approche (manifeste figma-agir-v4, 2e passe) ═══
   La V4 CONFIRME la geometrie V3 : « Vector 1 » 665x557 a rel (685,515) sur les cadres
   « agir - cible » ET « agir - auteur·ice » — MEME tracé (compare octet a octet), seule la
   couleur change (#F3EBA7 = --jaune-2, #FFC48C = --orange ; --sp les porte deja). Donc :
   · la forme redevient 665 px et DEBORDE a droite comme la maquette (x685+665=1350, coupe
     par overflow:hidden — c'etait deja la lecon du 06/08, les silhouettes reduites de la
     1.9.0 etaient une fausse lecture des captures) ;
   · le tracé sert de MASQUE (img/agir-forme-v4.svg, l'export lui-meme) sur background
     var(--sp) : un seul fichier pour les trois roles ;
   · verticalement, blob y515 = bas de bande + 24 px -> marge -40 (le -64 de la 1.9.3
     collait a la bande, 24 px trop haut) ;
   · TEMOIN : son cadre V4 n'a pas encore ete apparie (titre sans le motif attendu, repli
     par nom a venir) — il herite du meme tracé en --mauve, l'hypothese la plus forte
     puisque cible et auteur·ice partagent le meme. */
/* ⚠️ 01/09 — LA FORME MONTE DANS LA BANDE PRUNE : 38 PX MESURES, PAS ESTIMES. Stephane,
   capture maquette/site avec trois fleches rouges sur le haut de la forme mauve. La V4 pose
   la bande `Frame 1` en 1280x529 et la forme `Vector 1` en 665x557 a (685,515) : le sommet
   de la forme est donc 14 px AU-DESSUS du bas de la bande. Les trois ecrans de la maquette
   concordent au pixel, et les trois couleurs servies aussi (#D6C0CD, #FFC48C, #F3EBA7).
   Mesure au navigateur sur les trois pages servies : la forme commencait 24 px SOUS la bande.
   14 - (-24) = 38. Le -40px devient -78px, et c'est le meme nombre sur les trois pages —
   c'est cette identite qui prouve qu'on corrige une regle et non un cas.
   Le repli telephone n'est pas touche : sous 900px, `margin-block:0` reprend la main. */
.sp-blob{margin-block-start:-78px;
	background:var(--sp);
	-webkit-mask:url("img/agir-forme-v4.svg") 0 0/100% 100% no-repeat;
	mask:url("img/agir-forme-v4.svg") 0 0/100% 100% no-repeat;
	width:665px;aspect-ratio:664/554;
	display:flex;align-items:center;justify-content:center;text-align:center}
.sp-suite p{font-size:var(--fs-p);line-height:var(--lh-p)}
/* ═══ LE TEXTE DU BLOB — VALEURS LUES AUX TROIS CADRES, PAS APPROCHEES (20/08) ═══
   Stephane : « corrige le blob jaune de agir-auteur ». Mesure au navigateur puis au fichier
   Figma, noeuds 346:1331 (auteur·ice), 248:2117 (temoin), 247:866 (cible) :
       servi    : corps 40 (clamp) · graisse 800 · interligne 46 · interlettrage normal
       maquette : corps 55        · graisse 700 · interligne 60 · interlettrage 1,65
   LES TROIS CADRES DONNENT LES MEMES QUATRE VALEURS. C'est ce qui rend cette regle globale
   SANS RISQUE, et il fallait le verifier : le meme releve a montre ce matin que la maquette
   demande DEUX valeurs pour `summary` (35 sur 11 noeuds, 25 sur 8) et pour `h3`. Une regle
   globale n'est sure que quand la maquette est unanime — ici elle l'est, aux trois cadres.
   Une seule regle posait la taille (`.sp-blob span`, aucune concurrente) : pas de cascade a
   negocier, verifie avec `getComputedStyle` avant d'ecrire et non apres.

   `max-width:454px` vient de la BOITE du noeud, pas d'un ajustement : a 55 px, « A definir
   avec la Ville » ferait pres de 690 px sur une ligne dans un blob large de 665. La maquette
   borne son texte a 454 — le respecter fait tomber le retour a la ligne au bon endroit au
   lieu de le laisser au hasard de la largeur.

   ⚠️ LA VALEUR TELEPHONE EST LA MIENNE, ET NON CELLE DE LA MAQUETTE (regle d'or n°29 : la
   maquette decide A SES largeurs, et elle ne dessine que 1280). Sous 900 px le blob prend
   toute la largeur : 55 px y deborderaient. On y garde donc EXACTEMENT le comportement
   fluide d'avant — aucune page telephone ne change a cause de cette pose. */
/* 1.9.6 — le 55/60/1,65 du 20/08 etait JUSTE : le manifeste figma-agir-v4 le re-mesure a
   l'identique sur la V4 (auteur·ice : corps 55, graisse 700, interligne 60, interlettrage
   1,65, boite 454x303). Le 40/46 de la 1.9.0 venait de la fausse forme reduite — la forme
   revenue a 665, le corps revient avec elle. */
.sp-blob span{color:var(--prune);font-weight:700;font-size:55px;line-height:60px;
	letter-spacing:1.65px;max-width:454px}
/* « Que faire ? » n'a PAS l'interligne des autres h2 : la maquette lui donne 70/137 (ratio
   1,957) et .03em, la ou « Tu cherches de l'aide ? » du meme ecran reste a 70/70. Deux titres
   de meme corps et d'interlignes differents — d'ou une regle SCOPEE, pas un jeton touche. */
.sp-quefaire{background:var(--sp);padding-block:64px;margin-block-start:80px}
.sp-quefaire .section-titre{line-height:1.957;letter-spacing:.03em}
.sp-quefaire .accordeons details{border:0}

/* ═══ a propos / partenaires / question ═══ */
/* 24/08 (capture Stephane vs maquette : « police trop grande — cette page est pas bonne du
   tout pourquoi ? ») — parce que le lead etait un corps INVENTE (clamp 22-30, graisse 700)
   au lieu d'un corps RELEVE. Le releve du 12/08 sert : Partenaires 25/28 g500 (noeud y619),
   Espace pro 25/28 g500, et A propos 35/36 g500. Il n'y a donc pas UN lead a 30 : il y a le
   corps de page en graisse 500 partout, et A propos au corps des titres-phrases. 25/28 =
   exactement --fs-p/--lh-p : le lead est du corps courant plus gras, pas un corps a part. */
.lead{color:var(--prune);font-weight:500;font-size:var(--fs-p);line-height:var(--lh-p);max-width:820px}
.page-template-page-a-propos .lead{font-size:35px;line-height:36px}
.apropos{display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:start}
/* 01/09 (flotte) — la maquette d'A propos pose ce macaron a 315, pas 270. Seule la borne
   haute bouge : 24,6vw = 315 a 1280. */
.apropos-sticker .sticker{width:clamp(180px,24.6vw,315px);margin-inline:auto;display:block}
.bandeau-citation{background:var(--prune);padding-block:44px}
/* 01/09 (flotte) — dernier membre de la famille « bandeau » reste en 32/40/600 ; le nœud
   dit 35/36/500, comme ses cinq voisins deja alignes. */
.bandeau-citation p{color:var(--blanc);font-weight:500;font-size:35px;line-height:36px;letter-spacing:.7px;max-width:1000px}
.bandeau-question{background:var(--prune);padding-block:40px}
.bandeau-question .cadre{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
/* 01/09 — 35/36/500/0,7 releves au nœud. Le clamp 20->28 etait un corps invente, seul
   texte de Partenaires a ne pas suivre la maquette. */
.bandeau-question p{color:var(--blanc);font-size:35px;line-height:36px;font-weight:500;letter-spacing:.7px}
.contrib{background:var(--menthe);padding-block:56px}
/* 24/08 — « Ont contribue au contenu : » servait --fs-h2 (70 px au bureau) : le DOUBLE du
   corps de la maquette. Le releve du 12/08 donne 35/36 g500 (noeud y1155) — le meme corps
   que .section-titre--phrase, et 26 px d'air avant la liste (1217 - 1191). */
.contrib h2{color:var(--prune);font-weight:500;font-size:35px;line-height:36px;letter-spacing:.7px;margin-block-end:26px}
.contrib li{font-size:var(--fs-p);line-height:var(--lh-p);font-weight:500;letter-spacing:.5px;max-width:36em;margin-block-end:10px}
.contrib ul{padding-inline-start:20px}
/* 24/08 — les noms du bloc V4 sont des liens (Instagram, YouTube — nœud mesure) : encre du
   texte, souligne comme la maquette ; le gras vient du <b> porte par le contenu. */
.contrib li a{color:inherit;text-decoration:underline}
.contrib li a:hover{text-decoration-thickness:2px}
.logos-rangs{display:grid;grid-template-columns:1fr 2fr;gap:44px;margin-block-start:30px}
/* ═══ Partenaires — LE SEUL « titre de section » que la maquette veut PETIT (20/08) ═══
   Stephane, 20/08 : « attention police trop grande a droite ». Mesure `ecart-ecran.mjs` a
   1440 px, viewport PROUVE, contre le noeud Figma 248:3496 :
       servi   : corps 70 · interligne 70 · graisse 700 · interlettrage 2,1
       maquette: corps 35 · interligne 36 · graisse 500 · interlettrage 0,7
   Le site sert exactement le DOUBLE du corps voulu.

   ☠️ ET C'EST LE PIEGE QUE L'EN-TETE DES « ECARTS SANS RISQUE » NOMME DEJA, quelques
   centaines de lignes plus bas : la maquette veut 2,1 d'interlettrage sur HUIT noeuds
   `.section-titre` et 0,7 sur UN SEUL — celui-ci. Corriger la classe reparerait un ecart et
   en FABRIQUERAIT huit, sur des noeuds aujourd'hui conformes. La regle est donc portee par une
   classe supplementaire posee sur ce seul noeud, jamais par `.section-titre`.

   `text-transform:none` n'est PAS issu du comparateur — il ne mesure pas la casse. Il vient
   d'une lecture directe : le noeud Figma porte ses `characters` en casse mixte, et le site les
   met en capitales. A 35 px, graisse 500, sur une phrase de 72 signes, les capitales du geant
   ne sont plus un titre. Reversible en un mot si Margaux tranche autrement. */
/* ☠️ DEUX CLASSES, PAS UNE — MESURE AU NAVIGATEUR, PAS AU RAISONNEMENT (20/08).
   Premier jet : `.section-titre--phrase` seule. Corps, interligne, graisse et casse sont bien
   passes ; l'INTERLETTRAGE non — il servait encore 2,1. `getComputedStyle` a nomme les trois
   regles qui matchent ce noeud :
       .section-titre            0,005em   (0-1-0)
       .section-titre--phrase    0,7px     (0-1-0)  <- la mienne
       h2.section-titre          2,1px     (0-1-1)  <- elle gagne
   Une classe simple ne bat pas un `tag.classe`, et l'ordre dans le fichier n'y change rien :
   la specificite passe avant. Doubler la classe porte la regle a 0-2-0, ce qui gagne quel que
   soit l'ordre — sans toucher `h2.section-titre`, dont les 8 autres noeuds veulent bien 2,1.
   Une pose « presque bonne » qui repare trois proprietes sur quatre ressemble a une reussite :
   c'est le comparateur qui l'a dite, pas la relecture. */
.section-titre.section-titre--phrase{font-size:35px;line-height:36px;font-weight:500;
	letter-spacing:.7px;text-transform:none}

/* Meme ecran, noeud 248:3503 « Soutien » : le site sert 18,72 px / 0,5 la ou la maquette pose
   35 / 0,7. La regle vise les DEUX intitules de la rangee : « Partenaires », son jumeau, sort
   « ambigu » du comparateur parce que le mot figure aussi dans le titre de la page — non
   mesurable n'est pas non conforme, et deux intitules cote a cote de tailles differentes
   seraient un defaut visible que personne n'a demande. */
.logos-rangs h3{margin-block-end:16px;font-size:35px;letter-spacing:.7px}
.logos{display:flex;gap:34px;align-items:center;flex-wrap:wrap}
.logos img{height:96px;width:auto;transition:transform .2s ease}
.logos img:hover{transform:scale(1.04)}

/* ═══ zone editable des pages speciales ═══ */
.contenu-edite p{font-size:var(--fs-p);line-height:var(--lh-p);max-width:42em}
.contenu-edite p+p{margin-block-start:14px}
.contenu-edite .p-fort{font-size:var(--fs-p);line-height:var(--lh-p);font-weight:500}
.contenu-edite ul{padding-inline-start:22px;margin-block:12px}
.contenu-edite li{font-size:var(--fs-p);line-height:var(--lh-p)}

/* ═══ formulaire contact ═══ */
.formulaire{max-width:700px;margin-inline:auto}
/* ⚠️ 01/09 — LE CORRECTIF FIGMA DE CES LABELS ETAIT MORT DANS LA CASCADE. Les valeurs
   relevees (25 px, graisse 500, interlettrage 0,5) etaient posees sur le selecteur nu
   `label`, que `.formulaire label` bat en specificite : l'ecran servait toujours 20/600.
   Un jeton juste et mal affecte ne se voit pas a la relecture — on porte donc les valeurs
   sur la regle QUI GAGNE. */
/* 01/09 (flotte) — l'interligne manquait : 25 x 1,4 herite du corps rendait 35 px la ou
   le nœud dit 28. */
.formulaire label{display:block;color:var(--brun);font-weight:500;font-size:25px;line-height:28px;letter-spacing:.5px;margin-block-end:8px}
.formulaire input,.formulaire textarea{width:100%;border:2px solid var(--brun);border-radius:var(--r-btn);
	padding:13px 14px;font-family:var(--police);font-size:17px;color:var(--noir);background:var(--blanc);
	transition:border-color .15s ease,box-shadow .15s ease}
.formulaire input:focus,.formulaire textarea:focus{outline:none;border-color:var(--prune);
	box-shadow:0 0 0 3px var(--rose-btn)}
.formulaire p{margin-block-end:22px}


/* ═══ accessibilite & mouvement ═══ */
:focus-visible{outline:3px solid var(--vert);outline-offset:2px;border-radius:4px}
@media(prefers-reduced-motion:reduce){
	*,*::before,*::after{transition:none!important;animation:none!important}
	html{scroll-behavior:auto}
}

/* ═══ responsive (mobile 390, pad 20 — derive du systeme desktop) ═══ */
@media(max-width:900px){
	.cartes-agir{grid-template-columns:1fr}
	.bandeau-fiche .cadre,.bandeau-split .cadre,.sp-corps .cadre,.apropos,.logos-rangs{grid-template-columns:1fr}
	/* En colonne unique, les 665 px de la maquette n'ont plus de sens : ils déborderaient de
	   la largeur du téléphone au lieu du bord d'une page de 1280. Le blob reprend la largeur
	   disponible — la valeur Figma vaut pour la grille à deux colonnes, pas pour l'empilement. */
	/* 1.9.3 : margin-block-start rendu a 0 — en une colonne la forme vient APRES le
	   texte, le -64px du bureau la ferait chevaucher dessus. */
	.sp-blob{min-height:300px;margin-block:0;transform:none;width:auto;justify-self:stretch}
	/* Le corps 55 de la maquette vaut pour SA largeur (1280). Ici le blob prend l'ecran :
	   on rend au texte le comportement fluide qu'il avait avant le 20/08, a l'identique. */
	.sp-blob span{font-size:clamp(26px,3.2vw,40px);line-height:1.15;letter-spacing:normal;
		max-width:none}
	.sp-quefaire{margin-block-start:44px}
	.cta-aide{grid-template-columns:1fr}
	.cta-aide__gauche{margin-inline:0;padding-inline:20px}
	/* le blob 688px n'a pas sa place sur un petit ecran ; l'APLAT vert reprend — sans lui
	   (fond transparent depuis 1.9.2), le panneau mobile perdait tout son vert et le texte
	   prune s'eteignait sur le prune. */
	.cta-aide__droite::before{display:none}
	/* 01/09 — le fond vert du telephone tombe avec l'onde : le bloc est prune partout,
	   et le 142 y est desormais lisible (var(--cta-encre), correctif 1.9.22). */
	.pied .cadre{grid-template-columns:1fr;gap:32px}
	.pastilles{grid-template-columns:1fr;gap:32px}
	.heros-hp .colonnes{grid-template-columns:1fr;gap:22px}

	/* ══ 1.9.80 — LE TITRE GEANT DU HEROS EST UN DOUBLON DU LOGO SOUS 900 PX ═══════════════
	   Capture iPhone de Stephane (19h24) : sur l'accueil telephone, « VIOLENCES » s'affiche
	   DEUX fois — dans le logo du chapeau, puis en titre geant juste dessous. Mesure avant
	   correctif a 390 px : deux nœuds peints portant exactement « VIOLENCES », `a.marque` a
	   y=0 sur 79 px de haut et le `h1` a y=188 sur 52, le macaron dessous jusqu'a 355, et
	   l'accroche repoussee a 440.
	   LE H1 RESTE DANS LE DOCUMENT, et c'est la moitie qui compte : c'est le titre de premier
	   niveau de la page d'accueil, il porte le referencement et la structure pour les lecteurs
	   d'ecran. On le masque VISUELLEMENT (le patron de `.lecteur-ecran`, l. 3001), jamais avec
	   `display:none` qui le retirerait de l'arbre d'accessibilite. Le macaron, lui, est purement
	   decoratif et redondant avec celui du logo : `display:none` lui convient.
	   Les deux selecteurs passent par `.geant` (0,3,x) pour battre les regles du bloc 640 px
	   qui repositionnent le macaron plus bas dans le fichier — la specificite, pas l'ordre.
	   Et la colonne perd son retrait haut de 85 px, sinon le bloc masque laisserait son trou. */
	.heros-hp .geant h1{position:absolute;width:1px;height:1px;overflow:hidden;
		clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:0;padding:0;border:0}
	.heros-hp .geant .sticker{display:none}
	.heros-hp .colonnes{margin-block-start:0}

	/* 1.9.81 — 30 PX DE PRUNE EN MOINS SOUS LE DERNIER PARAGRAPHE (capture iPhone de Stephane,
	   19h37 : « retire 30 px »). Mesure de la source AVANT de toucher quoi que ce soit : entre le
	   bas de `.detail` et le bas de `.heros-hp` il y avait exactement **108 px**, a 390 comme a
	   1440, et ces 108 px sont le `padding-bottom` du heros — le paragraphe a une marge basse de
	   0, `.colonnes` aussi, et le bloc `.geant` masque par la 1.9.80 a une hauteur de 0 et un
	   `min-height` de 0, il n'y contribue pas. On retire donc a LA SOURCE, sur le padding, jamais
	   par une marge negative qui laisserait le fond prune peint sous le texte suivant. Le padding
	   haut et les marges laterales ne bougent pas ; au-dessus de 900 px, rien ne change. */
	.heros-hp{padding-block-start:76px;padding-block-end:63px}
	/* 1.9.84 — LES TROIS RESPIRATIONS DE L'ACCUEIL SUR TELEPHONE (capture iPhone de Stephane,
	   20h10). Mesurees AVANT a 390 : haut du heros 46, bas du heros 78 (la 1.9.81 l'avait deja
	   ramene de 108 a 78), haut de la section blanche 82. Demande : +15 au-dessus du logo,
	   -15 sous le dernier paragraphe, -15 au-dessus de « Reconnaitre une violence ».
	   Donc 61 / 63 / 67. La section blanche est ciblee par `.heros-hp + .section-blanc` : c'est
	   CELLE de l'accueil, celle qui suit le heros — `.section-blanc` seul aurait deplace toutes
	   les autres sections blanches du site, que personne n'a demande de bouger. */
	.heros-hp + .section-blanc{padding-block-start:52px}

	/* ══ 1.9.82 — AUCUNE COMMANDE SOUS LES DEUX BOUTONS FIXES ════════════════════════════
	   Decision Stephane 07/09 22h. MESURE AVANT, a 390, page defilee jusqu'au BAS : le bouton
	   « Quitter le site » occupe 792..832 et la pastille cookies 797..832, et DEUX liens du pied
	   passent dessous — « Politique de confidentialite » (783..805, 1 079 px2 recouverts) et
	   « Ville de Vernier » (824..839, 920 px2). En fin de document on ne peut plus defiler pour
	   les degager : ils sont donc reellement inatteignables, et c'est LE cas bloquant.
	   ⚠️ CE QUI N'EST PAS LE PROBLEME, et il fallait le mesurer pour le savoir : les pastilles de
	   filtre. Sur /reconnaitre/ elles sont a 528..633, loin des boutons. Sur l'accueil elles
	   passent sous eux a UNE position de defilement (scrollY 57), mais le document fait 5 269 px :
	   un cran de defilement les degage. Un recouvrement qu'on peut faire disparaitre en defilant
	   n'est pas une commande perdue ; celui de la fin de page, si.
	   LE REMEDE EST UNE RESERVE, A LA SOURCE : la hauteur du plus grand bouton fixe (40) + 12 =
	   52 px ajoutes au retrait bas du pied (69 -> 121). Ni « Quitter » ni les cookies ne sont
	   caches ni reduits — ils restent exactement ou Stephane les veut, c'est la PAGE qui laisse
	   la place. Au-dessus de 900 px, rien ne change : les boutons y sont hors de la colonne. */
	/* ⚠️ 1.9.83 — LA 1.9.82 VISAIT LE MAUVAIS CONTENEUR. La reserve etait posee sur `.pied`, et
	   la preuve d'apres a montre les deux liens TOUJOURS recouverts : ils ne sont pas dans le
	   pied, ils sont dans `div.barre-basse`, le bloc qui vient APRES lui et qui termine le
	   document. 52 px sous le pied ne faisaient que descendre la barre-basse d'autant. */
	.barre-basse{padding-block-end:52px}
}
@media(max-width:640px){
	/* 1.12 est un interligne de COMPOSITION : a 17px sur telephone il donne 19px, trop serre
	   pour lire. La lecture au doigt demande de l'air, la maquette 1280 n'en dit rien. */
	:root{--lh-p:1.45;--lh-p2:1.40}
	/* ⚠️ 01/09 — LE TITRE DU HEROS DEBORDAIT L'ECRAN SUR TELEPHONE. Son clamp a un PLANCHER
	   de 72 px, et aucune regle ne le reprenait sous 900. A 390 px de large, « VIOLENCES »
	   (9 lettres, graisse 700, interlettrage .03em) demande environ 420 px pour 346
	   disponibles apres les marges : le mot sortait du cadre, sur le premier ecran du site.
	   La maquette ne decide qu'a ses largeurs (1280) ; le continuum entre elles est a nous.
	   12vw suit la largeur reelle au lieu d'un palier fixe, et le plafond 72 raccorde
	   exactement au plancher du clamp desktop — aucun saut a la frontiere des 640. */
	.heros-hp h1{font-size:clamp(40px,12vw,72px)}
	/* Le macaron est en position absolue a droite du titre : sur telephone il se posait
	   PAR-DESSUS le mot une fois celui-ci retreci. On le sort du flux absolu et on le laisse
	   suivre le titre. */
	.heros-hp .sticker{position:static;display:block;width:clamp(96px,26vw,140px);margin:14px 0 0}
	.cadre,.contenu{padding-inline:20px}
	.chapeau .cadre{flex-wrap:wrap;gap:12px}
	.chapeau nav{margin-inline-start:0;width:100%;min-width:0}
	/* 20/08 — « en responsive le menu tient sur une rangee » (Stephane). `flex-wrap:wrap`
	   laissait les quatre entrees retomber sur deux rangees des que la largeur manquait de
	   quelques pixels, et le chapeau grandissait d'un cran sans prevenir.
	   ⚠️ `nowrap` SEUL couperait « Trouver de l'aide » hors de l'ecran : un menu tronque est
	   pire qu'un menu sur deux rangees, parce qu'il ne se voit pas. On garde donc la meme
	   issue que la piste des pastilles plus haut — une rangee qui DEFILE — et on resserre
	   l'ecart et le corps pour que, sur les largeurs courantes, il n'y ait rien a faire
	   defiler du tout. */
	/* 04/09 (Stephane, capture a 375 px : « TROUVER DE » coupe) : la rangee defilait a
	   l'horizontale sans aucun indice, le dernier lien etait tranche au bord. Elle passe sur
	   deux lignes : chaque lien reste entier, rien a faire defiler. */
	.chapeau nav ul{gap:6px 14px;flex-wrap:wrap;overflow:visible;
		scrollbar-width:none;-ms-overflow-style:none}
	.chapeau nav ul::-webkit-scrollbar{display:none}
	.chapeau nav li{flex:0 0 auto}
	.chapeau nav a{font-size:13px;letter-spacing:.8px}

	/* 20/08 — DEUX FICHES PAR RANGEE SUR TELEPHONE (Stephane).
	   La cause du « une seule » n'etait pas une requete media : c'est la piste FIXE de 242 px
	   (`repeat(auto-fill,242px)`), posee le 10/08 pour tomber juste a 1280. Sous 520 px il n'en
	   entre qu'une, et `auto-fill` n'a aucun moyen de le savoir — il ne retrecit jamais une
	   piste fixe. On passe donc en deux colonnes ELASTIQUES, ici seulement : la valeur de
	   maquette reste intacte au-dessus, ou elle est mesuree.
	   La hauteur fixe de 442 px part avec : elle vient de la meme maquette 1280 (regle d'or
	   n°29 — la maquette decide A SES largeurs), et gardee sur une carte deux fois moins large
	   elle laisserait un grand vide sous le titre. L'image garde son RAPPORT (215x270) plutot
	   qu'une hauteur en pixels, sinon elle se deforme a chaque largeur d'ecran. */
	.vignettes{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:none}
	.vignette{height:auto;padding:8px 9px}
	.vignette img,.vignette-repli{height:auto;aspect-ratio:215/270}
	/* 1.9.15 : la forme suit la meme boite ; son image remplit la forme, c'est la forme
	   qui porte le rapport. */
	.vignette-forme{height:auto;aspect-ratio:215/270}
	.vignette .vignette-forme img{height:100%;aspect-ratio:auto}
	/* Corps 10 : a 12 px l'etiquette « Violence verbales, psychologiques » prenait quatre
	   lignes sur une carte deux fois plus etroite. */
	.vignette .tags b{font-size:10px}
	/* La hauteur de 418 est une valeur de maquette DESKTOP (grille 1280). Sous 900 px elle n'a
	   plus de sens : on la relache, sinon un bandeau court se retrouve a moitie vide. */
	.bandeau-titre{padding:36px 20px 48px;min-height:0;display:block}
	.barre-basse .cadre{flex-direction:column;align-items:center}
}

/* En-tete de DOCUMENT (pages internes) : lisible, pas le titre geant des pages publiques. */
.bandeau-doc{background:var(--prune);color:#fff;padding-block:56px 44px}
.bandeau-doc .doc-sur{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--menthe);font-weight:600;margin:0}
.bandeau-doc h1{font-size:clamp(34px,4.6vw,56px);line-height:1.06;font-weight:800;color:var(--vert);
	margin:14px 0 0;letter-spacing:-.01em;max-width:20ch}
.bandeau-doc .doc-sous{margin:16px 0 0;font-size:17px;line-height:26px;color:#F3DCE6;max-width:62ch}

/* ── page interne « Pour Margaux » : la video de tutoriel et les etapes en images ──
   Sobre et large : une idee par etape, une capture par idee. Reprend les tokens du site
   (prune, menthe, rayon 14) pour que le document ressemble au produit qu'il defend. */
.tuto-video{margin:28px 0 44px}
.tuto-video video{width:100%;display:block;border-radius:18px;background:#000;
	border:2px solid var(--menthe);box-shadow:0 18px 44px rgba(36,16,25,.16)}
.tuto-legende{margin-block-start:14px;font-size:15px;line-height:22px;color:#5b4a53;max-width:70ch}
.tuto-etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:38px 30px;margin:26px 0 48px}
.tuto-etape{margin:0;position:relative}
.tuto-etape--large{grid-column:1/-1}
.tuto-etape img{width:100%;display:block;border-radius:14px;border:1px solid #e6dde2;
	box-shadow:0 8px 24px rgba(36,16,25,.10)}
.tuto-etape figcaption{margin-block-start:12px;font-size:15px;line-height:23px;color:#5b4a53}
.tuto-etape figcaption strong{color:var(--prune)}
.tuto-num{position:absolute;inset-block-start:-14px;inset-inline-start:-10px;z-index:2;
	width:38px;height:38px;border-radius:50%;background:var(--prune);color:var(--vert);
	display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;
	box-shadow:0 4px 12px rgba(36,16,25,.22)}
@media (max-width:760px){
	.tuto-etapes{grid-template-columns:1fr;gap:30px}
	.tuto-num{inset-inline-start:-4px}
}
/* Sur un document interne, les titres de section restent des titres de DOCUMENT :
   le geant capitales du site ecrase la lecture sur douze ecrans d'affilee. */
.page-template-page-pour-margaux .contenu .section-titre{
	font-size:clamp(24px,2.6vw,34px);line-height:1.15;letter-spacing:-.005em;
	text-transform:none;color:var(--prune);margin-block:52px 6px}
.page-template-page-pour-margaux .contenu .lead{font-size:18px;line-height:27px;color:#4a3a42}

/* ══════════════════════════════════════════════════════════════════════════════════════════
 * ÉCARTS MAQUETTE→SITE — le sous-ensemble SANS RISQUE (v1.4.3, 16/08)
 *
 * Mesuré par `deploy/tools/ecart-ecran.mjs` sur les 14 écrans de la maquette V3, à 1440 px,
 * VIEWPORT PROUVÉ, contre `deploy/logs/vernier-v3/reference-figma-v3.json`.
 * État avant : 166 conformes / 225 nœuds appariés = 73,8 %.
 *
 * ⚠️ CE BLOC NE CONTIENT QUE LES RÈGLES DONT LA CIBLE EST UNIQUE DANS TOUTE LA MAQUETTE,
 * vérifiée contre TOUS les nœuds — conformes compris. Sans les conformes, la vérification
 * ne regarde que ce qui est déjà faux : `h1{font-size:55px}` en sortait « sans risque » et
 * aurait cassé 3 titres déjà justes (la maquette veut 149 px ailleurs).
 *
 * ⚠️ ET AUCUNE RÈGLE SUR UNE BALISE NUE QUI A UNE VARIANTE À CLASSE CONTRADICTOIRE.
 * `h2{letter-spacing:2.1px}` fermait 1 écart — et FUYAIT sur `h2.section-titre`, dont la
 * maquette veut 2,1 sur 8 nœuds et 0,7 sur 1. Le regroupement par sélecteur les sépare ; la
 * cascade, non. Règle retirée.
 *
 * NE SONT PAS ICI, et c'est délibéré : 81 écarts dont la maquette elle-même demande deux
 * valeurs selon l'écran (`summary` 35 px sur 11 nœuds et 25 px sur 8, `h3` en graisse 500 sur
 * 9 et 700 sur 4…). Ce sont des questions pour Margaux, pas des correctifs.
 * ══════════════════════════════════════════════════════════════════════════════════════════ */

/* Contact — 4 nœuds : le site sert 20px/600/0 */
label{font-size:25px;font-weight:500;letter-spacing:.5px}

/* Trouver de l'aide + numéro d'urgence — 3 nœuds : le site sert 19px/24px/0 */
figcaption{font-size:25px;line-height:28px;letter-spacing:.5px}

/* Trouver de l'aide — 2 nœuds : le site sert 600/0 */
p.adresse{font-weight:500;letter-spacing:.4px}

/* HP — 1 nœud : le site sert 600/0 */
p.accroche{font-weight:500;letter-spacing:.7px}

/* ── LE STICKER DE LA BANDE 3 (Page-détail) ────────────────────────────────────────────────
 * L'illustration manquante de la bande 3 EST le macaron « PAS ICI » — vérifié contre
 * `deploy/logs/vernier-v3/Page-détail.png` : #C8EFAE, 232×232 dans la maquette, à droite du
 * titre et au-dessus des volets.
 * ON RÉUTILISE `pasici_sticker()`, le composant que la home, le pied et « À propos » emploient
 * déjà — PAS le SVG exporté depuis Figma ce matin. L'export a servi à PROUVER de quel dessin
 * il s'agissait ; l'intégrer en dur aurait fabriqué une deuxième source pour la même forme,
 * qui aurait divergé au premier changement de charte (règle anti-doublon n°25B).
 * GÉOMÉTRIE PRISE DE LA MAQUETTE, pas devinée : le titre fait 641 px de large (max-width déjà
 * posée le 15/08) et le macaron commence 32 px après — soit 673 px du bord du contenu, ce que
 * mesure la maquette au pixel.
 * Masqué sous 1000 px : la maquette n'a qu'une largeur, et superposer un macaron de 240 px à
 * un titre replié serait une invention, pas une conformité. */
.fiche-corps{position:relative}
/* ⚠️ 01/09 — REMONTE ET AGRANDI, releve au nœud de la V4 (capture Stephane : « remonte un
   peu le pas ici comme maquette »). Page-détail V4 : le macaron est a x754 y716, le titre
   de bande 3 a x104 y791 — le macaron commence donc 75 px AU-DESSUS du titre, et fait
   275x279 (le theme servait 240 au plafond de son clamp).
   Le calcul du top n'est pas un tatonnement : `.fiche-corps` est le `.cadre` de la
   `.section-blanc`, dont le padding haut vaut 82 ; le premier titre y ajoute son
   margin-block-start de 26. A `top:0` le macaron etait donc deja 26 px au-dessus du titre ;
   il en faut 75, soit -49. Et left : la maquette place le macaron a 754 quand le contenu
   commence a 104, soit 650 du bord du contenu (le 673 venait de la V3).
   Toujours masque sous 1000 px : la maquette n'a qu'une largeur. */
.fiche-corps .sticker{position:absolute;left:650px;top:-49px;
	width:clamp(150px,21.48vw,275px);pointer-events:none;z-index:1}
@media (max-width:1000px){.fiche-corps .sticker{display:none}}

/* ══ 1.9.76 (07/09) — LE BANDEAU COOKIES EST UNE PETITE FENÊTRE EN BAS À GAUCHE ═══════════
 * Stéphane 07/09 (capture, ① les boutons, ② les catégories) : « d'abord voir la partie 1
 * dans une plus petite fenêtre en bas à gauche, et ensuite la 2 ». Margaux 04/09 puis 07/09
 * 17h44 : « cookies au milieu de l'écran, fermer en bas », « fond blanc ou autre couleur ».
 *
 * CE QUI ÉTAIT FAUX, ET POURQUOI : la surcharge du 16/08 faisait une BARRE pleine largeur
 * ancrée par `bottom:0` — écrite contre FreeCookie 0.13.7. Depuis la 0.13.8 le plugin pose
 * `top:50%;transform:translate(-50%,-50%)` et la surcharge ne remettait jamais `top:auto` :
 * la barre restait accrochée à mi-hauteur. Toute surcharge « en bas » DOIT remettre `top:auto`.
 * Contre-épreuve prise AVANT le correctif, au navigateur, sur la 1.9.75 servie : boîte à
 * top 450 dans une fenêtre de 900 (donc 50 %), largeur 1425, fond rgb(90,28,58), et les
 * catégories AVANT les boutons. Les quatre points rougissaient.
 *
 * L'ORDRE : dans le DOM du plugin, la liste des catégories (.fc-cats) précède les boutons
 * (.fc-actions). En colonne étroite, `order` les inverse : le visiteur lit le titre, la note,
 * puis SES TROIS CHOIX, et seulement ensuite le détail. Refuser reste exactement aussi
 * atteignable qu'accepter — les trois boutons sont AU-DESSUS de la seule zone qui défile.
 *
 * LES COULEURS passent par les VARIABLES du plugin (`--fc-*`), en !important : c'est le seul
 * levier qui bat le style en ligne posé par son détecteur de palette (leçon de
 * freeetv-freecookie-contraste.php, l. 190). Fond blanc, encre prune : 12,6:1.
 *
 * ⚠️ NON TOUCHÉ, ET C'EST LE POINT : le consentement lui-même. Mêmes boutons, mêmes
 * catégories, aucun pré-cochage modifié, rien de masqué. Surcharge de SITE, pas un fork du
 * plugin. Sous 1000 px : modale centrée du plugin, inchangée (choix du 16/08).
 * ══════════════════════════════════════════════════════════════════════════════════════ */
/* 1.9.78 ① — LES COULEURS SORTENT DU @media (captures tablette et iPhone de Stephane).
   Elles etaient enfermees dans le `@media (min-width:1000px)` de la 1.9.76 : sous 1000 px la
   modale centree du plugin reprenait donc son fond prune. Un reglage de MARQUE ne depend pas
   de la largeur de l'ecran ; seule la GEOMETRIE (bas-gauche, 400 px) en depend, et elle reste
   dans le media juste en dessous. */
#freecookie-banner.fc-banner {
	--fc-bg: #ffffff !important;
	--fc-text: #5A1C3A !important;
	--fc-muted: #6d5260 !important;
	--fc-border: #eadde3 !important;
	--fc-accent: #5A1C3A !important;
	--fc-accent-deep: #3d1227 !important;
	--fc-accent-text: #ffffff !important;
	--fc-secondary-bg: #FCC8D7 !important;
}
@media (min-width: 1000px) {
	#freecookie-banner.fc-banner {
		top: auto; bottom: 20px; left: 20px; right: auto; transform: none;
		width: min(400px, 34vw); max-width: none;
		max-height: min(72vh, 600px);
		border-radius: 14px;
		box-shadow: 0 12px 36px rgba(20, 32, 45, .22);
	}
	#freecookie-banner .fc-inner {
		display: flex; flex-direction: column; gap: 14px;
		padding: 20px 22px; max-width: none; margin-inline: 0; width: 100%;
	}
	#freecookie-banner .fc-text    { order: 1; }
	#freecookie-banner .fc-note    { order: 2; margin: 0; font-size: 12.5px; }
	/* ① — les trois choix, en colonne, pleine largeur, AVANT le détail */
	#freecookie-banner .fc-actions { order: 3; flex-direction: column; flex-wrap: nowrap; gap: 8px; }
	#freecookie-banner .fc-actions .fc-btn { flex: 0 0 auto; width: 100%; white-space: nowrap; }
	/* ② — le détail, bornée en hauteur : c'est ELLE qui défile, jamais les boutons */
	#freecookie-banner .fc-cats {
		order: 4; max-height: 200px; overflow-y: auto;
		flex-direction: column; flex-wrap: nowrap; gap: 10px; align-content: flex-start;
	}
	#freecookie-banner .fc-cats > * { flex: 0 0 auto; }
	#freecookie-banner .fc-foot    { order: 5; }
	#freecookie-banner .fc-prefs, #freecookie-banner .fc-about {
		max-width: none; margin-inline: 0; width: 100%; padding-inline: 22px;
	}
}

/* ☠️ LES ETIQUETTES DE TYPE S'ETIRAIENT SUR TOUTE LA CARTE (16/08, capture de Stephane).
   `.tags` est un conteneur flex en colonne : par defaut `align-items: stretch`, donc chaque
   `<b>` prenait les 216 px de la carte au lieu d'epouser son texte. Dans la maquette la
   pastille hugge son libelle — « VIOLENCE VERBALES, PSYCHOLOGIQUES » tient sur deux lignes
   mais reste une pastille, pas une bande.
   `align-items: flex-start` et non une largeur en dur : la pastille doit suivre son texte,
   qui change avec la taxonomie et la langue. */
.vignette .tags{align-items:flex-start}

/* Le pictogramme des cartes de témoignages — même bloc que les cartes « Comment agir ? ».
   `display:block` pour qu'il occupe sa ligne au-dessus du titre, comme dans la maquette
   (PersonSilhouette 70x70, badge 28x28 à +42 px — les deux mesurés au nœud Figma). */
.tem-carte .tem-pictogramme{display:block;margin-block-end:14px}
.tem-carte .tem-pictogramme .pi-sil{display:block}

/* ══════════════════════════════════════════════════════════════════════════════════════════
 * « AU PLUS PROCHE DE LA MAQUETTE » — les 6 règles de la valeur MAJORITAIRE (16/08, GO Stéphane)
 *
 * Ces sélecteurs ont PLUSIEURS cibles dans la maquette : `summary` veut 0,7 px d'interlettrage
 * sur 11 nœuds et 0,5 sur 8, `h3` la graisse 500 sur 9 et 700 sur 4. Aucune règle globale ne
 * peut satisfaire les deux — la maquette elle-même n'est pas homogène. On applique donc la
 * valeur MAJORITAIRE, qui rapproche le plus, et la minorité part en question à Margaux
 * (journal-djerba/QUESTIONS-MARGAUX-16-08.md).
 *
 * ⚠️ CHAQUE LIGNE PORTE SON BILAN, gain ET casse, parce que « au plus proche » n'est pas
 * « sans perte » : les deux règles `h3` gagnent 13 nœuds et en cassent 8 qui étaient justes.
 * Net +5. Le dire ici évite qu'une session suivante « corrige » ces 8 sans voir les 13.
 *
 * ⚠️ LA PORTÉE EST PROTÉGÉE. `p{letter-spacing}` fuyait sur `p.adresse` (cible 0,4) et
 * `p.accroche` (0,7), déjà justes depuis 1.4.3 : le `:not()` les préserve. C'est le même piège
 * que `h2{letter-spacing}` écarté en 1.4.3 — le regroupement par sélecteur sépare `p` et
 * `p.adresse`, la cascade CSS non.
 *
 * Mesuré à 1440 px, viewport prouvé, contre reference-figma-v3.json, sur les 14 écrans.
 * ══════════════════════════════════════════════════════════════════════════════════════════ */
summary                        { letter-spacing: .7px }   /* +11, casse 0 — maquette : 0,7 sur 11 nœuds, 0,5 sur 8 */
h3                             { font-weight: 500 }       /* +7,  casse 4 — maquette : 500 sur 9, 700 sur 4       */
h3                             { letter-spacing: .5px }   /* +6,  casse 4 — maquette : 0,5 sur 8, 0,7 sur 1, 0 sur 4 */
p                              { font-weight: 500 }       /* +9,  casse 0 — maquette : 500 sur 9, 700 sur 1       */
p:not(.adresse):not(.accroche) { letter-spacing: .5px }   /* +8,  casse 0 — la portée protège les deux classes déjà justes */
h2.section-titre               { letter-spacing: 2.1px }  /* +5,  casse 0 — maquette : 2,1 sur 8, 0,7 sur 1       */

/* ══════════════════════════════════════════════════════════════════════════════════════════
 * LA FORME JAUNE PASSE DERRIÈRE LA NAVIGATION (16/08, GO Stéphane)
 *
 * Le nœud `247:567` est à **-113 px du haut de bande** : dans la maquette, la forme monte
 * derrière la rangée de navigation, elle ne commence pas sous elle. Sur le site, `.chapeau` et
 * `.bandeau-fiche` sont deux blocs frères au même fond bordeaux, et `overflow:hidden` tranchait
 * la forme au raccord — d'où le bord horizontal net qu'on voyait à la comparaison.
 *
 * LE GESTE : sur les fiches SEULEMENT, l'en-tête devient transparent et la bande remonte de sa
 * hauteur, en récupérant autant de remplissage. Le fond bordeaux vient alors de la bande, qui
 * s'étend derrière la navigation ; rien ne bouge à l'écran sauf la forme, qui n'est plus coupée.
 *
 * ⚠️ PORTÉE : `body.single-vignette` et rien d'autre. `.chapeau` sert TOUTES les pages ; le
 * rendre transparent partout mettrait une navigation menthe sur un fond blanc — invisible.
 * C'est le même piège que la règle `h2` écartée en 1.4.3 : une portée trop large déplace la
 * cascade de tout le monde.
 * ══════════════════════════════════════════════════════════════════════════════════════════ */
body.single-vignette .chapeau{background:transparent;position:relative;z-index:30}
/* ⚠️ 01/09 — 85 -> 111, ET C'EST UNE REGRESSION QUE JE CORRIGE. Ce decalage remonte le
   bandeau SOUS le chapeau transparent de la fiche, pour que la forme passe derriere la
   navigation. Sa valeur etait CABLEE EN DUR sur la hauteur du chapeau (85). La 1.9.21 a
   porte ce chapeau a 111 en retirant la barre haute, et ce -85 n'a pas suivi : le bandeau
   remontait 26 px trop peu, la navigation sortait de la forme coloree et retombait sur le
   fond prune — en encre PRUNE, puisque la regle du 17/08 la met ainsi pour etre lisible sur
   le jaune. Menu prune sur fond prune : invisible. Exactement le defaut du 142 corrige en
   1.9.22, cette fois cause par moi.
   ⚠️ LA LECON, et elle vaut au-dela de cette ligne : une hauteur recopiee en dur a deux
   endroits finit toujours par diverger. Les deux valeurs sont desormais nommees ensemble
   ici, et tout changement du chapeau doit passer par ce commentaire. */
/* ⚠️ 1.9.88 — LE -111 ETAIT FIGE, ET IL LAISSAIT UN BANDEAU BLANC. Cette regle remonte la
   bande sous le chapeau en supposant que le chapeau fait EXACTEMENT 111 px. C'est vrai a
   1440 ; des que le menu passe a la ligne il grandit, et la bande ne remonte plus assez :
   mesure au navigateur sur « Derriere l'ecran les mots blessent », en visiteur ANONYME —
   chapeau 111 a 1440 (bande a 0, correct), **125 a 901 et 899 (14 px de blanc)**, **142 a 390
   (31 px de blanc)**. Ce blanc est le fond du `body`, vu entre le haut de la page et le prune.
   Ce n'est PAS la marge de la barre d'admin WordPress : `#wpadminbar` est absent et les marges
   de `html` et `body` valent 0 — verifie sans session WordPress, donc un visiteur le voyait.
   Le nombre vient desormais de la HAUTEUR REELLE du chapeau, publiee dans `--h-chapeau` par
   footer.php. Le repli `111px` garde exactement le comportement d'aujourd'hui si le JS ne
   tourne pas : au pire on retrouve le defaut, jamais pire que lui. */
body.single-vignette .bandeau-fiche{margin-block-start:calc(var(--h-chapeau,111px) * -1);padding-block-start:var(--h-chapeau,111px)}

/* ═══ LE MENU DE LA FICHE EST PRUNE, PARCE QUE LE BLOB JAUNE PASSE DERRIERE LUI ═══════════
 * Demande de Stephane (17/08, capture de l'en-tete) : « couleur du menu en violet sur fond
 * jaune s'il te plait ». Verifie dans la maquette AVANT d'ecrire, et le releve tranche seul :
 * sur les 14 ecrans, UN SEUL met l'encre du menu en #5A1C3A — « Page-detail », la fiche. Les
 * 13 autres la veulent #A0DBC4, ce que le site sert deja. Une regle non bornee aurait donc
 * casse treize ecrans pour en reparer un.
 *
 * POURQUOI LE FOND EST JAUNE ICI, et pourquoi il n'y avait RIEN a construire : `.chapeau` est
 * transparent sur la fiche (regle ci-dessus), et `.fiche-blob::before` — 753x630, remonte de
 * -113px — passe SOUS la navigation. Sa couleur servie est #FEEFAC, exactement celle du noeud
 * `Vector 1` de la maquette (753,2 x 629,5). Le jaune etait deja juste ; seule l'encre restait
 * menthe. Le commentaire de la regle ci-dessus affirmait « le fond bordeaux vient alors de la
 * bande » : c'est vrai sous la navigation GAUCHE (le logo, qui reste donc menthe, comme dans la
 * maquette), et faux sous la navigation DROITE, que le blob recouvre.
 *
 * CE QUE LE CORRECTIF REPARE EN MEME TEMPS, mesure au ratio WCAG :
 *   menthe #A0DBC4 sur #FEEFAC =  1,35:1   (le seuil AA du texte normal est 4,5:1)
 *   prune  #5A1C3A sur #FEEFAC = 10,92:1
 * Le soulignement de survol suit l'encre : en --vert (#C8EFAE) il etait invisible sur le jaune,
 * et un etat de survol qu'on ne voit pas n'existe pas.
 *
 * ⚠️ LA BORNE A 901px N'EST PAS UN REGLAGE FIN, C'EST LA GARDE. `.fiche-blob::before` passe en
 * `display:none` sous 900px (media query plus haut) : il n'y a alors PLUS de jaune derriere le
 * menu, qui retombe sur le bordeaux de la bande. Poser le prune sans borne rendrait le menu
 * prune sur prune — 1,0:1, invisible — sur tous les telephones. La borne doit rester ACCORDEE
 * a celle du blob : si l'une bouge, l'autre bouge. */
/* ⚠️ 01/09, MESURE AU NAVIGATEUR — LA CONDITION MANQUAIT, ET ELLE EST LA MOITIE DE LA REGLE.
 * Le raisonnement ci-dessus est juste : quand la forme monte derriere le menu, l'encre prune est
 * la bonne (10,92:1 sur le jaune, contre 1,35:1 pour la menthe). Il supposait seulement que la
 * forme est TOUJOURS la. Elle ne l'est pas : sur une fiche dont le visuel est en PAYSAGE, le
 * gabarit ne pose pas `.fiche-blob` du tout. Mesure sur /vignette/derriere-lecran-les-mots/
 * (post 506, visuel 1024x683) : `.fiche-blob` = null, et sous chaque lien la pile donne
 * `.bandeau-fiche[rgb(90,28,58)]`. Encre prune sur fond prune : 1,0:1. Le menu etait PEINT et
 * INVISIBLE — c'est ce que Stephane voyait, apres un rechargement force, sur la feuille 1.9.31.
 *
 * `:has(.fiche-blob)` fait porter la regle par le FAIT, pas par l'hypothese : l'encre prune ne
 * s'applique que si la forme existe reellement dans la page. Sans elle, le menu reste menthe sur
 * le prune du bandeau (7,4:1), lisible. Aucune page ne peut plus se retrouver prune sur prune.
 * C'est la meme faute-mere que partout ici, sous une forme neuve : on verifie ce qu'on a ecrit,
 * pas ce qui s'affiche. */
@media (min-width:901px){
	body.single-vignette:has(.fiche-blob) .chapeau nav a{color:var(--prune)}
	body.single-vignette:has(.fiche-blob) .chapeau nav a::after{background:var(--prune)}
}

/* ── 1.9.51 : le titre d'une fiche d'aide, lisible sur mobile ─────────────────────────────
   A 375 px le titre (17px/500) et le texte (16px/500) ne se distinguent pas (Nesrine, 03/09).
   Le desktop garde la charte (500) ; sous 768 le titre prend du poids. Regle en FIN de
   feuille, meme specificite que celle de la carte : la derniere gagne, sans armure. */
@media (max-width:768px){
	.structure h3{font-weight:700;font-size:18px;margin-bottom:6px}
}

/* ── Bouton d'evacuation (footer.php) — design de Margaux, maquette HP V4 du 04/09 ──────── */
/* ── Bouton d'evacuation (footer.php) — 1.9.77 : AUX VALEURS DU NŒUD 724:2423 de la V4 ────
   Retour Margaux 07/09 17h50 (« pas le meme que la maquette »). La 1.9.62 avait pris la bonne
   intention (pastille rose, icone de sortie) sur des valeurs approchees : rose PALE au lieu du
   corail, pastille 999 au lieu d'un rayon 14, corps 12 au lieu de 15, icone 17 au lieu de 22.
   Les cinq nombres se recomposent : 21 + 22 + 9 + 128 + 21 = 201, la largeur du bouton dessine.
   La CASSE passe en minuscules (QCM Stephane 07/09 18h30) : le corpus Figma porte « quitter le
   site » en minuscules et la largeur mesuree (128 px pour 15 caracteres a 15 px = 0,52 em par
   caractere) est celle d'une bold en bas de casse, pas en capitales (~0,72 em).
   Contre-epreuve prise AVANT, au navigateur sur la 1.9.76 servie : fond rgb(252,200,215),
   rayon 999px, hauteur 39, corps 12px, interlettrage 1.2px, casse uppercase, icone 17x17 —
   les sept ecarts rougissaient. Contraste prune sur corail : 5,38:1, au-dessus du seuil AA. */
.quitter{position:fixed;right:18px;bottom:18px;z-index:9000;display:inline-flex;align-items:center;gap:9px;
	background:var(--corail,#FF8585);color:var(--prune);font-weight:700;font-size:15px;line-height:1;letter-spacing:.75px;
	text-transform:uppercase;height:46px;padding:0 21px;border-radius:14px;box-shadow:0 6px 20px rgba(90,28,58,.22);
	text-decoration:none;white-space:nowrap}
.quitter svg{width:22px;height:22px;display:block;flex:none}
/* ⚠️ 1.9.91 — LA 1.9.90 EST RETIREE. Elle ajoutait un second calque de masque rectangulaire
   pour prolonger la forme jusqu'au bord droit au-dela de 1280 px. A l'ecran, Stephane : « ca ne
   comble pas le haut mais ajoute de la couleur a droite » — un BLOC rectangulaire colle a la
   courbe, pas son prolongement. Mes mesures disaient pourtant vrai : la boite atteignait le
   bord et la couleur peinte a 60 px du bord etait bien celle de la forme. Elles ne pouvaient
   pas dire que la FORME de ce qui est peint est fausse : un rectangle plein n'est pas la suite
   d'une courbe. Troisieme fois cette nuit qu'une mesure juste valide un rendu faux ; ici ni la
   boite ni un echantillon de couleur ne remplacaient le fait de REGARDER.
   Retour a l'etat de la 1.9.89. Le vide a droite au-dela de 1280 reste ouvert : il demande de
   prolonger le TRACE du SVG (ou un second SVG raccorde), pas de poser un rectangle a cote. */

/* ══ 1.9.86 — SUR L'ACCUEIL, LE BOUTON COMMENCE DANS LE HEROS ═══════════════════════════
   Decision Stephane (capture Figma). Dans la maquette le bouton n'est pas flottant en haut de
   page : il est POSE dans le heros, sous le paragraphe « Une violence, ca peut etre… ».
   Mesure sur l'export du cadre HP (1280 de large, au depot) : le paragraphe blanc va de x694
   a x1176 et finit a y562 ; le bouton commence a y564, bord droit 1187. Donc **2 px sous le
   paragraphe, aligne a droite de sa colonne**. Le temoin `.quitter-place` reproduit exactement
   cette place ; il est invisible et ne porte aucun texte.
   LA BASCULE : tant que le temoin est a l'ecran, le bouton est ANCRE la ; des qu'il sort par le
   haut, le bouton redevient flottant en bas a droite, comme sur toutes les autres pages. Le
   passage se fait en fondu — l'opacite seule est en transition — parce que les deux positions
   sont eloignees et qu'un deplacement anime se lirait comme un saut.
   ⚠️ CE QUI PROTEGE LA SORTIE D'URGENCE : l'etat par defaut du bouton reste `position:fixed`.
   Si le JS ne tourne pas, si l'observateur n'existe pas, si le temoin est absent (toutes les
   pages sauf l'accueil), le bouton est flottant et atteignable. L'ancrage est un BONUS, jamais
   une condition. Le `href` et la touche Echap ne sont pas touches. */
.quitter{transition:opacity .18s ease}
@media (prefers-reduced-motion:reduce){.quitter{transition:none}}
.quitter-place{display:block;height:46px;margin-block-start:2px;pointer-events:none;visibility:hidden}
.heros-hp .colonnes .quitter-place{grid-column:2;justify-self:end;width:210px}
.quitter.est-ancre{position:absolute;right:auto;bottom:auto;
	left:var(--qx,0);top:var(--qy,0);box-shadow:none}
@media (max-width:900px){
	/* Sous 900 px la colonne est unique : le temoin garde la meme regle, aligne a droite sous
	   le dernier paragraphe, et la bascule est identique. */
	.heros-hp .colonnes .quitter-place{grid-column:auto}
}
.quitter:hover,.quitter:focus-visible{background:var(--prune);color:#fff;outline:none}
@media (max-width:900px){
	.quitter{right:12px;bottom:12px;height:40px;padding:0 16px;font-size:13px;gap:8px}
	.quitter svg{width:19px;height:19px}
}

/* ── Ligne de credit du pied : liens ──────────────────────────────────────────────────── */
.credit a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.credit a:hover,.credit a:focus-visible{text-decoration:none}

/* ── Recherche (header.php, functions.php, search.php) ────────────────────────────────── */
.lecteur-ecran{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.recherche-bouton{background:var(--menthe);border:0;padding:9px;margin-inline-start:8px;color:var(--prune);cursor:pointer;border-radius:50%;line-height:0}
.recherche-bouton svg{width:24px;height:24px;display:block}
.recherche-bouton:hover,.recherche-bouton:focus-visible,.recherche-bouton[aria-expanded="true"]{background:var(--vert);outline:none}
.recherche{position:relative;flex:0 0 100%;display:flex;gap:10px;align-items:center;padding-block:0 14px}
.recherche input{flex:1 1 auto;min-width:0;font:inherit;font-size:17px;padding:11px 16px;border-radius:999px;border:2px solid var(--menthe);background:#fff;color:var(--prune)}
.recherche input:focus{outline:none;border-color:var(--vert);box-shadow:0 0 0 3px rgba(200,239,174,.35)}
.recherche .btn{padding-block:11px;white-space:nowrap}
.recherche-suggestions{position:absolute;left:0;right:0;top:calc(100% - 6px);z-index:50;list-style:none;margin:0;padding:6px;
	background:#fff;border-radius:var(--r-carte);box-shadow:0 12px 32px rgba(90,28,58,.22);max-height:60vh;overflow:auto}
.recherche-suggestions li a{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:10px 12px;border-radius:10px;
	color:var(--prune);text-decoration:none;font-weight:500}
.recherche-suggestions li a small{flex:none;font-size:12px;letter-spacing:.6px;text-transform:uppercase;opacity:.6}
.recherche-suggestions li a:hover,.recherche-suggestions li[aria-selected="true"] a{background:var(--vert)}
.chapeau .cadre{flex-wrap:wrap}
.bt--recherche h1{font-size:clamp(44px,8vw,96px)}
.resultats-liste{list-style:none;margin:0;padding:0;display:grid;gap:14px;max-width:820px}
.resultats-liste li a{display:block;background:var(--menthe);border-radius:var(--r-carte);padding:18px 22px;color:var(--prune);text-decoration:none}
.resultats-liste li a:hover{background:var(--vert)}
.resultats-liste strong{display:block;font-size:var(--fs-p);line-height:1.25;margin-block:4px 6px}
.resultat-type{font-size:12px;letter-spacing:.8px;text-transform:uppercase;font-weight:700;opacity:.65}
.resultat-extrait{display:block;font-size:var(--fs-p2);line-height:1.4;opacity:.85}
.resultats .section-titre{margin-block:44px 18px}
@media (max-width:900px){.recherche-bouton{margin-inline-start:auto}.recherche .btn{display:none}}
/* 04/09 (Stephane, capture a 2000 px contre la maquette) : « le menu doit etre aligne sur la
   droite comme maquette ». MESURE : le menu finissait 94 px avant le bord du cadre, parce que
   la loupe (ajoutee ce matin, absente de la maquette) prenait cette place dans la rangee. Des
   qu'il y a de la marge autour du cadre (>= 1300 px), la loupe sort de la rangee et se pose
   DANS la marge, a droite du cadre : le menu retrouve le bord droit, au pixel de la maquette. */
@media (min-width:1300px){
	.chapeau .cadre{position:relative}
	.recherche-bouton{position:absolute;right:-56px;top:50%;transform:translateY(-50%);margin:0}
}

/* ── Fiche : retour et etiquettes (Margaux, 04/09) ────────────────────────────────────── */
.fiche-retour{display:inline-block;color:var(--menthe);text-decoration:none;font-weight:600;font-size:var(--fs-p2);margin-block-end:22px}
.fiche-retour:hover{text-decoration:underline;text-underline-offset:4px}
.fiche-tags{display:flex;flex-wrap:wrap;gap:8px;margin-block-end:18px}
.fiche-tags{max-width:459px;position:relative;z-index:2}
.fiche-retour{position:relative;z-index:2}
@media (min-width:901px){.bandeau-fiche .cadre{min-height:402px}.bandeau-fiche .cadre > div:first-child{align-self:start;padding-block-end:0}}
.fiche-tags span{display:inline-block;background:var(--menthe);color:var(--prune);font-weight:700;font-size:14px;letter-spacing:1px;
	text-transform:uppercase;padding:9px 16px;border-radius:8px;line-height:1}
.logos a{display:inline-block;line-height:0}