/* ============================================================
   Portrait Redesign — /portraits/{detail}
   Charte : --color-publications (#1a1a2e bleu nuit — le vert forêt
   d'origine a été abandonné, cf. project_publications_design)
   Fichier chargé uniquement sur les pages de détail portrait.
   ============================================================ */

/* ── 0. MODE CLAIR / SOMBRE ──────────────────────────────────────
   Palette locale suivant la convention du site (cf. agenda.css,
   entreprises.css, fiche-shared.css) : la colonne "clair" reprend à
   l'identique les valeurs qui étaient codées en dur dans ce fichier,
   le thème clair est donc strictement inchangé ; seule la contrepartie
   [data-bs-theme="dark"] est nouvelle.
   Les accents (--color-publications) sont remplacés par les tokens de
   rôle globaux : --text-accent quand l'accent sert de texte,
   --accent-border quand il sert de trait/marqueur, --surface-highlight
   quand il sert de fond doux. Ces trois tokens valent exactement
   #1a1a2e / #eeeef4 en clair, la substitution est neutre.
   Restent volontairement identiques dans les deux thèmes les couples
   fond pâle + texte foncé posés explicitement : le badge "Portrait"
   (fond bleu nuit, texte blanc) et la chip .portrait-detail-prise-fonction
   (fond --light, texte --mid), auto-cohérents par construction. */

:root {
    --portrait-title:       var(--color-neutral-1a1a1a);
    --portrait-text:        var(--color-neutral-444);
    --portrait-org:         #6c757d;
    --portrait-meta:        #8a9099;
    --portrait-line:        var(--bs-gray-300);   /* #dee2e6 */
    --portrait-link-hover:  var(--color-publications-hover);
    --portrait-pepite-line: rgba(26, 61, 40, 0.2);
    --portrait-btn:         var(--color-publications-mid);
    --portrait-btn-hover-bg: var(--color-publications);
}
[data-bs-theme="dark"] {
    --portrait-title:       var(--bs-white);
    --portrait-text:        var(--bs-gray-300);
    --portrait-org:         var(--bs-gray-400);
    --portrait-meta:        var(--bs-gray-400);
    --portrait-line:        var(--bs-gray-700);
    --portrait-link-hover:  #c9c9d8;
    --portrait-pepite-line: rgba(255, 255, 255, 0.18);
    --portrait-btn:         var(--text-accent-mid);
    /* Le survol du bouton retour se remplissait du bleu nuit lui-même :
       sur une page déjà sombre il disparaissait dans le fond. */
    --portrait-btn-hover-bg: var(--bs-gray-700);
}

/* ── 1. PHOTO ────────────────────────────────────────────────── */

.portrait-detail-photo {
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    object-fit: cover;
    width: 100%;
}

/* ── 2. BADGE "Portrait" au-dessus du nom ────────────────────── */

h1.h2.mb-1::before {
    content: "Portrait";
    display: block;
    background: var(--color-publications);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    margin-bottom: 10px;
    width: fit-content;
    line-height: 1.6;
}

h1.h2.mb-1 {
    font-size: 1.625rem; /* ~26px */
    font-weight: 700;
    color: var(--portrait-title);
    line-height: 1.2;
}

/* ── 3. TITRE DE POSTE (fonction) — vert, 15px, medium ───────── */

.portrait-detail-fonction {
    color: var(--text-accent) !important;
    font-size: 0.9375rem !important; /* 15px */
    font-weight: 500 !important;
}

/* ── 4. ORGANISME — gris secondaire, 14px ────────────────────── */

.portrait-detail-entreprise {
    color: var(--portrait-org);
    font-size: 0.875rem; /* 14px */
}

/* ── 5. DATE DE PUBLICATION — métadonnée discrète ────────────── */

.portrait-detail-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem !important; /* 13px */
    color: var(--portrait-meta) !important;
}

.portrait-detail-date::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    background: var(--accent-border);
    border-radius: 2px;
    flex-shrink: 0;
}

/* ── 6. PRISE DE FONCTION — chip colorée ─────────────────────── */

.portrait-detail-prise-fonction {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--color-publications-mid) !important;
    background: var(--color-publications-light);
    padding: 5px 12px;
    border-radius: 6px;
    border-left: 3px solid var(--color-publications);
    margin-top: 0.75rem !important;
}

.portrait-detail-prise-fonction strong {
    color: var(--color-publications);
    font-weight: 600;
}

/* ── 7. CHAPO / ACCROCHE — bordure gauche verte ──────────────── */

.portrait-detail-chapo {
    border-left: 3px solid var(--accent-border);
    padding-left: 1rem;
    color: var(--portrait-text);
    margin-top: 1rem;
    font-size: 0.9375rem;
    line-height: 1.65;
}

/* ── 8. SECTIONS — espacement ────────────────────────────────── */

.portrait-detail-section {
    margin-bottom: 1.5rem !important;
}

/* ── 9. LABELS DE SECTION — étiquette uppercase gris muted ───── */

.portrait-detail-section p > strong:first-child {
    display: block;
    font-size: 0.6875rem; /* 11px */
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--portrait-meta);
    font-weight: 600;
    font-style: normal;
    border-bottom: 0.5px solid var(--portrait-line);
    padding-bottom: 0.25rem;
    margin-bottom: 0.4rem;
}

/* ── 10. RUBRIQUE "PÉPITE" — section 7 (Sa feuille de route) : fond coloré ── */

.portrait-detail-sections .portrait-section--pepite {
    background: var(--surface-highlight);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem !important;
}

/* Label de section en vert pour la pépite */
.portrait-detail-sections .portrait-section--pepite p > strong:first-child {
    color: var(--text-accent);
    border-bottom-color: var(--portrait-pepite-line);
}

/* ── 11. LIENS — vert à la place de l'orange/rouge éventuel ──── */

.portrait-detail-sections a,
.portrait-detail-corps a {
    color: var(--text-accent);
}

.portrait-detail-sections a:hover,
.portrait-detail-corps a:hover {
    color: var(--portrait-link-hover);
}

/* ── 12. BOUTON RETOUR — vert ghost ──────────────────────────── */

.portrait-detail-corps + div .btn-outline-secondary,
.portrait-detail-sections + div .btn-outline-secondary {
    border-color: var(--portrait-btn);
    color: var(--portrait-btn);
}

.portrait-detail-corps + div .btn-outline-secondary:hover,
.portrait-detail-sections + div .btn-outline-secondary:hover {
    background: var(--portrait-btn-hover-bg);
    border-color: var(--portrait-btn-hover-bg);
    color: #fff;
}