/* ==========================================================================
   Haeros — Livres à jouer
   Feuille de style unique : éditeur, lecteur, page de regroupement.
   ========================================================================== */

.hlj-wrap {
    --hlj-or:        #DCA54A;
    --hlj-or-fonce:  #c89539;
    --hlj-noir:      #222222;
    --hlj-creme-cl:  #FAF5E5;
    --hlj-creme:     #F0E6C5;
    --hlj-bordure:   #D3C4A7;
    --hlj-blanc:     #FFFFFF;
    --hlj-vert:      #639922;
    --hlj-orange:    #D85A30;
    --hlj-gris:      #5F5E5A;

    max-width: 860px;
    margin: 0 auto;
    padding: 16px 0;
    font-family: inherit;
    color: var(--hlj-noir);
    box-sizing: border-box;
}
.hlj-wrap *, .hlj-wrap *::before, .hlj-wrap *::after { box-sizing: inherit; }

/* Geometrie ALIGNEE sur les deux autres listes (service presse et compagnons
   de route) : meme max-width, meme centrage, meme absence de padding
   horizontal. Les trois se suivent sur les profils, un ecart se voit tout de
   suite. Ne modifier qu'en modifiant partout. */
.hlj-liste-page { max-width: 1200px; }

/* L'éditeur ne s'impose plus de largeur : ce sont ses deux étapes qui décident.
   Étape 1 = colonne cadrée, étape 2 = pleine largeur (voir plus bas). */
.hlj-wrap.hlj-editeur { max-width: none; padding-left: 0; padding-right: 0; }

/* Colonne de lecture : intro, « Mes histoires », prévisualisation. */
.hlj-centre { max-width: 900px; margin: 0 auto; }

/* ── Titres et intros ──────────────────────────────────────────────────── */
.hlj-h2 {
    font-family: Georgia, "Playfair Display", serif;
    font-size: 22px;
    font-weight: 500;
    margin: 32px 0 8px;
    color: var(--hlj-noir);
}
.hlj-lead { font-size: 14px; color: var(--hlj-gris); line-height: 1.6; margin: 0 0 18px; }
.hlj-hint { font-size: 11px; color: var(--hlj-gris); margin: 4px 0 0; line-height: 1.5; }

/* ── Alertes ───────────────────────────────────────────────────────────── */
.hlj-alert {
    padding: 13px 17px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 20px;
    border: 1px solid transparent;
}
.hlj-alert--tight  { font-size: 13px; padding: 10px 14px; margin-bottom: 16px; }
.hlj-alert--ok     { background: rgba(99,153,34,.10); color: #4d7a17; border-color: var(--hlj-vert); }
.hlj-alert--ko     { background: rgba(216,90,48,.10); color: #b4451f; border-color: var(--hlj-orange); }
.hlj-alert--info   { background: var(--hlj-creme-cl); color: var(--hlj-gris); border-color: var(--hlj-bordure); }
.hlj-alert a       { color: inherit; text-decoration: underline; }

/* ── Boutons ───────────────────────────────────────────────────────────── */
.hlj-btn {
    display: inline-block;
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .2s ease, transform .15s ease, background .2s ease;
}
.hlj-btn--or {
    background: var(--hlj-or);
    color: var(--hlj-noir);
}
.hlj-btn--or:hover { opacity: .9; transform: translateY(-1px); color: var(--hlj-noir); }
.hlj-btn--ghost {
    background: var(--hlj-blanc);
    color: var(--hlj-noir);
    border-color: var(--hlj-bordure);
}
.hlj-btn--ghost:hover { border-color: var(--hlj-or); background: var(--hlj-creme-cl); }
.hlj-btn--full { display: block; width: 100%; margin-top: 14px; }
.hlj-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.hlj-lien {
    font-size: 13px;
    color: var(--hlj-gris);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.hlj-lien--btn {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
    color: var(--hlj-gris);
    text-decoration: underline;
}
.hlj-lien--btn:hover:not(:disabled) { color: var(--hlj-or-fonce); }
.hlj-lien--btn:disabled { opacity: .4; cursor: not-allowed; }
.hlj-lien--danger { color: var(--hlj-orange); }
.hlj-lien.is-current { text-decoration: none; font-style: italic; }

.hlj-inline-form { display: inline; margin: 0; }

/* ==========================================================================
   ÉDITEUR
   ========================================================================== */
/* Le formulaire lui-même n'est plus un cadre : il enchaîne deux étapes. */
.hlj-form-etapes { margin: 0; }

.hlj-etape-num {
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--hlj-or-fonce);
    margin: 0 0 6px;
    font-weight: 700;
}
.hlj-etape-titre {
    font-family: Georgia, "Playfair Display", serif;
    font-size: 20px;
    font-weight: 500;
    margin: 0 0 6px;
}

/* ── Étape 1 : le cadre blanc, en colonne ──────────────────────────────── */
.hlj-etape--carte {
    max-width: 900px;
    margin: 0 auto;
    background: var(--hlj-blanc);
    border: 1px solid var(--hlj-bordure);
    border-radius: 12px;
    padding: 26px 32px 8px;
}

/* ── Étape 2 : pleine largeur, hors du cadre ───────────────────────────── */
.hlj-etape--large {
    margin-top: 32px;
    padding: 26px 0 30px;
    background: rgba(240, 230, 197, .34);
    border-top: 1px solid var(--hlj-bordure);
    border-bottom: 1px solid var(--hlj-bordure);
}
/* Sortie du conteneur du thème. Les 16 px retirés laissent la place à la
   barre de défilement verticale : sans eux, 100vw provoque un scroll
   horizontal parasite sur Windows. */
.hlj-editeur--pleine .hlj-etape--large {
    width: calc(100vw - 16px);
    margin-left: calc(50% - 50vw + 8px);
    padding-left: clamp(14px, 3.5vw, 64px);
    padding-right: clamp(14px, 3.5vw, 64px);
}
/* Repli si la sortie de cadre se bat avec la mise en page du thème :
   [haeros_creer_histoire largeur="normale"] */
.hlj-editeur--normale .hlj-etape--large {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    border-radius: 12px;
}

.hlj-etape-entete { margin-bottom: 20px; }
.hlj-etape-pied { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.hlj-etape-pied .hlj-hint { margin: 0; }

/* ── Actions finales : hors du cadre, en colonne ───────────────────────── */
.hlj-barre-actions { max-width: 900px; margin: 30px auto 0; }
.hlj-honeypot { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

.hlj-section { border: none; padding: 0; margin: 0 0 30px; }
.hlj-section legend {
    font-family: Georgia, "Playfair Display", serif;
    font-size: 17px;
    font-weight: 500;
    padding: 0;
    margin-bottom: 14px;
}
.hlj-section:last-of-type { margin-bottom: 8px; }

.hlj-field { margin-bottom: 16px; }
.hlj-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 4px;
}
.hlj-req { color: var(--hlj-orange); }

.hlj-wrap input[type="text"],
.hlj-wrap input[type="url"],
.hlj-wrap textarea,
.hlj-wrap select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--hlj-bordure);
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
    color: var(--hlj-noir);
    background: var(--hlj-creme-cl);
}
.hlj-wrap textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
.hlj-wrap input:focus, .hlj-wrap textarea:focus, .hlj-wrap select:focus {
    outline: none;
    border-color: var(--hlj-or);
    background: var(--hlj-blanc);
}
.hlj-wrap input[type="file"] {
    width: 100%;
    padding: 9px;
    border: 1px dashed var(--hlj-bordure);
    border-radius: 6px;
    background: var(--hlj-creme-cl);
    font-size: 13px;
    cursor: pointer;
}

.hlj-check-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--hlj-bordure);
    border-radius: 50px;
    background: var(--hlj-creme-cl);
    font-size: 13px;
    font-weight: 400 !important;
    cursor: pointer;
    margin: 0 !important;
}
.hlj-check-item input { accent-color: var(--hlj-or); margin: 0; }

.hlj-cover-current { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 10px; }
.hlj-cover-current img {
    width: 90px; height: 120px; object-fit: cover;
    border-radius: 6px; border: 1px solid var(--hlj-bordure);
}

/* ── Bloc scène ────────────────────────────────────────────────────────── */
.hlj-scene {
    border: 1px solid var(--hlj-bordure);
    border-left: 3px solid var(--hlj-or);
    border-radius: 10px;
    background: var(--hlj-blanc);
    padding: 15px 20px 12px;
    margin-bottom: 14px;
}
.hlj-scene-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.hlj-scene-num {
    font-family: Georgia, "Playfair Display", serif;
    font-size: 15px;
    font-weight: 600;
}
.hlj-scene-tag {
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: var(--hlj-or);
    color: var(--hlj-noir);
    padding: 2px 8px;
    border-radius: 50px;
}
.hlj-scene-tag--bonne { background: var(--hlj-vert); color: var(--hlj-blanc); }
.hlj-scene-tools { margin-left: auto; display: flex; gap: 6px; }

/* Désignation de la bonne fin, sous les choix */
.hlj-bonne-fin {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--hlj-bordure);
}
.hlj-bonne-fin .hlj-hint { margin: 0; flex: 1 1 260px; }
.hlj-bonne-fin input:checked + span { font-weight: 600; color: var(--hlj-vert); }
.hlj-mini-btn {
    background: var(--hlj-blanc);
    border: 1px solid var(--hlj-bordure);
    border-radius: 6px;
    padding: 3px 9px;
    font-family: inherit;
    font-size: 12px;
    color: var(--hlj-gris);
    cursor: pointer;
    line-height: 1.6;
}
.hlj-mini-btn:hover:not(:disabled) { border-color: var(--hlj-or); color: var(--hlj-noir); }
.hlj-mini-btn:disabled { opacity: .35; cursor: not-allowed; }
.hlj-mini-btn--danger:hover:not(:disabled) { border-color: var(--hlj-orange); color: var(--hlj-orange); }

.hlj-scene .hlj-field label { font-size: 12px; color: var(--hlj-gris); }

/* En pleine largeur : le texte est plafonné à une longueur de ligne lisible,
   et les trois choix se rangent côte à côte sous la scène. Compact — on voit
   plusieurs scènes d'un coup d'œil — et la largeur sert à quelque chose. */
@media (min-width: 1100px) {
    .hlj-etape--large .hlj-scene {
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
    }
    .hlj-etape--large .hlj-scene-ecriture { max-width: 980px; }

    .hlj-etape--large .hlj-choix-editeur {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px 20px;
        align-items: start;
    }
    .hlj-etape--large .hlj-choix-legend,
    .hlj-etape--large .hlj-bonne-fin,
    .hlj-etape--large .hlj-choix-editeur > .hlj-hint { grid-column: 1 / -1; }
    .hlj-etape--large .hlj-choix-row {
        grid-template-columns: 1fr;
        gap: 6px;
        margin-bottom: 4px;
    }
}

/* Zone d'écriture : compacte au repos pour garder une vue d'ensemble des
   scènes, largement dépliée dès qu'on clique dedans pour écrire. */
.hlj-scene textarea[data-hlj="texte"] {
    min-height: 104px;
    padding: 12px 14px;
    font-size: 15px;
    line-height: 1.7;
    transition: min-height .22s ease;
}
.hlj-scene textarea[data-hlj="texte"]:focus { min-height: 360px; }
#hlj_intro { min-height: 84px; }

.hlj-choix-editeur {
    border-top: 1px dashed var(--hlj-bordure);
    padding-top: 12px;
    margin-top: 4px;
}
.hlj-choix-legend {
    font-size: 12px;
    font-weight: 600;
    color: var(--hlj-gris);
    margin: 0 0 8px;
}
.hlj-choix-row {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 10px;
    margin-bottom: 8px;
}
/* Destination pointant sur une scène supprimée : signalée, jamais effacée en douce. */
.hlj-choix-row select.is-perdue {
    border-color: var(--hlj-orange);
    background: rgba(216, 90, 48, .07);
    color: #b4451f;
}

/* ── Plan de l'histoire (arborescence générée à la demande) ────────────── */
.hlj-plan {
    margin-top: 22px;
    padding: 22px 24px;
    background: var(--hlj-blanc);
    border: 1px solid var(--hlj-bordure);
    border-left: 3px solid var(--hlj-noir);
    border-radius: 10px;
    overflow-x: auto;
}
.hlj-plan-h {
    font-family: Georgia, "Playfair Display", serif;
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 10px;
}
.hlj-plan-h--alerte { color: var(--hlj-orange); margin-top: 26px; }

.hlj-plan-arbre, .hlj-plan-arbre ul { list-style: none; margin: 0; padding: 0; }
.hlj-plan-arbre ul {
    padding-left: 22px;
    margin-left: 10px;
    border-left: 1px dashed var(--hlj-bordure);
}
.hlj-plan-arbre li { margin: 7px 0; }

.hlj-plan-choix {
    display: inline-block;
    font-size: 12px;
    font-style: italic;
    color: var(--hlj-gris);
    margin-right: 8px;
}
.hlj-plan-noeud {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 5px 12px 5px 6px;
    background: var(--hlj-creme-cl);
    border: 1px solid var(--hlj-bordure);
    border-radius: 50px;
    font-family: inherit;
    font-size: 13px;
    color: var(--hlj-noir);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.hlj-plan-noeud:hover { border-color: var(--hlj-or); background: var(--hlj-blanc); }
.hlj-plan-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    flex: 0 0 auto;
    background: var(--hlj-or);
    color: var(--hlj-noir);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
}
.hlj-plan-titre { overflow-wrap: anywhere; }
.hlj-plan-note { font-size: 11px; color: var(--hlj-gris); font-style: italic; }

.hlj-plan-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: 50px;
    font-size: 10px;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.hlj-plan-badge--fin    { background: var(--hlj-creme); color: var(--hlj-gris); }
.hlj-plan-badge--boucle { background: rgba(220,165,74,.22); color: var(--hlj-or-fonce); }
.hlj-plan-badge--bonne  { background: var(--hlj-vert); color: var(--hlj-blanc); }
.hlj-plan-etoile { color: var(--hlj-vert); font-size: 13px; }

.hlj-plan-conseil {
    margin: 18px 0 0;
    padding: 9px 13px;
    background: var(--hlj-creme-cl);
    border-left: 3px solid var(--hlj-bordure);
    border-radius: 0 6px 6px 0;
}
.hlj-plan-conseil--alerte { border-left-color: var(--hlj-orange); color: #b4451f; }

.hlj-plan-arbre--orphelines .hlj-plan-noeud {
    border-color: var(--hlj-orange);
    background: rgba(216,90,48,.07);
}
.hlj-plan-arbre--orphelines .hlj-plan-num { background: var(--hlj-orange); color: var(--hlj-blanc); }

.hlj-plan-resume {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: 24px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--hlj-bordure);
}
.hlj-plan-resume span {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 50px;
    background: var(--hlj-creme-cl);
    border: 1px solid var(--hlj-bordure);
    color: var(--hlj-gris);
}
.hlj-plan-resume span.is-alerte {
    background: rgba(216,90,48,.09);
    border-color: var(--hlj-orange);
    color: #b4451f;
}
.hlj-plan-resume span.is-bonne {
    background: rgba(99,153,34,.10);
    border-color: var(--hlj-vert);
    color: #4d7a17;
}

/* Scène visée depuis le plan : signalée brièvement */
.hlj-scene.is-cible {
    border-color: var(--hlj-or);
    box-shadow: 0 0 0 3px rgba(220,165,74,.35);
}

.hlj-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.hlj-actions .hlj-btn { flex: 1 1 220px; }

/* ── Mes histoires ─────────────────────────────────────────────────────── */
.hlj-mes-histoires { margin-bottom: 34px; }
.hlj-liste { list-style: none; margin: 0; padding: 0; }
.hlj-liste-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    padding: 12px 14px;
    border: 1px solid var(--hlj-bordure);
    border-radius: 8px;
    background: var(--hlj-blanc);
    margin-bottom: 8px;
}
.hlj-liste-item.is-editing { border-color: var(--hlj-or); background: var(--hlj-creme-cl); }
.hlj-liste-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hlj-liste-titre { font-weight: 600; font-size: 14px; }
.hlj-liste-meta { font-size: 12px; color: var(--hlj-gris); }
.hlj-liste-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hlj-badge {
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 50px;
}
.hlj-badge--ok    { background: rgba(99,153,34,.15); color: #4d7a17; }
.hlj-badge--draft { background: var(--hlj-creme); color: var(--hlj-gris); }

.hlj-preview-zone { margin-top: 44px; padding-top: 8px; border-top: 1px solid var(--hlj-bordure); }
.hlj-preview-zone .hlj-wrap { padding: 0; max-width: none; }
/* Même dans l'éditeur élargi, on prévisualise à la largeur de lecture réelle. */
.hlj-preview-zone .hlj-player { max-width: 860px; margin: 0 auto; }

/* ==========================================================================
   LECTEUR
   ========================================================================== */
.hlj-player {
    background: var(--hlj-blanc);
    border: 1px solid var(--hlj-bordure);
    border-radius: 12px;
    padding: 26px 26px 20px;
}
.hlj-player-head {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding-bottom: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--hlj-bordure);
}
.hlj-player-cover {
    width: 96px;
    height: 128px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--hlj-bordure);
    flex: 0 0 auto;
}
.hlj-player-titre {
    font-family: Georgia, "Playfair Display", serif;
    font-size: 25px;
    font-weight: 500;
    margin: 0 0 4px;
    line-height: 1.25;
}
.hlj-player-auteur { font-size: 13px; color: var(--hlj-gris); margin: 0 0 8px; }
.hlj-player-intro { font-size: 14px; color: var(--hlj-gris); line-height: 1.6; margin: 0; font-style: italic; }

.hlj-scene-titre {
    font-family: Georgia, "Playfair Display", serif;
    font-size: 19px;
    font-weight: 500;
    margin: 0 0 12px;
}
.hlj-texte {
    font-size: 16px;
    line-height: 1.75;
    margin: 0 0 15px;
}
.hlj-scene-jouee { animation: hlj-fade .35s ease; }
@keyframes hlj-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.hlj-choix { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.hlj-choix-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 14px 18px;
    background: var(--hlj-creme-cl);
    border: 1px solid var(--hlj-bordure);
    border-left: 3px solid var(--hlj-or);
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
    color: var(--hlj-noir);
    cursor: pointer;
    transition: background .18s ease, transform .12s ease, border-color .18s ease;
}
.hlj-choix-btn:hover {
    background: var(--hlj-creme);
    border-color: var(--hlj-or);
    transform: translateX(3px);
}

.hlj-fin {
    margin-top: 26px;
    padding: 22px;
    background: var(--hlj-creme-cl);
    border: 1px solid var(--hlj-bordure);
    border-radius: 10px;
    text-align: center;
}
.hlj-fin--bonne {
    background: rgba(99,153,34,.09);
    border-color: var(--hlj-vert);
}
.hlj-fin-titre {
    font-family: Georgia, "Playfair Display", serif;
    font-size: 18px;
    margin: 0 0 8px;
    letter-spacing: .02em;
}
.hlj-fin--bonne .hlj-fin-titre { color: #4d7a17; }
.hlj-fin-score {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 4px;
}
.hlj-fin-detail { font-size: 13px; color: var(--hlj-gris); margin: 0 0 16px; }
.hlj-fin-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }

.hlj-player-foot {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 24px;
    padding-top: 14px;
    border-top: 1px solid var(--hlj-bordure);
    flex-wrap: wrap;
}
.hlj-player-progression { margin-left: auto; font-size: 12px; color: var(--hlj-gris); }
.hlj-noscript-scene { border-bottom: 1px dashed var(--hlj-bordure); padding-bottom: 12px; margin-bottom: 12px; }

/* ==========================================================================
   PAGE « LIVRES À JOUER »
   ========================================================================== */
.hlj-cta-bar {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 18px 22px;
    background: var(--hlj-creme-cl);
    border: 1px solid var(--hlj-bordure);
    border-radius: 10px;
    margin-bottom: 28px;
}
.hlj-cta-bar .hlj-lead { margin: 0; flex: 1 1 320px; }

.hlj-grille {
    display: grid;
    /* Piste FIGEE, pas 1fr : avec 1fr les cartes s'etirent pour remplir le
       conteneur, et la meme grille donne des tailles differentes selon la
       colonne Elementor qui l'accueille. Meme valeur que la grille du Service
       presse (haeros-extensions/shortcodes/sp-livres.php) pour que les deux
       listes s'accordent quand elles se suivent sur un profil.
       min(250px, 100%) evite tout debordement sur un conteneur etroit. */
    grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 250px));
    justify-content: start;
    gap: 22px;
}
.hlj-carte {
    display: flex;
    flex-direction: column;
    background: var(--hlj-blanc);
    border: 1px solid var(--hlj-bordure);
    border-radius: 12px;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}
.hlj-carte:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(34,34,34,.09); }
.hlj-carte-lien { display: block; }
.hlj-carte-cover { aspect-ratio: 3 / 4; background: var(--hlj-creme); overflow: hidden; }
.hlj-carte-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hlj-carte-cover--typo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    background: linear-gradient(150deg, var(--hlj-creme) 0%, var(--hlj-or) 130%);
}
.hlj-carte-cover--typo span {
    font-family: Georgia, "Playfair Display", serif;
    font-size: 19px;
    line-height: 1.3;
    color: var(--hlj-noir);
}
.hlj-carte-corps { padding: 16px 16px 18px; display: flex; flex-direction: column; flex: 1; }
.hlj-carte-titre {
    font-family: Georgia, "Playfair Display", serif;
    font-size: 17px;
    font-weight: 500;
    margin: 0 0 3px;
    line-height: 1.3;
}
.hlj-carte-titre a { color: var(--hlj-noir); text-decoration: none; }
.hlj-carte-titre a:hover { color: var(--hlj-or-fonce); }
.hlj-carte-auteur { font-size: 12px; color: var(--hlj-gris); margin: 0 0 10px; }
.hlj-carte-intro { font-size: 13px; line-height: 1.6; color: var(--hlj-gris); margin: 0 0 12px; }
.hlj-carte-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--hlj-gris);
    margin: auto 0 0;
    padding-top: 8px;
}

.hlj-pagination { display: flex; gap: 8px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
.hlj-page {
    min-width: 36px;
    padding: 7px 10px;
    text-align: center;
    border: 1px solid var(--hlj-bordure);
    border-radius: 6px;
    font-size: 13px;
    color: var(--hlj-gris);
    text-decoration: none;
}
.hlj-page:hover { border-color: var(--hlj-or); color: var(--hlj-noir); }
.hlj-page.is-current { background: var(--hlj-or); color: var(--hlj-noir); border-color: var(--hlj-or); font-weight: 600; }

/* ── Mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .hlj-choix-row { grid-template-columns: 1fr; }
    .hlj-player { padding: 20px 18px 16px; }
    .hlj-player-head { gap: 14px; }
    .hlj-player-cover { width: 72px; height: 96px; }
    .hlj-player-titre { font-size: 21px; }
    .hlj-liste-actions { margin-left: 0; width: 100%; }
    .hlj-actions .hlj-btn { flex: 1 1 100%; }
}