/*
Theme Name: HORMETIK
Theme URI: https://hormetik.com
Description: Thème enfant GeneratePress pour HORMETIK : récupération et bien-être à domicile. Tout le style et la personnalisation du site vivent ici, jamais dans le thème parent.
Author: Aixandre
Author URI: https://hormetik.com
Template: generatepress
Version: 0.5.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: recup
*/

/* ============================================================
   ORGANISATION DE LA FEUILLE (réorganisation du 31/07/2026)

   Un chapitre = un composant. Chaque chapitre contient TOUTES
   les règles de son composant, desktop d'abord, media queries
   en fin de chapitre. Pour intégrer une maquette : on remplace
   le chapitre concerné, on ne touche pas aux autres.

   Fondations : 1 polices · 2 tokens · 3 base · 4 boutons & CTA
   · 5 en-tête/pied de page · 6 contenu éditorial
   Transversaux : 7 fil d'Ariane · 8 badges & étiquettes
   · 9 pavé de note · 10 pastilles de tri · 11 infobulle
   · 12 loupe & visionneuse · 13 aide éditeur
   Fiche produit : 14 structure, hero & galerie · 15 barre
   d'ancres · 16 barre d'achat fixe · 17 table des offres
   · 18 encadré de méthode · 19 carte analyse · 20 fiche
   technique · 21 alternatives · 22 vidéo · 23 FAQ
   · 24 signature auteur · 25 avis des lecteurs
   · 26 formulaire d'avis
   Pages money/hub : 28 gabarit HORMETIK · 29 TL;DR
   · 30 produit du classement · 31 tableau comparatif
   · 32 CTA prix (transversal) · 33 listing de catégorie
   · 35 top table · 36 palette des notes (classes d'état :
   aucun chapitre suivant ne doit les redéfinir)
   · 37 guide d'achat · 38 comparateur · 39 article
   · 40 hub de silo · 41 page d'accueil · 42 quiz configurateur
   · 43 calculateur de consommation · 44 outils (hub, vitrine, encarts)
   · 45 recherche et 404 · 46 page auteur · 47 blocs éditoriaux
   · 48 plan du site · 49 formulaire de contact · 50 page texte
   · 51 catalogue toutes nos analyses · 52 lisibilité des notes

   Règle de cascade : à spécificité égale, la dernière règle du
   fichier gagne. L'ordre des chapitres et l'ordre interne des
   règles d'un chapitre sont donc significatifs — en cas de
   doute, ajouter la nouvelle règle en fin de chapitre.
   ============================================================ */

/* ============================================================
   1. POLICES AUTO-HÉBERGÉES
   Archivo (titres) et Inter (texte), servies depuis le thème :
   pas d'appel au CDN Google (RGPD + performance). Les plages
   « unicode-range » évitent de charger le fichier « latin étendu »
   tant qu'un caractère comme « œ » n'apparaît pas dans la page.
   ============================================================ */

/* Archivo italique (variable : graisses 100-900, chasse 62-125 %) — latin */
@font-face {
	font-family: 'Archivo';
	font-style: italic;
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
	src: url('fonts/archivo-italique-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Archivo italique — latin étendu */
@font-face {
	font-family: 'Archivo';
	font-style: italic;
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
	src: url('fonts/archivo-italique-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter normal (variable : graisses 100-900) — latin */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter normal — latin étendu */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Inter italique — latin */
@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/inter-italique-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter italique — latin étendu */
@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/inter-italique-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   2. DESIGN TOKENS — direction « crème & olive »
   Source : _projet/04-charte-design.md + maquettes validées.
   Toute couleur, police ou arrondi utilisé dans le site DOIT
   passer par ces variables — jamais de valeur en dur ailleurs.
   ============================================================ */

:root {
	/* Couleurs de base (noms fixés par la charte) */
	--cream: #F1EADC;             /* fond principal des sections */
	--white: #FFFFFF;             /* fond alterné (cartes, sections) */
	--ink: #111111;               /* texte, titres, bandeaux sombres */
	--olive: #808764;             /* accent unique : CTA, notes, filets */

	/* Déclinaisons (tirées des maquettes) */
	--olive-fonce: #62684C;       /* liens dans le texte, survols (contraste renforcé) */
	--olive-clair: #B9BD9F;       /* barres de note intermédiaires */
	--texte-doux: #54513F;        /* texte secondaire sur fond clair */
	--texte-meta: #8B8574;        /* métadonnées, légendes, fils d'Ariane */
	--texte-sur-sombre: #C9C3B4;  /* liens et texte sur fond encre */
	--sable: #DAD3C2;             /* neutre clair : étoiles vides, fonds discrets */
	--vert-pale: #EDEFE1;         /* chips, surlignage « meilleure valeur », fonds d'encart (maquettes 2026) */
	--gris-doux: #F4F3F0;         /* encart de transparence, fonds neutres (maquettes 2026) */
	--fond-zebre: #FAF8F3;        /* zébrure des tableaux (maquettes 2026) */
	--fond-zebre-chaud: #F7F5EF;  /* zébrure chaude : specs et bande de points vérifiés du bloc produit */
	--fond-offre: #F7F8F2;        /* surlignage de la meilleure offre (table des offres, maquette produit 2026) */
	--fond-ambre: #FFFCF6;        /* survol de la carte « Avis utilisateurs » du hero produit (maquette 2026) */
	--bordure: rgba(17, 17, 17, 0.13);
	--filet-sur-sombre: rgba(241, 234, 220, 0.2); /* filets crème translucides sur fond encre (stats du hub, maquette 2026) */

	/* Micro-tags de silo (seule entorse à l'accent unique, à dose homéopathique) */
	--tag-froid: #3E7C93;         /* bleu glacier — bain froid (4,7:1 sur blanc) */
	--tag-chaud: #A85E35;         /* terracotta — sauna (assombri du #B5673B des maquettes : 4,2:1 -> 5,3:1 sur blanc, usage texte uniquement) */

	/* Sémantique positif/négatif (avantages, inconvénients, badges) */
	--vert: #2F7D3F;
	--vert-fond: rgba(47, 125, 63, 0.08);
	--rouge: #B03A2E;
	--rouge-fond: rgba(176, 58, 46, 0.07);

	/* Palette des notes sur 10 — 6 paliers en teintes désaturées, alignée
	   sur les maquettes 2026 et la page méthodologie (arbitrage du
	   01/08/2026) : p1 (< 5, rouge) → p6 (>= 9, vert franc). Deux tons par
	   palier : « fond » (pastilles pleines, barres, jauges — valeurs exactes
	   des maquettes) et « texte » (déclinaisons assombries par nos soins :
	   posées en texte sur fond blanc, les teintes de fond manqueraient de
	   contraste). SOURCE UNIQUE de ces couleurs : le PHP et le JS ne posent
	   que des classes de palier (chapitre en fin de feuille), jamais des hex. */
	/* Palette avivée le 17/08/2026 : les teintes d'origine, trop terreuses,
	   se lisaient mal en petite pastille. Les fonds sont saturés (barres et
	   pastilles), les déclinaisons « texte » restent assombries pour tenir
	   le contraste AA sur fond clair. */
	/* Échelle relevée sur Kimovil le 17/08/2026 (leurs paliers ki-1 à
	   ki-10, échantillonnés dans le navigateur). Leur particularité : des
	   teintes désaturées à luminosité constante, ce qui laisse le texte en
	   blanc sur toute l'échelle, du rouge au vert. Nos six paliers sont
	   répartis sur la leur. */
	--note-p1-fond: #B9646E;
	--note-p1-texte: #8E3F49;
	--note-p1-sur: #FFFFFF;
	--note-p2-fond: #B78F46;
	--note-p2-texte: #8A6A2C;
	--note-p2-sur: #FFFFFF;
	--note-p3-fond: #AFAD36;
	--note-p3-texte: #827F22;
	--note-p3-sur: #FFFFFF;
	--note-p4-fond: #84B149;
	--note-p4-texte: #5F8531;
	--note-p4-sur: #FFFFFF;
	--note-p5-fond: #66AF54;
	--note-p5-texte: #47823A;
	--note-p5-sur: #FFFFFF;
	--note-p6-fond: #47AC60;
	--note-p6-texte: #2F8043;
	--note-p6-sur: #FFFFFF;

	/* Note des avis lecteurs : ambre, réservé à cet usage (chiffre + étoile) */
	--etoile: #E3922E;

	/* Couleur d'action — réservée aux boutons (décision du 29/07/2026,
	   réf. thepolarplunge.co) : le violet ne sort JAMAIS des CTA.
	   Le texte reste blanc dans tous les états, y compris au survol. */
	--cta-fond: #5A31F4;
	--cta-fond-survol: #3C0DEF;
	--cta-texte: #FFFFFF;
	--rayon-cta: 999px; /* pastille pleine, façon Polar Plunge */

	/* Typographie */
	--police-titres: 'Archivo', sans-serif;
	--police-texte: 'Inter', system-ui, sans-serif;

	/* Arrondis. --rayon-carte (3 px, quasi carré) = l'existant, migré vers
	   --rayon-carte-large (12 px, maquettes 2026) composant par composant,
	   au fil des intégrations — jamais en bloc. */
	--rayon-carte: 3px;
	--rayon-carte-large: 12px;
	--rayon-bouton: 10px;

	/* Largeur canonique du conteneur (maquettes 2026, arbitrage du 01/08/2026) */
	--largeur-conteneur: 1240px;
}

/* ============================================================
   3. BASE — couleurs et typographie globales
   ============================================================ */

/* Filet de sécurité : jamais de défilement horizontal de page. Posé aussi
   sur la racine — Chrome ne propage pas le clip du body au viewport, et la
   page pouvait défiler vers du vide (constaté sur le comparateur mobile). */
html {
	overflow-x: clip;
}

body {
	background-color: var(--cream);
	color: var(--ink);
	font-family: var(--police-texte);
	overflow-x: clip;
}

/* Densité typographique globale (recalibrage du 30/07/2026) */
body {
	font-size: 15px;
}

/* Titres : la signature Polar Plunge — italique gras, capitales,
   chasse élargie, interlettrage légèrement serré. */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 115%;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	line-height: 1.1;
	text-wrap: pretty;
}

h1 {
	font-stretch: 120%;
	letter-spacing: -0.015em;
	line-height: 1.04;
}

/* Liens dans le contenu : olive foncé (lisible sur crème) + soulignement,
   pour rester identifiables sans dépendre de la seule couleur. */
.entry-content a,
.comment-content a {
	color: var(--olive-fonce);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.entry-content a:hover,
.comment-content a:hover {
	color: var(--ink);
}

/* Sélection de texte aux couleurs de la marque */
::selection {
	background-color: var(--olive);
	color: var(--white);
}

/* Défilement doux vers les ancres (désactivé si l'utilisateur préfère
   réduire les animations) + marge pour ne pas coller au bord haut */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

.recup-avis [id] {
	scroll-margin-top: 24px;
}

/* Accessibilité clavier : focus visible net sur tout élément interactif */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--olive-fonce);
	outline-offset: 2px;
}

/* ============================================================
   4. BOUTONS & CTA
   Boutons natifs/Gutenberg + la famille .recup-cta (réutilisée
   partout : hero, top table, classement, offres, formulaires).
   ============================================================ */

button,
.button,
input[type="submit"],
input[type="button"],
.wp-block-button__link {
	background-color: var(--cta-fond);
	color: var(--cta-texte);
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 110%;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 16px 30px;
	border: 0;
	border-radius: var(--rayon-cta);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

button:hover,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.wp-block-button__link:hover {
	background-color: var(--cta-fond-survol);
	color: var(--cta-texte);
}

/* CTA (réutilisable partout) */

.recup-cta {
	display: inline-block;
	background-color: var(--cta-fond);
	color: var(--cta-texte);
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 110%;
	font-size: 13px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 16px 30px;
	border-radius: var(--rayon-cta);
	text-decoration: none;
	text-align: center;
	transition: background-color 0.15s ease;
}

.recup-cta:hover,
.recup-cta:focus {
	background-color: var(--cta-fond-survol);
	color: var(--cta-texte);
}

/* Variante secondaire : contour encre, lisible sur crème comme sur blanc */

.recup-cta--contour {
	background-color: transparent;
	color: var(--ink);
	border: 1px solid var(--ink);
	padding: 10px 20px;
	font-size: 11.5px;
}

.recup-cta--contour:hover,
.recup-cta--contour:focus {
	background-color: var(--ink);
	color: var(--white);
}

/* Priorité sur la règle des liens éditoriaux (.entry-content a) :
   dans le contenu d'une page, un CTA reste blanc, sans soulignement,
   dans tous les états — y compris au survol. */
a.recup-cta,
.entry-content a.recup-cta,
.comment-content a.recup-cta {
	color: var(--cta-texte);
	text-decoration: none;
}

a.recup-cta:hover,
a.recup-cta:focus,
.entry-content a.recup-cta:hover,
.entry-content a.recup-cta:focus {
	color: var(--cta-texte);
}

/* Le contour garde son encre partout (y compris hors contenu : la règle
   « texte blanc » ci-dessus le blanchissait — invisible sur carte blanche). */
a.recup-cta--contour,
.entry-content a.recup-cta--contour {
	color: var(--ink);
}

a.recup-cta--contour:hover,
a.recup-cta--contour:focus,
.entry-content a.recup-cta--contour:hover,
.entry-content a.recup-cta--contour:focus {
	background-color: var(--ink);
	color: var(--white);
}

.recup-cta--petit {
	padding: 12px 22px;
	font-size: 12px;
}

/* Logo du marchand dans le CTA (pastille blanche) */

.recup-cta__logo {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	background-color: var(--white);
	border-radius: 999px;
	padding: 3px 9px;
	margin-left: 8px;
}

.recup-cta__logo img {
	display: block;
	height: 14px;
	width: auto;
	max-width: 64px;
	object-fit: contain;
}

/* ============================================================
   5. EN-TÊTE, NAVIGATION & PIED DE PAGE — bandeaux sombres
   (maquette : bandeau encre, logo crème, navigation feutrée)
   + bandeau d'affiliation au-dessus de l'en-tête.
   ============================================================ */

/* GeneratePress rend encore son enveloppe .site-header : on la laisse
   traverser (notre header pose lui-même sa bande sombre). */
.site-header {
	background-color: transparent;
	padding: 0;
}

/* ---------- Header à méga-menu (maquette « Chrome du site ») ---------- */

.recup-entete {
	position: relative;
	background-color: var(--ink);
	color: var(--texte-sur-sombre);
	z-index: 90;
}

.recup-entete__barre {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 0 clamp(20px, 4vw, 56px);
	min-height: 62px;
}

a.recup-entete__logo,
a.recup-entete__logo:visited {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 125%;
	font-size: 22px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--cream);
	text-decoration: none;
}

/* Le disque du logo — l'arrondi gomme les coins noirs du fichier. */
.recup-entete__picto {
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: block;
}

a.recup-entete__logo:hover,
a.recup-entete__logo:focus {
	color: var(--white);
}

/* Navigation : poussée à droite, la loupe/burger à l'extrême droite. */
.recup-entete__nav {
	margin-left: auto;
}

.recup-entete__liste {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Les silos et entrées fixes partagent le même dessin d'onglet.
   border-radius: 0 : la règle globale button (pilule 999px) courbait le
   filet olive de l'onglet ouvert en arc de « bulle » sous la barre. */
.recup-entete__lien,
a.recup-entete__lien,
a.recup-entete__lien:visited {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 0;
	border-bottom: 2.5px solid transparent;
	border-radius: 0;
	padding: 20px 14px 18px;
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 110%;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--texte-sur-sombre);
	text-decoration: none;
	cursor: pointer;
}

/* Le fond reste éteint aussi au survol/focus : la règle globale
   button:hover (violet CTA) peignait le déclencheur en pilule bleue. */
.recup-entete__lien:hover,
a.recup-entete__lien:hover,
.recup-entete__lien:focus-visible,
a.recup-entete__lien:focus-visible,
.recup-entete__lien:focus,
.recup-entete__lien:active {
	background: none;
	color: var(--cream);
}

/* Onglet actif (survol du silo ou page courante) : olive + filet olive. */
.recup-entete__item--mega:hover .recup-entete__declencheur,
.recup-entete__item--mega:focus-within .recup-entete__declencheur,
.recup-entete__item--mega.est-ouvert .recup-entete__declencheur {
	color: var(--olive-clair);
	border-bottom-color: var(--olive);
}

.recup-entete__chevron {
	transition: transform 0.15s ease;
}

.recup-entete__item--mega:hover .recup-entete__chevron,
.recup-entete__item--mega.est-ouvert .recup-entete__chevron {
	transform: rotate(180deg);
}

/* ---------- Méga-menu déployé ---------- */

.recup-mega {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background-color: var(--cream);
	box-shadow: 0 14px 30px rgba(17, 17, 17, 0.16);
	z-index: 80;
}

/* Ouverture sans JavaScript (survol/focus clavier, desktop) ET avec (classe
   posée au clic/tactile). Le [hidden] de repli est surclassé par ces règles. */
@media (min-width: 1024px) {
	.recup-entete__item--mega:hover > .recup-mega,
	.recup-entete__item--mega:focus-within > .recup-mega,
	.recup-entete__item--mega.est-ouvert > .recup-mega {
		display: block;
	}
}

.recup-mega__conteneur {
	max-width: 1180px;
	margin: 0 auto;
	padding: 28px clamp(20px, 4vw, 56px) 32px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
}

.recup-mega__titre {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--olive-fonce);
	margin: 0 0 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--bordure);
}

.recup-mega__liste {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}

.recup-mega__liste li {
	margin: 0;
}

.recup-mega__liste a,
.recup-mega__liste a:visited {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	font-size: 15px;
	color: var(--ink);
	text-decoration: none;
}

.recup-mega__liste a:hover,
.recup-mega__liste a:focus-visible {
	color: var(--olive-fonce);
}

.recup-mega__compteur {
	flex: none;
	font-size: 12px;
	color: var(--texte-meta);
	font-variant-numeric: tabular-nums;
}

a.recup-mega__tout,
a.recup-mega__tout:visited {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 110%;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--olive);
	text-decoration: none;
}

a.recup-mega__tout:hover,
a.recup-mega__tout:focus-visible {
	color: var(--olive-fonce);
}

/* ---------- Loupe, burger ---------- */

.recup-entete__outils {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: none;
}

/* padding: 0 : le padding de la règle globale button (16px 30px) laissait
   0 px de contenu dans ces boutons de 40 px — la barre centrale du burger
   disparaissait (« burger à 2 traits ») et Safari iOS masquait la loupe. */
.recup-entete__loupe,
.recup-entete__burger {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 50%;
	color: var(--cream);
	cursor: pointer;
}

.recup-entete__loupe:hover,
.recup-entete__loupe:focus-visible,
.recup-entete__burger:hover,
.recup-entete__burger:focus-visible {
	background-color: rgba(255, 255, 255, 0.1);
	color: var(--white);
}

.recup-entete__burger {
	display: none; /* Desktop : la nav est visible, pas de burger. */
}

/* Icône burger en trois barres (dessinée en CSS) */
.recup-entete__burger-barres,
.recup-entete__burger-barres::before,
.recup-entete__burger-barres::after {
	display: block;
	width: 18px;
	height: 2px;
	background-color: currentColor;
	border-radius: 2px;
}

.recup-entete__burger-barres {
	position: relative;
}

.recup-entete__burger-barres::before,
.recup-entete__burger-barres::after {
	content: "";
	position: absolute;
	left: 0;
}

.recup-entete__burger-barres::before {
	top: -6px;
}

.recup-entete__burger-barres::after {
	top: 6px;
}

/* ---------- Overlay de recherche ---------- */

.recup-recherche {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background-color: var(--ink);
	box-shadow: 0 14px 30px rgba(17, 17, 17, 0.25);
	z-index: 85;
}

.recup-recherche[hidden] {
	display: none;
}

.recup-recherche__conteneur {
	max-width: 1180px;
	margin: 0 auto;
	padding: 18px clamp(20px, 4vw, 56px);
}

.recup-recherche__forme {
	display: flex;
	align-items: center;
	gap: 12px;
	background-color: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 12px;
	padding: 6px 6px 6px 16px;
	color: var(--texte-sur-sombre);
}

.recup-recherche__forme:focus-within {
	border-color: var(--olive);
}

.recup-recherche__forme > svg {
	flex: none;
	color: var(--texte-sur-sombre);
}

.recup-recherche__champ {
	flex: 1;
	min-width: 0;
	background: none;
	border: 0;
	padding: 10px 0;
	font-size: 15px;
	color: var(--cream);
}

.recup-recherche__champ::placeholder {
	color: var(--texte-sur-sombre);
}

.recup-recherche__champ:focus {
	outline: none;
}

.recup-recherche__fermer {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0; /* Même garde que la loupe : le padding global écrasait l'icône. */
	background: none;
	border: 0;
	border-radius: 9px;
	color: var(--texte-sur-sombre);
	cursor: pointer;
}

.recup-recherche__fermer:hover,
.recup-recherche__fermer:focus-visible {
	background-color: rgba(255, 255, 255, 0.1);
	color: var(--cream);
}

/* ---------- Menu mobile ---------- */

.recup-menu-mobile {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	max-height: calc(100vh - 62px);
	overflow-y: auto;
	background-color: var(--ink);
	box-shadow: 0 14px 30px rgba(17, 17, 17, 0.3);
	z-index: 85;
}

.recup-menu-mobile[hidden] {
	display: none;
}

.recup-menu-mobile__liste {
	list-style: none;
	margin: 0;
	padding: 8px 0 20px;
}

.recup-menu-mobile__item {
	margin: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.recup-menu-mobile__declencheur,
.recup-menu-mobile__lien,
a.recup-menu-mobile__lien,
a.recup-menu-mobile__lien:visited {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: none;
	border: 0;
	padding: 16px clamp(20px, 5vw, 32px);
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 110%;
	font-size: 15px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--cream);
	text-decoration: none;
	cursor: pointer;
}

/* Même garde-fou que le header : jamais le violet CTA global au survol. */
.recup-menu-mobile__declencheur:hover,
.recup-menu-mobile__declencheur:focus,
.recup-menu-mobile__declencheur:active {
	background: none;
	color: var(--cream);
}

.recup-menu-mobile__declencheur svg {
	transition: transform 0.15s ease;
}

.recup-menu-mobile__declencheur[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.recup-menu-mobile__sous {
	padding: 0 clamp(20px, 5vw, 32px) 12px;
}

.recup-menu-mobile__sous[hidden] {
	display: none;
}

.recup-menu-mobile__sous a,
.recup-menu-mobile__sous a:visited {
	display: block;
	padding: 9px 0 9px 14px;
	border-left: 2px solid rgba(255, 255, 255, 0.14);
	font-size: 14px;
	color: var(--texte-sur-sombre);
	text-decoration: none;
}

.recup-menu-mobile__sous a:hover,
.recup-menu-mobile__sous a:focus-visible {
	color: var(--cream);
	border-left-color: var(--olive);
}

a.recup-menu-mobile__tout {
	font-weight: 700;
	color: var(--olive-clair);
}

/* Défilement de page verrouillé quand le menu mobile est ouvert. */
body.recup-menu-ouvert {
	overflow: hidden;
}

/* ---------- Pied de page riche (maquette « Chrome du site ») ---------- */

.recup-footer {
	background-color: var(--ink);
	color: var(--texte-sur-sombre);
}

/* La barre de comparaison flottante ne doit pas masquer le pied de page. */
body.recup-comparaison-active .recup-footer {
	padding-bottom: 82px;
}

.recup-footer__conteneur {
	max-width: 1180px;
	margin: 0 auto;
	padding-left: clamp(20px, 4vw, 56px);
	padding-right: clamp(20px, 4vw, 56px);
}

.recup-footer__haut {
	padding: 44px 0 8px;
}

.recup-footer__grille {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
}

.recup-footer__titre {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--olive-clair);
	margin: 0 0 14px;
}

.recup-footer__colonne ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.recup-footer__colonne li {
	margin: 0 0 10px;
}

.recup-footer__colonne a,
.recup-footer__colonne a:visited {
	font-size: 13.5px;
	color: var(--texte-sur-sombre);
	text-decoration: none;
}

.recup-footer__colonne a:hover,
.recup-footer__colonne a:focus-visible {
	color: var(--cream);
}

/* Bande newsletter */
.recup-footer__lettre {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	margin-top: 28px;
}

.recup-footer__lettre-conteneur {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px 40px;
	flex-wrap: wrap;
	padding-top: 26px;
	padding-bottom: 26px;
}

.recup-footer__lettre-titre {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 112%;
	font-size: 17px;
	text-transform: uppercase;
	color: var(--cream);
	margin: 0;
}

.recup-footer__lettre-sous {
	font-size: 12.5px;
	color: var(--texte-sur-sombre);
	margin: 5px 0 0;
}

.recup-footer__lettre-forme {
	display: flex;
	gap: 10px;
	flex: 1;
	max-width: 420px;
	min-width: 280px;
}

.recup-footer__lettre-champ {
	flex: 1;
	min-width: 0;
	background-color: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 14px;
	color: var(--cream);
}

.recup-footer__lettre-champ::placeholder {
	color: var(--texte-sur-sombre);
}

.recup-footer__lettre-champ:focus-visible {
	outline: none;
	border-color: var(--olive);
}

.recup-footer__lettre-bouton {
	flex: none;
}

/* Barre du bas */
.recup-footer__bas {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.recup-footer__bas-conteneur {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px 26px;
	flex-wrap: wrap;
	padding-top: 22px;
	padding-bottom: 30px;
}

.recup-footer__logo {
	margin: 0;
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 125%;
	font-size: 16px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--cream);
}

.recup-footer__mention {
	margin: 0;
	font-size: 12px;
	color: var(--texte-sur-sombre);
}

/* ---------- Responsive du chrome ---------- */

@media (max-width: 1023px) {
	.recup-entete__nav {
		display: none; /* Remplacée par le menu mobile. */
	}

	.recup-entete__burger {
		display: flex;
	}

	.recup-entete__outils {
		margin-left: auto;
	}

	.recup-footer__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px;
	}
}

@media (max-width: 767px) {

	/* Le lien « Toutes nos analyses / Tous les outils / Tous les articles »
	   quittait l'entête : à côté du H2 il se faisait couper par le bord de
	   l'écran. display:contents dissout l'entête dans le conteneur, le lien
	   part en fin de section par order (retour mobile du 21/08/2026).
	   Navigateurs sans :has : la disposition d'origine reste. */
	.recup-hub__conteneur:has(> .recup-hub__entete-section > a.recup-phares__tout) {
		display: flex;
		flex-direction: column;
	}

	.recup-hub__entete-section:has(> a.recup-phares__tout) {
		display: contents;
	}

	.recup-hub__entete-section:has(> a.recup-phares__tout) .recup-hub__titre-section {
		margin-bottom: 22px; /* l'entête dissoute ne porte plus sa marge */
	}

	/* La section phares est bord à bord pour son carrousel : le retrait
	   horizontal vivait sur l'entête, dissoute ci-dessus. Le titre le
	   reprend. Magazine et vitrine outils n'en ont pas besoin, leurs
	   sections portent déjà 16 px. */
	.recup-phares .recup-hub__entete-section:has(> a.recup-phares__tout) .recup-hub__titre-section {
		padding: 0 16px;
	}

	.recup-hub__conteneur > .recup-hub__entete-section > a.recup-phares__tout {
		order: 99;
		align-self: center;
		margin-top: 26px;
	}

	.recup-entete__barre {
		min-height: 56px;
	}

	a.recup-entete__logo {
		font-size: 18px;
		gap: 8px;
	}

	.recup-entete__picto {
		width: 26px;
		height: 26px;
	}

	.recup-footer__lettre-conteneur,
	.recup-footer__bas-conteneur {
		flex-direction: column;
		align-items: flex-start;
	}

	.recup-footer__lettre-forme {
		width: 100%;
		max-width: none;
	}
}

/* Encart de transparence affiliation — en haut du contenu des pages
   monétisées (remplace le bandeau au-dessus de l'en-tête, arbitrage
   du 01/08/2026 : moins intrusif, conforme aux maquettes). */

/* Ligne discrète depuis le 12/08/2026 (plus d'encart-carte en tête de
   page : il repoussait le hero) — posée près du bloc auteur (fiche) ou en
   pied de contenu (pages money). */
.recup-transparence {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 11px;
	line-height: 1.55;
	color: var(--texte-meta);
	margin: 0 0 18px;
}

.recup-transparence svg {
	flex: none;
	margin-top: 2px;
	width: 13px;
	height: 13px;
}

/* En pied de contenu des pages money : respiration au-dessus. */
.recup-page__contenu + .recup-transparence {
	margin: 26px 0 0;
}

/* ============================================================
   6. CONTENU ÉDITORIAL — ajustements légers sur les éléments
   courants de Gutenberg
   ============================================================ */

/* Cartes et images : coins quasi carrés, bordure discrète */
.entry-content img,
.wp-block-image img {
	border-radius: var(--rayon-carte);
}

/* Tableaux : chiffres alignés (prix, notes, specs) */
table {
	font-variant-numeric: tabular-nums;
}

/* Tableaux éditoriaux Gutenberg (maquette Article 2026) : en-tête encre,
   zébrures, défilement horizontal sur mobile (le bloc pose lui-même son
   conteneur .wp-block-table). */
.wp-block-table {
	margin: 0 0 24px;
	overflow-x: auto;
}

.wp-block-table table {
	width: 100%;
	min-width: 420px;
	border-collapse: collapse;
	font-size: 13.5px;
}

.wp-block-table thead th {
	background-color: var(--ink);
	color: var(--cream);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: left;
	padding: 12px 14px;
	border: 0;
}

.wp-block-table thead th:first-child {
	border-radius: 8px 0 0 0;
}

.wp-block-table thead th:last-child {
	border-radius: 0 8px 0 0;
}

.wp-block-table td,
.wp-block-table tbody th {
	padding: 12px 14px;
	border: 0;
	border-bottom: 1px solid var(--bordure);
}

.wp-block-table tbody tr:nth-child(even) {
	background-color: var(--fond-zebre, #FAF8F3);
}

/* Citations : filet olive, italique éditorial */
blockquote {
	border-left: 3px solid var(--olive);
	font-style: italic;
	color: var(--texte-doux);
}

/* Résultats de recherche et archives (style d'attente, avant leur vraie
   maquette) : l'image mise en avant reste une vignette, pas un panneau. */
.search-results .post-image,
.archive .post-image {
	max-width: 160px;
}

.search-results .post-image img,
.archive .post-image img {
	width: 100%;
	height: auto;
	border-radius: var(--rayon-carte);
}

/* ============================================================
   7. FIL D'ARIANE — rendu par single-recup_produit.php et
   gabarit-page-hormetiq.php
   ============================================================ */

/* Fil d'Ariane façon Polar Plunge : capitales italiques grasses, discret */

.recup-fil {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 110%;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--texte-meta);
	margin-bottom: 8px;
}

.recup-fil a {
	color: var(--texte-meta);
	text-decoration: none;
}

.recup-fil a:hover {
	color: var(--ink);
}

.recup-fil__actuel {
	color: var(--ink);
}

@media (max-width: 767px) {
	/* Le fil tient sur UNE ligne, quitte à défiler : sur un écran étroit,
	   une arborescence profonde prenait deux lignes en capitales et
	   repoussait le titre du produit hors de l'écran (constat du
	   17/08/2026, modèle retenu : le fil compact de Kimovil). */
	.recup-fil {
		font-size: 9px;
		gap: 5px;
		margin-bottom: 4px;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		white-space: nowrap;
		opacity: 0.85;
	}

	.recup-fil::-webkit-scrollbar {
		display: none;
	}

	/* Le maillon courant reste lisible, les parents s'effacent. */
	.recup-fil > * {
		flex: none;
	}
}

/* ============================================================
   8. BADGES DE MÉTHODE & ÉTIQUETTES ÉDITORIALES
   « Testé par nous » / « Analyse comparative » (hero produit,
   carte classement) et « Notre choix » / « Meilleur budget »
   (top table, classement).
   ============================================================ */

.recup-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 7px 12px;
	border-radius: var(--rayon-carte);
}

.recup-badge--teste {
	background-color: var(--olive);
	color: var(--white);
}

.recup-badge--analyse {
	background-color: var(--white);
	color: var(--texte-doux);
	border: 1px solid var(--bordure);
}

.recup-etiquette {
	display: inline-block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	background-color: var(--olive);
	color: var(--white);
	padding: 4px 9px;
	border-radius: var(--rayon-carte);
}

.recup-etiquette--grande {
	font-size: 11.5px;
	padding: 6px 12px;
	align-self: flex-start;
}

/* ============================================================
   9. PAVÉ DE NOTE — badge coloré « 8,6 » (hero, barre fixe,
   avis lecteurs, blocs du plugin). La couleur réelle est posée
   en ligne selon la note (rouge → vert).
   ============================================================ */

.recup-score__note {
	flex: none;
	background-color: var(--olive);
	color: var(--white);
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-size: 30px;
	letter-spacing: normal; /* La règle button globale (interlettrage + capitales) fuyait dans les pastilles-boutons : les chiffres s'écartaient. */
	text-transform: none;
	padding: 12px 15px;
	border-radius: 9px; /* Pavés arrondis des maquettes 2026 (l'ancien --rayon-carte 3px les rendait quasi carrés). */
	font-variant-numeric: tabular-nums;
}

.recup-score__note small {
	font-size: 14px;
	opacity: 0.8;
}

/* Variante compacte du pavé de note (barre fixe, moyenne des avis) */

.recup-score__note--petite {
	font-size: 17px;
	padding: 8px 10px;
}

.recup-score__note--petite small {
	font-size: 11px;
}

/* Densité typographique (recalibrage du 30/07/2026) */

.recup-score__note--petite {
	font-size: 15px;
	padding: 7px 9px;
}

/* Pastille de note compacte des tableaux (maquettes 2026) : Inter gras,
   coins arrondis 7 px — la couleur vient des classes de palier. */

.recup-note-pastille {
	display: inline-block;
	color: var(--white);
	font-family: var(--police-texte);
	font-style: normal;
	font-weight: 700;
	padding: 5px 9px;
	border-radius: 7px;
	font-variant-numeric: tabular-nums;
}

/* ============================================================
   10. PASTILLES DE TRI / FILTRES — .recup-filtres
   Utilisées par le tri des avis lecteurs (page produit). La top
   table 2026 a ses propres pilules de tri (chapitre 35).
   ============================================================ */

.recup-filtres {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 9px;
	margin: 20px 0 0;
	font-size: 11.5px;
}

.recup-filtres__libelle {
	color: var(--texte-meta);
	margin-right: 2px;
}

/* Pilules calées sur la maquette produit 2026 : bas de casse, fond
   transparent sur le fond crème, l'active passe en vert pâle. */
.recup-filtres button {
	background-color: transparent;
	color: var(--texte-doux);
	border: 1px solid var(--bordure);
	font-family: var(--police-texte);
	font-style: normal;
	font-weight: 400;
	font-size: 11.5px;
	letter-spacing: 0;
	text-transform: none;
	padding: 7px 14px;
	border-radius: 999px;
	cursor: pointer;
}

.recup-filtres button:hover,
.recup-filtres button:focus {
	background-color: transparent;
	border-color: var(--ink);
	color: var(--ink);
}

/* Pilule active en olive plein : le vert pâle de la maquette se noyait
   dans le fond crème (demande du 03/08/2026) — même langage que le tri
   actif de la top table. */
.recup-filtres button:active,
.recup-filtres button.recup-filtres--actif {
	background-color: var(--olive);
	border-color: var(--olive);
	color: var(--white);
	font-weight: 600;
}

/* ============================================================
   11. INFOBULLE DES NOTES (survol sur PC, clic sur mobile)
   Panneau de détail des critères, déclenché depuis le pavé de
   note (top table, product box, tableau).
   ============================================================ */

.recup-infobulle {
	position: relative;
	display: inline-flex;
}

.recup-infobulle__declencheur {
	cursor: pointer;
	border: 0;
}

.recup-infobulle__panneau {
	/* display:none (et non visibility) : un panneau invisible mais présent
	   dans la mise en page élargissait la zone de défilement sur mobile. */
	display: none;
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: 60;
	width: 295px;
	max-width: calc(100vw - 48px);
	background-color: var(--white);
	/* Couleur posée ici : dans l'en-tête sombre du bloc produit, le panneau
	   héritait du texte crème — valeurs illisibles sur fond blanc. */
	color: var(--ink);
	border: 1px solid var(--bordure);
	border-radius: var(--rayon-carte-large);
	padding: 16px 18px;
	font-variant-numeric: tabular-nums;
	text-align: left;
}

.recup-infobulle--ouverte .recup-infobulle__panneau {
	display: block;
}

.recup-infobulle__panneau::before {
	/* Pont de survol invisible : comble les 10 px entre le déclencheur et
	   la bulle, sinon elle se ferme avant que la souris ne l'atteigne. */
	content: "";
	position: absolute;
	top: -12px;
	left: 0;
	right: 0;
	height: 12px;
}

.recup-infobulle__titre {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--texte-doux);
	margin-bottom: 12px;
}

/* Lien de pied du panneau (cartes du listing) : sur tactile, la bulle
   ouverte au tap doit offrir un chemin vers la fiche produit. */
a.recup-infobulle__lien,
a.recup-infobulle__lien:visited {
	display: block;
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--bordure);
	font-size: 11.5px;
	font-weight: 600;
	color: var(--olive);
	text-decoration: none;
}

a.recup-infobulle__lien:hover,
a.recup-infobulle__lien:focus,
a.recup-infobulle__lien:active {
	color: var(--olive-fonce);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Une ligne = libellé + valeur + barre de progression au palier */

.recup-infobulle__ligne {
	display: block;
	font-size: 12px;
}

.recup-infobulle__ligne + .recup-infobulle__ligne {
	margin-top: 10px;
}

.recup-infobulle__entete {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 4px;
}

/* Le libellé cède la place, jamais la note : sans min-width à zéro, un
   critère au nom long (« Efficacité du massage ») poussait sa note hors
   de la colonne sur mobile (constat du 17/08/2026). */
.recup-infobulle__entete em {
	font-style: normal;
	color: var(--ink);
	min-width: 0;
	overflow-wrap: anywhere;
}

.recup-infobulle__entete strong {
	flex: none;
}

.recup-infobulle__entete strong {
	font-weight: 700;
}

.recup-infobulle__piste {
	display: block;
	height: 6px;
	background-color: var(--vert-pale);
	border-radius: 3px;
	overflow: hidden;
}

.recup-infobulle__barre {
	display: block;
	height: 6px;
	border-radius: 3px;
}

.recup-infobulle__ligne--lecteurs {
	border-top: 1px solid var(--bordure);
	margin-top: 10px;
	padding-top: 10px;
}

.recup-infobulle__ambre {
	color: var(--etoile);
}

/* Note des avis lecteurs : chiffre ambre + étoile (lien vers la section
   avis de la fiche produit, comme le lien pointillé « N avis » qui suit —
   le survol du chiffre ouvre la bulle des moyennes, le clic navigue). */

.recup-avis-note,
.recup-avis-note:visited {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	background-color: transparent;
	border: 0;
	padding: 0;
	font-family: var(--police-texte);
	font-style: normal;
	font-weight: 800;
	font-size: 19px;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	color: var(--etoile);
	cursor: pointer;
}

.recup-avis-note:hover,
.recup-avis-note:focus,
.recup-avis-note:active {
	background-color: transparent;
	text-decoration: none;
	color: var(--etoile);
}

.recup-etoile {
	color: var(--etoile);
}

.recup-avis-note .recup-etoile {
	font-size: 16px;
}

a.recup-avis-lien,
a.recup-avis-lien:visited {
	font-size: 12.5px;
	color: var(--texte-meta);
	text-decoration: none;
	border-bottom: 1px dotted var(--texte-meta);
	margin-left: 7px;
}

a.recup-avis-lien:hover,
a.recup-avis-lien:focus,
a.recup-avis-lien:active {
	color: var(--ink);
	border-bottom-color: var(--ink);
}

/* Le panneau ne s'ouvre plus au survol (décision du 17/08/2026) : il
   surgissait sous la carte au moindre passage de souris, ce qui donnait
   l'impression que le bloc changeait de taille. L'ouverture est désormais
   toujours intentionnelle, au clic, gérée par infobulle-notes.js (classe
   --ouverte). Le focus clavier reste couvert : le déclencheur est un
   bouton, Entrée et Espace l'actionnent. */

/* ============================================================
   12. LOUPE & VISIONNEUSE — agrandissement des images produit
   (hero produit, vignettes de la top table)
   ============================================================ */

/* Bouton loupe (agrandir l'image) */

.recup-loupe {
	position: absolute;
	bottom: 6px;
	right: 6px;
	z-index: 2;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--white);
	color: var(--texte-doux);
	border: 1px solid var(--bordure);
	border-radius: 50%;
	padding: 0;
	cursor: pointer;
}

.recup-loupe:hover {
	background-color: var(--ink);
	border-color: var(--ink);
	color: var(--white);
}

/* Visionneuse plein écran */

.recup-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(17, 17, 17, 0.85);
	padding: 24px;
	cursor: zoom-out;
}

.recup-lightbox img {
	max-width: min(92vw, 900px);
	max-height: 88vh;
	object-fit: contain;
	background-color: var(--white);
	border-radius: var(--rayon-carte);
	padding: 12px;
}

.recup-lightbox__fermer {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	background-color: var(--white);
	color: var(--ink);
	border: 0;
	border-radius: 50%;
	font-size: 26px;
	line-height: 1;
	padding: 0;
	cursor: pointer;
}

/* ============================================================
   13. AIDE ÉDITEUR — message quand un bloc n'est pas configuré
   ============================================================ */

.recup-bloc-vide {
	background-color: var(--cream);
	border: 1px dashed var(--olive);
	border-radius: var(--rayon-carte);
	padding: 18px 20px;
	font-size: 13px;
	font-style: italic;
	color: var(--texte-doux);
}

/* ============================================================
   14. FICHE PRODUIT — STRUCTURE, HERO & GALERIE
   Maquette 2026 (Produit 1a/1b) : bandes alternées crème/blanc,
   hero en grille à zones nommées (titre AVANT la galerie sur
   mobile), galerie à vignettes, cartes de notes à infobulles,
   encadré « Meilleur prix », caractéristiques-clés.
   ============================================================ */

/* Le conteneur GeneratePress plafonne le contenu à 1200 px : les bandes
   s'en échappent (pleine largeur de fenêtre, maquette 1440) — le
   overflow-x:clip du chapitre 3 neutralise le risque de défilement
   horizontal lié au 100vw. Marges verticales à zéro : GeneratePress
   glisse un margin-bottom de 20px entre les éléments du contenu, qui
   ouvrait des filets crème entre les bandes. */
.recup-fiche__bande,
.recup-ancres {
	margin: 0 calc(50% - 50vw);
}

.recup-fiche__bande {
	padding: 44px 48px;
}

/* Respirations propres à chaque section (valeurs de la maquette 1a) */
#offres.recup-fiche__bande {
	padding-top: 40px;
	padding-bottom: 40px;
}

#notre-analyse.recup-fiche__bande {
	padding-top: 48px;
	padding-bottom: 48px;
}

.recup-signature.recup-fiche__bande {
	padding-top: 36px;
	padding-bottom: 36px;
}

.recup-fiche__bande--creme {
	background-color: var(--cream);
}

.recup-fiche__bande--blanche {
	background-color: var(--white);
	border-top: 1px solid var(--bordure);
}

/* La section qui suit la barre d'ancres s'y colle : la barre porte déjà
   son filet bas, un second filet créait une double ligne décollée. */
.recup-ancres + .recup-fiche__bande--blanche {
	border-top: 0;
}

/* Les ancres atterrissent sous la barre sticky, jamais dessous-dessous */
#offres,
#caracteristiques,
#notre-analyse,
#avis-lecteurs,
#alternatives {
	scroll-margin-top: 64px;
}

.recup-fiche__bande--creme + .recup-fiche__bande--creme {
	border-top: 1px solid var(--bordure);
}

.recup-fiche__bande--hero {
	padding: 24px 48px 36px;
}

.recup-fiche__conteneur {
	max-width: 1180px;
	margin: 0 auto;
}

.recup-fiche__duo {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 48px;
	align-items: start;
}

.recup-fiche__duo--simple {
	grid-template-columns: minmax(0, 1fr);
}

/* En-tête de section : titre à gauche, méta à droite */

.recup-section-entete {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.recup-section-entete h2 {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 115%;
	font-size: 26px;
	text-transform: uppercase;
	margin: 0;
}

.recup-section-entete span {
	font-size: 11.5px;
	color: var(--texte-meta);
}

/* Sections analyse et avis : titre plus large (30px, maquette) et méta
   collée au titre plutôt que renvoyée au bord droit */
#notre-analyse .recup-section-entete,
.recup-lecteurs .recup-section-entete {
	justify-content: flex-start;
}

#notre-analyse .recup-section-entete h2,
.recup-lecteurs .recup-section-entete h2 {
	font-size: 30px;
	font-stretch: 118%;
}

#notre-analyse .recup-section-entete span {
	font-size: 12.5px;
	color: var(--texte-doux);
}

/* Hero : grille à zones — la galerie occupe la colonne gauche sur
   deux rangées, le bloc titre et les infos se partagent la droite */

.recup-fiche-hero {
	display: grid;
	grid-template-columns: 560px minmax(0, 1fr);
	grid-template-areas:
		"galerie entete"
		"galerie infos";
	grid-template-rows: auto 1fr;
	column-gap: 44px;
	align-items: start;
}

.recup-fiche-hero__entete {
	grid-area: entete;
}

.recup-fiche-hero__infos {
	grid-area: infos;
}

.recup-fiche-hero__kicker {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--olive);
	margin: 0 0 10px;
}

.recup-fiche-hero__titre {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 118%;
	font-size: clamp(27px, 3.2vw, 40px);
	line-height: 1.05;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	margin: 0;
}

/* Galerie : colonne de vignettes + vue principale */

.recup-galerie {
	grid-area: galerie;
	display: flex;
	gap: 12px;
}

.recup-galerie__vignettes {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 74px;
	flex: none;
}

.recup-galerie__vignette {
	display: block;
	aspect-ratio: 1;
	padding: 0;
	overflow: hidden;
	background-color: var(--white);
	border: 1px solid var(--bordure);
	border-radius: 9px;
	cursor: pointer;
}

.recup-galerie__vignette img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.recup-galerie__vignette:hover,
.recup-galerie__vignette:focus,
.recup-galerie__vignette:active {
	background-color: var(--white);
	border-color: var(--olive);
}

.recup-galerie__vignette--active,
.recup-galerie__vignette--active:hover,
.recup-galerie__vignette--active:focus {
	border: 2px solid var(--olive);
}

.recup-galerie__reste {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--vert-pale);
	border-radius: 9px;
	font-size: 11px;
	font-weight: 700;
	color: var(--olive);
}

.recup-galerie__vue {
	position: relative;
	flex: 1;
	min-width: 0;
	/* Carré : c'est le seul cadre qui accueille sans rognage aussi bien un
	   pistolet couché qu'un sauna debout, et il fige la hauteur de la fiche
	   quelle que soit l'image reçue. Fond blanc : les packshots sont
	   normalisés sur blanc pur depuis le 22/08/2026, le fond crème
	   dessinait un cadre autour d'eux (QC du 24/08/2026). */
	aspect-ratio: 1 / 1;
	margin: 0;
	overflow: hidden;
	background-color: var(--white);
	border: 1px solid var(--bordure);
	border-radius: var(--rayon-carte-large);
}

/* « contain » garde le produit entier, sans recadrage : c'est la bonne
   règle pour un packshot. Le vrai levier n'est pas ici mais dans le
   fichier : les packshots sont rognés à l'import au plus près du produit. */
.recup-galerie__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 2%;
	box-sizing: border-box;
}

.recup-galerie__vide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--sable);
	color: var(--texte-doux);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* La loupe (chapitre 12) devient une pastille « zoom » en haut à droite
   de la vue, comme la maquette 1a */
.recup-galerie .recup-loupe {
	top: 12px;
	right: 12px;
	bottom: auto;
	left: auto;
	width: auto;
	height: auto;
	padding: 8px 12px;
	border-radius: 9px;
}

/* Cartes de notes : « Notre note » + « Avis utilisateurs » */

.recup-fiche-hero__notes {
	display: flex;
	gap: 12px;
	align-items: stretch;
	flex-wrap: wrap;
	margin-top: 16px;
}

.recup-note-carte {
	position: relative;
	background-color: var(--white);
	border: 1px solid var(--bordure);
	border-radius: var(--rayon-carte-large);
	padding: 11px 15px;
}

.recup-note-carte > em {
	display: block;
	font-style: normal;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--texte-doux);
	margin-bottom: 8px;
}

.recup-note-carte .recup-score__note {
	font-size: 21px;
	padding: 6px 11px;
}

.recup-note-carte--avis .recup-avis-note {
	font-size: 24px;
}

/* Flèche du libellé « Avis utilisateurs » : la carte descend vers la
   section avis */
.recup-note-carte--avis > em {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.recup-note-carte--avis > em svg {
	color: var(--texte-meta);
}

/* Chiffre, étoile et « N avis » posés sur la même ligne de base
   (l'infobulle héritait d'un alignement stretch qui décollait le lien) */
.recup-note-carte .recup-infobulle {
	align-items: baseline;
	gap: 7px;
}

/* Survol de la carte avis : contour et fond ambrés (maquette 1a) */
.recup-note-carte--avis:hover,
.recup-note-carte--avis:focus-within {
	border-color: var(--etoile);
	background-color: var(--fond-ambre);
}

/* Dans le panneau des avis, les valeurs s'écrivent en ambre — c'est la
   signature couleur des notes utilisateurs */
.recup-infobulle--avis .recup-infobulle__entete strong {
	color: var(--etoile);
}

/* Dans la carte du hero, « N avis » redevient un texte discret (le
   pointillé du composant est réservé aux contextes denses) */
.recup-note-carte--avis a.recup-avis-lien,
.recup-note-carte--avis a.recup-avis-lien:visited {
	font-size: 11px;
	color: var(--texte-meta);
	border-bottom: 0;
	margin-left: 0;
}

.recup-note-carte--avis a.recup-avis-lien:hover,
.recup-note-carte--avis a.recup-avis-lien:focus,
.recup-note-carte--avis a.recup-avis-lien:active {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* CTA « Comparer ce produit » (le panneau arrive avec l'outil, Phase 3) */

.recup-fiche-hero__comparer {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 14px;
}

.recup-fiche-hero__comparer > span {
	font-size: 11.5px;
	color: var(--texte-meta);
}

.recup-comparer-cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background-color: transparent;
	border: 1.5px solid var(--olive);
	color: var(--olive);
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 110%;
	font-size: 11px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding: 10px 18px;
	border-radius: var(--rayon-bouton);
	cursor: pointer;
}

.recup-comparer-cta svg {
	flex: none;
}

.recup-comparer-cta:hover,
.recup-comparer-cta:focus,
.recup-comparer-cta:active {
	background-color: var(--olive);
	color: var(--white);
}

/* Badges (type de méthode) */

.recup-fiche-hero__badges {
	display: flex;
	gap: 9px;
	flex-wrap: wrap;
	margin: 16px 0 0;
}

/* Le badge du chapitre 8 est positionné en absolu pour flotter sur une
   image : dans le hero il vit dans le flux, en pilule contour olive. */
.recup-fiche-hero__badges .recup-badge {
	position: static;
	background-color: transparent;
	border: 1px solid var(--olive);
	color: var(--olive);
}

/* Encadré « Meilleur prix » */

.recup-achat-carte {
	background-color: var(--white);
	border: 2px solid var(--olive);
	border-radius: var(--rayon-carte-large);
	padding: 20px 22px;
	margin-top: 22px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.recup-achat-carte__prix-bloc em {
	display: block;
	font-style: normal;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--olive);
	margin-bottom: 7px;
}

.recup-achat-carte__prix {
	display: block;
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-size: 34px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* Marchand sans montant affichable : le programme Amazon Partenaires
   interdit tout prix qui ne vient pas de son API. Le libelle remplace donc
   le chiffre, en plus petit pour ne pas se faire passer pour un prix. */
.recup-achat-carte__prix--sans-montant {
	font-size: 22px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.recup-achat-carte__marchand {
	display: block;
	font-size: 12.5px;
	color: var(--texte-doux);
	margin-top: 7px;
}

.recup-achat-carte__marchand strong {
	color: var(--ink);
}

.recup-achat-carte__action {
	text-align: center;
}

.recup-achat-carte__resume {
	display: block;
	font-size: 11px;
	color: var(--texte-meta);
	margin-top: 8px;
}

/* Caractéristiques-clés (6 max, icône générique olive) */

.recup-fiche-hero__cles {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 26px;
}

.recup-fiche-hero__cles li {
	display: flex;
	gap: 11px;
	align-items: center;
	font-size: 13.5px;
}

.recup-fiche-hero__cles svg {
	flex: none;
	color: var(--olive);
}

@media (max-width: 1023px) {
	.recup-fiche__bande {
		padding: 32px 24px;
	}

	.recup-fiche__bande--hero {
		padding: 18px 24px 28px;
	}

	.recup-fiche-hero {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.recup-fiche__duo {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}
}

@media (max-width: 767px) {
	.recup-fiche__bande {
		padding: 24px 16px;
	}

	.recup-fiche__bande--hero {
		padding: 14px 16px 20px;
	}

	/* Ordre mobile de la maquette 1d : titre, galerie, puis le reste */
	.recup-fiche-hero {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"entete"
			"galerie"
			"infos";
		grid-template-rows: auto;
	}

	.recup-fiche-hero__titre {
		font-size: 27px;
	}

	/* Galerie : vignettes en bande horizontale sous la vue. Le cadre reste
	   proche du carré : les packshots produit le sont presque tous, et un
	   cadre panoramique les laissait flotter au milieu du vide. */
	.recup-galerie {
		flex-direction: column;
		margin-top: 12px;
	}

	.recup-galerie__vue {
		aspect-ratio: 1 / 1;
	}

	.recup-galerie__vignettes {
		flex-direction: row;
		width: auto;
		order: 2;
		overflow-x: auto;
	}

	.recup-galerie__vignette,
	.recup-galerie__reste {
		flex: none;
		width: 64px;
		aspect-ratio: 4 / 3;
	}

	.recup-fiche-hero__notes {
		margin-top: 14px;
	}

	.recup-note-carte {
		flex: 1;
	}

	.recup-note-carte .recup-score__note {
		font-size: 19px;
		padding: 5px 9px;
	}

	.recup-note-carte--avis .recup-avis-note {
		font-size: 21px;
	}

	.recup-achat-carte {
		padding: 13px 15px;
		margin-top: 12px;
		gap: 12px;
	}

	.recup-achat-carte__prix {
		font-size: 25px;
	}

	.recup-fiche-hero__cles {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
		margin-top: 16px;
	}

	.recup-section-entete h2 {
		font-size: 19px;
	}
}

/* ============================================================
   15. BARRE D'ANCRES STICKY
   Maquette 2026 : navigation de sections collée en haut, prix et
   CTA à droite (le CTA disparaît sur mobile — la barre d'achat
   fixe du bas prend le relais).
   ============================================================ */

.recup-ancres {
	position: sticky;
	top: 0;
	z-index: 50;
	background-color: var(--white);
	border-top: 1px solid var(--bordure);
	border-bottom: 1px solid var(--bordure);
}

.recup-ancres__conteneur {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 56px;
}

.recup-ancres__liens {
	display: flex;
	gap: 28px;
	font-size: 12.5px;
	font-weight: 600;
	overflow-x: auto;
	scrollbar-width: none;
}

.recup-ancres__liens a,
.recup-ancres__liens a:visited {
	display: flex;
	align-items: center;
	height: 56px;
	color: var(--texte-doux);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}

.recup-ancres__liens a:hover,
.recup-ancres__liens a:focus,
.recup-ancres__liens a:active {
	color: var(--olive);
	border-bottom-color: var(--olive);
}

/* Onglet actif : posé par le scroll-spy de fiche-produit.js */
.recup-ancres__liens a.est-active,
.recup-ancres__liens a.est-active:visited {
	color: var(--olive);
	border-bottom-color: var(--olive);
}

.recup-ancres__achat {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: none;
}

.recup-ancres__prix {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-size: 19px;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
	.recup-ancres__conteneur {
		padding: 0 16px;
		height: 48px;
	}

	.recup-ancres__liens {
		gap: 22px;
	}

	.recup-ancres__liens a {
		height: 48px;
	}

	.recup-ancres__achat {
		display: none;
	}
}

/* ============================================================
   16. BARRE D'ACHAT FIXE (mobile uniquement)
   ============================================================ */

.recup-sticky-achat {
	display: none;
}

.recup-sticky-achat__infos {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.recup-sticky-achat__prix {
	font-family: var(--police-texte);
	font-weight: 700;
	font-size: 17px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

@media (max-width: 767px) {
	.recup-sticky-achat {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 90;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		background-color: var(--white);
		border-top: 1px solid var(--bordure);
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
		box-shadow: 0 -4px 14px rgba(17, 17, 17, 0.08);
	}

	/* Réserve la place de la barre pour ne rien masquer en bas de page */
	.recup-fiche .site-main {
		padding-bottom: 84px;
	}
}

/* ============================================================
   17. TABLE DES OFFRES
   Maquette 2026 : marchand, disponibilité, livraison, total, CTA.
   Les colonnes disponibilité et livraison disparaissent si aucune
   offre ne les renseigne. La meilleure offre est surlignée d'un
   liseré olive. Sur mobile, chaque ligne devient une petite carte.
   ============================================================ */

.recup-offres-table {
	background-color: var(--white);
	border: 1px solid var(--bordure);
	border-radius: var(--rayon-carte-large);
	overflow: hidden;
	font-size: 13.5px;
	font-variant-numeric: tabular-nums;
}

.recup-offres-table__entete,
.recup-offres-table__ligne {
	display: grid;
	grid-template-columns: 1.6fr 1.1fr 1fr 0.9fr 170px;
	gap: 16px;
	align-items: center;
	padding: 16px 20px;
}

/* Variantes de colonnes selon les données réellement renseignées */

.recup-offres-table--sans-dispo .recup-offres-table__entete,
.recup-offres-table--sans-dispo .recup-offres-table__ligne {
	grid-template-columns: 1.6fr 1fr 0.9fr 170px;
}

.recup-offres-table--sans-livraison .recup-offres-table__entete,
.recup-offres-table--sans-livraison .recup-offres-table__ligne {
	grid-template-columns: 1.6fr 1.1fr 0.9fr 170px;
}

.recup-offres-table--sans-dispo.recup-offres-table--sans-livraison .recup-offres-table__entete,
.recup-offres-table--sans-dispo.recup-offres-table--sans-livraison .recup-offres-table__ligne {
	grid-template-columns: 1.6fr 0.9fr 170px;
}

.recup-offres-table__entete {
	background-color: var(--cream);
	padding: 12px 20px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--texte-doux);
}

.recup-offres-table__ligne {
	border-top: 1px solid var(--bordure);
}

/* Zébrure calée sur la maquette : l'en-tête est l'enfant 1, la meilleure
   offre l'enfant 2 (fond propre) — les enfants pairs suivants alternent. */
.recup-offres-table__ligne:nth-child(even) {
	background-color: var(--fond-zebre);
}

.recup-offres-table__ligne--meilleure {
	border-top: 2px solid var(--olive);
	background-color: var(--fond-offre);
}

.recup-offres-table__marchand {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	min-width: 0;
}

/* Le cadre du logo ne fixe QUE son habillage. Il imposait aussi 44 x 26 px,
   ce qui écrasait un logo panoramique et annulait la règle de dimension
   documentée juste dessous. La largeur reste libre pour que « Therabody »
   et « OPOVE » gardent leurs proportions (19/08/2026). */
.recup-offres-table__marchand img {
	background-color: var(--white);
	border: 1px solid var(--bordure);
	border-radius: 5px;
	padding: 1px 3px;
	min-width: 44px;
}

/* Pavé neutre en attendant le vrai logo (la maquette en montre toujours un) */
/* Logo marchand : hauteur fixe, largeur libre, jamais deforme. Sans cette
   regle chaque logo s'affichait a sa taille naturelle, donc un Therabody deux
   fois plus grand qu'un OPOVE dans le meme tableau (19/08/2026). */
.recup-marchand__logo {
	width: auto;
	height: 26px;
	max-width: 110px;
	object-fit: contain;
	object-position: left center;
	display: block;
}

.recup-offres-table__logo-vide {
	flex: none;
	width: 44px;
	height: 26px;
	background-color: var(--sable);
	border-radius: 5px;
}

.recup-offres-table__badge {
	background-color: var(--olive);
	color: var(--white);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 6px;
}

.recup-offres-table__mention {
	font-size: 11px;
	color: var(--texte-meta);
}

.recup-offres-table__dispo--ok {
	color: var(--note-p6-fond);
	font-weight: 600;
}

.recup-offres-table__dispo--delai {
	color: var(--texte-doux);
}

.recup-offres-table__dispo--attente {
	color: var(--tag-chaud);
	font-weight: 600;
}

.recup-offres-table__droite {
	text-align: right;
}

.recup-offres-table__total {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-size: 17px;
}

.recup-offres-table__total--sans-prix {
	font-family: var(--police-texte);
	font-style: normal;
	font-weight: 600;
	font-size: 13px;
	color: var(--texte-doux);
}

.recup-offres-table__action .recup-cta-simple {
	width: 100%;
	text-align: center;
}

/* Micro-encart : nous ne vendons pas ce produit */

.recup-offres-note {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	background-color: var(--gris-doux);
	border: 1px solid var(--bordure);
	border-radius: var(--rayon-bouton);
	padding: 11px 16px;
	margin: 14px 0 0;
	font-size: 11.5px;
	line-height: 1.6;
	color: var(--texte-meta);
}

.recup-offres-note svg {
	flex: none;
	margin-top: 2px;
}

@media (max-width: 767px) {
	.recup-offres-table {
		background: none;
		border: 0;
		border-radius: 0;
		overflow: visible;
	}

	.recup-offres-table__entete {
		display: none;
	}

	/* Chaque offre devient une petite carte (maquette 1c) */
	.recup-offres-table__ligne,
	.recup-offres-table--sans-dispo .recup-offres-table__ligne,
	.recup-offres-table--sans-livraison .recup-offres-table__ligne,
	.recup-offres-table--sans-dispo.recup-offres-table--sans-livraison .recup-offres-table__ligne {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 9px 12px;
		padding: 13px 15px;
		border: 1px solid var(--bordure);
		border-radius: 11px;
		background-color: var(--white);
	}

	.recup-offres-table__ligne:nth-child(even) {
		background-color: var(--white);
	}

	.recup-offres-table__ligne--meilleure {
		border: 2px solid var(--olive);
		background-color: var(--fond-offre);
	}

	.recup-offres-table__ligne + .recup-offres-table__ligne {
		margin-top: 10px;
	}

	.recup-offres-table__marchand {
		grid-column: 1;
		grid-row: 1;
	}

	.recup-offres-table__total {
		grid-column: 2;
		grid-row: 1;
	}

	.recup-offres-table__dispo,
	.recup-offres-table__droite:not(.recup-offres-table__total) {
		grid-row: 2;
		grid-column: 1;
		text-align: left;
		font-size: 11.5px;
	}

	.recup-offres-table__action {
		grid-column: 2;
		grid-row: 2;
		justify-self: end;
	}

	.recup-offres-table__action .recup-cta-simple {
		width: auto;
	}
}

/* ============================================================
   18. ENCADRÉ DE MÉTHODE (« honnêteté »)
   Adapté de la maquette 1b : nous notons les produits par analyse
   comparative — l'encadré dit ce que cette analyse est, et n'est
   pas. Jamais de promesse de test futur.
   ============================================================ */

.recup-honnetete {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	background-color: var(--white);
	border: 1px solid var(--bordure);
	border-left: 4px solid var(--olive);
	border-radius: 0 var(--rayon-carte-large) var(--rayon-carte-large) 0;
	padding: 26px 30px;
	margin-top: 28px;
}

.recup-honnetete > svg {
	flex: none;
	color: var(--olive);
	margin-top: 2px;
}

.recup-honnetete__titre {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 115%;
	font-size: 22px;
	text-transform: uppercase;
	margin: 0 0 12px;
}

.recup-honnetete p {
	font-size: 15px;
	line-height: 1.7;
	color: var(--texte-doux);
	margin: 0 0 14px;
	max-width: 840px;
}

.recup-honnetete__points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 32px;
	max-width: 900px;
}

.recup-honnetete__points li {
	display: flex;
	gap: 10px;
	font-size: 13.5px;
	line-height: 1.55;
}

.recup-honnetete__points svg {
	flex: none;
	margin-top: 3px;
}

.recup-honnetete__point--oui svg {
	color: var(--olive);
}

.recup-honnetete__point--non svg {
	color: var(--tag-chaud);
}

a.recup-honnetete__lien,
a.recup-honnetete__lien:visited {
	display: inline-block;
	margin-top: 18px;
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 110%;
	font-size: 11px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--olive);
	text-decoration: none;
	border-bottom: 1.5px solid var(--olive);
	padding-bottom: 2px;
}

a.recup-honnetete__lien:hover,
a.recup-honnetete__lien:focus,
a.recup-honnetete__lien:active {
	color: var(--olive-fonce);
	border-bottom-color: var(--olive-fonce);
}

@media (max-width: 767px) {
	.recup-honnetete {
		padding: 18px 20px;
		gap: 14px;
	}

	.recup-honnetete__titre {
		font-size: 18px;
	}

	.recup-honnetete__points {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}
}

/* ============================================================
   19. CARTE « NOTRE ANALYSE »
   Verdict à filet, notes par critère (colonne), points forts et
   faibles + cibles (composants du chapitre 30), encadré de
   méthode, rédaction libre, vidéo.
   ============================================================ */

.recup-analyse-carte {
	background-color: var(--white);
	border: 1px solid var(--bordure);
	border-radius: var(--rayon-carte-large);
	padding: 28px 30px;
}

.recup-analyse-carte .recup-pd__verdict {
	font-size: 19px;
	font-weight: 500;
	line-height: 1.55;
}

.recup-analyse-carte__grille {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 44px;
	margin-top: 32px;
}

/* Dans la carte analyse, l'encadré Pour qui / Pas pour qui respire sous
   les points forts et faibles (maquette 1a : 24px) */
.recup-analyse-carte .recup-pd__cibles {
	margin-top: 24px;
}

.recup-analyse-carte .recup-pd__procon {
	gap: 16px 24px;
}

.recup-analyse-carte__soustitre {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 112%;
	font-size: 16px;
	text-transform: uppercase;
	margin: 0 0 18px;
}

.recup-analyse-carte__redaction {
	margin-top: 32px;
	padding-top: 26px;
	border-top: 1px solid var(--bordure);
}

.recup-analyse-carte__video {
	margin-top: 26px;
}

.recup-analyse-carte__video .recup-video {
	max-width: 760px;
}

@media (max-width: 767px) {
	.recup-analyse-carte {
		padding: 18px 20px;
	}

	.recup-analyse-carte .recup-pd__verdict {
		font-size: 15px;
	}

	.recup-analyse-carte__grille {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		margin-top: 20px;
	}
}

/* ============================================================
   20. FICHE TECHNIQUE & VÉRIFICATIONS
   La table réutilise .recup-pd__specs (chapitre 30). Dépli des
   lignes au-delà de dix, badges « Points vérifiés » dessous.
   ============================================================ */

.recup-fiche-specs {
	max-width: 820px;
}

/* Contexte fiche : lignes plus hautes, première colonne alignée sur
   toutes les rangées (l'indentation des rangées teintées de la maquette
   cassait la lecture — demande du 03/08/2026) et zébrure renforcée pour
   que l'alternance se voie vraiment. */
.recup-fiche-specs .recup-pd__specs th {
	padding: 11px 12px 11px 10px;
}

/* Pictogramme de ligne : le même signe que dans la tête de fiche, pour que
   le tableau se parcoure à l'œil (19/08/2026). Icône alignée sur la
   première ligne du libellé, jamais centrée verticalement sur deux lignes. */
.recup-fiche-specs .recup-pd__specs th {
	display: flex;
	align-items: flex-start;
	gap: 9px;
}

.recup-fiche-specs .recup-pd__specs th > svg {
	flex: none;
	width: 17px;
	height: 17px;
	margin-top: 1px;
	color: var(--olive);
}

/* Carte des avis quand il n'y en a pas encore : elle invite au lieu de
   disparaître, et descend vers le formulaire. */
.recup-note-carte__invite {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 2px;
	flex: 1;
	text-decoration: none;
	color: inherit;
}

.recup-note-carte__invite strong {
	display: block;
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	/* Même corps que la note d'en face : sans avis, les deux cartes doivent
	   peser pareil, la carte verte écrasait l'invitation (retour mobile du
	   21/08/2026). */
	font-size: 24px;
	line-height: 1.1;
	color: var(--texte-doux);
}

.recup-note-carte__invite span {
	display: block;
	font-size: 11.5px;
	color: var(--olive-fonce);
	margin-top: 4px;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.recup-fiche-specs .recup-pd__specs td {
	padding: 11px 10px 11px 0;
}

.recup-fiche-specs .recup-pd__specs tr:nth-child(even) th,
.recup-fiche-specs .recup-pd__specs tr:nth-child(even) td {
	background-color: var(--gris-doux);
}

.recup-fiche-specs__depli {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 110%;
	font-size: 11.5px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--olive);
}

.recup-fiche-specs__depli:hover,
.recup-fiche-specs__depli:focus,
.recup-fiche-specs__depli:active {
	background: none;
	color: var(--olive-fonce);
}

.recup-fiche-specs__depli svg {
	transition: transform 0.15s ease;
}

.recup-fiche-specs__depli--ouvert svg {
	transform: rotate(180deg);
}

.recup-fiche-verifs {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
	margin: 22px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--bordure);
}

.recup-fiche-verifs__titre {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink);
}

/* ============================================================
   21. ALTERNATIVES
   Cartes de produits liés : vignette, nom, accroche, note, prix.
   ============================================================ */

.recup-alternatives h2,
.recup-faq h2 {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 115%;
	font-size: 26px;
	text-transform: uppercase;
	margin: 0 0 16px;
}

.recup-alternatives__liste {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

a.recup-alternative,
a.recup-alternative:visited {
	display: flex;
	gap: 14px;
	align-items: center;
	background-color: var(--white);
	border: 1px solid var(--bordure);
	border-radius: 11px;
	padding: 14px 16px;
	color: var(--ink);
	text-decoration: none;
}

a.recup-alternative:hover,
a.recup-alternative:focus,
a.recup-alternative:active {
	border-color: var(--olive);
	color: var(--ink);
}

.recup-alternative__vignette {
	flex: none;
	width: 64px;
	height: 64px;
	overflow: hidden;
	/* Blanc : les packshots sont sur fond blanc pur depuis le 22/08/2026,
	   un cadre sable dessinait un rectangle autour d'eux (idem pour toutes
	   les vignettes packshot ci-dessous). */
	background-color: var(--white);
	border-radius: 9px;
}

.recup-alternative__vignette img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background-color: var(--white);
}

.recup-alternative__texte {
	flex: 1;
	min-width: 0;
}

.recup-alternative__nom {
	display: block;
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 110%;
	font-size: 14px;
	text-transform: uppercase;
}

.recup-alternative__accroche {
	display: block;
	font-size: 12.5px;
	color: var(--texte-doux);
	margin-top: 5px;
	line-height: 1.5;
}

.recup-alternative__meta {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}

.recup-alternative__meta .recup-score__note {
	font-size: 13px;
	padding: 4px 8px;
}

.recup-alternative__prix {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}

/* ============================================================
   22. VIDÉO (FAÇADE)
   ============================================================ */

.recup-video {
	position: relative;
	aspect-ratio: 16 / 9;
	background-color: var(--ink);
	border-radius: 11px;
	overflow: hidden;
}

.recup-video__facade {
	all: unset;
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	cursor: pointer;
	width: 100%;
}

.recup-video__facade:focus-visible {
	outline: 2px solid var(--olive);
	outline-offset: -4px;
}

.recup-video__lecture {
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background-color: var(--olive);
	position: relative;
	transition: transform 0.15s ease;
}

.recup-video__lecture::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 55%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 12px 0 12px 20px;
	border-color: transparent transparent transparent var(--white);
}

.recup-video__facade:hover .recup-video__lecture {
	transform: scale(1.08);
}

.recup-video__legende {
	color: var(--texte-sur-sombre);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.recup-video__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ============================================================
   23. FAQ
   Maquette 2026 : liste à filets, chevron qui pivote, réponses
   en accordéons natifs (details/summary, zéro JS).
   ============================================================ */

.recup-faq__liste {
	border-top: 1px solid var(--bordure);
}

.recup-faq__item {
	border-bottom: 1px solid var(--bordure);
}

.recup-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 15px 0;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.recup-faq__item summary::-webkit-details-marker {
	display: none;
}

.recup-faq__item summary svg {
	flex: none;
	color: var(--olive);
	transition: transform 0.15s ease;
}

.recup-faq__item[open] summary svg {
	transform: rotate(180deg);
}

.recup-faq__item summary:hover,
.recup-faq__item summary:focus {
	color: var(--olive-fonce);
}

.recup-faq__reponse {
	font-size: 14px;
	line-height: 1.7;
	color: var(--texte-doux);
	padding: 0 0 15px;
	max-width: 640px;
}

.recup-faq__reponse p {
	margin: 0 0 10px;
}

.recup-faq__reponse p:last-child {
	margin-bottom: 0;
}

/* ============================================================
   24. SIGNATURE AUTEUR (E-E-A-T)
   Bande de fin : avatar, nom, bio, badge de mise à jour et lien
   vers la méthodologie.
   ============================================================ */

.recup-signature__conteneur {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.recup-signature__auteur {
	display: flex;
	gap: 18px;
	align-items: center;
}

.recup-signature__auteur img,
.recup-signature__initiale {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: var(--sable);
}

.recup-signature__initiale {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-size: 22px;
	color: var(--texte-doux);
}

a.recup-signature__nom,
a.recup-signature__nom:visited {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 112%;
	font-size: 15px;
	text-transform: uppercase;
	color: var(--ink);
	text-decoration: none;
}

a.recup-signature__nom:hover,
a.recup-signature__nom:focus,
a.recup-signature__nom:active {
	color: var(--olive-fonce);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.recup-signature__bio {
	font-size: 12px;
	color: var(--olive);
	font-weight: 600;
	margin: 4px 0 0;
}

.recup-signature__meta {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.recup-signature__meta a.recup-honnetete__lien {
	margin-top: 0;
}

.recup-signature__maj {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background-color: var(--vert-pale);
	border-radius: 999px;
	padding: 6px 13px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--texte-doux);
}

.recup-signature__maj svg {
	color: var(--olive);
}

/* ============================================================
   25. AVIS DES LECTEURS
   Maquette 2026 : carte résumé trois colonnes (note ambre +
   synthèse | moyennes par critère | agir), cartes d'avis riches
   (badge « Avis modéré », pastille de palier, titre, barres par
   critère, points forts/faibles, « Cet avis m'a aidé »). Le
   troisième avis s'affiche tronqué (aperçu) tant que « Voir
   plus » n'est pas déplié — logique portée par avis-lecteurs.js.
   ============================================================ */

.recup-lecteurs__resume {
	background-color: var(--white);
	border: 1px solid var(--bordure);
	border-radius: var(--rayon-carte-large);
	padding: 26px 28px;
	display: grid;
	grid-template-columns: 210px minmax(0, 1fr) 200px;
	gap: 36px;
	align-items: center;
}

.recup-lecteurs__globale {
	text-align: center;
	border-right: 1px solid var(--bordure);
	padding-right: 20px;
}

.recup-lecteurs__chiffre {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 6px;
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-size: 52px;
	line-height: 1;
	color: var(--etoile);
	font-variant-numeric: tabular-nums;
}

.recup-lecteurs__chiffre .recup-etoile {
	font-size: 32px;
}

.recup-lecteurs__nb {
	display: block;
	font-size: 12px;
	color: var(--texte-meta);
	margin-top: 9px;
}

.recup-lecteurs__synthese {
	font-size: 11.5px;
	line-height: 1.55;
	color: var(--texte-doux);
	margin: 10px 0 0;
}

/* minmax(0, 1fr) et non 1fr : sans le minimum à zéro, une colonne refuse
   de descendre sous la largeur de son contenu et les barres débordent de
   l'écran sur mobile (constat du 17/08/2026). */
.recup-lecteurs__moyennes {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 14px 32px;
}

/* En grille, l'espacement vient du gap : la marge « ligne suivante » du
   composant infobulle décalait toutes les lignes sauf la première
   (barres dissymétriques d'une colonne à l'autre). */
.recup-lecteurs__moyennes .recup-infobulle__ligne + .recup-infobulle__ligne,
.recup-lecteurs__criteres .recup-infobulle__ligne + .recup-infobulle__ligne,
.recup-pd__criteres .recup-infobulle__ligne + .recup-infobulle__ligne {
	margin-top: 0;
}

.recup-lecteurs__agir {
	text-align: center;
}

.recup-lecteurs__agir .recup-cta-simple {
	width: 100%;
	text-align: center;
}

.recup-lecteurs__modere {
	display: block;
	font-size: 11px;
	color: var(--texte-meta);
	margin-top: 9px;
}

/* Cartes d'avis */

.recup-lecteurs__liste {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 14px;
}

.recup-lecteurs__avis {
	background-color: var(--white);
	border: 1px solid var(--bordure);
	border-radius: var(--rayon-carte-large);
	padding: 22px 24px;
}

.recup-lecteurs__avis[hidden] {
	display: none;
}

/* Aperçu tronqué du troisième avis : cliquer le déplie */

.recup-lecteurs__avis--apercu {
	position: relative;
	max-height: 150px;
	overflow: hidden;
	cursor: pointer;
}

.recup-lecteurs__avis--apercu::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 80px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--white));
}

.recup-lecteurs__entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.recup-lecteurs__identite {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}

.recup-lecteurs__pseudo {
	font-weight: 700;
	font-size: 14.5px;
}

.recup-lecteurs__date {
	font-size: 12px;
	color: var(--texte-meta);
}

.recup-lecteurs__badge {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--olive);
	border: 1px solid var(--olive-clair);
	padding: 3px 8px;
	border-radius: 7px;
}

.recup-lecteurs__entete .recup-score__note {
	flex: none;
	font-size: 17px;
	padding: 6px 11px;
}

.recup-lecteurs__titre-avis {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 112%;
	font-size: 16px;
	text-transform: uppercase;
	margin: 14px 0 9px;
}

.recup-lecteurs__commentaire {
	font-size: 14px;
	line-height: 1.7;
	color: var(--texte-doux);
	margin: 0;
	max-width: 900px;
}

.recup-lecteurs__criteres {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 18px;
	margin-top: 18px;
}

.recup-lecteurs__points {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 40px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--bordure);
}

.recup-lecteurs__points h3 {
	font-family: var(--police-texte);
	font-style: normal;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--olive);
	margin: 0 0 9px;
}

.recup-lecteurs__points-faibles h3 {
	color: var(--tag-chaud);
}

.recup-lecteurs__points ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
	font-size: 13px;
	line-height: 1.45;
}

.recup-lecteurs__points li {
	display: flex;
	gap: 8px;
}

.recup-lecteurs__points svg {
	flex: none;
	margin-top: 2px;
}

.recup-lecteurs__points-forts svg {
	color: var(--olive);
}

.recup-lecteurs__points-faibles svg {
	color: var(--tag-chaud);
}

.recup-lecteurs__pied {
	margin-top: 14px;
}

.recup-avis-utile {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 1px solid var(--bordure);
	border-radius: 999px;
	padding: 6px 13px;
	font-size: 11.5px;
	color: var(--texte-doux);
	cursor: pointer;
}

.recup-avis-utile:hover,
.recup-avis-utile:focus {
	background: none;
	border-color: var(--olive);
	color: var(--olive);
}

.recup-avis-utile:active,
.recup-avis-utile[disabled],
.recup-avis-utile--vote {
	background-color: var(--vert-pale);
	border-color: transparent;
	color: var(--texte-doux);
}

.recup-lecteurs__voir-plus {
	text-align: center;
	margin: 20px 0 0;
}

.recup-lecteurs__voir-plus .recup-cta-simple {
	padding: 13px 26px;
}

@media (max-width: 1023px) {
	.recup-lecteurs__resume {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.recup-lecteurs__globale {
		border-right: 0;
		padding-right: 0;
	}
}

@media (max-width: 767px) {
	.recup-lecteurs__resume {
		padding: 18px 20px;
	}

	.recup-lecteurs__avis {
		padding: 16px 18px;
	}

	.recup-lecteurs__criteres {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px 18px;
	}

	.recup-lecteurs__points {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}
}

/* ============================================================
   26. FORMULAIRE « DONNER MON AVIS »
   ============================================================ */

.recup-avis-form {
	margin-top: 26px;
}

.recup-avis-form > summary {
	list-style: none;
	cursor: pointer;
	width: fit-content;
}

.recup-avis-form > summary::-webkit-details-marker {
	display: none;
}

.recup-avis-form__form {
	margin-top: 20px;
	background-color: var(--white);
	border: 1px solid var(--bordure);
	border-radius: var(--rayon-carte);
	padding: 24px 26px;
}

.recup-avis-form__grille {
	display: grid;
	gap: 0 24px;
}

.recup-avis-form__champ {
	margin: 0 0 16px;
}

.recup-avis-form__champ label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--texte-doux);
	margin-bottom: 6px;
}

.recup-avis-form__champ input,
.recup-avis-form__champ textarea {
	width: 100%;
	background-color: var(--cream);
	border: 1px solid var(--bordure);
	border-radius: var(--rayon-carte);
	padding: 10px 12px;
	font-family: var(--police-texte);
	font-size: 14px;
	color: var(--ink);
}

.recup-avis-form__champ input:focus,
.recup-avis-form__champ textarea:focus {
	outline: 2px solid var(--cta-fond);
	outline-offset: 1px;
	background-color: var(--white);
}

.recup-avis-form__criteres {
	border: 1px solid var(--bordure);
	border-radius: var(--rayon-carte);
	padding: 16px 18px 4px;
	margin: 0 0 16px;
}

.recup-avis-form__criteres legend {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--texte-doux);
	padding: 0 6px;
}

.recup-avis-form__envoi {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin: 6px 0 0;
}

.recup-avis-form__note-envoi {
	font-size: 12px;
	font-style: italic;
	color: var(--texte-meta);
}

/* --- Jauges de notation (dégradé rouge → vert, curseur à glisser) --- */

.recup-jauge {
	margin: 0 0 26px;
	text-align: center;
}

.recup-jauge__question {
	display: block;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 14px;
}

.recup-jauge input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	max-width: 560px;
	height: 8px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--note-p1-fond) 0%, var(--note-p2-fond) 20%, var(--note-p3-fond) 40%, var(--note-p4-fond) 60%, var(--note-p5-fond) 80%, var(--note-p6-fond) 100%);
	cursor: pointer;
}

.recup-jauge input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--white);
	border: 2px solid var(--ink);
	box-shadow: 0 1px 5px rgba(17, 17, 17, 0.3);
	cursor: grab;
}

.recup-jauge input[type="range"]::-moz-range-thumb {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--white);
	border: 2px solid var(--ink);
	box-shadow: 0 1px 5px rgba(17, 17, 17, 0.3);
	cursor: grab;
}

/* Jauge non activée = « Aucune idée » : grisée, en attente d'un geste */

.recup-jauge input[type="range"]:disabled {
	filter: grayscale(1);
	opacity: 0.4;
}

.recup-jauge__aucune {
	display: inline-block;
	margin-top: 10px;
	background-color: transparent;
	color: var(--texte-meta);
	border: 0;
	font-family: var(--police-texte);
	font-style: normal;
	font-weight: 500;
	font-size: 12.5px;
	letter-spacing: 0.02em;
	text-transform: none;
	padding: 4px 10px;
	border-radius: 999px;
}

.recup-jauge__aucune:hover {
	background-color: var(--cream);
	color: var(--ink);
}

.recup-jauge__aucune--actif {
	background-color: var(--cream);
	color: var(--ink);
	font-weight: 700;
}

.recup-jauge__valeur {
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	margin-left: 8px;
}

.recup-jauge__valeur--grande {
	display: block;
	font-family: var(--police-titres);
	font-style: italic;
	font-size: 44px;
	margin: 0 0 10px;
}

/* Étiquettes de la jauge à crans (ancienneté d'achat) */

.recup-jauge__etiquettes {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	max-width: 560px;
	margin: 0 auto 10px;
	font-size: 11.5px;
	color: var(--texte-meta);
}

.recup-jauge__etiquettes span {
	flex: 1;
}

.recup-jauge__etiquette--active {
	color: var(--ink);
	font-weight: 700;
}

/* --- Points forts/faibles dynamiques (une ligne = un point, croix pour retirer) --- */

.recup-points__titre {
	display: block;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 10px;
}

.recup-points--pour .recup-points__titre {
	color: var(--vert);
}

.recup-points--contre .recup-points__titre {
	color: var(--rouge);
}

.recup-points__ligne {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
}

.recup-points__ligne::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
}

.recup-points--pour .recup-points__ligne::before {
	background-color: var(--vert);
}

.recup-points--contre .recup-points__ligne::before {
	background-color: var(--rouge);
}

.recup-points__ligne input {
	flex: 1;
	border: 0;
	border-bottom: 1px solid var(--bordure);
	border-radius: 0;
	background: transparent;
	padding: 6px 2px;
	font-family: var(--police-texte);
	font-size: 14px;
}

.recup-points__ligne input:focus {
	outline: none;
	border-bottom-color: var(--ink);
}

.recup-points__suppr {
	background: transparent;
	border: 0;
	color: var(--texte-meta);
	font-size: 18px;
	line-height: 1;
	padding: 4px 8px;
	border-radius: 50%;
	cursor: pointer;
}

.recup-points__suppr:hover {
	background-color: var(--cream);
	color: var(--rouge);
}

/* Champ piège : invisible pour les humains, rempli par les robots */

.recup-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Messages de retour après soumission */

.recup-avis-notice {
	border-radius: var(--rayon-carte);
	padding: 14px 18px;
	font-size: 14px;
	margin: 0 0 18px;
}

.recup-avis-notice--ok {
	background-color: var(--vert-fond);
	border: 1px solid rgba(47, 125, 63, 0.35);
	color: var(--vert);
}

.recup-avis-notice--erreur {
	background-color: var(--rouge-fond);
	border: 1px solid rgba(176, 58, 46, 0.3);
	color: var(--rouge);
}

@media (min-width: 640px) {
	.recup-avis-form__grille {
		grid-template-columns: 1fr 1fr;
	}
}

/* ============================================================
   28. GABARIT PAGE HORMETIK (money, hub, éditorial)
   Texte en colonne lisible (760 px), les tableaux et encarts
   produits « débordent » sur toute la largeur du conteneur.
   ============================================================ */

.recup-page__entete {
	max-width: 760px;
	margin: 8px auto 28px;
}

.recup-page__titre {
	margin: 0;
	font-size: clamp(30px, 4.5vw, 46px);
}

.recup-page__meta {
	font-size: 12.5px;
	color: var(--texte-meta);
	margin: 8px 0 0;
}

.recup-page__contenu > * {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

/* Éléments larges : pleine largeur du conteneur */

.recup-page__contenu > .recup-top,
.recup-page__contenu > .recup-resume,
.recup-page__contenu > .recup-pd,
.recup-page__contenu > .recup-grille-2,
.recup-page__contenu > .recup-plan,
.recup-page__contenu > .recup-contact,
.recup-page__contenu > .recup-magazine,
.recup-page__contenu > .recup-vitrine-outils,
.recup-page__contenu > .recup-catalogue,
.recup-page__contenu > .wp-block-columns,
.recup-page__contenu > .alignwide,
.recup-page__contenu > .alignfull {
	max-width: none;
}

@media (max-width: 767px) {
	.recup-page .recup-fil {
		display: none; /* Pages money/hub : le fil reste dans le schema. */
	}

	.recup-page__entete {
		margin: 0 auto 12px;
	}

	.recup-page__titre {
		font-size: 24px;
	}

	.recup-page__meta {
		font-size: 11.5px;
		margin-top: 6px;
	}

	.recup-page__contenu > p {
		font-size: 14.5px;
		margin: 0 0 14px;
	}
}

/* ============================================================
   29. BLOC TL;DR — « L'essentiel en 30 secondes »
   Maquette 2026 : encadré vert pâle en tête d'article, 3-4
   recommandations (étiquette, produit lié, argument, prix
   automatique) + règle d'or en pied.
   ============================================================ */

.recup-tldr {
	background-color: var(--vert-pale);
	border-radius: var(--rayon-carte-large);
	padding: 30px 34px 26px;
	margin: 28px auto;
}

.recup-tldr__titre {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 115%;
	font-size: 22px;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 24px;
}

.recup-tldr__titre svg {
	flex: none;
	color: var(--olive);
}

.recup-tldr__grille {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px 40px;
}

.recup-tldr__reco {
	display: flex;
	gap: 12px;
}

.recup-tldr__emoji {
	flex: none;
	font-size: 17px;
	line-height: 1.4;
}

.recup-tldr__detail {
	min-width: 0;
}

.recup-tldr__etiquette {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 3px;
}

.recup-tldr__texte {
	display: block;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--ink);
}

.recup-tldr__texte a,
.recup-tldr__texte a:visited {
	color: var(--ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.recup-tldr__texte a:hover,
.recup-tldr__texte a:focus,
.recup-tldr__texte a:active {
	color: var(--olive-fonce);
}

.recup-tldr__prix {
	font-style: normal;
	color: var(--texte-doux);
	white-space: nowrap;
}

.recup-tldr__regle {
	border-top: 1px solid rgba(17, 17, 17, 0.15);
	margin: 24px 0 0;
	padding-top: 16px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--texte-doux);
}

.recup-tldr__regle strong {
	color: var(--ink);
}

@media (max-width: 767px) {
	.recup-tldr {
		padding: 22px 20px 20px;
		margin: 18px auto;
	}

	.recup-tldr__titre {
		font-size: 17px;
		gap: 10px;
		margin-bottom: 18px;
	}

	.recup-tldr__titre svg {
		width: 22px;
		height: 22px;
	}

	.recup-tldr__grille {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.recup-tldr__reco {
		gap: 10px;
	}

	.recup-tldr__emoji {
		font-size: 16px;
	}

	.recup-tldr__etiquette {
		font-size: 13px;
		margin-bottom: 2px;
	}

	.recup-tldr__texte {
		font-size: 14px;
	}
}

/* ============================================================
   30. BLOC PRODUIT DU CLASSEMENT (carte détaillée)
   Maquette 2026 : en-tête sombre (rang, nom, accroche, double
   bloc de notes), corps deux colonnes (visuel + badge de
   méthode / forts-faibles, pour qui, notes par critère, zone de
   rédaction libre, caractéristiques, achat), bande de points
   vérifiés en pied.
   ============================================================ */

.recup-pd {
	background-color: var(--white);
	border: 1px solid var(--bordure);
	border-radius: var(--rayon-carte-large);
	/* Pas d'overflow:hidden : il rognerait les bulles de notes de l'en-tête.
	   Les coins sont arrondis directement sur l'en-tête et le pied. */
	margin: 28px 0;
	font-variant-numeric: tabular-nums;
}

/* En-tête sombre : rang à gauche, nom + accroche à droite, notes empilées */

.recup-pd__entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
	background-color: var(--ink);
	color: var(--cream);
	padding: 22px 28px;
	border-radius: calc(var(--rayon-carte-large) - 1px) calc(var(--rayon-carte-large) - 1px) 0 0;
}

.recup-pd__identite {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 18px;
}

.recup-pd__titres {
	min-width: 0;
}

.recup-pd__rang {
	flex: none;
}

.recup-pd__rang {
	background-color: var(--olive);
	color: var(--white);
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 110%;
	font-size: 14px;
	letter-spacing: 0.04em;
	padding: 9px 13px;
	border-radius: 9px;
}

.recup-pd__etiquette {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--texte-sur-sombre);
	margin: 0 0 4px;
}

.recup-pd__nom {
	font-size: 26px;
	line-height: 1.1;
	color: var(--white);
	margin: 0;
}

.recup-pd__accroche {
	font-size: 13px;
	line-height: 1.5;
	color: var(--texte-sur-sombre);
	margin: 5px 0 0;
}

/* Colonne des notes, centrée : label, badge, puis note lecteurs dessous */

.recup-pd__notes {
	flex: none;
	text-align: center;
}

.recup-pd__notes > em {
	display: block;
	font-style: normal;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--texte-sur-sombre);
	margin-bottom: 6px;
}

.recup-pd__notes .recup-score__note {
	font-size: 28px;
	line-height: 1;
	padding: 10px 15px;
	border-radius: 10px;
}

.recup-pd__notes .recup-score__note small {
	font-size: 12px;
	opacity: 0.85;
}

.recup-pd__notes-avis {
	display: flex;
	justify-content: center;
	margin-top: 10px;
}

.recup-pd__notes .recup-infobulle {
	align-items: baseline;
}

/* Les bulles de l'en-tête s'alignent à droite pour rester dans la carte */

.recup-pd__notes .recup-infobulle__panneau {
	left: auto;
	right: 0;
}

.recup-pd__notes .recup-avis-note {
	font-size: 16px;
}

.recup-pd__notes .recup-avis-note .recup-etoile {
	font-size: 14px;
}

.recup-pd__notes a.recup-avis-lien,
.recup-pd__notes a.recup-avis-lien:visited {
	font-size: 11.5px;
	color: var(--texte-sur-sombre);
	border-bottom-color: var(--texte-meta);
}

.recup-pd__notes a.recup-avis-lien:hover,
.recup-pd__notes a.recup-avis-lien:focus,
.recup-pd__notes a.recup-avis-lien:active {
	color: var(--cream);
	border-bottom-color: var(--cream);
}

/* Corps deux colonnes */

.recup-pd__corps {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 26px;
	align-items: start;
	padding: 26px 28px;
}

.recup-pd__visuel {
	margin: 0;
}

.recup-pd__visuel img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: contain;
	background-color: var(--white);
	border: 1px solid var(--bordure);
	border-radius: var(--rayon-carte-large);
	padding: 8px;
}

.recup-pd__visuel--vide {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	background-color: var(--sable);
	border-radius: var(--rayon-carte-large);
}

/* Le badge de méthode se pose sous le visuel (il est en absolu ailleurs) */

.recup-pd__medias .recup-badge {
	position: static;
	display: inline-block;
	margin-top: 12px;
}

.recup-pd__contenu {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

/* Phrase-verdict à filet olive, en tête du corps (maquette) */

.recup-pd__verdict {
	font-size: 16.5px;
	line-height: 1.6;
	font-weight: 500;
	color: var(--ink);
	border-left: 3px solid var(--olive);
	padding-left: 16px;
	margin: 0;
}

/* Points forts / faibles — intitulés Archivo italique (maquette) */

.recup-pd__procon {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 28px;
}

.recup-pd__procon h4 {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 112%;
	font-size: 14px;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	margin: 0 0 12px;
}

.recup-pd__forts h4 {
	color: var(--olive);
}

.recup-pd__faibles h4 {
	color: var(--tag-chaud);
}

.recup-pd__procon ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 13.5px;
	line-height: 1.5;
}

.recup-pd__procon li {
	display: flex;
	gap: 9px;
}

.recup-pd__procon svg {
	flex: none;
	margin-top: 2px;
}

.recup-pd__forts svg {
	color: var(--olive);
}

.recup-pd__faibles svg {
	color: var(--tag-chaud);
}

/* Pour qui / pas pour qui — petits labels Inter (maquette) */

.recup-pd__cibles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 20px;
	background-color: var(--cream);
	border-radius: var(--rayon-carte-large);
	padding: 18px 20px;
	font-size: 13.5px;
	line-height: 1.55;
}

.recup-pd__cibles h4 {
	font-family: var(--police-texte);
	font-style: normal;
	font-stretch: normal;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--olive);
	margin: 0 0 7px;
}

.recup-pd__cibles div + div h4 {
	color: var(--tag-chaud);
}

.recup-pd__cibles p {
	color: var(--ink);
	margin: 0;
}

/* Notes par critère — grille 2 colonnes (maquette), lignes-barres du
   chapitre 11 en plus grand : barres de 7 px, texte 12,5 px */

.recup-pd__criteres {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 28px;
}

/* Variante en colonne unique (carte « Notre analyse » de la fiche produit) */
.recup-pd__criteres--colonne {
	grid-template-columns: minmax(0, 1fr);
	gap: 15px;
}

.recup-pd__criteres .recup-infobulle__ligne {
	font-size: 12.5px;
}

.recup-pd__criteres .recup-infobulle__ligne + .recup-infobulle__ligne {
	margin-top: 0; /* la grille espace, pas les marges du composant */
}

.recup-pd__criteres .recup-infobulle__piste,
.recup-pd__criteres .recup-infobulle__barre {
	height: 7px;
}

/* La ligne « Avis utilisateurs » est une cellule de la même grille,
   avec sa barre, cliquable vers la section avis de la fiche. */

a.recup-pd__ligne-avis,
a.recup-pd__ligne-avis:visited {
	display: block;
	font-size: 12.5px;
	color: var(--ink);
	text-decoration: none;
}

a.recup-pd__ligne-avis .recup-infobulle__entete {
	margin-bottom: 5px;
}

a.recup-pd__ligne-avis:hover em,
a.recup-pd__ligne-avis:focus em,
a.recup-pd__ligne-avis:active em {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Section « Notre avis détaillé » */

.recup-pd__analyse {
	border-top: 1px solid rgba(17, 17, 17, 0.12);
	padding-top: 22px;
}

.recup-pd__analyse-titre {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 112%;
	font-size: 15px;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 12px;
}

.recup-pd__redaction {
	font-size: 14px;
	line-height: 1.7;
	color: var(--texte-doux);
}

.recup-pd__redaction > :first-child {
	margin-top: 0;
}

.recup-pd__redaction > :last-child {
	margin-bottom: 0;
}

/* Caractéristiques clés */

/* Titre et libellés volontairement plus marqués que la maquette (10px
   gris doux) : jugés trop pâles à l'usage — demande du 02/08/2026. */
.recup-pd__specs-titre {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 22px 0 10px;
}

.recup-pd__specs {
	width: 100%;
	border: 0; /* GeneratePress encadre les tables : la maquette n'a aucun cadre. */
	border-collapse: collapse;
	font-size: 13.5px;
	font-variant-numeric: tabular-nums;
}

.recup-pd__specs th,
.recup-pd__specs td {
	/* border:0 d'abord : GeneratePress pose un liseré vertical entre les
	   colonnes ; la maquette ne garde que le filet sous chaque ligne. */
	border: 0;
	border-bottom: 1px solid rgba(17, 17, 17, 0.1);
}

.recup-pd__specs th {
	padding: 10px 12px 10px 0;
}

.recup-pd__specs td {
	padding: 10px 0;
}

.recup-pd__specs tr:nth-child(even) th,
.recup-pd__specs tr:nth-child(even) td {
	background-color: var(--fond-zebre-chaud);
}

.recup-pd__specs th {
	text-align: left;
	font-weight: 400;
	color: var(--ink);
}

.recup-pd__specs td {
	text-align: right;
	font-weight: 600;
}

/* Lien vers l'analyse complète — Archivo souligné olive + flèche (maquette) */

a.recup-pd__lien-analyse,
a.recup-pd__lien-analyse:visited {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 110%;
	font-size: 12px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--olive);
	text-decoration: none;
	border-bottom: 1.5px solid var(--olive);
	padding-bottom: 3px;
}

a.recup-pd__lien-analyse svg {
	flex: none;
}

a.recup-pd__lien-analyse:hover,
a.recup-pd__lien-analyse:focus,
a.recup-pd__lien-analyse:active {
	color: var(--olive-clair);
	border-bottom-color: var(--olive-clair);
}

/* Achat */

.recup-pd__achat {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	border-top: 1px solid rgba(17, 17, 17, 0.12);
	padding-top: 22px;
}

.recup-pd__prix {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-size: 30px;
	margin: 0;
}

.recup-pd__prix small {
	display: block;
	font-family: var(--police-texte);
	font-style: normal;
	font-weight: 400;
	font-size: 11.5px;
	color: var(--texte-doux);
	margin-top: 2px;
}

/* Points vérifiés */

.recup-pd__verifs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 22px;
	background-color: var(--fond-zebre-chaud);
	border-top: 1px solid var(--bordure);
	padding: 14px 28px;
	border-radius: 0 0 calc(var(--rayon-carte-large) - 1px) calc(var(--rayon-carte-large) - 1px);
}

.recup-pd__verifs-titre {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--texte-doux);
}

.recup-pd__verif {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	color: var(--ink);
}

.recup-pd__verif svg {
	flex: none;
}

.recup-pd__verif--oui svg {
	color: var(--note-p6-fond);
}

.recup-pd__verif--non {
	color: var(--texte-meta);
}

.recup-pd__verif--non svg {
	color: var(--tag-chaud);
}

@media (max-width: 1023px) {
	.recup-pd__corps {
		grid-template-columns: minmax(0, 1fr);
	}

	.recup-pd__medias {
		max-width: 340px;
	}
}

@media (max-width: 767px) {
	/* En-tête maquette 4c : rang à gauche et note à droite sur la première
	   ligne, nom et accroche en pleine largeur dessous. display:contents
	   dissout .recup-pd__identite pour placer ses enfants dans la grille. */
	.recup-pd__entete {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		row-gap: 16px;
		padding: 18px;
	}

	.recup-pd__identite {
		display: contents;
	}

	.recup-pd__rang {
		grid-row: 1;
		grid-column: 1;
		align-self: center;
		justify-self: start;
	}

	.recup-pd__titres {
		grid-row: 2;
		grid-column: 1 / -1;
	}

	.recup-pd__notes {
		grid-row: 1;
		grid-column: 2;
		text-align: right;
	}

	.recup-pd__nom {
		font-size: 21px;
	}

	.recup-pd__corps {
		padding: 18px;
		gap: 20px;
	}

	.recup-pd__medias {
		max-width: none;
	}

	.recup-pd__procon,
	.recup-pd__cibles,
	.recup-pd__criteres {
		grid-template-columns: 1fr;
	}

	.recup-pd__criteres {
		gap: 12px;
	}

	.recup-pd__verdict {
		font-size: 15px;
	}

	/* Pied d'achat maquette 4e : prix à gauche, marchands à droite sur la
	   même ligne, bouton pleine largeur dessous */
	.recup-pd__achat {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}

	.recup-pd__prix {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 12px;
	}

	.recup-pd__achat .recup-cta-simple {
		width: 100%;
	}

	.recup-pd__verifs {
		padding: 12px 18px;
		gap: 12px;
	}
}

/* ============================================================
   31. BLOC TABLEAU COMPARATIF
   Maquette 2026 (5d/5e) : carte blanche avec titre et date des
   prix, en-tête sombre, zébrage discret, pastille de note en
   dernière colonne. Pas de vignette : le nom en gras + mention
   « Notre choix » en ligne. Sur mobile le tableau défile, la
   colonne produit reste figée.
   ============================================================ */

.recup-top {
	margin: 28px 0;
	background-color: var(--white);
	border: 1px solid var(--bordure);
	border-radius: var(--rayon-carte-large);
	padding: 24px 26px;
}

.recup-top__titre {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 115%;
	text-transform: uppercase;
	font-size: 18px;
	margin: 0 0 4px;
}

.recup-top__sous-titre {
	font-size: 12px;
	color: var(--texte-meta);
	margin: 0 0 16px;
}

.recup-tableau-defile {
	overflow-x: auto;
}

.recup-tableau {
	width: 100%;
	min-width: 680px;
	border-collapse: separate;
	border-spacing: 0;
	background-color: var(--white);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.recup-tableau thead th {
	background-color: var(--ink);
	color: var(--cream);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: left;
	padding: 12px 14px;
	white-space: nowrap;
}

.recup-tableau thead th:first-child {
	border-radius: 8px 0 0 0;
}

.recup-tableau thead th:last-child {
	border-radius: 0 8px 0 0;
}

/* Alignement des en-têtes : posé par le PHP selon la nature de la
   colonne (numérique à droite, note centrée) — même spécificité
   battue sinon par « thead th » ci-dessus. */
.recup-tableau thead th.recup-tableau__entete--droite {
	text-align: right;
}

.recup-tableau thead th.recup-tableau__entete--centre {
	text-align: center;
}

.recup-tableau td,
.recup-tableau tbody th {
	padding: 12px 14px;
	border-bottom: 1px solid var(--bordure);
	vertical-align: middle;
	background-color: var(--white);
}

.recup-tableau tbody tr:nth-child(even) td,
.recup-tableau tbody tr:nth-child(even) th {
	background-color: var(--fond-zebre);
}

.recup-tableau__produit {
	text-align: left;
	min-width: 220px;
}

.recup-tableau__produit a,
.recup-tableau__produit a:visited {
	font-weight: 700;
	color: var(--ink);
	text-decoration: none;
}

.recup-tableau__produit a:hover,
.recup-tableau__produit a:focus,
.recup-tableau__produit a:active {
	color: var(--olive-fonce);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Mention « Notre choix » : petites capitales olive sur la même
   ligne que le nom (maquette 5d) */
.recup-tableau__choix {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--olive);
	margin-left: 4px;
	white-space: nowrap;
}

.recup-tableau__valeur {
	text-align: right;
}

/* Colonne qualitative (Type…) : à gauche, en couleur douce */
.recup-tableau__valeur--texte {
	text-align: left;
	color: var(--texte-doux);
}

.recup-tableau__prix {
	font-weight: 600;
	text-align: right;
	white-space: nowrap;
}

.recup-tableau__note {
	text-align: center;
}

.recup-tableau__aide {
	display: none;
	font-size: 11px;
	color: var(--texte-meta);
	margin: 0 0 12px;
}

@media (max-width: 767px) {
	.recup-top {
		padding: 18px 0;
	}

	.recup-top__titre,
	.recup-tableau__aide {
		padding: 0 16px;
	}

	.recup-top__titre {
		font-size: 15px;
		font-stretch: 112%;
	}

	/* Sur mobile la date des prix cède la place à l'aide au défilement
	   (maquette 5e) */
	.recup-top__sous-titre {
		display: none;
	}

	.recup-tableau__aide {
		display: block;
	}

	.recup-tableau {
		min-width: 560px;
		font-size: 12.5px;
	}

	.recup-tableau thead th,
	.recup-tableau td,
	.recup-tableau tbody th {
		padding: 11px 12px;
	}

	/* Le tableau file bord à bord dans la carte : plus d'arrondi d'angle */
	.recup-tableau thead th:first-child,
	.recup-tableau thead th:last-child {
		border-radius: 0;
	}

	/* Colonne produit figée pendant le défilement horizontal */
	.recup-tableau thead th:first-child,
	.recup-tableau tbody th {
		position: sticky;
		left: 0;
		z-index: 2;
	}

	.recup-tableau thead th:first-child {
		z-index: 3;
	}

	.recup-tableau tbody th {
		border-right: 1px solid var(--bordure);
	}

	.recup-tableau__produit {
		min-width: 150px;
	}

	.recup-tableau .recup-note-pastille {
		border-radius: 6px;
		padding: 4px 8px;
	}
}

/* ============================================================
   32. CTA PRIX (composant transversal)
   Le bouton d'achat des maquettes 2026 : « Voir le prix » +
   montant, aplat olive (variante contour pour les rangs 2+).
   Utilisé par la top table et le bloc produit du classement.
   ============================================================ */

a.recup-cta-prix,
a.recup-cta-prix:visited {
	display: flex;
	flex-direction: column;
	gap: 3px;
	background-color: var(--olive);
	color: var(--white);
	border-radius: var(--rayon-carte-large);
	padding: 14px 18px;
	text-decoration: none;
	text-align: center;
	transition: background-color 0.15s ease;
}

a.recup-cta-prix:hover,
a.recup-cta-prix:focus,
a.recup-cta-prix:active {
	background-color: var(--olive-fonce);
	color: var(--white);
}

.recup-cta-prix__libelle {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 110%;
	font-size: 11.5px;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.recup-cta-prix__montant {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-size: 24px;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
}

a.recup-cta-prix--contour,
a.recup-cta-prix--contour:visited {
	background-color: transparent;
	border: 1.5px solid var(--olive);
	color: var(--olive);
	padding: 13px 18px;
}

a.recup-cta-prix--contour:hover,
a.recup-cta-prix--contour:focus,
a.recup-cta-prix--contour:active {
	background-color: var(--olive);
	color: var(--white);
}

/* Variante pilule une ligne (« Voir le prix », « Voir l'offre ») —
   bloc produit, fiche produit, encarts. Le sélecteur couvre aussi les
   <button> (« Donner mon avis ») : mêmes états, sans bordure. Le <span>
   sert de bouton visuel dans une carte entièrement cliquable (carte quiz
   du hub) : les états y sont portés par le lien parent. */

a.recup-cta-simple,
a.recup-cta-simple:visited,
button.recup-cta-simple,
span.recup-cta-simple {
	display: inline-block;
	background-color: var(--olive);
	color: var(--white);
	border: 0;
	cursor: pointer;
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 110%;
	font-size: 13px;
	letter-spacing: 0.08em;
	line-height: 1; /* La maquette est à interligne 1 : hérité du texte, le bouton gonflait de 6px. */
	text-transform: uppercase;
	padding: 16px 30px;
	border-radius: var(--rayon-carte-large);
	text-decoration: none;
	text-align: center;
	transition: background-color 0.15s ease;
}

a.recup-cta-simple:hover,
a.recup-cta-simple:focus,
a.recup-cta-simple:active,
button.recup-cta-simple:hover,
button.recup-cta-simple:focus,
button.recup-cta-simple:active {
	background-color: var(--olive-fonce);
	color: var(--white);
}

/* Contour : rangs secondaires et actions froides */

a.recup-cta-simple--contour,
a.recup-cta-simple--contour:visited,
button.recup-cta-simple--contour {
	background-color: transparent;
	border: 1.5px solid var(--olive);
	color: var(--olive);
}

a.recup-cta-simple--contour:hover,
a.recup-cta-simple--contour:focus,
a.recup-cta-simple--contour:active,
button.recup-cta-simple--contour:hover,
button.recup-cta-simple--contour:focus,
button.recup-cta-simple--contour:active {
	background-color: var(--olive);
	color: var(--white);
}

/* Compacte : barre d'ancres, table des offres, barre d'achat fixe */

.recup-cta-simple--compact,
a.recup-cta-simple--compact,
button.recup-cta-simple--compact {
	font-size: 11.5px;
	letter-spacing: 0.07em;
	padding: 11px 22px;
	border-radius: var(--rayon-bouton);
}

/* ============================================================
   33. LISTING DE CATÉGORIE — en-tête, filtres, cartes, pagination
   Maquette 2026 (Catégorie 1a/1b) : en-tête crème avec compteur,
   colonne de filtres sticky à 280 px, grille de cartes à 3
   colonnes, pagination numérotée. Sur mobile, les filtres passent
   dans un panneau dépliable et la grille en une colonne.
   ============================================================ */

/* Gabarit dédié : pas de barre latérale, pas de conteneur — le bloc pose
   ses propres bandes pleine largeur. */

.recup-page-listing,
.recup-page-outil,
.recup-page-hub {
	width: 100%;
	max-width: none;
	padding: 0;
	margin: 0;
}

/* Ces gabarits sont DÉJÀ pleine largeur : les bandes n'ont pas à
   s'échapper d'un conteneur étroit (technique réservée à la fiche produit).
   La marge négative calc(50% - 50vw) y tirait les bandes d'une demi-barre
   de défilement vers la gauche, d'où un débordement horizontal sur mobile. */
.recup-page-listing .recup-fiche__bande,
.recup-page-outil .recup-fiche__bande,
.recup-page-hub .recup-fiche__bande {
	margin-left: 0;
	margin-right: 0;
}

.recup-page-listing .site-main,
.recup-page-outil .site-main,
.recup-page-hub .site-main {
	padding: 0;
}

/* Le contenu rédigé qui suivrait un bloc outil reste lisible, même règle
   que le gabarit listing. Les blocs d'outils (comparateur, quiz,
   calculateur, hub des outils) posent leurs propres bandes pleine largeur
   et sont exclus. */
.recup-page-outil .site-main > :not(.recup-comparateur):not(.recup-quiz):not(.recup-calc):not(.recup-outils) {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

/* Le contenu rédigé qui suit le listing reste lisible : colonne centrée,
   comme le gabarit éditorial. Les bandes pleine largeur de la zone basse
   (guide d'achat, catégories liées — ch. 37) posent leur propre mise en
   page et sont exclues. */
.recup-page-listing .site-main > :not(.recup-listing):not(.recup-guide):not(.recup-cats) {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

/* Lignes oui/non du tableau des caractéristiques : la coche et la croix
   reprennent la sémantique des points forts/faibles, un « Non » nu se lisait
   comme une donnée neutre (retour du 19/08/2026). */
.recup-pd__spec-bool {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.recup-pd__spec-bool svg {
	flex: none;
}

.recup-pd__spec-bool--oui {
	color: var(--vert);
}

.recup-pd__spec-bool--non {
	color: var(--rouge);
}

/* GeneratePress pose « margin-bottom: 20px » sur chaque enfant direct de
   .site-main. Nos sections pleine largeur se posent bord à bord, chacune avec
   son propre fond et son propre rembourrage : cette marge ouvre entre elles
   une bande de 20 px qui n'appartient à aucune section et laisse voir le fond
   de page. Visible sur le listing entre la bande blanche et le guide d'achat,
   et six fois de suite sur la fiche produit, qui empile sept bandes
   (constat du 19/08/2026). */
.site-main > [class^="recup-"],
.site-main > [class*=" recup-"] {
	margin-bottom: 0;
}

/* Exception : les cartes flottantes (bordées, non pleine largeur) gardent
   leur respiration. Sans elle, l'appel au comparateur collait au footer
   (retour du 19/08/2026). */
.site-main > .recup-appel-vs,
/* GeneratePress zéroïse la marge du dernier enfant (.one-container .site-main
   > :last-child) : il faut égaler sa spécificité pour que la carte, souvent
   dernière de la page, garde sa respiration avant le footer. */
.one-container .site-main > .recup-appel-vs:last-child,
.separate-containers .site-main > .recup-appel-vs:last-child {
	margin-top: 36px;
	margin-bottom: 52px;
}

/* --- En-tête --- */

.recup-listing__entete .recup-fil {
	margin-bottom: 18px;
}

.recup-listing__titre-zone {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
}

.recup-listing__titre {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 118%;
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.04;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	margin: 0;
}

/* Sous le H1, en petit (format concurrent meilleurs.fr) : la plage de
   positions sur une ligne, la date de mise à jour sur la suivante.
   Desktop = phrase longue + date ; mobile = phrase courte + date. La
   version courte est réservée au mobile (média plus bas). */
.recup-listing__meta {
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--texte-doux);
	margin: 10px 0 0;
	font-variant-numeric: tabular-nums;
}

.recup-listing__meta .recup-listing__meta-position--long,
.recup-listing__meta .recup-listing__meta-date {
	display: block;
}

.recup-listing__meta .recup-listing__meta-position--court {
	display: none;
}

.recup-listing__meta strong {
	color: var(--ink);
	font-weight: 600;
}

/* En pied de liste depuis le 05/08/2026 : en tête, l'encart repoussait
   les produits sous la ligne de flottaison. */
.recup-listing__transparence {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background-color: var(--gris-doux);
	border: 1px solid var(--bordure);
	border-radius: var(--rayon-bouton);
	padding: 11px 16px;
	margin: 20px 0 0;
	font-size: 11.5px;
	line-height: 1.55;
	color: var(--texte-meta);
}

.recup-listing__transparence svg {
	flex: none;
	margin-top: 2px;
}

/* --- Grille générale : filtres + résultats --- */

.recup-listing__grille {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 36px;
	align-items: start;
}

/* --- Colonne de filtres --- */

.recup-filtres-panneau {
	position: sticky;
	top: 20px;
	background-color: var(--white);
	border: 1px solid var(--bordure);
	border-radius: var(--rayon-carte-large);
	padding: 18px 20px;
}

.recup-filtres-panneau__entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--bordure);
}

.recup-filtres-panneau__titre {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 112%;
	font-size: 14px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0;
}

.recup-filtres-panneau__compteur {
	background-color: var(--olive);
	color: var(--white);
	border-radius: 999px;
	padding: 2px 8px;
	font-family: var(--police-texte);
	font-style: normal;
	font-size: 11px;
	font-weight: 700;
}

a.recup-filtres-panneau__reset,
a.recup-filtres-panneau__reset:visited {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--olive);
	text-decoration: underline;
	text-underline-offset: 3px;
}

a.recup-filtres-panneau__reset:hover,
a.recup-filtres-panneau__reset:focus,
a.recup-filtres-panneau__reset:active {
	color: var(--olive-fonce);
}

.recup-filtres-panneau__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	padding: 14px 0;
	border-bottom: 1px solid var(--bordure);
}

a.recup-chip-filtre,
a.recup-chip-filtre:visited {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background-color: var(--vert-pale);
	border-radius: 999px;
	padding: 5px 11px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
}

a.recup-chip-filtre span[aria-hidden] {
	color: var(--texte-meta);
}

a.recup-chip-filtre:hover,
a.recup-chip-filtre:focus,
a.recup-chip-filtre:active {
	background-color: var(--olive);
	color: var(--white);
}

a.recup-chip-filtre:hover span[aria-hidden],
a.recup-chip-filtre:focus span[aria-hidden],
a.recup-chip-filtre:active span[aria-hidden] {
	color: var(--white);
}

/* Sections dépliables (details/summary : zéro JS) */

.recup-filtres-panneau__section {
	padding: 16px 0;
	border-bottom: 1px solid var(--bordure);
}

.recup-filtres-panneau__section summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	cursor: pointer;
	list-style: none;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.recup-filtres-panneau__section summary::-webkit-details-marker {
	display: none;
}

.recup-filtres-panneau__section summary svg {
	flex: none;
	color: var(--olive);
	transition: transform 0.15s ease;
}

.recup-filtres-panneau__section[open] summary svg {
	transform: rotate(180deg);
}

.recup-filtres-panneau__section summary:hover,
.recup-filtres-panneau__section summary:focus {
	color: var(--olive-fonce);
}

.recup-filtres-panneau__contenu {
	padding-top: 14px;
}

.recup-filtres-panneau__soustitre {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin: 0 0 12px;
}

/* Prix : deux champs bornés */

.recup-filtre-bornes {
	display: flex;
	align-items: center;
	gap: 9px;
	font-variant-numeric: tabular-nums;
}

.recup-filtre-bornes label {
	flex: 1;
	min-width: 0;
}

.recup-filtre-bornes input {
	width: 100%;
	min-width: 0;
	box-sizing: border-box; /* Sans lui, padding + bordure font déborder le champ du panneau. */
	-moz-appearance: textfield;
	appearance: textfield;
	border: 1px solid rgba(17, 17, 17, 0.2);
	border-radius: 8px;
	padding: 8px 10px;
	font-family: var(--police-texte);
	font-size: 12.5px;
	background-color: var(--white);
}

.recup-filtre-bornes input:focus {
	border-color: var(--olive);
	outline: 2px solid var(--vert-pale);
	outline-offset: 0;
}

.recup-filtre-bornes > span {
	color: var(--texte-meta);
	font-size: 12px;
}

/* Cases à cocher de marque */

.recup-filtres-panneau__options {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.recup-case {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	cursor: pointer;
}

/* La vraie case reste focusable mais invisible : c'est le carré dessiné
   qui porte le style (et l'anneau de focus, via :focus-visible). */
.recup-case input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.recup-case__marque {
	flex: none;
	width: 15px;
	height: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid rgba(17, 17, 17, 0.25);
	border-radius: 4px;
	color: transparent;
}

.recup-case:hover .recup-case__marque {
	border-color: var(--olive);
}

.recup-case input:checked + .recup-case__marque {
	background-color: var(--olive);
	border-color: var(--olive);
	color: var(--white);
}

.recup-case input:focus-visible + .recup-case__marque {
	outline: 2px solid var(--olive);
	outline-offset: 2px;
}

.recup-case__nb {
	margin-left: auto;
	color: var(--texte-meta);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.recup-filtres-panneau__valider {
	width: 100%;
	margin-top: 18px;
}

/* Le display du composant CTA écraserait l'attribut hidden posé par le
   JS (filtrage en direct sur desktop) — même piège que le panneau de tri
   de la top table. */
.recup-filtres-panneau__valider[hidden] {
	display: none;
}

/* --- Colonne résultats --- */

.recup-listing__barre {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--bordure);
}

/* Pilules de tri à direction basculante (système meilleurs.fr retenu le
   06/08/2026, dessin des pilules du bloc top table, ch. 35) : « Notre
   reco » puis prix et avis. Une pilule inactive porte la flèche double et
   applique sa direction naturelle ; active, elle passe en olive plein
   avec la flèche du sens courant, et un clic l'inverse. */

.recup-listing__tris {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.recup-listing__tris-libelle {
	font-size: 11.5px;
	color: var(--texte-meta);
	margin-right: 2px;
}

/* Toutes les pilules parlent la typo du site (Archivo italique capitales,
   demande du 07/08/2026) : seules les couleurs distinguent l'active. */
a.recup-tri-pilule,
a.recup-tri-pilule:visited {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background-color: var(--white);
	border: 1px solid rgba(17, 17, 17, 0.2);
	border-radius: 999px;
	padding: 8px 15px;
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 110%;
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ink);
	text-decoration: none;
}

a.recup-tri-pilule:hover,
a.recup-tri-pilule:focus,
a.recup-tri-pilule:active {
	background-color: var(--vert-pale);
	color: var(--ink);
}

a.recup-tri-pilule:focus-visible {
	outline: 2px solid var(--olive-fonce);
	outline-offset: 2px;
}

a.recup-tri-pilule.est-active,
a.recup-tri-pilule.est-active:visited,
a.recup-tri-pilule.est-active:hover,
a.recup-tri-pilule.est-active:focus,
a.recup-tri-pilule.est-active:active {
	background-color: var(--olive);
	border-color: var(--olive);
	color: var(--white);
}

.recup-tri-pilule svg {
	flex: none;
}

/* La liste déroulante du tri n'existe qu'en mobile/tablette, derrière le
   bouton « Trier » — sur desktop, les pilules suffisent. */
.recup-tri-liste {
	display: none;
}

/* La copie mobile de la méta (zone blanche) n'existe qu'en mobile. */
.recup-listing__meta--corps {
	display: none;
}

/* --- Grille de cartes --- */

.recup-listing__cartes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	padding-top: 24px;
}

.recup-carte-produit {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--white);
	border: 1px solid var(--bordure);
	border-radius: var(--rayon-carte-large);
}

.recup-carte-produit--choix {
	border: 2px solid var(--olive);
}

.recup-carte-produit__ruban {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	background-color: var(--ink);
	color: var(--white);
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 110%;
	font-size: 10px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: calc(var(--rayon-carte-large) - 2px) 0 9px 0;
}

/* Vignette carree : les packshots produits sont plus hauts que larges,
   un cadre 4/3 les rognait ou les noyait dans du vide (retour du
   19/08/2026). Le retrait interieur evite que le produit touche les bords. */
.recup-carte-produit__visuel {
	position: relative;
	aspect-ratio: 1 / 1;
	background-color: var(--white);
	border-radius: calc(var(--rayon-carte-large) - 1px) calc(var(--rayon-carte-large) - 1px) 0 0;
	overflow: hidden;
}

.recup-carte-produit__visuel img {
	display: block;
	width: 100%;
	height: 100%;
	padding: 10px;
	object-fit: contain;
	background-color: var(--white);
}

/* Sans image : un aplat de la charte, pas un rectangle blanc. */
.recup-carte-produit__visuel-vide {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(140deg, var(--vert-pale), var(--sable));
}

/* La pastille de note flotte sur le visuel ; sa bulle doit pouvoir sortir
   de la carte, d'où le conteneur sans overflow autour d'elle. */
.recup-carte-produit__note {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
}

/* Les étiquettes « Notre note » / « Avis utilisateurs » n'apparaissent
   qu'en vue liste (anatomie top table) — la grille garde la pastille nue. */
.recup-carte-produit__etiquette {
	display: none;
}

.recup-carte-produit__note .recup-score__note {
	font-size: 15px;
	padding: 6px 10px;
}

.recup-carte-produit__note .recup-infobulle__panneau {
	left: auto;
	right: 0;
	width: 250px;
}

.recup-carte-produit__corps {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
	padding: 16px 17px 18px;
}

.recup-carte-produit__nom {
	margin: 0;
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 110%;
	font-size: 15px;
	line-height: 1.2;
	letter-spacing: normal; /* Les titres globaux resserrent (-0.01em), pas la maquette. */
	text-transform: uppercase;
	overflow-wrap: normal;
	word-break: normal; /* Jamais de césure en plein mot dans un nom de produit. */
}

.recup-carte-produit__nom a,
.recup-carte-produit__nom a:visited {
	color: var(--ink);
	text-decoration: none;
}

.recup-carte-produit__nom a:hover,
.recup-carte-produit__nom a:focus,
.recup-carte-produit__nom a:active {
	color: var(--olive-fonce);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.recup-carte-produit__avis {
	margin: 0;
}

.recup-carte-produit__avis a,
.recup-carte-produit__avis a:visited {
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	color: var(--etoile);
}

.recup-carte-produit__avis strong {
	font-weight: 800;
	font-size: 14px;
}

.recup-carte-produit__avis .recup-etoile {
	font-size: 12px;
}

.recup-carte-produit__avis-nb {
	font-size: 11.5px;
	color: var(--texte-meta);
	border-bottom: 1px dotted var(--texte-meta);
}

.recup-carte-produit__avis a:hover .recup-carte-produit__avis-nb,
.recup-carte-produit__avis a:focus .recup-carte-produit__avis-nb,
.recup-carte-produit__avis a:active .recup-carte-produit__avis-nb {
	color: var(--ink);
	border-bottom-color: var(--ink);
}

.recup-carte-produit__specs {
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--texte-doux);
	margin: 0;
}

.recup-carte-produit__achat {
	position: relative;
	z-index: 2; /* au-dessus du lien qui couvre la carte */
	margin-top: auto;
	padding-top: 8px;
}

/* Le prix vit dans le bouton : il doit s'y lire comme un prix, pas comme un
   libellé d'action. Poids et chiffres tabulaires, sur deux lignes si besoin. */
.recup-carte-produit__cta {
	width: 100%;
	text-align: center;
	font-variant-numeric: tabular-nums;
	line-height: 1.25;
}

/* Une seule ligne, comme les libellés prix : « Notre avis » se repliait
   et cassait l'alignement des pieds de carte (QC du 22/08/2026). */
.recup-carte-produit__cta span {
	white-space: nowrap;
}

/* Le bouton mène à la fiche, pas au marchand : le chevron le dit. Il est posé
   en flex pour rester collé au libellé quel que soit le prix, et il ne doit
   jamais se comprimer sur un prix long (« Dès 1 299 € »). */
.recup-carte-produit__achat a.recup-carte-produit__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.recup-carte-produit__cta svg {
	flex: 0 0 auto;
}

/* Prix cliquable du tableau comparatif : même règle, sans habillage de bouton
   pour ne pas alourdir une cellule de tableau. */
a.recup-tableau__offre {
	display: inline-block;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--olive-fonce);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

a.recup-tableau__offre:hover,
a.recup-tableau__offre:focus {
	text-decoration-thickness: 2px;
}

/* Toute la carte ouvre la fiche produit : le lien du titre s'etire sur la
   carte entiere (retour du 19/08/2026 — seul « Lire notre analyse » ouvrait
   la fiche). Les elements interactifs qui ont une autre destination — bouton
   marchand, case a cocher, pastille de note — passent au-dessus. */
.recup-carte-produit__nom a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--rayon-carte-large);
}

/* La pastille est deja positionnee plus haut : on ne touche qu'a son plan. */
.recup-carte-produit__note {
	z-index: 2;
}

/* Infobulle ouverte : la note monte d'un plan. Note et avis sont deux
   contextes d'empilement freres a 2 ; l'avis, plus tard dans le DOM,
   passait au-dessus du panneau deplie malgre le z-index interne de
   celui-ci (constat du 21/08/2026). */
.recup-carte-produit__note:has(.recup-infobulle--ouverte),
.recup-carte-produit__note:hover,
.recup-carte-produit__note:focus-within {
	z-index: 4;
}

.recup-carte-produit__avis {
	position: relative;
	z-index: 2;
}

.recup-carte-produit__prix {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-size: 19px;
	font-variant-numeric: tabular-nums;
	margin: 0;
}

.recup-carte-produit__marchands {
	font-size: 11.5px;
	color: var(--texte-meta);
	margin: 3px 0 0;
}

.recup-carte-produit__achat .recup-cta-simple {
	display: block;
	width: 100%;
	margin-top: 11px;
}

a.recup-carte-produit__lien,
a.recup-carte-produit__lien:visited {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin-top: 9px;
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 110%;
	font-size: 10.5px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--olive);
	text-decoration: none;
}

a.recup-carte-produit__lien:hover,
a.recup-carte-produit__lien:focus,
a.recup-carte-produit__lien:active {
	color: var(--olive-fonce); /* Comme tous les liens du site : on FONCE au survol (l'olive clair tombait à ~2:1 de contraste). */
}

/* --- Double curseur de prix (activé par le JS, champs toujours saisissables) --- */

.recup-curseur {
	position: relative;
	height: 14px;
	margin: 10px 6px 18px;
}

.recup-curseur__piste {
	position: absolute;
	top: 5px;
	left: 0;
	right: 0;
	height: 4px;
	background-color: var(--vert-pale);
	border-radius: 2px;
}

.recup-curseur__plage {
	position: absolute;
	top: 0;
	height: 4px;
	background-color: var(--olive);
	border-radius: 2px;
}

/* Deux <input type="range"> superposés : la piste native disparaît, seules
   les poignées restent cliquables. */
.recup-curseur__poignee {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 14px;
	margin: 0;
	background: none;
	-webkit-appearance: none;
	appearance: none;
	pointer-events: none;
}

.recup-curseur__poignee::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	pointer-events: auto;
	width: 14px;
	height: 14px;
	background-color: var(--white);
	border: 2px solid var(--olive);
	border-radius: 50%;
	cursor: grab;
}

.recup-curseur__poignee::-moz-range-thumb {
	pointer-events: auto;
	width: 10px;
	height: 10px;
	background-color: var(--white);
	border: 2px solid var(--olive);
	border-radius: 50%;
	cursor: grab;
}

.recup-curseur__poignee::-moz-range-track {
	background: none;
}

.recup-curseur__poignee:active::-webkit-slider-thumb {
	cursor: grabbing;
	background-color: var(--vert-pale);
}

.recup-curseur__poignee:focus-visible {
	outline: none;
}

.recup-curseur__poignee:focus-visible::-webkit-slider-thumb {
	outline: 2px solid var(--olive);
	outline-offset: 2px;
}

/* Firefox : mêmes états actif et focus que WebKit — sans ces règles, le
   focus clavier des poignées y était invisible (outline none ci-dessus). */
.recup-curseur__poignee:active::-moz-range-thumb {
	cursor: grabbing;
	background-color: var(--vert-pale);
}

.recup-curseur__poignee:focus-visible::-moz-range-thumb {
	outline: 2px solid var(--olive);
	outline-offset: 2px;
}

/* --- « Voir les N marques » --- */

.recup-filtres-panneau__voir-tout {
	background: none;
	border: 0;
	padding: 0;
	margin-top: 10px;
	font-family: var(--police-texte); /* Lien discret en Inter : la règle button globale (Archivo capitales) fuyait ici. */
	font-style: normal;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: var(--olive);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.recup-filtres-panneau__voir-tout:hover,
.recup-filtres-panneau__voir-tout:focus,
.recup-filtres-panneau__voir-tout:active {
	background: none;
	color: var(--olive-fonce);
}

/* --- Bascule grille / liste (boutons créés par le JS) --- */

.recup-vue-bascule {
	display: flex;
	border: 1px solid rgba(17, 17, 17, 0.2);
	border-radius: 9px;
	overflow: hidden;
	flex: none;
}

.recup-vue-bascule__choix {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 11px;
	background-color: var(--white);
	border: 0;
	border-radius: 0; /* Segments à angles droits dans le cadre (maquette) — les boutons GP arrondissent par défaut. */
	color: var(--texte-doux);
	cursor: pointer;
}

.recup-vue-bascule__choix:hover,
.recup-vue-bascule__choix:focus {
	background-color: var(--vert-pale);
	color: var(--ink);
}

.recup-vue-bascule__choix:active,
.recup-vue-bascule__choix.est-active {
	background-color: var(--olive);
	color: var(--white);
}

/* --- Vue liste : une ligne dense par produit. Desktop uniquement — en
   une colonne, la grille de cartes EST déjà la vue compacte, et la ligne
   à trois colonnes déborderait de l'écran. --- */

/* La carte survolée (ou contenant le focus) passe au-dessus de ses
   voisines : sans cela, la bulle « Détail de notre note » ouverte en vue
   liste était transpercée par la ligne suivante. */
.recup-listing__cartes .recup-carte-produit:hover,
.recup-listing__cartes .recup-carte-produit:focus-within {
	z-index: 20;
}

/* Vue liste : l'anatomie de la top table de la page money — vignette,
   contenu, double bloc de notes étiquetées, colonne d'achat. */
@media (min-width: 1024px) {
	.recup-listing__cartes.est-liste {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.recup-listing__cartes.est-liste .recup-carte-produit {
		display: grid;
		grid-template-columns: 110px minmax(0, 1fr) 190px 210px;
		grid-template-rows: auto auto;
		gap: 6px 22px;
		align-items: start;
		padding: 18px;
	}

	.recup-listing__cartes.est-liste .recup-carte-produit__visuel {
		grid-column: 1;
		grid-row: 1 / span 2;
		aspect-ratio: 1 / 1;
		border-radius: 9px;
		align-self: center;
		/* Cadre dessiné : posé nu sur la carte blanche, le packshot crème
		   flottait comme un aplat sans appartenance (retour du 19/08/2026). */
		border: 1px solid var(--bordure);
		overflow: hidden;
	}

	/* La pastille quitte le visuel : bloc « Notre note » étiqueté, comme
	   la top table. */
	.recup-listing__cartes.est-liste .recup-carte-produit__note {
		position: static;
		grid-column: 3;
		grid-row: 1;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.recup-listing__cartes.est-liste .recup-carte-produit__note .recup-score__note {
		font-size: 21px;
		padding: 7px 12px;
	}

	.recup-listing__cartes.est-liste .recup-carte-produit__etiquette {
		display: block;
		font-style: normal;
		font-size: 9px;
		font-weight: 700;
		letter-spacing: 0.13em;
		text-transform: uppercase;
		color: var(--texte-doux);
	}

	.recup-listing__cartes.est-liste .recup-carte-produit__corps {
		display: contents;
	}

	.recup-listing__cartes.est-liste .recup-carte-produit__nom {
		grid-column: 2;
		grid-row: 1;
		font-size: 17px;
		margin: 0;
		align-self: center;
	}

	.recup-listing__cartes.est-liste .recup-carte-produit__specs {
		grid-column: 2;
		grid-row: 2;
		margin: 0;
	}

	.recup-listing__cartes.est-liste .recup-carte-produit__avis {
		grid-column: 3;
		grid-row: 2;
		margin: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 5px;
	}

	.recup-listing__cartes.est-liste .recup-carte-produit__achat {
		grid-column: 4;
		grid-row: 1 / span 2;
		justify-self: stretch;
		text-align: center;
		padding-top: 0;
		margin-top: 0;
	}

	.recup-listing__cartes.est-liste .recup-carte-produit__prix {
		font-size: 21px;
	}

	.recup-listing__cartes.est-liste .recup-carte-produit__ruban {
		border-radius: calc(var(--rayon-carte-large) - 2px) 0 9px 0;
	}
}

/* --- Case « Comparer » des cartes --- */

.recup-carte-produit__comparer {
	margin-top: 11px;
	font-size: 12px;
	color: var(--texte-doux);
}

.recup-carte-produit__comparer input:disabled ~ .recup-case__marque {
	opacity: 0.35;
}

.recup-carte-produit__comparer input:disabled ~ .recup-case__libelle {
	opacity: 0.5;
}

/* --- Barre de comparaison flottante --- */

/* Barre blanche à vignettes (maquette 2026, branchée sur l'outil le
   07/08/2026) : libellé, vignettes des produits avec croix de retrait
   unitaire, emplacement libre en pointillés, puis « Tout retirer » et le
   CTA « Comparer (N) ». */
.recup-comparer-barre {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 80;
	background-color: var(--white);
	border-top: 1px solid var(--bordure);
}

/* La barre visible réserve sa hauteur en bas de page (classe posée par le
   JS) : la pagination reste atteignable. */
body.recup-comparaison-active .recup-listing {
	padding-bottom: 92px;
}

.recup-comparer-barre[hidden] {
	display: none;
}

.recup-comparer-barre__conteneur {
	max-width: 1180px;
	margin: 0 auto;
	padding: 14px 24px;
	display: flex;
	align-items: center;
	gap: 18px;
}

.recup-comparer-barre__libelle {
	flex: none;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--texte-doux);
}

.recup-comparer-barre__liste {
	display: flex;
	align-items: center;
	gap: 9px;
	flex: 1;
	min-width: 0;
	margin: 0;
}

.recup-comparer-barre__vignette {
	position: relative;
	width: 52px;
	height: 52px;
	flex: none;
	background-color: var(--white);
	border: 1px solid var(--bordure);
	border-radius: 9px;
}

.recup-comparer-barre__vignette img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background-color: var(--white);
	border-radius: 8px;
}

.recup-comparer-barre__retirer {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--ink);
	color: var(--white);
	border: 0;
	border-radius: 50%;
	padding: 0;
	font-family: var(--police-texte);
	font-style: normal;
	font-size: 11px;
	line-height: 1;
	letter-spacing: normal;
	cursor: pointer;
}

.recup-comparer-barre__retirer:hover,
.recup-comparer-barre__retirer:focus {
	background-color: var(--olive-fonce);
	color: var(--white);
}

.recup-comparer-barre__libre {
	width: 52px;
	height: 52px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px dashed rgba(17, 17, 17, 0.28);
	border-radius: 9px;
	color: var(--texte-meta);
	font-size: 16px;
}

.recup-comparer-barre__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: none;
}

.recup-comparer-barre__lancer[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
}

.recup-comparer-barre__vider {
	background: none;
	border: 0;
	padding: 0;
	font-family: var(--police-texte); /* Lien discret en Inter : la règle button globale (Archivo capitales) fuyait ici. */
	font-style: normal;
	font-size: 11.5px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--texte-meta);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.recup-comparer-barre__vider:hover,
.recup-comparer-barre__vider:focus,
.recup-comparer-barre__vider:active {
	background: none;
	color: var(--ink);
}

/* Sur mobile, la barre se resserre (maquette : vignettes 40 px, CTA en
   pleine largeur, libellé et « Tout retirer » masqués). */
@media (max-width: 767px) {
	.recup-comparer-barre__conteneur {
		padding: 11px 16px;
		gap: 12px;
	}

	.recup-comparer-barre__libelle,
	.recup-comparer-barre__vider {
		display: none;
	}

	.recup-comparer-barre__liste {
		flex: none;
		gap: 8px;
	}

	.recup-comparer-barre__vignette,
	.recup-comparer-barre__libre {
		width: 40px;
		height: 40px;
		border-radius: 8px;
	}

	.recup-comparer-barre__actions {
		flex: 1;
	}

	.recup-comparer-barre__actions .recup-comparer-barre__lancer {
		width: 100%;
	}

	body.recup-comparaison-active .recup-listing {
		padding-bottom: 78px;
	}
}

/* --- État vide --- */

.recup-listing__vide {
	text-align: center;
	padding: 48px 24px;
}

.recup-listing__vide-titre {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 112%;
	font-size: 19px;
	text-transform: uppercase;
	margin: 0 0 8px;
}

.recup-listing__vide p {
	color: var(--texte-doux);
	font-size: 14px;
	margin: 0 0 18px;
}

/* --- Pagination --- */

.recup-pagination {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--bordure);
	font-variant-numeric: tabular-nums;
}

.recup-pagination__page,
.recup-pagination__fleche,
a.recup-pagination__page:visited,
a.recup-pagination__fleche:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	border: 1px solid rgba(17, 17, 17, 0.18);
	border-radius: 9px;
	padding: 9px 13px;
	font-size: 13px;
	color: var(--ink);
	text-decoration: none;
}

a.recup-pagination__page:hover,
a.recup-pagination__page:focus,
a.recup-pagination__page:active,
a.recup-pagination__fleche:hover,
a.recup-pagination__fleche:focus,
a.recup-pagination__fleche:active {
	border-color: var(--olive);
	color: var(--olive-fonce);
}

.recup-pagination__page.est-active {
	background-color: var(--olive);
	border-color: var(--olive);
	color: var(--white);
	font-weight: 700;
}

.recup-pagination__points {
	color: var(--texte-meta);
	padding: 0 2px;
}

.recup-pagination__fleche--inactive {
	opacity: 0.35;
}

.recup-pagination__etat {
	margin-left: auto;
	font-size: 11.5px;
	color: var(--texte-meta);
}

/* --- « Charger plus de produits » (posé par le JS sous la pagination) --- */

.recup-charger-plus {
	text-align: center;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--bordure);
}

.recup-charger-plus__bouton {
	padding: 14px 28px;
}

.recup-charger-plus__bouton[disabled] {
	opacity: 0.55;
	cursor: wait;
}

.recup-charger-plus__etat {
	font-size: 11.5px;
	color: var(--texte-meta);
	margin: 9px 0 0;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 1023px) {
	.recup-listing__grille {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.recup-filtres-panneau {
		position: static;
	}

	/* La bascule grille/liste disparaît : en une colonne, la question ne
	   se pose pas. */
	.recup-vue-bascule {
		display: none;
	}

	/* Panneau replié derrière le bouton « Filtrer » (la rangée de boutons
	   est posée par le JS du listing). Sans JavaScript, la rangée n'existe
	   pas et le panneau reste déployé : les filtres restent utilisables. */
	.recup-mobile-outils + .recup-filtres-panneau {
		display: none;
	}

	.recup-mobile-outils + .recup-filtres-panneau.est-ouvert {
		display: block;
	}

	/* Même mécanique pour le tri : la barre se replie derrière le bouton
	   « Trier » (demande du 07/08/2026) et montre la liste déroulante —
	   les pilules restent le système desktop. Sans JavaScript, pas de
	   rangée de boutons : la barre et sa liste restent visibles. */
	.recup-mobile-outils ~ .recup-listing__resultats .recup-listing__barre {
		display: none;
	}

	.recup-mobile-outils ~ .recup-listing__resultats .recup-listing__barre.est-ouvert {
		display: block;
	}

	.recup-listing__tris {
		display: none;
	}

	.recup-tri-liste {
		display: block;
		list-style: none;
		margin: 0;
		padding: 6px;
		background-color: var(--white);
		border: 1px solid var(--bordure);
		border-radius: var(--rayon-carte-large);
	}

	.recup-tri-liste a,
	.recup-tri-liste a:visited {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 11px 13px;
		border-radius: 8px;
		font-size: 13px;
		color: var(--ink);
		text-decoration: none;
	}

	.recup-tri-liste a:hover,
	.recup-tri-liste a:focus,
	.recup-tri-liste a:active {
		background-color: var(--vert-pale);
		color: var(--ink);
	}

	.recup-tri-liste a.est-active,
	.recup-tri-liste a.est-active:visited {
		color: var(--olive-fonce);
		font-weight: 600;
	}

	.recup-tri-liste__coche {
		margin-left: auto;
		color: var(--olive);
	}

	.recup-listing__cartes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Rangée mobile « Filtrer (N) » + « Trier » (créée par le JS) */

.recup-mobile-outils {
	display: flex;
	gap: 10px;
	margin-bottom: 14px;
}

.recup-mobile-outils[hidden] {
	display: none; /* Le display flex écraserait l'attribut hidden (desktop). */
}

.recup-mobile-outils .recup-filtres-bascule,
.recup-mobile-outils .recup-tri-bascule {
	flex: 1;
	margin-bottom: 0;
}

/* Bouton « Trier » : même gabarit que « Filtrer », en contour — la seule
   pilule pleine de la rangée reste l'action filtres (verte). */
.recup-tri-bascule,
.recup-tri-bascule:focus {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	background-color: var(--white);
	border: 1.5px solid var(--olive);
	border-radius: var(--rayon-bouton);
	padding: 11px 18px;
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 110%;
	font-size: 11.5px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--olive-fonce);
	cursor: pointer;
}

.recup-tri-bascule:hover,
.recup-tri-bascule:active {
	background-color: var(--vert-pale);
	border-color: var(--olive-fonce);
	color: var(--olive-fonce);
}

.recup-tri-bascule:focus-visible {
	outline: 2px solid var(--olive-fonce);
	outline-offset: 2px;
}

/* Bouton « Filtrer » : masqué sur desktop par le script lui-même */

/* Toujours olive plein (demande du 05/08/2026) : le bouton d'action se
   repère d'un coup d'œil, le menu de tri voisin reste clair. Surtout pas
   de marge ici : une marge posée aussi sur :focus faisait grandir la
   rangée au clic, et le bouton voisin s'étirait (bug du 07/08/2026). */
.recup-filtres-bascule,
.recup-filtres-bascule:focus {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	background-color: var(--olive);
	border: 1.5px solid var(--olive);
	border-radius: var(--rayon-bouton);
	padding: 11px 18px;
	margin-bottom: 0;
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 110%;
	font-size: 11.5px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--white);
	cursor: pointer;
}

.recup-filtres-bascule:hover,
.recup-filtres-bascule:active {
	background-color: var(--olive-fonce);
	border-color: var(--olive-fonce);
	color: var(--white);
}

.recup-filtres-bascule:focus-visible {
	outline: 2px solid var(--olive-fonce);
	outline-offset: 2px;
}

.recup-filtres-bascule[hidden] {
	display: none;
}

@media (max-width: 767px) {
	.recup-listing__titre-zone {
		gap: 18px;
	}

	/* Premier écran épuré (demande du 07/08/2026), rythme vertical calé sur
	   le concurrent de référence : pas de fil d'Ariane, bande crème réduite
	   au H1 ; la méta — position affichée à gauche, date de mise à jour à
	   droite — passe sur le fond blanc, au-dessus des boutons. */
	.recup-listing__entete .recup-fil {
		display: none;
	}

	.recup-listing__entete.recup-fiche__bande {
		padding: 16px 16px 14px;
	}

	.recup-listing__meta--entete {
		display: none;
	}

	.recup-listing__meta--corps {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 10px;
		font-size: 11.5px;
		margin: 0;
	}

	/* Premier écran compressé : la version courte « Position X – Y », la
	   phrase complète reste au desktop (même spécificité que les règles de
	   base pour les surclasser). */
	.recup-listing__meta .recup-listing__meta-position--long {
		display: none;
	}

	.recup-listing__meta .recup-listing__meta-position--court {
		display: block;
	}

	.recup-listing__corps.recup-fiche__bande {
		padding-top: 12px;
	}

	.recup-listing__grille {
		gap: 14px;
	}

	.recup-mobile-outils {
		margin-bottom: 0; /* Le gap de la grille suffit : la liste colle aux boutons. */
	}

	.recup-filtres-bascule,
	.recup-tri-bascule {
		padding: 13px 18px;
	}

	/* Deux produits par ligne sur mobile : une seule colonne obligeait a
	   defiler indefiniment pour comparer (retour du 19/08/2026). */
	.recup-listing__cartes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		padding-top: 0;
	}

	/* Colonne etroite : le contenu se resserre pour rester lisible. */
	.recup-listing__cartes .recup-carte-produit__corps {
		padding: 12px 12px 14px;
	}

	.recup-listing__cartes .recup-carte-produit__nom {
		font-size: 14px;
	}

	.recup-listing__cartes .recup-carte-produit__specs {
		font-size: 11.5px;
		line-height: 1.45;
	}

	.recup-listing__cartes .recup-carte-produit__prix {
		font-size: 17px;
	}

	.recup-listing__cartes .recup-carte-produit__achat .recup-cta-simple {
		padding-left: 10px;
		padding-right: 10px;
		font-size: 12px;
	}

	/* Le ruban et la pastille reduisent pour ne pas manger la vignette. */
	.recup-listing__cartes .recup-carte-produit__ruban {
		font-size: 9.5px;
		padding: 4px 8px;
	}

	/* Carte maquette (retour du 07/08/2026 — l'essai « carte compacte » du
	   05/08 est abandonné) : grande image 4/3, contenu dessous. Seul
	   ajustement : le prix à gauche et le nombre de marchands à droite,
	   sur la même ligne, comme la maquette mobile. */
	/* En deux colonnes, la largeur ne permet plus de poser le prix et le
	   nombre de marchands cote a cote : tout s'empile. */
	.recup-listing__cartes .recup-carte-produit__achat {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.recup-listing__cartes .recup-carte-produit__marchands {
		margin: 0;
	}

	.recup-listing__titre {
		font-size: 24px;
	}

	.recup-listing__barre {
		gap: 10px;
		padding-bottom: 12px;
	}

	.recup-pagination__etat {
		margin-left: 0;
		width: 100%;
	}
}

/* ============================================================
   35. BLOC TOP TABLE (Résumé du classement + tris)
   Aligné sur la maquette 2026 (v2) : cartes blanches à étiquette
   de rang sur la bordure haute, arguments à coche, « Voir plus »
   repliable, double bloc de notes à infobulles, CTA olive
   « Voir le prix » avec prix intégré, légende de l'échelle.
   Tris directionnels : pilules sur PC, panneau sur mobile.
   ============================================================ */

.recup-resume {
	margin: 28px 0;
	font-variant-numeric: tabular-nums;
}

/* En-tête : compteur + pilules de tri */

.recup-resume__entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--bordure);
}

.recup-resume__compteur {
	flex: none;
	font-size: 13px;
	color: var(--texte-doux);
	margin: 0;
}

.recup-resume__compteur strong {
	color: var(--ink);
}

.recup-resume__tris {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.recup-resume__tri {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background-color: transparent;
	border: 1px solid rgba(17, 17, 17, 0.2);
	color: var(--ink);
	font-family: var(--police-texte);
	font-style: normal;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0;
	text-transform: none;
	padding: 8px 14px;
	border-radius: 999px;
	cursor: pointer;
}

.recup-resume__tri:hover,
.recup-resume__tri:focus,
.recup-resume__tri:active {
	background-color: var(--vert-pale);
	border-color: rgba(17, 17, 17, 0.2);
	color: var(--ink);
}

.recup-resume__tri--actif,
.recup-resume__tri--actif:hover,
.recup-resume__tri--actif:focus,
.recup-resume__tri--actif:active {
	background-color: var(--olive);
	border-color: var(--olive);
	color: var(--white);
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 110%;
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 8px 15px;
}

a.recup-resume__methode,
a.recup-resume__methode:visited {
	font-size: 11px;
	color: var(--texte-doux);
	text-decoration: underline;
	text-underline-offset: 3px;
	margin-left: 4px;
}

a.recup-resume__methode:hover,
a.recup-resume__methode:focus,
a.recup-resume__methode:active {
	color: var(--ink);
}

/* Liste des cartes (l'étiquette de rang déborde de 13 px : le
   padding-top de la liste et le gap entre cartes l'absorbent) */

.recup-resume__liste {
	list-style: none;
	margin: 0;
	padding: 30px 0 0;
	display: flex;
	flex-direction: column;
	gap: 26px;
}

.recup-resume__ligne {
	position: relative;
	background-color: var(--white);
	border: 1px solid var(--bordure);
	border-radius: var(--rayon-carte-large);
	padding: 26px 28px;
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr) 195px 220px;
	gap: 26px;
	align-items: start;
}

.recup-resume__ligne--une {
	border: 2px solid var(--olive);
}

/* Étiquette de rang, à cheval sur la bordure haute */

.recup-resume__ruban {
	position: absolute;
	z-index: 2;
	top: -13px;
	left: 22px;
	background-color: var(--olive);
	color: var(--white);
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 110%;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 6px 13px;
	border-radius: 8px;
	white-space: nowrap;
}

.recup-resume__ligne--une .recup-resume__ruban {
	background-color: var(--ink);
}

/* Vignette produit (packshot entier, jamais recadré) */

.recup-resume__vignette {
	position: relative;
}

.recup-resume__vignette img,
.recup-resume__vignette--vide {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: contain;
	background-color: var(--white);
	border-radius: var(--rayon-carte-large);
}

.recup-resume__vignette--vide {
	background-color: var(--sable);
}

/* Corps : nom, badges, arguments, texte repliable */

.recup-resume__corps {
	min-width: 0;
}

.recup-resume__nom {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 112%;
	font-size: 20px;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 10px;
}

.recup-resume__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 14px;
}

.recup-resume__badge-teste {
	border: 1px solid var(--olive);
	color: var(--olive);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 8px;
}

.recup-resume__pros {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 13.5px;
	line-height: 1.45;
}

.recup-resume__pros li {
	display: flex;
	gap: 9px;
}

.recup-resume__pros svg {
	flex: none;
	margin-top: 2px;
	color: var(--olive);
}

.recup-resume__plus {
	font-size: 13px;
	line-height: 1.65;
	color: var(--texte-doux);
	border-top: 1px solid rgba(17, 17, 17, 0.1);
	margin-top: 14px;
	padding-top: 12px;
}

.recup-resume__voir-plus {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	width: auto;
	margin-top: 14px;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	font-family: var(--police-texte);
	font-style: normal;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: none;
	text-align: left;
	color: var(--olive);
	cursor: pointer;
}

.recup-resume__voir-plus:hover,
.recup-resume__voir-plus:focus,
.recup-resume__voir-plus:active {
	background-color: transparent;
	color: var(--olive-fonce);
}

.recup-resume__voir-plus svg {
	transition: transform 0.15s ease;
}

.recup-resume__voir-plus--ouvert svg {
	transform: rotate(180deg);
}

/* Double bloc de notes : notre note + avis utilisateurs */

.recup-resume__notes-bloc {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	text-align: left;
}

/* Le chiffre ambre et le lien « N avis » s'alignent sur leur ligne de base */
.recup-resume__avis .recup-infobulle {
	align-items: baseline;
}

.recup-resume__note-nous em,
.recup-resume__avis em {
	display: block;
	font-style: normal;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--texte-doux);
	margin-bottom: 6px;
}

/* Le badge de note généré par le plugin passe en grande taille ici */

.recup-resume__note-nous .recup-score__note {
	font-size: 30px;
	line-height: 1;
	padding: 12px 16px;
	border-radius: 10px;
}

.recup-resume__note-nous .recup-score__note small {
	font-size: 13px;
	opacity: 0.85;
}

/* Colonne d'achat : CTA prix, résumé des offres, lien d'analyse */

.recup-resume__achat {
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-align: center;
}

/* Le bouton d'achat est le composant transversal .recup-cta-prix (ch. 32). */

.recup-resume__marchands {
	font-size: 11.5px;
	color: var(--texte-doux);
	margin: 0;
}

a.recup-resume__lien-analyse,
a.recup-resume__lien-analyse:visited {
	font-size: 12px;
	font-weight: 600;
	color: var(--olive-fonce);
	text-decoration: underline;
	text-underline-offset: 2px;
}

a.recup-resume__lien-analyse:hover,
a.recup-resume__lien-analyse:focus,
a.recup-resume__lien-analyse:active {
	color: var(--ink);
}

/* Légende de l'échelle des notes */

.recup-resume__echelle {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin: 24px 0 0;
	font-size: 11.5px;
	color: var(--texte-meta);
}

.recup-resume__echelle-libelle {
	flex: none;
}

.recup-resume__echelle-paves {
	display: flex;
	align-items: center;
	gap: 6px;
}

.recup-resume__echelle-paves span {
	width: 26px;
	height: 8px;
	border-radius: 2px;
}

/* Tri mobile (panneau déroulant) — masqué sur PC */

.recup-tri-mobile {
	display: none;
	position: relative;
	margin: 0 0 8px;
}

.recup-tri-mobile__bouton {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background-color: var(--white);
	color: var(--ink);
	border: 1px solid rgba(17, 17, 17, 0.2);
	border-radius: 10px;
	padding: 12px 14px;
	font-family: var(--police-texte);
	font-style: normal;
	font-weight: 400;
	font-size: 12.5px;
	letter-spacing: 0;
	text-transform: none;
	text-align: left;
}

.recup-tri-mobile__bouton:hover,
.recup-tri-mobile__bouton:focus,
.recup-tri-mobile__bouton:active {
	background-color: var(--white);
	color: var(--ink);
}

.recup-tri-mobile__prefixe {
	color: var(--texte-doux);
}

.recup-tri-mobile__liste {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 30;
	background-color: var(--white);
	border: 1px solid var(--bordure);
	border-radius: var(--rayon-carte-large);
	padding: 6px;
	display: flex;
	flex-direction: column;
}

.recup-tri-mobile__liste[hidden] {
	display: none; /* ⚠️ Indispensable : le display:flex ci-dessus neutraliserait l'attribut hidden. */
}

.recup-tri-mobile__liste button {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	text-align: left;
	background-color: transparent;
	color: var(--ink);
	border: 0;
	border-radius: 8px;
	padding: 12px;
	font-family: var(--police-texte);
	font-style: normal;
	font-weight: 400;
	font-size: 13px;
	letter-spacing: 0;
	text-transform: none;
}

.recup-tri-mobile__liste button:hover,
.recup-tri-mobile__liste button:focus,
.recup-tri-mobile__liste button:active {
	background-color: var(--cream);
	color: var(--ink);
}

.recup-tri-mobile__liste button.recup-tri-mobile__actif,
.recup-tri-mobile__liste button.recup-tri-mobile__actif:hover,
.recup-tri-mobile__liste button.recup-tri-mobile__actif:focus,
.recup-tri-mobile__liste button.recup-tri-mobile__actif:active {
	background-color: var(--vert-pale);
	color: var(--ink);
	font-weight: 600;
}

a.recup-tri-mobile__methode {
	border-top: 1px solid rgba(17, 17, 17, 0.1);
	margin-top: 4px;
	padding: 12px;
	font-size: 11.5px;
	color: var(--texte-doux);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Tablette : notes et achat passent sous la carte */

@media (max-width: 1023px) {
	.recup-resume__ligne {
		grid-template-columns: 150px minmax(0, 1fr);
	}

	.recup-resume__notes-bloc {
		grid-column: 1 / -1;
		flex-direction: row;
		align-items: flex-end;
		gap: 28px;
		border-top: 1px solid rgba(17, 17, 17, 0.1);
		padding-top: 14px;
	}

	.recup-resume__achat {
		grid-column: 1 / -1;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		text-align: left;
	}

	.recup-resume__achat a.recup-cta-prix {
		flex: none;
		min-width: 210px;
	}
}

/* Mobile : compteur sur deux lignes, tri en panneau, carte empilée */

@media (max-width: 767px) {
	.recup-resume__entete {
		display: block;
		padding-bottom: 0;
		border-bottom: 0;
	}

	.recup-resume__compteur {
		font-size: 12px;
		line-height: 1.5;
		margin-bottom: 12px;
	}

	.recup-resume__tris {
		display: none; /* Sur mobile, le tri passe par le panneau déroulant. */
	}

	.recup-tri-mobile {
		display: block;
	}

	.recup-resume__liste {
		padding-top: 26px;
	}

	.recup-resume__ligne {
		grid-template-columns: 78px minmax(0, 1fr);
		gap: 14px;
		padding: 20px 18px;
	}

	.recup-resume__ruban {
		top: -12px;
		left: 16px;
		font-size: 10px;
		padding: 5px 11px;
	}

	.recup-resume__vignette img,
	.recup-resume__vignette--vide {
		border-radius: 10px;
	}

	.recup-resume__nom {
		font-size: 17px;
		line-height: 1.15;
	}

	.recup-resume__pros {
		font-size: 13px;
		gap: 7px;
	}

	.recup-resume__notes-bloc {
		grid-column: 1 / -1;
		flex-direction: row;
		align-items: flex-end;
		gap: 14px;
		border-top: 1px solid rgba(17, 17, 17, 0.1);
		padding-top: 14px;
		margin-top: 2px;
	}

	.recup-resume__note-nous .recup-score__note {
		font-size: 24px;
		padding: 9px 13px;
	}

	.recup-avis-note {
		font-size: 17px;
	}

	.recup-avis-note .recup-etoile {
		font-size: 14px;
	}

	/* Le CTA pleine largeur passe seul en première ligne ; la ligne
	   marchands et le lien analyse se partagent la seconde (sans le wrap,
	   la rangée héritée de la règle tablette les éjectait de la carte). */
	.recup-resume__achat {
		grid-column: 1 / -1;
		flex-flow: row wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: 9px;
	}

	/* La bulle s'étale sur toute la largeur de la carte : l'infobulle passe
	   en static pour que le panneau se positionne par rapport au bloc de
	   notes entier — centrée sur le badge, elle sortait de l'écran. */
	.recup-resume__notes-bloc {
		position: relative;
	}

	.recup-resume__notes-bloc .recup-infobulle {
		position: static;
	}

	.recup-resume__notes-bloc .recup-infobulle__panneau {
		left: 0;
		right: 0;
		width: auto;
	}

	.recup-resume__achat a.recup-cta-prix {
		width: 100%;
	}

	.recup-resume__achat .recup-cta-prix__montant {
		font-size: 22px;
	}

	.recup-resume__echelle {
		gap: 8px;
	}
}

/* ============================================================
   36. PALETTE DES NOTES — classes de palier
   Posées par le PHP (recup_core_classe_note) et le JS du
   formulaire d'avis selon la note : 6 paliers, p1 (moins de 5,
   rouge) à p6 (9 et plus, vert franc) — seuils 5/6/7/8/9,
   alignés sur les maquettes et la page méthodologie. Deux
   familles : .recup-note--pX pour les chiffres sur fond clair
   (usage texte), .recup-note-fond--pX pour les badges pleins et
   les barres (usage fond). Les largeurs de barres restent en
   style inline : donnée calculée, pas design.
   ⚠️ Ce chapitre doit RESTER LE DERNIER de la feuille : à
   spécificité égale, ces classes d'état doivent battre les
   couleurs par défaut des composants (.recup-lecteurs__note,
   .recup-score__note, .recup-barre__remplissage…).
   ============================================================ */

.recup-note--p1 {
	color: var(--note-p1-texte);
}

.recup-note--p2 {
	color: var(--note-p2-texte);
}

.recup-note--p3 {
	color: var(--note-p3-texte);
}

.recup-note--p4 {
	color: var(--note-p4-texte);
}

.recup-note--p5 {
	color: var(--note-p5-texte);
}

.recup-note--p6 {
	color: var(--note-p6-texte);
}

.recup-note-fond--p1 {
	background-color: var(--note-p1-fond);
}

.recup-note-fond--p2 {
	background-color: var(--note-p2-fond);
}

.recup-note-fond--p3 {
	background-color: var(--note-p3-fond);
}

.recup-note-fond--p4 {
	background-color: var(--note-p4-fond);
}

.recup-note-fond--p5 {
	background-color: var(--note-p5-fond);
}

.recup-note-fond--p6 {
	background-color: var(--note-p6-fond);
}

/* Les badges-boutons gardent leur couleur de palier dans TOUS les états :
   sans ces règles, les styles génériques des boutons (survol violet du
   chapitre 4, focus/active du thème parent) reprendraient la main. */

.recup-note-fond--p1:hover,
.recup-note-fond--p1:focus,
.recup-note-fond--p1:active {
	background-color: var(--note-p1-fond);
	color: var(--white);
}

.recup-note-fond--p2:hover,
.recup-note-fond--p2:focus,
.recup-note-fond--p2:active {
	background-color: var(--note-p2-fond);
	color: var(--white);
}

.recup-note-fond--p3:hover,
.recup-note-fond--p3:focus,
.recup-note-fond--p3:active {
	background-color: var(--note-p3-fond);
	color: var(--white);
}

.recup-note-fond--p4:hover,
.recup-note-fond--p4:focus,
.recup-note-fond--p4:active {
	background-color: var(--note-p4-fond);
	color: var(--white);
}

.recup-note-fond--p5:hover,
.recup-note-fond--p5:focus,
.recup-note-fond--p5:active {
	background-color: var(--note-p5-fond);
	color: var(--white);
}

.recup-note-fond--p6:hover,
.recup-note-fond--p6:focus,
.recup-note-fond--p6:active {
	background-color: var(--note-p6-fond);
	color: var(--white);
}

/* ============================================================
   37. ZONE GUIDE D'ACHAT (bas de page catégorie, maquette 2026)
   Bande crème : sommaire latéral collant + colonne de lecture.
   Encart de guides, cartes de confiance (auteur + méthode
   d'analyse), bande « Catégories liées ». Wordings : analyse
   comparative uniquement — jamais de vocabulaire de test.
   ============================================================ */

.recup-guide.recup-fiche__bande {
	border-top: 1px solid var(--bordure);
	padding: 48px;
}

.recup-guide__conteneur {
	max-width: 1120px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}

/* --- Sommaire latéral collant --- */

.recup-guide__sommaire {
	position: sticky;
	top: 20px;
}

.recup-guide__kicker {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--texte-meta);
	margin: 0 0 14px;
}

.recup-guide__sommaire nav {
	display: flex;
	flex-direction: column;
}

a.recup-guide__lien,
a.recup-guide__lien:visited {
	padding: 8px 0 8px 14px;
	border-left: 2px solid var(--bordure);
	font-size: 13.5px;
	color: var(--texte-doux);
	text-decoration: none;
}

a.recup-guide__lien:hover,
a.recup-guide__lien:focus,
a.recup-guide__lien:active {
	color: var(--ink);
	border-left-color: var(--olive);
}

a.recup-guide__lien:focus-visible {
	outline: 2px solid var(--olive-fonce);
	outline-offset: 2px;
}

a.recup-guide__lien.est-active,
a.recup-guide__lien.est-active:visited {
	border-left-color: var(--olive);
	color: var(--ink);
	font-weight: 600;
}

/* --- Colonne de lecture : titres et paragraphes du guide --- */

.recup-guide__contenu h2 {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 115%;
	font-size: 28px;
	line-height: 1.15;
	letter-spacing: normal;
	text-transform: uppercase;
	margin: 0 0 14px;
}

.recup-guide__contenu h2:not(:first-child) {
	margin-top: 34px;
}

.recup-guide__contenu > p {
	font-size: 15.5px;
	line-height: 1.8;
	margin: 0 0 18px;
}

/* --- Encart « Nos guides » (maillage interne) --- */

.recup-guides {
	background-color: var(--white);
	border: 1px solid var(--bordure);
	border-radius: var(--rayon-carte-large);
	padding: 22px 24px;
	margin-top: 34px;
}

h2.recup-guides__titre {
	font-size: 18px;
	margin: 0 0 16px;
}

.recup-guides__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 30px;
}

.recup-guides__liste li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0;
}

.recup-guides__liste svg {
	flex: none;
	margin-top: 3px;
	color: var(--olive);
}

a.recup-guides__lien,
a.recup-guides__lien:visited {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ink);
	text-decoration: none;
}

a.recup-guides__lien:hover,
a.recup-guides__lien:focus,
a.recup-guides__lien:active {
	color: var(--olive-fonce);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- Cartes de confiance : auteur + méthode d'analyse --- */

.recup-confiance__auteur,
.recup-confiance__methode {
	background-color: var(--white);
	border: 1px solid var(--bordure);
	border-radius: var(--rayon-carte-large);
	padding: 22px 24px;
	margin-top: 16px;
}

.recup-confiance__auteur {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}

.recup-confiance__auteur img,
.recup-confiance__initiale {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	flex: none;
}

.recup-confiance__initiale {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--sable);
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-size: 26px;
}

.recup-confiance__nom {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 112%;
	font-size: 16px;
	text-transform: uppercase;
	margin: 0;
}

.recup-confiance__role {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--olive);
	margin: 5px 0 0;
}

.recup-confiance__bio {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--texte-doux);
	margin: 9px 0 0;
}

/* Filet d'accent olive sur la carte méthode (maquette) */
.recup-confiance__methode {
	border-top: 3px solid var(--olive);
	border-radius: 3px 3px var(--rayon-carte-large) var(--rayon-carte-large);
}

h2.recup-confiance__titre {
	font-size: 17px;
	margin: 0 0 16px;
}

.recup-confiance__points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 26px;
}

.recup-confiance__points li {
	display: flex;
	gap: 10px;
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--texte-doux);
}

.recup-confiance__points strong {
	color: var(--ink);
}

.recup-confiance__points svg {
	flex: none;
	margin-top: 1px;
	color: var(--olive);
}

a.recup-confiance__lien,
a.recup-confiance__lien:visited {
	display: inline-block;
	margin-top: 16px;
	font-size: 12px;
	font-weight: 600;
	color: var(--olive);
	text-decoration: underline;
	text-underline-offset: 3px;
}

a.recup-confiance__lien:hover,
a.recup-confiance__lien:focus,
a.recup-confiance__lien:active {
	color: var(--olive-fonce);
}

/* --- Bande « Catégories liées » --- */

.recup-cats.recup-fiche__bande {
	border-top: 1px solid var(--bordure);
	padding: 48px;
}

.recup-cats__conteneur {
	max-width: 1120px;
	margin: 0 auto;
}

h2.recup-cats__titre {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 115%;
	font-size: 22px;
	letter-spacing: normal;
	text-transform: uppercase;
	margin: 0 0 18px;
}

.recup-cats__grille {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

a.recup-cats__carte,
a.recup-cats__carte:visited {
	display: flex;
	flex-direction: column;
	background-color: var(--cream);
	border-radius: 11px;
	overflow: hidden;
	text-decoration: none;
}

.recup-cats__visuel {
	display: block;
	aspect-ratio: 16 / 9;
	background-color: var(--sable);
}

.recup-cats__visuel img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.recup-cats__legende {
	display: block;
	padding: 13px 15px 15px;
}

.recup-cats__nom {
	display: block;
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 110%;
	font-size: 14px;
	text-transform: uppercase;
	color: var(--ink);
}

.recup-cats__nb {
	display: block;
	font-size: 11.5px;
	color: var(--texte-meta);
	margin-top: 5px;
}

a.recup-cats__carte:hover .recup-cats__nom,
a.recup-cats__carte:focus .recup-cats__nom,
a.recup-cats__carte:active .recup-cats__nom {
	color: var(--olive-fonce);
}

a.recup-cats__carte:focus-visible {
	outline: 2px solid var(--olive-fonce);
	outline-offset: 2px;
}

/* --- Responsive --- */

@media (max-width: 1023px) {
	/* Une colonne : le sommaire du guide disparaît (la maquette mobile ne
	   le montre pas), les ancres des H2 restent accessibles. Scopé au
	   conteneur du guide : l'article partage la classe pour hériter du
	   scrollspy, mais garde son accordéon mobile. */
	.recup-guide__conteneur {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.recup-guide__conteneur > .recup-guide__sommaire {
		display: none;
	}

	.recup-cats__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.recup-guide.recup-fiche__bande,
	.recup-cats.recup-fiche__bande {
		padding: 28px 16px;
	}

	.recup-guide__contenu h2 {
		font-size: 22px;
	}

	.recup-guides__liste,
	.recup-confiance__points {
		grid-template-columns: minmax(0, 1fr);
	}

	.recup-confiance__auteur {
		gap: 14px;
	}

	.recup-cats__grille {
		gap: 12px;
	}
}

/* ============================================================
   38. OUTIL COMPARATEUR (page /comparateur/, maquette 2026)
   Bande crème : en-tête, emplacements de sélection, sélecteur
   avec recherche et pilules de silo. Bande blanche : tableau
   croisé — produits en colonnes, meilleure valeur de chaque
   ligne mise en avant. Tout passe par l'URL.
   ============================================================ */

.recup-comparateur__haut.recup-fiche__bande {
	padding: 40px 48px 48px;
}

.recup-comparateur__conteneur {
	max-width: 1120px;
	margin: 0 auto;
}

.recup-comparateur__kicker {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--texte-meta);
	margin: 0 0 10px;
}

.recup-comparateur__titre {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 118%;
	font-size: clamp(26px, 3.4vw, 38px);
	line-height: 1.05;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	margin: 0;
}

.recup-comparateur__sous-titre {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--texte-doux);
	max-width: 640px;
	margin: 10px 0 0;
}

/* --- Emplacements de sélection --- */

.recup-comparateur__slots {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 26px;
}

.recup-comparateur__slot {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	background-color: var(--white);
	border: 1px solid var(--bordure);
	border-radius: var(--rayon-carte-large);
	padding: 14px 40px 14px 16px;
	min-height: 92px;
	box-sizing: border-box;
}

.recup-comparateur__slot-visuel {
	width: 64px;
	height: 64px;
	flex: none;
	border-radius: 9px;
	overflow: hidden;
	background-color: var(--white);
}

.recup-comparateur__slot-visuel img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background-color: var(--white);
}

.recup-comparateur__slot-corps {
	min-width: 0;
}

a.recup-comparateur__slot-nom,
a.recup-comparateur__slot-nom:visited {
	display: block;
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 110%;
	font-size: 13.5px;
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--ink);
	text-decoration: none;
	overflow-wrap: normal;
	word-break: normal;
}

a.recup-comparateur__slot-nom:hover,
a.recup-comparateur__slot-nom:focus,
a.recup-comparateur__slot-nom:active {
	color: var(--olive-fonce);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.recup-comparateur__slot-meta {
	margin: 4px 0 0;
	font-size: 12.5px;
	color: var(--texte-doux);
	font-variant-numeric: tabular-nums;
}

a.recup-comparateur__retirer,
a.recup-comparateur__retirer:visited {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--white);
	border: 1px solid var(--bordure);
	border-radius: 50%;
	color: var(--texte-doux);
}

a.recup-comparateur__retirer:hover,
a.recup-comparateur__retirer:focus,
a.recup-comparateur__retirer:active {
	border-color: var(--olive);
	color: var(--ink);
}

a.recup-comparateur__slot--vide,
a.recup-comparateur__slot--vide:visited {
	justify-content: center;
	background: none;
	border-style: dashed;
	border-color: rgba(17, 17, 17, 0.28);
	color: var(--texte-doux);
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 110%;
	font-size: 11px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none;
	gap: 9px;
	padding: 14px 16px;
}

a.recup-comparateur__slot--vide:hover,
a.recup-comparateur__slot--vide:focus,
a.recup-comparateur__slot--vide:active {
	border-color: var(--olive);
	color: var(--olive-fonce);
}

.recup-comparateur__plein {
	margin: 22px 0 0;
	font-size: 13px;
	color: var(--texte-doux);
}

/* --- Sélecteur de produits --- */

.recup-comparateur__choisir {
	background-color: var(--white);
	border: 1px solid var(--bordure);
	border-radius: var(--rayon-carte-large);
	padding: 20px 22px;
	margin-top: 26px;
}

h2.recup-comparateur__choisir-titre {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 112%;
	font-size: 16px;
	letter-spacing: normal;
	text-transform: uppercase;
	margin: 0 0 14px;
}

.recup-comparateur__recherche {
	position: relative;
	margin: 0 0 12px;
}

.recup-comparateur__recherche svg {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--texte-meta);
	pointer-events: none;
}

input.recup-comparateur__champ {
	width: 100%;
	box-sizing: border-box;
	background-color: var(--cream);
	border: 1px solid rgba(17, 17, 17, 0.14);
	border-radius: 10px;
	padding: 12px 14px 12px 40px;
	font-size: 14px;
	color: var(--ink);
}

input.recup-comparateur__champ:focus-visible {
	outline: 2px solid var(--olive);
	outline-offset: 1px;
	border-color: var(--olive);
}

.recup-comparateur__pilules {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0 0 6px;
}

.recup-comparateur__pilules[hidden] {
	display: none; /* Posées cachées par le serveur : inertes sans JavaScript. */
}

.recup-comparateur__pilule {
	background-color: var(--white);
	border: 1px solid rgba(17, 17, 17, 0.2);
	border-radius: 999px;
	padding: 7px 13px;
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 110%;
	font-size: 10.5px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ink);
	cursor: pointer;
}

.recup-comparateur__pilule:hover,
.recup-comparateur__pilule:focus {
	background-color: var(--vert-pale);
	color: var(--ink);
}

.recup-comparateur__pilule:focus-visible {
	outline: 2px solid var(--olive-fonce);
	outline-offset: 2px;
}

.recup-comparateur__pilule.est-active,
.recup-comparateur__pilule.est-active:hover,
.recup-comparateur__pilule.est-active:focus {
	background-color: var(--olive);
	border-color: var(--olive);
	color: var(--white);
}

.recup-comparateur__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 340px;
	overflow-y: auto;
}

.recup-comparateur__liste li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 6px;
	border-top: 1px solid var(--bordure);
	margin: 0;
}

.recup-comparateur__liste li:first-child {
	border-top: 0;
}

.recup-comparateur__liste-visuel {
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 8px;
	overflow: hidden;
	background-color: var(--white);
}

.recup-comparateur__liste-visuel img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background-color: var(--white);
}

.recup-comparateur__liste-produit {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.recup-comparateur__liste-produit strong {
	font-size: 13.5px;
}

.recup-comparateur__liste-produit span {
	font-size: 11.5px;
	color: var(--texte-meta);
	margin-top: 2px;
}

.recup-comparateur__liste-meta {
	flex: none;
	font-size: 12px;
	color: var(--texte-doux);
	font-variant-numeric: tabular-nums;
}

.recup-comparateur__aucun {
	margin: 12px 0 0;
	font-size: 13px;
	color: var(--texte-doux);
}

/* --- Tableau croisé --- */

.recup-comparateur__resultat.recup-fiche__bande {
	padding: 40px 48px 48px;
}

.recup-comparateur__defile {
	overflow-x: auto;
}

.recup-comparateur__table {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	font-size: 13.5px;
	font-variant-numeric: tabular-nums;
}

.recup-comparateur__table th,
.recup-comparateur__table td {
	text-align: left;
	vertical-align: middle;
	padding: 12px 16px;
	border-bottom: 1px solid var(--bordure);
	background-color: var(--white);
}

/* Colonne des libellés figée au défilement horizontal (mobile) */
.recup-comparateur__table th[scope="row"],
.recup-comparateur__coin {
	position: sticky;
	left: 0;
	z-index: 1;
	min-width: 150px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--texte-doux);
}

.recup-comparateur__table thead th {
	vertical-align: bottom;
	border-bottom: 2px solid var(--ink);
}

.recup-comparateur__colonne-visuel {
	display: block;
	width: 74px;
	height: 74px;
	border-radius: 10px;
	overflow: hidden;
	background-color: var(--white);
	margin-bottom: 9px;
}

.recup-comparateur__colonne-visuel img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background-color: var(--white);
}

a.recup-comparateur__colonne-nom,
a.recup-comparateur__colonne-nom:visited {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 110%;
	font-size: 14px;
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--ink);
	text-decoration: none;
	overflow-wrap: normal;
	word-break: normal;
}

a.recup-comparateur__colonne-nom:hover,
a.recup-comparateur__colonne-nom:focus,
a.recup-comparateur__colonne-nom:active {
	color: var(--olive-fonce);
	text-decoration: underline;
	text-underline-offset: 3px;
}

tr.recup-comparateur__section th {
	background-color: var(--ink);
	color: var(--cream);
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 112%;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 9px 16px;
	border-bottom: 0;
}

.recup-comparateur__table td.est-meilleure {
	background-color: var(--vert-pale);
}

.recup-comparateur__critere {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 130px;
}

.recup-comparateur__critere .recup-infobulle__piste {
	flex: 1;
}

.recup-comparateur__lecteurs {
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.recup-comparateur__lecteurs strong {
	color: var(--etoile);
	font-weight: 800;
}

.recup-comparateur__lecteurs .recup-etoile {
	color: var(--etoile);
	font-size: 11px;
}

.recup-comparateur__lecteurs a,
.recup-comparateur__lecteurs a:visited {
	font-size: 11.5px;
	color: var(--texte-meta);
	text-decoration: none;
	border-bottom: 1px dotted var(--texte-meta);
}

.recup-comparateur__lecteurs a:hover,
.recup-comparateur__lecteurs a:focus,
.recup-comparateur__lecteurs a:active {
	color: var(--ink);
	border-bottom-color: var(--ink);
}

.recup-comparateur__prix {
	display: block;
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-size: 18px;
}

.recup-comparateur__marchands {
	display: block;
	font-size: 11.5px;
	color: var(--texte-meta);
	margin-top: 2px;
}

tr.recup-comparateur__achats td {
	vertical-align: top;
}

tr.recup-comparateur__achats .recup-cta-simple {
	display: block;
	text-align: center;
}

a.recup-comparateur__analyse,
a.recup-comparateur__analyse:visited {
	display: block;
	margin-top: 9px;
	text-align: center;
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 110%;
	font-size: 10.5px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--olive);
	text-decoration: none;
}

a.recup-comparateur__analyse:hover,
a.recup-comparateur__analyse:focus,
a.recup-comparateur__analyse:active {
	color: var(--olive-fonce);
}

.recup-comparateur__transparence {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background-color: var(--gris-doux);
	border: 1px solid var(--bordure);
	border-radius: var(--rayon-bouton);
	padding: 11px 16px;
	margin: 20px 0 0;
	font-size: 11.5px;
	line-height: 1.55;
	color: var(--texte-meta);
}

.recup-comparateur__transparence svg {
	flex: none;
	margin-top: 2px;
}

/* Le CTA comparateur de la fiche produit est devenu un lien */
a.recup-comparer-cta {
	text-decoration: none;
}

/* --- Responsive --- */

@media (max-width: 1023px) {
	.recup-comparateur__slots {
		grid-template-columns: minmax(0, 1fr);
	}

	.recup-comparateur__slot--vide {
		min-height: 64px;
	}
}

@media (max-width: 767px) {
	.recup-comparateur__haut.recup-fiche__bande,
	.recup-comparateur__resultat.recup-fiche__bande {
		padding: 24px 16px 32px;
	}

	.recup-comparateur__titre {
		font-size: 24px;
	}

	.recup-comparateur__choisir {
		padding: 16px;
	}

	/* Lignes du sélecteur : en flex, la colonne du nom était écrasée par la
	   méta et le bouton (lettres empilées verticalement). Grille à zones :
	   nom en pleine largeur, méta et « Ajouter » sur la ligne du dessous. */
	.recup-comparateur__liste li {
		display: grid;
		grid-template-columns: 44px minmax(0, 1fr) auto;
		grid-template-areas:
			"visuel produit produit"
			"visuel meta ajouter";
		gap: 4px 12px;
		align-items: center;
	}

	.recup-comparateur__liste-visuel {
		grid-area: visuel;
	}

	.recup-comparateur__liste-produit {
		grid-area: produit;
	}

	.recup-comparateur__liste-meta {
		grid-area: meta;
		font-size: 11.5px;
	}

	.recup-comparateur__liste li .recup-cta-simple {
		grid-area: ajouter;
	}

	.recup-comparateur__table {
		font-size: 13px;
	}

	.recup-comparateur__table th,
	.recup-comparateur__table td {
		padding: 10px 12px;
	}

	.recup-comparateur__table th[scope="row"],
	.recup-comparateur__coin {
		min-width: 108px;
	}

	.recup-comparateur__colonne-visuel {
		width: 56px;
		height: 56px;
	}
}

/* ============================================================
   39. ARTICLE (maquette « Article » 2026)
   Hero crème (kicker, H1, chapeau, carte méta, couverture),
   corps blanc à rail collant (sommaire auto + affiliation) et
   colonne de lecture 700 px, pied crème (navigation entre
   articles, « À lire ensuite », carte auteur). Les encarts du
   flux (avertissement, verdict, à lire aussi) vivent ici aussi.
   ============================================================ */

.recup-article__hero.recup-fiche__bande {
	padding: 24px 48px 30px;
}

/* Fil réduit sur l'article (QC du 13/08/2026 : l'en-tête prenait trop de
   place) — scopé pour ne pas toucher le fil des autres gabarits. */
.recup-article__hero .recup-fil {
	font-size: 10px;
}

.recup-article__kicker {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--olive);
	margin: 10px 0 0;
}

.recup-article__titre {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 118%;
	font-size: clamp(28px, 3.4vw, 44px);
	line-height: 1.04;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	max-width: 900px;
	margin: 12px 0 0;
}

/* Signature compacte sous le H1 (référence casino.org, QC du 13/08/2026) :
   une ligne discrète — la carte auteur complète vit en pied de page. */
.recup-article__signature {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 14px 0 0;
	font-size: 13px;
	color: var(--texte-doux);
}

/* Le nom de l'auteur mène à sa page profil, sans l'habit d'un lien :
   soulignement seulement au survol. */
.recup-article__signature-lien {
	color: inherit;
	text-decoration: none;
}

.recup-article__signature-lien:hover,
.recup-article__signature-lien:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.recup-article__signature img {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	flex: none;
}

.recup-article__signature strong {
	color: var(--ink);
}

.recup-article__chapeau {
	font-style: italic;
	font-size: 17px;
	line-height: 1.55;
	color: var(--texte-doux);
	max-width: 760px;
	margin: 14px 0 0;
}

.recup-article__couverture {
	margin: 28px 0 0;
}

.recup-article__couverture img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	border-radius: 12px;
	background-color: var(--sable);
}

.recup-article__couverture figcaption {
	font-size: 12px;
	font-style: italic;
	color: var(--texte-meta);
	margin-top: 10px;
}

/* --- Corps : rail + colonne de lecture --- */

.recup-article__corps.recup-fiche__bande {
	padding: 48px 48px 60px;
}

/* Colonne de lecture élargie à 760 px et grille étirée dans le conteneur
   1180 (QC du 13/08/2026 : la page laissait trop de vide à droite). */
.recup-article__grille {
	display: grid;
	grid-template-columns: 260px minmax(0, 760px);
	gap: 90px;
	align-items: start;
}

.recup-article__rail {
	position: sticky;
	top: 24px;
}

/* Le sommaire est un details : ouvert en permanence sur desktop (summary
   masqué), accordéon sur mobile. Les liens héritent du sommaire du guide. */
.recup-article__toc-bouton {
	display: none;
	list-style: none;
}

.recup-article__toc-bouton::-webkit-details-marker {
	display: none;
}

.recup-article__affiliation {
	border-top: 1px solid var(--bordure);
	margin: 18px 0 0;
	padding-top: 16px;
	font-size: 11.5px;
	line-height: 1.6;
	color: var(--texte-meta);
}

/* Colonne de lecture : rythme éditorial de la maquette */
.recup-article__lecture {
	font-size: 16px;
	line-height: 1.8;
	color: var(--ink);
}

.recup-article__lecture > p {
	margin: 0 0 18px;
}

.recup-article__lecture h2 {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 115%;
	font-size: 28px;
	line-height: 1.15;
	letter-spacing: normal;
	text-transform: uppercase;
	margin: 36px 0 16px;
}

.recup-article__lecture > h2:first-child {
	margin-top: 0;
}

.recup-article__lecture ul,
.recup-article__lecture ol {
	padding-left: 22px;
	margin: 0 0 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.recup-article__lecture blockquote {
	margin: 32px 0;
	padding: 0 0 0 22px;
}

.recup-article__lecture blockquote p {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 112%;
	font-size: 22px;
	line-height: 1.35;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0;
}

.recup-article__lecture blockquote cite {
	display: block;
	font-family: var(--police-texte);
	font-style: normal;
	font-weight: 400;
	font-size: 12.5px;
	text-transform: none;
	color: var(--texte-meta);
	margin-top: 10px;
}

/* --- Encart avertissement santé --- */

.recup-avertissement {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	background-color: var(--terracotta-pale, #F7EAE3);
	border-left: 3px solid var(--terracotta, #B5673B);
	border-radius: 0 10px 10px 0;
	padding: 16px 20px;
	margin: 32px 0;
}

.recup-avertissement svg {
	flex: none;
	color: var(--terracotta, #B5673B);
	margin-top: 3px;
}

.recup-avertissement__titre {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 112%;
	font-size: 14px;
	text-transform: uppercase;
	color: var(--terracotta, #B5673B);
	margin: 0 0 8px;
}

.recup-avertissement__texte {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--terracotta-texte, #5c4a3f);
	margin: 0;
}

/* --- Encart « À lire aussi » --- */

.recup-lire-aussi {
	background-color: var(--cream);
	border-left: 3px solid var(--olive);
	border-radius: 0 10px 10px 0;
	padding: 16px 20px;
	margin: 32px 0;
}

.recup-lire-aussi__titre {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--olive);
	margin: 0 0 11px;
}

.recup-lire-aussi__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.recup-lire-aussi__liste li {
	display: flex;
	align-items: baseline;
	gap: 9px;
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
}

.recup-lire-aussi__liste svg {
	flex: none;
	color: var(--olive);
	align-self: center;
}

.recup-lire-aussi__liste a,
.recup-lire-aussi__liste a:visited {
	color: var(--ink);
	text-decoration: none;
}

.recup-lire-aussi__liste a:hover,
.recup-lire-aussi__liste a:focus,
.recup-lire-aussi__liste a:active {
	color: var(--olive-fonce);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- Bloc « Notre verdict » --- */

.recup-verdict {
	background-color: var(--white);
	border: 1px solid var(--bordure);
	border-top: 3px solid var(--olive);
	border-radius: 3px 3px 12px 12px;
	padding: 28px 30px;
	margin: 44px 0 0;
}

.recup-verdict__titre {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 118%;
	font-size: 24px;
	letter-spacing: normal;
	text-transform: uppercase;
	margin: 0 0 14px;
}

.recup-verdict__texte {
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--texte-doux);
}

.recup-verdict__texte p {
	margin: 0 0 14px;
}

.recup-verdict__texte p:last-child {
	margin-bottom: 0;
}

.recup-verdict__produits {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 24px;
}

.recup-verdict__produit {
	display: flex;
	align-items: center;
	gap: 14px;
	background-color: var(--cream);
	border-radius: 11px;
	padding: 16px 18px;
}

.recup-verdict__visuel {
	width: 64px;
	height: 64px;
	flex: none;
	border-radius: 9px;
	overflow: hidden;
	background-color: var(--white);
}

.recup-verdict__visuel img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background-color: var(--white);
}

.recup-verdict__corps {
	min-width: 0;
}

.recup-verdict__etiquette {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--olive);
	margin: 0 0 5px;
}

a.recup-verdict__nom,
a.recup-verdict__nom:visited {
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--ink);
	text-decoration: none;
}

a.recup-verdict__nom:hover,
a.recup-verdict__nom:focus,
a.recup-verdict__nom:active {
	color: var(--olive-fonce);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.recup-verdict__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 8px 0 0;
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-size: 15px;
	font-variant-numeric: tabular-nums;
}

.recup-verdict__produit .recup-cta-simple {
	margin-top: 10px;
}

/* --- Pied d'article : navigation, à lire ensuite, auteur --- */

.recup-article__pied.recup-fiche__bande {
	padding: 40px 48px 52px;
}

.recup-article__pied-conteneur {
	max-width: 1030px;
}

.recup-article__adjacents {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

a.recup-article__adjacent,
a.recup-article__adjacent:visited {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background-color: var(--white);
	border: 1px solid var(--bordure);
	border-radius: 11px;
	padding: 16px 18px;
	color: var(--ink);
	text-decoration: none;
}

a.recup-article__adjacent:hover,
a.recup-article__adjacent:focus,
a.recup-article__adjacent:active {
	border-color: var(--olive);
	color: var(--ink);
}

.recup-article__adjacent svg {
	flex: none;
	color: var(--olive);
	margin-top: 3px;
}

.recup-article__adjacent--suivant {
	text-align: right;
}

.recup-article__adjacent--suivant span {
	flex: 1;
}

.recup-article__adjacent em {
	display: block;
	font-style: normal;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--texte-meta);
	margin-bottom: 6px;
}

.recup-article__adjacent strong {
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.35;
}

/* À lire ensuite */
.recup-article__ensuite {
	margin-top: 40px;
}

.recup-article__ensuite-titre {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 115%;
	font-size: 19px;
	letter-spacing: normal;
	text-transform: uppercase;
	margin: 0 0 16px;
}

.recup-article__ensuite-grille {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

a.recup-carte-article,
a.recup-carte-article:visited {
	display: flex;
	flex-direction: column;
	gap: 9px;
	color: var(--ink);
	text-decoration: none;
}

.recup-carte-article__visuel {
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: 9px;
	overflow: hidden;
	background-color: var(--sable);
}

.recup-carte-article__visuel img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.recup-carte-article__kicker {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--olive);
}

.recup-carte-article__titre {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
}

a.recup-carte-article:hover .recup-carte-article__titre,
a.recup-carte-article:focus .recup-carte-article__titre,
a.recup-carte-article:active .recup-carte-article__titre {
	color: var(--olive-fonce);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.recup-carte-article__duree {
	font-size: 11.5px;
	color: var(--texte-meta);
}

/* Carte auteur */
.recup-article__auteur {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	background-color: var(--white);
	border: 1px solid var(--bordure);
	border-radius: 12px;
	padding: 22px 24px;
	margin-top: 40px;
}

.recup-article__auteur img {
	width: 76px;
	height: 76px;
	border-radius: 50%;
	flex: none;
}

.recup-article__auteur-nom {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 112%;
	font-size: 17px;
	text-transform: uppercase;
	margin: 0;
}

.recup-article__auteur-role {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--olive);
	margin: 5px 0 0;
}

.recup-article__auteur-bio {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--texte-doux);
	margin: 10px 0 0;
}

.recup-article__auteur-liens {
	margin: 14px 0 0;
	font-size: 12px;
}

.recup-article__auteur-liens a,
.recup-article__auteur-liens a:visited {
	color: var(--olive);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.recup-article__auteur-liens a:hover,
.recup-article__auteur-liens a:focus,
.recup-article__auteur-liens a:active {
	color: var(--olive-fonce);
}

/* --- Responsive --- */

@media (max-width: 1023px) {
	.recup-article__grille {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	/* Le rail devient un accordéon en tête d'article (maquette mobile). */
	.recup-article__rail {
		position: static;
	}

	.recup-article__toc {
		background-color: var(--cream);
		border-radius: 11px;
		padding: 13px 15px;
	}

	.recup-article__toc-bouton {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		font-family: var(--police-titres);
		font-style: italic;
		font-weight: 800;
		font-stretch: 112%;
		font-size: 13px;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		cursor: pointer;
	}

	.recup-article__toc-bouton svg {
		color: var(--olive);
		transition: transform 0.15s ease;
	}

	.recup-article__toc[open] .recup-article__toc-bouton svg {
		transform: rotate(180deg);
	}

	.recup-article__toc-titre {
		display: none; /* Le summary joue le rôle de titre en mobile. */
	}

	.recup-article__toc[open] nav {
		margin-top: 12px;
		border-top: 1px solid var(--bordure);
		padding-top: 6px;
	}

	.recup-article__affiliation {
		display: none; /* La mention vit dans le footer sur mobile (maquette). */
	}

	.recup-article__adjacents,
	.recup-verdict__produits {
		grid-template-columns: minmax(0, 1fr);
	}

	.recup-article__ensuite-grille {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 767px) {
	/* Premier écran façon casino.org (QC du 13/08/2026) : fil d'Ariane et
	   kicker masqués (le fil reste dans le schema, comme sur les pages
	   money), H1 collé au header, signature en petit, puis le chapeau. */
	.recup-article__hero.recup-fiche__bande {
		padding: 16px 16px 20px;
	}

	.recup-article__hero .recup-fil,
	.recup-article__kicker {
		display: none;
	}

	.recup-article__titre {
		margin-top: 0;
	}

	.recup-article__signature {
		font-size: 12px;
		gap: 7px;
		margin-top: 10px;
	}

	.recup-article__signature img {
		width: 22px;
		height: 22px;
	}

	.recup-article__chapeau {
		font-size: 15px;
		margin-top: 12px;
	}

	.recup-article__couverture img {
		/* 16:9 natif des couvertures : un ratio plus haut rognerait les
		   côtés, donc le titre incrusté des visuels type miniature. */
		aspect-ratio: 16 / 9;
		border-radius: 11px;
	}

	.recup-article__corps.recup-fiche__bande {
		padding: 20px 16px 36px;
	}

	.recup-article__lecture {
		font-size: 15.5px;
		line-height: 1.75;
	}

	.recup-article__lecture h2 {
		font-size: 22px;
		font-stretch: 112%;
		margin: 30px 0 14px;
	}

	.recup-article__lecture blockquote p {
		font-size: 18px;
		font-stretch: 110%;
	}

	.recup-avertissement,
	.recup-lire-aussi {
		padding: 14px 16px;
		margin: 26px 0;
	}

	.recup-verdict {
		padding: 20px;
		margin-top: 32px;
	}

	.recup-verdict__titre {
		font-size: 20px;
	}

	.recup-article__pied.recup-fiche__bande {
		padding: 28px 16px 36px;
	}

	.recup-article__auteur {
		gap: 14px;
		padding: 18px 20px;
		margin-top: 28px;
	}

	.recup-article__auteur img {
		width: 58px;
		height: 58px;
	}
}


/* ==========================================================================
   40. HUB DE SILO (maquette « Hub silo » 2026)
   La page d'univers : hero crème à chiffres réels, familles « Par où
   commencer » sur bande blanche, produits phares sur bande crème
   (carrousel en mobile), puis comparatifs + guides sur bande blanche.
   La zone éditoriale réutilise le guide d'achat (ch. 37) tel quel.
   ========================================================================== */

/* --- Conteneur et entêtes de section partagés --- */

.recup-hub__conteneur {
	max-width: 1180px;
	margin: 0 auto;
}

.recup-hub__entete-section {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 26px;
}

.recup-hub__titre-section {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 118%;
	font-size: 30px;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0;
}

.recup-hub__note-section {
	font-size: 13px;
	color: var(--texte-doux);
}

/* --- Hero : fil, H1, chapeau, chiffres --- */

.recup-hub__hero {
	background: var(--cream);
	padding: 30px 48px 40px;
}

.recup-hub__hero .recup-fil {
	margin-bottom: 20px;
}

.recup-hub__titre {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 118%;
	font-size: 52px;
	line-height: 1.03;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0;
}

.recup-hub__chapeau {
	font-size: 16.5px;
	line-height: 1.75;
	color: var(--texte-doux);
	max-width: 760px;
	margin: 18px 0 0;
}

.recup-hub__stats {
	display: flex;
	margin: 28px 0 0;
	background: var(--ink);
	color: var(--cream);
	border-radius: 12px;
	overflow: hidden;
}

/* dt (libellé) avant dd (valeur) dans le DOM — l'ordre visuel est inversé :
   le chiffre coiffe sa légende comme sur la maquette. */
.recup-hub__stat {
	flex: 1;
	display: flex;
	flex-direction: column-reverse;
	padding: 20px 26px;
	margin: 0;
}

.recup-hub__stat + .recup-hub__stat {
	border-left: 1px solid var(--filet-sur-sombre);
}

.recup-hub__stat dd {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-size: 28px;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	margin: 0;
}

.recup-hub__stat dt {
	font-size: 11.5px;
	color: var(--texte-sur-sombre);
	margin-top: 4px;
}

/* --- Familles : « Par où commencer » --- */

.recup-hub__familles {
	background: var(--white);
	padding: 56px 48px;
}

.recup-familles__grille {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

a.recup-familles__carte {
	background: var(--white);
	border: 1px solid var(--bordure);
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

a.recup-familles__carte:hover,
a.recup-familles__carte:focus,
a.recup-familles__carte:active {
	border-color: var(--olive);
	color: inherit;
}

a.recup-familles__carte:hover .recup-familles__nom,
a.recup-familles__carte:focus .recup-familles__nom,
a.recup-familles__carte:active .recup-familles__nom {
	color: var(--olive-fonce);
}

a.recup-familles__carte:focus-visible,
a.recup-familles__quiz:focus-visible {
	outline: 2px solid var(--olive-fonce);
	outline-offset: 2px;
}

.recup-familles__visuel {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--sable);
}

.recup-familles__visuel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.recup-familles__corps {
	padding: 18px 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 9px;
	flex: 1;
}

.recup-familles__nom {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 112%;
	font-size: 17px;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--ink);
}

.recup-familles__texte {
	font-size: 13px;
	line-height: 1.55;
	color: var(--texte-doux);
}

.recup-familles__pied {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--bordure);
	color: var(--olive-fonce);
}

/* --texte-doux et non --texte-meta : à cette taille, la méta porte de
   l'information réelle (compteur, fourchette de prix) et doit tenir le
   contraste AA (le jeton méta est sous le seuil sur fond clair). */
.recup-familles__meta {
	font-size: 12px;
	color: var(--texte-doux);
	font-variant-numeric: tabular-nums;
}

/* La carte quiz : fond vert pâle, bordure olive claire, CTA compact. */
a.recup-familles__quiz {
	background: var(--vert-pale);
	border: 1px solid var(--olive-clair);
	border-radius: 12px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	color: var(--olive-fonce);
	text-decoration: none;
}

a.recup-familles__quiz:hover,
a.recup-familles__quiz:focus,
a.recup-familles__quiz:active {
	border-color: var(--olive);
	color: var(--olive-fonce);
}

a.recup-familles__quiz .recup-familles__texte {
	color: var(--texte-doux);
}

.recup-familles__bouton {
	align-self: flex-start;
	margin-top: 4px;
}

/* Le bouton visuel de la carte quiz suit les états du lien parent. */
a.recup-familles__quiz:hover .recup-familles__bouton,
a.recup-familles__quiz:focus .recup-familles__bouton,
a.recup-familles__quiz:active .recup-familles__bouton {
	background-color: var(--olive-fonce);
}

/* --- Produits phares --- */

.recup-phares {
	background: var(--cream);
	padding: 52px 48px;
}

a.recup-phares__tout {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 110%;
	font-size: 12px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--olive-fonce);
	text-decoration: none;
	border-bottom: 1.5px solid var(--olive-fonce);
	padding-bottom: 3px;
	white-space: nowrap;
}

a.recup-phares__tout:hover,
a.recup-phares__tout:focus,
a.recup-phares__tout:active {
	color: var(--ink);
	border-bottom-color: var(--ink);
}

a.recup-phares__tout:focus-visible {
	outline: 2px solid var(--olive-fonce);
	outline-offset: 2px;
}

.recup-phares__grille {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

/* position: relative : la pastille de note, sortie du lien visuel
   aria-hidden pour rester audible aux lecteurs d'écran, se positionne
   par rapport à la carte. */
.recup-phares__carte {
	position: relative;
	background: var(--white);
	/* Filet plus soutenu que var(--bordure) : la carte est entièrement
	   blanche depuis le passage des packshots sur fond blanc (22/08/2026),
	   seul ce trait la détache encore du fond. */
	border: 1px solid rgba(17, 17, 17, 0.18);
	border-radius: 12px;
	/* visible et non hidden : la bulle « Détail de notre note » doit pouvoir
	   déborder de la carte (l'arrondi du visuel est repris par le visuel). */
	overflow: visible;
	display: flex;
	flex-direction: column;
	box-shadow: 0 1px 2px rgba(17, 17, 17, 0.05), 0 12px 26px -18px rgba(17, 17, 17, 0.22);
}

/* La carte dont la bulle est ouverte passe au-dessus de ses voisines. */
.recup-phares__carte:has(.recup-infobulle--ouverte) {
	z-index: 6;
}

/* Sélecteur sans balise : le bloc rend un <span> de repli quand le
   produit n'a pas d'image (jamais d'ancre vide dans le DOM). */
.recup-phares__visuel {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	/* Blanc : les packshots sont normalisés sur fond blanc pur depuis le
	   22/08/2026, le cadre crème dessinait un rectangle beige autour d'eux. */
	background: var(--white);
	/* La carte est passée en overflow visible pour laisser sortir la bulle
	   de note : le visuel reprend l'arrondi haut et le rognage du zoom. */
	border-radius: 11px 11px 0 0;
	overflow: hidden;
}

/* L'image en absolu : posée dans le flux, une photo portrait étirait le
   conteneur au-delà du 4/3 et désalignait les cartes (QC du 14/08/2026). */
a.recup-phares__visuel img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 14px;
	display: block;
	transition: transform 0.18s ease;
}

/* Retour visuel au survol : léger zoom, jamais d'opacité — sur fond
   blanc, baisser l'opacité délavait le produit (QC du 24/08/2026).
   (Lien doublon hors tabulation : le focus clavier vit sur le nom.) */
a.recup-phares__visuel:hover img,
a.recup-phares__visuel:active img {
	transform: scale(1.04);
}

/* Simple positionneur depuis le 24/08/2026 : la pastille elle-même est le
   déclencheur de l'infobulle (recup_core_infobulle_note), qui apporte son
   propre habillage. */
.recup-phares__note {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
}

/* Couvre le déclencheur ET la pastille simple (produit sans notes par
   critère : recup_core_infobulle_note rend un span sans bouton). */
.recup-phares__note .recup-score__note {
	font-size: 14px;
	padding: 6px 10px;
	border-radius: 9px;
}

.recup-phares__note small {
	font-size: 9.5px;
	opacity: 0.85;
	font-weight: 700;
}

/* La bulle s'aligne sur le bord droit de la carte (à gauche, elle
   sortirait de l'écran : le déclencheur vit dans le coin droit). */
.recup-phares__note .recup-infobulle__panneau {
	left: auto;
	right: 0;
}

/* Mobile : les cartes du carrousel font ~200 px, la bulle ancrée au coin
   sortait de l'écran et le défilement horizontal la rognait. Elle s'ouvre
   en superposition centrée, au-dessus de tout. */
@media (max-width: 767px) {
	.recup-phares__note .recup-infobulle__panneau {
		position: fixed;
		top: 50%;
		left: 50%;
		right: auto;
		transform: translate(-50%, -50%);
		width: min(320px, calc(100vw - 32px));
		z-index: 80;
		box-shadow: 0 18px 50px -12px rgba(17, 17, 17, 0.35);
	}
}

.recup-phares__corps {
	padding: 15px 16px 17px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.recup-phares__kicker {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--olive-fonce);
}

a.recup-phares__nom {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 110%;
	font-size: 15px;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--ink);
	text-decoration: none;
}

a.recup-phares__nom:hover,
a.recup-phares__nom:focus,
a.recup-phares__nom:active {
	color: var(--olive-fonce);
}

a.recup-phares__nom:focus-visible {
	outline: 2px solid var(--olive-fonce);
	outline-offset: 2px;
}

.recup-phares__pied {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 8px;
}

/* Pilule sur une seule ligne : la carte est étroite, le libellé ne
   doit pas se replier (« VOIR / LE / PRIX »). */
.recup-phares__pied .recup-cta-simple {
	white-space: nowrap;
	padding-left: 14px;
	padding-right: 14px;
}

.recup-phares__prix {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-size: 16px;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
}

/* Produit suivi sans prix affichable : le créneau prix reste occupé pour
   que toutes les cartes gardent le même squelette. */
.recup-phares__prix--libre {
	font-family: inherit;
	font-style: normal;
	font-weight: 600;
	font-size: 12px;
	color: var(--texte-meta);
}

/* --- Comparatifs et guides --- */

.recup-ressources {
	background: var(--white);
	padding: 52px 48px;
}

.recup-ressources__grille {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 48px;
	align-items: start;
}

.recup-ressources .recup-hub__titre-section {
	margin-bottom: 20px;
}

/* Familles de produits : cartes image + texte, entrée principale du silo
   (retour du 19/08/2026 — la liste en lignes ne se voyait pas assez). */
.recup-ressources__categories {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
	gap: 14px;
}

a.recup-ressources__categorie {
	/* relative : le chevron est posé en absolu ; sans ancre, il se calait sur
	   un ancêtre lointain et flottait dans la section du dessus, en doublon
	   visuel du chevron de la carte univers (constat mobile du 21/08/2026). */
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--white);
	border: 1px solid var(--bordure);
	border-radius: var(--rayon-carte-large);
	overflow: hidden;
	color: var(--olive-fonce);
	text-decoration: none;
	transition: border-color 0.18s ease, transform 0.18s ease;
}

a.recup-ressources__categorie:hover,
a.recup-ressources__categorie:focus {
	border-color: var(--olive);
	transform: translateY(-2px);
}

a.recup-ressources__categorie:focus-visible,
a.recup-ressources__carte:focus-visible {
	outline: 2px solid var(--olive-fonce);
	outline-offset: 2px;
}

/* Le chevron vit dans la légende, aligné à droite du texte. */
a.recup-ressources__categorie > svg {
	position: absolute;
	right: 14px;
	bottom: 16px;
	color: var(--olive-fonce);
}

.recup-ressources__visuel {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--vert-pale);
	overflow: hidden;
}

.recup-ressources__visuel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Sans image, un aplat de la charte plutôt qu'un trou blanc. */
.recup-ressources__visuel-vide {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(140deg, var(--vert-pale), var(--sable));
}

.recup-ressources__legende {
	position: relative;
	flex: 1;
	min-width: 0;
	padding: 14px 40px 16px 16px;
}

.recup-ressources__nom {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink);
}

.recup-ressources__meta {
	display: block;
	font-size: 11.5px;
	color: var(--texte-doux); /* contraste AA : la méta est une vraie info. */
	margin-top: 4px;
}

.recup-ressources__cartes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

a.recup-ressources__carte {
	background: var(--cream);
	border: 1px solid transparent;
	border-radius: 11px;
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: inherit;
	text-decoration: none;
}

a.recup-ressources__carte:hover,
a.recup-ressources__carte:focus,
a.recup-ressources__carte:active {
	border-color: var(--olive);
	color: inherit;
}

a.recup-ressources__carte:hover .recup-ressources__titre-guide,
a.recup-ressources__carte:focus .recup-ressources__titre-guide,
a.recup-ressources__carte:active .recup-ressources__titre-guide {
	color: var(--olive-fonce);
}

.recup-ressources__etiquette {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--olive-fonce);
}

.recup-ressources__titre-guide {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ink);
}

.recup-ressources__duree {
	font-size: 11.5px;
	color: var(--texte-doux); /* contraste AA sur fond crème. */
	margin-top: auto;
	padding-top: 4px;
}

/* --- Responsive : tablette --- */

@media (max-width: 1023px) {

	.recup-familles__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.recup-phares__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.recup-ressources__grille {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}
}

/* --- Responsive : mobile --- */

@media (max-width: 767px) {

	.recup-hub__hero {
		padding: 18px 16px 22px;
	}

	.recup-hub__hero .recup-fil {
		margin-bottom: 12px;
	}

	.recup-hub__titre {
		font-size: 34px;
		font-stretch: 115%;
	}

	.recup-hub__chapeau {
		font-size: 14.5px;
		line-height: 1.7;
		margin-top: 14px;
	}

	/* Les chiffres restent sur UNE ligne, quel que soit leur nombre : une
	   grille 2 × 2 coupait le compteur en deux et donnait une dernière
	   cellule pleine largeur, disgracieuse (retour du 19/08/2026). Les
	   filets viennent du fond du dl qui transparaît dans les interstices. */
	.recup-hub__stats {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		gap: 1px;
		background: var(--filet-sur-sombre);
		margin-top: 20px;
	}

	.recup-hub__stat {
		background: var(--ink);
		padding: 13px 10px;
		min-width: 0; /* sans quoi un libellé long élargit la colonne */
	}

	.recup-hub__stat + .recup-hub__stat {
		border-left: none;
	}

	.recup-hub__stat dd {
		font-size: 21px;
	}

	/* Le libellé passe à la ligne plutôt que d'élargir sa colonne :
	   « produits comparés » tient en deux lignes sans déborder. */
	.recup-hub__stat dt {
		font-size: 10px;
		line-height: 1.25;
		margin-top: 3px;
		hyphens: auto;
	}

	.recup-hub__familles,
	.recup-ressources {
		padding: 28px 16px;
	}

	.recup-hub__entete-section {
		margin-bottom: 16px;
	}

	.recup-hub__titre-section {
		font-size: 22px;
		font-stretch: 115%;
	}

	.recup-hub__note-section {
		display: none;
	}

	/* Bande défilante : les familles se font glisser du doigt plutôt que de
	   s'empiler sur toute la hauteur de l'écran (retour du 19/08/2026). La
	   carte suivante dépasse volontairement du cadre — c'est ce débord qui
	   dit au lecteur qu'il y a autre chose à droite. Le débord négatif fait
	   toucher la bande aux bords de l'écran sans casser le rembourrage. */
	.recup-familles__grille {
		display: flex;
		grid-template-columns: none;
		gap: 12px;
		margin: 0 -16px;
		padding: 2px 16px 8px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.recup-familles__grille::-webkit-scrollbar {
		display: none;
	}

	a.recup-familles__carte {
		flex: 0 0 76%;
		scroll-snap-align: start;
	}

	/* Une seule famille : elle occupe toute la largeur, sans faux débord. */
	a.recup-familles__carte:only-child {
		flex-basis: 100%;
	}

	.recup-familles__corps {
		padding: 14px 16px 16px;
	}

	.recup-familles__nom {
		font-size: 16px;
	}

	/* Produits phares : carrousel à défilement horizontal, bande bord à
	   bord (le padding revient sur l'entête et sur les extrémités du rail). */
	.recup-phares {
		padding: 28px 0;
	}

	.recup-phares .recup-hub__entete-section {
		padding: 0 16px;
	}

	/* Même anatomie que le carrousel des familles, le seul validé au doigt :
	   « mandatory » et pas de scroll-margin. Avec « proximity » plus une
	   scroll-margin sur fond de padding, Safari iOS re-snappait à la carte
	   de départ après un petit glissement : le carrousel semblait bloqué
	   (retour iPhone du 22/08/2026). */
	.recup-phares__grille {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		padding: 0 16px 6px;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.recup-phares__grille::-webkit-scrollbar {
		display: none;
	}

	.recup-phares__carte {
		flex: none;
		width: 200px;
		scroll-snap-align: start;
	}

	.recup-phares__pied {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.recup-phares__pied .recup-cta-simple {
		align-self: stretch;
		text-align: center;
	}

	/* Bande défilante : les familles se font glisser du doigt. La carte
	   suivante dépasse volontairement du cadre — c'est ce débord qui dit au
	   lecteur qu'il y a autre chose à droite. Le débord négatif fait toucher
	   la bande aux bords de l'écran, sans casser le rembourrage du bloc. */
	.recup-ressources__categories {
		display: flex;
		gap: 12px;
		margin: 0 -16px;
		padding: 2px 16px 6px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.recup-ressources__categories::-webkit-scrollbar {
		display: none;
	}

	a.recup-ressources__categorie {
		flex: 0 0 68%;
		scroll-snap-align: start;
	}

	/* Pas de soulèvement au doigt : sur mobile le survol reste collé après
	   le tap et la carte semblerait bouger toute seule. */
	a.recup-ressources__categorie:hover,
	a.recup-ressources__categorie:focus {
		transform: none;
	}

	.recup-ressources__nom {
		font-size: 14px;
	}

	.recup-ressources__cartes {
		gap: 12px;
	}

	a.recup-ressources__carte {
		padding: 14px 15px;
	}

	.recup-ressources__titre-guide {
		font-size: 13px;
	}
}


/* ==========================================================================
   41. PAGE D'ACCUEIL (maquette « Accueil » 2026)
   Hero plein cadre + bande de chiffres du site, vitrine des univers,
   duo éditorial, magazine et bande lettre. Les dernières analyses
   (recup-phares, ch. 40), les comparatifs (recup-ressources, ch. 40) et
   la méthode (recup-confiance) sont réutilisés tels quels.
   ========================================================================== */

/* --- Hero plein cadre --- */

/* Repli olive foncé (blanc dessus : 5,2:1) ; avec photo, le voile ::before
   garantit le contraste du H1 même sur les zones claires du cliché. */
.recup-accueil-hero__scene {
	position: relative;
	min-height: 600px;
	display: flex;
	align-items: center;
	background: var(--olive-fonce);
	overflow: hidden;
}

.recup-accueil-hero__fond {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.recup-accueil-hero__scene::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(17, 17, 17, 0.35); /* voile permanent au-dessus de la photo */
}

.recup-accueil-hero__contenu {
	position: relative;
	z-index: 1;
	max-width: 1180px;
	width: 100%;
	margin: 0 auto;
	padding: 56px 48px;
}

.recup-accueil-hero__badge {
	display: inline-flex;
	align-items: center;
	background: rgba(17, 17, 17, 0.7); /* opaque : lisible même sur photo claire */
	border-radius: 999px;
	padding: 7px 14px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--cream);
	margin: 0 0 24px;
}

.recup-accueil-hero__titre {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 120%;
	font-size: clamp(38px, 5.4vw, 76px);
	line-height: 1.02;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	color: var(--white);
	margin: 0;
}

.recup-accueil-hero__texte {
	font-style: italic;
	font-size: 20px;
	line-height: 1.5;
	color: var(--white);
	max-width: 600px;
	margin: 20px 0 32px;
}

/* Anneau blanc : l'anneau olive générique disparaîtrait sur la photo. */
.recup-accueil-hero__cta:focus-visible {
	outline: 2px solid var(--white);
	outline-offset: 2px;
}

/* --- Bande de chiffres du site (noire, pleine largeur) --- */

.recup-accueil-hero__stats {
	display: flex;
	background: var(--ink);
	color: var(--cream);
	padding: 26px 48px;
	margin: 0;
	text-align: center;
}

.recup-accueil-hero__stat {
	flex: 1;
	display: flex;
	flex-direction: column-reverse;
	margin: 0;
}

.recup-accueil-hero__stat + .recup-accueil-hero__stat {
	border-left: 1px solid var(--filet-sur-sombre);
}

.recup-accueil-hero__stat dd {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-size: 32px;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	margin: 0;
}

.recup-accueil-hero__stat dt {
	font-size: 11.5px;
	color: var(--texte-sur-sombre);
	margin-top: 4px;
}

/* --- Univers : la vitrine des silos --- */

.recup-univers {
	background: var(--cream);
	padding: 60px 48px;
}

.recup-univers__grille {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
}

a.recup-univers__carte {
	background: var(--white);
	border: 1px solid var(--bordure);
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

a.recup-univers__carte:hover,
a.recup-univers__carte:focus,
a.recup-univers__carte:active {
	border-color: var(--olive);
	color: inherit;
}

a.recup-univers__carte:hover .recup-univers__nom,
a.recup-univers__carte:focus .recup-univers__nom,
a.recup-univers__carte:active .recup-univers__nom {
	color: var(--olive-fonce);
}

a.recup-univers__carte:focus-visible {
	outline: 2px solid var(--olive-fonce);
	outline-offset: 2px;
}

.recup-univers__visuel {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--sable);
	flex: none;
}

.recup-univers__visuel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.recup-univers__corps {
	padding: 16px 17px 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.recup-univers__nom {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 112%;
	font-size: 15px;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--ink);
}

.recup-univers__texte {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--texte-doux);
}

.recup-univers__pied {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: auto;
	padding-top: 10px;
	color: var(--olive-fonce);
}

.recup-univers__meta {
	font-size: 11.5px;
	color: var(--texte-doux);
	font-variant-numeric: tabular-nums;
}

/* --- Ressources en colonne unique (accueil : comparatifs seuls) --- */

.recup-ressources__grille--seule {
	grid-template-columns: minmax(0, 1fr);
}

/* --- Composants réutilisés : l'alternance de fonds de la maquette accueil
   diffère du hub (analyses sur blanc, comparatifs sur crème). --- */

.recup-page-accueil .recup-phares {
	background: var(--white);
}

.recup-page-accueil .recup-ressources {
	background: var(--cream);
}

/* La méthode d'analyse : bande blanche à filet olive. Le padding latéral
   calculé contraint le contenu à 1180 px sans wrapper supplémentaire. */
.recup-page-accueil .recup-confiance {
	background: var(--white);
	border-top: 3px solid var(--olive);
	padding: 40px max(48px, calc((100% - 1180px) / 2)) 56px;
}

@media (min-width: 1024px) {
	.recup-page-accueil .recup-confiance {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
		gap: 24px;
		align-items: start;
	}
}

/* --- Duo éditorial --- */

.recup-duo {
	background: var(--white);
	padding: 60px 48px;
}

.recup-duo__entete {
	max-width: 640px;
	margin-bottom: 28px;
}

.recup-duo__intro {
	font-size: 15px;
	line-height: 1.65;
	color: var(--texte-doux);
	margin: 12px 0 0;
}

.recup-duo__grille {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.recup-duo__carte {
	border: 1px solid var(--bordure);
	border-radius: 12px;
	overflow: hidden;
	background: var(--white);
	display: flex;
	flex-direction: column;
}

.recup-duo__visuel {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--sable);
}

.recup-duo__visuel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.recup-duo__corps {
	padding: 24px 26px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.recup-duo__etiquette {
	align-self: flex-start;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--olive-fonce);
}

/* Les micro-tags de silo de la charte — seule entorse à l'accent unique. */
.recup-duo__etiquette--chaud {
	color: var(--tag-chaud);
}

.recup-duo__etiquette--froid {
	color: var(--tag-froid);
}

.recup-duo__titre {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 115%;
	font-size: 22px;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0;
}

.recup-duo__texte {
	font-size: 14px;
	line-height: 1.6;
	color: var(--texte-doux);
	margin: 0;
}

.recup-duo__cta {
	align-self: flex-start;
	margin-top: 8px;
}

/* --- Le magazine : derniers articles --- */

.recup-magazine {
	background: var(--cream);
	padding: 60px 48px;
}

.recup-magazine__grille {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

/* Contraste AA sur fond crème : le kicker et la durée des cartes (ch. 39)
   portent de vraies informations — mêmes surcharges que les métas du hub. */
.recup-magazine .recup-carte-article__kicker {
	color: var(--olive-fonce);
}

.recup-magazine .recup-carte-article__duree {
	color: var(--texte-doux);
}

/* --- La lettre : bande olive --- */

.recup-lettre {
	background: var(--olive);
	color: var(--white);
	padding: 44px 48px;
}

/* L'accueil porte sa propre bande lettre : celle du pied de page
   disparaît pour ne pas demander l'email deux fois de suite. */
.home .recup-footer__lettre {
	display: none;
}

.recup-lettre__conteneur {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
}

.recup-lettre__titre {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 118%;
	font-size: 26px;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--white);
	margin: 0;
}

.recup-lettre__sous {
	font-size: 14px;
	line-height: 1.6;
	margin: 8px 0 0;
	max-width: 520px;
	color: var(--white);
}

.recup-lettre__forme {
	flex: none;
	display: flex;
	gap: 10px;
	align-items: center;
}

.recup-lettre__champ {
	background: var(--white);
	color: var(--ink);
	border: 0;
	border-radius: 11px;
	padding: 15px 20px;
	font-size: 13.5px;
	width: 280px;
}

.recup-lettre__champ:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}

/* Bouton encre sur fond olive (le CTA olive de base s'y fondrait). */
button.recup-lettre__bouton {
	background-color: var(--ink);
}

button.recup-lettre__bouton:hover,
button.recup-lettre__bouton:focus,
button.recup-lettre__bouton:active {
	background-color: var(--ink);
	color: var(--cream);
}

button.recup-lettre__bouton:focus-visible {
	outline: 2px solid var(--white);
	outline-offset: 2px;
}

/* Le message d'attente des lettres non branchées (posé par chrome.js) :
   la classe screen-reader-text retirée, il devient visible dans la bande. */
.recup-lettre__forme,
.recup-footer__lettre-forme {
	flex-wrap: wrap;
}

.recup-lettre__statut:not(.screen-reader-text) {
	flex-basis: 100%;
	font-size: 12.5px;
	font-weight: 600;
	margin: 8px 0 0;
}

/* --- Responsive : tablette --- */

@media (max-width: 1023px) {

	.recup-univers__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.recup-duo__grille {
		grid-template-columns: minmax(0, 1fr);
	}

	.recup-magazine__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --- Responsive : mobile --- */

@media (max-width: 767px) {

	.recup-accueil-hero__scene {
		min-height: 460px;
		align-items: flex-end;
	}

	.recup-accueil-hero__contenu {
		padding: 0 18px 30px;
	}

	.recup-accueil-hero__badge {
		font-size: 9px;
		padding: 6px 12px;
		margin-bottom: 16px;
	}

	.recup-accueil-hero__texte {
		font-size: 14.5px;
		margin: 14px 0 20px;
	}

	.recup-accueil-hero__cta {
		display: flex;
		justify-content: center;
	}

	/* Les chiffres sur UNE ligne, en plus petit (QC du 14/08/2026) :
	   autant de colonnes que de chiffres, jamais de cellule orpheline. */
	.recup-accueil-hero__stats {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		gap: 1px;
		background: var(--filet-sur-sombre);
		padding: 0;
	}

	.recup-accueil-hero__stat {
		background: var(--ink);
		padding: 14px 8px;
	}

	.recup-accueil-hero__stat + .recup-accueil-hero__stat {
		border-left: none;
	}

	.recup-accueil-hero__stat dd {
		font-size: 20px;
	}

	.recup-accueil-hero__stat dt {
		font-size: 9.5px;
		margin-top: 3px;
	}

	.recup-univers,
	.recup-duo,
	.recup-magazine {
		padding: 32px 16px;
	}

	/* Univers : lignes compactes (visuel à gauche, texte, chevron). */
	.recup-univers__grille {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	a.recup-univers__carte {
		flex-direction: row;
		align-items: center;
		gap: 13px;
		padding: 12px;
		border-radius: 11px;
	}

	.recup-univers__visuel {
		width: 72px;
		height: 56px;
		aspect-ratio: auto;
		border-radius: 8px;
		overflow: hidden;
	}

	.recup-univers__corps {
		padding: 0;
		gap: 4px;
	}

	.recup-univers__nom {
		font-size: 14px;
	}

	.recup-univers__texte {
		font-size: 12px;
	}

	/* Le compteur rejoint le texte, le chevron reste seul à droite. */
	.recup-univers__pied {
		margin-top: 0;
		padding-top: 0;
	}

	.recup-univers__meta {
		font-size: 11px;
	}

	.recup-duo__corps {
		padding: 16px 18px;
	}

	.recup-duo__titre {
		font-size: 18px;
	}

	.recup-duo__texte {
		font-size: 13px;
	}

	.recup-magazine__grille {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.recup-page-accueil .recup-confiance {
		padding: 30px 16px 40px;
	}

	.recup-lettre {
		padding: 28px 16px;
	}

	.recup-lettre__conteneur {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	.recup-lettre__titre {
		font-size: 20px;
	}

	.recup-lettre__forme {
		flex-direction: column;
		align-items: stretch;
	}

	.recup-lettre__champ {
		width: 100%;
	}
}


/* ==========================================================================
   42. QUIZ CONFIGURATEUR (maquette « Outils » 2026)
   Une question par écran sur bande crème : barre de progression fine,
   cartes-réponses blanches (chaque réponse est un lien), résultat avec la
   carte de recommandation cerclée d'olive et deux alternatives.
   ========================================================================== */

.recup-quiz__progression {
	height: 5px;
	background: var(--vert-pale);
}

.recup-quiz__jauge {
	height: 100%;
	background: var(--olive);
	transition: width 0.25s ease;
}

.recup-quiz__scene {
	background: var(--cream);
	padding: 44px 48px 64px;
	min-height: 520px;
}

.recup-quiz__conteneur {
	max-width: 900px;
	margin: 0 auto;
}

.recup-quiz__barre {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 26px;
}

a.recup-quiz__retour {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 600;
	color: var(--texte-doux);
	text-decoration: none;
}

a.recup-quiz__retour:hover,
a.recup-quiz__retour:focus,
a.recup-quiz__retour:active {
	color: var(--olive-fonce);
	text-decoration: underline;
	text-underline-offset: 3px;
}

a.recup-quiz__retour:focus-visible {
	outline: 2px solid var(--olive-fonce);
	outline-offset: 2px;
}

.recup-quiz__etape {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--olive-fonce);
}

.recup-quiz__question {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 118%;
	font-size: clamp(26px, 3.2vw, 40px);
	line-height: 1.06;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 28px;
}

/* --- Les cartes-réponses --- */

.recup-quiz__choix {
	display: grid;
	gap: 16px;
}

.recup-quiz__choix--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.recup-quiz__choix--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

a.recup-quiz__carte {
	background: var(--white);
	border: 1px solid var(--bordure);
	border-radius: 12px;
	padding: 22px 20px;
	display: flex;
	flex-direction: column;
	gap: 13px;
	color: var(--olive-fonce); /* teinte les icônes (currentColor) */
	text-decoration: none;
}

a.recup-quiz__carte:hover,
a.recup-quiz__carte:focus,
a.recup-quiz__carte:active {
	border-color: var(--olive);
	color: var(--olive-fonce);
}

a.recup-quiz__carte:focus-visible {
	outline: 2px solid var(--olive-fonce);
	outline-offset: 2px;
}

.recup-quiz__libelle {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 112%;
	font-size: 16px;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--ink);
}

.recup-quiz__sous {
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--texte-doux);
}

/* --- Le résultat --- */

.recup-quiz__synthese {
	font-size: 15px;
	line-height: 1.7;
	color: var(--texte-doux);
	max-width: 680px;
	margin: -14px 0 26px;
}

/* --- Résultat « univers en construction » : pas encore de produits
   publiés dans le silo visé par les réponses --- */

.recup-quiz__chantier {
	background: var(--white);
	border: 1px dashed var(--bordure-forte, rgba(17, 17, 17, 0.3));
	border-radius: 13px;
	padding: 24px 26px;
	max-width: 560px;
}

.recup-quiz__chantier-badge {
	display: inline-block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--attention, #8a6a2c);
	background: var(--fond-ambre, rgba(183, 143, 70, 0.15));
	border-radius: 6px;
	padding: 4px 9px;
	margin-bottom: 12px;
}

.recup-quiz__chantier-texte {
	font-size: 14px;
	line-height: 1.65;
	color: var(--texte-doux);
	margin: 0 0 18px;
}

.recup-quiz__chantier-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
}

.recup-quiz__resultat {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 20px;
	align-items: start;
}

.recup-quiz__reco {
	background: var(--white);
	border: 2px solid var(--olive);
	border-radius: 12px;
	overflow: hidden;
	display: flex;
}

a.recup-quiz__reco-visuel {
	flex: none;
	width: 200px;
	background: var(--white);
	border-right: 1px solid var(--bordure);
	display: flex;
	align-items: center;
	justify-content: center;
}

a.recup-quiz__reco-visuel img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 14px;
	display: block;
}

.recup-quiz__reco-corps {
	flex: 1;
	min-width: 0; /* le flex item ne pousse jamais au-delà de la carte */
	padding: 22px 24px;
}

.recup-quiz__badges {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
}

.recup-quiz__badge-reco {
	background: var(--olive);
	color: var(--white);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 7px;
}

.recup-quiz__reco-nom {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 115%;
	font-size: 24px;
	line-height: 1.1;
	text-transform: uppercase;
	margin: 0;
}

.recup-quiz__reco-nom a,
.recup-quiz__reco-nom a:visited {
	color: var(--ink);
	text-decoration: none;
}

.recup-quiz__reco-nom a:hover,
.recup-quiz__reco-nom a:focus,
.recup-quiz__reco-nom a:active {
	color: var(--olive-fonce);
}

.recup-quiz__reco-nom a:focus-visible {
	outline: 2px solid var(--olive-fonce);
	outline-offset: 2px;
}

.recup-quiz__reco-accroche {
	font-size: 13px;
	line-height: 1.6;
	color: var(--texte-doux);
	margin: 10px 0 0;
}

.recup-quiz__reco-pied {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 16px;
}

.recup-quiz__reco-prix {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-size: 26px;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
}

a.recup-quiz__reco-fiche,
a.recup-quiz__reco-fiche:visited {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--olive-fonce);
	text-decoration: underline;
	text-underline-offset: 3px;
}

a.recup-quiz__reco-fiche:hover,
a.recup-quiz__reco-fiche:focus,
a.recup-quiz__reco-fiche:active {
	color: var(--ink);
}

a.recup-quiz__reco-fiche:focus-visible {
	outline: 2px solid var(--olive-fonce);
	outline-offset: 2px;
}

/* --- Les alternatives --- */

.recup-quiz__alternatives {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

a.recup-quiz__alternative {
	background: var(--white);
	border: 1px solid var(--bordure);
	border-radius: 11px;
	padding: 14px 16px;
	display: flex;
	gap: 13px;
	align-items: center;
	color: inherit;
	text-decoration: none;
}

a.recup-quiz__alternative:hover,
a.recup-quiz__alternative:focus,
a.recup-quiz__alternative:active {
	border-color: var(--olive);
	color: inherit;
}

a.recup-quiz__alternative:focus-visible,
a.recup-quiz__recommencer:focus-visible {
	outline: 2px solid var(--olive-fonce);
	outline-offset: 2px;
}

.recup-quiz__alt-visuel {
	flex: none;
	width: 58px;
	height: 58px;
	background: var(--white);
	border-radius: 9px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.recup-quiz__alt-visuel img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.recup-quiz__alt-corps {
	flex: 1;
	min-width: 0;
}

.recup-quiz__alt-nom {
	display: block;
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 110%;
	font-size: 14px;
	text-transform: uppercase;
	color: var(--ink);
}

.recup-quiz__alt-raison {
	display: block;
	font-size: 12px;
	color: var(--texte-doux);
	margin-top: 4px;
	line-height: 1.45;
}

.recup-quiz__alt-chiffres {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 5px;
}

.recup-quiz__alt-prix {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
}

a.recup-quiz__recommencer,
a.recup-quiz__recommencer:visited {
	display: block;
	text-align: center;
	border: 1.5px solid var(--olive);
	color: var(--olive);
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 110%;
	font-size: 11.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 13px;
	border-radius: 11px;
	text-decoration: none;
}

a.recup-quiz__recommencer:hover,
a.recup-quiz__recommencer:focus,
a.recup-quiz__recommencer:active {
	background: var(--olive);
	color: var(--white);
}

/* --- Responsive --- */

@media (max-width: 1023px) {

	.recup-quiz__choix--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.recup-quiz__resultat {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 767px) {

	.recup-quiz__scene {
		padding: 24px 16px 40px;
		min-height: 0;
	}

	.recup-quiz__question {
		margin-bottom: 20px;
	}

	.recup-quiz__choix,
	.recup-quiz__choix--3,
	.recup-quiz__choix--4 {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	a.recup-quiz__carte {
		padding: 18px;
		gap: 9px;
	}

	.recup-quiz__reco {
		flex-direction: column;
	}

	a.recup-quiz__reco-visuel {
		width: 100%;
		aspect-ratio: 16 / 9;
		border-right: 0;
		border-bottom: 1px solid var(--bordure);
	}

	.recup-quiz__reco-corps {
		padding: 18px;
	}

	.recup-quiz__reco-nom {
		font-size: 20px;
	}
}


/* ==========================================================================
   43. CALCULATEUR DE CONSOMMATION (maquette « Outils » 2026)
   Bande crème : fil, H1, pilules de type et d'usage (liens GET), carte de
   résultat avec « Affiner le calcul » en accordéon natif, colonne « Et
   ensuite ? ». Bande blanche : le classement des types en tableau.
   ========================================================================== */

.recup-calc__scene {
	background: var(--cream);
	padding: 28px 48px 44px;
}

.recup-calc__conteneur {
	max-width: 1050px;
	margin: 0 auto;
}

.recup-calc__scene .recup-fil {
	margin-bottom: 18px;
}

.recup-calc__titre {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 118%;
	font-size: clamp(28px, 3.2vw, 40px);
	line-height: 1.06;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0;
}

.recup-calc__chapeau {
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--texte-doux);
	max-width: 700px;
	margin: 14px 0 26px;
}

/* --- Pilules (types, usage, produits) : des liens GET --- */

.recup-calc__etiquette {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--texte-doux);
	margin: 0 0 10px;
}

.recup-calc__pilules {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

a.recup-calc__pilule,
a.recup-calc__pilule:visited {
	display: inline-block;
	border: 1.5px solid var(--olive);
	color: var(--olive-fonce);
	background: transparent;
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 110%;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 12px 20px;
	border-radius: 11px;
	text-decoration: none;
}

/* Les pilules d'usage restent en Inter (elles portent des phrases). */
a.recup-calc__pilule--usage {
	font-family: var(--police-texte);
	font-style: normal;
	font-weight: 600;
	font-stretch: normal;
	text-transform: none;
	letter-spacing: 0;
	font-size: 12.5px;
}

a.recup-calc__pilule:hover,
a.recup-calc__pilule:focus,
a.recup-calc__pilule:active {
	background: var(--vert-pale);
	color: var(--olive-fonce);
}

a.recup-calc__pilule--active,
a.recup-calc__pilule--active:visited,
a.recup-calc__pilule--active:hover,
a.recup-calc__pilule--active:focus {
	background: var(--olive);
	border-color: var(--olive);
	color: var(--white);
}

a.recup-calc__pilule:focus-visible {
	outline: 2px solid var(--olive-fonce);
	outline-offset: 2px;
}

/* --- Note contextuelle du type --- */

.recup-calc__note {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	background: var(--cream);
	border: 1px solid var(--bordure);
	border-radius: 11px;
	padding: 13px 16px;
	margin: 14px 0 0;
	color: var(--olive-fonce);
}

.recup-calc__note svg {
	flex: none;
	margin-top: 2px;
}

.recup-calc__note p {
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--texte-doux);
	margin: 0;
}

/* --- La grille réglages / résultat collant --- */

.recup-calc__grille {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 22px;
	align-items: start;
	margin-top: 6px;
}

.recup-calc__reglages {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.recup-calc__groupe {
	background: var(--white);
	border: 1px solid var(--bordure);
	border-radius: 12px;
	padding: 20px 24px;
}

.recup-calc__numero {
	display: inline-block;
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-size: 13px;
	color: var(--olive);
	margin-right: 8px;
}

/* Le résultat suit le défilement pendant les réglages. */
.recup-calc__colonne-resultat {
	position: sticky;
	top: 20px;
}

.recup-calc__resultat {
	background: var(--white);
	border: 1px solid var(--bordure);
	border-radius: 12px;
	padding: 26px 24px;
	text-align: center;
}

.recup-calc__resultat-titre {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--texte-doux);
	margin: 0;
}

.recup-calc__an {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-size: clamp(40px, 4.5vw, 56px);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
	margin: 12px 0 0;
}

.recup-calc__sous-chiffres {
	display: flex;
	justify-content: center;
	gap: 36px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--bordure);
}

.recup-calc__sous-titre {
	display: block;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--texte-doux);
}

.recup-calc__sous-valeur {
	display: block;
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-size: 22px;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
	margin-top: 6px;
}

/* --- Le formulaire : curseur de puissance et contrat, toujours visibles --- */

.recup-calc__forme {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.recup-calc__label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 9px;
}

.recup-calc__label small {
	display: block;
	font-size: 11px;
	font-weight: 400;
	color: var(--texte-doux);
	margin-top: 2px;
}

.recup-calc__curseur-ligne {
	display: flex;
	align-items: center;
	gap: 16px;
}

.recup-calc__curseur {
	flex: 1;
	accent-color: var(--olive);
	height: 24px;
	cursor: pointer;
}

.recup-calc__champ-unite {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.recup-calc__champ-unite input {
	width: 104px;
	background: var(--cream);
	border: 1px solid var(--bordure);
	border-radius: 9px;
	padding: 10px 12px;
	font-family: var(--police-texte);
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
}

.recup-calc__champ-unite input:focus-visible {
	outline: 2px solid var(--olive-fonce);
	outline-offset: 1px;
}

.recup-calc__unite {
	font-size: 12px;
	color: var(--texte-doux);
}

.recup-calc__aide {
	display: block;
	font-size: 11px;
	color: var(--texte-doux);
	line-height: 1.55;
	margin-top: 7px;
}

.recup-calc__contrat .recup-calc__aide {
	margin-top: 8px;
}

.recup-calc__case {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ink);
	cursor: pointer;
}

.recup-calc__case input {
	width: 16px;
	height: 16px;
	accent-color: var(--olive);
}

.recup-calc__case input:focus-visible {
	outline: 2px solid var(--olive-fonce);
	outline-offset: 2px;
}

.recup-calc__case em {
	font-style: normal;
	font-weight: 400;
	color: var(--texte-doux);
}

.recup-calc__mentions {
	font-size: 10.5px;
	color: var(--texte-doux);
	line-height: 1.6;
	margin: 14px 0 0;
}

/* --- Sous le résultat : lien fiche/univers, pilule produit --- */

a.recup-calc__lien-fiche,
a.recup-calc__lien-fiche:visited {
	display: block;
	text-align: center;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--olive-fonce);
	text-decoration: underline;
	text-underline-offset: 3px;
	margin-top: 14px;
}

a.recup-calc__lien-fiche:hover,
a.recup-calc__lien-fiche:focus,
a.recup-calc__lien-fiche:active {
	color: var(--ink);
}

a.recup-calc__lien-fiche:focus-visible {
	outline: 2px solid var(--olive-fonce);
	outline-offset: 2px;
}

/* --- Le menu déroulant des modèles (coexiste avec les types) --- */

.recup-calc__sous-etiquette {
	display: block;
	font-size: 12px;
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 9px;
}

/* Le « ou » entre les deux chemins : un filet de part et d'autre. */
.recup-calc__ou {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--texte-doux);
	margin: 4px 0 14px;
}

.recup-calc__ou::before,
.recup-calc__ou::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--bordure);
}

.recup-calc__select-ligne {
	display: flex;
	gap: 10px;
	align-items: center;
}

.recup-calc__select {
	flex: 1;
	min-width: 0;
	appearance: none;
	background: var(--cream);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%2362684C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	border: 1px solid var(--bordure);
	border-radius: 10px;
	padding: 12px 40px 12px 14px;
	font-family: var(--police-texte);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink);
	cursor: pointer;
}

.recup-calc__select:disabled {
	color: var(--texte-doux);
	font-weight: 400;
	cursor: default;
}

.recup-calc__select:focus-visible {
	outline: 2px solid var(--olive-fonce);
	outline-offset: 1px;
}

/* Les boutons de repli sans JavaScript : le display du CTA écrase
   l'attribut hidden posé par le script — on rétablit sa priorité. */
.recup-calc__choisir[hidden],
.recup-calc__recalculer[hidden] {
	display: none;
}

/* La confirmation du modèle choisi. */
.recup-calc__confirmation {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	background: var(--vert-pale);
	border: 1px solid var(--olive-clair);
	border-radius: 11px;
	padding: 12px 15px;
	margin-top: 14px;
	color: var(--olive-fonce);
}

.recup-calc__confirmation svg {
	flex: none;
	margin-top: 2px;
}

.recup-calc__confirmation p {
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--texte-doux);
	margin: 0;
}

.recup-calc__confirmation strong {
	color: var(--ink);
}

/* --- Le classement des types --- */

.recup-calc__bande-classement {
	background: var(--white);
	padding: 44px 48px 52px;
	border-top: 1px solid var(--bordure);
}

.recup-calc__titre-classement {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 118%;
	font-size: clamp(24px, 2.6vw, 30px);
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 8px;
}

.recup-calc__lecture {
	font-size: 14px;
	line-height: 1.65;
	color: var(--texte-doux);
	margin: 0 0 20px;
	max-width: 720px;
}

.recup-calc__tableau-cadre {
	border: 1px solid var(--bordure);
	border-radius: 12px;
	overflow-x: auto;
}

.recup-calc__tableau {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.recup-calc__tableau th {
	background: var(--cream);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--texte-doux);
	text-align: left;
	padding: 11px 20px;
}

.recup-calc__tableau td {
	padding: 12px 20px;
	border-top: 1px solid var(--bordure);
	color: var(--texte-doux);
	font-variant-numeric: tabular-nums;
}

.recup-calc__tableau td a,
.recup-calc__tableau td a:visited {
	font-weight: 600;
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--olive-clair);
}

.recup-calc__tableau td a:hover,
.recup-calc__tableau td a:focus,
.recup-calc__tableau td a:active {
	color: var(--olive-fonce);
	text-decoration-color: var(--olive-fonce);
}

.recup-calc__tableau td a:focus-visible {
	outline: 2px solid var(--olive-fonce);
	outline-offset: 2px;
}

.recup-calc__rang {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-size: 15px;
	color: var(--olive-fonce);
}

.recup-calc__cout {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-size: 15px;
	color: var(--ink);
}

/* --- Responsive --- */

@media (max-width: 1023px) {

	.recup-calc__grille {
		grid-template-columns: minmax(0, 1fr);
	}

	/* En une colonne, le résultat suit les réglages dans le flux. */
	.recup-calc__colonne-resultat {
		position: static;
	}
}

@media (max-width: 767px) {

	.recup-calc__scene {
		padding: 18px 16px 32px;
	}

	.recup-calc__chapeau {
		font-size: 14px;
		margin: 12px 0 20px;
	}

	.recup-calc__pilules {
		gap: 8px;
	}

	a.recup-calc__pilule {
		padding: 11px 15px;
		font-size: 12px;
	}

	.recup-calc__groupe {
		padding: 16px 18px;
	}

	.recup-calc__curseur-ligne {
		flex-wrap: wrap;
		gap: 10px;
	}

	.recup-calc__curseur {
		flex-basis: 100%;
	}

	.recup-calc__sous-chiffres {
		gap: 24px;
	}

	.recup-calc__forme {
		gap: 16px;
	}

	.recup-calc__bande-classement {
		padding: 28px 16px 36px;
	}

	.recup-calc__tableau th,
	.recup-calc__tableau td {
		padding: 10px 12px;
		white-space: nowrap;
	}
}


/* ==========================================================================
   44. OUTILS : HUB, VITRINE ET ENCARTS D'APPEL (maquettes « Outils » et
   « Blocs outils » 2026)
   La page /outils/, la section « Nos outils » de l'accueil, la bande olive
   du quiz, l'encart calculateur des guides, la carte VS du comparateur et
   l'estimation de consommation des fiches produit.
   ========================================================================== */

/* --- Hub des outils (page /outils/) --- */

.recup-outils__hero {
	background: var(--cream);
	padding: 34px 48px 40px;
}

.recup-outils__conteneur {
	max-width: 1050px;
	margin: 0 auto;
}

.recup-outils__hero .recup-fil {
	margin-bottom: 20px;
}

.recup-outils__titre {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 118%;
	font-size: clamp(30px, 3.6vw, 48px);
	line-height: 1.04;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0;
}

.recup-outils__chapeau {
	font-size: 16.5px;
	line-height: 1.75;
	color: var(--texte-doux);
	max-width: 720px;
	margin: 18px 0 0;
}

.recup-outils__cartes {
	background: var(--white);
	padding: 44px 48px;
	border-top: 1px solid var(--bordure);
}

.recup-outils__grille {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

a.recup-outils__carte {
	background: var(--white);
	border: 1px solid var(--bordure);
	border-radius: 12px;
	padding: 26px 24px 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	color: var(--olive-fonce); /* teinte l'icône (currentColor) */
	text-decoration: none;
}

a.recup-outils__carte:hover,
a.recup-outils__carte:focus,
a.recup-outils__carte:active {
	border-color: var(--olive);
	color: var(--olive-fonce);
}

a.recup-outils__carte:focus-visible {
	outline: 2px solid var(--olive-fonce);
	outline-offset: 2px;
}

.recup-outils__nom {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 115%;
	font-size: 21px;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--ink);
}

.recup-outils__texte {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--texte-doux);
}

.recup-outils__cta {
	margin-top: auto;
	align-self: flex-start;
}

.recup-outils__donnees {
	background: var(--cream);
	padding: 40px 48px 48px;
	border-top: 1px solid var(--bordure);
}

.recup-outils__titre-donnees {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 115%;
	font-size: 26px;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 18px;
}

.recup-outils__points {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
	margin: 0;
	padding: 0;
}

.recup-outils__points li {
	display: flex;
	gap: 12px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--texte-doux);
}

.recup-outils__points svg {
	flex: none;
	margin-top: 2px;
	color: var(--olive-fonce);
}

.recup-outils__points strong {
	color: var(--ink);
}

a.recup-outils__methodo,
a.recup-outils__methodo:visited {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 22px;
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 110%;
	font-size: 11.5px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--olive-fonce);
	border-bottom: 1.5px solid var(--olive-fonce);
	padding-bottom: 3px;
	text-decoration: none;
}

a.recup-outils__methodo:hover,
a.recup-outils__methodo:focus,
a.recup-outils__methodo:active {
	color: var(--ink);
	border-bottom-color: var(--ink);
}

a.recup-outils__methodo:focus-visible {
	outline: 2px solid var(--olive-fonce);
	outline-offset: 2px;
}

/* --- Vitrine « Nos outils » (accueil, hubs) --- */

.recup-vitrine-outils {
	background: var(--cream);
	padding: 52px 48px;
}

.recup-vitrine-outils__grille {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

a.recup-vitrine-outils__carte {
	background: var(--white);
	border: 1px solid var(--bordure);
	border-radius: 12px;
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 11px;
	color: var(--olive-fonce);
	text-decoration: none;
}

a.recup-vitrine-outils__carte:hover,
a.recup-vitrine-outils__carte:focus,
a.recup-vitrine-outils__carte:active {
	border-color: var(--olive);
	color: var(--olive-fonce);
}

a.recup-vitrine-outils__carte:focus-visible {
	outline: 2px solid var(--olive-fonce);
	outline-offset: 2px;
}

.recup-vitrine-outils__nom {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 112%;
	font-size: 16px;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--ink);
}

.recup-vitrine-outils__texte {
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--texte-doux);
}

.recup-vitrine-outils__action {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--olive-fonce);
	padding-top: 8px;
}

/* --- Bande olive : appel au quiz --- */

.recup-appel-quiz {
	background: var(--olive);
	color: var(--white);
	padding: 40px 48px;
}

.recup-appel-quiz__conteneur {
	display: flex;
	align-items: center;
	gap: 48px;
}

.recup-appel-quiz__texte {
	flex: 1;
}

.recup-appel-quiz__kicker {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--vert-pale);
	margin: 0 0 11px;
}

.recup-appel-quiz__titre {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 118%;
	font-size: clamp(24px, 2.6vw, 32px);
	line-height: 1.08;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	color: var(--cream);
	margin: 0;
}

.recup-appel-quiz__sous {
	font-size: 14px;
	color: var(--vert-pale);
	margin: 12px 0 0;
	line-height: 1.6;
	max-width: 560px;
}

.recup-appel-quiz__action {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

a.recup-appel-quiz__cta,
a.recup-appel-quiz__cta:visited {
	background: var(--cream);
	color: var(--ink);
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 110%;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 17px 32px;
	border-radius: 12px;
	text-decoration: none;
}

a.recup-appel-quiz__cta:hover,
a.recup-appel-quiz__cta:focus,
a.recup-appel-quiz__cta:active {
	background: var(--white);
	color: var(--ink);
}

a.recup-appel-quiz__cta:focus-visible {
	outline: 2px solid var(--white);
	outline-offset: 2px;
}

.recup-appel-quiz__mention {
	font-size: 11px;
	color: var(--vert-pale);
}

/* --- Encart : appel au calculateur (guides) --- */

.recup-appel-calc {
	background: var(--cream);
	border: 1px solid var(--bordure);
	border-left: 3px solid var(--olive);
	border-radius: 0 12px 12px 0;
	padding: 20px 24px;
	display: flex;
	align-items: center;
	gap: 20px;
	color: var(--olive-fonce);
	margin: 28px 0;
}

.recup-appel-calc > svg {
	flex: none;
}

.recup-appel-calc__corps {
	flex: 1;
	min-width: 0;
}

.recup-appel-calc__titre {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 112%;
	font-size: 17px;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0;
}

.recup-appel-calc__texte {
	font-size: 13px;
	color: var(--texte-doux);
	margin: 6px 0 0;
	line-height: 1.5;
}

.recup-appel-calc__cta {
	flex: none;
}

/* --- Carte VS : appel au comparateur --- */

.recup-appel-vs {
	background: var(--white);
	border: 1px solid var(--bordure);
	border-radius: 12px;
	padding: 22px 26px;
	display: flex;
	align-items: center;
	gap: 28px;
	margin: 28px 0;
}

.recup-appel-vs__corps {
	flex: 1;
	min-width: 0;
}

.recup-appel-vs__titre {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 112%;
	font-size: 18px;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0;
}

.recup-appel-vs__texte {
	font-size: 13px;
	color: var(--texte-doux);
	margin: 6px 0 0;
	line-height: 1.5;
}

.recup-appel-vs__visuel {
	flex: none;
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--olive);
	text-decoration: none;
}

/* Le visuel est un lien : au survol, les cases foncent comme tous les liens
   du site (on FONCE au survol, jamais l'inverse). */
a.recup-appel-vs__visuel:hover,
a.recup-appel-vs__visuel:focus {
	color: var(--olive-fonce);
}

.recup-appel-vs__case {
	width: 74px;
	height: 74px;
	border: 1.5px dashed var(--olive-clair);
	border-radius: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.recup-appel-vs__vs {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-size: 15px;
	color: var(--texte-doux);
}

.recup-appel-vs__cta {
	flex: none;
}

/* --- Estimation de consommation sur la fiche produit --- */

.recup-conso-produit {
	background: var(--cream);
	border: 1px solid var(--bordure);
	border-radius: 12px;
	padding: 18px 22px;
	display: flex;
	align-items: center;
	gap: 16px;
	color: var(--olive-fonce);
	margin-top: 24px;
}

.recup-conso-produit > svg {
	flex: none;
}

.recup-conso-produit__texte {
	flex: 1;
	min-width: 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--texte-doux);
	margin: 0;
}

.recup-conso-produit__texte strong {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-size: 16px;
	color: var(--ink);
}

a.recup-conso-produit__lien,
a.recup-conso-produit__lien:visited {
	flex: none;
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 110%;
	font-size: 11px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--olive-fonce);
	border-bottom: 1.5px solid var(--olive-fonce);
	padding-bottom: 2px;
	text-decoration: none;
}

a.recup-conso-produit__lien:hover,
a.recup-conso-produit__lien:focus,
a.recup-conso-produit__lien:active {
	color: var(--ink);
	border-bottom-color: var(--ink);
}

a.recup-conso-produit__lien:focus-visible {
	outline: 2px solid var(--olive-fonce);
	outline-offset: 2px;
}

/* --- Responsive --- */

@media (max-width: 1023px) {

	.recup-outils__grille,
	.recup-vitrine-outils__grille {
		grid-template-columns: minmax(0, 1fr);
	}

	.recup-outils__points {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.recup-appel-vs {
		flex-wrap: wrap;
	}
}

@media (max-width: 767px) {

	.recup-outils__hero {
		padding: 18px 16px 26px;
	}

	.recup-outils__cartes,
	.recup-outils__donnees {
		padding: 28px 16px 32px;
	}

	.recup-outils__points {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	.recup-vitrine-outils {
		padding: 28px 16px;
	}

	/* Vitrine en lignes compactes : icône, textes, chevron implicite. */
	a.recup-vitrine-outils__carte {
		flex-direction: row;
		align-items: center;
		gap: 13px;
		padding: 14px 16px;
		border-radius: 11px;
	}

	.recup-vitrine-outils__corps {
		flex: 1;
		min-width: 0;
	}

	.recup-vitrine-outils__nom {
		display: block;
		font-size: 13.5px;
	}

	.recup-vitrine-outils__texte {
		display: block;
		font-size: 11.5px;
		margin-top: 3px;
	}

	.recup-vitrine-outils__action {
		padding-top: 0;
	}

	.recup-appel-quiz {
		padding: 26px 16px 28px;
	}

	.recup-appel-quiz__conteneur {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	.recup-appel-quiz__action {
		align-items: stretch;
	}

	a.recup-appel-quiz__cta {
		text-align: center;
		padding: 15px;
	}

	.recup-appel-quiz__mention {
		text-align: center;
	}

	.recup-appel-calc,
	.recup-appel-vs,
	.recup-conso-produit {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.recup-appel-calc__cta,
	.recup-appel-vs__cta {
		align-self: stretch;
		text-align: center;
	}

	.recup-appel-vs__visuel {
		align-self: center;
	}

	.recup-appel-vs__case {
		width: 64px;
		height: 64px;
	}
}


/* ==========================================================================
   45. RECHERCHE ET 404 (maquette « Composants » 2026, section 08)
   La page de résultats mixtes (articles et produits) et la page 404
   « Cette page a fondu » avec ses portes de sortie.
   ========================================================================== */

/* --- Gabarits pleine largeur (mêmes règles que listing/outil) --- */

.recup-page-resultats,
.recup-page-404 {
	width: 100%;
	max-width: none;
	padding: 0;
}

.recup-page-resultats .site-main,
.recup-page-404 .site-main {
	padding: 0;
}

/* --- Résultats de recherche --- */

.recup-resultats__hero {
	background: var(--cream);
	padding: 30px 48px 32px;
}

.recup-resultats__conteneur {
	max-width: 860px;
	margin: 0 auto;
}

.recup-resultats__titre {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 115%;
	font-size: clamp(22px, 2.6vw, 32px);
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0;
	overflow-wrap: anywhere; /* un terme cherché très long ne déborde pas */
}

.recup-resultats__compteur {
	font-size: 12px;
	color: var(--texte-doux);
	margin: 8px 0 0;
}

.recup-resultats__corps {
	background: var(--white);
	padding: 32px 48px 56px;
}

.recup-resultats__liste {
	display: flex;
	flex-direction: column;
}

a.recup-resultats__ligne {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 16px 0;
	border-top: 1px solid var(--bordure);
	color: var(--ink);
	text-decoration: none;
}

a.recup-resultats__ligne:last-of-type {
	border-bottom: 1px solid var(--bordure);
}

a.recup-resultats__ligne:hover .recup-resultats__nom,
a.recup-resultats__ligne:focus .recup-resultats__nom,
a.recup-resultats__ligne:active .recup-resultats__nom {
	color: var(--olive-fonce);
	text-decoration: underline;
	text-underline-offset: 3px;
}

a.recup-resultats__ligne:focus-visible {
	outline: 2px solid var(--olive-fonce);
	outline-offset: 2px;
}

.recup-resultats__vignette {
	flex: none;
	width: 88px;
	height: 66px;
	background: var(--white);
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.recup-resultats__vignette img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.recup-resultats__legende {
	flex: 1;
	min-width: 0;
}

.recup-resultats__badge {
	display: inline-block;
	background: var(--olive);
	color: var(--white);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 6px;
	margin-bottom: 7px;
}

.recup-resultats__badge--contour {
	background: transparent;
	border: 1px solid var(--olive);
	color: var(--olive-fonce);
	padding: 2px 8px;
}

.recup-resultats__nom {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}

.recup-resultats__meta {
	display: block;
	font-size: 12.5px;
	color: var(--texte-doux);
	margin-top: 5px;
}

.recup-resultats__note {
	flex: none;
	align-self: center;
}

/* --- Pagination (liens générés par WordPress) --- */

.recup-resultats__pagination {
	margin-top: 24px;
}

.recup-resultats__pagination .nav-links {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}

.recup-resultats__pagination .page-numbers {
	display: inline-block;
	border: 1.5px solid var(--olive);
	color: var(--olive-fonce);
	font-size: 13px;
	font-weight: 600;
	padding: 9px 14px;
	border-radius: 10px;
	text-decoration: none;
}

.recup-resultats__pagination a.page-numbers:hover,
.recup-resultats__pagination a.page-numbers:focus,
.recup-resultats__pagination a.page-numbers:active {
	background: var(--vert-pale);
	color: var(--olive-fonce);
}

.recup-resultats__pagination a.page-numbers:focus-visible {
	outline: 2px solid var(--olive-fonce);
	outline-offset: 2px;
}

.recup-resultats__pagination .page-numbers.current {
	background: var(--olive);
	border-color: var(--olive);
	color: var(--white);
}

.recup-resultats__pagination .page-numbers.dots {
	border: 0;
	color: var(--texte-doux);
}

/* --- État vide de la recherche --- */

.recup-resultats__vide {
	background: var(--white);
	border: 1px solid var(--bordure);
	border-radius: 12px;
	padding: 28px 26px;
}

.recup-resultats__vide-titre {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 115%;
	font-size: 18px;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0;
	overflow-wrap: anywhere;
}

.recup-resultats__vide-texte {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--texte-doux);
	margin: 9px 0 0;
}

.recup-resultats__suggestions {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.recup-resultats__suggestions a,
.recup-resultats__suggestions a:visited {
	display: inline-flex;
	align-items: baseline;
	gap: 9px;
	font-size: 14px;
	color: var(--ink);
	text-decoration: none;
}

.recup-resultats__suggestions svg {
	flex: none;
	color: var(--olive-fonce);
	transform: translateY(1px);
}

.recup-resultats__suggestions a:hover,
.recup-resultats__suggestions a:focus,
.recup-resultats__suggestions a:active {
	color: var(--olive-fonce);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.recup-resultats__suggestions a:focus-visible {
	outline: 2px solid var(--olive-fonce);
	outline-offset: 2px;
}

/* --- La page 404 --- */

.recup-404 {
	background: var(--cream);
	padding: 72px 48px 88px;
	text-align: center;
}

.recup-404__code {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 125%;
	font-size: clamp(56px, 8vw, 96px);
	line-height: 1;
	color: var(--olive);
	margin: 0;
}

.recup-404__titre {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 115%;
	font-size: clamp(20px, 2.4vw, 26px);
	text-transform: uppercase;
	color: var(--ink);
	margin: 14px 0 0;
}

.recup-404__texte {
	font-size: 14px;
	line-height: 1.6;
	color: var(--texte-doux);
	max-width: 400px;
	margin: 10px auto 22px;
}

.recup-404__portes {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

.recup-404__recherche {
	display: flex;
	gap: 10px;
	justify-content: center;
	max-width: 420px;
	margin: 28px auto 0;
}

.recup-404__recherche input {
	flex: 1;
	min-width: 0;
	background: var(--white);
	border: 1px solid var(--bordure);
	border-radius: 10px;
	padding: 12px 14px;
	font-family: var(--police-texte);
	font-size: 13.5px;
	color: var(--ink);
}

.recup-404__recherche input:focus-visible {
	outline: 2px solid var(--olive-fonce);
	outline-offset: 1px;
}

/* --- Responsive --- */

@media (max-width: 767px) {

	.recup-resultats__hero {
		padding: 18px 16px 22px;
	}

	.recup-resultats__corps {
		padding: 20px 16px 40px;
	}

	.recup-resultats__vignette {
		width: 64px;
		height: 48px;
	}

	.recup-resultats__nom {
		font-size: 14px;
	}

	.recup-404 {
		padding: 48px 16px 56px;
	}

	.recup-404__recherche {
		flex-direction: column;
	}
}


/* ==========================================================================
   46. PAGE AUTEUR (maquette « Pages éditoriales » 2026, section 01)
   Le profil E-E-A-T : hero crème (portrait, nom, rôle, bio, réseaux,
   chiffres réels), bande blanche « Ses dernières analyses », bande crème
   « Ses guides » (boucle paginée de l'archive).
   ========================================================================== */

/* --- Gabarit pleine largeur (mêmes règles que recherche/404) --- */

.recup-page-auteur {
	width: 100%;
	max-width: none;
	padding: 0;
}

.recup-page-auteur .site-main {
	padding: 0;
}

/* --- Hero crème : identité --- */

.recup-auteur__hero {
	background: var(--cream);
	padding: 30px 48px 36px;
}

.recup-auteur__conteneur {
	max-width: 1100px;
	margin: 0 auto;
}

/* Grille : portrait à gauche sur trois rangées (titraille, bio, réseaux) —
   sur mobile, la bio et les réseaux repassent en pleine largeur. */
.recup-auteur__identite {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	column-gap: 32px;
	align-items: start;
	margin-top: 22px;
}

.recup-auteur__portrait {
	grid-row: 1 / span 3;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--sable);
	display: flex;
	align-items: center;
	justify-content: center;
}

.recup-auteur__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 50%;
}

.recup-auteur__initiale {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-size: 52px;
	color: var(--olive-fonce);
}

.recup-auteur__titraille {
	align-self: center;
}

.recup-auteur__nom {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 118%;
	font-size: clamp(26px, 4vw, 42px);
	line-height: 1.05;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0;
	overflow-wrap: anywhere;
}

.recup-auteur__role {
	font-size: 14px;
	font-weight: 600;
	color: var(--olive-fonce);
	margin: 10px 0 0;
}

.recup-auteur__bio {
	grid-column: 2;
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--texte-doux);
	max-width: 680px;
	margin: 14px 0 0;
}

.recup-auteur__reseaux {
	grid-column: 2;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin: 16px 0 0;
	padding: 0;
	font-size: 12.5px;
}

.recup-auteur__reseaux a,
.recup-auteur__reseaux a:visited {
	color: var(--olive-fonce);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.recup-auteur__reseaux a:hover,
.recup-auteur__reseaux a:focus,
.recup-auteur__reseaux a:active {
	color: var(--ink);
}

.recup-auteur__reseaux a:focus-visible {
	outline: 2px solid var(--olive-fonce);
	outline-offset: 2px;
}

/* --- Les chiffres réels (dt avant dd dans le HTML, ordre visuel inversé) --- */

.recup-auteur__stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--bordure);
	border: 1px solid var(--bordure);
	border-radius: 12px;
	overflow: hidden;
	margin: 28px 0 0;
}

.recup-auteur__stat {
	background: var(--white);
	padding: 18px 22px;
	display: flex;
	flex-direction: column;
}

.recup-auteur__stat dd {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-size: 26px;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
	margin: 0;
	order: -1;
}

.recup-auteur__stat dt {
	font-size: 11.5px;
	color: var(--texte-doux);
	margin-top: 4px;
}

/* --- Bande blanche : ses dernières analyses --- */

.recup-auteur__analyses {
	background: var(--white);
	padding: 40px 48px;
}

.recup-auteur__titre-section {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 115%;
	font-size: 24px;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 20px;
}

.recup-auteur__grille {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

a.recup-auteur__carte {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--bordure);
	border-radius: 11px;
	overflow: hidden;
	color: var(--ink);
	text-decoration: none;
	background: var(--white);
}

a.recup-auteur__carte:hover,
a.recup-auteur__carte:focus,
a.recup-auteur__carte:active {
	border-color: var(--olive);
	color: var(--ink);
}

a.recup-auteur__carte:hover .recup-auteur__carte-nom,
a.recup-auteur__carte:focus .recup-auteur__carte-nom,
a.recup-auteur__carte:active .recup-auteur__carte-nom {
	color: var(--olive-fonce);
}

a.recup-auteur__carte:focus-visible {
	outline: 2px solid var(--olive-fonce);
	outline-offset: 2px;
}

.recup-auteur__visuel {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	/* Blanc + contain : la carte affiche des packshots carrés sur fond
	   blanc pur, le cover 4:3 les tronquait (QC du 24/08/2026). */
	background: var(--white);
}

.recup-auteur__visuel img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 12px;
	display: block;
}

.recup-auteur__note {
	position: absolute;
	top: 9px;
	right: 9px;
}

.recup-auteur__carte-corps {
	display: block;
	padding: 13px 15px 15px;
}

.recup-auteur__kicker {
	display: block;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--olive-fonce);
}

.recup-auteur__carte-nom {
	display: block;
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 110%;
	font-size: 14px;
	text-transform: uppercase;
	line-height: 1.2;
	margin-top: 7px;
}

.recup-auteur__carte-date {
	display: block;
	font-size: 11.5px;
	color: var(--texte-doux);
	margin-top: 6px;
}

/* --- Bande crème : ses guides (boucle de l'archive) --- */

.recup-auteur__guides {
	background: var(--cream);
	padding: 36px 48px 44px;
}

.recup-auteur__liste {
	background: var(--white);
	border: 1px solid var(--bordure);
	border-radius: 12px;
	padding: 4px 22px;
}

a.recup-auteur__ligne {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 14px 0;
	border-bottom: 1px solid var(--bordure);
	color: var(--ink);
	text-decoration: none;
}

a.recup-auteur__ligne:last-of-type {
	border-bottom: 0;
}

a.recup-auteur__ligne svg {
	flex: none;
	color: var(--olive-fonce);
}

a.recup-auteur__ligne:hover .recup-auteur__ligne-titre,
a.recup-auteur__ligne:focus .recup-auteur__ligne-titre,
a.recup-auteur__ligne:active .recup-auteur__ligne-titre {
	color: var(--olive-fonce);
	text-decoration: underline;
	text-underline-offset: 3px;
}

a.recup-auteur__ligne:focus-visible {
	outline: 2px solid var(--olive-fonce);
	outline-offset: 2px;
}

.recup-auteur__ligne-legende {
	min-width: 0;
}

.recup-auteur__ligne-titre {
	display: block;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.4;
}

.recup-auteur__ligne-meta {
	display: block;
	font-size: 11.5px;
	color: var(--texte-doux);
	margin-top: 4px;
}

/* --- État vide (aucune publication) --- */

.recup-auteur__vide {
	background: var(--white);
	border: 1px solid var(--bordure);
	border-radius: 12px;
	padding: 26px;
	text-align: center;
}

.recup-auteur__vide-texte {
	font-size: 14px;
	color: var(--texte-doux);
	margin: 0 0 16px;
}

/* --- Responsive --- */

@media (max-width: 1023px) {

	.recup-auteur__grille {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 767px) {

	.recup-auteur__hero {
		padding: 18px 16px 24px;
	}

	.recup-auteur__identite {
		grid-template-columns: 86px minmax(0, 1fr);
		column-gap: 16px;
		margin-top: 16px;
	}

	.recup-auteur__portrait {
		grid-row: 1;
		width: 86px;
		height: 86px;
	}

	.recup-auteur__initiale {
		font-size: 32px;
	}

	.recup-auteur__nom {
		font-size: 24px;
	}

	.recup-auteur__role {
		font-size: 12px;
		line-height: 1.4;
		margin-top: 7px;
	}

	.recup-auteur__bio,
	.recup-auteur__reseaux {
		grid-column: 1 / -1;
	}

	.recup-auteur__bio {
		font-size: 14px;
		line-height: 1.7;
	}

	.recup-auteur__reseaux {
		gap: 16px;
		font-size: 12px;
		margin-top: 12px;
	}

	.recup-auteur__stats {
		grid-template-columns: 1fr 1fr;
		margin-top: 18px;
	}

	.recup-auteur__stat {
		padding: 14px 16px;
	}

	.recup-auteur__stat dd {
		font-size: 21px;
	}

	.recup-auteur__stat dt {
		font-size: 11px;
		margin-top: 3px;
	}

	.recup-auteur__analyses {
		padding: 24px 16px;
	}

	.recup-auteur__titre-section {
		font-size: 19px;
		margin-bottom: 14px;
	}

	.recup-auteur__grille {
		gap: 12px;
	}

	.recup-auteur__carte-corps {
		padding: 11px 12px 13px;
	}

	.recup-auteur__carte-nom {
		font-size: 13px;
	}

	.recup-auteur__guides {
		padding: 24px 16px 32px;
	}

	.recup-auteur__liste {
		padding: 2px 14px;
	}

	.recup-auteur__ligne-titre {
		font-size: 13.5px;
	}
}


/* ==========================================================================
   47. BLOCS ÉDITORIAUX (maquette « Pages éditoriales » 2026)
   Les briques des pages À propos et méthodologie : étapes numérotées,
   échelle des notes, « en clair », chiffres du site, appel contact.
   Tous vivent dans la colonne lisible du gabarit page.
   ========================================================================== */

/* --- Étapes numérotées --- */

.recup-etapes {
	list-style: none;
	margin-top: 8px;
	margin-bottom: 28px;
	padding: 0;
}

.recup-etapes__etape {
	display: grid;
	grid-template-columns: 52px 1fr;
	gap: 18px;
	align-items: start;
	padding: 18px 0;
	border-top: 1px solid var(--bordure);
}

.recup-etapes__etape:last-child {
	border-bottom: 1px solid var(--bordure);
}

.recup-etapes__numero {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-size: 28px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--olive-fonce);
}

.recup-etapes__titre {
	font-size: 16px;
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 6px;
}

.recup-etapes__texte {
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--texte-doux);
	margin: 0;
}

/* --- Échelle des notes (paliers) --- */

.recup-paliers {
	margin-top: 8px;
	margin-bottom: 28px;
}

.recup-paliers__table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--bordure);
	border-radius: 12px;
	overflow: hidden;
	font-size: 13.5px;
}

.recup-paliers__table th {
	background: var(--ink);
	color: var(--cream);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: left;
	padding: 11px 16px;
}

.recup-paliers__table td {
	padding: 12px 16px;
	border-top: 1px solid var(--bordure);
	color: var(--texte-doux);
	vertical-align: top;
}

.recup-paliers__table tbody tr:first-child td {
	border-top: 0;
}

.recup-paliers__table td:first-child {
	width: 110px;
	white-space: nowrap;
}

.recup-paliers__table tbody tr:nth-child(even) td {
	background: rgba(241, 234, 220, 0.35);
}

.recup-paliers__pastille {
	display: inline-block;
	color: var(--white);
	border-radius: 7px;
	padding: 5px 10px;
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.recup-paliers__note {
	font-size: 12px;
	font-style: italic;
	color: var(--texte-doux);
	margin: 12px 0 0;
}

/* --- En clair (coches et croix) --- */

.recup-en-clair {
	margin-top: 8px;
	margin-bottom: 28px;
}

.recup-en-clair--encadre {
	background: var(--cream);
	border-left: 3px solid var(--olive);
	border-radius: 0 10px 10px 0;
	padding: 18px 22px;
}

.recup-en-clair__kicker {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--olive-fonce);
	margin: 0 0 10px;
}

.recup-en-clair__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
	font-size: 14px;
	line-height: 1.55;
}

.recup-en-clair--grille .recup-en-clair__liste {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 26px;
	font-size: 14.5px;
	line-height: 1.6;
}

.recup-en-clair__liste li {
	display: flex;
	gap: 10px;
	color: var(--ink);
}

.recup-en-clair__liste svg {
	flex: none;
	margin-top: 3px;
}

.recup-en-clair__oui svg {
	color: var(--olive-fonce);
}

.recup-en-clair__non svg {
	color: var(--tag-chaud);
}

/* --- Chiffres du site --- */

.recup-stats-site {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--bordure);
	border: 1px solid var(--bordure);
	border-radius: 12px;
	overflow: hidden;
	margin-top: 8px;
	margin-bottom: 28px;
}

.recup-stats-site__cellule {
	background: var(--white);
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
}

.recup-stats-site__cellule dd {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-size: 24px;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
	margin: 0;
	order: -1;
}

.recup-stats-site__cellule dt {
	font-size: 11px;
	color: var(--texte-doux);
	margin-top: 4px;
}

/* --- Appel contact (bande sombre) --- */

.recup-cta-contact {
	background: var(--ink);
	border-radius: 12px;
	padding: 24px 26px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	margin-top: 8px;
	margin-bottom: 28px;
}

.recup-cta-contact__titre {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 115%;
	font-size: 20px;
	text-transform: uppercase;
	color: var(--cream);
	margin: 0;
}

.recup-cta-contact__texte {
	font-size: 13.5px;
	line-height: 1.6;
	color: rgba(241, 234, 220, 0.78);
	max-width: 460px;
	margin: 8px 0 0;
}

.recup-cta-contact__bouton {
	flex: none;
}

/* --- Responsive --- */

@media (max-width: 767px) {

	.recup-etapes__etape {
		grid-template-columns: 40px 1fr;
		gap: 12px;
		padding: 14px 0;
	}

	.recup-etapes__numero {
		font-size: 22px;
	}

	.recup-etapes__titre {
		font-size: 15px;
	}

	.recup-etapes__texte {
		font-size: 14px;
	}

	.recup-paliers__table td:first-child {
		width: auto;
	}

	.recup-en-clair--grille .recup-en-clair__liste {
		grid-template-columns: 1fr;
		gap: 11px;
	}

	.recup-stats-site {
		grid-template-columns: 1fr 1fr;
	}

	.recup-stats-site__cellule {
		padding: 14px 16px;
	}

	.recup-stats-site__cellule dd {
		font-size: 21px;
	}

	.recup-cta-contact {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		padding: 20px;
	}
}

/* --- Gouttière mobile de la colonne lisible (gabarit page) ---
   Le conteneur du gabarit n'a aucun padding : les bandes larges des pages
   money (.recup-top, .recup-pd…) filent bord à bord, c'est voulu. Mais les
   textes nus et les blocs éditoriaux touchaient les bords de l'écran —
   liste blanche explicite plutôt qu'une exclusion, pour ne jamais déranger
   les bandes déjà validées. */

@media (max-width: 767px) {

	.recup-page__entete {
		padding: 0 16px;
	}

	.recup-page__contenu > p,
	.recup-page__contenu > h2,
	.recup-page__contenu > h3,
	.recup-page__contenu > ul,
	.recup-page__contenu > ol,
	.recup-page__contenu > .recup-paliers,
	.recup-page__contenu > .recup-en-clair,
	.recup-page__contenu > .recup-stats-site,
	.recup-page__contenu > .recup-cta-contact,
	.recup-page__contenu > .recup-contact {
		margin-left: 16px;
		margin-right: 16px;
	}
}

/* ==========================================================================
   48. PLAN DU SITE (maquette « Pages éditoriales » 2026, section 06)
   Le plan HTML : compteur réel, grille de sections (silos, outils, le
   site), liens hiérarchisés — hub, catégorie indentée, money en olive.
   ========================================================================== */

.recup-plan__compteur {
	font-size: 13px;
	color: var(--texte-doux);
	margin: 0 0 26px;
}

.recup-plan__grille {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 36px 44px;
}

.recup-plan__titre {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 112%;
	font-size: 14px;
	text-transform: uppercase;
	color: var(--ink);
	padding-bottom: 9px;
	border-bottom: 2px solid var(--olive);
	margin: 0 0 12px;
}

.recup-plan__section + .recup-plan__section .recup-plan__titre {
	margin-top: 0;
}

.recup-plan__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 13.5px;
}

.recup-plan__lien a,
.recup-plan__lien a:visited {
	display: flex;
	gap: 8px;
	align-items: baseline;
	color: var(--ink);
	text-decoration: none;
}

.recup-plan__lien svg {
	flex: none;
	color: var(--olive-fonce);
	transform: translateY(1px);
}

.recup-plan__lien--categorie a {
	padding-left: 18px;
	color: var(--texte-doux);
}

.recup-plan__lien--money a {
	color: var(--olive-fonce);
	font-weight: 600;
}

.recup-plan__lien a:hover,
.recup-plan__lien a:focus,
.recup-plan__lien a:active {
	color: var(--olive-fonce);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.recup-plan__lien a:focus-visible {
	outline: 2px solid var(--olive-fonce);
	outline-offset: 2px;
}

@media (max-width: 1023px) {

	.recup-plan__grille {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 767px) {

	.recup-plan__compteur {
		margin: 0 16px 20px;
	}

	.recup-plan__grille {
		grid-template-columns: 1fr;
		gap: 26px;
		margin: 0 16px;
	}
}

/* ==========================================================================
   49. FORMULAIRE DE CONTACT (maquette « Pages éditoriales » 2026, § 05)
   Deux colonnes : le formulaire, puis les cartes d'à-côté (délai, motifs,
   partenariats). Empilé sur mobile.
   ========================================================================== */

.recup-contact {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 44px;
	align-items: start;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

/* --- Le formulaire --- */

.recup-contact__formulaire {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
}

.recup-contact__champ {
	margin: 0;
}

.recup-contact__duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.recup-contact__etiquette {
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--texte-doux);
	margin-bottom: 7px;
}

.recup-contact__formulaire input[type="text"],
.recup-contact__formulaire input[type="email"],
.recup-contact__formulaire select,
.recup-contact__formulaire textarea {
	width: 100%;
	background: var(--white);
	border: 1px solid rgba(17, 17, 17, 0.2);
	border-radius: 10px;
	padding: 13px 15px;
	font-family: var(--police-texte);
	font-size: 14px;
	color: var(--ink);
}

.recup-contact__formulaire textarea {
	resize: vertical;
	min-height: 150px;
}

.recup-contact__formulaire input:focus-visible,
.recup-contact__formulaire select:focus-visible,
.recup-contact__formulaire textarea:focus-visible {
	outline: 2px solid var(--olive-fonce);
	outline-offset: 1px;
}

.recup-contact__consentement {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--texte-doux);
}

.recup-contact__consentement input {
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	accent-color: var(--olive);
}

.recup-contact__formulaire .recup-cta-simple {
	align-self: flex-start;
}

/* Honeypot : hors écran (pas display:none — certains robots l'évitent). */
.recup-contact__piege {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	margin: 0;
}

/* --- États envoyé / erreur --- */

.recup-contact__confirmation {
	background: var(--vert-pale);
	border: 1px solid var(--olive);
	border-radius: 12px;
	padding: 24px 26px;
}

.recup-contact__confirmation-titre {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 115%;
	font-size: 19px;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0;
}

.recup-contact__confirmation-texte {
	font-size: 14px;
	line-height: 1.65;
	color: var(--texte-doux);
	margin: 9px 0 0;
}

.recup-contact__erreur {
	background: rgba(198, 67, 44, 0.08);
	border: 1px solid rgba(198, 67, 44, 0.45);
	border-radius: 10px;
	padding: 13px 16px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--ink);
	margin: 0 0 16px;
}

/* --- Les cartes d'à-côté --- */

.recup-contact__colonne-cartes {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.recup-contact__carte {
	background: var(--cream);
	border-radius: 12px;
	padding: 18px 20px;
}

.recup-contact__carte--partenariats {
	background: var(--white);
	border: 1px solid var(--bordure);
	border-left: 3px solid var(--tag-chaud);
	border-radius: 0 12px 12px 0;
}

.recup-contact__carte-kicker {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--olive-fonce);
	margin: 0 0 9px;
}

.recup-contact__carte--partenariats .recup-contact__carte-kicker {
	color: var(--tag-chaud);
}

.recup-contact__carte-texte {
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--texte-doux);
	margin: 0;
}

.recup-contact__carte-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ink);
}

.recup-contact__carte-liste li {
	display: flex;
	gap: 9px;
}

.recup-contact__carte-liste svg {
	flex: none;
	color: var(--olive-fonce);
	margin-top: 3px;
}

/* --- Responsive --- */

@media (max-width: 767px) {

	.recup-contact {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.recup-contact__duo {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   50. PAGE TEXTE (maquette « Pages éditoriales » 2026, section 04)
   Les pages légales : sommaire latéral collant généré depuis les H2,
   colonne de texte sobre, largeur totale 900.
   ========================================================================== */

.recup-page-texte {
	width: 100%;
	max-width: none;
	padding: 0;
}

.recup-page-texte .site-main {
	padding: 0;
}

.recup-texte__conteneur {
	background: var(--white);
	padding: 30px 48px 56px;
}

.recup-page-texte .recup-fil {
	max-width: 900px;
	margin: 0 auto 26px;
}

.recup-texte__grille {
	max-width: 900px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 230px minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}

/* --- Le sommaire collant --- */

.recup-texte__sommaire {
	position: sticky;
	top: 20px;
}

.recup-texte__sommaire-titre {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--texte-doux);
	margin: 0 0 12px;
}

.recup-texte__sommaire nav {
	display: flex;
	flex-direction: column;
}

.recup-texte__sommaire a,
.recup-texte__sommaire a:visited {
	border-left: 2px solid var(--bordure);
	padding: 7px 0 7px 13px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--texte-doux);
	text-decoration: none;
}

.recup-texte__sommaire a:hover,
.recup-texte__sommaire a:focus,
.recup-texte__sommaire a:active {
	color: var(--ink);
	border-left-color: var(--olive);
}

.recup-texte__sommaire a:focus-visible {
	outline: 2px solid var(--olive-fonce);
	outline-offset: 2px;
}

/* --- La colonne de texte --- */

.recup-texte__corps {
	max-width: 620px;
	min-width: 0;
}

.recup-texte__titre {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 115%;
	font-size: 34px;
	line-height: 1.08;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0;
}

.recup-texte__meta {
	font-size: 12.5px;
	color: var(--texte-doux);
	margin: 12px 0 30px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--bordure);
}

.recup-texte__contenu h2 {
	font-family: var(--police-texte);
	font-style: normal;
	font-stretch: normal;
	font-size: 17px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: normal;
	color: var(--ink);
	margin: 26px 0 10px;
	scroll-margin-top: 20px;
}

.recup-texte__contenu h2:first-child {
	margin-top: 0;
}

.recup-texte__contenu p {
	font-size: 14.5px;
	line-height: 1.8;
	color: var(--ink);
	margin: 0 0 16px;
}

.recup-texte__contenu ul,
.recup-texte__contenu ol {
	font-size: 14.5px;
	line-height: 1.8;
	color: var(--ink);
	margin: 0 0 16px;
	padding-left: 22px;
}

.recup-texte__contenu a,
.recup-texte__contenu a:visited {
	color: var(--olive-fonce);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.recup-texte__contenu a:hover,
.recup-texte__contenu a:focus,
.recup-texte__contenu a:active {
	color: var(--ink);
}

/* --- Responsive --- */

@media (max-width: 767px) {

	.recup-texte__conteneur {
		padding: 18px 16px 40px;
	}

	.recup-texte__grille {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	/* Carte compacte entre le fil et le titre — plus de collant. */
	.recup-texte__sommaire {
		position: static;
		background: var(--cream);
		border-radius: 12px;
		padding: 16px 18px;
	}

	.recup-texte__titre {
		font-size: 26px;
	}
}

/* ==========================================================================
   51. CATALOGUE « TOUTES NOS ANALYSES » (maquette « Marque, promos,
   tests » 2026, section 03)
   Pilules de filtres et de tri (liens réels), tableau des produits sur
   poste, lignes compactes sur mobile, pagination.
   ========================================================================== */

.recup-catalogue__conteneur {
	max-width: 1050px;
	margin: 0 auto;
}

/* --- Bande crème : compteur + pilules --- */

.recup-catalogue__hero {
	background: var(--cream);
	padding: 4px 44px 26px;
}

.recup-catalogue__compteur {
	font-size: 14px;
	color: var(--texte-doux);
	margin: 0;
}

.recup-catalogue__barre {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 20px;
	flex-wrap: wrap;
}

.recup-catalogue__filtres,
.recup-catalogue__tris {
	display: flex;
	gap: 9px;
	flex-wrap: wrap;
}

a.recup-catalogue__pilule,
a.recup-catalogue__pilule:visited {
	font-size: 12px;
	font-weight: 600;
	padding: 8px 15px;
	border-radius: 999px;
	border: 1px solid rgba(17, 17, 17, 0.18);
	color: var(--texte-doux);
	text-decoration: none;
	white-space: nowrap;
}

a.recup-catalogue__pilule:hover,
a.recup-catalogue__pilule:focus {
	border-color: var(--olive);
	color: var(--olive-fonce);
}

a.recup-catalogue__pilule:focus-visible {
	outline: 2px solid var(--olive-fonce);
	outline-offset: 2px;
}

/* Fond olive foncé : blanc sur --olive ne tient pas le contraste AA
   en 12 px (audit du 14/08/2026). */
a.recup-catalogue__pilule--active,
a.recup-catalogue__pilule--active:visited,
a.recup-catalogue__pilule--active:hover,
a.recup-catalogue__pilule--active:focus {
	background: var(--olive-fonce);
	border-color: var(--olive-fonce);
	color: var(--white);
}

/* --- Bande blanche : le tableau --- */

.recup-catalogue__corps {
	background: var(--white);
	border-top: 1px solid var(--bordure);
	padding: 26px 44px 44px;
}

.recup-catalogue__table {
	border: 1px solid var(--bordure);
	border-radius: 12px;
	overflow: hidden;
	font-size: 13px;
}

.recup-catalogue__entetes,
.recup-catalogue__ligne {
	display: grid;
	grid-template-columns: 64px 1.6fr 0.9fr 90px 0.9fr 0.7fr 130px;
	gap: 14px;
	align-items: center;
	padding: 12px 20px;
}

.recup-catalogue__entetes {
	background: var(--cream);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--texte-doux);
	padding-top: 11px;
	padding-bottom: 11px;
}

.recup-catalogue__ligne {
	border-top: 1px solid var(--bordure);
}

.recup-catalogue__vignette {
	width: 52px;
	height: 40px;
	background: var(--white);
	border-radius: 7px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.recup-catalogue__vignette img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.recup-catalogue__produit {
	min-width: 0;
}

a.recup-catalogue__nom,
a.recup-catalogue__nom:visited {
	font-weight: 600;
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--olive-clair);
}

a.recup-catalogue__nom:hover,
a.recup-catalogue__nom:focus,
a.recup-catalogue__nom:active {
	color: var(--olive-fonce);
	text-decoration-color: currentColor;
}

a.recup-catalogue__nom:focus-visible {
	outline: 2px solid var(--olive-fonce);
	outline-offset: 2px;
}

.recup-catalogue__meta-mobile {
	display: none;
}

.recup-catalogue__badge-silo {
	display: inline-block;
	border: 1px solid var(--olive);
	color: var(--olive-fonce);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 8px;
}

.recup-catalogue__date {
	color: var(--texte-doux);
	font-size: 12px;
}

.recup-catalogue__prix,
.recup-catalogue__cellule-prix {
	text-align: right;
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-size: 15px;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
}

.recup-catalogue__cellule-prix {
	font-family: inherit;
	font-style: normal;
	font-weight: 700;
	font-size: 10px;
}

.recup-catalogue__corps .recup-resultats__pagination {
	margin-top: 22px;
}

.recup-catalogue__corps .recup-resultats__pagination .nav-links {
	justify-content: center;
}

/* --- État vide des filtres --- */

.recup-catalogue__vide {
	border: 1px solid var(--bordure);
	border-radius: 12px;
	padding: 30px 26px;
	text-align: center;
}

.recup-catalogue__vide-titre {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-stretch: 115%;
	font-size: 18px;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0;
}

.recup-catalogue__vide-texte {
	font-size: 13.5px;
	color: var(--texte-doux);
	margin: 9px 0 18px;
}

/* --- Responsive --- */

@media (max-width: 1023px) {

	.recup-catalogue__entetes,
	.recup-catalogue__ligne {
		grid-template-columns: 64px 1.6fr 0.9fr 90px 0.7fr 130px;
	}

	.recup-catalogue__date {
		display: none;
	}

	.recup-catalogue__entetes span:nth-child(5) {
		display: none;
	}
}

@media (max-width: 767px) {

	.recup-catalogue__hero {
		padding: 0 16px 16px;
	}

	.recup-catalogue__compteur {
		font-size: 12px;
	}

	/* Pilules : une seule rangée à défilement horizontal. */
	.recup-catalogue__barre {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		gap: 7px;
		margin-top: 13px;
		padding-bottom: 4px;
	}

	.recup-catalogue__filtres,
	.recup-catalogue__tris {
		flex: none;
		flex-wrap: nowrap;
		gap: 7px;
	}

	a.recup-catalogue__pilule {
		font-size: 11.5px;
		padding: 8px 13px;
	}

	.recup-catalogue__corps {
		padding: 14px 16px 28px;
	}

	/* Le tableau devient une pile de cartes compactes. */
	.recup-catalogue__table {
		border: 0;
		border-radius: 0;
		overflow: visible;
		display: flex;
		flex-direction: column;
		gap: 9px;
	}

	.recup-catalogue__entetes {
		display: none;
	}

	.recup-catalogue__ligne {
		grid-template-columns: 52px minmax(0, 1fr) auto;
		gap: 12px;
		border: 1px solid var(--bordure);
		border-radius: 11px;
		padding: 11px 13px;
		position: relative;
	}

	/* Toute la carte devient la cible tactile du lien (WCAG 2.5.8). */
	a.recup-catalogue__nom::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	.recup-catalogue__silo,
	.recup-catalogue__date,
	.recup-catalogue__prix,
	.recup-catalogue__action {
		display: none;
	}

	a.recup-catalogue__nom {
		font-size: 12.5px;
		text-decoration: none;
	}

	.recup-catalogue__meta-mobile {
		display: block;
		font-size: 10.5px;
		color: var(--texte-doux);
		margin-top: 3px;
	}
}

/* ==========================================================================
   52. LISIBILITÉ DES NOTES (demandes du 17/08/2026)
   Le chiffre d'une barre prend la couleur de son palier ; les paliers
   clairs passent leur texte en encre pour rester lisibles ; les colonnes
   de barres restent alignées quand un libellé passe sur deux lignes.
   ========================================================================== */

/* --- Le chiffre reprend la couleur de la note --- */

.recup-infobulle__ligne.recup-note-fond--p1 .recup-infobulle__entete strong {
	color: var(--note-p1-texte);
}

.recup-infobulle__ligne.recup-note-fond--p2 .recup-infobulle__entete strong {
	color: var(--note-p2-texte);
}

.recup-infobulle__ligne.recup-note-fond--p3 .recup-infobulle__entete strong {
	color: var(--note-p3-texte);
}

.recup-infobulle__ligne.recup-note-fond--p4 .recup-infobulle__entete strong {
	color: var(--note-p4-texte);
}

.recup-infobulle__ligne.recup-note-fond--p5 .recup-infobulle__entete strong {
	color: var(--note-p5-texte);
}

.recup-infobulle__ligne.recup-note-fond--p6 .recup-infobulle__entete strong {
	color: var(--note-p6-texte);
}

/* La classe de palier sur la ligne ne doit pas peindre son fond : elle ne
   sert qu'à transmettre la couleur au chiffre et à la barre. */
.recup-infobulle__ligne[class*="recup-note-fond--"] {
	background-color: transparent;
}

/* --- Contraste des paliers clairs, dans TOUS les états --- */

/* Blanc sur ambre ou vert-jaune vif ne tient pas le contraste : chaque
   palier porte sa propre couleur de texte, identique au repos, au survol
   et au focus. Sans cette constance, la note virait au noir sous la
   souris (constat du 17/08/2026). */
.recup-note-fond--p1,
.recup-note-fond--p1:hover,
.recup-note-fond--p1:focus,
.recup-note-fond--p1:active {
	color: var(--note-p1-sur);
}

.recup-note-fond--p2,
.recup-note-fond--p2:hover,
.recup-note-fond--p2:focus,
.recup-note-fond--p2:active {
	color: var(--note-p2-sur);
}

.recup-note-fond--p3,
.recup-note-fond--p3:hover,
.recup-note-fond--p3:focus,
.recup-note-fond--p3:active {
	color: var(--note-p3-sur);
}

.recup-note-fond--p4,
.recup-note-fond--p4:hover,
.recup-note-fond--p4:focus,
.recup-note-fond--p4:active {
	color: var(--note-p4-sur);
}

.recup-note-fond--p5,
.recup-note-fond--p5:hover,
.recup-note-fond--p5:focus,
.recup-note-fond--p5:active {
	color: var(--note-p5-sur);
}

.recup-note-fond--p6,
.recup-note-fond--p6:hover,
.recup-note-fond--p6:focus,
.recup-note-fond--p6:active {
	color: var(--note-p6-sur);
}

/* --- Colonnes de barres alignées --- */

/* Les lignes s'étirent sur toute la hauteur de leur cellule et poussent la
   barre en bas : deux libellés de longueurs différentes gardent leurs
   barres au même niveau. */
.recup-lecteurs__moyennes,
.recup-lecteurs__criteres,
.recup-pd__criteres {
	align-items: stretch;
}

.recup-lecteurs__moyennes .recup-infobulle__ligne,
.recup-lecteurs__criteres .recup-infobulle__ligne,
.recup-pd__criteres .recup-infobulle__ligne {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
}

.recup-lecteurs__moyennes .recup-infobulle__entete,
.recup-lecteurs__criteres .recup-infobulle__entete,
.recup-pd__criteres .recup-infobulle__entete {
	flex: 1;
	align-items: flex-start;
}

/* --- Les deux cartes de note, équilibrées --- */

/* Colonnes de largeur égale, quel que soit leur nombre : une carte seule
   (produit sans avis) occupe toute la largeur, deux cartes se partagent
   l'espace à parts égales. Avant, chacune se dimensionnait sur son
   contenu, d'où l'asymétrie signalée le 17/08/2026. */
.recup-fiche-hero__notes {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 12px;
	align-items: stretch;
	margin-top: 16px;
}

.recup-note-carte {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 10px;
	min-width: 0;
	padding: 12px 15px;
}

/* Même hauteur de libellé des deux côtés, flèche comprise. */
.recup-note-carte > em {
	min-height: 14px;
	margin-bottom: 0;
}

/* Les deux chiffres à la même échelle : la pastille de notre note et le
   score ambre des lecteurs se répondent au lieu de se concurrencer. */
.recup-note-carte .recup-score__note {
	font-size: 23px;
	padding: 5px 12px;
}

.recup-note-carte--avis .recup-avis-note {
	font-size: 23px;
	line-height: 1.1;
}

@media (max-width: 767px) {

	.recup-note-carte {
		padding: 11px 13px;
	}

	.recup-note-carte .recup-score__note,
	.recup-note-carte--avis .recup-avis-note {
		font-size: 21px;
	}
}

/* --- Les deux cartes, modèle Kimovil : un bloc plein, un bloc clair --- */

/* Notre note : la carte entière prend la couleur du palier, comme le bloc
   « Note Ki » de Kimovil. La pastille intérieure n'a plus lieu d'être. */
.recup-note-carte--notre {
	border-color: transparent;
}

.recup-note-carte--notre > em {
	color: inherit;
	opacity: 0.85;
}

/* Le chiffre se pose à même le fond coloré : plus de pastille dans la
   pastille, et la typographie répond exactement à celle des lecteurs. */
.recup-note-carte--notre .recup-score__note,
.recup-note-carte--notre .recup-score__note:hover,
.recup-note-carte--notre .recup-score__note:focus {
	background-color: transparent;
	color: inherit;
	padding: 0;
	font-size: 30px;
	line-height: 1;
}

.recup-note-carte--notre .recup-score__note small {
	opacity: 0.75;
}

/* Avis lecteurs : bloc clair, même gabarit, même échelle de chiffre. */
.recup-note-carte--avis .recup-avis-note {
	font-size: 30px;
	line-height: 1;
}

/* Cartes plus compactes : elles cadraient trop haut pour ce qu'elles
   portent (demande du 17/08/2026). */
.recup-note-carte {
	padding: 10px 14px;
	gap: 6px;
}

.recup-note-carte > em {
	font-size: 8.5px;
	letter-spacing: 0.11em;
}

@media (max-width: 767px) {

	.recup-note-carte--notre .recup-score__note,
	.recup-note-carte--avis .recup-avis-note {
		font-size: 26px;
	}

	.recup-note-carte {
		padding: 9px 12px;
	}
}

/* --- Une seule typographie pour les deux notes --- */

/* La note des lecteurs empruntait la police de texte quand la nôtre était
   en Archivo italique : les deux blocs ne se répondaient pas. Elles
   partagent désormais la même écriture, seule la couleur les distingue. */
.recup-note-carte--avis .recup-avis-note,
.recup-note-carte--avis .recup-avis-note:visited,
.recup-note-carte--avis .recup-avis-note:hover,
.recup-note-carte--avis .recup-avis-note:focus {
	font-family: var(--police-titres);
	font-style: italic;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: normal;
}

/* Libellé du bloc coloré : blanc plein, pas d'atténuation qui le ferait
   passer sous le seuil de lisibilité. */
.recup-note-carte--notre > em {
	opacity: 1;
}

/* --- Lien d'ancre vers le détail des notes --- */

/* Le libellé de la carte porte désormais un lien vers la section
   « Notre analyse » : le détail complet est à un clic, sans dépendre de
   l'ouverture du panneau. */
.recup-note-carte--notre > em {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

a.recup-note-carte__ancre,
a.recup-note-carte__ancre:visited {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: none;
	font-size: 8.5px;
	letter-spacing: 0.06em;
	color: inherit;
	text-decoration: none;
	opacity: 0.9;
}

a.recup-note-carte__ancre:hover,
a.recup-note-carte__ancre:focus,
a.recup-note-carte__ancre:active {
	color: inherit;
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 2px;
}

a.recup-note-carte__ancre:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Sur mobile, le libellé long passerait à la ligne : on garde l'icône
   seule, le texte reste accessible aux lecteurs d'écran. */
@media (max-width: 767px) {

	a.recup-note-carte__ancre {
		font-size: 0;
		gap: 0;
	}

	a.recup-note-carte__ancre svg {
		width: 13px;
		height: 13px;
	}
}

/* --- Aucun effet de survol sur les cartes de note --- */

/* Ces cartes ne réagissent plus au passage de la souris : ni fond, ni
   contour, ni dimension. Seul le clic sur le chiffre ouvre le détail.
   Un effet de survol sur un bloc de cette taille se lit comme un
   changement de gabarit (constat du 17/08/2026). */
.recup-note-carte,
.recup-note-carte:hover,
.recup-note-carte:focus-within,
.recup-note-carte--avis,
.recup-note-carte--avis:hover,
.recup-note-carte--avis:focus-within {
	border-width: 1px;
	border-style: solid;
	transition: none;
}

.recup-note-carte--avis,
.recup-note-carte--avis:hover,
.recup-note-carte--avis:focus-within {
	border-color: var(--bordure);
	background-color: var(--white);
}

.recup-note-carte--notre,
.recup-note-carte--notre:hover,
.recup-note-carte--notre:focus-within {
	border-color: transparent;
}

/* Le chiffre garde exactement la même boîte dans tous les états. */
.recup-note-carte .recup-score__note,
.recup-note-carte .recup-score__note:hover,
.recup-note-carte .recup-score__note:focus,
.recup-note-carte .recup-score__note:active,
.recup-note-carte .recup-avis-note,
.recup-note-carte .recup-avis-note:hover,
.recup-note-carte .recup-avis-note:focus,
.recup-note-carte .recup-avis-note:active {
	padding: 0;
	border: 0;
	transform: none;
	transition: none;
}

/* --- Le lien de la bulle vers l'analyse --- */

.recup-infobulle__panneau a.recup-infobulle__lien {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--bordure);
	width: 100%;
	justify-content: center;
}

/* --- Toute la carte ouvre le détail de notre note --- */

/* Le déclencheur s'étend à la carte entière : viser un chiffre de 30 px
   demandait de la précision, alors que le bloc est la cible évidente
   (demande du 17/08/2026). Le panneau reste au-dessus de cette zone, ses
   propres liens restent donc cliquables. */
.recup-note-carte--notre {
	cursor: pointer;
}

.recup-note-carte--notre .recup-infobulle__declencheur::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.recup-note-carte--notre .recup-infobulle {
	position: static;
}

.recup-note-carte--notre .recup-infobulle__panneau {
	top: 100%;
	left: 0;
	margin-top: 6px;
}

/* Pas d'anneau de focus sur la carte : avec son décalage, il apparaissait
   au moindre appui tactile et se lisait comme un agrandissement du bloc
   (constat du 17/08/2026). Le focus reste signalé au clavier, sur le
   déclencheur lui-même, en trait intérieur qui ne déborde pas. */
.recup-note-carte--notre .recup-infobulle__declencheur:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

/* --- Les deux chiffres à la même hauteur --- */

/* La carte des lecteurs porte une ligne de plus (« 3 avis ») : avec un
   contenu poussé aux extrémités, son chiffre remontait de 22 px par
   rapport au nôtre. Les deux blocs empilent désormais leur contenu depuis
   le haut, ce qui aligne les chiffres quelle que soit la ligne en trop. */
/* Contenu empilé depuis le haut, sans rien pousser vers le bas : les deux
   libellés ayant la même hauteur, les deux chiffres tombent au même
   niveau, et la ligne « 3 avis » s'ajoute simplement dessous. */
.recup-note-carte {
	justify-content: flex-start;
}

/* Sans avis, l'empilement depuis le haut laissait un vide sous la note :
   l'invitation d'en face tient sur deux lignes et impose sa hauteur. Les
   deux valeurs s'ancrent alors en bas, symétriques (retour du 21/08/2026).
   Avec des avis, l'alignement par le haut ci-dessus reprend la main. */
.recup-fiche-hero__notes:has(.recup-note-carte--avis-vide) .recup-note-carte--notre .recup-infobulle {
	margin-top: auto;
	margin-bottom: auto;
}

.recup-note-carte--avis-vide .recup-note-carte__invite {
	justify-content: center;
}

.recup-note-carte--avis .recup-infobulle {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 7px;
	row-gap: 0;
}

@media (max-width: 767px) {

	/* Le nombre d'avis reste sur la ligne de la moyenne, comme sur poste :
	   passé dessous, il décalait la lecture des deux blocs (demande du
	   17/08/2026). */
	.recup-avis-ligne {
		column-gap: 6px;
	}

	.recup-note-carte--avis a.recup-avis-lien {
		font-size: 10.5px;
	}
}

/* --- Moyenne et nombre d'avis sur une même ligne --- */

/* Enveloppe des deux liens de la carte lecteurs : la moyenne et le nombre
   d'avis se lisent d'un bloc, alignés sur la même ligne de base, à toutes
   les largeurs d'écran. */
.recup-avis-ligne {
	display: flex;
	align-items: baseline;
	flex-wrap: nowrap;
	column-gap: 7px;
	min-width: 0;
}

.recup-avis-ligne .recup-avis-lien {
	flex: none;
	white-space: nowrap;
}