/* Page de résultats. Plus dense que l'accueil : c'est un outil de comparaison,
   pas une vitrine. Les tokens et les composants communs viennent de
   tokens.css et composants.css, qui sont chargés avant. */

/* Gris de liste, nettement plus soutenu que le --texte-secondaire de
   l'accueil. Lu en balayage, à 15 px, entre deux chiffres, le gris clair
   passe pour un texte désactivé. */
:root { --gris-liste: #45536B; }

/* ---------- Fil d'Ariane ---------- */

.fil { padding-block: var(--e2); }
.fil ol { display: flex; flex-wrap: wrap; gap: var(--e1); margin: 0; padding: 0; list-style: none;
          color: var(--texte-secondaire); font-size: var(--petit); }
.fil li + li::before { content: "›"; margin-right: var(--e1); color: var(--bordure); }
.fil a { color: var(--texte-secondaire); }
.fil a:hover { color: var(--bleu); }

/* ---------- En-tête de catégorie ---------- */

.tete-categorie { background: var(--surface); border-bottom: var(--trait); }
.tete-categorie__interieur { display: flex; align-items: center; justify-content: space-between;
                             gap: var(--e4); padding-block: var(--e4) var(--e5); }
.tete-categorie h1 { font-size: var(--h2); line-height: var(--h2-inter); font-weight: var(--noir); }
.tete-categorie__compte { margin: var(--e2) 0 0; color: var(--texte-secondaire);
                          font-size: var(--corps-large); }
.tete-categorie__visuel { display: none; }

.marche { display: grid; gap: var(--e2); margin: var(--e4) 0 0; padding: 0; list-style: none; }
.marche li { padding: var(--e2) var(--e3); background: var(--fond);
             border: var(--trait); border-radius: var(--rayon-carte); }
.marche span { display: block; color: var(--texte-secondaire); font-size: var(--petit); }
.marche b { display: block; margin-top: 2px; font-size: 1.375rem; line-height: 1.2;
            font-weight: var(--noir); color: var(--vert); }
/* Le prix moyen n'est ni bon ni mauvais : c'est un repère, il reste noir.
   Le vert ne sert qu'à ce qui est effectivement le meilleur. */
.marche li:last-child b { color: var(--texte); }
.marche small { display: block; margin-top: 2px; color: var(--texte-secondaire);
                font-size: var(--minuscule); }

/* ---------- Colonnes ---------- */

.colonnes { display: grid; gap: var(--e5); padding-block: var(--e5) var(--e7); align-items: start; }

/* ---------- Filtres ---------- */

.filtres { background: var(--surface); border: var(--trait); border-radius: var(--rayon-carte);
           padding: var(--e3); }
.filtres__bascule { display: flex; align-items: center; justify-content: space-between;
                    width: 100%; padding: var(--e2) var(--e3); background: var(--surface);
                    border: var(--trait); border-radius: var(--rayon-bouton);
                    font: inherit; font-weight: var(--demi-gras); color: var(--texte);
                    cursor: pointer; }
.filtres__bascule::after { content: "+"; font-weight: var(--noir); color: var(--bleu); }
.filtres__bascule[aria-expanded="true"]::after { content: "−"; }
.filtres__entete { display: flex; align-items: baseline; justify-content: space-between;
                   padding-bottom: var(--e2); border-bottom: var(--trait); }
/* Sous 1024 px, le bouton de repli porte déjà le mot « Filtres » : le titre
   ferait doublon. Il reste dans le HTML pour la structure du document. */
.filtres h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.filtres__entete { padding-bottom: 0; border-bottom: 0; }
.filtres__effacer { font-size: var(--petit); }

.facette { margin: 0; padding: var(--e3) 0; border: 0; border-bottom: var(--trait); }
.facette legend { padding: 0; font-weight: var(--gras); font-size: var(--petit);
                  text-transform: uppercase; letter-spacing: 0.04em; color: var(--texte-secondaire); }
.facette ul { margin: var(--e2) 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.facette label { display: flex; align-items: center; gap: var(--e1); margin-top: var(--e1);
                 font-size: var(--petit); cursor: pointer; }
.facette small { color: var(--texte-secondaire); }
.facette a { color: var(--texte); font-size: var(--petit); }
.facette a.actif { font-weight: var(--gras); color: var(--bleu); }
.facette input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--bleu); }
.facette--prix { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e1) var(--e2); }
.facette--prix legend { grid-column: 1 / -1; }
.facette--prix label { font-size: var(--minuscule); color: var(--texte-secondaire); }
.facette--prix input { width: 100%; padding: 6px var(--e1); border: var(--trait);
                       border-radius: var(--rayon-bouton); font: inherit; font-size: var(--petit); }
.filtres button { margin-top: var(--e3); }

/* ---------- Barre de filtres rapides ---------- */

.barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
         gap: var(--e2); margin-bottom: var(--e4); }
.barre__chips { display: flex; flex-wrap: wrap; gap: var(--e1); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px var(--e2);
        background: var(--surface); border: var(--trait); border-radius: var(--rayon-pilule);
        color: var(--texte); font-size: var(--petit); }
.chip:hover { text-decoration: none; border-color: var(--bleu); }
.chip--fixe { background: var(--bleu-clair); border-color: #D9E7FF; color: var(--bleu);
              font-weight: var(--demi-gras); }
.chip--actif { background: var(--surface); font-weight: var(--demi-gras); }
.chip--ouvrir { color: var(--bleu); }

.tri { display: flex; align-items: center; gap: var(--e1); font-size: var(--petit); }
.tri label { color: var(--texte-secondaire); }
.tri select { padding: 6px var(--e2); border: var(--trait); border-radius: var(--rayon-bouton);
              background: var(--surface); font: inherit; font-size: var(--petit); }
.tri .bouton { padding: 6px var(--e2); }
/* .bouton pose display:inline-flex, qui l'emporte sur le display:none que le
   navigateur applique à [hidden]. Sans cette ligne, le script cache un bouton
   qui reste visible. */
.bouton[hidden] { display: none; }

/* ---------- Recommandations ---------- */

.bloc-reco { margin-bottom: var(--e6); }
.bloc-reco h2 { font-size: var(--h3); }
.bloc-reco__intro { margin: 4px 0 var(--e3); color: var(--gris-liste); font-size: 0.9375rem; }
.recos { display: grid; gap: var(--e3); align-items: stretch; }
.reco { display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
        padding: var(--e3); background: var(--surface); border: var(--trait);
        border-radius: var(--rayon-carte); }
.reco__visuel { display: flex; flex-direction: column; align-items: center; justify-content: center;
                width: 100%; aspect-ratio: 16 / 9; margin: var(--e2) 0;
                background: var(--fond); border-radius: var(--rayon-bouton);
                color: var(--gris-liste); font-size: 0.8125rem;
                text-transform: uppercase; letter-spacing: 0.06em; }
.reco__visuel b { font-size: 1.5rem; letter-spacing: 0; color: var(--texte); }
/* Deux lignes réservées au nom : les trois cartes gardent alors le même
   rythme, prix compris. Les noms marchands dépassent souvent une ligne. */
.reco__nom { font-size: 1rem; line-height: 1.25; min-height: 2.5em; }
.reco__specs { margin: 0; color: var(--gris-liste); font-size: 0.9375rem; line-height: 1.3; }
.reco .prix { margin: var(--e1) 0 0; }
.reco .prix-to { font-size: 1rem; color: var(--texte); font-weight: var(--gras); line-height: 1.3; }
.reco .suivi-en-cours,
.reco .tendance { margin: 2px 0 0; font-size: 0.9375rem; line-height: 1.3; }
.reco .suivi-en-cours { color: var(--gris-liste); }
/* Le bouton est collé au bas : les cartes se remplissent différemment, elles
   doivent finir sur la même ligne. */
.reco .bouton { margin-top: auto; }
.reco__marchand { margin: var(--e1) 0 0; color: var(--gris-liste); font-size: 0.9375rem; }

.etiquette { display: inline-block; padding: 3px var(--e2); border-radius: var(--rayon-pilule);
             font-size: var(--minuscule); font-weight: var(--gras); text-transform: uppercase;
             letter-spacing: 0.04em; }
.etiquette--choix { background: var(--bleu); color: #fff; }
/* Le vert et l'orange des tokens servent à du texte sur fond clair. Retournés
   en pastille blanche sur fond plein, ils tombent à 3,9 et 2,5 de contraste.
   Ces deux variantes assombries tiennent 5,4 et 4,9, soit le seuil AA. */
.etiquette--prix { background: #117A3B; color: #fff; }
.etiquette--to,
.etiquette--valeur { background: #A85E00; color: #fff; }

/* ---------- Liste ---------- */

.bloc-liste h2 { font-size: var(--h3); margin-bottom: var(--e3); }
.bloc-liste h2 small { color: var(--gris-liste); font-weight: var(--demi-gras);
                       font-size: var(--corps); }

.lignes { border: var(--trait); border-radius: var(--rayon-carte); background: var(--surface);
          overflow: hidden; }
.lignes__entete { display: none; }
.ligne { display: grid; gap: var(--e2); padding: var(--e3); border-bottom: var(--trait); }
.ligne:last-child { border-bottom: 0; }
.ligne__produit { display: grid; grid-template-columns: 56px 1fr; gap: var(--e2);
                  align-items: center; }
.ligne__visuel { display: flex; align-items: center; justify-content: center; height: 56px;
                 background: var(--fond); border-radius: var(--rayon-bouton);
                 color: var(--gris-liste); font-size: var(--petit); font-weight: var(--gras); }
.ligne__nom { font-size: var(--corps); line-height: 1.2; font-weight: var(--gras); }
.ligne__produit .etiquette { margin-top: 4px; }
.ligne__specs { display: flex; flex-wrap: wrap; gap: 2px var(--e2); margin: 0; padding: 0;
                list-style: none; color: var(--gris-liste); font-size: 0.9375rem;
                line-height: 1.25; }
.ligne__specs li + li::before { content: "·"; margin-right: var(--e2); }
/* Variante de liste : sept prix de 31 px empileraient trop de poids. */
.ligne__prix .prix { margin: 0; font-size: 1.5rem; line-height: 1.2; }
.ligne__to { margin: 0; color: var(--texte); font-size: 1rem; font-weight: var(--gras);
             line-height: 1.2; }
.ligne__marchand { margin: 0; color: var(--gris-liste); font-size: 0.9375rem; line-height: 1.2; }
.ligne__action { margin: 0; }
.ligne__action .bouton { width: 100%; justify-content: center; }

.ligne__choix { display: flex; align-items: center; gap: var(--e1); }
.ligne__choix input { width: 18px; height: 18px; accent-color: var(--bleu); cursor: pointer; }
.ligne__choix label { cursor: pointer; }
.ligne__choix::after { content: "Comparer"; color: var(--gris-liste); font-size: 0.9375rem; }

.comparaison__validation { margin-top: var(--e3); text-align: right; }

/* ---------- Barre de comparaison ---------- */

.barre-comparaison { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
                     background: var(--nuit); color: var(--nuit-texte);
                     border-top: 1px solid var(--nuit-bordure); }
.barre-comparaison__interieur { display: flex; align-items: center; gap: var(--e3);
                                padding: var(--e2) var(--marge); margin: 0 auto;
                                max-width: var(--largeur); }
.barre-comparaison__choisis { display: none; flex: 1; gap: var(--e2); min-width: 0; }
.vignette { display: flex; align-items: center; gap: var(--e2); padding: 6px var(--e2);
            background: var(--surface); border-radius: var(--rayon-bouton); color: var(--texte);
            font-size: var(--petit); }
.vignette b { display: block; font-size: var(--minuscule); font-weight: var(--gras); }
.vignette span { display: block; max-width: 16ch; overflow: hidden; text-overflow: ellipsis;
                 white-space: nowrap; color: var(--texte-secondaire); font-size: var(--minuscule); }
.vignette button { padding: 0 4px; background: none; border: 0; color: var(--texte-secondaire);
                   font: inherit; font-size: var(--corps); line-height: 1; cursor: pointer; }
.vignette button:hover { color: var(--rouge); }
.barre-comparaison__compte { flex: 1; font-size: var(--petit); }
.barre-comparaison__actions { display: flex; align-items: center; gap: var(--e3); }
.barre-comparaison__vider { color: #7FB0FF; font-size: var(--petit); background: none;
                            border: 0; cursor: pointer; text-decoration: underline; }
.barre-comparaison .bouton { white-space: nowrap; }
.barre-comparaison .bouton[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

/* La barre couvre le bas de page : on rend au document la hauteur qu'elle prend. */
body.comparaison-ouverte { padding-bottom: 84px; }

.pagination { display: flex; align-items: center; justify-content: center; gap: var(--e3);
              margin-top: var(--e4); font-size: var(--petit); color: var(--texte-secondaire); }

.vide { padding: var(--e6) var(--e3); text-align: center; background: var(--surface);
        border: var(--trait); border-radius: var(--rayon-carte); }

/* ---------- Contenu éditorial et FAQ ---------- */

.editorial, .faq { margin-top: var(--e6); max-width: var(--largeur-texte); }
.editorial h2, .faq h2 { font-size: var(--h3); }
.editorial h3 { margin-top: var(--e4); font-size: var(--corps-large); }
.editorial p { color: var(--texte-secondaire); }

/* ---------- Grands écrans ---------- */

@media (min-width: 680px) {
  .marche { grid-template-columns: repeat(3, 1fr); }
  .recos { grid-template-columns: repeat(3, 1fr); }
  /* Les vignettes n'apparaissent qu'à partir du moment où elles tiennent sans
     écraser le bouton. Sur mobile, le compte suffit (§24). */
  .barre-comparaison__choisis { display: flex; }
  .barre-comparaison__compte { flex: 0 0 auto; }
}

/* ---------- Page de comparaison ---------- */

.comparaison-page { padding-block: var(--e5) var(--e7); }
.comparaison-page h1 { font-size: var(--h2); letter-spacing: -0.025em; }
.comparaison-page__intro { margin: var(--e2) 0 0; color: var(--gris-liste);
                           font-size: var(--corps-large); }
.comparaison-page__vide { margin-top: var(--e4); color: var(--gris-liste); }
.comparaison-page__ajouter { margin-top: var(--e4); }
.comparaison-page__mention { margin-top: var(--e5); color: var(--gris-liste);
                             font-size: 0.9375rem; max-width: var(--largeur-texte); }

/* ---------- Les principales différences ---------- */

.differences { margin-top: var(--e5); }
.differences h2 { font-size: var(--h3); margin-bottom: var(--e3); }
.differences__cartes { display: grid; gap: var(--e3); align-items: stretch; }
.differences__egalites { margin: var(--e3) 0 0; color: var(--gris-liste);
                         font-size: 0.9375rem; }

.distinction { display: flex; flex-direction: column; gap: var(--e2);
               padding: var(--e3); background: var(--surface); border: var(--trait);
               border-radius: var(--rayon-carte); }
.distinction h3 { font-size: 1.0625rem; line-height: 1.25; }
.distinction__prix { display: flex; align-items: baseline; gap: var(--e2); margin: 0; }
/* La carte de comparaison porte le prix à la même taille que les autres
   cartes du site ; seuls les tableaux denses le réduisent. */
.distinction__prix .prix-to { font-size: 1rem; color: var(--texte);
                              font-weight: var(--gras); }
.distinction__intro { margin: 0; color: var(--gris-liste); font-size: 0.9375rem; }
.distinction__points { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.distinction__points li { display: grid; grid-template-columns: 18px 1fr; gap: var(--e1);
                          align-items: start; font-size: 0.9375rem; line-height: 1.3; }
.distinction__points svg { color: var(--vert); margin-top: 2px; }
/* Le bouton finit toutes les cartes à la même hauteur. */
.distinction .bouton { margin-top: auto; }

/* ---------- Tableau comparatif ---------- */

.tableau-comparaison { margin-top: var(--e5); }
.tableau-comparaison__defilement { overflow-x: auto; border: var(--trait);
                                   border-radius: var(--rayon-carte);
                                   background: var(--surface); }
/* border-collapse: separate, et non collapse : une cellule figée
   (position: sticky) est ignorée dans un tableau à bordures fusionnées. */
.tableau-comparaison table { width: 100%; border-collapse: separate; border-spacing: 0;
                             font-size: 0.9375rem; }
.tableau-comparaison th, .tableau-comparaison td { padding: var(--e2) var(--e3);
                                                   border-bottom: var(--trait);
                                                   text-align: left; vertical-align: top; }
.tableau-comparaison thead th { min-width: 170px; font-size: var(--corps); line-height: 1.25; }
.tableau-comparaison tbody th { color: var(--gris-liste); font-weight: var(--demi-gras); }

/* La colonne des critères reste visible pendant le défilement horizontal :
   sans elle, on lit trois chiffres sans savoir ce qu'ils mesurent. */
.tableau-comparaison thead th:first-child,
.tableau-comparaison tbody th { position: sticky; left: 0; z-index: 1;
                                width: 150px; min-width: 150px;
                                background: var(--surface); }
.tableau-comparaison__section th { background: var(--fond); color: var(--texte);
                                   font-size: var(--petit); font-weight: var(--gras);
                                   text-transform: uppercase; letter-spacing: 0.03em; }
/* La cellule de section couvre toute la largeur : c'est son texte qui reste
   à gauche pendant le défilement, pas la cellule. */
.tableau-comparaison__section span { position: sticky; left: var(--e3); display: inline-block; }
.tableau-comparaison tbody:last-child tr:last-child th,
.tableau-comparaison tbody:last-child tr:last-child td { border-bottom: 0; }

/* Le prix et le prix au To sont ce que la page sert à comparer : ils ne
   peuvent pas avoir le même poids typographique qu'une taille de cache. */
.tableau-comparaison tr[data-critere="prix"] td { font-size: 1.5rem; line-height: 1.2;
                                                  font-weight: var(--gras);
                                                  letter-spacing: -0.02em; }
.tableau-comparaison tr[data-critere="prix_to"] td { font-size: 1.0625rem;
                                                     font-weight: var(--gras); }

/* Vert très léger sur la valeur favorable. Rien sur les autres : l'objectif
   n'est pas de désigner un mauvais produit (§14). */
.tableau-comparaison td.favorable { background: var(--vert-clair); font-weight: var(--gras); }
.tableau-comparaison td.favorable svg { color: var(--vert); vertical-align: -2px; }

.compare__visuel { display: block; margin-bottom: var(--e1); padding: var(--e2) 0;
                   background: var(--fond); border-radius: var(--rayon-bouton);
                   text-align: center; color: var(--gris-liste);
                   font-size: var(--petit); font-weight: var(--gras); }
.compare__retirer { display: block; margin-top: 4px; color: var(--gris-liste);
                    font-size: var(--petit); font-weight: 400; }
.compare__retirer:hover { color: var(--rouge); }

@media (min-width: 768px) {
  .differences__cartes { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

@media (min-width: 1024px) {
  .tete-categorie h1 { font-size: var(--h2); }
  .tete-categorie__visuel { display: block; width: 200px; height: auto; flex-shrink: 0; }
  .colonnes { grid-template-columns: 230px 1fr; }
  .filtres { position: sticky; top: 108px; }
  .filtres__bascule { display: none; }
  /* La colonne de filtres est déjà là : inviter à l'ouvrir n'a plus de sens. */
  .chip--ouvrir { display: none; }
  .filtres h2 { position: static; width: auto; height: auto; clip-path: none;
                font-size: var(--h3); }
  .filtres__entete { padding-bottom: var(--e2); border-bottom: var(--trait); }

  /* La liste devient un vrai tableau de comparaison : mêmes colonnes pour
     toutes les lignes, l'œil descend sur les prix sans les chercher. */
  .lignes__entete,
  .ligne { grid-template-columns: 26px minmax(0, 1.7fr) minmax(150px, 1.25fr) 105px 92px 96px 116px;
           align-items: center; gap: var(--e2); }
  /* Chaque cellule d'en-tête reste dans sa colonne : sans cette coupe,
     « Caractéristiques » débordait sur « Prix ». */
  .lignes__entete span { min-width: 0; overflow: hidden; text-overflow: ellipsis;
                         white-space: nowrap; }
  .ligne__choix::after { content: none; }
  .lignes__entete { display: grid; padding: var(--e2) var(--e3); background: var(--fond);
                    border-bottom: var(--trait); color: var(--gris-liste);
                    font-weight: var(--demi-gras); font-size: var(--petit);
                    text-transform: uppercase; letter-spacing: 0; }
  .ligne { padding-block: var(--e2); }
  .ligne__specs { flex-direction: column; gap: 1px; }
  .ligne__specs li { white-space: nowrap; }
  .tri-colonne { color: inherit; text-decoration: none; white-space: nowrap; }
  .tri-colonne:hover { color: var(--bleu); text-decoration: underline; }
  .tri-colonne--actif { color: var(--bleu); }
  .ligne__specs li + li::before { content: none; margin: 0; }
}

/* Entre 1024 et 1280 px, la colonne de filtres prend sa part et le tableau
   travaille à l'étroit : les colonnes fixes se resserrent pour que l'en-tête
   « Produit » ne soit pas tronqué. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .lignes__entete,
  /* « Caractéristiques » est un mot de 150 px qui ne peut ni se couper ni
     passer à la ligne : c'est lui qui fixe la largeur de sa colonne, et le nom
     du produit, qui sait s'envelopper, cède la place. */
  .ligne { grid-template-columns: 24px minmax(90px, 1.2fr) minmax(152px, 1fr) 86px 78px 88px 92px;
           gap: var(--e1); }
}

/* ---------- Bande de capacités ---------- */

.bande-capacites {
  background: var(--surface);
  border-bottom: var(--trait);
  padding: var(--e4) 0;
}
.bande-capacites__titre {
  margin: 0 0 var(--e2);
  font-size: var(--corps-large);
  font-weight: var(--gras);
}
.bande-capacites ul {
  display: flex;
  gap: var(--e2);
  margin: 0;
  padding: 0 0 var(--e1);
  list-style: none;
  /* Sur mobile la bande défile plutôt que de se replier sur quatre lignes. */
  overflow-x: auto;
  scrollbar-width: thin;
}
.bande-capacites li { flex: 0 0 auto; }
.bande-capacites a {
  display: block;
  padding: var(--e2) var(--e3);
  min-width: 6.5rem;
  background: var(--surface);
  border: var(--trait);
  border-radius: 10px;
  color: var(--texte);
  text-align: center;
  transition: border-color var(--transition), background var(--transition);
}
.bande-capacites a:hover {
  text-decoration: none;
  border-color: var(--bleu);
  background: var(--bleu-clair);
}
.bande-capacites b { display: block; font-size: 1.0625rem; font-weight: 800; }
.bande-capacites small {
  display: block;
  margin-top: 2px;
  color: var(--texte-secondaire);
  font-size: var(--petit);
}

@media (min-width: 1024px) {
  .bande-capacites ul { flex-wrap: wrap; overflow-x: visible; }
  .bande-capacites a { min-width: 7.5rem; }
}