/* Alignement sur la maquette : barre d onglets et cartes d article (LMI, 03/11/2026)
 *
 * Releve fait a partir du CSS de la maquette (Homepage.html, section « Tous nos articles »)
 * compare au style calcule du site. Neuf ecarts, tous d habillage. Valeurs reprises telles
 * quelles de la maquette ; les couleurs passent par les jetons du design pour que le mode
 * sombre suive sans second jeu de regles.
 *
 * Ce fichier habille le composant « cartes-article », donc toutes les listes du site
 * (accueil, rubriques, tags, recherche) et pas seulement l accueil : la maquette emploie la
 * meme carte partout.
 */

/* --- 1. Barre d onglets : colonnes soulignees, pas des pastilles ------------------------
 * Maquette : .tabi { display:flex; flex-direction:column; align-items:center; gap:6px;
 * padding:10px 2px 12px; background:none; border:0 } dans un conteneur centre, gap 6px 30px,
 * souligne d un filet. L actif prend l accent, 700, et un trait de 2px sous lui.
 * Le site rendait des pastilles pleines a bord arrondi : fond, bordure et rayon sont annules. */
.eldorado-bib-articles-par-rubrique nav ul {
    justify-content: center;
    gap: 6px 30px;
    border-bottom: 1px solid var(--eldorado-bordure);
    margin-bottom: 22px;
}
.eldorado-bib-articles-par-rubrique nav a {
    flex-direction: column;
    gap: 6px;
    padding: 10px 2px 12px;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--eldorado-texte-doux);
}
/* L actif : le design le peint en pastille pleine via
 * « [data-eld-composant="articles-par-rubrique"] li > a.eldorado-bib-lien-pastille-actif »
 * (fond ET bordure en accent), plus specifique que mon selecteur de base. Resultat mesure
 * de la premiere version : texte accent sur fond accent, l onglet « Tous » devenait un
 * rectangle bleu muet. On repasse donc par un selecteur de meme forme, en un cran au-dessus. */
[data-eld-composant="articles-par-rubrique"] nav li > a.eldorado-bib-lien-pastille-actif {
    background-color: transparent;
    border-color: transparent;
    border-bottom-color: var(--eldorado-accent);
    font-weight: 700;
    color: var(--eldorado-accent);
}
.eldorado-bib-articles-par-rubrique nav a:hover,
.eldorado-bib-articles-par-rubrique nav a:focus-visible {
    background: none;
    color: var(--eldorado-accent);
}

/* --- 2. La carte : fond, rayon 14, ombre ------------------------------------------------
 * Le visuel est porte par .inside-article, pas par <article> (mesure : l article est
 * transparent et sans rayon). L ombre de la maquette, 0 6px 24px rgba(14,27,46,.06), est
 * exactement le jeton --eldorado-ombre : on le reutilise plutot que de la recopier. */
/* Selecteur repris a l identique du design : le sien,
 * « [data-eld-gabarit] .eldorado-bib-cartes > [data-eld-composant="cartes-article"] > .inside-article »,
 * pese 4 classes contre 2 pour un « .eldorado-bib-cartes article > .inside-article ». Ma
 * premiere version perdait donc sur le padding, et l image gardait une marge de 16px au lieu
 * de coiffer la carte. A specificite egale, c'est la derniere feuille chargee qui tranche,
 * et la notre passe apres design.css. */
[data-eld-gabarit] .eldorado-bib-cartes > [data-eld-composant="cartes-article"] > .inside-article {
    /* La maquette veut une carte BLANCHE en clair. Le jeton --eldorado-surface vaut #EFF3FA,
     * soit presque la couleur du fond de page (#F5F8FD) : la carte ne se detachait plus.
     * Le vrai correctif est la valeur du jeton dans le design.json d'Antoine ; en attendant
     * on pose le blanc ici, et on rend la main au jeton en mode sombre. */
    background: #FFFFFF;
    border-radius: 14px;
    box-shadow: var(--eldorado-ombre);
    overflow: hidden;
    padding: 0 0 22px;
    gap: 8px;
}
/* L image faisait 215px avec des marges negatives pour sortir du padding. Le padding est
   desormais porte par les blocs de texte, l image remplit donc la largeur sans bricolage. */
/* L image doit coiffer la carte. Le design lui pose « order: 1 » alors que l en-tete reste
 * a 0 : elle tombait donc SOUS le titre des que l on touchait a la mise en page. On fixe les
 * trois rangs explicitement plutot que de dependre d un ordre implicite. */
.eldorado-bib-cartes article > .inside-article > .post-image {
    order: 1;
    margin: 0;
    height: 170px;
    aspect-ratio: auto;
}
.eldorado-bib-cartes article > .inside-article > .entry-header {
    order: 2;
}
.eldorado-bib-cartes article > .inside-article > .entry-summary {
    order: 3;
}
.eldorado-bib-cartes article > .inside-article > .post-image img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    display: block;
}
.eldorado-bib-cartes article > .inside-article > .entry-header,
.eldorado-bib-cartes article > .inside-article > .entry-summary {
    padding: 0 22px;
}
.eldorado-bib-cartes article > .inside-article > .entry-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 20px;
}

/* --- 3. Etiquette de rubrique : capitales espacees en accent, pas une pastille ---------- */
.eldorado-bib-cartes article .eldorado-bib-etiquette {
    align-self: flex-start;
    background: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--eldorado-accent);
}

/* --- 4. Titre : 21px, interligne 1,25 (le site etait a 18px / 1,4) ---------------------- */
.eldorado-bib-cartes article .entry-title {
    font-size: 21px;
    line-height: 1.25;
}

/* --- 5. Ligne auteur et date -----------------------------------------------------------
 * Maquette : « Alexandre Plunian · 20 aout 2026 ». Le site rend « 28 octobre 2026 par
 * Claire Martin » : la date vient avant, et « par » est un noeud texte nu dans .byline,
 * donc inatteignable par un selecteur. On remet l ordre en flex, et on efface le « par »
 * en mettant .byline a font-size 0 puis en redonnant sa taille au nom — le mot reste dans
 * le DOM, donc toujours annonce par un lecteur d ecran, il n est que masque a l oeil. */
.eldorado-bib-cartes article .entry-header .entry-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0;
    font-size: 13px;
}
.eldorado-bib-cartes article .entry-header .entry-meta .byline {
    order: 1;
    font-size: 0;
}
.eldorado-bib-cartes article .entry-header .entry-meta .byline .author-name,
.eldorado-bib-cartes article .entry-header .entry-meta .byline a {
    font-size: 13px;
    /* Le nom reste un lien vers la page d auteur, mais sans soulignement : dans la maquette
       cette ligne est une mention, pas un appel a cliquer. Le survol le ramene. */
    text-decoration: none;
    color: inherit;
}
.eldorado-bib-cartes article .entry-header .entry-meta .byline a:hover,
.eldorado-bib-cartes article .entry-header .entry-meta .byline a:focus-visible {
    text-decoration: underline;
}
.eldorado-bib-cartes article .entry-header .entry-meta .byline::after {
    content: " · ";
    font-size: 13px;
    white-space: pre;
}
.eldorado-bib-cartes article .entry-header .entry-meta .posted-on {
    order: 2;
    font-size: 13px;
}

/* --- 6. Extrait : absent de la maquette -------------------------------------------------
 * La carte de la maquette s arrete a « auteur · date » puis « Lire la suite ». Masque a
 * l affichage seulement : le texte reste dans le HTML, donc rien n est perdu pour
 * l indexation. Pour le remettre, supprimer ce bloc — une seule regle. */
.eldorado-bib-cartes article > .inside-article > .entry-summary {
    display: none;
}

/* --- 7. « Lire la suite » : aligne sur le padding des cartes ---------------------------- */
.eldorado-bib-cartes article .entry-header .entry-meta::after {
    order: 3;
    flex-basis: 100%;
}

/* Le .entry-meta vide que GeneratePress ajoute en enfant direct sur les pages de rubrique :
   sans contenu il n'a rien a occuper, mais le gap de la carte lui reserve malgre tout 8px. */
[data-eld-gabarit] .eldorado-bib-cartes > [data-eld-composant="cartes-article"] > .inside-article > .entry-meta:empty {
    display: none;
}

html.dark [data-eld-gabarit] .eldorado-bib-cartes > [data-eld-composant="cartes-article"] > .inside-article {
    background: var(--eldorado-surface);
}