/* Bandeau de rubrique (LMI, 03/11/2026)
 *
 * La maquette coiffe la liste d'une rubrique d'un bandeau plein accent : icone 40px et nom
 * cote a cote, puis « N articles » dessous, hauteur 150, rayon 14.
 *
 * Rien a coder cote PHP : la page de rubrique rend deja tout le contenu voulu dans son
 * « page-header » (h1.page-title + p.eldorado-bib-compteur). Il n y manquait que l habillage
 * et l icone. On cible body.category, donc jamais les archives de tag, d auteur, de date
 * ni la recherche, qui ont le meme page-header sans compteur de rubrique.
 *
 * Couleur du texte : « --eldorado-sur-accent », le jeton du design pour ce qui se pose sur
 * l accent (le mega-bouton s en sert deja). Un blanc en dur etait un VRAI defaut, mesure : en
 * mode sombre l accent devient clair (#9db6ff) et le blanc tombait a ~1,7:1 de contraste,
 * illisible. Le jeton vaut #ffffff en clair et #0b1220 en sombre : il s inverse tout seul.
 *
 * Le nav des sous-rubriques vit DANS ce page-header : laisse tel quel, ses liens seraient
 * bleu fonce sur bleu fonce. Il est donc repris en pastilles claires. Si ces sous-rubriques
 * disparaissent (decision editoriale en attente), ces regles deviennent sans objet.
 */
body.category .page-header {
    background: var(--eldorado-accent);
    border-radius: 14px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 22px 24px;
    margin-bottom: 22px;
    color: var(--eldorado-sur-accent, #FFFFFF);
    text-align: center;
}
/* L icone va A COTE du titre, pas au-dessus : elle est donc portee par le h1, que l on passe
   en inline-flex, et non par le bandeau qui, lui, empile. */
body.category .page-header .page-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0;
    font-size: 38px;
    font-weight: 600;
    color: var(--eldorado-sur-accent, #FFFFFF);
}
body.category .page-header .page-title::before {
    content: "";
    display: none;
    width: 40px;
    height: 40px;
    flex: none;
    background-color: var(--eldorado-sur-accent, #FFFFFF);
    -webkit-mask: var(--lmi-icone-bandeau) center / contain no-repeat;
    mask: var(--lmi-icone-bandeau) center / contain no-repeat;
}
body.category .page-header .eldorado-bib-compteur {
    margin: 0;
    font-size: 15px;
    /* Teinte de la maquette (#DCE4F5) : un blanc attenue, lisible sur l accent dans les deux modes */
    color: color-mix(in srgb, var(--eldorado-sur-accent, #FFFFFF) 86%, var(--eldorado-accent));
}
body.category .page-header .eldorado-bib-sous-rubriques {
    margin-top: 6px;
}
/* Vide de 42,5px sous le bandeau : la regle gagnante est « .splitted-list[data-columns] » de
   splitted-list.css (plugin eldorado), qui pose margin-bottom: 2.5em en !important. Trouvee en
   parcourant document.styleSheets (1137 regles visitees), pas devinee. Un !important ne se
   contre que par un !important : porte ici au seul bandeau, pas au composant en general. */
body.category .page-header .eldorado-bib-sous-rubriques ul {
    margin: 0 !important;
    padding: 0;
    list-style: none;
}
body.category .page-header .eldorado-bib-sous-rubriques a {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--eldorado-sur-accent, #FFFFFF) 16%, transparent);
    /* La pastille herite d une bordure grise du design : sur le bleu elle dessinait un contour
       sale. On la garde (elle porte le relief) mais en blanc translucide. */
    border: 1px solid color-mix(in srgb, var(--eldorado-sur-accent, #FFFFFF) 28%, transparent);
    color: var(--eldorado-sur-accent, #FFFFFF);
    font-size: 13px;
    text-decoration: none;
}
body.category .page-header .eldorado-bib-sous-rubriques a:hover,
body.category .page-header .eldorado-bib-sous-rubriques a:focus-visible {
    background: color-mix(in srgb, var(--eldorado-sur-accent, #FFFFFF) 30%, transparent);
}
body.category-alternatifs .page-header .page-title::before {
    display: inline-block;
    --lmi-icone-bandeau: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%203h12l3%206-9%2012L3%209z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M3%209h18M9%203l3%2018%203-18%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
}
body.category-assurance-vie .page-header .page-title::before {
    display: inline-block;
    --lmi-icone-bandeau: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203C7%203%203%207%203%2012h18c0-5-4-9-9-9z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M12%2012v7a2%202%200%200%200%204%200%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
}
body.category-bourse .page-header .page-title::before {
    display: inline-block;
    --lmi-icone-bandeau: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2020h18%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M4%2016l5-5%204%203%207-8%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M15%206h5v5%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
}
body.category-crowdfunding .page-header .page-title::before {
    display: inline-block;
    --lmi-icone-bandeau: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%223%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%228%22%20r%3D%223%22%3E%3C%2Fcircle%3E%3Cpath%20d%3D%22M2%2020c0-3%203-5%206-5s6%202%206%205M12%2015.5c1-.4%202.5-.5%204-.5%203%200%206%202%206%205%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
}
body.category-crypto .page-header .page-title::before {
    display: inline-block;
    --lmi-icone-bandeau: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%3E%3C%2Fcircle%3E%3Cpath%20d%3D%22M9.5%207.5h4a2%202%200%200%201%200%204h-4zm0%204h4.5a2%202%200%200%201%200%204H9.5zM11%206v1.5M11%2015.5V17%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
}
body.category-epargne .page-header .page-title::before {
    display: inline-block;
    --lmi-icone-bandeau: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%207c0-1-1-2-3-2H8C5%205%203%207%203%2010c0%202%201%203%202%204v4h3v-2h6v2h3v-4c1-.5%202-1.5%202-3h2V9h-2%22%3E%3C%2Fpath%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%229%22%20r%3D%220.6%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E");
}
body.category-immobilier .page-header .page-title::before {
    display: inline-block;
    --lmi-icone-bandeau: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021h18%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M5%2021V9l7-5%207%205v12%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M10%2021v-6h4v6%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
}
body.category-retraite .page-header .page-title::before {
    display: inline-block;
    --lmi-icone-bandeau: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%203H6v18h12V7z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M14%203v4h4M9%2012h6M9%2016h6%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
}
body.category-banque .page-header .page-title::before {
    display: inline-block;
    --lmi-icone-bandeau: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2010l9-5%209%205%22%2F%3E%3Cpath%20d%3D%22M5%2010v8M9.5%2010v8M14.5%2010v8M19%2010v8%22%2F%3E%3Cpath%20d%3D%22M3%2021h18%22%2F%3E%3C%2Fsvg%3E");
}

/* ---------------------------------------------------------------------------------------
 * Bandeau injecte par le filtrage sur place (onglets-filtrants.js)
 *
 * Meme habillage que le page-header d'une page de rubrique, mais construit par le script :
 * il ne porte ni <h1> ni nav de sous-rubriques, qui n'ont rien a faire sur l'accueil.
 * Les dessins sont les memes, repris des memes data-URI.
 * --------------------------------------------------------------------------------------- */
.lmi-bandeau {
    background: var(--eldorado-accent);
    border-radius: 14px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 22px 24px;
    margin-bottom: 22px;
    color: var(--eldorado-sur-accent, #FFFFFF);
    text-align: center;
}
.lmi-bandeau-titre {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0;
    font-family: var(--eldorado-police-titres);
    font-size: 38px;
    font-weight: 600;
    color: var(--eldorado-sur-accent, #FFFFFF);
}
.lmi-bandeau-titre::before {
    content: "";
    display: none;
    width: 40px;
    height: 40px;
    flex: none;
    background-color: var(--eldorado-sur-accent, #FFFFFF);
    -webkit-mask: var(--lmi-icone-bandeau) center / contain no-repeat;
    mask: var(--lmi-icone-bandeau) center / contain no-repeat;
}
.lmi-bandeau-compteur {
    margin: 0;
    font-size: 15px;
    color: color-mix(in srgb, var(--eldorado-sur-accent, #FFFFFF) 86%, var(--eldorado-accent));
}
/* Le temps du chargement : on attenue sans faire sauter la hauteur, pour ne pas decaler la page. */
.lmi-filtre-en-cours ~ .eldorado-bib-cartes,
.eldorado-bib-cartes[aria-busy="true"] {
    opacity: 0.55;
    transition: opacity var(--eldorado-duree, 150ms) var(--eldorado-courbe, ease-out);
}
/* L'annonce est destinee aux lecteurs d'ecran : hors de l'ecran, jamais display:none, qui la
   retirerait de l'arbre d'accessibilite et donc la rendrait muette. */
.lmi-annonce-filtre {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.lmi-bandeau[data-rubrique="alternatifs"] .lmi-bandeau-titre::before {
    display: inline-block;
    --lmi-icone-bandeau: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%203h12l3%206-9%2012L3%209z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M3%209h18M9%203l3%2018%203-18%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
}

.lmi-bandeau[data-rubrique="assurance-vie"] .lmi-bandeau-titre::before {
    display: inline-block;
    --lmi-icone-bandeau: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203C7%203%203%207%203%2012h18c0-5-4-9-9-9z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M12%2012v7a2%202%200%200%200%204%200%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
}

.lmi-bandeau[data-rubrique="bourse"] .lmi-bandeau-titre::before {
    display: inline-block;
    --lmi-icone-bandeau: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2020h18%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M4%2016l5-5%204%203%207-8%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M15%206h5v5%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
}

.lmi-bandeau[data-rubrique="crowdfunding"] .lmi-bandeau-titre::before {
    display: inline-block;
    --lmi-icone-bandeau: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%223%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%228%22%20r%3D%223%22%3E%3C%2Fcircle%3E%3Cpath%20d%3D%22M2%2020c0-3%203-5%206-5s6%202%206%205M12%2015.5c1-.4%202.5-.5%204-.5%203%200%206%202%206%205%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
}

.lmi-bandeau[data-rubrique="crypto"] .lmi-bandeau-titre::before {
    display: inline-block;
    --lmi-icone-bandeau: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%3E%3C%2Fcircle%3E%3Cpath%20d%3D%22M9.5%207.5h4a2%202%200%200%201%200%204h-4zm0%204h4.5a2%202%200%200%201%200%204H9.5zM11%206v1.5M11%2015.5V17%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
}

.lmi-bandeau[data-rubrique="epargne"] .lmi-bandeau-titre::before {
    display: inline-block;
    --lmi-icone-bandeau: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%207c0-1-1-2-3-2H8C5%205%203%207%203%2010c0%202%201%203%202%204v4h3v-2h6v2h3v-4c1-.5%202-1.5%202-3h2V9h-2%22%3E%3C%2Fpath%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%229%22%20r%3D%220.6%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E");
}

.lmi-bandeau[data-rubrique="immobilier"] .lmi-bandeau-titre::before {
    display: inline-block;
    --lmi-icone-bandeau: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021h18%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M5%2021V9l7-5%207%205v12%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M10%2021v-6h4v6%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
}

.lmi-bandeau[data-rubrique="retraite"] .lmi-bandeau-titre::before {
    display: inline-block;
    --lmi-icone-bandeau: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%203H6v18h12V7z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M14%203v4h4M9%2012h6M9%2016h6%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
}

.lmi-bandeau[data-rubrique="banque"] .lmi-bandeau-titre::before {
    display: inline-block;
    --lmi-icone-bandeau: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2010l9-5%209%205%22%2F%3E%3Cpath%20d%3D%22M5%2010v8M9.5%2010v8M14.5%2010v8M19%2010v8%22%2F%3E%3Cpath%20d%3D%22M3%2021h18%22%2F%3E%3C%2Fsvg%3E");
}
