/*
 * Mise en page du thème Discovery.
 *
 * Largeurs, disposition de la zone de contenu et de la colonne latérale,
 * espacements verticaux entre les grandes parties du document.
 *
 * La disposition est mobile d'abord : le contenu occupe toute la largeur, et
 * la colonne latérale se place à côté à partir d'un point de rupture. Les
 * valeurs des points de rupture sont écrites en clair : la spécification CSS
 * interdit une variable dans une condition de media query.
 *
 * L'ordre du document place le contenu principal avant la colonne latérale.
 * Cet ordre n'est pas modifié par la mise en page : l'ordre visuel et l'ordre
 * de tabulation restent les mêmes, et ce qui est vu correspond à ce qui est
 * parcouru au clavier.
 */


/* =============================================================
   Enveloppes
   ============================================================= */

.discovery-site-header,
.discovery-content-area,
.discovery-site-footer {
    width: 100%;
    margin-inline: auto;
}

/*
 * La largeur maximale et la marge interne vont de pair : la première borne le
 * bloc, la seconde écarte son contenu du bord. Les deux sont posées ensemble,
 * de sorte que le texte de chaque région commence à la même distance du bord
 * de la fenêtre.
 *
 * L'en-tête et le pied de page en sont écartés. Leur fond s'étend sur toute la
 * largeur, et ce sont leurs zones qui bornent le contenu : le fond couvre
 * ainsi la fenêtre entière, sans bande du fond de page de part et d'autre sur
 * un écran plus large. La marge latérale est portée par les zones seules, et
 * s'additionne à toute marge posée sur la région.
 */
.discovery-content-area {
    max-width: var(--discovery-content-max);
    padding-inline: var(--discovery-space-4);
}

.discovery-content-area {
    padding-block: var(--discovery-space-8);
}


/* =============================================================
   Zone de contenu et colonne latérale
   ============================================================= */

.discovery-content-area {
    display: grid;
    gap: var(--discovery-space-8);
    align-items: start;
}

.discovery-main {
    min-width: 0;
}

.discovery-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--discovery-space-6);
    min-width: 0;
}

/*
 * La colonne latérale est un enfant direct du conteneur de contenu : la
 * grille la place donc automatiquement sous le contenu principal tant
 * qu'aucune colonne supplémentaire n'est déclarée.
 */
@media (min-width: 1024px) {

    .discovery-content-area:has(.discovery-sidebar) {
        grid-template-columns: minmax(0, 1fr) minmax(0, var(--discovery-sidebar-width, 20rem));
    }
}


/* =============================================================
   Contenu
   =============================================================

   Le rythme vertical du contenu d'article relève de assets/css/content.css,
   avec la largeur de lecture, les alignements de blocs et l'échelle des
   titres. */

.discovery-entry {
    margin-block-end: var(--discovery-space-10);
}

.discovery-entry:last-child {
    margin-block-end: 0;
}

/*
 * L'en-tête suit la colonne de lecture, comme le texte qu'il annonce : son
 * bord gauche coïncide avec celui des paragraphes. Il porte le titre et les
 * métadonnées de la publication, qui sont du texte à lire.
 *
 * Les sections dont le contenu occupe la largeur ample reprennent cette
 * largeur pour leur en-tête, dans leur propre feuille.
 */
.discovery-entry-header {
    max-inline-size: var(--discovery-lecture-max);
    margin-inline: auto;
    margin-block-end: var(--discovery-space-4);
}


/* =============================================================
   Boucle
   ============================================================= */

.discovery-posts {
    display: flex;
    flex-direction: column;
    gap: var(--discovery-space-10);
}


/* =============================================================
   Modèles de page
   ============================================================= */

/*
 * Les modèles dépourvus de colonne latérale conservent la largeur maximale
 * du contenu. Seul le modèle Parcours l'élargit, son contenu occupant seul
 * le document.
 */
.discovery-parcours .discovery-content-area {
    max-width: var(--discovery-parcours-max, 55rem);
    padding-block: var(--discovery-space-10);
}

.discovery-connexion .discovery-content-area {
    max-width: var(--discovery-connexion-max, 34rem);
    padding-block: var(--discovery-space-10);
}

.discovery-site-header-connexion {
    padding-block: var(--discovery-space-8);
    text-align: center;
}

.discovery-logo-connexion img {
    display: inline-block;
    max-width: var(--discovery-logo-connexion-max, 12rem);
    height: auto;
}

.discovery-site-footer-connexion {
    padding-block: var(--discovery-space-6);
    text-align: center;
}