/* ============================================================
   Portrait Redesign — /portraits/{detail}
   Charte : --color-publications (#1a3d28 vert forêt)
   Fichier chargé uniquement sur les pages de détail portrait.
   ============================================================ */

/* ── 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: #1a1a1a;
    line-height: 1.2;
}

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

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

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

.portrait-detail-entreprise {
    color: #6c757d;
    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: #8a9099 !important;
}

.portrait-detail-date::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    background: var(--color-publications);
    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(--color-publications);
    padding-left: 1rem;
    color: #444;
    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: #8a9099;
    font-weight: 600;
    font-style: normal;
    border-bottom: 0.5px solid #dee2e6;
    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(--color-publications-light);
    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(--color-publications);
    border-bottom-color: rgba(26, 61, 40, 0.2);
}

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

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

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

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

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

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