/*
Theme Name: 15dumois
Theme URI: https://15dumois.fr/
Author: 15dumois
Description: Thème propriétaire de 15dumois — média pratique du budget du quotidien. Composition dirigée par le mois, les montants et les relevés de prix. Aucun constructeur de pages, aucun JavaScript côté public, aucune dépendance externe, aucune valeur du site écrite dans les gabarits.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 15dumois
Tags: custom-colors, custom-menu, featured-images, accessibility-ready, translation-ready
*/

/* ==========================================================================
   15dumois — « la règle du mois »
   Trois signes propriétaires, employés partout :
     la TUILE      un quantième dans un carré plein
     la RÈGLE      une graduation, une jauge de mois, un pivot au 15
     le SURLIGNEUR le montant qui compte est surligné, jamais transformé en bouton
   La page est structurée par le mois, les montants, les évolutions et les
   opportunités — pas par une grille d'articles.
   ========================================================================== */

:root{
  /* Encre et surfaces */
  --nuit:#0B1226;
  --nuit-2:#16203D;
  --cobalt:#1F35D6;
  --cobalt-2:#3B4FF0;
  --cobalt-pale:#EDF0FF;
  --cobalt-line:#C9D1FA;
  --gris-fond:#F5F7FD;
  --bord:#D9DEF0;
  --blanc:#FFFFFF;
  --doux:#5A6379;
  --faible:#5F6878;   /* 5.24:1 sur le gris de fond — la valeur précédente ne tenait pas AA */
  /* Signaux */
  --jaune:#FFC42E;
  --jaune-pale:#FFF4D6;
  --carmin:#C22B54;
  --carmin-pale:#FCE9EF;
  --vert:#0B7048;   /* 6.13:1 sur blanc, 5.43:1 sur vert pâle (AA) */
  --vert-pale:#E4F5EE;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:88px;

  --titre:'Space Grotesk','Public Sans',system-ui,sans-serif;
  --texte:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --data:'IBM Plex Mono',ui-monospace,Menlo,monospace;

  --conteneur:1280px;
  --r:10px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--blanc); color:var(--nuit); font-family:var(--texte); font-size:16.5px; line-height:1.6}
img{max-width:100%; height:auto; display:block}
figure{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
:focus-visible{outline:3px solid var(--cobalt); outline-offset:2px; border-radius:3px}
table{border-collapse:collapse; width:100%}
th,td{text-align:left; vertical-align:top}

.conteneur{max-width:var(--conteneur); margin:0 auto; padding:0 var(--s5)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saut{position:absolute; left:-9999px; top:0; background:var(--cobalt); color:var(--blanc); padding:12px 18px; z-index:100}
.saut:focus{left:var(--s5); top:var(--s2)}
.data{font-family:var(--data); font-variant-numeric:tabular-nums}
.doux{color:var(--doux)}
.micro{font-size:13px; color:var(--doux); margin:0}

/* --- Signe 1 : la tuile des quantièmes ---------------------------------- */
.tuile{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--titre); font-weight:700; letter-spacing:-.03em;
  background:var(--cobalt); color:var(--blanc);
  border-radius:7px; padding:0 .32em; line-height:1;
}
.tuile--s{font-size:13px; height:20px; border-radius:4px}
.tuile--m{font-size:17px; height:28px; border-radius:6px}
.tuile--l{font-size:30px; height:46px; border-radius:9px}
.tuile--xl{font-size:52px; height:78px; border-radius:14px}
.tuile--pivot{background:var(--jaune); color:var(--nuit)}
.tuile--clair{background:var(--blanc); color:var(--cobalt)}
.tuile--contour{background:transparent; color:inherit; box-shadow:inset 0 0 0 2px currentColor}

/* --- Signe 2 : la règle graduée ----------------------------------------- */
.regle{position:relative; display:flex; justify-content:space-between; align-items:flex-start; padding-top:14px}
.regle::before{content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--bord)}
.jauge{position:absolute; left:0; top:0; height:2px; background:var(--cobalt)}
.regle__j{position:relative; font-family:var(--data); font-size:12px; color:var(--doux)}
.regle__j::before{content:""; position:absolute; left:50%; top:-14px; width:2px; height:9px; background:var(--bord)}
.regle__j--pivot{color:var(--nuit); font-weight:600}
.regle__j--pivot::before{background:var(--jaune); height:14px; top:-14px; width:4px}
.regle__j--auj{color:var(--blanc); background:var(--cobalt); border-radius:5px; padding:2px 7px; margin-top:-4px}
.regle__j--auj::before{top:-16px; background:var(--cobalt); width:3px}
.regle__legende{font-family:var(--data); font-size:12px; color:var(--doux); margin:10px 0 0}

/* --- Signe 3 : le surligneur -------------------------------------------- */
.surligne{background:var(--jaune); color:var(--nuit); padding:1px 6px 2px; border-radius:4px; font-family:var(--data); font-variant-numeric:tabular-nums; font-weight:600}
.surligne--clair{background:var(--jaune-pale)}

/* --- Bandeau de contenu fictif ------------------------------------------ */
.proto{background:var(--nuit); color:#D6DCF2; font-family:var(--data); font-size:11.5px; letter-spacing:.04em; padding:8px var(--s5); text-align:center; margin:0}
.proto strong{color:var(--jaune)}

/* --- En-tête ------------------------------------------------------------ */
.entete{border-bottom:1px solid var(--bord); background:var(--blanc)}
.entete__haut{display:flex; align-items:center; justify-content:space-between; gap:var(--s5); padding-top:var(--s4); padding-bottom:var(--s3)}
.marque{display:inline-flex; align-items:center; gap:9px}
.marque__mot{font-family:var(--titre); font-weight:700; font-size:27px; letter-spacing:-.035em; line-height:1}
.marque__pt{color:var(--cobalt)}
/* Le logo de l'identité validée : la hauteur commande, la largeur suit le
   rapport du dessin (348 × 100). 40 px sur grand écran, 34 px sur écran étroit. */
.marque__logo{display:block; height:40px; width:auto}
.entete__outils{display:flex; align-items:center; gap:var(--s3)}
.outil{font-family:var(--data); font-size:12.5px; color:var(--doux); padding:7px 11px; border:1px solid var(--bord); border-radius:999px}
.outil:hover{border-color:var(--cobalt); color:var(--cobalt); text-decoration:none}
/* La fiche officielle du fabricant : un lien de lecture, pas un bouton d'achat.
   Même convention que les liens du corps de texte — souligné, cobalt. */
.lien-fabricant a{color:var(--cobalt); text-decoration:underline; text-underline-offset:3px}
.lien-fabricant a:hover{color:var(--cobalt-2)}
.lien-fabricant .micro{color:var(--faible)}
.outil--lien{color:var(--cobalt); border-color:var(--cobalt)}
.outil--lien:hover{background:var(--cobalt); color:var(--blanc)}
.outil--fort{background:var(--cobalt); border-color:var(--cobalt); color:var(--blanc)}
.outil--fort:hover{background:var(--cobalt-2); border-color:var(--cobalt-2); color:var(--blanc)}
.mois .outil--fort{background:var(--blanc); border-color:var(--blanc); color:var(--cobalt)}
.mois .outil--fort:hover{background:var(--jaune); border-color:var(--jaune); color:var(--nuit)}
.entete__regle{padding-bottom:var(--s3)}
.rubriques{display:flex; flex-wrap:wrap; gap:0 var(--s4); border-top:1px solid var(--bord); padding-top:var(--s2); padding-bottom:var(--s2)}
.rubriques a{font-size:14.5px; font-weight:500; color:var(--nuit-2); padding:6px 0}
.rubriques a[aria-current]{color:var(--cobalt); box-shadow:inset 0 -2px 0 var(--cobalt)}
.rubriques__sep{color:var(--cobalt-line); font-family:var(--data)}
.rubriques ul{display:flex; flex-wrap:wrap; gap:0 var(--s4); align-items:center; list-style:none; margin:0; padding:0}
.rubriques li{padding:0; display:flex; align-items:center}
/* Le séparateur appartient à la présentation, pas au contenu : il ne doit donc
   pas être écrit dans le menu que l'éditeur administre. */
.rubriques li + li::before{content:"/"; font-family:var(--data); font-size:13px; color:var(--cobalt-line); margin-right:var(--s4)}
.rubriques .current-menu-item a{color:var(--cobalt)}

/* Rubriques sur écran étroit. Le bouton et le repli n'existent que là : sur
   grand écran la navigation reste visible, sur une seule ligne, sans bouton.
   Sans JavaScript, rien n'est masqué — les rubriques s'affichent comme avant et
   le bouton n'est pas rendu. Le panneau est un bandeau, pas un plein écran. */
.entete__menu{display:none; align-items:center; justify-content:center; width:44px; height:36px; padding:0; background:none; border:1px solid var(--bord); border-radius:999px; cursor:pointer; flex:0 0 auto}
.entete__menu-ic{position:relative; display:block; width:16px; height:2px; background:var(--nuit)}
.entete__menu-ic::before,.entete__menu-ic::after{content:''; position:absolute; left:0; width:16px; height:2px; background:var(--nuit)}
.entete__menu-ic::before{top:-5px}
.entete__menu-ic::after{top:5px}
.entete__menu:hover{border-color:var(--cobalt)}
.entete__menu:hover .entete__menu-ic,.entete__menu:hover .entete__menu-ic::before,.entete__menu:hover .entete__menu-ic::after{background:var(--cobalt)}
.entete__menu[aria-expanded="true"]{background:var(--cobalt); border-color:var(--cobalt)}
.entete__menu[aria-expanded="true"] .entete__menu-ic,.entete__menu[aria-expanded="true"] .entete__menu-ic::before,.entete__menu[aria-expanded="true"] .entete__menu-ic::after{background:var(--blanc)}
@media (max-width:720px){
  .marque__logo{height:34px}
  /* La pastille « Le fil du mois » laisse la place au bouton : la frise est
     juste en dessous et l'entrée existe aussi dans le menu et dans le pied. */
  .entete__outils .outil--fort{display:none}
  .js .entete__menu{display:inline-flex}
  .js .rubriques{display:none}
  .js .rubriques--ouvert{display:flex; background:var(--cobalt-pale)}
}

/* --- Ruban des prix vérifiés ------------------------------------------- */
.prixruban{background:var(--nuit); color:var(--blanc); padding:12px 0; overflow:hidden}
.prixruban__zone{display:flex; align-items:center; gap:var(--s4)}
.prixruban__t{font-family:var(--data); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--jaune); flex:0 0 auto}
.prixruban__cadre{position:relative; display:flex; align-items:center; gap:var(--s2); min-width:0; flex:1 1 auto}
.prixruban__in{display:flex; align-items:center; gap:var(--s5); white-space:nowrap; overflow-x:auto; scrollbar-width:none;
  min-width:0; flex:1 1 auto;
  /* Le ruban défile horizontalement : l'amorce dit qu'il y a une suite, et la
     zone est atteignable au clavier (2.1.1) car elle est défilable. */
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 56px),transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 56px),transparent 100%)}
.prixruban__in::-webkit-scrollbar{display:none}
.prixruban__in:focus-visible{outline:3px solid var(--jaune); outline-offset:2px}
.prixruban__in--glisse{cursor:grabbing; user-select:none}
/* Les flèches n'apparaissent que si le ruban dépasse réellement (classe posée
   par le script), et jamais là où le doigt sait déjà faire défiler le ruban. */
.prixruban__n{display:none; place-items:center; width:34px; height:34px; padding:0; cursor:pointer;
  border:1px solid rgba(255,255,255,.28); border-radius:999px; background:rgba(255,255,255,.06); color:var(--blanc)}
.prixruban__n:hover,.prixruban__n:focus-visible{border-color:var(--jaune); color:var(--jaune)}
.prixruban__n svg{display:block}
.prixruban--defilable .prixruban__n{display:grid}
.prixruban--debut .prixruban__n--avant,.prixruban--fin .prixruban__n--apres{opacity:.3}
.prixruban__i{display:flex; align-items:baseline; gap:var(--s3); flex:0 0 auto; padding-left:var(--s5); border-left:1px solid rgba(255,255,255,.16);
  color:inherit; text-decoration:none}
.prixruban__i:first-child{padding-left:0; border-left:0}
.prixruban__i:hover .prixruban__v,.prixruban__i:focus-visible .prixruban__v{color:var(--jaune)}
.prixruban__i:hover .prixruban__nom,.prixruban__i:focus-visible .prixruban__nom{color:var(--blanc)}
.prixruban__i:focus-visible{outline:3px solid var(--jaune); outline-offset:3px}
.prixruban__nom{font-size:14px; color:#C8D0EC}
.prixruban__v{font-family:var(--data); font-size:16px; font-weight:600}
.prixruban__d{font-family:var(--data); font-size:12.5px; color:var(--jaune)}
.prixruban__d--h{color:#FF9FB6}

/* --- Le Fil du mois ----------------------------------------------------- */
.mois{background:var(--cobalt); color:var(--blanc); padding:var(--s7) 0 var(--s8)}
.mois__tete{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s5); flex-wrap:wrap; margin-bottom:var(--s7)}
.mois__titre{font-family:var(--titre); font-weight:700; font-size:clamp(26px,3.4vw,42px); letter-spacing:-.03em; margin:0; display:flex; align-items:center; gap:var(--s3)}
.mois__sous{font-size:15px; color:#D5DBFF; margin:6px 0 0}
.mois__piste{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--s5); position:relative}
.mois__piste::before{content:""; position:absolute; left:0; right:0; top:23px; height:2px; background:rgba(255,255,255,.28)}
.jalon{position:relative; display:flex; flex-direction:column}
.jalon__tete{display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s3)}
.jalon__t{font-family:var(--titre); font-size:19px; line-height:1.2; letter-spacing:-.02em; margin:0}
/* Un titre cliquable doit se voir cliquable : le soulignement arrive au survol,
   et le focus clavier reste franc. */
.jalon__t a{color:var(--blanc); border-bottom:1px solid transparent}
.jalon__t a:hover,.jalon__t a:focus-visible{border-bottom-color:currentColor}
.jalon__d{font-size:14px; color:#D5DBFF; margin:6px 0 0}
.jalon__e{font-family:var(--data); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  /* L'état et le type se posent en bas de carte : d'un jalon à l'autre, ces
     repères s'alignent, quels que soient la longueur du titre et du texte. */
  margin:auto 0 0; align-self:flex-start; display:inline-block; padding:3px 8px; border-radius:999px}
.jalon__e--now{background:var(--jaune); color:var(--nuit); font-weight:600}
.jalon__e--venir{border:1px solid rgba(255,255,255,.4); color:#E7EAFF}
.jalon--pivot .jalon__t{font-size:22px}

/* --- Blocs -------------------------------------------------------------- */
.bloc{padding-top:var(--s8)}
.bloc__tete{display:flex; align-items:flex-start; gap:var(--s3); margin-bottom:var(--s6); flex-wrap:wrap}
.bloc__t{font-family:var(--data); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--doux); margin:0}
/* Le filet se cale sur la première ligne du titre : quand le titre passe sur
   deux lignes, il ne le traverse plus par le milieu. */
.bloc__filet{flex:1 1 auto; height:1px; background:var(--bord); margin-top:.68em}

/* --- Une ---------------------------------------------------------------- */
.une{display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1.35fr) minmax(0,.85fr); gap:var(--s7)}
.entree{border-top:2px solid var(--nuit); padding-top:var(--s4)}
.entree__t{font-family:var(--data); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--cobalt); margin:0 0 var(--s5)}
.entree__v{font-family:var(--titre); font-weight:700; font-size:clamp(38px,4.2vw,56px); line-height:.94; letter-spacing:-.045em; margin:0}
.entree__v .surligne{font-family:inherit; padding:0 8px 3px}
.entree__l{font-size:15px; color:var(--nuit-2); margin:var(--s4) 0 0}
.entree__src{font-family:var(--data); font-size:11.5px; color:var(--doux); margin-top:var(--s5); border-top:1px solid var(--bord); padding-top:var(--s3)}
.entree__poids{margin:var(--s4) 0 0; font-size:14.5px; color:var(--nuit-2)}
.entree__poids a{color:inherit; border-bottom:1px solid var(--cobalt-line)}
.entree__poids a:hover,.entree__poids a:focus-visible{border-bottom-color:var(--cobalt); color:var(--cobalt)}
.une__lead{position:relative}
.une__photo{margin-top:var(--s5); border-radius:var(--r); overflow:hidden; background:var(--gris-fond); position:relative; display:block}
.une__photo img{width:100%; aspect-ratio:4/3; object-fit:cover; max-height:300px}
.une__etq{display:inline-flex; align-items:center; gap:var(--s2); margin-top:var(--s5); font-family:var(--data); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--cobalt)}
.une__t{font-family:var(--titre); font-weight:700; font-size:clamp(28px,3.6vw,44px); line-height:1.05; letter-spacing:-.035em; margin:var(--s3) 0 0}
.une__t a{color:inherit}
.une__t a:hover,.une__t a:focus-visible{color:var(--cobalt)}
.une__c{font-size:18px; color:var(--nuit-2); margin:var(--s4) 0 0; max-width:56ch}
.une__m{font-family:var(--data); font-size:12px; color:var(--doux); margin-top:var(--s4); display:flex; gap:var(--s4); flex-wrap:wrap}

/* Brèves : une liste à graduations, pas des cartes */
.breves{border-top:2px solid var(--nuit); padding-top:var(--s4)}
.breves__t{font-family:var(--data); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--doux); margin:0 0 var(--s4)}
.breve{display:grid; grid-template-columns:54px minmax(0,1fr); gap:var(--s4); padding:var(--s4) 0; border-bottom:1px solid var(--bord)}
.breve:last-child{border-bottom:0}
.breve__q{font-family:var(--data); font-size:12px; color:var(--cobalt); font-weight:600; padding-top:3px}
.breve__t{font-family:var(--titre); font-weight:600; font-size:17.5px; line-height:1.28; margin:0; letter-spacing:-.015em}
.breve__t a{color:inherit}
.breve__t a:hover,.breve__t a:focus-visible{color:var(--cobalt); text-decoration:underline}
.breve__m{font-family:var(--data); font-size:11.5px; color:var(--doux); margin:5px 0 0; grid-column:2}

/* Repères */
.reperes{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s6); border-top:2px solid var(--nuit); padding-top:var(--s5); margin-top:var(--s5)}
.repere{display:flex; flex-direction:column; align-items:flex-start}
.repere__tete{display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s3)}
.repere__d{font-family:var(--data); font-size:11px; color:var(--doux)}
.repere__t{font-family:var(--titre); font-weight:600; font-size:19px; line-height:1.25; margin:0; letter-spacing:-.02em}
.repere__m{font-family:var(--data); font-size:11.5px; color:var(--doux); margin:9px 0 0; border-top:1px dotted var(--bord); padding-top:9px; width:100%}
.repere__lien{display:inline-block; margin-top:var(--s4); font-family:var(--data); font-size:12.5px; font-weight:600; color:var(--cobalt)}

/* --- Tableau des opportunités ------------------------------------------- */
.tab__enveloppe{width:100%}
.tab{width:100%; border-top:2px solid var(--nuit)}
.tab th{font-family:var(--data); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--doux); font-weight:500; padding:9px 14px 7px; border-bottom:1px solid var(--bord)}
/* Quatre colonnes, hauteur de ligne réduite : la zone doit permettre de comparer
   plusieurs offres d'un seul regard, pas de les lire une par une. */
.tab td{padding:12px 14px; border-bottom:1px solid var(--bord); vertical-align:middle}
.tab tr:first-child td{background:var(--gris-fond)}
.tab__marchand{font-family:var(--data); font-size:11.5px; color:var(--doux); margin:0 0 4px}
.tab__produit{font-family:var(--titre); font-weight:600; font-size:16.5px; line-height:1.25; margin:0; letter-spacing:-.015em}
.tab__produit a{color:var(--nuit); border-bottom:1px solid transparent}
.tab__produit a:hover,.tab__produit a:focus-visible{border-bottom-color:var(--cobalt); color:var(--cobalt)}
.tab__prix{display:flex; flex-direction:row; align-items:baseline; gap:8px}
.tab__prix .surligne{font-size:15.5px}
.tab__releve{font-family:var(--data); font-size:12.5px; color:var(--doux); display:block; max-width:36ch; line-height:1.45}
/* Le prix et son symbole restent sur une seule ligne : « 259,60 € », jamais le
   montant d'un côté et l'euro à la ligne suivante. */
.tab__prix .surligne{white-space:nowrap}
/* Vignette produit : même image que la fiche, contenue et jamais déformée. */
.tab__prod{display:flex; gap:12px; align-items:flex-start}
.tab__prod-t{min-width:0}
.tab__vignette{flex:0 0 56px; width:56px; height:56px; display:block; background:#fff; border:1px solid var(--bord); border-radius:4px; overflow:hidden}
.tab__vignette img{width:100%; height:100%; object-fit:contain; display:block}
.tab__avant{font-family:var(--data); font-size:13px; color:var(--faible); text-decoration:line-through}
.tab__nature{font-family:var(--data); font-size:12px; color:var(--doux); max-width:26ch; line-height:1.4; display:block}
.tab__evo{display:flex; flex-direction:column; gap:5px; min-width:110px}
.evo{display:flex; flex-direction:column; gap:3px}
.evo__b{height:6px; border-radius:3px; background:var(--bord)}
.evo__b--jour{background:var(--cobalt)}
.evo__b--hausse{background:var(--carmin)}
.evo__d{font-family:var(--data); font-size:12.5px; font-weight:600; color:var(--vert)}
.evo__d--h{color:var(--carmin)}
.etat{font-family:var(--data); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; padding:4px 9px; border-radius:999px; display:inline-block; white-space:nowrap}
.etat--ok{background:var(--vert-pale); color:var(--vert)}
.etat--revoir{background:var(--carmin-pale); color:var(--carmin); border:1px dashed var(--carmin)}
.etat--fini{background:var(--gris-fond); color:var(--faible)}
.releve{font-family:var(--data); font-size:12px; color:var(--doux); white-space:nowrap}
.bouton{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  background:var(--cobalt); color:var(--blanc); font-weight:600; font-size:14.5px;
  padding:11px 18px; border-radius:8px; border:1px solid var(--cobalt); white-space:nowrap;
}
.bouton:hover{background:var(--cobalt-2); border-color:var(--cobalt-2); text-decoration:none}
.bouton--second{background:var(--blanc); color:var(--cobalt); border-color:var(--cobalt-line)}
.bouton--second:hover{background:var(--cobalt-pale); color:var(--cobalt)}
.affil{margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--bord); font-size:13px; color:var(--doux); max-width:80ch}
.affil a{text-decoration:underline; color:var(--cobalt)}

/* --- Article ------------------------------------------------------------ */
.article{max-width:800px; margin:0 auto; padding:var(--s7) var(--s5) 0}
/* Micro-légende : une ligne, l'essentiel de la provenance, rien de l'atelier. */
.visuel-legende{display:block; margin-top:6px; font-family:var(--data); font-size:12px; color:var(--doux)}
.visuel-mention{color:var(--doux)}
.visuel-credit{color:var(--doux)}
.visuel-credit a{color:inherit; border-bottom:1px solid var(--bord)}
.ariane a{color:inherit; text-decoration:none; border-bottom:1px solid transparent}
.ariane a:hover,.ariane a:focus-visible{border-bottom-color:currentColor}
.ariane__sep{color:var(--bord); margin:0 2px}
.ariane__ici{color:var(--doux)}
.article__etq{display:inline-flex; align-items:center; gap:var(--s2); font-family:var(--data); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--cobalt); margin:0}
.article__h1{font-family:var(--titre); font-weight:700; font-size:clamp(30px,4.2vw,50px); line-height:1.04; letter-spacing:-.04em; margin:var(--s3) 0 0}
.article__c{font-size:19.5px; color:var(--nuit-2); margin:var(--s5) 0 0; max-width:60ch}
/* --- Métadonnées d'article : une seule ligne, trois informations ---------- */
.article__meta{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 7px; margin:var(--s5) 0 0; font-family:var(--data); font-size:12.5px; color:var(--doux)}
.meta__qui{color:var(--nuit); font-weight:600}
.meta__sep{color:var(--bord)}
.dateline{margin-top:var(--s6); padding-top:var(--s5); border-top:1px solid var(--bord)}
.dateline__l{display:flex; gap:var(--s4) var(--s5); flex-wrap:wrap; position:relative}
.dateline__l::before{content:""; position:absolute; left:0; right:0; top:12px; height:1px; background:var(--bord)}
.dateline__i{display:flex; align-items:center; gap:var(--s3); position:relative; background:var(--blanc); padding-right:var(--s4)}
.dateline__v{font-family:var(--data); font-size:12.5px; color:var(--nuit)}
.dateline__l2{font-family:var(--data); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--doux); display:block}
.article__visuel{position:relative; margin-top:var(--s6); border-radius:var(--r); overflow:hidden}
.article__visuel img{width:100%; aspect-ratio:16/9; object-fit:cover; max-height:420px}
/* Un visuel de produit garde sa forme : l'appareil doit s'y voir entier. Le cadre reste le
   même, seul le traitement de l'image change — celle du fabricant n'est jamais recadrée. */
.article__visuel--produit img{aspect-ratio:1/1; object-fit:contain; max-height:520px; background:var(--gris-fond)}
.offre-bloc__mention{margin:var(--s4) 0 0; padding-top:var(--s3); border-top:1px solid var(--bord); font-size:13px; line-height:1.5; color:var(--doux)}
.sommaire{margin:var(--s6) 0; border:1px solid var(--bord); border-radius:var(--r); padding:var(--s4) var(--s5); background:var(--gris-fond)}
.sommaire__t{font-family:var(--data); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--doux); margin:0 0 var(--s3)}
.sommaire ol{counter-reset:s; margin:0; padding:0; list-style:none}
.sommaire li{counter-increment:s; display:flex; align-items:baseline; gap:10px; border-bottom:1px solid var(--bord)}
.sommaire li:last-child{border-bottom:0}
.sommaire li::before{content:counter(s,decimal-leading-zero); font-family:var(--data); font-size:11px; color:var(--cobalt); flex:0 0 20px}
.sommaire a{display:block; flex:1; padding:6px 0; font-size:15px; line-height:1.35; font-weight:500}
.corps p{margin:var(--s5) 0; font-size:18.5px; line-height:1.72; max-width:60ch}
.corps ul li{max-width:60ch}
.corps h2{font-family:var(--titre); font-weight:700; font-size:28px; letter-spacing:-.03em; margin:var(--s8) 0 var(--s3); line-height:1.12}
.corps h3{font-family:var(--titre); font-weight:600; font-size:19px; margin:var(--s6) 0 var(--s2)}
.corps ul{margin:var(--s5) 0}
.corps ul li{position:relative; padding-left:var(--s5); margin:var(--s3) 0}
.corps ul li::before{content:""; position:absolute; left:2px; top:11px; width:9px; height:3px; background:var(--cobalt); border-radius:2px}
.corps a{text-decoration:underline; color:var(--cobalt)}
.corps strong{font-weight:600}
.corps blockquote{margin:var(--s6) 0; padding:var(--s5); background:var(--cobalt-pale); border-radius:var(--r); font-family:var(--titre); font-size:21px; line-height:1.35; letter-spacing:-.02em}
.corps blockquote p:first-child{margin-top:0}
.corps blockquote p:last-child{margin-bottom:0}
.corps table{margin:var(--s6) 0; border-top:2px solid var(--nuit)}
.corps th,.corps td{padding:var(--s3) var(--s4); border-bottom:1px solid var(--bord); font-size:15px}
.corps th{font-family:var(--data); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--doux)}
.corps img{border-radius:var(--r)}
.corps figcaption{font-family:var(--data); font-size:11.5px; color:var(--doux); margin-top:var(--s2)}
.corps .alignleft{float:left; margin:0 var(--s5) var(--s4) 0; max-width:50%}
.corps .alignright{float:right; margin:0 0 var(--s4) var(--s5); max-width:50%}
.corps .aligncenter{margin-left:auto; margin-right:auto}
.corps .wp-caption{max-width:100%}
.corps .wp-caption-text{font-family:var(--data); font-size:11.5px; color:var(--doux)}

/* Calcul, source, encart d'offre */
.calcul{margin:var(--s6) 0; border:2px solid var(--nuit); border-radius:var(--r); overflow:hidden}
.calcul__t{background:var(--nuit); color:var(--blanc); font-family:var(--data); font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding:10px var(--s5); margin:0}
.calcul__c{padding:var(--s5)}
.calcul__l{display:flex; justify-content:space-between; gap:var(--s4); font-family:var(--data); font-size:14px; padding:8px 0; margin:0}
.calcul__l--sep{border-top:1px dashed var(--bord); margin-top:var(--s2); padding-top:var(--s4)}
.calcul__tot{font-weight:600}
.calcul__note{font-size:13px; color:var(--doux); margin:var(--s4) 0 0}
.source{margin:var(--s6) 0; padding:var(--s5); background:var(--gris-fond); border-left:4px solid var(--cobalt); border-radius:0 var(--r) var(--r) 0}
.source__t{font-family:var(--data); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--doux); margin:0 0 var(--s2)}
.source p{margin:0 0 var(--s2); font-size:14.5px}
.source p:last-child{margin-bottom:0}
.encart{margin:var(--s7) 0; border:1px solid var(--cobalt-line); border-radius:var(--r); overflow:hidden}
.encart__tete{display:flex; justify-content:space-between; align-items:center; gap:var(--s3); padding:var(--s3) var(--s5); background:var(--cobalt-pale)}
.encart__l{padding:var(--s5)}
.encart__c{display:grid; grid-template-columns:170px minmax(0,1fr); gap:var(--s5); align-items:start}
.encart__c img{border-radius:8px; border:1px solid var(--bord)}
.encart__bas{margin:0; padding:var(--s3) var(--s5) var(--s4); border-top:1px solid var(--bord); font-size:12.5px; color:var(--doux)}
.encart .tab__produit{margin-bottom:var(--s2)}
.alternatives{margin-top:var(--s7)}
.alt{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s4); align-items:center; padding:var(--s4) 0; border-bottom:1px solid var(--bord)}
.alt:last-child{border-bottom:0}
.trois{margin-top:var(--s8); background:var(--nuit); color:var(--blanc); border-radius:var(--r); padding:var(--s6)}
.trois__t{font-family:var(--data); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#C8D0EC; margin:0 0 var(--s5)}
.trois__t::before{content:""; display:inline-block; width:12px; height:3px; background:var(--cobalt); border-radius:2px; margin-right:9px; vertical-align:middle}
.trois__l{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5)}
.trois__i{border-top:1px solid rgba(255,255,255,.24); padding-top:var(--s3)}
.trois__i a{font-family:var(--titre); font-size:18px; line-height:1.25; font-weight:600; color:var(--blanc)}
.trois__r{font-size:13px; color:#D5DBFF; margin:6px 0 0}
.suite{display:flex; justify-content:space-between; gap:var(--s5); flex-wrap:wrap; margin-top:var(--s7); padding-top:var(--s5); border-top:1px solid var(--bord); font-size:14.5px}
.suite__l a{font-weight:600}

/* Fiche d'offre */
.offre-bloc{margin-top:var(--s6); border:2px solid var(--nuit); border-radius:var(--r); overflow:hidden}
.offre-bloc .bloc__t{background:var(--nuit); color:var(--blanc); padding:10px var(--s5); margin:0}
.offre-bloc__c{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s5); padding:var(--s5); align-items:start}
.offre-bloc__v{font-family:var(--titre); font-weight:700; font-size:clamp(30px,4vw,46px); line-height:1; letter-spacing:-.04em; margin:0 0 var(--s3)}
.offre-bloc__v .surligne{font-family:inherit; padding:0 10px 4px}
.historique{margin-top:var(--s7)}
.historique .bloc__t{margin-bottom:var(--s4)}

/* --- Archives, recherche, listes ---------------------------------------- */
.archive__tete{padding-top:var(--s7)}
.archive__t{font-family:var(--titre); font-weight:700; font-size:clamp(28px,4vw,46px); line-height:1.06; letter-spacing:-.035em; margin:var(--s3) 0 var(--s4); max-width:34ch}
.archive__d{font-size:17px; color:var(--nuit-2); max-width:62ch; margin:0 0 var(--s4)}
.liste{border-top:2px solid var(--nuit); margin-top:var(--s5)}
.liste__i{display:grid; grid-template-columns:88px minmax(0,1fr); gap:var(--s5); padding:var(--s6) 0; border-bottom:1px solid var(--bord)}
.liste__q{display:flex; flex-direction:column; gap:var(--s2); align-items:flex-start; font-size:12px; color:var(--doux)}
.liste__etq{font-family:var(--data); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--cobalt); margin:0 0 var(--s2)}
.liste__t{font-family:var(--titre); font-weight:600; font-size:22px; line-height:1.2; letter-spacing:-.025em; margin:0}
.liste__c{font-size:16px; color:var(--nuit-2); margin:var(--s3) 0 0; max-width:70ch}
.liste__m{font-family:var(--data); font-size:11.5px; color:var(--doux); margin:var(--s3) 0 0}

/* --- États vides -------------------------------------------------------- */
.vide{border-top:2px solid var(--nuit); padding:var(--s6) 0; max-width:70ch}
.vide__t{font-family:var(--titre); font-weight:600; font-size:22px; letter-spacing:-.02em; margin:0 0 var(--s3)}
.vide__c{font-size:16px; color:var(--nuit-2); margin:0 0 var(--s5)}

/* --- Recherche et pagination ------------------------------------------- */
.recherche{display:flex; gap:var(--s3); flex-wrap:wrap; margin:var(--s5) 0}
.recherche input[type=search]{flex:1 1 260px; font-family:var(--texte); font-size:16px; padding:11px 14px; border:1px solid var(--bord); border-radius:8px; background:var(--blanc); color:var(--nuit)}
.recherche input[type=search]:focus-visible{border-color:var(--cobalt)}
.recherche__zone{margin:var(--s5) 0}
.pagination{margin:var(--s7) 0; padding-top:var(--s5); border-top:1px solid var(--bord)}
.pagination .nav-links{display:flex; gap:var(--s3); align-items:center; flex-wrap:wrap; font-family:var(--data); font-size:13.5px}
.pagination .page-numbers{padding:8px 12px; border:1px solid var(--bord); border-radius:8px; color:var(--doux)}
.pagination .page-numbers.current{background:var(--cobalt); border-color:var(--cobalt); color:var(--blanc)}
.pagination .page-numbers:hover{border-color:var(--cobalt); color:var(--cobalt); text-decoration:none}
.pagination .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Filtres du hub : des pilules compactes, du même dessin que les liens marchands.
   Un seul élément actif, repérable sans couleur seule (fond cobalt + aria-current). */
.filtres{margin:calc(-1 * var(--s4)) 0 var(--s5)}
.filtres__l{display:flex; flex-wrap:wrap; gap:var(--s2); list-style:none; margin:0; padding:0}
.filtres__i{display:inline-flex; align-items:baseline; gap:6px; padding:6px 11px; border:1px solid var(--bord); border-radius:999px; background:var(--gris-fond); color:var(--doux); text-decoration:none; font-family:var(--data); font-size:12.5px; line-height:1.1}
.filtres__i:hover{border-color:var(--cobalt); color:var(--cobalt)}
.filtres__i:focus-visible{outline:2px solid var(--cobalt); outline-offset:2px}
.filtres__i.est-actif{background:var(--cobalt); border-color:var(--cobalt); color:var(--blanc); font-weight:500}
.filtres__i.est-actif:hover{color:var(--blanc)}
.filtres__n{font-size:11.5px; font-variant-numeric:tabular-nums; opacity:.8}
@media (max-width:520px){
  .filtres__l{gap:6px}
  .filtres__i{padding:6px 10px; font-size:12px}
  .filtres__n{font-size:11px}
}

/* --- Visuels ------------------------------------------------------------ */
.visuel-cadre{display:block; border-radius:var(--r); overflow:hidden; background:var(--gris-fond)}
.visuel-absent{display:flex; align-items:center; justify-content:center; aspect-ratio:16/9; max-height:300px;
  border:1px dashed var(--bord); background:repeating-linear-gradient(135deg,#F7F9FF 0 12px,#F1F4FD 12px 24px)}
.visuel-absent .data{font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faible)}

/* --- Pied --------------------------------------------------------------- */
.pied{margin-top:var(--s9); border-top:4px solid var(--cobalt)}
.pied__marque{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:var(--s6); align-items:start; padding:var(--s7) 0 var(--s6); border-bottom:1px solid var(--bord)}
.pied__base{font-family:var(--titre); font-weight:700; font-size:clamp(22px,2.6vw,30px); line-height:1.15; letter-spacing:-.03em; margin:0 0 var(--s4); max-width:24ch}
.pied__promesse{font-size:14.5px; color:var(--doux); margin:0; max-width:58ch}
.pied__logo{display:block; height:34px; width:auto; margin:0 0 var(--s4)}
.pied__chercher .recherche{margin:0}
.pied__colonnes{display:grid; grid-template-columns:1.1fr 1fr 1.25fr 1.3fr; gap:var(--s6); padding:var(--s7) 0 var(--s8)}
.pied__t,.pied__t--bascule{font-family:var(--data); font-size:10.5px; font-weight:inherit; letter-spacing:.14em; text-transform:uppercase; color:var(--doux); margin:0 0 var(--s3)}
.pied li{padding:5px 0; font-size:14.5px}
.pied ul{margin:0; padding:0; list-style:none}
.pied a{color:var(--nuit); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:1px}
.pied a:hover,.pied a:focus-visible{border-bottom-color:var(--cobalt)}
.pied__derniers li{display:flex; flex-direction:column; gap:3px; padding:8px 0; border-bottom:1px solid var(--bord)}
.pied__derniers li:last-child{border-bottom:0}
.pied__date{font-size:11.5px; color:var(--faible)}
.pied__bas{background:var(--nuit); color:var(--blanc); padding:var(--s5) 0}
.pied__bas-in{display:flex; align-items:center; justify-content:space-between; gap:var(--s5) var(--s6); flex-wrap:wrap}
.pied__signature,.pied__affil{font-size:12.5px; color:#C7CEE4; margin:0}
.pied__bas a{color:var(--blanc); font-size:12.5px; border-bottom-color:transparent}
.pied__bas a:hover,.pied__bas a:focus-visible{color:var(--jaune); border-bottom-color:var(--jaune)}
.pied__legal ul{display:flex; gap:var(--s5); flex-wrap:wrap}

/* Accordéons du pied. Le titre du groupe est un vrai bouton (`aria-expanded`,
   `aria-controls`) piloté par assets/accordeon-pied.js. Le bouton et le repli
   n'existent que sur écran étroit : sur grand écran il est retiré du rendu, le
   titre large s'affiche et les listes restent ouvertes — le pied desktop ne
   change pas. Sans JavaScript, aucun panneau n'est masqué : la navigation
   reste entière, seul le confort du repli disparaît. */
.pied__t--bascule,.pied__chev{display:none}
@media (max-width:720px){
  .js .pied__t--large{display:none}
  .js .pied__t--bascule{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); width:100%; margin:0; padding:var(--s3) 0; background:none; border:0; border-bottom:1px solid var(--bord); text-align:left; cursor:pointer}
  .pied__t--bascule:focus-visible{outline:3px solid var(--cobalt); outline-offset:2px}
  .pied__groupe ul{padding-top:var(--s2)}
  .pied__chev{display:block; position:relative; flex:0 0 auto; width:14px; height:14px}
  .pied__chev::before,.pied__chev::after{content:''; position:absolute; left:50%; top:50%; background:var(--doux)}
  .pied__chev::before{width:14px; height:2px; transform:translate(-50%,-50%)}
  .pied__chev::after{width:2px; height:14px; transform:translate(-50%,-50%)}
  .pied__t--bascule[aria-expanded="true"] .pied__chev::after{display:none}
}
/* Sécurité : sur grand écran, aucune liste ne doit rester repliée. */
@media (min-width:721px){ .pied__panneau[hidden]{display:block !important} }

/* --- Repère à compléter (pages institutionnelles) ----------------------- */
.manque{border-left:4px solid var(--carmin); background:var(--carmin-pale); padding:var(--s4) var(--s5); margin:var(--s5) 0; font-size:14.5px; color:var(--nuit); max-width:70ch}
.manque strong{font-family:var(--data); font-size:12.5px; letter-spacing:.03em; text-transform:uppercase}

/* --- Page introuvable : la récupération --------------------------------- */
.p404__tete{position:relative; padding:var(--s8) 0 var(--s6)}
.p404__code{font-family:var(--data); font-size:clamp(56px,11vw,132px); line-height:.85; letter-spacing:-.05em; color:var(--cobalt-pale); margin:0 0 var(--s3); font-weight:700}
.p404__t{font-family:var(--titre); font-weight:700; font-size:clamp(25px,3.6vw,42px); line-height:1.12; letter-spacing:-.03em; margin:var(--s3) 0 var(--s4); max-width:24ch}
.p404__d{font-size:17px; color:var(--doux); margin:0 0 var(--s5); max-width:62ch}
.p404__recherche{max-width:560px}
.p404__grille{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s3); margin:0; padding:0; list-style:none}
.p404__tuile{display:flex; flex-direction:column; gap:var(--s2); border:1px solid var(--bord); padding:var(--s4); background:var(--blanc)}
.p404__tuile:hover{border-color:var(--cobalt); background:var(--cobalt-pale)}
.p404__tuile-t{font-family:var(--titre); font-weight:700; font-size:16px; letter-spacing:-.01em}
.p404__tuile-f{font-size:12.5px; color:var(--doux)}
.p404__fil{margin:0; padding:0; list-style:none}
.p404__fil li{display:flex; align-items:baseline; gap:var(--s3); padding:var(--s3) 0; border-bottom:1px solid var(--bord); flex-wrap:wrap}
.p404__fil li:last-child{border-bottom:0}
.p404__fil-q{font-size:19px; font-weight:700; color:var(--cobalt); min-width:2.2ch}
.p404__pied{margin-top:var(--s6)}

/* --- Repartir : la sortie de secours des listes vides ------------------- */
.vide{margin-bottom:var(--s6)}
.repartir{display:grid; grid-template-columns:1fr 1fr 1.3fr; gap:var(--s6); border-top:1px solid var(--bord); padding-top:var(--s5); margin-top:var(--s5)}
.repartir__i{grid-column:1/-1; margin:0 0 calc(-1 * var(--s3)); font-size:15px; color:var(--doux)}
.repartir ul{margin:0; padding:0; list-style:none}
.repartir li{padding:5px 0; font-size:14.5px}
.repartir .recherche{margin:0}
.repartir__d{font-size:11.5px; color:var(--faible)}
.repartir--sans-recherche{grid-template-columns:1fr 1.3fr}

/* --- Adaptations -------------------------------------------------------- */
@media (max-width:1060px){
  .une{grid-template-columns:minmax(0,1fr); gap:var(--s7)}
  .entree__v{font-size:44px}
  .mois__piste{grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:var(--s6)}
  .mois__piste::before{display:none}
  .reperes{grid-template-columns:1fr 1fr; gap:var(--s5)}
  .pied__marque{grid-template-columns:1fr; gap:var(--s5)}
  .pied__colonnes{grid-template-columns:1fr 1fr}
  .p404__grille{grid-template-columns:1fr 1fr}
  .repartir{grid-template-columns:1fr 1fr}
  .entete__regle .regle{overflow-x:auto}
}
@media (max-width:720px){
  body{font-size:16px}
  .conteneur,.article{padding-left:var(--s4); padding-right:var(--s4)}
  .bloc{padding-top:var(--s7)}
  .marque__mot{font-size:23px}
  .entete__outils .outil--fort{display:none}
  .rubriques{gap:0 var(--s3)}
  .rubriques a{font-size:14px; padding:9px 0}
  .rubriques ul{gap:0 var(--s3)}
  .rubriques li + li::before{display:none}
  .prixruban{padding:10px 0}
  /* Le doigt fait défiler le ruban : les flèches n'ont rien à y faire. */
  .prixruban--defilable .prixruban__n{display:none}
  .mois{padding:var(--s6) 0 var(--s7)}
  .mois__tete{margin-bottom:var(--s5)}
  .mois__piste{grid-template-columns:1fr; gap:0}
  .jalon{padding:var(--s5) 0; border-bottom:1px solid rgba(255,255,255,.22)}
  .jalon:first-child{border-top:1px solid rgba(255,255,255,.22)}
  .jalon:last-child{border-bottom:0}
  .jalon__tete{margin-bottom:var(--s3)}
  .reperes{grid-template-columns:1fr}
  .pied__colonnes{grid-template-columns:1fr; gap:var(--s6)}
  .pied__bas-in{display:block}
  .pied__legal ul{gap:0 var(--s5); margin:var(--s3) 0}
  .p404__grille{grid-template-columns:1fr}
  .p404__tete{padding-top:var(--s7)}
  .une__t{font-size:29px}
  /* Sur un écran étroit, la règle garde ses repères utiles (le 1er, le 10, le
     pivot du 15, le 20, le 30) et abandonne les graduations intermédiaires :
     la position du jour doit rester visible sans défilement. */
  .entete__regle .regle{overflow:visible}
  .entete__regle .regle__j--sec{display:none}
  .regle__j{font-size:11px}
  .ou .jalon__t,.jalon--pivot .jalon__t{font-size:20px}

  /* Le tableau devient une pile de fiches : chaque cellule porte son libellé */
  /* Le tableau devient une pile de fiches : chaque cellule porte son libellé,
     lu dans l'en-tête du tableau au moment de l'affichage (inc/tableaux.php).
     Vaut aussi pour les tableaux écrits dans le corps d'un article, qui
     n'ont pas de libellé dans leur contenu enregistré. */
  .tab,.tab tbody,.tab tr,.tab td,
  .corps table,.corps table tbody,.corps table tr,.corps table td{display:block; width:100%}
  .tab thead,.corps table thead{display:none}
  .tab tr,.corps table tr{border-bottom:2px solid var(--nuit); padding:var(--s4) 0}
  .tab tr:first-child td,.corps table tr:first-child td{background:transparent}
  .tab td,.corps table td{border-bottom:0; padding:6px 0}
  .tab td[data-l]::before,.corps table td[data-l]::before{content:attr(data-l); display:block; font-family:var(--data); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--doux); margin-bottom:4px}
  .tab td:first-child::before,.corps table td:first-child::before{display:none}
  .tab__evo{min-width:0}
  /* Prix et relevé partagent une ligne : la fiche n'empile plus quatre blocs
     et n'ouvre plus un vide sur la moitié droite. Le produit et l'action
     occupent toute la largeur. */
  .tab__enveloppe .tab tr{display:grid; grid-template-columns:1fr; align-items:start}
  /* Sur mobile, chaque cellule occupe toute la largeur : le prix et son
     symbole ne sont plus comprimés dans une colonne étroite. */
  .tab__enveloppe .tab td{grid-column:1 / -1}
  .tab__enveloppe .tab td:first-child,.tab__enveloppe .tab td:last-child{grid-column:1 / -1}
  .tab__c-releve{min-width:0}
  /* La vignette reste lisible sans manger la largeur du nom. */
  .tab__vignette{flex-basis:44px; width:44px; height:44px}
  .tab__prod{gap:10px}
  .bouton{width:100%}
  .encart__c{grid-template-columns:1fr}
  .trois__l{grid-template-columns:1fr}
  .pied__grille{grid-template-columns:1fr}
  .dateline__l{gap:var(--s5)}
  .sommaire{padding:var(--s4)}
  .sommaire li a{padding:10px 0; font-size:14.5px}
  .corps p{font-size:17.5px; line-height:1.7}
  .article__c{font-size:18px}
  .liste__i{grid-template-columns:1fr; gap:var(--s3)}
  .liste__q{flex-direction:row; align-items:center}
  .offre-bloc__c{grid-template-columns:1fr}
  .alt{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important; scroll-behavior:auto!important}}

/* --- Éléments WordPress ------------------------------------------------- */
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.alignwide{margin-left:calc(-1 * var(--s5)); margin-right:calc(-1 * var(--s5)); max-width:none}
.alignfull{margin-left:calc(-50vw + 50%); margin-right:calc(-50vw + 50%); max-width:100vw}
.wp-block-image img{border-radius:var(--r)}

/* --- À prévoir — les fenêtres d'action ---------------------------------- */
/* Deuxième pilier du temps. Le Fil du mois est un aplat cobalt, le ruban des
   prix un aplat nuit, les repères une tuile bleue : À prévoir se pose sur un
   aplat crayeux, avec un filet cobalt en tête de chaque entrée. Le jaune reste
   réservé aux opportunités et aux économies : aucun signal jaune ici. */
.aprevoir{background:var(--cobalt-pale); border-top:1px solid var(--cobalt-line); border-bottom:1px solid var(--cobalt-line); padding:var(--s7) 0}
.aprevoir__sous{font-size:14.5px; color:var(--doux); margin:calc(-1 * var(--s4)) 0 var(--s6); max-width:62ch}
.aprevoir__liste{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s6); list-style:none; margin:0; padding:0}
.prev{border-top:2px solid var(--cobalt); padding-top:var(--s4); display:flex; flex-direction:column; gap:var(--s3)}
.prev__tete{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4); margin:0; flex-wrap:wrap; row-gap:2px}
.prev__date{font-family:var(--titre); font-weight:700; font-size:17px; letter-spacing:-.02em; color:var(--nuit); white-space:nowrap}
/* La nature de l'action n'est pas une étiquette à lire : elle informe sans occuper. */
.prev__action{font-family:var(--data); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--cobalt); font-weight:600; white-space:nowrap}
.prev__t{font-family:var(--titre); font-size:16.5px; line-height:1.25; letter-spacing:-.015em; margin:0}
.prev__t a{color:var(--nuit); border-bottom:1px solid transparent}
.prev__t a:hover,.prev__t a:focus-visible{border-bottom-color:var(--cobalt); color:var(--cobalt)}
.prev__quoi{font-size:14px; line-height:1.5; color:var(--nuit); margin:0; max-width:46ch}
/* --- À lire aussi -------------------------------------------------------- */
.aussi{margin-top:var(--s7); padding-top:var(--s5); border-top:1px solid var(--bord)}
.aussi__t{font-family:var(--data); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--doux); margin:0 0 var(--s4)}
.aussi__l{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5)}
.aussi__i{margin:0}
.aussi__a{display:flex; align-items:center; gap:var(--s3); color:inherit}
.aussi__v{flex:0 0 auto; width:62px; height:62px; border-radius:8px; overflow:hidden; background:var(--gris-fond); border:1px solid var(--bord)}
.aussi__v img{width:100%; height:100%; object-fit:cover; display:block}
.aussi__c{display:flex; flex-direction:column; gap:3px; min-width:0}
.aussi__txt{font-family:var(--titre); font-weight:600; font-size:15px; line-height:1.25; letter-spacing:-.015em}
.aussi__a:hover .aussi__txt,.aussi__a:focus-visible .aussi__txt{color:var(--cobalt)}
.aussi__m{font-family:var(--data); font-size:11.5px; color:var(--doux)}
/* ---------------------------------------------------------------------------
   Pages article : composition desktop à deux colonnes.
   La colonne de lecture garde sa mesure (60 caractères) ; l'espace gagné sert
   à une barre latérale utile — inscription, dernières publications. Sous
   1061 px, une seule colonne, et la barre latérale repasse sous l'article :
   l'inscription reste alors portée par l'encart placé dans l'article.
   --------------------------------------------------------------------------- */
.page-article__grille{max-width:var(--conteneur,1280px); margin:0 auto; padding:var(--s7) var(--s5) 0}
.page-article .article{max-width:none; margin:0; padding:0}
.page-article .article__c,
.page-article .corps p,
.page-article .corps ul li{max-width:752px}
@media (min-width:1061px){
  .page-article__grille{display:grid; grid-template-columns:minmax(0,1fr) clamp(300px,26vw,340px);
    gap:clamp(40px,4.5vw,56px); align-items:start}
  .page-article .article{padding-bottom:var(--s7)}
  /* La barre latérale ne colle que si elle tient dans la fenêtre : sa hauteur
     mesurée est de 800 px, plus la marge du haut. */
  @media (min-height:900px){
    .cote{position:sticky; top:calc(var(--haut-entete,0px) + var(--s5)); align-self:start}
  }
  /* L'inscription n'est proposée qu'une fois par page : dans la barre latérale
     sur desktop, dans l'article quand la barre latérale est repassée dessous. */
  .page-article .lettre--article{display:none}
}
.cote{margin-top:var(--s7)}
.cote__bloc{margin:0; padding-top:var(--s4); border-top:1px solid var(--bord)}
.cote__t{font-family:var(--data); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--doux); margin:0 0 var(--s3)}
.cote__l{list-style:none; margin:0; padding:0}
.cote__i{margin:0; padding:var(--s3) 0; border-top:1px solid var(--bord)}
.cote__i:first-child{border-top:0; padding-top:0}
.cote__a{display:grid; grid-template-columns:72px minmax(0,1fr); gap:var(--s3); align-items:start; color:inherit}
.cote__v{display:block; width:72px; height:72px; border-radius:8px; overflow:hidden; background:var(--gris-fond); border:1px solid var(--bord)}
.cote__v img{width:100%; height:100%; object-fit:cover; display:block}
.cote__vide{display:block; width:100%; height:100%; background:var(--cobalt-pale)}
.cote__c{display:flex; flex-direction:column; gap:2px; min-width:0}
.cote__rub{font-family:var(--data); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--cobalt)}
.cote__txt{font-family:var(--titre); font-weight:600; font-size:15px; line-height:1.25; letter-spacing:-.015em;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden}
.cote__m{font-family:var(--data); font-size:11.5px; color:var(--doux); margin-top:2px}
.cote__a:hover .cote__txt,.cote__a:focus-visible .cote__txt{color:var(--cobalt)}
/* L'encart d'inscription dans la barre latérale : une colonne étroite, donc un
   formulaire empilé, et le filet cobalt en tête pour rester dans la maison. */
.lettre--cote{margin:0 0 var(--s6); border-top:3px solid var(--cobalt)}
.lettre--cote .lettre__tete{padding:var(--s4) var(--s4) var(--s3); background:var(--blanc)}
.lettre--cote .lettre__tuile{width:30px; height:30px; font-size:15px; line-height:30px}
.lettre--cote .lettre__t{font-size:17.5px}
.lettre--cote .lettre__p{font-size:13.5px; max-width:none}
.lettre--cote .lettre__f{display:block; padding:var(--s4) var(--s4) var(--s3)}
.lettre--cote .lettre__c{width:100%; box-sizing:border-box}
.lettre--cote .lettre__b{display:block; width:100%; margin-top:var(--s2); text-align:center}
.lettre--cote .lettre__fine,.lettre--cote .lettre__etat{padding-left:var(--s4); padding-right:var(--s4)}
@media (max-width:1060px){
  .cote .lettre--cote{display:none}
}
/* Les recommandations : des rangées, plus des cartes étroites. La vignette
   ouvre la ligne, la ligne de bas porte rubrique, date et temps de lecture. */
.page-article .aussi__l{grid-template-columns:minmax(0,1fr); gap:0}
.page-article .aussi__i{border-top:1px solid var(--bord)}
.page-article .aussi__i:first-child{border-top:0}
.page-article .aussi__a{display:grid; grid-template-columns:176px minmax(0,1fr); gap:var(--s4); align-items:start; padding:var(--s4) 0}
.page-article .aussi__v{display:block; width:176px; height:99px; border-radius:8px; overflow:hidden; background:var(--gris-fond); border:1px solid var(--bord)}
.page-article .aussi__v img{width:100%; height:100%; object-fit:cover; display:block}
.page-article .aussi__vide{display:block; width:100%; height:100%; background:var(--cobalt-pale)}
.page-article .aussi__c{gap:4px; height:99px}
.page-article .aussi__rub{font-family:var(--data); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--cobalt)}
.page-article .aussi__txt{font-size:16.5px; line-height:1.28;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.page-article .aussi__m{margin-top:auto; display:flex; align-items:baseline; gap:6px}
@media (max-width:720px){
  .page-article .aussi__a{grid-template-columns:96px minmax(0,1fr)}
  .page-article .aussi__v{width:96px; height:54px}
  .page-article .aussi__c{height:auto}
  .page-article .aussi__txt{-webkit-line-clamp:4; font-size:15.5px}
}

@media (max-width:1060px){ .aprevoir__liste{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:1060px){ .aussi__l{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:720px){ .aussi__l{grid-template-columns:1fr; gap:var(--s4)} }
@media (max-width:720px){
  .aprevoir__liste{grid-template-columns:1fr; gap:var(--s5)}
  .aprevoir__sous{margin-top:calc(-1 * var(--s3))}
}

/* ═══ Fiche produit : parcours du visiteur ═════════════════════════════════ */

/* --- Photo et prix côte à côte : le prix se voit sans faire défiler l'image -- */
.fiche__tete{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:var(--s6) var(--s7); align-items:start; margin-top:var(--s6)}
.fiche__tete .article__visuel{margin-top:0}
.fiche__tete .article__visuel img{max-height:360px}
.fiche__achat{display:flex; flex-direction:column; gap:var(--s2); border:1px solid var(--bord); border-radius:var(--r); padding:var(--s5); background:var(--blanc)}
.fiche__achat .bloc__t{margin-bottom:var(--s2)}
.achat__etat{display:flex; gap:var(--s3); margin:0 0 var(--s2)}
.achat__prix{font-family:var(--titre); font-weight:700; font-size:clamp(30px,3.4vw,40px); line-height:1; letter-spacing:-.03em; margin:0}
.achat__prix .surligne,.achat__prix .surligne__txt{font-size:inherit; box-shadow:inset 0 -0.28em 0 var(--jaune)}
.achat__ref{font-family:var(--data); font-size:13px; color:var(--doux); margin:var(--s3) 0 0}
.achat__eco{font-family:var(--data); font-size:13px; color:var(--nuit); margin:2px 0 0; font-weight:600}
.achat__limite{font-family:var(--data); font-size:13px; color:var(--nuit); margin:var(--s3) 0 0}
.achat__actions{display:flex; flex-direction:column; align-items:flex-start; gap:var(--s3); margin-top:var(--s4)}
.achat__actions p{margin:0}
.fiche__achat .offre-bloc__mention{margin-top:var(--s4)}

/* --- Dossier : en bref, caractéristiques, avis ----------------------------- */
.dossier{margin-top:var(--s7); padding-top:var(--s6); border-top:2px solid var(--nuit)}
.dossier__bref{font-size:17.5px; line-height:1.62; margin:var(--s3) 0 0; max-width:72ch}
.dossier .bloc__t{margin-top:var(--s7)}
.dossier .bloc__t:first-child{margin-top:0}
.carac{margin:var(--s3) 0 0; padding:0}
.carac__l{display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr); gap:var(--s2) var(--s5); padding:10px 0; border-bottom:1px solid var(--bord); align-items:baseline}
.carac dt{font-family:var(--data); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--doux); margin:0}
.carac dd{margin:0; font-size:16px; line-height:1.5}
.carac__src{display:block; font-family:var(--data); font-size:11.5px; color:var(--faible); margin-top:3px}
.avis{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s5) var(--s7); margin-top:var(--s3)}
.avis__st{font-family:var(--data); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--doux); margin:0 0 var(--s3)}
.avis__st--src{margin-top:var(--s6)}
.avis__l{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.avis__l li{position:relative; padding-left:17px; font-size:15.5px; line-height:1.45}
.avis__l li::before{content:""; position:absolute; left:0; top:8px; width:7px; height:7px; border-radius:50%; background:var(--vert)}
.avis__col:last-child .avis__l li::before{background:var(--carmin)}
.avis__a{display:block; font-family:var(--data); font-size:12px; color:var(--doux); margin-top:2px}
/* L'analyse se parcourt : quatre repères en gras, chacun suivi de son texte. */
.analyse{display:grid; gap:14px; margin:var(--s3) 0 0; max-width:74ch}
.analyse__l{margin:0; font-size:16.5px; line-height:1.55}
/* Le libellé tient sa propre ligne : on repère les quatre parties d'un coup d'œil. */
.analyse__lab{display:block; font-weight:600; color:var(--nuit); margin-bottom:1px}
.dossier__note{font-family:var(--data); font-size:12.5px; line-height:1.5; color:var(--faible); margin:var(--s4) 0 0; max-width:74ch}
/* Les sources prouvent la synthèse : une ligne chacune, lisibles mais secondaires. */
.srcbloc{margin-top:var(--s6); padding-top:var(--s4); border-top:1px solid var(--bord)}
.src__t{font-family:var(--data); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faible); font-weight:500; margin:0 0 var(--s3)}
.src{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.src li{font-size:13px; line-height:1.45; color:var(--doux)}
.src__l{display:block}
.src a{color:var(--doux); text-decoration:underline}
.src a:hover,.src a:focus-visible{color:var(--cobalt)}
.src__r{display:block; font-family:var(--data); font-size:11px; color:var(--faible); margin-top:1px}
.histo__un{font-size:16.5px; line-height:1.6; margin:var(--s3) 0 0}

@media (max-width:900px){
  .fiche__tete{grid-template-columns:1fr; gap:var(--s5)}
  .fiche__tete .article__visuel img{max-height:none}
  .carac__l{grid-template-columns:1fr; gap:2px; padding:11px 0}
}
@media (max-width:720px){
  .avis{grid-template-columns:1fr; gap:var(--s5)}
  .fiche__achat{padding:var(--s4)}
}


/* --- Aussi relevé chez : les autres marchands, sans les classer ----------- */
/* Hors du bloc « À lire aussi » : un lecteur qui compare des prix n'a pas
   besoin de la grille en trois colonnes des recommandations d'articles. */
.aussi-chez{margin:var(--s4) 0 0; padding-top:var(--s4); border-top:1px dashed var(--bord)}
.aussi-chez__t{font-family:var(--data); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--doux); margin:0 0 var(--s3)}
.aussi-chez__l{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--s2)}
.aussi-chez__i{display:inline-flex; align-items:baseline; gap:6px; padding:6px 11px; border:1px solid var(--bord); border-radius:999px; background:var(--gris-fond); color:inherit; text-decoration:none; font-family:var(--data); font-size:12.5px; line-height:1.1}
.aussi-chez__i:hover,.aussi-chez__i:focus-visible{border-color:var(--cobalt)}
.aussi-chez__i--sans-lien{cursor:default}
.aussi-chez__n{font-weight:600}
.aussi-chez__p{font-variant-numeric:tabular-nums}
.aussi-chez__d{color:var(--doux); font-size:11.5px}
.aussi-chez__m{margin:var(--s3) 0 0; color:var(--doux); max-width:64ch}

/* --- Qualification d'un prix : factuelle, secondaire ----------------------- */
.qualif{margin:var(--s4) 0 0; display:flex; align-items:baseline; gap:8px; font-family:var(--data); font-size:12.5px; color:var(--doux)}
.qualif::before{content:""; flex:0 0 auto; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.6; transform:translateY(-1px)}
.qualif--plus_bas{color:var(--cobalt)}
.qualif--interessant{color:var(--doux)}

/* --- Historique : un marchand à la fois ------------------------------------ */
.histo__chez{margin:0 0 var(--s3)}
.histo__choix{margin:0 0 var(--s4)}
.histo__choix-t{margin:0 0 var(--s2)}
.histo__liste{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--s2)}
.histo__m{display:inline-block; padding:5px 11px; border:1px solid var(--bord); border-radius:999px; font-family:var(--data); font-size:12.5px; color:inherit; text-decoration:none; line-height:1.1}
.histo__m:hover,.histo__m:focus-visible{border-color:var(--cobalt)}
.histo__m--actif{background:var(--nuit); border-color:var(--nuit); color:var(--blanc)}


/* ═══ Passe UX/design de la fiche — 30 septembre 2026 ══════════════════════
   Présentation seule : aucune donnée, aucun texte éditorial, aucune règle du
   modèle multi-enseignes n'est touchée ici. Les couleurs sont celles de
   l'identité en place (bleu, marine, jaune, bleu clair), employées avec
   parcimonie : un filet, un fond très léger, un repère — pas une carte de plus
   autour de chaque section. */

/* --- Bloc prix : plus court, plus net ------------------------------------ */
.fiche__achat{gap:var(--s3)}
.fiche__achat .achat__releve{margin:var(--s3) 0 0; color:var(--doux)}
.fiche__achat .achat__actions{margin-top:var(--s4)}
/* La fiche officielle du fabricant reste offerte, mais nettement en retrait du
   bouton marchand : c'est un lien de vérification, pas une invitation à agir. */
.fiche__achat .lien-fabricant{margin:0; font-size:12.5px; line-height:1.5}
.fiche__achat .lien-fabricant a{color:var(--doux); text-decoration-color:var(--bord)}
.fiche__achat .lien-fabricant a:hover,.fiche__achat .lien-fabricant a:focus-visible{color:var(--cobalt); text-decoration-color:currentColor}
.fiche__achat .lien-fabricant .micro{font-size:11.5px}

/* --- Hiérarchie des titres de la fiche : H1 > H2 > H3 > étiquettes > texte - */
/* Un titre de section se lit de la même façon sur tout le site, page d'accueil
   comprise : même graisse et même corps que dans une fiche produit. La règle
   vise les titres d'en-tête de bloc et la ligne de brèves ; les libellés de
   composant — bandeau de prix, en-tête de tableau — gardent leur traitement
   d'étiquette. Le trait cobalt reste propre à la fiche : sur une page, le filet
   qui court après le titre tient déjà ce rôle, et deux traits se cumuleraient. */
.bloc__t--section,
.bloc__tete h2.bloc__t,
p.breves__t{font-family:var(--titre); font-weight:700; font-size:clamp(23px,2.4vw,31px); line-height:1.12;
  letter-spacing:-.028em; text-transform:none; color:var(--nuit)}
.bloc__t--section{display:flex; align-items:baseline; gap:var(--s3); max-width:38ch; margin-bottom:var(--s4)}
.bloc__t--section::before{content:""; flex:0 0 auto; width:26px; height:3px; border-radius:2px;
  background:var(--cobalt); transform:translateY(-.45em)}
.bloc__tete h2.bloc__t{max-width:none; margin-bottom:var(--s4)}
/* Le 15 debout marque chaque titre de section : la tuile de la marque — un
   quantième dans un carré — dressée à gauche du titre et lue du bas vers le
   haut. Dessinée en pseudo-élément : c'est un décor, invisible pour les
   lecteurs d'écran et pour Google, le titre reste « Opportunités suivies ».
   La tuile est en contour, jamais en jaune : sur ce site le jaune veut dire
   « prix », et un repère de section ne doit pas emprunter ce sens. */
.bloc__tete h2.bloc__t,
p.breves__t{position:relative; padding-left:44px; min-height:54px; align-content:center}
.bloc__tete h2.bloc__t::before,
p.breves__t::before{content:"15"; position:absolute; left:0; top:0; width:30px; height:52px;
  box-shadow:inset 0 0 0 2px var(--nuit); border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--titre); font-weight:700; font-size:16px; letter-spacing:-.04em;
  color:var(--nuit); writing-mode:vertical-rl; transform:rotate(180deg)}
.dossier .bloc__t--section{margin-top:var(--s7)}
.dossier .bloc__t--section:first-child{margin-top:0}
.historique .bloc__t--section,.alternatives .bloc__t--section{margin-bottom:var(--s3)}
/* H3 de la fiche : franchement plus présents qu'une étiquette, franchement
   moins qu'un H2. Les quatre libellés de « Notre avis » ne sont pas des H3. */
/* 19 px : au-dessus du texte courant (18,5 px) et loin sous le H2 (≈31 px).
   Un H3 plus petit que le corps de texte n'est pas un H3. */
.avis__st,.src__t{font-family:var(--titre); font-weight:600; font-size:19px; line-height:1.25;
  letter-spacing:-.018em; text-transform:none; color:var(--nuit); margin:0 0 var(--s3)}

/* --- Notre avis : un fond très léger, un filet bleu ---------------------- */
.analyse{background:var(--cobalt-pale); border-left:3px solid var(--cobalt);
  border-radius:0 var(--r) var(--r) 0; padding:var(--s5); max-width:none}
.analyse__l{max-width:74ch; color:var(--nuit-2); font-size:16.5px; line-height:1.58}
.analyse__lab{color:var(--cobalt); font-weight:600}
.dossier__note{color:var(--faible)}

/* --- Caractéristiques : le terme en bleu, des lignes aérées -------------- */
.carac__l{border-bottom:1px solid var(--bord); transition:background .12s ease}
.carac__l:last-child{border-bottom:0}
.carac__l:hover{background:var(--gris-fond)}
.carac dt{color:var(--cobalt)}

/* --- Avis utilisateurs : deux colonnes, chacune signée d'un filet -------- */
.avis__col{border-top:3px solid var(--vert); padding-top:var(--s3)}
.avis__col:nth-child(2){border-top-color:var(--carmin)}
/* Une seule colonne — donc aucun contraste à porter — reste verte : le filet
   ne doit pas annoncer des critiques quand il n'y en a pas. */
.avis__col:first-child .avis__l li::before{background:var(--vert)}

/* --- Historique de prix : la donnée comme sujet ------------------------- */
.historique .tab{border-top:2px solid var(--nuit)}
.historique .tab tbody tr:hover td{background:var(--gris-fond)}
.histo__m--actif{background:var(--cobalt); border-color:var(--cobalt); color:var(--blanc)}
.histo__liste .histo__m:hover,.histo__liste .histo__m:focus-visible{border-color:var(--cobalt); color:var(--cobalt)}

/* --- Autres produits suivis : des lignes, pas des cartes ---------------- */
/* Le nom d'un produit voisin est un titre de la fiche : il suit la taille des
   H3, sinon un H3 plus petit que les autres H3 n'est plus une hiérarchie. */
.alternatives .tab__produit{font-size:19px}
.alt{border-left:3px solid var(--cobalt-pale); padding-left:var(--s4); transition:background .12s ease,border-color .12s ease}
.alt:hover,.alt:focus-within{background:var(--cobalt-pale); border-left-color:var(--cobalt)}

@media (max-width:720px){
  .bloc__t--section{font-size:22px; max-width:none}
  .bloc__tete h2.bloc__t,
  p.breves__t{font-size:22px}
  .analyse{padding:var(--s4); border-radius:0 var(--r) var(--r) 0}
  .avis__col{border-top-width:2px}
  .alt{padding-left:var(--s3)}
}


/* ═══ Temps forts : univers permanents, activation saisonnière ═════════════
   L'encart de homepage n'existe que lorsqu'un temps fort est en cours ou
   proche, et sa présence visuelle dépend de son état : discret à l'approche,
   franc pendant. Le reste du temps, la homepage ne bouge pas. */
.evbande{background:var(--gris-fond); border-bottom:1px solid var(--bord)}
.evbande--actif{background:var(--jaune); border-bottom-color:#DCA800}
/* Le raccourci « padding » écrasait la gouttière horizontale de .conteneur :
   on ne pose ici que les marges verticales, la gouttière reste celle du site. */
.evbande__in{display:flex; align-items:center; justify-content:space-between; gap:var(--s6); padding-top:var(--s4); padding-bottom:var(--s4)}
.evbande__corps{min-width:0}
.evbande__k{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--nuit); opacity:.72; margin:0 0 var(--s2)}
.evbande__t{font-family:var(--titre); font-weight:700; font-size:clamp(20px,2vw,26px); line-height:1.15;
  letter-spacing:-.022em; color:var(--nuit); margin:0 0 var(--s2)}
.evbande__t a{color:inherit; text-decoration:none}
.evbande__t a:hover,.evbande__t a:focus-visible{text-decoration:underline; text-decoration-thickness:2px}
.evbande__d{margin-left:var(--s3); font-size:13px; letter-spacing:.04em; opacity:.78}
.evbande__p{max-width:64ch; margin:0; color:var(--nuit-2)}
.evbande--actif .evbande__p{color:var(--nuit)}
.evbande__actes{display:flex; align-items:center; gap:var(--s4); flex:0 0 auto}
.evbande__n{font-size:12px; color:var(--nuit); opacity:.78}

/* Les éditions d'un temps fort : la mémoire de ce qu'on a vécu, datée. */
.editions{list-style:none; margin:0; padding:0}
.editions__i{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s3); padding:var(--s3) 0; border-bottom:1px solid var(--bord)}
.editions__i:last-child{border-bottom:0}
.editions__t{font-weight:600; color:var(--nuit)}
.editions__dates{color:var(--doux)}
.editions__e{font-family:var(--data); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:2px 9px; border-radius:999px; border:1px solid var(--bord); color:var(--doux)}
.editions__e--ouverte{background:var(--cobalt); border-color:var(--cobalt); color:var(--blanc)}
.editions__e--a_venir{border-color:var(--jaune); background:#FFF6DE; color:var(--nuit)}
.editions__s{color:var(--doux); text-decoration-color:var(--bord)}
.editions__s:hover,.editions__s:focus-visible{color:var(--cobalt)}
.archive__amorce{max-width:70ch; margin:var(--s3) 0 0; font-size:18px; line-height:1.5; color:var(--nuit-2)}

@media (max-width:720px){
  .evbande__in{flex-direction:column; align-items:flex-start; gap:var(--s4)}
  .evbande__actes{flex-wrap:wrap}
  .evbande__d{display:block; margin:var(--s2) 0 0}
}

/* ─── Formulaire de contact ──────────────────────────────────────────────── */
/* Une seule carte, les jetons de la maison. Le jaune reste au signe des prix :
   il n'apparaît pas ici. Erreur en carmin, confirmation en vert. */

.form{margin:var(--s7) 0 0}
.form__c{margin:var(--s5) 0 0; padding:var(--s5); background:var(--gris-fond); border:1px solid var(--bord); border-radius:14px}
.form__l{display:grid; grid-template-columns:1fr 1fr; gap:0 var(--s5)}
.form__champ{margin:0 0 var(--s4); display:flex; flex-direction:column; gap:6px}
.form__champ>label{font-weight:600; color:var(--nuit); font-size:15px}
.form__champ input[type=text],.form__champ input[type=email],.form__champ input[type=url],.form__champ input[type=date],.form__champ select,.form__champ textarea{
  font:inherit; color:var(--nuit); background:var(--blanc); border:1px solid var(--bord); border-radius:8px; padding:10px 12px; width:100%; box-sizing:border-box}
.form__champ input:focus-visible,.form__champ select:focus-visible,.form__champ textarea:focus-visible{outline:2px solid var(--cobalt); outline-offset:1px; border-color:var(--cobalt)}
.form__champ textarea{resize:vertical; line-height:1.55}
.form__aide{color:var(--faible); font-size:14px; line-height:1.45}
.form__req,.form__fac{font-weight:400; font-size:12px; letter-spacing:.02em; text-transform:uppercase; color:var(--faible)}
.form__champ--case{flex-direction:row; align-items:flex-start; gap:10px}
.form__champ--case input{margin-top:3px; width:18px; height:18px; accent-color:var(--cobalt)}
.form__champ--case>label{font-weight:400; font-size:15px; line-height:1.5}
.form__contexte{border-top:1px solid var(--bord); padding-top:var(--s4); margin-top:var(--s2)}
.form__aide--contexte{margin:0 0 var(--s4); font-style:italic}
.form__envoi{margin:var(--s5) 0 0}
.form__retour{margin:var(--s4) 0 0; padding:var(--s3) var(--s4); border-radius:10px; border:1px solid var(--bord); background:var(--blanc); line-height:1.5}
.form__retour--ok{border-color:var(--vert); background:var(--vert-pale); color:var(--vert)}
.form__retour--erreur{border-color:var(--carmin); background:var(--carmin-pale); color:var(--carmin)}
.form__mention{margin:var(--s4) 0 0; color:var(--faible); font-size:14px; line-height:1.55}
/* Le piège reste dans le flux pour un robot, hors de la vue pour un humain. */
.form__piege{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.est-cache{display:none}

/* ---------------------------------------------------------------------------
   La lettre — « Le Fil du mois ».
   Un seul encart, deux emplacements : après le corps d'un article, avant les
   suggestions de lecture ; et une fois, discrètement, à la fin du fil sur
   l'accueil. Il n'emprunte rien d'extérieur : filet haut, tuile au 15, jetons
   et bouton d'outil sont déjà ceux du site. Jamais en fenêtre, jamais collé.
   --------------------------------------------------------------------------- */
.lettre{margin:var(--s7) 0; border:1px solid var(--cobalt-line); border-radius:var(--r); overflow:hidden; background:var(--blanc); color:var(--nuit)}
.lettre__tete{display:flex; align-items:flex-start; gap:var(--s4); padding:var(--s5) var(--s5) var(--s4); background:var(--gris-fond); border-top:2px solid var(--nuit)}
.lettre__tuile{flex:0 0 auto; width:34px; height:34px; border-radius:8px; background:var(--nuit); color:var(--blanc); font-family:var(--data); font-size:16px; font-weight:700; line-height:34px; text-align:center}
.lettre__t{font-family:var(--titre); font-size:19px; font-weight:700; letter-spacing:-.02em; margin:0; color:var(--nuit)}
/* Le bloc impose sa propre encre : dans la section cobalt du fil, ni le titre ni
   le bouton ne doivent emprunter les couleurs de la section. */
.lettre .outil--fort{background:var(--cobalt); border-color:var(--cobalt); color:var(--blanc)}
.lettre .outil--fort:hover{background:var(--cobalt-2); border-color:var(--cobalt-2); color:var(--blanc)}
.lettre__p{margin:6px 0 0; font-size:14.5px; line-height:1.55; color:var(--doux); max-width:62ch}
.lettre__f{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3); padding:var(--s5) var(--s5) var(--s3)}
.lettre__c{flex:1 1 260px; min-width:0; font-family:var(--texte); font-size:16px; color:var(--nuit); background:var(--blanc); border:1px solid var(--bord); border-radius:8px; padding:11px 13px}
.lettre__c::placeholder{color:var(--faible)}
.lettre__b{flex:0 0 auto; font-size:13px; padding:12px 18px; cursor:pointer}
.lettre__fine{margin:0; padding:0 var(--s5) var(--s5); font-size:12.5px; line-height:1.55; color:var(--faible)}
.lettre__etat{margin:0; padding:var(--s4) var(--s5) var(--s5); font-size:14.5px; line-height:1.55}
.lettre__etat--ok{color:var(--vert)}
.lettre__etat--err{color:var(--carmin)}
/* ---------------------------------------------------------------------------
   La lettre, sur l'accueil : le rendez-vous hebdomadaire.
   Une bande de nuit — la surface que le site emploie déjà pour le ruban des
   prix — posée entre les grandes séquences, juste avant « À la une ». Elle ne
   reprend ni la carte blanche du premier essai ni la clôture cobalt du second :
   la lettre n'est plus une dépendance du Fil du mois, c'est un moment à part.
   Elle dit ce qu'on reçoit, puis demande l'adresse.
   --------------------------------------------------------------------------- */
.lettre-sec{background:var(--nuit); color:var(--blanc); padding:var(--s7) 0}
/* Deux colonnes de force égale, centrées l'une sur l'autre dans la bande : à
   gauche le nom et la promesse, à droite l'inscription et sa mention. */
.lettre-sec__grille{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--s5) var(--s8); align-items:center}
.lettre-sec__sur{font-family:var(--data); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--jaune); margin:0}
.lettre-sec__t{font-family:var(--titre); font-weight:700; font-size:clamp(24px,2.6vw,32px); letter-spacing:-.03em;
  margin:var(--s3) 0 0; display:flex; align-items:center; gap:var(--s3)}
.lettre-sec__p{font-size:14.5px; line-height:1.55; color:#C9D2EC; margin:var(--s3) 0 0; max-width:46ch}
.lettre-sec__faire{justify-self:end}
.lettre-sec__f{display:flex; flex-direction:column; gap:var(--s3); align-items:flex-start; margin:0}
.lettre-sec__champ{display:flex; gap:var(--s3); align-items:center}
.lettre-sec__c{flex:0 0 300px; min-width:0; font-family:var(--texte); font-size:15px; color:var(--blanc);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.35); border-radius:8px; padding:11px 13px}
.lettre-sec__c::placeholder{color:#AEB8D6}
.lettre-sec__b{flex:0 0 auto; font-family:var(--texte); font-size:13px; font-weight:600; white-space:nowrap; cursor:pointer;
  background:var(--jaune); border:1px solid var(--jaune); color:var(--nuit); border-radius:8px; padding:11px 16px}
.lettre-sec__b:hover,.lettre-sec__b:focus-visible{background:var(--blanc); border-color:var(--blanc); color:var(--nuit)}
.lettre-sec__fine{margin:0; font-size:12.5px; line-height:1.5; color:#AEB8D6; max-width:46ch}
.lettre-sec__etat{margin:0; font-size:14.5px; line-height:1.55; color:var(--blanc); max-width:44ch}
.lettre-sec__etat--ok{color:var(--jaune)}
.lettre-sec__etat--err{color:var(--carmin-pale)}

@media (max-width:1060px){
  .lettre-sec__grille{grid-template-columns:1fr; gap:var(--s5)}
  .lettre-sec__p{max-width:62ch}
  .lettre-sec__faire{justify-self:stretch; min-width:0}
}

@media (max-width:560px){
  .lettre-sec{padding:var(--s6) 0}
  .lettre-sec__champ{flex-direction:column; align-items:stretch}
  .lettre-sec__c{flex:0 0 auto; width:100%}
  .lettre-sec__b{width:100%}
}

@media (max-width:560px){
  .lettre__f{flex-direction:column; align-items:stretch}
  /* En colonne, la base flexible de 260 px deviendrait une hauteur : le champ
     doit reprendre sa hauteur naturelle. */
  .lettre__c{flex:0 0 auto; width:100%}
  .lettre__b{width:100%}
}

@media (max-width:720px){
  .form__l{grid-template-columns:1fr}
  .form__c{padding:var(--s4)}
}


/* Corrections du contrôle expert du 2 octobre 2026 : trois détails de lecture
   relevés sur la page rendue.
   — le texte d'aide du signalement se détache du lien, il ne s'y colle plus ;
   — une enseigne dont la disponibilité n'a pas été vérifiée le dit dans sa
     pastille : sans quoi un prix plus bas que le prix principal paraîtrait
     incohérent alors qu'il est seulement non confirmé ;
   — la synthèse des avis se lit comme un texte, pas comme une liste chiffrée. */
.achat__signal .micro{display:block; margin-top:.15rem}
.aussi-chez__s{margin-left:6px; font-size:11.5px; color:var(--doux)}
.aussi-chez__x{margin:var(--s3) 0 0}
.avis__synth{margin:0 0 var(--s4); max-width:62ch; line-height:1.65}
.avis__synth+.avis{margin-top:var(--s4)}


/* ═══ Bloc « Historique des prix » — fiches produit ═════════════════════════
   Un composant, mobile d'abord. Le graphique est un SVG écrit par le serveur :
   il se met à l'échelle sans JavaScript, les valeurs restent lisibles au doigt,
   et rien ne clignote au chargement. Les onglets sont des liens : la période et
   le marchand vivent dans l'adresse, la page reste partageable. */

.hp{margin:var(--s5) 0 0}
.hp__vues-l, .hp__periodes-l{display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none}
.hp__vues{margin:0 0 var(--s3)}
.hp__vue{display:inline-block; padding:6px 12px; border:1px solid var(--bord); border-radius:999px;
  font-size:14px; line-height:1.2; color:var(--nuit); text-decoration:none; background:var(--blanc)}
.hp__vue:hover{border-color:var(--cobalt); color:var(--cobalt)}
.hp__vue--actif{background:var(--nuit); border-color:var(--nuit); color:var(--blanc); font-weight:500}
.hp__vue--actif:hover{color:var(--blanc)}
.hp__unmarchand{margin:0 0 var(--s3)}

/* Périodes : un seul contrôle segmenté, qui se fait défiler au doigt si besoin. */
.hp__periodes{margin:0 0 var(--s4); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.hp__periodes::-webkit-scrollbar{display:none}
.hp__periodes-l{flex-wrap:nowrap; width:max-content; min-width:100%;
  border:1px solid var(--bord); border-radius:var(--r); padding:3px; background:var(--gris-fond); gap:3px}
.hp__periode{display:block; padding:6px 14px; border-radius:8px; font-size:14px; font-weight:500;
  color:var(--doux); text-decoration:none; text-align:center; white-space:nowrap}
.hp__periode:hover{color:var(--nuit)}
.hp__periode--actif{background:var(--blanc); color:var(--nuit); box-shadow:0 1px 2px rgba(11,18,38,.10)}

/* Le résumé : la phrase d'abord, elle se lit sans le graphique. */
.hp__resume{margin:0 0 var(--s4); max-width:70ch; font-size:17px; line-height:1.55; color:var(--nuit)}

/* Les chiffres : deux colonnes au téléphone, davantage au large. */
/* Le titre du graphique : la vue nommée, sans emphase. */
.hp__titre{margin:0 0 var(--s2); font-family:var(--titre); font-size:15px; font-weight:600; color:var(--encre)}
/* Repère du plus bas de la période : un cercle, pas une couleur de plus. */
.hp__point--bas{fill:none; stroke-width:2}
.hp__svg--baisse .hp__point--bas{stroke:var(--vert)}
.hp__svg--hausse .hp__point--bas{stroke:var(--carmin)}
.hp__svg--stable .hp__point--bas{stroke:var(--cobalt)}
.hp__etiquette--bas{fill:var(--doux); font-size:11.5px}
/* Un prix ne se coupe jamais : symbole collé au montant. */
.hp__prix{white-space:nowrap}
.hp__couverture{margin:0 0 var(--s4); color:var(--doux)}
/* Un seul relevé : une ligne, pas un cadre vide. */
.hp__unique{margin:0 0 var(--s3); padding:var(--s3) var(--s4); border:1px solid var(--s3);
  border-radius:var(--r); font-family:var(--data); font-size:14px; color:var(--encre)}
/* La ligne du détail qui porte le plus bas du jour. */
.hp__mini{display:inline-block; margin-left:6px; font-family:var(--texte); font-size:11.5px;
  color:var(--vert); white-space:nowrap}
.hp__chiffres{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0;
  margin:0 0 var(--s5); padding:0; border:1px solid var(--bord); border-radius:var(--r); overflow:hidden}
.hp__chiffre{padding:var(--s3) var(--s4); border-top:1px solid var(--bord); border-left:1px solid var(--bord); min-width:0}
.hp__chiffre:nth-child(odd){border-left:0}
.hp__chiffre:nth-child(-n+2){border-top:0}
.hp__chiffre dt{font-size:12.5px; line-height:1.3; color:var(--doux); margin:0 0 2px}
.hp__chiffre dd.hp__texte{white-space:normal}
.hp__chiffre dd{margin:0; font-family:var(--data); font-size:15px; line-height:1.35;
  font-variant-numeric:tabular-nums}
.hp__chiffre--baisse dd{color:var(--vert)}
.hp__chiffre--hausse dd{color:var(--carmin)}

/* La courbe. */
.hp__figure{margin:0 0 var(--s3); padding:0}
.hp__svg{display:block; width:100%; height:auto; overflow:visible}
/* Deux tracés du même relevé : le haut pour le téléphone, le large ailleurs. */
.hp__svg--m{display:none}
.hp__grille{stroke:var(--bord); stroke-width:1; shape-rendering:crispEdges}
.hp__axe{fill:var(--doux); font-family:var(--data); font-size:11.5px}
.hp__axe--date{font-size:11.5px}
.hp__trait{stroke:var(--cobalt); stroke-width:2; stroke-linecap:round; fill:none}
.hp__trait--interrompu{stroke-dasharray:4 5; stroke:var(--cobalt-2); opacity:.75}
.hp__svg--baisse .hp__trait{stroke:var(--vert)}
.hp__svg--hausse .hp__trait{stroke:var(--carmin)}
.hp__point{fill:var(--blanc); stroke:var(--cobalt); stroke-width:2}
.hp__svg--baisse .hp__point{stroke:var(--vert)}
.hp__svg--hausse .hp__point{stroke:var(--carmin)}
.hp__point--dernier{fill:var(--cobalt); stroke:var(--blanc); stroke-width:2.5}
.hp__svg--baisse .hp__point--dernier{fill:var(--vert)}
.hp__svg--hausse .hp__point--dernier{fill:var(--carmin)}
.hp__etiquette{fill:var(--nuit); font-family:var(--data); font-size:13px; font-weight:600}
.hp__legende{margin:var(--s2) 0 0; color:var(--doux)}
.hp__vide{margin:0 0 var(--s3); color:var(--doux)}
.hp__note{margin:var(--s3) 0 0; color:var(--doux); max-width:70ch}
.hp__tab{margin-top:var(--s4)}

@media (max-width:640px){
  .hp__svg:not(.hp__svg--m){display:none}
  .hp__svg--m{display:block}
  /* Le tracé du téléphone est plus haut : ses étiquettes restent lisibles. */
  .hp__svg--m .hp__axe, .hp__svg--m .hp__axe--date{font-size:15px}
  .hp__svg--m .hp__etiquette, .hp__svg--m .hp__valeur{font-size:15px}
}
@media (min-width:600px){
  .hp__chiffres{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hp__chiffre:nth-child(odd){border-left:1px solid var(--bord)}
  .hp__chiffre:nth-child(3n+1){border-left:0}
  .hp__chiffre:nth-child(-n+3){border-top:0}
}
@media (min-width:900px){
  .hp__chiffres{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hp__chiffre:nth-child(3n+1){border-left:1px solid var(--bord)}
  .hp__chiffre:nth-child(4n+1){border-left:0}
  .hp__chiffre:nth-child(-n+4){border-top:0}
  .hp__svg{max-height:320px}
}

/* ───────────────────────────────────────────────────────────────────────────
   Temps fort — composition desktop.
   Portée : main.tf-large, c'est-à-dire la page « temps fort » seulement.
   Largeur éditoriale utile 1232 px : deux colonnes de ~590 px (55 à 70
   caractères), grilles de cartes sobres à filet cobalt, tableau des produits
   inchangé, retour à une colonne quand la place manque.
   ─────────────────────────────────────────────────────────────────────────── */
.tf-large--black-friday .archive__amorce{max-width:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s6) var(--s7); columns:auto}
.tf-large--black-friday .archive__amorce p{max-width:none}
.tf-large--black-friday .tf-colonnes{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s7); align-items:start}
.tf-large--black-friday .tf-colonne{min-width:0}
.tf-large--black-friday .tf-colonne p,.tf-large--black-friday .tf-moment__c p{max-width:none}
.tf-large--black-friday .tf-liste2 ul{columns:2; column-gap:var(--s7)}
.tf-large--black-friday .tf-liste2 li{break-inside:avoid}
.tf-large--black-friday .tf-lire{margin-top:var(--s6)}
.tf-large--black-friday .tf-lire__t{margin:0 0 var(--s4); font-family:var(--data); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faible)}
.tf-large--black-friday .tf-lire__l{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s6); margin:0; padding:0; list-style:none}
.tf-large--black-friday .tf-lire__i{min-width:0}
.tf-large--black-friday .tf-lire__a,.tf-large--black-friday .tf-cat__l,.tf-large--black-friday .tf-methode__i{display:block; border-top:2px solid var(--cobalt); padding-top:var(--s4); color:var(--nuit); font-weight:600; text-decoration:none}
.tf-large--black-friday .tf-lire__a:hover,.tf-large--black-friday .tf-lire__a:focus-visible,
.tf-large--black-friday .tf-cat__l:hover,.tf-large--black-friday .tf-cat__l:focus-visible,
.tf-large--black-friday .tf-methode__i:hover,.tf-large--black-friday .tf-methode__i:focus-visible{border-top-color:var(--cobalt-2); color:var(--cobalt)}
.tf-large--black-friday .tf-cats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s5) var(--s6); margin:0; padding:0; list-style:none}
.tf-large--black-friday .tf-cat{min-width:0}
.tf-large--black-friday .tf-cat__l{display:flex; flex-direction:column; gap:var(--s2)}
.tf-large--black-friday .tf-cat__n{line-height:1.3; text-wrap:balance}
.tf-large--black-friday .tf-cat__m{font-size:11px; font-weight:400; color:var(--faible)}
.tf-large--black-friday .tf-moments{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s6); margin:0; padding:0; list-style:none}
.tf-large--black-friday .tf-moment{min-width:0; border-top:2px solid var(--cobalt); padding-top:var(--s4)}
.tf-large--black-friday .tf-moment__t{margin:0 0 var(--s3); font-weight:600}
.tf-large--black-friday .tf-moment__c p{margin-top:0}
.tf-large--black-friday .tf-colonnes--suite{margin-top:var(--s7)}
/* Un seul groupe (le constat des contrôles) : il prend toute la largeur, le texte sur deux colonnes. */
.tf-large--black-friday .tf-colonnes--suite > .tf-colonne:only-child{grid-column:1/-1}
.tf-large--black-friday .tf-colonnes--suite > .tf-colonne:only-child p{columns:2; column-gap:var(--s7)}
.tf-large--black-friday .tf-methode{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.5fr); gap:var(--s7); align-items:start}
.tf-large--black-friday .tf-methode__note p{max-width:66ch}
.tf-large--black-friday .tf-methode__l{display:grid; gap:var(--s3); margin:0; padding:0; list-style:none}
.tf-large--black-friday .tf-methode__i{border-top-width:1px; border-top-color:var(--bord); padding-top:var(--s3)}
.tf-large--black-friday .src li{display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:var(--s2) var(--s5); align-items:baseline; padding-top:var(--s2)}
.tf-large--black-friday .src__n{font-size:11px; color:var(--faible); text-align:right; white-space:nowrap}
.tf-large--black-friday .src__r{margin-top:0; text-align:right; white-space:nowrap}
/* Dates à retenir : une ligne de données qui occupe la largeur, l'hôte à droite. */
.tf-large--black-friday .tf-dates .editions__i{display:grid; grid-template-columns:auto auto auto minmax(0,1fr); gap:var(--s3) var(--s5); align-items:baseline}
.tf-large--black-friday .tf-dates .editions__s{justify-self:end; text-align:right; white-space:nowrap}

/* Sous 1060 px : la composition se resserre sans redevenir une page mobile. */
@media (max-width:1060px){
  .tf-large--black-friday .archive__amorce{grid-template-columns:minmax(0,1fr)}
  .tf-large--black-friday .tf-colonnes--suite > .tf-colonne:only-child p{columns:1}
  .tf-large--black-friday .tf-cats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tf-large--black-friday .tf-moments{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tf-large--black-friday .src li{grid-template-columns:minmax(0,1fr) auto}
  .tf-large--black-friday .src__n{text-align:left}
}

/* Sous 900 px : une seule colonne de texte, les listes reprennent un seul flux. */
@media (max-width:900px){
  .tf-large--black-friday .tf-cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tf-large--black-friday .tf-colonnes,.tf-large--black-friday .tf-methode{grid-template-columns:minmax(0,1fr)}
  .tf-large--black-friday .tf-liste2 ul{columns:1}
}

/* Sous 720 px : tout s'empile. */
@media (max-width:720px){
  .tf-large--black-friday .tf-dates .editions__i{display:flex; flex-wrap:wrap}
  .tf-large--black-friday .tf-cats,.tf-large--black-friday .tf-lire__l,.tf-large--black-friday .tf-moments{grid-template-columns:minmax(0,1fr)}
  .tf-large--black-friday .src li{grid-template-columns:minmax(0,1fr); gap:0}
  .tf-large--black-friday .src__n,.tf-large--black-friday .src__r{text-align:left}
}