/*
 * 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 : un ordre visuel qui
 * différerait de l'ordre de tabulation romprait la correspondance entre ce
 * qui est vu et ce qui est parcouru au clavier.
 */


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

.discovery-site-header,
.discovery-content-area,
.discovery-site-footer {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--discovery-space-4);
}

.discovery-site-header,
.discovery-content-area {
    max-width: var(--discovery-content-max);
}

.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
   ============================================================= */

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

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

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

.discovery-entry-content > * + * {
    margin-block-start: 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;
}