/* Page comparatif : podium « Notre sélection » (LMI, 03/11/2026)
 *
 * Maquette : Maquettes-LMI-v2/2-Templates-editoriaux/Page-comparatif.html.
 * Valeurs relevées sur la maquette rendue, en mode sombre, pour comparer à armes égales
 * avec le site : carte sur la surface (#121B2D) et non sur le fond de page, étiquette en
 * bandeau pleine largeur (12px, graisse 800, interlettrage 0,12em, capitales), acteur n°1
 * cerné d'un filet d'accent de 2px et coiffé d'un bandeau plein au bleu de marque, appel
 * à l'action plein et « Lire notre avis » en bouton encadré.
 *
 * Tout passe par les jetons du design : --eldorado-surface pour la carte,
 * --eldorado-en-tete-fond / -texte pour le bleu de marque, qui est le seul à ne pas
 * s'éclaircir en mode sombre (--eldorado-accent y devient #9db6ff).
 */
.eldorado-bib-carte-acteur {
    /* Le retrait reprend le jeton d'espacement du coeur plutot qu'une valeur figee : le
     * bandeau ci-dessous s'en sert pour deborder exactement, les deux ne peuvent pas se
     * desynchroniser si le jeton change (y compris sous media query). */
    --lmi-carte-pad: var(--eldorado-effectif-espace-bloc, 24px);
    background: var(--eldorado-surface);
    /* Pas de retrait en haut : le bandeau d'étiquette vient s'y coller. */
    padding: 0 var(--lmi-carte-pad) var(--lmi-carte-pad);
}

/* ⚠️ « width » explicite, et pas seulement les marges négatives : la carte est un flex en
 * colonne, l'étiquette y est rendue à la largeur de son texte (mesuré 162px sur 363)
 * malgré un align-self calculé à « stretch ». La largeur reprend les deux marges. */
.eldorado-bib-carte-acteur > .eldorado-bib-carte-acteur-libelle {
    width: calc(100% + 2 * var(--lmi-carte-pad));
    margin-inline: calc(-1 * var(--lmi-carte-pad));
    padding: 10px var(--lmi-carte-pad);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--eldorado-texte-doux);
}

/* Acteur mis en avant. ⚠️ Le repère est la position, faute de mieux : le cœur rend les
 * trois cartes avec exactement la même classe, sans marqueur pour le premier. Si le jour
 * vient où l'ordre du podium ne suit plus le classement, c'est ici qu'il faudra revenir. */
.eldorado-bib-rangee > .eldorado-bib-carte-acteur:first-child {
    border-width: 2px;
    border-color: var(--eldorado-accent);
}
.eldorado-bib-rangee > .eldorado-bib-carte-acteur:first-child > .eldorado-bib-carte-acteur-libelle {
    border-radius: 14px 14px 0 0;
    background: var(--eldorado-en-tete-fond, #1e3a8a);
    color: var(--eldorado-en-tete-texte, #ffffff);
}

/* Le cœur rend l'appel du podium en bouton SECONDAIRE (classe
 * « eldorado-bib-bouton--secondaire »), donc en contour. La maquette en fait l'action
 * principale, pleine — et le classement juste en dessous, lui, a déjà un bouton plein pour
 * la même action : le podium était le seul en retrait. Sélecteur à trois classes pour
 * passer devant celui du cœur, sans !important. */
.eldorado-bib-carte-acteur a.eldorado-bib-bouton--secondaire {
    background: var(--eldorado-en-tete-fond, #1e3a8a);
    border-color: var(--eldorado-en-tete-fond, #1e3a8a);
    color: var(--eldorado-en-tete-texte, #ffffff);
}

/* « Lire notre avis » : bouton encadré dans la maquette, simple lien en ligne. */
.eldorado-bib-carte-acteur .eldorado-bib-carte-acteur-avis {
    display: block;
    padding: 11px 16px;
    border: 1px solid var(--eldorado-bordure);
    border-radius: 10px;
    text-align: center;
    font-weight: 700;
    color: var(--eldorado-texte);
    text-decoration: none;
}