/* ==========================================================================
   Contenu enrichi : tweets et images dans le corps des articles, de l'agenda
   et des pages — voir App\Support\EnrichissementContenu (HTML produit) et
   public/js/components/contenu-enrichi.js (intégration X, agrandissement).
   ========================================================================== */

/* ── Tweets ─────────────────────────────────────────────────────────────── */
.tweet-integre {
    margin: 2rem auto;
    max-width: 550px;
}

/* Carte affichée avant (ou à défaut de) l'intégration officielle de X. */
.tweet-carte {
    margin: 0;
    padding: 1.1rem 1.25rem 1rem;
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
    font-size: .95rem;
    line-height: 1.55;
    color: #0f1419;
    text-align: left;
    quotes: none;
    font-style: normal;
}
.tweet-carte::before,
.tweet-carte::after { content: none; }

.tweet-carte__entete {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: .75rem;
}
.tweet-carte__avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1e5f8e, #0e2a47);
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
}
.tweet-carte__identite {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}
.tweet-carte__identite strong {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tweet-carte__identite span { color: #536471; font-size: .88rem; }
.tweet-carte__logo {
    margin-left: auto;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #0f1419;
    color: #fff;
    font: 700 .8rem/1 system-ui, sans-serif;
}
.tweet-carte__texte {
    margin: 0 0 .85rem;
    white-space: pre-line;
    text-align: left !important;
}
.tweet-carte__texte a { color: #1d9bf0; text-decoration: none; }
.tweet-carte__texte a:hover { text-decoration: underline; }
.tweet-carte__pied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding-top: .75rem;
    border-top: 1px solid #eff3f4;
    color: #536471;
    font-size: .85rem;
}
.tweet-carte__pied a {
    margin-left: auto;
    padding: .35rem .85rem;
    border-radius: 999px;
    background: #0f1419;
    color: #fff !important;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s;
}
.tweet-carte__pied a:hover { background: #272c30; }

/* Les paragraphes du corps d'article (justifiés, grand interligne, premier
   paragraphe agrandi) ne doivent pas déteindre sur la carte. */
#custom-article .article-body .tweet-carte .tweet-carte__texte,
.article-body .tweet-carte .tweet-carte__texte {
    margin: 0 0 .85rem;
    font-size: .98rem;
    line-height: 1.55;
    color: #0f1419;
    text-align: left;
}
#custom-article .article-body .tweet-carte,
.article-body .tweet-carte {
    border: 1px solid #e3e8ef;
    background: #fff;
}

/* Intégration officielle chargée : X fournit son propre cadre. */
.tweet-integre .twitter-tweet-rendered { margin: 0 auto !important; }

/* ── Images ─────────────────────────────────────────────────────────────── */
.article-image {
    margin: 2rem auto;
    text-align: center;
}
.article-image img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .06), 0 14px 34px rgba(15, 23, 42, .10);
    cursor: zoom-in;
    transition: transform .3s ease, box-shadow .3s ease;
}
.article-image img:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(15, 23, 42, .08), 0 20px 44px rgba(15, 23, 42, .14);
}
.article-image figcaption {
    margin-top: .7rem;
    color: #5b6577;
    font-size: .88rem;
    font-style: italic;
    line-height: 1.45;
}

/* Images en ligne dans le texte : jamais plus larges que la colonne. */
.article-body img,
.page-body img { max-width: 100%; height: auto; }

.article-galerie {
    display: grid;
    gap: 1rem;
    margin: 2rem 0;
}
.article-galerie--2 { grid-template-columns: repeat(2, 1fr); }
.article-galerie--3 { grid-template-columns: repeat(3, 1fr); }
.article-galerie .article-image { margin: 0; }
.article-galerie .article-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
@media (max-width: 640px) {
    .article-galerie--2,
    .article-galerie--3 { grid-template-columns: 1fr; }
}

/* ── Agrandissement au clic ─────────────────────────────────────────────── */
.visionneuse {
    position: fixed;
    inset: 0;
    z-index: 2147482500; /* au-dessus du bandeau cookies et de l'assistant */
    display: grid;
    place-items: center;
    padding: 2rem;
    background: rgba(10, 18, 30, .88);
    opacity: 0;
    transition: opacity .25s ease;
    cursor: zoom-out;
}
.visionneuse.est-ouverte { opacity: 1; }
.visionneuse img {
    max-width: min(1200px, 100%);
    max-height: 82vh;
    border-radius: 10px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.visionneuse figcaption {
    margin-top: .9rem;
    color: #e5eaf1;
    font-size: .95rem;
    text-align: center;
}
.visionneuse__fermer {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
}
.visionneuse__fermer:hover { background: rgba(255, 255, 255, .25); }

@media (prefers-reduced-motion: reduce) {
    .article-image img, .visionneuse { transition: none; }
}

/* ── Priorité sur les règles générales du corps d'article ────────────────
   (page_article.css donne à toute image et figure une marge de 48px et une
   ombre très diffuse, pensées pour les images brutes). */
#custom-article .article-body .article-image {
    margin: 2rem auto;
    overflow: visible;
}
#custom-article .article-body .article-galerie {
    margin: 2rem 0;
}
#custom-article .article-body .article-galerie .article-image {
    margin: 0;
}
#custom-article .article-body .article-image img {
    margin: 0 auto;
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .06), 0 14px 34px rgba(15, 23, 42, .10);
}
#custom-article .article-body .tweet-integre {
    margin: 2rem auto;
    max-width: 550px;
    overflow: visible;
}