/* Comparatifs, longue traîne (30/09) : critères supplémentaires repliés, sous-titre et bandeau de l'état
   affiché, FAQ calculée, maillage. Chargé par comparatifs.php seulement (main.css n'est pas touché). */
.sel-faq { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--trait); max-width: 52rem; }
.sel-faq h3 { font-size: 1.05rem; margin: 1.2rem 0 0.35rem; }
.sel-faq p { margin: 0; }
.sel-maillage h3 { font: 650 var(--t-sm)/1.3 var(--sans); margin: 1rem 0 0.5rem; color: var(--feutre); text-transform: none; }
.sel-maillage h2 + ul, .sel-maillage h3 + ul { margin-top: 0.5rem; }
.sel-maillage ul + h2 { margin-top: 1.6rem; }

/* Affichage compact (Romain, 30/09 : « plus compacté », « Rotin déborde », voir le début des canapés à la ligne
   de flottaison). Titre à la taille des collections, chapeau replié à 2 lignes, une seule barre de filtres dense :
   une ligne par critère sans retour (défilement discret dans la ligne), options à 0 masquées, matières rares
   derrière « + N », « Plus de critères » avec marque et couleur, largeur et tri à droite. Téléphone : barre repliée
   derrière « Filtres », collante au défilement. */
.comparatifs .ariane { margin: 1rem 0 0.7rem; }
.comparatifs__tete.liste-articles__tete { padding-bottom: 0.9rem; }
.comparatifs__tete h1 { font-size: clamp(1.9rem, 1.1rem + 2.1vw, 3.1rem); line-height: 1.02; letter-spacing: -0.035em; margin: 0 0 0.55rem; max-width: 62rem; }
.comparatifs__chapeau { font-size: 1rem; line-height: 1.55; max-width: 54rem; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.comparatifs__chapeau.est-deplie { display: block; overflow: visible; }
.comparatifs__suite { padding: 0.15rem 0; border: 0; background: none; color: var(--anthracite); font: 600 var(--t-xs)/1.3 var(--sans); text-decoration: underline; text-decoration-color: var(--moutarde); text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; }
.comparatifs__suite[hidden] { display: none; }
.sel-etat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1.1rem; margin: 0.5rem 0 0; font: 500 var(--t-sm)/1.4 var(--sans); }
.sel-etat:not(:has(> :not([hidden]))) { display: none; }
.sel-etat .sel-soustitre { margin: 0; font-weight: 650; }
.sel-soustitre[hidden], .sel-bandeau[hidden] { display: none; }
.sel-etat .sel-bandeau { margin: 0; padding: 0 0 0 0.7rem; border: 0; border-left: 3px solid var(--moutarde); border-radius: 0; background: none; }

.sel-barre { margin: 0 0 0.7rem; }
.sel-barre__ouvrir { display: none; }
.comparatifs .filtres-duels { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.8rem; padding: 0.7rem 1rem; margin: 0; border-radius: 14px; }
.comparatifs .filtre-duels { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.55rem; flex: 0 1 auto; min-width: 0; max-width: 100%; }
.comparatifs .filtre-duels__label { flex: none; width: auto; min-width: 0; font: 650 0.72rem/1 var(--sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--feutre); }
.filtre-duels__options { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.3rem; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--trait) transparent; padding: 2px 1px; }
.filtre-duels__options::-webkit-scrollbar { height: 4px; }
.filtre-duels__options::-webkit-scrollbar-thumb { background: var(--trait); border-radius: 4px; }
.comparatifs .pilule { flex: none; white-space: nowrap; padding: 0.34rem 0.64rem; font: 500 0.84rem/1.1 var(--sans); }
.comparatifs .pilule .num { font-size: 0.72rem; margin-left: 0.12rem; }
.comparatifs .pilule.est-vide:not(.est-active), .comparatifs .pilule.est-replie:not(.est-active) { display: none; }
.comparatifs .filtre-duels.est-deplie .pilule.est-replie:not(.est-vide) { display: inline-block; }
.filtre-duels__plus { flex: none; padding: 0.34rem 0.64rem; border: 1px dashed var(--feutre); border-radius: 999px; background: none; color: var(--bleu); font: 650 0.84rem/1.1 var(--sans); cursor: pointer; }
.filtre-duels__plus:hover { border-color: var(--moutarde); }
.filtre-duels__plus[hidden] { display: none; }

.sel-barre__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem 1.2rem; flex: 1 1 auto; font: 500 0.84rem/1.2 var(--sans); }
.sel-plus__bouton { display: inline-flex; align-items: center; gap: 0.4rem; margin-right: auto; padding: 0.3rem 0; border: 0; background: none; color: var(--bleu); font: 650 0.84rem/1.2 var(--sans); cursor: pointer; }
.sel-plus__bouton::after { content: ""; width: 0.4rem; height: 0.4rem; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: translateY(-2px) rotate(45deg); transition: transform 0.15s ease; }
.sel-plus__bouton[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.sel-plus__detail { font-weight: 400; color: var(--feutre); }
.comparatifs .sel-affiner-barre__largeur { display: flex; align-items: center; gap: 0.5rem; flex: none; }
.comparatifs .sel-affiner-barre__largeur input { width: 120px; margin: 0; accent-color: var(--moutarde); }
.comparatifs .sel-barre strong { color: var(--bleu); font-weight: 650; }
.sel-affiner-barre__tri, .sel-plus__choix label { display: flex; align-items: center; gap: 0.45rem; }
.sel-barre select { min-height: 32px; padding: 0 0.6rem; border: 1px solid var(--trait); border-radius: var(--r-ctl); background: var(--platre); font: 500 0.84rem/1 var(--sans); color: var(--anthracite); }
.sel-plus { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.8rem; flex: 1 0 100%; padding-top: 0.55rem; border-top: 1px dashed var(--trait); }
.sel-plus[hidden] { display: none; }
.comparatifs .sel-plus__choix { gap: 1.2rem; }

.comparatifs .sel-sauts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.2rem; }
.comparatifs .sel-saut { gap: 0.55rem; padding: 0.3rem 0.95rem 0.3rem 0.35rem; border-radius: 999px; }
.comparatifs .sel-saut__vs { width: 28px; height: 28px; font-size: 0.78rem; }
.comparatifs .sel-saut strong { font-size: var(--t-sm); }
.comparatifs .sel-saut__detail { display: inline; margin: 0 0 0 0.25rem; font-size: 0.84rem; }
.comparatifs .sel-section { margin-top: 1.1rem; scroll-margin-top: 80px; }
.comparatifs .sel-section--meilleurs:not([hidden]) ~ .sel-section { margin-top: 2.6rem; }
.comparatifs .sel-section > h2 { font-size: var(--t-xl); margin-bottom: 0.8rem; }
.comparatifs .sel-approfondi { margin: 2.2rem 0 0; }

@media (max-width: 700px) {
  .comparatifs .ariane { margin: 0.8rem 0 0.5rem; }
  .comparatifs__tete h1 { font-size: clamp(1.55rem, 1.2rem + 1.6vw, 1.9rem); }
  .sel-etat { font-size: var(--t-xs); gap: 0.2rem 0.8rem; }
  .sel-barre:not(.est-ouverte) { position: sticky; top: 64px; z-index: 20; }
  .sel-barre { margin: 0 calc(-1 * var(--gutter)) 0.5rem; padding: 0.45rem var(--gutter); background: color-mix(in srgb, var(--platre) 94%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-block: 1px solid var(--trait); }
  .sel-barre__ouvrir { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 38px; padding: 0 0.85rem; border: 1px solid var(--anthracite); border-radius: 6px; background: var(--blanc); color: var(--anthracite); font: 600 var(--t-sm)/1.1 var(--sans); cursor: pointer; }
  .sel-barre__ouvrir svg { width: 18px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
  .sel-barre__ouvrir .compteur-filtres[hidden] { display: none; }
  .sel-barre:not(.est-ouverte) .filtres-duels { display: none; }
  .comparatifs .filtres-duels { flex-direction: column; align-items: stretch; gap: 0.55rem; margin-top: 0.5rem; padding: 0.7rem 0.75rem; }
  .comparatifs .filtre-duels { flex: none; }
  .comparatifs .filtre-duels__label { width: 4.4rem; }
  .comparatifs .pilule, .filtre-duels__plus { padding: 0.5rem 0.7rem; }
  .sel-barre__pied { justify-content: flex-start; }
  .sel-plus__detail { display: none; }
  .sel-plus { flex-direction: column; align-items: stretch; }
  .comparatifs .sel-sauts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
  .comparatifs .sel-saut { padding-right: 0.6rem; gap: 0.45rem; }
  .comparatifs .sel-saut strong { font-size: 0.84rem; white-space: nowrap; }
  .comparatifs .sel-saut__detail { display: none; }
  .comparatifs .sel-section > h2 { font-size: var(--t-lg); }
}