/*
 * Espace de compte du thème Discovery.
 *
 * Disposition de l'en-tête réduit, des zones accrochables et du pied du
 * modèle Compte.
 *
 * Les zones ne reçoivent qu'une disposition et un espacement : leur contenu
 * relève des modules qui les alimentent, et le thème ne présume ni de sa
 * nature ni de sa mise en forme.
 *
 * Les valeurs des points de rupture sont écrites en clair : la spécification
 * CSS interdit une variable dans une condition de media query.
 */


/* =============================================================
   En-tête réduit
   ============================================================= */

.discovery-site-header-compte {
    display: flex;
    flex-direction: column;
    gap: var(--discovery-space-4);
    padding-block: var(--discovery-space-5);
    border-block-end: 1px solid var(--discovery-color-border);
}

@media (min-width: 768px) {

    .discovery-site-header-compte {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--discovery-space-6);
    }
}

.discovery-site-branding-compte {
    min-width: 0;
}

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


/* =============================================================
   Identité de la personne connectée
   ============================================================= */

.discovery-compte-identite {
    display: flex;
    flex-wrap: wrap;
    gap: var(--discovery-space-2) var(--discovery-space-4);
    align-items: center;
    min-width: 0;
}

.discovery-compte-identite > * {
    margin: 0;
}


/* =============================================================
   Navigation du compte
   ============================================================= */

/*
 * La navigation occupe toute la largeur sous l'identité en petite largeur, et
 * se place à côté dès que la place le permet.
 */
.discovery-compte-navigation {
    display: flex;
    flex-wrap: wrap;
    gap: var(--discovery-space-2);
    align-items: center;
    min-width: 0;
}

@media (min-width: 768px) {

    .discovery-compte-navigation {
        flex-basis: 100%;
    }
}


/* =============================================================
   Zones encadrant le contenu
   ============================================================= */

.discovery-compte-avant {
    margin-block-end: var(--discovery-space-6);
}

.discovery-compte-apres {
    margin-block-start: var(--discovery-space-8);
}

/*
 * Les zones disposent leurs contenus en grille, ce qui organise en colonnes
 * les blocs qu'un module y place sans qu'il ait à déclarer sa propre mise en
 * page. Un contenu unique occupe alors toute la largeur.
 */
.discovery-compte-avant,
.discovery-compte-apres {
    display: grid;
    gap: var(--discovery-space-5);
}

@media (min-width: 768px) {

    .discovery-compte-apres {
        grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    }
}


/* =============================================================
   Pied réduit
   ============================================================= */

/*
 * Le pied ne porte pas de surface distincte : la page ne comporte qu'un
 * espace de compte, et une surface marquerait une séparation entre des
 * parties qui n'existent pas.
 */
.discovery-site-footer-compte {
    margin-block-start: var(--discovery-space-8);
    background: none;
    text-align: center;
}

.discovery-compte-pied {
    display: flex;
    flex-wrap: wrap;
    gap: var(--discovery-space-3) var(--discovery-space-5);
    justify-content: center;
    margin-block-end: var(--discovery-space-4);
    font-size: var(--discovery-text-sm);
}

.discovery-compte-pied > * {
    margin: 0;
}