/* Ce que l'extension ajoute aux pages de recettes — et rien d'autre. Depuis la greffe sur le blog (PIER-5), les recettes sont rendues par les gabarits du thème actif : titres, vignettes, marges, typographie et responsive viennent de LUI (Salient sur le blog, pcrecettes au harnais). Cette feuille ne couvre donc plus que les deux constructions qui n'existent nulle part ailleurs : le formulaire de filtre et la liste des champs structurés. Chargée UNIQUEMENT sur /recette/ et /recette// : sur le blog, les 179 articles existants gardent l'apparence que Salient leur donne. */ /* --- Filtre -------------------------------------------------------------- Demande utilisateur (PIER-5) : les champs ET les boutons du formulaire doivent partager une même ligne de base BASSE — pas de valeur en dur (« ne pas figer une hauteur, aligner ») : les tailles de viennent du thème (Salient sur le blog) et changeraient le jour où sa typographie change ; une hauteur fixée en pixels casserait alors sans prévenir. Mesuré en production, à 1440 px, trois écarts : 1. un texte fait 48 px de haut, un le plus court grandit alors jusqu'à la hauteur du plus grand contrôle de sa ligne, quelle que soit cette hauteur — jamais 46 px ou 48 px écrits ici ; - le bloc « filtre__actions » (bouton + lien), lui, N'A PAS d'étiquette à étirer : il sort du lot avec `align-self: flex-end`, qui colle son PROPRE bas sur la ligne de base commune sans être étiré à la hauteur du groupe étiquette + contrôle — exactement l'effet recherché, un bas commun, sans toucher à sa hauteur naturelle. À l'intérieur, il est flex-row avec `align-items: center` : le lien (plus court) se centre sur la hauteur du bouton, lui, sans jamais lui être forcé. Ancrage (theme/tests/test_gabarits.sh, mesuré au navigateur) : retirer `flex: 1 0 auto` sur les contrôles, ou `align-self: flex-end` sur .filtre__actions, fait rougir la mesure des bas. Correction (mesuré SOUS SALIENT, absent du harnais theme/ — pcrecettes n'a pas cette règle, d'où un premier passage mesuré « bon » à tort) : Salient pose un remplissage bas GÉNÉRIQUE sur tout

— vérifié dans son CSS, `p { padding-bottom: var(--nectar-paragraph-bottom-spacing, 28px) }` (nectar/helpers/dynamic-styles.php génère la variable depuis le réglage de typographie de l'administration ; 22,5 px mesurés ici). C'est un réglage de RESPIRATION ENTRE PARAGRAPHES DE TEXTE — aucune intention de mise en page à respecter pour nos

de formulaire, qui n'en sont pas : légitime à neutraliser, PAS à compenser par une marge ou une hauteur inventée. Il alignait les deux ENVELOPPES (.filtre__champ et .filtre__actions finissaient bien toutes deux à 397 px), mais pas les COMMANDES qu'elles contiennent : le contrôle d'un champ, LUI, s'arrêtait à 374, pendant que le bouton — dépourvu d'étiquette au-dessus, donc de rien à rétrécir pour compenser — descendait jusqu'à 397. L'espacement entre les champs (et entre les lignes, une fois repliées) reste assuré par le `gap` du conteneur souple, déjà là : rien à ajouter pour ça. */ .filtre { border: 1px solid #ddd; padding: 1rem; margin-bottom: 2rem; } .filtre__champs { display: flex; flex-wrap: wrap; gap: 1rem; } .filtre__champ { display: flex; flex-direction: column; margin: 0; padding-bottom: 0; /* neutralise le remplissage générique de Salient sur

*/ } .filtre__champ > select, .filtre__champ > input { flex: 1 0 auto; /* remplit la hauteur disponible — jamais une valeur fixe */ } .filtre__actions { display: flex; align-items: center; /* centre "Tout afficher" sur la hauteur du bouton */ align-self: flex-end; /* colle SON bas sur la ligne de base commune */ gap: .75rem; margin: 0; padding-bottom: 0; /* même neutralisation, par cohérence et défense */ } .filtre label { display: block; font-size: .8rem; font-weight: 700; } /* --- Champs structurés de la fiche -------------------------------------- Une grille à deux colonnes (étiquette, valeur), pas un flex de dt/dd indépendants : un flex laisse chaque dt et chaque dd se replier SÉPARÉMENT au retour à la ligne — une étiquette et sa valeur pouvaient alors se retrouver sur des lignes différentes, redistribuées avec le couple suivant (constaté sur la fiche « araignee-mer-tartare » publiée temporairement : « Nombre de personnes » d'un côté, « 4 » semblant appartenir à « Saisonnalité » de l'autre — une information FAUSSE, pas seulement disgracieuse). La grille place dt en colonne 1 et dd en colonne 2 dans l'ordre du document : le couple reste sur la MÊME ligne quelle que soit la largeur, y compris quand une valeur est longue (la saisonnalité peut porter jusqu'à douze mois — elle occupe alors simplement plus de hauteur dans sa cellule, jamais une autre ligne). `grid-template-columns: max-content 1fr` NE SE RETIRE PAS : c'est lui qui corrige cette dislocation. */ .recette__details { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: max-content 1fr; column-gap: 1.5rem; row-gap: .5rem; border-block: 1px solid #ddd; padding-block: 1rem; } .recette__details dt { font-weight: 700; font-size: .8rem; align-self: start; } .recette__details dd { margin: 0; } @media (max-width: 600px) { .filtre__champs { flex-direction: column; } /* Une seule colonne : l'étiquette pleine largeur, puis sa valeur juste en dessous — toujours le couple qui se suit, jamais un autre entre deux, à la largeur mobile prévue par le brief (390 px). */ .recette__details { grid-template-columns: 1fr; row-gap: .1rem; } /* `align-self: flex-end` s'applique à l'axe TRANSVERSE du flex — la largeur en colonne, la hauteur en ligne. Sans ce retour à `stretch` (le défaut, pleine largeur, déjà celui des autres champs), les actions se seraient décalées à DROITE du formulaire une fois la colonne mobile active, seul bloc de tout le formulaire à ne pas occuper toute la largeur — vérifié en le laissant tel quel avant d'écrire cette règle. */ .filtre__actions { align-self: stretch; } }