/* ============================================================
   Publication – fiche détail
   Styles dédiés, sans impact sur les autres rubriques.
   ============================================================ */

/* ── MODE CLAIR / SOMBRE ─────────────────────────────────────────
   Ce fichier est chargé APRÈS fiche-shared.css (DocumentsController
   et ArticleController) : il réutilise donc directement les tokens
   --fiche-* pour tout ce qui a un équivalent exact, et ne définit
   localement que les valeurs sans correspondance.
   Le thème clair est strictement inchangé : chaque valeur "clair"
   ci-dessous reprend celle qui était codée en dur.

   Bloc Claudine : la couleur d'identité (#ffd75e) est conservée dans
   les deux thèmes — bordure, filet de titre, et surtout les boutons
   .btn-claudine-analyse (fond jaune + texte brun), qui sont un
   contrôle global de main.css partagé avec les fiches emploi/marché/
   agenda où ils reposent déjà sur une surface sombre validée.
   Ce qui change en sombre, c'est le SUPPORT : le panneau crème
   #fffaed devenait un rectangle blanc au milieu d'une page sombre.
   Il suit désormais la surface des autres .fiche-section, et les
   textes bruns du panneau (titre, intro, chips) passent en jaune
   clair pour rester lisibles dessus. */

:root {
    --pubfiche-tag-hover-bg:   #ebe9e2;
    /* Les quatre tokens suivants ne servent qu'aux styles inline du bloc
       d'achat et du bloc Claudine de publication.php / article.php, posés
       sur la surface .fiche-cta / .fiche-section qui, elle, suit le thème. */
    --pubfiche-note:           #1a1a1a;   /* prix, libellés forts */
    --pubfiche-soft:           #888;      /* prix barrés, CTA désactivés */
    --pubfiche-green:          #2a7a2a;   /* "OFFERT", "Téléchargement libre" */
    --pubfiche-warn:           #c05a00;   /* "Format papier épuisé" */
    --pubfiche-sep:            #ebebeb;   /* filets entre formats d'achat */
    --claudine-panel-bg:       #fffaed;
    --claudine-panel-title:    #7a5200;
    --claudine-panel-intro:    #6b5000;
    --claudine-field-bg:       var(--bs-white);
    --claudine-field-text:     #1a1a18;
    --claudine-chip-hover-bg:  #fff8d6;
}
[data-bs-theme="dark"] {
    --pubfiche-tag-hover-bg:   var(--bs-gray-700);
    --pubfiche-note:           var(--bs-white);
    --pubfiche-soft:           var(--bs-gray-400);
    --pubfiche-green:          #63c463;
    --pubfiche-warn:           #f0954a;
    --pubfiche-sep:            var(--bs-gray-700);
    --claudine-panel-bg:       var(--fiche-surface);
    --claudine-panel-title:    #ffd75e;
    --claudine-panel-intro:    #e8c86a;
    --claudine-field-bg:       var(--bs-gray-800);
    --claudine-field-text:     var(--bs-white);
    --claudine-chip-hover-bg:  var(--bs-gray-700);
}

/* ----------------------------------------------------------
   Proportions colonnes : 2/3 principale + 1/3 latérale
   ---------------------------------------------------------- */
.fiche-layout--publication .fiche-col-main {
    flex: 2;
}
.fiche-layout--publication .fiche-col-side {
    width: auto;
    flex: 1;
    min-width: 240px;
    max-width: 380px;
}
@media (max-width: 767px) {
    .fiche-layout--publication .fiche-col-side {
        min-width: 0;
        max-width: 100%;
    }
}

/* ----------------------------------------------------------
   Descriptif +10 % (13px → 14.3px)
   ---------------------------------------------------------- */
.fiche-layout--publication .fiche-descriptif {
    font-size: 14.3px;
}

/* ----------------------------------------------------------
   Bulles cliquables (entreprises citées, thèmes)
   ---------------------------------------------------------- */
.fiche-tags-bubbles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.fiche-tag-link {
    display: inline-flex;
    align-items: center;
    padding: 5px 13px;
    border-radius: 20px;
    background: var(--fiche-surface-soft);
    border: 1px solid var(--fiche-border-soft);
    color: var(--fiche-text);
    font-size: 12px;
    text-decoration: none;
    line-height: 1.3;
    transition: background 0.15s, border-color 0.15s;
}
.fiche-tag-link:hover {
    background: var(--pubfiche-tag-hover-bg);
    border-color: var(--fiche-border-hover);
    color: var(--fiche-text);
    text-decoration: none;
}
.fiche-tag-link--theme {
    background: #eef2ff;
    border-color: #c7d2f5;
    color: #1e3a8a;
}
.fiche-tag-link--theme:hover {
    background: #dce3ff;
    border-color: #a5b4e8;
    color: #1e3a8a;
}
.fiche-tag-link--domaine {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #14532d;
}
.fiche-tag-link--domaine:hover {
    background: #dcfce7;
    border-color: #86efac;
    color: #14532d;
}
.fiche-tag-link.is-active {
    background: #1a1a18;
    border-color: #1a1a18;
    color: #fff;
}
[data-bs-theme="dark"] .fiche-tag-link.is-active {
    background: var(--bs-gray-600);
    border-color: var(--bs-gray-600);
}
.fiche-tag-link--theme.is-active {
    background: #1e3a8a;
    border-color: #1e3a8a;
    color: #fff;
}
.fiche-tag-link--domaine.is-active {
    background: #14532d;
    border-color: #14532d;
    color: #fff;
}

/* ----------------------------------------------------------
   Bloc Claudine sidebar (POC)
   ---------------------------------------------------------- */
.pub-fiche-claudine {
    background: var(--claudine-panel-bg);
    border-color: #ffd75e;
}
.pub-fiche-claudine .fiche-section__title {
    color: var(--claudine-panel-title);
    border-bottom-color: #ffd75e;
}
.pub-fiche-claudine__intro {
    font-size: 12px;
    color: var(--claudine-panel-intro);
    margin: 0 0 10px;
    line-height: 1.55;
}
.pub-fiche-claudine__form {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.pub-fiche-claudine__input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #ffd75e;
    border-radius: 8px;
    font-size: 12px;
    color: var(--claudine-field-text);
    background: var(--claudine-field-bg);
    resize: none;
    line-height: 1.5;
    margin-bottom: 8px;
    font-family: inherit;
}
.pub-fiche-claudine__input:focus {
    outline: none;
    border-color: #ffc93a;
    box-shadow: 0 0 0 3px rgba(255, 215, 94, 0.25);
}
.pub-fiche-claudine__input::placeholder {
    color: #b89a40;
    font-style: italic;
}
.pub-fiche-claudine__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 9px 14px;
    background: #ffd75e;
    color: #7a5200;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    box-sizing: border-box;
    margin-bottom: 10px;
    transition: background 0.15s;
}
.pub-fiche-claudine__btn:hover {
    background: #ffc93a;
}
.pub-fiche-claudine__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pub-fiche-claudine__chip {
    font-size: 11px;
    padding: 3px 9px;
    background: var(--claudine-field-bg);
    border: 1px solid #ffd75e;
    border-radius: 12px;
    color: var(--claudine-panel-title);
    cursor: pointer;
    line-height: 1.4;
    transition: background 0.15s;
}
.pub-fiche-claudine__chip:hover {
    background: var(--claudine-chip-hover-bg);
}

/* ----------------------------------------------------------
   Bannière couverture pleine largeur
   ---------------------------------------------------------- */
.pub-fiche-banner {
    width: 100%;
    height: 380px;
    border-radius: 12px;
    overflow: hidden;
    background: #1a1a2e;
    margin-bottom: 16px;
    position: relative;
}

.pub-fiche-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}


/* ----------------------------------------------------------
   Couverture dans l'en-tête — uniquement quand il n'y a pas
   de grande image (remplace la bannière pleine largeur)
   ---------------------------------------------------------- */
.fiche-header__cover {
    flex-shrink: 0;
}
.fiche-header__cover-img {
    width: 90px;
    height: 120px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--fiche-border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    background: var(--fiche-surface-soft);
    display: block;
}
.fiche-header__cover-fallback {
    width: 90px;
    height: 120px;
    border-radius: 6px;
    background: #1a1a2e;
    border: 1px solid var(--fiche-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.3);
    font-size: 28px;
}

/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    .pub-fiche-banner {
        height: 220px;
        border-radius: 8px;
    }
    .fiche-header__cover-img,
    .fiche-header__cover-fallback {
        width: 70px;
        height: 94px;
    }
}

/* ----------------------------------------------------------
   Bouton bibliothèque — état "déjà ajouté"
   ---------------------------------------------------------- */
.fiche-tool-btn--active {
    color: var(--color-accent, #c0392b);
    font-weight: 600;
}
.fiche-tool-btn--active .bi {
    color: var(--color-accent, #c0392b);
}

/* ----------------------------------------------------------
   Bibliothèque — modale liste
   ---------------------------------------------------------- */
#bib-list .bib-list-item:last-child {
    border-bottom: none !important;
}

/* ----------------------------------------------------------
   Bibliothèque — page détail (drag-and-drop)
   ---------------------------------------------------------- */
.bib-doc-list {
    min-height: 40px;
}
.bib-doc-item {
    cursor: default;
    user-select: none;
    transition: opacity 0.15s, box-shadow 0.15s;
}
.bib-doc-item.bib-dragging {
    opacity: 0.45;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
.bib-drag-handle {
    cursor: grab;
    padding: 4px 2px;
    line-height: 1;
}
.bib-drag-handle:active {
    cursor: grabbing;
}