/*
 * LMI — composants de CONTENU de la bibliothèque (ceux que le rédacteur insère dans l'article)
 * ---------------------------------------------------------------------------------------------
 * Concerne : avantages-inconvenients, faq, tableau, etapes, encadre, essentiel,
 * carte-mise-en-avant, bandeau-partenaire, bloc-confiance.
 *
 * ⚠️ DEUX PIÈGES EXPLIQUENT TOUT CE FICHIER, et ils se cumulent.
 *
 * 1. `wp-block-group__inner-container` est en `display: contents`. Un bloc `wp:group` sans
 *    attribut `layout` — c'est exactement ce que produisent les compositions du cœur
 *    (`eldorado_bibliotheque_groupe()`) — enveloppe son contenu dans ce conteneur. Comme il est
 *    en `display: contents`, la mise en page (grille, flex) traverse bien, MAIS le sélecteur
 *    enfant `>` ne le traverse PAS : il reste dans l'arbre des sélecteurs. Toute règle du cœur
 *    écrite `[data-eld-composant="x"] > .y` est donc MORTE sur ces blocs. Mesuré : la boîte du
 *    composant fait 852 px, son inner-container 0×0.
 *    Le cœur connaît le problème ailleurs (`bibliotheque.css` traite explicitement
 *    `> .wp-block-group__inner-container` pour le pied de page) : c'est un oubli, pas un choix.
 *    On ne corrige donc pas le cœur (il est régénéré) : on ajoute le niveau manquant.
 *
 * 2. `design.css` habille le texte par `.eldorado-design .entry-content p, … li` (spécificité
 *    0,2,1). Le cœur, lui, ne pose la taille que sur la BOÎTE du composant (1rem / 1.5) et
 *    compte sur l'héritage : il perd. Résultat mesuré : les puces d'un composant sortaient en
 *    19 px / 32,3 px au lieu de 16 px / 24 px. D'où les sélecteurs à trois classes ci-dessous.
 *
 * Toutes les règles sont ADDITIVES : si le cœur corrige un jour ces points, elles font doublon
 * sans rien casser.
 */

/* ------------------------------------------------------------------ *
 * 1. Avantages / inconvénients : les deux colonnes avaient perdu leur carte
 * ------------------------------------------------------------------ */
/* Règles du cœur rendues inopérantes (bibliotheque-composants.css l. 351-363) : la colonne
   sortait sans fond, sans arrondi et sans marge intérieure — deux listes nues côte à côte. */
[data-eld-composant="avantages-inconvenients"] > .wp-block-group__inner-container > :is(.eldorado-bib-avantages, .eldorado-bib-inconvenients) {
    padding: var(--eldorado-effectif-espace-bloc, 24px);
    border-radius: var(--eldorado-rayon-bloc, 16px);
    color: var(--eldorado-texte);
}

[data-eld-composant="avantages-inconvenients"] > .wp-block-group__inner-container > .eldorado-bib-avantages {
    background-color: var(--eldorado-succes-fond);
}

[data-eld-composant="avantages-inconvenients"] > .wp-block-group__inner-container > .eldorado-bib-inconvenients {
    background-color: var(--eldorado-erreur-fond);
}

/* La maquette borde ces deux cartes d'un filet ; sur fond teinté il reste discret mais
   détache la carte du fond de page en mode clair. */
[data-eld-composant="avantages-inconvenients"] .eldorado-bib-avantages {
    border: 1px solid color-mix(in srgb, var(--eldorado-succes) 35%, transparent);
}

[data-eld-composant="avantages-inconvenients"] .eldorado-bib-inconvenients {
    border: 1px solid color-mix(in srgb, var(--eldorado-erreur) 35%, transparent);
}

/* ------------------------------------------------------------------ *
 * 2. Marge du dernier élément dans les blocs encadrés
 * ------------------------------------------------------------------ */
/* Même cause : `… > :last-child { margin-bottom: 0 }` visait l'inner-container. Mesuré sur
   « L'essentiel » et « Bon à savoir » : la liste gardait 16 px de marge basse, soit 40 px sous
   le texte contre 24 px au-dessus — la boîte penchait. */
:is([data-eld-composant="carte-mise-en-avant"], [data-eld-composant="bloc-confiance"], [data-eld-composant="bandeau-partenaire"], [data-eld-composant="encadre"], [data-eld-composant="essentiel"], [data-eld-composant="newsletter"]) > .wp-block-group__inner-container > :first-child {
    margin-top: 0;
}

:is([data-eld-composant="carte-mise-en-avant"], [data-eld-composant="bloc-confiance"], [data-eld-composant="bandeau-partenaire"], [data-eld-composant="encadre"], [data-eld-composant="essentiel"], [data-eld-composant="newsletter"]) > .wp-block-group__inner-container > :last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------ *
 * 3. Texte des composants : 16 px / 1,5 comme la maquette (et comme le cœur le voulait)
 * ------------------------------------------------------------------ */
/* Trois classes pour battre `.eldorado-design .entry-content li` (0,2,1). Les étapes sont
   volontairement exclues : la maquette les rend en prose, à la taille du corps de l'article. */
.eldorado-design .entry-content :is([data-eld-composant="avantages-inconvenients"], [data-eld-composant="faq"], [data-eld-composant="encadre"], [data-eld-composant="essentiel"], [data-eld-composant="carte-mise-en-avant"], [data-eld-composant="bandeau-partenaire"], [data-eld-composant="notes-externes"], [data-eld-composant="carte-acteur"]) :is(p, li) {
    font-size: 1rem;
    line-height: 1.5;
}

/* Les puces d'un encadré respirent moins que la prose : la maquette les serre à 6 px. */
[data-eld-composant="avantages-inconvenients"] li {
    padding-top: 6px;
    padding-bottom: 6px;
}

/* ------------------------------------------------------------------ *
 * 4. FAQ : la maquette l'enferme dans une carte
 * ------------------------------------------------------------------ */
/* Le cœur ne pose que les filets de séparation entre questions ; la maquette ajoute le cadre
   (fond, filet, arrondi) et serre les marges intérieures à 4 px en haut et en bas, pour que le
   premier et le dernier filet tombent au bord de la carte. */
[data-eld-composant="faq"] {
    padding: 4px var(--eldorado-effectif-espace-bloc, 24px);
    border: 1px solid var(--eldorado-bordure);
    border-radius: var(--eldorado-rayon-bloc, 16px);
    background-color: var(--eldorado-surface);
}

/* Le titre « Questions fréquentes » reste au-dessus de la carte, comme dans la maquette. */
[data-eld-composant="faq"] > .wp-block-group__inner-container > h2:first-child,
[data-eld-composant="faq"] > h2:first-child {
    margin-top: 16px;
}

/* La dernière question ne porte pas de filet : il doublerait le bord de la carte. */
[data-eld-composant="faq"] details:last-child {
    border-bottom: 0;
}

/* Libellé de question : 17 px / 700 dans la maquette, contre 1rem / 600 au cœur. */
[data-eld-composant="faq"] summary {
    font-size: 1.0625rem;
    font-weight: 700;
}

/* ------------------------------------------------------------------ *
 * 5. Tableau : marges intérieures de la maquette
 * ------------------------------------------------------------------ */
/* Le cœur pose 12 px sur les quatre côtés, la maquette 12 px en haut et en bas, 14 px sur les
   côtés — les colonnes se lisent mieux. */
[data-eld-composant="tableau"] :is(th, td) {
    padding: 12px 14px;
}

/* La maquette resserre le tableau à 15 px : une comparaison se lit en balayant, pas en lisant.
   Le cœur laisse 1rem. */
[data-eld-composant="tableau"] table {
    font-size: 0.9375rem;
}

/* ------------------------------------------------------------------ *
 * 6. Encadré de risque : la maquette en a un, le cœur n'a pas la variante
 * ------------------------------------------------------------------ */
/* Le cœur propose « bon-a-savoir » et « a-retenir ». La maquette d'un guide financier ajoute un
   bloc d'avertissement orangé (« Quels sont les risques ? »), que la nature YMYL du site rend
   nécessaire. On ne déclare RIEN au cœur — un composant hors catalogue viderait toutes les
   déclarations du site : on se contente d'une classe à nous, posée dans le contenu, en plus de
   la variante « a-retenir » qui porte déjà la structure. */
.eldorado-bib-encadre.lmi-encadre-risque {
    border-left-color: var(--eldorado-alerte);
    background-color: var(--eldorado-alerte-fond);
}

.eldorado-bib-encadre.lmi-encadre-risque :is(h2, h3) {
    color: var(--eldorado-alerte);
}

/* ------------------------------------------------------------------ *
 * 7. Boutons des composants : gris et soulignés au lieu d'accent
 * ------------------------------------------------------------------ */
/* Le cœur veut `[data-eld-composant] .wp-block-button__link { background-color: var(--eldorado-accent) }`,
   mais le bouton sort en gris (#55555e, la couleur par défaut de GeneratePress) et souligné.
   Le soulignement vient de `body:not(.home) .entry-content a:not(.simple)…` dans le `style.css`
   du thème — une règle à forte spécificité qui souligne TOUS les liens du contenu, boutons
   compris. On rétablit la couleur d'accent et on retire le soulignement. */
[data-eld-composant] .wp-block-button__link,
[data-eld-composant] .wp-element-button {
    background-color: var(--eldorado-accent) !important;
    color: var(--eldorado-sur-accent, #ffffff) !important;
    text-decoration: none !important;
}

[data-eld-composant] .wp-block-button__link:hover,
[data-eld-composant] .wp-element-button:hover {
    text-decoration: none !important;
}

/* ------------------------------------------------------------------ *
 * 8. Notes d'autres sites : la maquette en fait des cartes
 * ------------------------------------------------------------------ */
/* Le composant `notes-externes` (lot 3 du cœur, saisi dans l'avis) sortait en liste empilée :
   une boîte à fond de surface, trois lignes séparées d'un filet, le nom et la note au même
   corps que la prose. La maquette `Page-avis.html` en fait des CARTES côte à côte — fond
   #121b2d, 18 px de marge intérieure, nom en Public Sans 16/700, note en Newsreader 32/700
   d'accent, nombre d'avis et date de relevé en 14 px adouci.
   Deux raisons au décalage, les deux déjà rencontrées :
   1. `[data-eld-composant="notes-externes"] > h2` du cœur est mort — le `wp:group` sans
      `layout` enveloppe son contenu d'un conteneur en `display: contents` (cf. en-tête).
   2. `design.css` pose `font-size: 19px` ET `font-weight: 400` sur CHAQUE `p` du contenu, à
      (0,2,1) : toute règle du cœur qui grossit ou graisse un paragraphe perd. C'est pourquoi
      `.eldorado-bib-notes-externes-nom { font-weight: 600 }` ne se voyait pas.
   On rétablit donc l'intention à une spécificité qui gagne, en restant sur nos propres
   sélecteurs. Aucune déclaration au cœur. */
[data-eld-composant="notes-externes"] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    padding: 0;
    background-color: transparent;
}

[data-eld-composant="notes-externes"] > .wp-block-group__inner-container > h2,
[data-eld-composant="notes-externes"] > h2 {
    grid-column: 1 / -1;
    margin: 0 0 16px;
    font-family: var(--eldorado-police-titres);
    font-size: clamp(1.5rem, 0.753rem + 1.556vw, 1.75rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--eldorado-texte);
}

[data-eld-composant="notes-externes"] .eldorado-bib-notes-externes-source {
    display: block;
    padding: 18px;
    border-top: 0;
    border-radius: var(--eldorado-rayon-bloc, 16px);
    background-color: var(--eldorado-surface);
}

.eldorado-design .entry-content [data-eld-composant="notes-externes"] .eldorado-bib-notes-externes-nom {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
}

.eldorado-design .entry-content [data-eld-composant="notes-externes"] .eldorado-bib-notes-externes-note {
    font-family: var(--eldorado-police-titres);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--eldorado-accent);
}

.eldorado-design .entry-content [data-eld-composant="notes-externes"] .eldorado-bib-notes-externes-date {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--eldorado-texte-doux);
}