/* ==========================================================================
   Pages institutionnelles — affichage public
   ==========================================================================

   Complète blog-public.css, dont cette page reprend l'en-tête, le chapô,
   la couverture et le fil d'Ariane (« .article-public__* »). Seule la mise
   en deux colonnes et le sommaire de rubrique sont déclarés ici.
   ========================================================================== */

/* L'en-tête public est une pilule flottante posée par-dessus le contenu :
   la marge haute doit dégager sa hauteur. */
.page-publique {
    padding-block: 6rem 5rem;
}

.page-publique__grille {
    display: grid;
    grid-template-columns: minmax(0, 48rem) minmax(0, 17rem);
    justify-content: center;
    align-items: start;
    gap: 3.5rem;
}

/* Sans sommaire, l'article reste centré sur sa colonne de lecture. */
.page-publique__grille:has(.page-publique__article:only-child) {
    grid-template-columns: minmax(0, 48rem);
}

/* Les blocs repris du blog sont centrés par des marges automatiques :
   dans la grille, ils s'alignent sur le bord gauche de la colonne. */
.page-publique__article .article-public__fil,
.page-publique__article .article-public__entete,
.page-publique__article .article-public__couverture {
    margin-inline: 0;
    max-width: none;
}

.page-publique__article .article-public__entete {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--couleur-bordure);
}

.page-publique__article .article-public__chapo {
    margin-bottom: 0;
}

.page-publique__corps {
    font-size: 1.0938rem;
    line-height: 1.8;
}

/* --------------------------------------------------------------------------
   Bandeau d'aperçu d'un brouillon
   -------------------------------------------------------------------------- */

.page-publique__apercu {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0 0 1.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid color-mix(in srgb, var(--couleur-attention) 45%, transparent);
    border-radius: var(--rayon-s);
    background: color-mix(in srgb, var(--couleur-attention) 14%, transparent);
    font-size: 0.9375rem;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Sommaire de la rubrique
   -------------------------------------------------------------------------- */

.page-publique__cote {
    position: sticky;
    top: 6.5rem;
}

.page-publique__sommaire {
    padding: 1.5rem;
}

.page-publique__sommaire h2 {
    margin: 0 0 1rem;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--couleur-texte-doux);
}

.page-publique__sommaire ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-publique__sommaire a {
    display: block;
    padding: 0.5625rem 0.875rem;
    border-left: 2px solid var(--couleur-bordure);
    color: var(--couleur-texte);
    font-size: 0.9375rem;
    line-height: 1.4;
    text-decoration: none;
    transition: color var(--transition-rapide), border-color var(--transition-rapide), background var(--transition-rapide);
}

.page-publique__sommaire a:hover {
    border-left-color: var(--couleur-primaire-clair);
    color: var(--couleur-lien);
}

.page-publique__sommaire a.actif {
    border-left-color: var(--couleur-primaire);
    background: color-mix(in srgb, var(--couleur-primaire) 8%, transparent);
    color: var(--couleur-lien);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Écrans étroits : le sommaire passe sous l'article
   -------------------------------------------------------------------------- */

@media (max-width: 992px) {
    .page-publique__grille {
        grid-template-columns: minmax(0, 48rem);
        gap: 2.5rem;
    }

    .page-publique__cote {
        position: static;
    }
}

@media (max-width: 640px) {
    .page-publique {
        padding-block: 5.5rem 3.5rem;
    }

    .page-publique__corps {
        font-size: 1.0313rem;
        line-height: 1.75;
    }
}