/* ==========================================================================
   Tableau comparatif transposé — produits en colonnes, critères en lignes
   --------------------------------------------------------------------------
   Sélecteurs en double classe : .def-content p, .def-content ul et consorts
   sont plus spécifiques qu'un composant isolé et écraseraient ces règles.

   Le sens de lecture est horizontal : on balaie une ligne pour comparer un
   critère d'un produit à l'autre. D'où la colonne d'intitulés figée à gauche,
   qui reste visible quand les colonnes produits défilent.
   ========================================================================== */

/* Le titre de section ne laisse que --space-xs sous lui : la table s'y collait. */
.tableau-comparatif {
    /* Largeur de la colonne d'intitulés figée. Une seule source : elle sert à
       la fois à dimensionner la colonne et à décaler l'ancrage du défilement,
       deux valeurs qui doivent rester égales sous peine de masquer une
       colonne produit. */
    --tc-colonne-figee: 112px;

    /* Largeur en deçà de laquelle une colonne produit devient illisible. Elle
       ne fixe pas la colonne : elle sert de plancher au calcul de largeur de
       la table, qui bascule en défilement quand la place manque.
       --tc-colonnes est posée par le template, d'après le nombre réel de
       produits ; le repli à 3 ne sert qu'au cas où le style serait appliqué
       hors de ce template. */
    --tc-colonne-min: 176px;

    margin: var(--space-m) 0 var(--space-l);
    background: var(--tertiary-bg);
    border-radius: var(--radius-card);
    /* La table se pose dans le corps d'article, qui est blanc : le reflet clair
       des ombres courantes n'y eclaire rien et la laissait flotter sur la seule
       passe marron la plus faible du jeu. */
    box-shadow: var(--soft-shadow-white);
    position: relative;
}

/* Le dégradé de bord droit signale qu'il reste des colonnes à voir. Il
   s'efface dès que le défilement atteint la fin, via animation-timeline. */
.tableau-comparatif::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--space-l);
    border-radius: 0 var(--radius-card) var(--radius-card) 0;
    background: linear-gradient(to right, rgba(248, 237, 219, 0), var(--tertiary-bg));
    pointer-events: none;
}

/* Sans scroll-padding, l'ancrage alignait chaque colonne produit sur le bord
   du conteneur — c'est-à-dire sous la colonne d'intitulés figée, qui en
   masquait les deux tiers. Le tableau se reposait même ainsi au chargement,
   le premier produit à peine visible. L'ancrage commence donc là où la
   colonne figée s'arrête. */
.tableau-comparatif .tableau-comparatif__defilement {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-left: var(--tc-colonne-figee);
    border-radius: var(--radius-card);
}

/* La table occupe toute la largeur offerte et répartit ses colonnes à parts
   égales, quel que soit le nombre de produits. Le plancher se calcule sur ce
   nombre : au-dessous, la table déborde et le défilement horizontal prend le
   relais plutôt que d'écraser les colonnes.

   Ce réglage remplace un seuil à 1280px de viewport, qui ne se déclenchait
   jamais utilement : le conteneur d'article plafonne à 1088px et cesse de
   grandir bien avant. Trois produits laissaient ainsi 376px de vide. La
   largeur disponible, elle, ne dépend pas de la taille de l'écran. */
.tableau-comparatif .tableau-comparatif__table {
    table-layout: fixed;
    width: 100%;
    min-width: calc(var(--tc-colonne-figee) + var(--tc-colonnes, 3) * var(--tc-colonne-min));
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;
}

/* ── Colonne d'intitulés, figée ────────────────────────────────── */

/* L'intitulé donne son sens à la ligne : figé à 13px pendant que les valeurs
   suivaient le corps d'article jusqu'a 16px, il se lisait moins bien que les
   reponses qu'il introduit. Il suit desormais les paliers du site, comme tout
   texte du theme. */
.tableau-comparatif th[scope="row"],
.tableau-comparatif .tableau-comparatif__coin {
    position: sticky;
    left: 0;
    z-index: 2;
    width: var(--tc-colonne-figee);
    min-width: var(--tc-colonne-figee);
    background: var(--background);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--title-color);
}

/* ── Colonnes produits ─────────────────────────────────────────── */

/* Aucune largeur ici : en table-layout fixed, les colonnes se partagent ce que
   la table leur laisse une fois la colonne d'intitulés servie. */
.tableau-comparatif thead th,
.tableau-comparatif tbody td,
.tableau-comparatif tfoot td {
    scroll-snap-align: start;
}

.tableau-comparatif th,
.tableau-comparatif td {
    padding: var(--space-s);
    text-align: left;
    vertical-align: top;
    overflow-wrap: break-word;
    border-bottom: 1px solid rgba(181, 91, 47, 0.12);
    border-right: 1px solid rgba(181, 91, 47, 0.10);
}

/* Une valeur de critere est une reponse breve, lue en balayage : elle descend
   d'un cran sous le corps d'article, dont elle heritait, et rattrape en graisse
   ce qu'elle perd en taille. Les paliers restent ceux du site — le corps lui
   meme n'est qu'a 14px sur telephone, une valeur figee y passerait devant lui.
   Les icones oui/non et le bouton du pied portent leur propre taille. */
.tableau-comparatif tbody td {
    font-size: 13px;
    font-weight: 500;
}

/* Rien ne séparait les colonnes hormis le fond de celle recommandée :
   l'œil perdait la colonne qu'il suivait en descendant. Un filet vertical
   et une alternance de lignes lui rendent ses repères. */
.tableau-comparatif tr > *:last-child {
    border-right: 0;
}

.tableau-comparatif tbody tr:nth-child(even) {
    background: rgba(181, 91, 47, 0.045);
}

.tableau-comparatif tfoot td,
.tableau-comparatif tfoot th {
    border-bottom: 0;
}

/* ── En-tête de colonne ────────────────────────────────────────── */

/* La hauteur de l'en-tête est dictée par le nom le plus long ; les autres
   colonnes héritent donc d'un vide. Centré, ce vide se répartit de part et
   d'autre au lieu de s'accumuler d'un seul côté — et le bloc de la colonne
   recommandée, plus haut de la pastille qu'il porte, reste dans l'axe. */
.tableau-comparatif thead th {
    vertical-align: middle;
}

.tableau-comparatif .tableau-comparatif__nom {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--title-color);
}

.tableau-comparatif .tableau-comparatif__atout {
    display: block;
    margin-top: var(--space-xs);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--secondary-brown);
}

/* ── Colonne recommandée ───────────────────────────────────────── */

/* Les badges eux-mêmes sont déclarés dans global.css : ils se présentent à
   l'identique ici et dans les fiches. Le tableau ne pose que leur mise en
   place — deux badges peuvent coexister, et ils s'enroulent plutôt que de
   forcer la colonne à s'élargir. */
.tableau-comparatif .tableau-comparatif__mentions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: var(--space-xs);
}

.tableau-comparatif .tableau-comparatif__col--choix {
    background: rgba(54, 92, 2, 0.06);
}

.tableau-comparatif thead .tableau-comparatif__col--choix {
    border-top: 3px solid var(--green-dark);
}

/* ── Contenu des cellules ──────────────────────────────────────── */

/* La vignette est centrée dans sa colonne : alignée à gauche, elle rompait
   l'alignement des colonnes voisines quand une photo manquait. */
/* La vignette suit la colonne au lieu de se fixer par paliers : elle grandit
   avec la place disponible et s'arrête à 200px, taille au-delà de laquelle la
   photo produit n'apporte plus de détail. */
.tableau-comparatif .tableau-comparatif__photo {
    display: block;
    width: min(100%, 200px);
    height: auto;
    aspect-ratio: 1;
    margin-inline: auto;
    object-fit: contain;
    border-radius: var(--radius-img);
    background: var(--white);
    box-shadow: var(--soft-shadow-sm);
}

/* La vignette porte déjà son propre cadre : le padding général des cellules
   l'éloignait inutilement des bords, au détriment de sa taille utile dans une
   colonne de 176px. */
.tableau-comparatif .tableau-comparatif__ligne-photo td {
    padding: var(--space-xs);
}

.tableau-comparatif .tableau-comparatif__oui {
    font-size: 1.25rem;
    color: var(--green-dark);
}

/* Un « non » explicite et une donnée manquante doivent se distinguer : sans
   ça, le lecteur ne sait pas si le produit ne fait pas la chose, ou si
   personne ne l'a renseignée. */
.tableau-comparatif .tableau-comparatif__non {
    font-size: 1.25rem;
    color: var(--secondary-brown);
}

.tableau-comparatif .tableau-comparatif__vide {
    color: var(--grey);
}

/* Le bouton garde le poids visuel qu'il a partout ailleurs sur le site : police,
   hauteur et couleur inchangées, car il porte l'action de la page et rétréci il
   passerait pour un lien secondaire.

   Seul son padding horizontal cède, et seulement ici. Mesuré à 1440px sur un
   tableau de quatre produits : la colonne fait 232px, le bouton 183px, et le
   libellé avec son icône occupe 149px. Les 24px de padding de .btn portaient le
   besoin à 197px, soit 14px de trop, et « Voir sur Zooplus » passait sur deux
   lignes. À 16px, le besoin retombe à 181px et tient.

   Trois colonnes masquaient le défaut : elles font 309px, où tout entre. */
.tableau-comparatif .tableau-comparatif__cta {
    width: 100%;
    text-align: center;
    padding-left: var(--space-s);
    padding-right: var(--space-s);
}

/* ── Tablette et au-delà ───────────────────────────────────────── */

@media (min-width: 768px) {

    .tableau-comparatif th,
    .tableau-comparatif td {
        padding: var(--space-m);
    }

    /* La règle ci-dessus vient après celle de la ligne d'aperçu et la
       neutraliserait : on la redonne ici. */
    .tableau-comparatif .tableau-comparatif__ligne-photo td {
        padding: var(--space-xs);
    }

    /* Redéfinir les variables suffit : la colonne figée, l'ancrage du
       défilement et le plancher de la table les lisent tous. */
    .tableau-comparatif {
        --tc-colonne-figee: 160px;
        --tc-colonne-min: 184px;
    }

    .tableau-comparatif tbody td {
        font-size: 14px;
    }
}

/* ── Desktop ───────────────────────────────────────────────────── */

@media (min-width: 992px) {

    .tableau-comparatif th[scope="row"],
    .tableau-comparatif .tableau-comparatif__coin {
        font-size: 15px;
    }

    .tableau-comparatif tbody td {
        font-size: 15px;
    }
}