/* Eldorado Partners — composants partenaires.
 * Les couleurs suivent les jetons du thème quand il en expose ; les replis
 * restent neutres pour que le plugin s'installe chez un autre client sans
 * retouche.
 *
 * ⚠️ Les variables --eldpart-* ne sont PAS sur :root — le plugin ne salit pas
 * l'espace de noms du site. Elles sont portées par la LISTE FERMÉE de racines
 * ci-dessous : tout nouveau composant de premier niveau doit y être ajouté,
 * sinon `var(--eldpart-accent)` sort vide et la règle entière est abandonnée
 * (vécu en 1.4.0 : bouton « Profiter de l'offre » sans fond, invisible).
 */
.eldpart-bandeau,
.eldpart-carte,
.eldpart-classement,
.eldpart-encart,
.eldpart-offres,
.eldpart-offres-liste,
.eldpart-carte-offre,
.eldpart-barre-promo,
.eldpart-cta-mobile,
.eldpart-lien-natif,
.eldpart-cta-section,
.eldpart-bouton-tableau,
.eldpart-top3,
.eldpart-logos,
.eldpart-exclusive {
    --eldpart-accent: var(--eldorado-accent, #1e3a8a);
    --eldpart-sur-accent: var(--eldorado-sur-accent, #ffffff);
    --eldpart-bordure: var(--eldorado-bordure, #d3ddf0);
    --eldpart-surface: var(--eldorado-surface, #ffffff);
    --eldpart-doux: var(--eldorado-texte-doux, #4a5568);
    /* Fond clair des formats pleine largeur (regle 6 du kit) : une teinte de
       l'accent, pour suivre la marque du site sans coller un aplat bleu
       contre l'en-tete. */
    --eldpart-teinte: color-mix(in srgb, var(--eldpart-accent) 10%, var(--eldpart-surface));
    --eldpart-rayon: 14px;
    font-family: var(--eldorado-police-texte, inherit);
    box-sizing: border-box;
}
.eldpart-bandeau *,
.eldpart-barre-promo *,
.eldpart-cta-mobile *,
.eldpart-cta-section *,
.eldpart-top3 *,
.eldpart-logos *,
.eldpart-carte *,
.eldpart-classement *,
.eldpart-encart *,
.eldpart-offres-liste *,
.eldpart-carte-offre *,
.eldpart-exclusive * { box-sizing: border-box; }

/* --- Logo ------------------------------------------------------------- */
.eldpart-logo-boite {
    width: var(--eldpart-logo, 56px);
    height: var(--eldpart-logo, 56px);
    border-radius: 12px;
    background: var(--eldorado-surface, #e6ecf8);
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.eldpart-logo-boite img { width: 100%; height: 100%; object-fit: contain; }
.eldpart-logo-mono {
    font-weight: 700;
    font-size: calc(var(--eldpart-logo, 56px) * 0.42);
    color: var(--eldpart-accent);
    background: color-mix(in srgb, var(--eldpart-accent) 12%, transparent);
}

/* --- Note ------------------------------------------------------------- */
.eldpart-note { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--eldpart-doux); }
.eldpart-etoile { color: #f5b301; flex: 0 0 auto; }
.eldpart-note strong { color: inherit; }
.eldpart-note-echelle { color: var(--eldpart-doux); }

/* --- Bouton et mention ------------------------------------------------ */
/* La couleur du texte des boutons est forcee, et elle seule.
 * Les themes colorent tous les liens du contenu avec un selecteur bien plus
 * specifique que le notre (ici html:not(.dark) body.<classe> .entry-content a,
 * soit trois classes) : sans cela le libelle prend la couleur de lien du
 * theme, qui est justement celle du fond du bouton -- texte invisible.
 * Un composant encapsule, revendu a des sites inconnus, ne peut pas gagner
 * cette course a la specificite autrement. */
.eldpart-cta { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
.eldpart-btn {
    display: inline-block;
    background: var(--eldpart-accent);
    color: var(--eldpart-sur-accent);
    padding: 13px 22px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    text-align: center;
}
.eldpart-btn,
.eldpart-btn:hover,
.eldpart-btn:focus-visible,
.eldpart-btn:visited { color: var(--eldpart-sur-accent) !important; }
/* Meme raison pour le soulignement : les themes soulignent souvent les liens
 * en mode sombre pour les distinguer du texte. Sur un bouton a fond plein, le
 * fond joue deja ce role et le trait salit le libelle. */
.eldpart-btn,
.eldpart-btn2,
.eldpart-btn:hover,
.eldpart-btn2:hover { text-decoration: none !important; }
.eldpart-btn:hover, .eldpart-btn:focus-visible { filter: brightness(1.08); }
.eldpart-btn-inverse { background: var(--eldpart-sur-accent); }
.eldpart-btn-inverse,
.eldpart-btn-inverse:hover,
.eldpart-btn-inverse:focus-visible,
.eldpart-btn-inverse:visited { color: var(--eldpart-accent) !important; }
.eldpart-btn2 {
    display: inline-block;
    padding: 11px 18px;
    border: 1px solid var(--eldpart-bordure);
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    text-align: center;
}
.eldpart-btn2,
.eldpart-btn2:hover,
.eldpart-btn2:focus-visible,
.eldpart-btn2:visited { color: inherit !important; }
/* La mention n'est pas décorative : elle doit rester lisible. */
.eldpart-mention { font-size: 12px; color: var(--eldpart-doux); }

/* --- Bandeau ---------------------------------------------------------- */
.eldpart-bandeau {
    display: flex;
    align-items: center;
    gap: 16px 20px;
    flex-wrap: wrap;
    background: var(--eldpart-surface);
    border: 1px solid var(--eldpart-bordure);
    border-radius: var(--eldpart-rayon);
    padding: 18px 20px;
    margin: 28px 0;
}
.eldpart-bandeau-identite { display: flex; flex-direction: column; gap: 2px; min-width: 120px; }
.eldpart-bandeau-identite strong { font-size: 16px; }
.eldpart-bandeau-offre { flex: 1; min-width: 200px; font-weight: 700; font-size: 18px; line-height: 1.3; }

/* --- Encart latéral --------------------------------------------------- */
.eldpart-encart {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--eldpart-accent);
    color: var(--eldpart-sur-accent);
    border-radius: var(--eldpart-rayon);
    padding: 20px;
}
.eldpart-encart-surtitre { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }
.eldpart-encart-identite { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.eldpart-encart-offre { font-size: 14px; opacity: 0.9; }
.eldpart-encart .eldpart-cta { align-items: stretch; }
.eldpart-encart .eldpart-mention { color: inherit; opacity: 0.8; text-align: center; }

/* --- Podium ----------------------------------------------------------- */
.eldpart-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 24px 0; }
.eldpart-carte {
    display: flex;
    flex-direction: column;
    background: var(--eldpart-surface);
    border: 1px solid var(--eldpart-bordure);
    border-radius: var(--eldpart-rayon);
    overflow: hidden;
}
.eldpart-ruban {
    background: var(--eldpart-accent);
    color: var(--eldpart-sur-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 8px 16px;
}
.eldpart-carte-corps { display: flex; flex-direction: column; gap: 14px; padding: 20px 20px 22px; flex: 1; }
.eldpart-carte-tete { display: flex; align-items: center; gap: 14px; }
.eldpart-carte-nom { display: block; font-weight: 700; font-size: 20px; }
.eldpart-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.45; }
.eldpart-points li { position: relative; padding-left: 24px; }
.eldpart-points li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.45em;
    width: 14px; height: 8px;
    border-left: 2.4px solid var(--eldpart-accent);
    border-bottom: 2.4px solid var(--eldpart-accent);
    transform: rotate(-45deg);
}
.eldpart-offre {
    margin: 0;
    background: color-mix(in srgb, var(--eldpart-accent) 6%, transparent);
    border: 1px dashed var(--eldpart-bordure);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
}
.eldpart-offre-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--eldpart-accent); }
.eldpart-carte-actions { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.eldpart-carte-actions .eldpart-cta { align-items: stretch; }

/* --- Badge « Sponsorise » et avertissement ----------------------------- */
/* Le badge doit se lire sans etre criard : c'est une information due au
 * lecteur, pas une decoration. */
.eldpart-badge-sponsorise {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--eldorado-surface, #f2eedf);
    border: 1px solid var(--eldpart-bordure);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--eldpart-doux);
    vertical-align: middle;
}
.eldpart-risque {
    flex-basis: 100%;
    /* Marge basse : posee sous un bloc, la mention touchait le titre suivant. */
    margin: 6px 0 24px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--eldpart-doux);
}
.eldpart-bandeau .eldpart-risque { margin: 4px 0 0; }
.eldpart-carte .eldpart-risque,
.eldpart-encart .eldpart-risque { margin: 8px 0 0; }
.eldpart-encart .eldpart-risque { color: inherit; opacity: 0.8; }

/* --- Classement ------------------------------------------------------- */
.eldpart-transparence { font-size: 13px; color: var(--eldpart-doux); margin: 0 0 12px; }
.eldpart-lignes { list-style: none; margin: 0; padding: 0; border: 1px solid var(--eldpart-bordure); border-radius: var(--eldpart-rayon); overflow: hidden; }
.eldpart-ligne {
    display: grid;
    grid-template-columns: 44px 1.4fr 1fr 1fr 190px;
    gap: 16px;
    align-items: center;
    padding: 16px 20px;
    background: var(--eldpart-surface);
}
.eldpart-ligne + .eldpart-ligne { border-top: 1px solid var(--eldpart-bordure); }
.eldpart-rang {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--eldpart-accent) 12%, transparent);
    color: var(--eldpart-accent);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
}
.eldpart-ligne-identite { display: flex; align-items: center; gap: 12px; font-size: 17px; }
.eldpart-ligne-offre { font-size: 14px; color: var(--eldpart-doux); }

.eldpart-offres { display: flex; flex-direction: column; gap: 14px; }
.eldpart-offres .eldpart-bandeau { margin: 0; }

/* --- Elements injectes dans les composants du coeur -------------------- */
/* Ces blocs vivent a l'interieur du balisage de la bibliotheque : ils en
 * heritent la typographie et ne posent que leur propre mise en place. */
.eldorado-bib-carte-acteur .eldpart-logo-boite,
.eldorado-bib-classement-ligne .eldpart-logo-boite {
    --eldpart-accent: var(--eldorado-accent, #1e3a8a);
    --eldorado-surface: var(--eldorado-surface, #e6ecf8);
    margin-bottom: 10px;
}
.eldorado-bib-classement-ligne .eldpart-logo-boite { float: left; margin: 0 12px 4px 0; }
.eldorado-bib-classement-nom .eldorado-bib-classement-accroche,
.eldorado-bib-classement-nom .eldpart-caracs { clear: both; }

/* La maquette pose le logo A COTE du nom et de la note, pas au-dessus. Le
 * composant rend le nom et la note en deux blocs separes : un flottant les
 * aligne sans toucher a sa structure, et l'accroche repasse dessous. */
.eldorado-bib-carte-acteur .eldpart-logo-boite { float: left; margin: 0 14px 4px 0; }
.eldorado-bib-carte-acteur .eldorado-bib-carte-acteur-accroche,
.eldorado-bib-carte-acteur .eldpart-points,
.eldorado-bib-carte-acteur .eldorado-bib-carte-acteur-actions { clear: both; }


/* Les caracteristiques tiennent dans la cellule du nom. */
.eldorado-bib-classement-nom .eldpart-caracs { margin: 8px 0 0; }
.eldorado-bib-carte-acteur .eldpart-points,
.eldorado-bib-carte-acteur .eldpart-offre,
.eldorado-bib-classement-ligne .eldpart-caracs {
    --eldpart-accent: var(--eldorado-accent, #1e3a8a);
    --eldpart-bordure: var(--eldorado-bordure, #d3ddf0);
    --eldpart-doux: var(--eldorado-texte-doux, #4a5568);
}
.eldorado-bib-carte-acteur .eldpart-points { margin: 0 0 12px; }
.eldorado-bib-carte-acteur .eldpart-offre { margin: 0 0 14px; }

.eldpart-caracs { display: flex; gap: 18px; flex-wrap: wrap; margin: 6px 0 10px; }
.eldpart-carac { display: flex; flex-direction: column; font-size: 14px; line-height: 1.3; }
.eldpart-carac-libelle { color: var(--eldpart-doux, #4a5568); }

.eldpart-risque {
    --eldpart-doux: var(--eldorado-texte-doux, #4a5568);
}

/* --- Carte de comparatif de l'accueil ---------------------------------- */
/* Valeurs reprises de la maquette : rubrique 12px/700 espacee en gris (pas en
 * accent), resume 15px, pastilles de 34px, mention a cote. */
.eldpart-carte-rubrique {
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--eldorado-texte-doux, #4a5568);
}
.eldpart-carte-resume {
    margin: 0 0 2px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--eldorado-texte-doux, #4a5568);
}
.eldpart-trio { display: flex; align-items: center; gap: 6px; margin: 6px 0 2px; flex-wrap: wrap; }
.eldpart-trio .eldpart-logo-boite { border-radius: 8px; }
.eldpart-trio-mention {
    margin-left: 4px;
    font-size: 13px;
    color: var(--eldorado-texte-doux, #4a5568);
}
/* La maquette ne date pas la carte d'accueil : la date reste dans le HTML,
   seul son affichage est retire. Elle demeure sur la page du comparatif. */
.eldorado-bib-carte-classement .eldorado-bib-carte-classement-date { display: none; }

/* --- Adaptations ------------------------------------------------------ */
@media (max-width: 1000px) {
    .eldpart-podium { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 782px) {
    .eldpart-podium { grid-template-columns: 1fr; }
    .eldpart-ligne { grid-template-columns: 40px 1fr; row-gap: 10px; }
    .eldpart-ligne-note, .eldpart-ligne-offre, .eldpart-ligne-action { grid-column: 2; }
    .eldpart-bandeau { gap: 12px; }
    .eldpart-bandeau-offre { min-width: 100%; font-size: 16px; }
    .eldpart-cta { width: 100%; align-items: stretch; }
}

/* ---------------------------------------------------------------------------
 * Page des offres et codes promo
 *
 * Valeurs relevées dans la maquette du client à 1280 px (Offres-du-moment) :
 * grille de 3 colonnes et gouttière de 18 ; carte en colonne, 20 de marge
 * intérieure, rayon 16 ; titre d'offre 22/800 ; pastille de code en pointillé
 * sur le fond de page ; repères de 10/800 à 0,8 px d'interlettrage.
 *
 * Tout passe par les jetons --eldorado-* : les trois repères tombent pile sur
 * les couleurs d'état du design system (succès, erreur, alerte), donc le mode
 * clair suit sans qu'on écrive une seule valeur en dur.
 * ------------------------------------------------------------------------ */

/* Titre et chapô de section rendus par le shortcode : ils héritent du style du
   contenu, on ne fixe que les marges pour les raccorder à la grille. */
.eldpart-offres-titre {
    margin: 0 0 6px;
}

.eldpart-offres-soustitre {
    margin: 0 0 18px;
    color: var(--eldorado-texte-doux);
}

.eldpart-offres-liste {
    display: grid;
    /* `auto-fill` et non `auto-fit` : la maquette montre trois colonnes de 366.
       Avec `auto-fit`, deux offres s'étireraient à 551 chacune et la page ne
       ressemblerait plus à rien tant que le client n'en a pas saisi six. */
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 18px;
    margin: 0 0 var(--eldorado-espace-bloc, 24px);
}

.eldpart-carte-offre {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px;
    border: 1px solid var(--eldorado-bordure);
    border-radius: var(--eldorado-rayon-bloc, 16px);
    background-color: var(--eldorado-surface);
    font-family: var(--eldorado-police-texte);
}

/* Une offre passée reste lisible et datée, mais ne se fait plus passer pour
   une offre en cours : pas de bouton, et l'ensemble en retrait. */
.eldpart-carte-offre--expiree {
    opacity: 0.72;
}

.eldpart-offre-tete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    width: 100%;
}

.eldpart-offre-identite {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.eldpart-offre-nom {
    font-size: 1.0625rem;
    font-weight: 800;
    line-height: 1.2;
}

/* Le thème du site repeint TOUS les paragraphes du contenu : police des titres,
   19px, graisse 400 (`.eldorado-design .entry-content p`, spécificité 0,2,1).
   Nos cartes sortaient donc en serif, à la mauvaise taille, au milieu d'une
   interface en Public Sans. On ne surenchérit pas en !important : on double la
   classe de la racine, ce qui porte le sélecteur à 0,3,0 sans exiger d'ancêtre
   particulier (une carte isolée hors de la grille reste donc couverte). */
.eldpart-carte-offre.eldpart-carte-offre p,
.eldpart-carte-offre.eldpart-carte-offre li,
.eldpart-exclusive.eldpart-exclusive p,
.eldpart-exclusive.eldpart-exclusive li {
    font-family: var(--eldorado-police-texte, inherit);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
}

.eldpart-carte-offre.eldpart-carte-offre .eldpart-offre-titre {
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.2;
}

.eldpart-carte-offre.eldpart-carte-offre .eldpart-offre-dates {
    font-size: 0.8125rem;
}

.eldpart-carte-offre.eldpart-carte-offre .eldpart-mention,
.eldpart-exclusive.eldpart-exclusive .eldpart-mention {
    font-size: 0.75rem;
    line-height: 1.45;
}

.eldpart-exclusive.eldpart-exclusive .eldpart-exclusive-titre {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.25;
}

.eldpart-exclusive.eldpart-exclusive .eldpart-exclusive-detail {
    font-size: 0.9375rem;
    line-height: 1.55;
}

.eldpart-reperes {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.eldpart-rubrique {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--eldorado-accent);
}

.eldpart-repere {
    padding: 4px 7px;
    border-radius: var(--eldorado-rayon-etiquette, 6px);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    white-space: nowrap;
}

.eldpart-repere--nouveau {
    background-color: var(--eldorado-succes-fond);
    color: var(--eldorado-succes);
}

.eldpart-repere--bientot {
    background-color: var(--eldorado-erreur-fond);
    color: var(--eldorado-erreur);
}

.eldpart-repere--exclusif {
    background-color: var(--eldorado-alerte-fond);
    color: var(--eldorado-alerte);
}

.eldpart-offre-titre {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.2;
}

.eldpart-offre-detail {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--eldorado-texte-doux);
}

/* La pastille de code. Le code lui-même reste sélectionnable sans JavaScript ;
   le bouton n'apparaît que si le script a pu se brancher. */
.eldpart-code {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 9px 12px;
    border: 1px dashed var(--eldorado-bordure-forte);
    border-radius: var(--eldorado-rayon-controle, 10px);
    background-color: var(--eldorado-fond);
    box-sizing: border-box;
}

.eldpart-code-valeur {
    font-family: var(--eldorado-police-mono);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    overflow-wrap: anywhere;
}

.eldpart-code-copier {
    flex: 0 0 auto;
    padding: 6px 10px;
    border: 0;
    border-radius: var(--eldorado-rayon-etiquette, 6px);
    background-color: transparent;
    color: var(--eldorado-accent);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
}

.eldpart-code-copier:hover,
.eldpart-code-copier:focus-visible {
    text-decoration: underline;
}

.eldpart-code-fait {
    font-size: 0.8125rem;
    color: var(--eldorado-succes);
}

.eldpart-code-fait:empty {
    display: none;
}

.eldpart-offre-dates {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--eldorado-texte-doux);
}

/* La maquette aligne les boutons d'une même rangée : le bloc dates + action est
   poussé en bas de carte. Sans date (offre sans échéance), c'est le bouton qui
   porte la poussée ; les navigateurs sans `:has()` perdent seulement
   l'alignement de ces cartes-là. */
.eldpart-carte-offre > .eldpart-offre-dates,
.eldpart-carte-offre:not(:has(> .eldpart-offre-dates)) > .eldpart-cta {
    margin-top: auto;
}

/* Bouton pleine largeur dans la carte, comme dans la maquette (325 sur 367). */
.eldpart-carte-offre .eldpart-cta {
    width: 100%;
    align-items: stretch;
}

.eldpart-carte-offre .eldpart-btn {
    display: block;
    text-align: center;
}

.eldpart-offre-avis {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--eldorado-accent);
    text-decoration: none;
}

.eldpart-offre-avis::after {
    content: " \2192";
}

.eldpart-offre-avis:hover,
.eldpart-offre-avis:focus-visible {
    text-decoration: underline;
}

.eldpart-offre-conditions {
    width: 100%;
    font-size: 0.875rem;
}

.eldpart-offre-conditions > summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    /* 44 px : la cible tactile minimale recommandee. */
    min-height: 44px;
    cursor: pointer;
    color: var(--eldorado-texte-doux);
    /* Sans cela le navigateur dessine son propre triangle, que le composant
       `faq` du coeur retire partout ailleurs : deux accordeons de la meme
       page sortaient avec deux apparences. */
    list-style: none;
}

.eldpart-offre-conditions > summary::-webkit-details-marker {
    display: none;
}

/* Meme chevron que le composant `faq` du coeur, a la taille de ce bloc. */
.eldpart-offre-conditions > summary::after {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--eldorado-effectif-duree, .2s) var(--eldorado-courbe, ease);
}

.eldpart-offre-conditions[open] > summary::after {
    transform: rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {
    .eldpart-offre-conditions > summary::after {
        transition: none;
    }
}

/* Les filtres : masqués dans le HTML, révélés par le script. Sans lui, toutes
   les offres restent visibles — un filtre mort serait pire que pas de filtre. */
.eldpart-filtres {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
}

.eldpart-filtres[hidden] {
    display: none;
}

.eldpart-filtre {
    min-height: 44px;
    padding: 9px 15px;
    border: 1px solid var(--eldorado-bordure);
    border-radius: 999px;
    background-color: var(--eldorado-surface);
    color: var(--eldorado-texte);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.eldpart-filtre.est-actif {
    border-color: var(--eldorado-en-tete-fond, #1e3a8a);
    background-color: var(--eldorado-en-tete-fond, #1e3a8a);
    color: var(--eldorado-en-tete-texte, #ffffff);
}

/* L'offre exclusive, en tête de page : même carte, mais sur toute la largeur
   et avec le filet d'accent qui la distingue des offres ordinaires. */
.eldpart-exclusive {
    margin: 0 0 var(--eldorado-espace-bloc, 24px);
    padding: 28px 32px;
    border: 1px solid var(--eldorado-accent);
    border-radius: var(--eldorado-rayon-bloc, 16px);
    background-color: var(--eldorado-surface);
    font-family: var(--eldorado-police-texte);
}

.eldpart-exclusive-surtitre {
    padding: 5px 9px;
    border-radius: var(--eldorado-rayon-etiquette, 6px);
    background-color: var(--eldorado-en-tete-fond, #1e3a8a);
    color: var(--eldorado-en-tete-texte, #ffffff);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

/* Trois colonnes relevées dans la maquette : logo 84, texte, action 220. */
.eldpart-exclusive-corps {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
}

.eldpart-exclusive-action {
    display: flex;
    flex: 0 0 220px;
    flex-direction: column;
    gap: 8px;
    max-width: 100%;
}

.eldpart-exclusive .eldpart-cta {
    width: 100%;
}

.eldpart-exclusive .eldpart-btn {
    display: block;
}

.eldpart-exclusive-texte {
    flex: 1 1 320px;
    min-width: 0;
}

.eldpart-exclusive-texte > .eldpart-reperes {
    margin: 0 0 8px;
}

.eldpart-exclusive-titre {
    margin: 0 0 6px;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.25;
}

.eldpart-exclusive-detail {
    margin: 0 0 10px;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--eldorado-texte-doux);
}

.eldpart-exclusive-fin {
    margin: 10px 0 0;
    font-size: 0.8125rem;
    color: var(--eldorado-texte-doux);
}

@media (max-width: 600px) {
    .eldpart-carte-offre,
    .eldpart-exclusive {
        padding: 16px;
    }
}

/* ------------------------------------------------------------------ *
 * Barre promo (D2) et barre CTA collante mobile (G1)
 * ------------------------------------------------------------------ *
 *
 * Cotes du kit : barre promo 100 % x 40 px, 56 en mobile ; barre CTA
 * 100 % x 64 px, mobile seulement.
 *
 * Regle 6 du kit, suivie a la lettre : « fond clair pour les formats pleine
 * largeur ; le bleu est reserve aux boutons ». La barre promo touche l'en-tete,
 * qui est bleu chez la plupart des sites : la peindre en bleu collerait deux
 * aplats l'un contre l'autre.
 */

.eldpart-barre-promo,
.eldpart-cta-mobile {
    /* Les barres sortent du serveur en `hidden` et le script les revele : sans
       transition elles apparaitraient d'un coup au milieu de la lecture. */
    opacity: 0;
    transition: opacity 160ms ease-out, transform 160ms ease-out;
}

/* `hidden` doit vraiment masquer. Les deux barres se posent plus bas un
   `display: flex` / `display: grid`, et une regle d'auteur bat le
   `display: none` que le navigateur applique a `[hidden]` : sans ces deux
   lignes la barre fermee reste dans le flux, invisible mais occupant sa
   hauteur. Sur LMI, 41 px de blanc entre le haut de page et l'en-tete bleu
   des qu'un visiteur cliquait sur la croix -- et la meme place reservee avant
   que le script ne revele la barre, donc du decalage de mise en page pour
   rien. `[hidden]` ajoute sa specificite : pas besoin de `!important`. */
.eldpart-barre-promo[hidden],
.eldpart-cta-mobile[hidden] {
    display: none;
}

.eldpart-barre-promo.est-visible,
.eldpart-cta-mobile.est-visible {
    opacity: 1;
    transform: none;
}

/* --- D2 ----------------------------------------------------------- */

.eldpart-barre-promo {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    padding: 4px 16px;
    border-bottom: 1px solid var(--eldpart-bordure);
    background: var(--eldpart-teinte);
    font-size: 14px;
    line-height: 1.3;
}

.eldpart-barre-promo-corps {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.eldpart-barre-promo-etiquette {
    flex: 0 0 auto;
    padding: 3px 8px;
    border-radius: 5px;
    background: var(--eldpart-accent);
    color: var(--eldpart-sur-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.eldpart-barre-promo-texte {
    /* Une opération dont le titre est long ne doit pas doubler la hauteur de
       la barre et pousser tout le site vers le bas. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eldpart-barre-promo-detail {
    color: var(--eldpart-doux);
}

.eldpart-barre-promo-lien {
    flex: 0 0 auto;
    padding: 6px 12px;
    border-radius: 7px;
    background: var(--eldpart-accent);
    color: var(--eldpart-sur-accent);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.eldpart-barre-promo-fermer,
.eldpart-cta-mobile-fermer {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--eldpart-doux);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

@media (max-width: 768px) {
    .eldpart-barre-promo {
        min-height: 56px;
        padding: 8px 12px;
    }
    /* Le détail passe à la trappe, mais le titre de l'opération garde deux
       lignes : coupé à une seule, il ne restait que « Jusqu'a... » sur un
       écran de 390 px, mesuré. Deux lignes de 13 px tiennent dans les 56. */
    .eldpart-barre-promo-detail {
        display: none;
    }
    .eldpart-barre-promo-texte {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        white-space: normal;
        font-size: 13px;
    }
    .eldpart-barre-promo-etiquette {
        /* L'étiquette mange un tiers de la largeur pour ne rien dire que la
           mention « Lien affilié » du bouton ne dise déjà. */
        display: none;
    }
}

/* --- G1 ----------------------------------------------------------- */

.eldpart-cta-mobile {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: 8px 12px;
    border-top: 1px solid var(--eldpart-bordure);
    background: var(--eldpart-surface);
    box-shadow: 0 -6px 18px rgb(14 27 46 / 12%);
    transform: translateY(100%);
}

/* Le kit la veut sur mobile uniquement, et un seul élément collant en bas à la
   fois : au-delà de 768 px la colonne latérale porte déjà la carte B1. */
@media (min-width: 769px) {
    .eldpart-cta-mobile {
        display: none;
    }
}

.eldpart-cta-mobile-identite {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.eldpart-cta-mobile-texte {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 13px;
    line-height: 1.25;
}

.eldpart-cta-mobile-offre,
.eldpart-cta-mobile-mention {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--eldpart-doux);
}

.eldpart-cta-mobile-mention {
    font-size: 11px;
}

.eldpart-cta-mobile .eldpart-btn {
    flex: 0 0 auto;
}

/* ------------------------------------------------------------------ *
 * Medailles du Top 3 (E1, E2, E3 du kit)
 * ------------------------------------------------------------------ *
 *
 * « Les medailles or, argent et bronze rendent le Top 3 lisible en un coup
 * d'oeil. » Le kit teinte la LIGNE entiere des trois premiers et pose un
 * badge de la meme famille.
 *
 * Le rang vient de l'attribut data-eldpart-rang, jamais d'un :nth-child : une
 * entree masquee par un filtre decalerait tout le podium.
 *
 * Teintes du kit, en dur et non en jetons : l'or n'est pas une couleur de
 * marque, il ne suit pas l'accent du site. Elles restent lisibles sur fond
 * clair comme sur fond sombre parce que le texte garde sa propre couleur.
 */

.eldpart-ligne[data-eldpart-rang="1"] { background: #fff6da; }
.eldpart-ligne[data-eldpart-rang="2"] { background: #f1f4f7; }
.eldpart-ligne[data-eldpart-rang="3"] { background: #fbeee3; }

.eldpart-ligne[data-eldpart-rang="1"],
.eldpart-ligne[data-eldpart-rang="2"],
.eldpart-ligne[data-eldpart-rang="3"] {
    /* Fond clair impose : le texte du site peut etre clair en mode sombre. */
    color: #0e1b2e;
}

.eldpart-ligne[data-eldpart-rang="1"] .eldpart-rang { background: #fff6da; border: 1px solid #e9d28a; color: #8a6a12; }
.eldpart-ligne[data-eldpart-rang="2"] .eldpart-rang { background: #f1f4f7; border: 1px solid #cbd5e1; color: #475569; }
.eldpart-ligne[data-eldpart-rang="3"] .eldpart-rang { background: #fbeee3; border: 1px solid #e3c3a5; color: #9a5b18; }

/* Le ruban du podium reprend la meme famille. Sans libelle saisi par la
   redaction il n'y a pas de ruban : la medaille se lit alors sur le liseré
   haut de la carte, qui ne coute pas une ligne de texte. */
.eldpart-carte[data-eldpart-rang="1"] { border-top: 3px solid #e9d28a; }
.eldpart-carte[data-eldpart-rang="2"] { border-top: 3px solid #cbd5e1; }
.eldpart-carte[data-eldpart-rang="3"] { border-top: 3px solid #e3c3a5; }

.eldpart-carte[data-eldpart-rang="1"] .eldpart-ruban { background: #fff6da; border: 1px solid #e9d28a; color: #8a6a12; }
.eldpart-carte[data-eldpart-rang="2"] .eldpart-ruban { background: #f1f4f7; border: 1px solid #cbd5e1; color: #475569; }
.eldpart-carte[data-eldpart-rang="3"] .eldpart-ruban { background: #fbeee3; border: 1px solid #e3c3a5; color: #9a5b18; }

/* ------------------------------------------------------------------ *
 * A3, A4, A5, B2, F2 — les formats poses par la redaction
 * ------------------------------------------------------------------ */

/* --- A3 : lien texte natif, 780 x 56 ------------------------------- */
/* Le kit en fait un paragraphe a filet, pose dans le flux du texte : discret,
 * mais jamais sans sa mention. */
.eldpart-lien-natif {
    margin: 18px 0;
    padding: 10px 16px;
    border-left: 4px solid var(--eldpart-accent);
    border-radius: 0 8px 8px 0;
    background: var(--eldpart-teinte);
}

.eldpart-lien-natif a {
    font-weight: 700;
    color: var(--eldpart-accent);
}

.eldpart-lien-natif .eldpart-mention {
    display: block;
    margin-top: 2px;
    color: var(--eldpart-doux);
    font-size: 13px;
}

/* --- A4 : bloc CTA de fin de section, 780 x 110 (220 en mobile) ---- */
.eldpart-cta-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin: 28px 0;
    padding: 20px 22px;
    border: 1px solid var(--eldpart-bordure);
    border-radius: 16px;
    background: var(--eldpart-surface);
}

.eldpart-cta-section-texte {
    display: flex;
    flex: 1 1 240px;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.eldpart-cta-section-texte strong {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
}

.eldpart-cta-section-texte span {
    color: var(--eldpart-doux);
    font-size: 15px;
    line-height: 1.4;
}

.eldpart-cta-section-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* La mention de risque passe sous les deux colonnes, jamais entre elles. */
.eldpart-cta-section .eldpart-risque {
    flex: 1 1 100%;
    margin: 0;
}

/* --- A5 : la cellule d'action d'un tableau ------------------------- */
/* Un bouton de tableau est court par definition : il partage une ligne avec
 * trois autres colonnes. Pas de mention sous le bouton ici — elle serait
 * repetee a chaque ligne ; c'est la mention du tableau qui porte. */
.eldpart-bouton-tableau .eldpart-btn {
    padding: 8px 14px;
    font-size: 14px;
    white-space: nowrap;
}

.eldpart-bouton-tableau .eldpart-mention {
    display: none;
}

/* --- B2 : mini-classement de colonne, 300 x 280 -------------------- */
.eldpart-top3 {
    display: block;
    padding: 18px;
    border: 1px solid var(--eldpart-bordure);
    border-radius: var(--eldpart-rayon);
    background: var(--eldpart-surface);
}

.eldpart-top3-titre {
    display: block;
    margin-bottom: 12px;
    color: var(--eldpart-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.eldpart-top3-liste {
    margin: 0;
    padding: 0;
    list-style: none;
}

.eldpart-top3-ligne {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 15px;
}

.eldpart-top3-ligne + .eldpart-top3-ligne {
    margin-top: 6px;
}

/* Memes medailles que le classement complet : le lecteur doit reconnaitre
   le meme Top 3 d'un emplacement a l'autre. Teintes en dur, l'or n'est pas
   une couleur de marque. */
.eldpart-top3-ligne[data-eldpart-rang="1"] { background: #fff6da; color: #0e1b2e; }
.eldpart-top3-ligne[data-eldpart-rang="2"] { background: #f1f4f7; color: #0e1b2e; }
.eldpart-top3-ligne[data-eldpart-rang="3"] { background: #fbeee3; color: #0e1b2e; }

.eldpart-top3-rang {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--eldpart-surface);
    font-size: 13px;
    font-weight: 800;
    line-height: 26px;
    text-align: center;
}

.eldpart-top3-nom {
    flex: 1 1 auto;
    overflow: hidden;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eldpart-top3-lien {
    flex: 0 0 auto;
    color: var(--eldpart-accent);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

/* Fond clair IMPOSE, comme pour le classement en lignes plus haut : a
   l'interieur d'une medaille les jetons de marque n'ont plus cours. Sur un
   site a theme sombre `--eldpart-surface` est une couleur SOMBRE et
   `--eldpart-accent` une couleur CLAIRE — exactement l'inverse de ce que ces
   trois fonds attendent.

   Mesure sur LMI le 06/11/2026, encart « TOP 3 · BOURSE » :
     - chiffre du rang  : #0e1b2e sur #121b2d  = 1,00 : 1  (invisible)
     - lien « Offre »   : #9db6ff sur #fff6da  = 1,84 : 1
     - nom du partenaire: deja correct         = 16,0 : 1
   Le chiffre du classement etait donc absent de l'ecran, soit precisement ce
   que cet encart existe pour montrer.

   Le defaut date de la 1.6.0 : le Top 3 a repris les fonds de medaille du
   classement en lignes sans reprendre la protection qui va avec.

   Le lien prend `inherit` plutot qu'une couleur neuve : il herite du #0e1b2e
   que la ligne impose deja, et suivra la palette si elle change un jour. Le
   soulignement est pose explicitement — sans couleur propre, un lien doit
   rester reconnaissable meme sur un theme qui ne souligne pas. */

.eldpart-top3-ligne[data-eldpart-rang="1"] .eldpart-top3-rang { background: #f2e2ad; color: #6b5210; }
.eldpart-top3-ligne[data-eldpart-rang="2"] .eldpart-top3-rang { background: #dde4ec; color: #3f4b5c; }
.eldpart-top3-ligne[data-eldpart-rang="3"] .eldpart-top3-rang { background: #f0ddcb; color: #7d4712; }

.eldpart-top3-ligne[data-eldpart-rang] .eldpart-top3-lien,
.eldpart-top3-ligne[data-eldpart-rang] .eldpart-top3-lien:visited {
    color: inherit;
    text-decoration: underline;
}

.eldpart-top3 .eldpart-mention {
    display: block;
    margin-top: 10px;
    color: var(--eldpart-doux);
    font-size: 12px;
    line-height: 1.4;
}

/* --- F2 : bandeau de logos, 1200 x 80 ------------------------------ */
.eldpart-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
    padding: 20px 22px;
    border: 1px solid var(--eldpart-bordure);
    border-radius: var(--eldpart-rayon);
    background: var(--eldpart-surface);
}

.eldpart-logos-titre {
    flex: 0 0 auto;
    color: var(--eldpart-doux);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.eldpart-logos-bande {
    display: flex;
    flex: 1 1 320px;
    align-items: center;
    gap: 18px;
}

.eldpart-logos-lien {
    flex: 0 0 auto;
    color: var(--eldpart-accent);
    font-size: 14px;
    font-weight: 700;
}

/* Le kit demande un defilement des logos en mobile plutot qu'un retour a la
   ligne : huit logos empiles pousseraient le pied de page hors de l'ecran. */
@media (max-width: 768px) {
    .eldpart-logos-bande {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }
    .eldpart-logos-bande > * {
        flex-shrink: 0;
    }
}