/* ============================================================
   Article (contenu "projet" — table EditProjet) – fiche détail
   Styles dédiés, sans impact sur les autres rubriques.
   ============================================================ */

/* Mode clair/sombre : ArticleController charge fiche-shared.css puis
   publications.css puis publication-fiche.css AVANT ce fichier, donc les
   tokens --fiche-* et --pubfiche-* sont disponibles ici. On les réutilise
   quand la valeur claire correspond exactement ; les 3 valeurs restantes,
   propres à cette page, ont leur token local ci-dessous. Valeurs claires
   strictement identiques à l'existant : aucun pixel changé en thème clair. */
:root {
    --article-chapo:         #3a3a3a;   /* texte du chapô */
    --article-encart-bg:     #f7f6f2;   /* fond de l'encart en fin d'article */
    --article-claudine-icon: #b8860b;   /* étoiles + spinner de la modale de synthèse */
    --article-teaser-fondu:  #ffffff;   /* couleur vers laquelle le texte partenaire s'estompe (fond de page) */
}
[data-bs-theme="dark"] {
    /* L'encart passe en gris 800 sur la section en gris 900 : il reste plus
       clair que son support, comme le #f7f6f2 sur blanc en thème clair. */
    --article-chapo:         var(--bs-gray-300);
    --article-encart-bg:     var(--bs-gray-800);
    /* Même remontée que les textes bruns des panneaux Claudine des fiches
       publication / emploi : le doré foncé devient le jaune d'identité. */
    --article-claudine-icon: #ffd75e;
    --article-teaser-fondu:  var(--bs-gray-900);
}

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

.article-chapo {
    font-size: 17px;
    line-height: 1.5;
    font-weight: 500;
    color: var(--article-chapo);
    margin-bottom: 20px;
}

.article-encart {
    background: var(--article-encart-bg);
    border-left: 3px solid var(--color-publications-accent, #c0392b);
    padding: 16px 20px;
    margin: 24px 0;
}

.article-encart__titre {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px;
}

.article-encart__auteur {
    font-size: 12px;
    color: var(--fiche-text-soft);
    margin-top: 10px;
}

.article-galerie-carousel {
    margin-bottom: 24px;
    border-radius: 6px;
    overflow: hidden;
}

.article-galerie-carousel .carousel-item img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    border-radius: 6px;
}

.article-galerie-carousel .carousel-indicators {
    margin-bottom: 8px;
}

/* ----------------------------------------------------------
   Extrait tronqué + dégradé — contenu provenant d'un partenaire
   tiers (EditProjet.ProjetRefExterne non NULL)
   ---------------------------------------------------------- */
.article-externe-teaser {
    position: relative;
    max-height: 960px;
    overflow: hidden;
}

.article-externe-teaser__texte {
    margin-bottom: 0;
}

.article-externe-teaser__fondu {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 140px;
    background: linear-gradient(180deg, transparent 0%, var(--article-teaser-fondu) 90%);
    pointer-events: none;
}

.article-externe-teaser__cta {
    margin-top: 16px;
    font-size: 0.8em; /* -20 % par rapport au texte de l'article */
    font-weight: 700;
}

/* ----------------------------------------------------------
   Logo du site d'origine (partenaire), en attente du visuel réel
   ---------------------------------------------------------- */
.article-source-origine__photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin: 0 auto 12px;
    border-radius: 12px;
    border: 1px solid var(--fiche-border);
}

.article-source-origine__nom {
    font-weight: 600;
    text-align: center;
    margin-bottom: 6px;
}

.article-source-origine__bio {
    font-size: 14px;
    line-height: 1.5;
}

.article-source-origine__media {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.article-source-origine__media .bi {
    margin-right: 4px;
}