:root{
  --red:#d6202a; --red-dark:#b0161f; --yellow:#f6c500; --yellow-line:#c99a00; --blue:#0060b5;
  --green:#009a44; --orange:#ef7c1a; --purple:#7a3fa0;

  --bg:#fffdf6; --surface:#fff; --plate:#fff;
  --border:#e9e2d0; --text:#1b1a17; --muted:#6d685c;
  --accent:var(--red); --accent-soft:#fdecec; --accent-text:var(--red-dark);
  --ok:var(--green); --ok-soft:#e6f5ec; --ok-text:#04713a;

  --radius:14px; --radius-sm:10px;
  --shadow:0 1px 2px rgb(27 26 23 / .05), 0 6px 18px rgb(27 26 23 / .07);
  --shadow-lift:0 2px 4px rgb(27 26 23 / .07), 0 14px 30px rgb(27 26 23 / .12);
  --font:ui-rounded,"Nunito","Segoe UI Variable",system-ui,-apple-system,"Segoe UI",
         Roboto,Helvetica,Arial,sans-serif;
  --studs:radial-gradient(circle at 50% 50%, rgb(255 255 255 / .5) 33%, transparent 34%);

  /* Le site assume un habillage clair unique. Sans cette déclaration, un système
     réglé en sombre laisse quand même le navigateur noircir la barre de défilement
     et le champ de recherche — les seuls éléments qu'il habille lui-même. */
  color-scheme:light;
}
*{box-sizing:border-box}

/* Bandeau de couleurs primaires en haut de chaque page : la signature du site. */
body::before{
  content:"";display:block;height:7px;
  background:linear-gradient(90deg,
    var(--red) 0 20%, var(--yellow) 20% 40%, var(--blue) 40% 60%,
    var(--green) 60% 80%, var(--orange) 80% 100%);
}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.55;
     -webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}
main{max-width:1080px;margin:0 auto;padding:0 1rem 4rem}

header.site{max-width:1080px;margin:0 auto;padding:1rem;display:flex;flex-wrap:wrap;
            gap:.75rem 1rem;align-items:center;justify-content:space-between}
.brand{display:inline-flex;align-items:center;gap:.55rem;font-weight:800;font-size:1.3rem;
       text-decoration:none;letter-spacing:-.02em}
/* Pastille de tenons : évocation de la brique sans en reprendre la forme. */
.brand::before{
  content:"";width:2.1rem;height:1.5rem;border-radius:6px;flex:none;
  background-color:var(--red);
  background-image:var(--studs),var(--studs);
  background-size:1.05rem 1.5rem;
  background-position:0 0, 1.05rem 0;
  background-repeat:no-repeat;
  box-shadow:inset 0 -3px 0 rgb(0 0 0 / .18);
}
header.site nav{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.925rem;font-weight:600}
header.site nav a{color:var(--muted);text-decoration:none;padding:.3rem .7rem;border-radius:999px;
                  transition:background-color .12s, color .12s}
header.site nav a:nth-child(1):hover{background:var(--accent-soft);color:var(--accent-text)}
header.site nav a:nth-child(2):hover{background:#fff4cf;color:#8a6a00}
header.site nav a:nth-child(3):hover{background:#e5f0fb;color:var(--blue)}

h1{font-size:2.1rem;line-height:1.15;letter-spacing:-.025em;margin:.5rem 0 .25rem;font-weight:800}
h2{font-size:1.35rem;margin:2.5rem 0 .85rem;letter-spacing:-.015em;font-weight:800;
   display:flex;align-items:center;gap:.55rem}
/* Tenon coloré en tête de section : rythme la page sans ajouter de balise. */
h2::before{content:"";width:.7rem;height:.7rem;border-radius:50%;flex:none;
           background:var(--yellow);box-shadow:0 0 0 3px var(--accent-soft)}
.lede{color:var(--muted);margin:0 0 1.5rem;max-width:62ch;font-size:1.05rem}
.muted{color:var(--muted)}
.small{font-size:.85rem}

/* Fil d'Ariane. Le chevron est dessiné par la feuille et non écrit dans la liste :
   un séparateur inséré entre deux <li> serait épelé par un lecteur d'écran, alors
   qu'il ne sert qu'à l'œil — la structure, elle, est déjà portée par le <ol>.
   Le maillon courant ne se souligne pas au survol : il ne mène nulle part. */
.crumbs{margin:0 0 1.25rem}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.1rem .5rem;
           list-style:none;margin:0;padding:0;font-size:.85rem;font-weight:600}
.crumbs li{display:flex;align-items:center;gap:.5rem;min-width:0}
.crumbs li+li::before{content:"›";color:var(--yellow-line);font-weight:800}
.crumbs a{color:var(--muted);text-decoration:none;border-radius:999px;
          padding:.1rem .4rem;margin:-.1rem -.4rem;
          transition:background-color .12s, color .12s}
.crumbs a:hover{background:var(--accent-soft);color:var(--accent-text)}
/* Le nom du set peut être long — jusqu'à 89 caractères dans le catalogue : il se
   tronque plutôt que de déborder. « min-width:0 » n'est pas décoratif : sans lui,
   un élément flex refuse de descendre sous sa largeur minimale de contenu, qui
   avec « nowrap » vaut la ligne entière — l'ellipse ne se déclencherait jamais et
   le nom pousserait une barre de défilement horizontale sur téléphone. Le titre
   juste en dessous porte le nom complet, rien n'est perdu. */
.crumbs [aria-current]{color:var(--text);min-width:0;
                       overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Accueil : bloc d'accroche sur fond de tenons. */
.intro{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
       box-shadow:var(--shadow);padding:1.75rem 1.5rem 1.4rem;margin:1rem 0 2rem;position:relative;
       overflow:hidden}
.intro::after{
  content:"";position:absolute;inset:auto 0 0 auto;width:15rem;height:7.5rem;
  background-image:radial-gradient(circle at 50% 50%, var(--yellow) 30%, transparent 31%);
  background-size:2.5rem 2.5rem;background-position:right bottom;opacity:.3;z-index:0;
  -webkit-mask-image:linear-gradient(300deg, #000 30%, transparent 75%);
  mask-image:linear-gradient(300deg, #000 30%, transparent 75%);
  pointer-events:none;
}
/* Le motif est décoratif : il passe DERRIÈRE le contenu, sinon il recouvre
   les boutons dès que la carte se resserre sur mobile. */
.intro > *{position:relative;z-index:1}
.intro h1{margin-top:0;font-size:2.4rem}
.intro .lede{margin-bottom:1.1rem}
.intro .chips{margin-bottom:0}
@media(max-width:560px){h1{font-size:1.7rem}.intro h1{font-size:1.85rem}}

.grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
      overflow:hidden;display:flex;flex-direction:column;text-decoration:none;
      box-shadow:var(--shadow);position:relative;
      transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;
              background:linear-gradient(90deg,var(--red),var(--yellow),var(--blue),var(--green));
              opacity:0;transition:opacity .14s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--accent)}
.card:hover::before{opacity:1}
.card img{width:100%;aspect-ratio:1;object-fit:contain;background:var(--plate);padding:.6rem}
.card .body{padding:.7rem .8rem .85rem;display:flex;flex-direction:column;gap:.2rem;flex:1}
.card .ref{font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums;font-weight:600}
.card .nm{font-size:.925rem;font-weight:700;line-height:1.3}
.card .pr{margin-top:auto;padding-top:.45rem;font-weight:800;font-size:1.05rem;
          font-variant-numeric:tabular-nums;color:var(--accent-text)}
.card .was{font-weight:500;color:var(--muted);text-decoration:line-through;font-size:.8em;margin-left:.35rem}

.tag{display:inline-block;background:var(--yellow);color:#4a3a00;border-radius:999px;
     padding:.1rem .55rem;font-size:.72rem;font-weight:800;align-self:flex-start;
     letter-spacing:.01em}
.tag.ok{background:var(--ok-soft);color:var(--ok-text);box-shadow:inset 0 0 0 1px var(--ok)}

.detail{display:grid;gap:2rem;grid-template-columns:minmax(0,340px) minmax(0,1fr);align-items:start}
/* « minmax(0,1fr) » et non « 1fr » : la valeur minimale par défaut d'une piste de
   grille est « auto », c'est-à-dire la largeur minimale de son contenu. Le tableau
   des offres, qui ne descend pas sous 445 px, élargissait donc la colonne — et avec
   elle la page — à 445 px sur un écran de 375. La ligne du dessus utilisait déjà
   cette forme ; c'est ici qu'elle manquait. */
@media(max-width:720px){.detail{grid-template-columns:minmax(0,1fr)}}
.detail .hero{width:100%;aspect-ratio:1;object-fit:contain;background:var(--plate);
              border:1px solid var(--border);border-radius:var(--radius);padding:1rem;
              box-shadow:var(--shadow)}
/* Galerie de la fiche. Une piste à défilement par accrochage, et des vignettes qui
   sont de simples ancres : sans script, un clic amène quand même l'image visée.
   Le cadre porte la bordure, l'image ne porte qu'elle-même — c'est ce qui permet
   de garder le cadre carré alors que les visuels vont du 4:3 paysage au 1:2 portrait. */
.gallery{display:flex;flex-direction:column;gap:.5rem}
.frames{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
        background:var(--plate);border:1px solid var(--border);border-radius:var(--radius);
        box-shadow:var(--shadow);scrollbar-width:none;overscroll-behavior-x:contain}
/* Le glissement n'est demandé qu'à qui ne l'a pas refusé, et c'est ici qu'il se règle :
   le script s'en remet à cette déclaration au lieu d'imposer « smooth » lui-même. */
@media(prefers-reduced-motion:no-preference){.frames{scroll-behavior:smooth}}
.frames::-webkit-scrollbar{display:none}
.frames img{flex:0 0 100%;width:100%;aspect-ratio:1;object-fit:contain;padding:1rem;
            scroll-snap-align:center}
/* Quatre colonnes fixes, et non un enroulement libre : à huit visuels, une bande
   qui déborde donne 6 + 2 et se lit comme un accident de mise en page. */
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}
.thumbs a{display:block;aspect-ratio:1;padding:3px;background:var(--plate);
          border:1px solid var(--border);border-radius:var(--radius-sm);
          transition:border-color .12s, box-shadow .12s}
.thumbs a:hover{border-color:var(--blue)}
/* .on n'existe qu'avec le script : sans lui la bande reste une liste d'ancres,
   ce qui se lit et se clique très bien. */
.thumbs a.on{border-color:var(--blue);box-shadow:0 0 0 2px color-mix(in srgb, var(--blue) 28%, transparent)}
.thumbs img{width:100%;height:100%;object-fit:contain;display:block}
/* En colonne unique, la galerie prendrait toute la largeur : un carré de 700 px de
   haut sur tablette. Le plafond la laisse pleine largeur sur téléphone et la borne
   au-delà. */
@media(max-width:720px){.gallery{max-width:420px}}

/* Caractéristiques de la fiche, sur deux niveaux. En vedette les chiffres qui servent
   à comparer deux sets — pièces, prix par pièce, note ; sous le filet l'état civil,
   que le titre et le fil d'Ariane portent déjà. Même partition que .pov, dont le
   titre en petites capitales est repris, mais sans liseré de couleur : le part-out
   reste le seul encadré accentué de la fiche. */
.specs{margin:1.25rem 0 0;background:var(--surface);border:1px solid var(--border);
       border-radius:var(--radius);padding:1rem 1.1rem;box-shadow:var(--shadow)}
.specs h2{font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
          margin:0;font-weight:800}
.specs h2::before{display:none}
/* Les vedettes se lisent d'un seul coup d'œil : groupées à gauche, elles forment un
   rang ; étalées sur la largeur de la carte, elles se lisent une par une. auto-fit
   couvre les fiches à deux vedettes, ou à une seule (sans prix, sans note), sans
   laisser de colonne vide. En colonne unique la carte se resserre : les pistes
   reprennent alors 1fr, un rang groupé y laisserait un vide à droite. */
.specs-key{display:grid;grid-template-columns:repeat(auto-fit,minmax(5.75rem,auto));
           justify-content:start;gap:2.25rem;margin:.75rem 0 0}
@media(max-width:720px){.specs-key{grid-template-columns:repeat(auto-fit,minmax(5.5rem,1fr));
                                   justify-content:stretch;gap:.85rem}}
.specs-key div{display:flex;flex-direction:column;line-height:1.15}
.specs-key strong{font-size:1.35rem;font-weight:800;font-variant-numeric:tabular-nums}
.specs-key span{font-size:.78rem;color:var(--muted);font-weight:600;margin-top:.2rem}
dl.specs-facts{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1rem;margin:.95rem 0 0;
               padding-top:.85rem;border-top:1px solid var(--border);font-size:.9rem}
/* Sans vedette — ni pièces, ni note, ni prix — le filet se retrouverait sous le
   titre, où il ne sépare plus rien. L'adjacence suffit à le voir. */
.specs h2 + dl.specs-facts{border-top:none;padding-top:0;margin-top:.6rem}
dl.specs-facts dt{color:var(--muted);font-weight:600}
dl.specs-facts dd{margin:0;font-variant-numeric:tabular-nums;font-weight:700}

/* Encadré « en pièces détachées », sous l'image de la fiche. Violet : les autres
   couleurs sont déjà prises par une information marchande (vert = meilleur prix,
   rouge = bouton d'achat), et ce chiffre-ci n'est pas une offre. */
.pov{margin:1.25rem 0 0;background:var(--surface);border:1px solid var(--border);
     border-top:4px solid var(--purple);border-radius:var(--radius);padding:1.1rem;
     box-shadow:var(--shadow)}
.pov h2{font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
        margin:0;font-weight:800}
.pov h2::before{display:none} /* le tenon coloré rythme le flux, pas les encadrés */
.pov-net{display:flex;flex-direction:column;line-height:1.1;margin:.4rem 0 .9rem}
.pov-net strong{font-size:1.7rem;font-weight:800;font-variant-numeric:tabular-nums;
                color:var(--purple)}
.pov-net span{font-size:.8rem;color:var(--muted);font-weight:600;margin-top:.25rem}
dl.pov-facts{display:grid;grid-template-columns:1fr auto;gap:.4rem 1rem;margin:0;
             font-size:.9rem;padding-top:.85rem;border-top:1px solid var(--border)}
dl.pov-facts dt{color:var(--muted);font-weight:600}
dl.pov-facts dd{margin:0;font-weight:800;font-variant-numeric:tabular-nums;text-align:right}
.pov .small{margin:.9rem 0 0}

/* Le classement a six colonnes chiffrées : sur mobile il défile dans son propre
   cadre, jamais en poussant la page à déborder horizontalement. */
.scroll-x{overflow-x:auto}
table.rank{width:100%;min-width:620px;border-collapse:separate;border-spacing:0;
           font-size:.92rem;background:var(--surface);border:1px solid var(--border);
           border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
           margin:.5rem 0 1rem}
table.rank th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;
              color:var(--muted);font-weight:800;padding:.6rem .8rem;background:var(--bg);
              border-bottom:1px solid var(--border);white-space:nowrap}
table.rank th:not(:first-child){text-align:right}
table.rank td{padding:.65rem .8rem;border-bottom:1px solid var(--border);vertical-align:middle}
table.rank tbody tr:last-child td{border-bottom:none}
table.rank tbody tr:nth-child(even) td{background:color-mix(in srgb, var(--bg) 60%, var(--surface))}
table.rank td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
table.rank a{font-weight:700;text-decoration:none}
table.rank a:hover{text-decoration:underline;text-decoration-color:var(--purple)}
table.rank td .muted{display:block;font-weight:600}

/* Le tableau des offres ne descend pas sous ~465 px : quatre colonnes, dont un prix
   et un bouton qui ne se coupent pas. En dessous il défile DANS son cadre au lieu
   de pousser la page entière — même règle que la piste de la galerie. Le « width:100% »
   de la table suffit à la laisser trouver sa largeur minimale de contenu : lui imposer
   « max-content » l'étirerait à 555 px et ferait défiler 90 px pour rien. */
.offers-wrap{overflow-x:auto;margin:.5rem 0 0}
.offers-wrap table.offers{margin:0}
table.offers{width:100%;border-collapse:separate;border-spacing:0;margin:.5rem 0 0;font-size:.95rem;
             background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
             overflow:hidden;box-shadow:var(--shadow)}
table.offers th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
                color:var(--muted);font-weight:800;padding:.6rem .8rem;
                border-bottom:1px solid var(--border);background:var(--bg)}
table.offers td{padding:.8rem;border-bottom:1px solid var(--border);vertical-align:middle;font-weight:600}
table.offers tbody tr:last-child td{border-bottom:none}
table.offers tr.best td{background:var(--ok-soft)}
table.offers tr.best td:first-child{box-shadow:inset 4px 0 0 var(--ok)}
table.offers .price{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:1.05rem}
/* Le repli n'a de raison d'être que quand la colonne « Disponibilité » disparaît. */
.dispo-repli{display:none}
/* Sur téléphone, les quatre colonnes demandent 465 px pour 343 disponibles, et c'est
   le bouton — la seule chose qui rapporte — qui sort du cadre. Resserrer les marges
   et les en-têtes ne fait descendre qu'à 403 px : il faut une colonne de moins.
   « Disponibilité » est celle qui coûte le plus (120 px, à cause de son en-tête en
   capitales espacées) et qui apporte le moins : elle vaut « — » chez Cultura, dont
   le datalayer ne porte aucun champ de stock. L'information n'est pas perdue là où
   elle importe : quand une offre n'est PAS disponible, il n'y a pas de bouton, et
   c'est le libellé qui prend sa place dans la dernière colonne — sans quoi la ligne
   montrerait un prix et une case vide, sans dire pourquoi. */
@media(max-width:560px){
  table.offers th:nth-child(3),table.offers td:nth-child(3){display:none}
  table.offers th,table.offers td{padding:.6rem .55rem}
  .dispo-repli{display:inline}
}
table.offers tr.best .price{color:var(--ok-text)}

.btn{display:inline-block;background:var(--red);color:#fff;text-decoration:none;font-weight:800;
     font-size:.875rem;padding:.5rem 1rem;border-radius:999px;white-space:nowrap;
     box-shadow:0 3px 0 var(--red-dark);transition:transform .1s ease, box-shadow .1s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--red-dark)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--red-dark)}

/* Historique de prix : un seul cadre pour tous les marchands — même mesure, même
   unité, donc un seul axe. Les traits gardent leur épaisseur quelle que soit la
   largeur rendue (vector-effect), sans quoi le viewBox les étire avec le reste. */
figure.hist{margin:0}
.chart-wrap{position:relative}
.chart{display:block;width:100%;height:auto;touch-action:pan-y;overflow:visible}
.chart .grid,.chart .axis{stroke:var(--border);stroke-width:1;vector-effect:non-scaling-stroke}
.chart .tick{fill:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums}
.chart .line{fill:none;stroke:var(--c);stroke-width:2;stroke-linecap:round;
             stroke-linejoin:round;vector-effect:non-scaling-stroke}
.chart .area{fill:var(--c);stroke:none;opacity:.1}
/* L'anneau à la couleur du fond détache les points là où deux courbes se croisent :
   c'est du blanc qui sépare, jamais un contour ajouté à la marque. */
.chart .pt{fill:var(--c);stroke:var(--surface);stroke-width:2;vector-effect:non-scaling-stroke}
/* Le texte ne porte jamais la couleur de la donnée : c'est le point coloré à côté
   qui dit de quelle courbe il s'agit. */
.chart .endlabel{fill:var(--text);font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.chart .cross{stroke:var(--muted);stroke-width:1;vector-effect:non-scaling-stroke;opacity:0}
.chart .cross.on{opacity:.4}
.chart .s-lego{--c:var(--blue)}
.chart .s-cultura{--c:var(--red)}
/* Orange et pas vert pour King Jouet : le vert dit déjà « meilleur prix » sur le
   tableau des offres, et une clé verte en face d'un marchand se lirait comme un
   verdict plutôt que comme une couleur de courbe. */
.chart .s-king-jouet{--c:var(--orange)}
.chart:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:var(--radius-sm)}

/* Clé de légende : un trait, parce que la marque est une courbe. */
.key{display:inline-block;width:15px;height:3px;border-radius:2px;vertical-align:middle;
     margin-right:.45rem;background:var(--c,var(--muted))}
.k-lego{--c:var(--blue)}
.k-cultura{--c:var(--red)}
.k-king-jouet{--c:var(--orange)}
.chart-legend{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;margin:.5rem 0 0;
              font-size:.875rem;font-weight:700}
ul.hist-flat{list-style:none;padding:0;margin:.5rem 0 0;font-size:.95rem}
ul.hist-flat li{padding:.18rem 0}

.chart-tip{position:absolute;top:2px;pointer-events:none;background:var(--surface);
           color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);
           padding:.5rem .65rem;font-size:.82rem;line-height:1.45;white-space:nowrap;
           box-shadow:var(--shadow-lift);opacity:0;transition:opacity .12s ease;z-index:2}
.chart-tip.on{opacity:1}
.chart-tip .tip-day{color:var(--muted);font-weight:700;font-size:.75rem;margin-bottom:.15rem}
.chart-tip b{font-weight:800;font-variant-numeric:tabular-nums}

details.chart-table{margin:1rem 0 0;font-size:.9rem}
details.chart-table summary{cursor:pointer;color:var(--muted);font-weight:700;
                            padding:.25rem 0;width:fit-content}
details.chart-table summary:hover{color:var(--text)}
details.chart-table table.rank{min-width:0;margin-top:.5rem}

input.search{width:100%;padding:.85rem 1rem;font-size:1.05rem;font-family:inherit;color:inherit;
             font-weight:600;background:var(--surface);border:2px solid var(--border);
             border-radius:999px;box-shadow:var(--shadow)}
input.search::placeholder{font-weight:500;color:var(--muted)}
input.search:focus{outline:none;border-color:var(--blue)}

.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
.chips a{background:var(--surface);border:2px solid var(--border);border-radius:999px;
         padding:.35rem .9rem;font-size:.9rem;font-weight:700;text-decoration:none;
         transition:border-color .12s, color .12s, transform .12s}
.chips a:hover{transform:translateY(-2px)}
.chips a .muted{font-weight:600;font-variant-numeric:tabular-nums}
/* Six teintes en rotation : chaque thème garde la sienne d'une page à l'autre.
   Le fond teinté vaut mieux qu'un simple liseré : le jaune, trop clair pour un
   trait sur blanc, tenait mal la comparaison avec les cinq autres. */
.chips a.c0{--chip:var(--red)}
.chips a.c1{--chip:var(--yellow-line)}
.chips a.c2{--chip:var(--blue)}
.chips a.c3{--chip:var(--green)}
.chips a.c4{--chip:var(--orange)}
.chips a.c5{--chip:var(--purple)}
.chips a.c0,.chips a.c1,.chips a.c2,.chips a.c3,.chips a.c4,.chips a.c5{
  border-color:var(--chip);background:color-mix(in srgb, var(--chip) 10%, var(--surface))}
.chips a.c0:hover,.chips a.c1:hover,.chips a.c2:hover,.chips a.c3:hover,
.chips a.c4:hover,.chips a.c5:hover{background:color-mix(in srgb, var(--chip) 20%, var(--surface))}

footer.site{max-width:1080px;margin:0 auto;padding:2rem 1rem 3rem;color:var(--muted);
            font-size:.85rem;position:relative}
/* Rangée de tenons en guise de séparateur : rappelle le bandeau de tête. */
footer.site::before{content:"";display:block;height:10px;margin-bottom:1.5rem;border-radius:999px;
  background-image:radial-gradient(circle at 50% 50%, var(--border) 40%, transparent 41%);
  background-size:20px 10px}
footer.site p{margin:.5rem 0}
.disclosure{background:var(--surface);border:1px solid var(--border);
            border-left:5px solid var(--yellow);border-radius:var(--radius);
            padding:.85rem 1rem;box-shadow:var(--shadow)}
.stamp{font-size:.82rem;color:var(--muted);margin:.85rem 0 0}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
  .card:hover,.chips a:hover,.btn:hover,.btn:active{transform:none}
}