/*
 * 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.
 */
/*
 * Le pied de l'espace de compte rend son contenu sans zone intermédiaire : il
 * porte donc lui-même la largeur maximale et la marge interne que les zones
 * portent dans le pied ordinaire. Son texte commence ainsi à la même distance
 * du bord que celui de l'en-tête.
 */
.discovery-site-footer-compte {
    max-width: var(--discovery-content-max);
    margin-block-start: var(--discovery-space-8);
    margin-inline: auto;
    padding-inline: var(--discovery-space-4);
    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;
}


/* =============================================================
   Zone précédant l'identité du site
   ============================================================= */

/*
 * L'en-tête de compte dispose ses parties en ligne et les répartit par
 * espacement égal à partir de 768 pixels. Lorsque la zone précédant
 * l'identité est remplie, il porte une partie de plus, et cette répartition
 * éloignerait le sélecteur du logo qu'il précède.
 *
 * Une marge automatique après le logo absorbe l'espace libre avant que la
 * répartition n'opère : la zone et le logo restent groupés au départ de la
 * ligne, l'identité de la personne connectée et la navigation à l'opposé.
 *
 * La règle ne vise que le logo précédé de cette zone : en son absence, la
 * répartition d'origine reste intacte.
 */
@media (min-width: 768px) {

    .discovery-avant-identite-site + .discovery-site-branding-compte {
        margin-inline-end: auto;
    }
}