/*
 * Page « Nos classements » (archive du type comparatif)
 * ------------------------------------------------------
 * Le gabarit `classements` du coeur groupe les comparatifs par rubrique dans
 * une grille de trois colonnes. Le site n'a qu'UN comparatif par rubrique :
 * chaque rangee sortait donc avec une carte et **deux tiers de vide**, six
 * fois de suite.
 *
 * On ne touche pas a la grille du coeur. On ajoute une seule regle de
 * disposition : **une carte seule dans son groupe prend toute la largeur** et
 * se lit alors en deux colonnes (texte a gauche, podium a droite). Le jour ou
 * une rubrique recoit un deuxieme comparatif, la regle cesse de s'appliquer
 * d'elle-meme et les cartes reprennent la grille a trois colonnes du coeur.
 *
 * La condition se lit : « un titre de groupe, suivi d'une carte, elle-meme
 * suivie d'un titre de groupe (ou derniere de la grille) ». Pas de compteur,
 * pas de classe a poser en PHP.
 *
 * Le contenu des cartes est fourni par la section 38 du mu-plugin, avec les
 * classes du coeur : la date, le rang et le lien sont donc habilles par
 * `bibliotheque-cartes.css`, pas ici. Cette feuille ne pose que ce que le
 * coeur ne prevoit pas : le resume, la disposition du podium et la rangee.
 */

/* --- 1. L'ordre des elements dans la carte ------------------------------ */
/*
 * ⚠️ `.inside-article` est un conteneur FLEX en colonne, et le coeur y pose
 * **`order: 2` sur `.entry-header`** (sa grille de liste reserve les rangs
 * bas a l'image et a l'etiquette). Nos ajouts arrivaient avec l'ordre par
 * defaut, 0 — et LE TITRE DE LA CARTE SE RETROUVAIT TOUT EN BAS, sous le lien
 * « Voir le classement ». Mesure du 06/11/2026 : en-tete a y=727, resume a
 * y=520.
 *
 * On ne touche pas a l'ordre du coeur : on numerote les notres au-dessus.
 */

[data-eld-composant="carte-classement"] .lmi-classement-resume              { order: 3; }
[data-eld-composant="carte-classement"] .lmi-classement-podium              { order: 4; }
[data-eld-composant="carte-classement"] .eldorado-bib-carte-classement-date { order: 5; }
[data-eld-composant="carte-classement"] .eldorado-bib-carte-classement-lien { order: 6; }

/* --- 2. La carte seule de son groupe occupe la rangee ------------------- */
/*
 * Le gabarit groupe les comparatifs par rubrique dans une grille de trois
 * colonnes. Le site n'a qu'UN comparatif par rubrique : chaque rangee sortait
 * avec une carte et deux tiers de vide, six fois de suite.
 *
 * La condition, ecrite UNE fois et reprise telle quelle : « un titre de
 * groupe, suivi d'une carte, elle-meme suivie d'un titre de groupe OU
 * derniere de la grille ». Le jour ou une rubrique recoit un deuxieme
 * comparatif, elle cesse de s'appliquer d'elle-meme et les cartes reprennent
 * la grille a trois colonnes du coeur. Pas de compteur, pas de classe en PHP.
 */

.eldorado-bib-cartes--classements
  > h2.eldorado-bib-groupe-classements
  + [data-eld-composant="carte-classement"]:is(:has(+ h2.eldorado-bib-groupe-classements), :last-child) {
    grid-column: 1 / -1;
}

@media (min-width: 821px) {
    /* ⚠️ La mise en page va sur `.inside-article`, PAS sur l'article : celui-ci
       n'a qu'UN enfant, et une grille a deux colonnes posee dessus n'aurait
       rien a repartir. */
    .eldorado-bib-cartes--classements
      > h2.eldorado-bib-groupe-classements
      + [data-eld-composant="carte-classement"]:is(:has(+ h2.eldorado-bib-groupe-classements), :last-child)
      > .inside-article {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
        align-items: start;
        column-gap: var(--eldorado-effectif-espace-bloc, 24px);
        row-gap: 10px;
    }

    /* Colonne de gauche : titre, resume, date, appel. */
    .eldorado-bib-cartes--classements
      > h2.eldorado-bib-groupe-classements
      + [data-eld-composant="carte-classement"]:is(:has(+ h2.eldorado-bib-groupe-classements), :last-child)
      > .inside-article > :not(.lmi-classement-podium) {
        grid-column: 1;
    }

    /* Colonne de droite : le podium, aligne en haut de la carte. */
    .eldorado-bib-cartes--classements
      > h2.eldorado-bib-groupe-classements
      + [data-eld-composant="carte-classement"]:is(:has(+ h2.eldorado-bib-groupe-classements), :last-child)
      > .inside-article > .lmi-classement-podium {
        grid-column: 2;
        grid-row: 1 / span 4;
        margin: 0;
    }
}

/* --- 2 bis. Le titre de groupe, allege --------------------------------- */
/*
 * Il redit la rubrique que la carte nomme deja : il structure la page et sert
 * de cible aux ancres « Aller a », il n'a pas a dominer la carte.
 *
 * ⚠️ Le coeur le cible avec TROIS classes/attributs — `[data-eld-gabarit=
 * "classements"] .eldorado-bib-cartes > [data-eld-composant="groupe-classements"]`,
 * soit (0,3,0), dans bibliotheque-notes.min.css. Une regle a deux classes
 * etait battue, et de facon trompeuse : `text-transform` passait, `font-size`
 * non. On reprend son prefixe de gabarit pour monter a (0,3,1).
 */

[data-eld-gabarit="classements"] .eldorado-bib-cartes--classements > h2.eldorado-bib-groupe-classements {
    margin: 20px 0 0;
    font-family: var(--eldorado-police-texte);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--eldorado-texte-doux);
}

[data-eld-gabarit="classements"] .eldorado-bib-cartes--classements > h2.eldorado-bib-groupe-classements:first-child {
    margin-top: 0;
}

/* --- 3. Le titre de la carte ------------------------------------------- */
/* Le coeur etend le lien a toute la boite avec `h3 a::after { inset: 0 }`.
   Sur l'archive, GeneratePress rend un `h2.entry-title` : la regle du coeur
   ne s'applique pas et la carte n'etait cliquable que sur son titre. On
   reprend exactement sa declaration, sur le titre que GP produit. */

[data-eld-composant="carte-classement"] .entry-title {
    margin: 0;
    font-family: var(--eldorado-police-titres);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
}

[data-eld-composant="carte-classement"] .entry-title a {
    color: var(--eldorado-texte);
    text-decoration: none;
}

[data-eld-composant="carte-classement"] .entry-title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

[data-eld-composant="carte-classement"]:focus-within {
    outline: 2px solid var(--eldorado-focus);
    outline-offset: 2px;
}

/* La carte reagit au survol comme les autres boites cliquables du site. */
[data-eld-composant="carte-classement"] {
    transition: border-color var(--eldorado-effectif-duree, 150ms) var(--eldorado-courbe, ease-out),
                box-shadow var(--eldorado-effectif-duree, 150ms) var(--eldorado-courbe, ease-out);
}

[data-eld-composant="carte-classement"]:hover {
    border-color: var(--eldorado-accent);
    box-shadow: var(--eldorado-ombre);
}

/* --- 4. Le resume ------------------------------------------------------ */

.lmi-classement-resume {
    margin: 0;
    font-family: var(--eldorado-police-texte);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--eldorado-texte-doux);
}

/* --- 5. Le podium ------------------------------------------------------ */
/* Le coeur habille deja la pastille de rang. On ne pose ici que la mise en
   page de la liste : pas de puce (le rang la remplace) et pas de retrait. */

.lmi-classement-podium {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 4px 0 0;
    padding: 12px 14px;
    list-style: none;
    border-radius: var(--eldorado-rayon-controle);
    background-color: var(--eldorado-surface);
}

.lmi-classement-podium li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: var(--eldorado-police-texte);
    font-size: 0.9375rem;
    line-height: 1.35;
}

/* La pastille de rang : meme jeton que le coeur, en taille fixe pour que les
   trois lignes s'alignent quel que soit le chiffre. */
.lmi-classement-podium .eldorado-bib-carte-classement-rang {
    flex: none;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}

.lmi-classement-nom {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- 6. Date et appel -------------------------------------------------- */

[data-eld-composant="carte-classement"] .eldorado-bib-carte-classement-date {
    font-family: var(--eldorado-police-texte);
}

[data-eld-composant="carte-classement"] .eldorado-bib-carte-classement-lien {
    font-family: var(--eldorado-police-texte);
    font-size: 0.9375rem;
}

/* --- 7. Reprise des marges dans la carte -------------------------------- */
/*
 * Le coeur neutralise les marges avec `[data-eld-composant="carte-classement"]
 * > * { margin: 0 }` — mais ses enfants DIRECTS, c'est `.inside-article` seule.
 * Nos ajouts vivent un cran plus bas et gardaient donc les marges de prose :
 * mesure du 06/11/2026, 21 px sous la date et 10 px sur l'appel, soit **41 px
 * de trou** entre « Mis a jour le… » et « Voir le classement ».
 *
 * On applique la meme intention, au bon niveau. Le `gap` du conteneur suffit
 * a espacer.
 */

[data-eld-composant="carte-classement"] > .inside-article > * {
    margin: 0;
}

/* Le titre sortait 22 px plus a droite que le resume et la date, qui
   s'alignent, eux, sur le rembourrage de la carte.
   ⚠️ Le coupable n'est ni le coeur ni GeneratePress : c'est NOTRE
   `cartes-et-onglets.css`, qui pose ce retrait sur toute carte d'article
   (`.eldorado-bib-cartes article > .inside-article > .entry-header`, soit
   (0,3,1)). Il convient aux vignettes a image, pas a cette carte large.
   Une regle a deux classes etait battue : on monte a (0,4,0). */
.eldorado-bib-cartes
  [data-eld-composant="carte-classement"]
  > .inside-article
  > .entry-header {
    margin: 0;
    padding: 0;
}

[data-eld-composant="carte-classement"] .entry-header > * {
    margin: 0;
    padding: 0;
}