/*
 * Les blocs de Koenig, l'editeur de Ghost
 * ----------------------------------------
 * Les 587 articles repris portent le balisage de l'ancien site. Le balisage
 * est venu, PAS la feuille de Ghost : mesure du 06/11/2026, **aucune des
 * feuilles du site ne porte une seule regle ciblant `kg-`**. Les blocs
 * sortent donc en morceaux empiles.
 *
 * Releve exhaustif sur les contenus publies (06/11/2026) :
 *
 *   kg-callout-card    1 109   encadre « conseil », 7 variantes de couleur
 *   kg-image-card        968   image + legende
 *   kg-toggle-card       501   FAQ repliable        -> DEJA traite (ghost-faq.css)
 *   kg-bookmark-card     386   apercu de lien
 *   kg-button-card       326   bouton d'action
 *   kg-cta-card          278   bloc sponsorise
 *   kg-embed-card        139   YouTube (27) et Instagram (112)
 *
 * ON NE REPREND PAS LA FEUILLE DE GHOST. Chaque bloc reprend le vocabulaire
 * de la maquette, tel que le coeur le pose deja sur ses propres composants :
 *
 *   boite      1px solid --eldorado-bordure + --eldorado-rayon-bloc (16px)
 *              sur --eldorado-fond, Public Sans            (cartes-article)
 *   encadre    padding --eldorado-effectif-espace-bloc, filet gauche
 *              --eldorado-filet-couleur, fond --eldorado-surface  (encadre)
 *   bouton     inline-flex centre, 44px de haut, padding 0 20px,
 *              --eldorado-rayon-controle, fond --eldorado-accent  (carte-offre)
 *   etiquette  4px 10px, --eldorado-rayon-etiquette, 0.8125rem/600 (etiquette)
 *   titre      --eldorado-police-titres, 1.125rem/600, line-clamp  (cartes-article)
 *   texte doux --eldorado-texte-doux, 0.875rem/1.45
 *
 * MODE SOMBRE : rien a ecrire. Le coeur reaffecte tous les jetons de base
 * sous `html.dark` (verifie dans bibliotheque-en-tete.min.css). On n'emploie
 * donc QUE les jetons de base, jamais les `-sombre`.
 *
 * ⚠️ TROIS PIEGES MESURES, qui expliquent des regles sinon incomprehensibles.
 *
 * 1. wpautop injecte des <p> parasites DANS les blocs. Sur la carte CTA il y
 *    en a quatre, vides. Sur l'apercu de lien il casse meme l'ancre en deux :
 *    le <figure> sort avec un `a.kg-bookmark-container` plein PUIS un <p>
 *    contenant un second `a.kg-bookmark-container` VIDE. Tant que le bloc est
 *    en flux ces coquilles font 0 px et ne se voient pas ; des qu'on passe le
 *    conteneur en flex elles deviennent des elements de grille et ouvrent des
 *    trous. D'ou les regles de neutralisation en tete de chaque famille.
 *
 * 2. design.css pose `font-family`, `font-size` ET `font-weight` sur CHAQUE
 *    p et li de l'article, en (0,2,1) -- memoire
 *    [[la-prose-generee-bat-la-typographie-des-composants]]. Toute regle a
 *    deux classes est battue. Les regles qui visent un <p> interne montent
 *    donc a trois classes.
 *
 * 3. Le bouton CTA porte sa couleur EN LIGNE : `background-color:#000000`.
 *    Verifie : **278 occurrences sur 278, a la chaine pres**. Ce n'est donc
 *    pas un choix editorial article par article, c'est le defaut de Ghost.
 *    On l'aligne sur l'accent de la maquette -- et un attribut `style` ne se
 *    laisse battre que par `!important` (meme motif que contenu-importe.css).
 *
 * 🔒 CE QU'ON NE FAIT PAS, ET POURQUOI
 *   - `kg-width-wide` (862 des 968 images) demande a l'image de deborder de
 *     la colonne. La page article a un sommaire a gauche : un debordement y
 *     passerait DESSOUS. Les images restent a la largeur de la colonne.
 *   - Aucune dimension forcee sur `img.kg-image` : 864 de ces images sont
 *     mortes (projet Supabase du client ferme). Leur imposer une hauteur ou
 *     un `aspect-ratio` remplacerait un vide de 0 px par un grand cadre vide,
 *     ce qui serait PIRE. Decision du user : on ne touche pas aux images
 *     mortes tant qu'il n'a pas verifie son compte Supabase.
 */

/* --- 0. Les coquilles laissees par wpautop ------------------------------ */

/* Un <p> reellement vide, n'importe ou dans un bloc de Koenig. */
.entry-content .kg-card p:empty {
    display: none;
}

/* L'ancre dupliquee et vide de l'apercu de lien, et le <p> qui la porte.
   On ne vise pas « tout <p> enfant du figure » : on exige que son seul
   contenu soit cette ancre vide, pour qu'un futur contenu reel survive. */
.entry-content .kg-bookmark-card > p:has(> a.kg-bookmark-container:empty) {
    display: none;
}

/* Repli si :has() n'est pas disponible : l'ancre vide, elle, disparait. */
.entry-content a.kg-bookmark-container:empty {
    display: none;
}

/* --- 1. L'encadre « conseil » (kg-callout-card, 1 109) ------------------ */

/* Allure du composant « encadre » du coeur : meme rayon, meme filet gauche,
   meme police d'interface. La couleur du filet et du fond vient de la
   variante, en reutilisant les jetons semantiques de la maquette. */
.entry-content .kg-callout-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: var(--eldorado-effectif-espace-bloc, 24px) 0;
    padding: var(--eldorado-effectif-espace-bloc, 24px);
    border-radius: var(--eldorado-rayon-bloc);
    border-left: max(3px, var(--eldorado-filet-epaisseur)) solid var(--eldorado-accent);
    background-color: var(--eldorado-surface);
    color: var(--eldorado-texte);
}

.entry-content .kg-callout-emoji {
    flex: none;
    /* La ligne du texte fait 1.55 x 17px : on cale l'emoji dessus pour qu'il
       ne pende ni au-dessus ni en dessous de la premiere ligne. */
    line-height: 1.55;
    font-size: 1.25rem;
}

.entry-content .kg-callout-text {
    flex: 1;
    min-width: 0;
    font-family: var(--eldorado-police-texte);
    font-size: 1.0625rem;
    line-height: 1.55;
}

/* Les sept variantes de Ghost, ramenees aux jetons semantiques du coeur.
   bleu -> accent (deja le defaut ci-dessus) ; gris -> fond neutre et filet
   discret ; jaune -> alerte ; vert -> succes ; rouge -> erreur.
   Rose et violet (55 blocs) n'ont pas d'equivalent semantique dans la
   maquette : ils prennent le secondaire, la seule autre couleur de marque,
   plutot qu'un rose invente hors palette. */
.entry-content .kg-callout-card-grey {
    border-left-color: var(--eldorado-bordure-forte);
    background-color: var(--eldorado-fond);
}

.entry-content .kg-callout-card-yellow {
    border-left-color: var(--eldorado-alerte);
    background-color: var(--eldorado-alerte-fond);
}

.entry-content .kg-callout-card-green {
    border-left-color: var(--eldorado-succes);
    background-color: var(--eldorado-succes-fond);
}

.entry-content .kg-callout-card-red {
    border-left-color: var(--eldorado-erreur);
    background-color: var(--eldorado-erreur-fond);
}

.entry-content .kg-callout-card-pink,
.entry-content .kg-callout-card-purple {
    border-left-color: var(--eldorado-secondaire);
    background-color: var(--eldorado-fond);
}

/* --- 2. L'apercu de lien (kg-bookmark-card, 386) ------------------------ */

.entry-content .kg-bookmark-card {
    margin: var(--eldorado-effectif-espace-bloc, 24px) 0;
}

/* La carte, a l'allure de « cartes-article » : filet, rayon de bloc, fond
   neutre, police d'interface. L'ancre porte toute la boite, donc on lui
   retire le soulignement et la couleur de lien que design.css lui donne. */
.entry-content .kg-bookmark-container {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--eldorado-bordure);
    border-radius: var(--eldorado-rayon-bloc);
    background-color: var(--eldorado-fond);
    color: var(--eldorado-texte);
    font-family: var(--eldorado-police-texte);
    text-decoration: none;
    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);
}

.entry-content .kg-bookmark-container:is(:hover, :focus-visible) {
    border-color: var(--eldorado-accent);
    box-shadow: var(--eldorado-ombre);
}

.entry-content .kg-bookmark-container:focus-visible {
    outline: 2px solid var(--eldorado-focus);
    outline-offset: 2px;
}

.entry-content .kg-bookmark-content {
    display: flex;
    flex: 1;
    /* min-width:0 obligatoire : sans lui un element flex garde min-width:auto
       et s'elargit a son plus long mot -- memoire
       [[flex-min-width-debordement-mobile]]. */
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 18px 20px;
}

.entry-content .kg-bookmark-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-family: var(--eldorado-police-titres);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--eldorado-texte);
}

.entry-content .kg-bookmark-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--eldorado-texte-doux);
}

.entry-content .kg-bookmark-metadata {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 0.8125rem;
    line-height: 1.3;
    color: var(--eldorado-texte-doux);
}

/* Le favicon sortait en 256 x 256 : c'est le gros logo bleu vu par le user.
   Un favicon n'a pas de dimension intrinseque utile, il faut la poser. */
.entry-content .kg-bookmark-icon {
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    object-fit: contain;
}

.entry-content .kg-bookmark-author,
.entry-content .kg-bookmark-publisher {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* La miniature : largeur fixe a droite, jamais plus du tiers de la carte. */
.entry-content .kg-bookmark-thumbnail {
    flex: none;
    width: 33%;
    max-width: 220px;
}

.entry-content .kg-bookmark-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Le balisage de Ghost porte `onerror="this.style.display='none'"` sur la
   miniature : si l'image est morte, la colonne resterait ouverte et vide.
   `:has()` la referme. */
.entry-content .kg-bookmark-thumbnail:not(:has(img:not([style*="none"]))) {
    display: none;
}

@media (max-width: 600px) {
    .entry-content .kg-bookmark-container {
        flex-direction: column;
    }

    /* L'image passe au-dessus du texte, comme sur les cartes d'article. */
    .entry-content .kg-bookmark-thumbnail {
        order: -1;
        width: 100%;
        max-width: none;
        aspect-ratio: 16 / 9;
    }

    .entry-content .kg-bookmark-content {
        padding: 16px;
    }
}

/* --- 3. Le bouton (kg-button-card, 326) --------------------------------- */

.entry-content .kg-button-card {
    display: flex;
    margin: var(--eldorado-effectif-espace-bloc, 24px) 0;
}

.entry-content .kg-button-card.kg-align-center {
    justify-content: center;
}

/* Meme bouton que celui de la carte d'offre du coeur. */
.entry-content .kg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44 px : la cible tactile minimale recommandee. */
    min-height: 44px;
    padding: 10px 22px;
    border-radius: var(--eldorado-rayon-controle);
    background-color: var(--eldorado-accent);
    color: var(--eldorado-sur-accent);
    font-family: var(--eldorado-police-texte);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--eldorado-effectif-duree, 150ms) var(--eldorado-courbe, ease-out);
}

.entry-content .kg-btn:is(:hover, :focus) {
    background-color: color-mix(in srgb, var(--eldorado-accent) 88%, var(--eldorado-texte));
    color: var(--eldorado-sur-accent);
}

.entry-content .kg-btn:focus-visible {
    outline: 2px solid var(--eldorado-focus);
    outline-offset: 2px;
}

/* --- 4. Le bloc sponsorise (kg-cta-card, 278) --------------------------- */

.entry-content .kg-cta-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: var(--eldorado-espace-section, 48px) 0;
    padding: var(--eldorado-effectif-espace-bloc, 24px);
    border-radius: var(--eldorado-rayon-bloc);
    border-left: max(3px, var(--eldorado-filet-epaisseur)) solid var(--eldorado-secondaire);
    background-color: var(--eldorado-surface);
    color: var(--eldorado-texte);
    font-family: var(--eldorado-police-texte);
}

/* Les quatre variantes de fond de Ghost. Le gris (224 blocs sur 278) prend le
   fond neutre de la maquette ; le jaune prend le jeton d'alerte ; vert et
   violet (12 blocs) rejoignent le gris plutot que d'ouvrir deux teintes hors
   palette pour une poignee de blocs. */
.entry-content .kg-cta-bg-grey,
.entry-content .kg-cta-bg-green,
.entry-content .kg-cta-bg-purple {
    background-color: var(--eldorado-fond);
}

.entry-content .kg-cta-bg-yellow {
    background-color: var(--eldorado-alerte-fond);
}

/* L'etiquette « Sponsorise » : meme jeton que l'etiquette de rubrique du
   coeur. Elle est une mention legale (article L.111-7) : elle doit rester
   lisible et distincte, pas se fondre dans le texte. */
.entry-content .kg-cta-sponsor-label-wrapper {
    display: flex;
}

.entry-content .kg-cta-sponsor-label {
    display: inline-block;
    width: fit-content;
    padding: 4px 10px;
    border-radius: var(--eldorado-rayon-etiquette);
    background-color: var(--eldorado-fond);
    color: var(--eldorado-texte-doux);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.entry-content .kg-cta-bg-grey .kg-cta-sponsor-label {
    background-color: var(--eldorado-surface);
}

.entry-content .kg-cta-content-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.entry-content .kg-cta-card.kg-cta-centered .kg-cta-content-inner {
    align-items: center;
    text-align: center;
}

/* Trois classes : il faut battre `.eldorado-design .entry-content p` (0,2,1),
   qui impose Newsreader 19px a tout paragraphe de l'article. */
.entry-content .kg-cta-card .kg-cta-text p {
    margin: 0;
    font-family: var(--eldorado-police-texte);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.55;
}

/* design.css habille aussi `p strong` et `p em` en (0,2,1) : sans cette
   regle, les passages en gras du bloc sponsorise repassaient en Newsreader
   au milieu d'une phrase en Public Sans. Mesure : visible sur les 278 blocs,
   « 20% de reduction sur les abonnements Finary » sortait en serif gras dans
   une phrase sans serif. `:is()` prend la specificite de son argument le plus
   fort, soit un element : (0,3,1), juste au-dessus. */
.entry-content .kg-cta-card .kg-cta-text :is(strong, b, em, a) {
    font-family: var(--eldorado-police-texte);
    font-size: inherit;
}

/* Le bouton porte `style="background-color:#000000"` en ligne, sur 278
   occurrences identiques : c'est le defaut de Ghost, pas un choix d'article.
   Seul `!important` passe devant un attribut `style`. */
.entry-content .kg-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 22px;
    border-radius: var(--eldorado-rayon-controle);
    background-color: var(--eldorado-accent) !important;
    color: var(--eldorado-sur-accent) !important;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--eldorado-effectif-duree, 150ms) var(--eldorado-courbe, ease-out);
}

.entry-content .kg-cta-button:is(:hover, :focus) {
    background-color: color-mix(in srgb, var(--eldorado-accent) 88%, var(--eldorado-texte)) !important;
}

.entry-content .kg-cta-button:focus-visible {
    outline: 2px solid var(--eldorado-focus);
    outline-offset: 2px;
}

.entry-content .kg-cta-image-container img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--eldorado-rayon-image);
}

/* 🔴 PAS DE VARIANTE DEUX COLONNES, ET C'EST UN RETOUR EN ARRIERE ASSUME.
   Premiere version : avec image, `.kg-cta-content-inner` passait en
   `flex-direction: row`. Mesure sur /immobilier/scpi-iroko-atlas/ : l'image,
   le texte ET le bouton sont TROIS FRERES a plat dans ce conteneur -- le
   bouton devenait donc la troisieme colonne et sortait en **145 x 162 px**,
   une tuile verticale illisible, contre 23 x 561 avant correctif.
   Une grille explicite reparerait la mise en page, mais wpautop seme des <p>
   parasites entre ces freres : ils prendraient des cellules. On garde la
   colonne unique -- image, texte, bouton -- qui ne depend d'aucune hypothese
   sur le nombre d'enfants. */
.entry-content .kg-cta-image-container {
    display: flex;
    justify-content: center;
}

.entry-content .kg-cta-image-container img {
    /* Un logo de partenaire ne doit pas ecraser le message. */
    max-width: 180px;
    max-height: 90px;
    width: auto;
    object-fit: contain;
}

/* --- 5. Image et legende (kg-image-card, 968) --------------------------- */

.entry-content .kg-image-card {
    margin: var(--eldorado-effectif-espace-bloc, 24px) 0;
}

/* Aucune hauteur ni aspect-ratio imposes : 864 de ces images sont mortes
   (cf. en-tete). Une image morte doit rester un vide de 0 px, pas un grand
   cadre vide. */
.entry-content .kg-image-card img.kg-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: var(--eldorado-rayon-image);
}

.entry-content .kg-image-card figcaption {
    margin-top: 10px;
    font-family: var(--eldorado-police-texte);
    font-size: 0.875rem;
    line-height: 1.45;
    text-align: center;
    color: var(--eldorado-texte-doux);
}

/* --- 6. Les integrations (kg-embed-card, 139) --------------------------- */

.entry-content .kg-embed-card {
    margin: var(--eldorado-effectif-espace-bloc, 24px) 0;
}

/* Les 27 lecteurs YouTube portent `width="560" height="315"` EN DUR. Sur un
   telephone de 390 px la colonne fait 358 px : la video debordait de 202 px.
   On remplace les attributs par un rapport 16/9 fluide. */
.entry-content .kg-embed-card iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--eldorado-rayon-image);
}

/* La carte de repli des 112 publications Instagram, construite par le
   mu-plugin (section 36) : le balisage repris de Ghost est un blockquote
   VIDE, il n'affichait donc rien du tout. */
.entry-content .lmi-ghost-instagram {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--eldorado-bordure);
    border-radius: var(--eldorado-rayon-bloc);
    background-color: var(--eldorado-fond);
    color: var(--eldorado-texte);
    font-family: var(--eldorado-police-texte);
    text-decoration: none;
    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);
}

.entry-content .lmi-ghost-instagram:is(:hover, :focus-visible) {
    border-color: var(--eldorado-accent);
    box-shadow: var(--eldorado-ombre);
}

.entry-content .lmi-ghost-instagram:focus-visible {
    outline: 2px solid var(--eldorado-focus);
    outline-offset: 2px;
}

.entry-content .lmi-ghost-instagram svg {
    flex: none;
    width: 28px;
    height: 28px;
}

.entry-content .lmi-ghost-instagram-texte {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.entry-content .lmi-ghost-instagram-titre {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
}

.entry-content .lmi-ghost-instagram-url {
    overflow: hidden;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--eldorado-texte-doux);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- 7. Les liens de bloc contre la regle de lien du theme -------------- */
/*
 * Le `style.css` du theme souligne et colore TOUT lien du corps d'article :
 *
 *   body:not(.home) .entry-content a:not(.simple):not(.wp-block-latest-posts__post-title)
 *
 * soit une specificite de (0,4,2). Les quatre liens ci-dessous ne sont pas
 * des liens de prose mais des BOITES CLIQUABLES : un soulignement les barre
 * de part en part, et la couleur de lien s'applique au texte du bouton.
 *
 * 🔴 MESURE DU 06/11/2026, defaut que ma premiere version avait introduit :
 * le bouton sortait en `color: rgb(30,58,138)` sur `background: rgb(30,58,138)`
 * -- **bleu sur bleu, contraste 1,00 : 1, texte invisible**. Mes regles a deux
 * classes (0,2,0) etaient simplement battues. Meme famille d'erreur que le
 * Top 3 de eldorado-partners :
 * [[eldpart-top3-fond-clair-jetons-sombres]].
 *
 * On monte a (0,5,2) en reprenant la forme du theme et en ajoutant le
 * conteneur `.kg-card`, que les quatre liens ont en commun. `:not(.simple)`
 * est la propre exception du theme : on la reprend telle quelle plutot que
 * de doubler une classe pour gonfler le compte.
 *
 * Pas de `!important` : aucune de ces regles n'affronte un attribut `style`
 * -- seule la couleur de fond du bouton CTA en demande un (section 4).
 */
body:not(.home) .entry-content .kg-card a.kg-bookmark-container:not(.simple),
body:not(.home) .entry-content .kg-card a.kg-btn:not(.simple),
body:not(.home) .entry-content .kg-card a.kg-cta-button:not(.simple),
body:not(.home) .entry-content .kg-card a.lmi-ghost-instagram:not(.simple) {
    text-decoration: none;
}

body:not(.home) .entry-content .kg-card a.kg-bookmark-container:not(.simple),
body:not(.home) .entry-content .kg-card a.lmi-ghost-instagram:not(.simple) {
    color: var(--eldorado-texte);
}

body:not(.home) .entry-content .kg-card a.kg-btn:not(.simple),
body:not(.home) .entry-content .kg-card a.kg-cta-button:not(.simple) {
    color: var(--eldorado-sur-accent);
}