/**
 * Espace de compte WooCommerce.
 *
 * Habillage du module de compte et de ses sections. La feuille est déclarée
 * par la table de branchement WooCommerce du thème et ne se charge donc que
 * lorsque l'extension est active.
 *
 * Les règles du modèle de page Compte, qui vaut sans WooCommerce, restent
 * dans compte.css.
 */

/* =============================================================
   Salutation
   ============================================================= */

.discovery-compte-salutation {
    font-size: var(--discovery-text-lg);
    line-height: var(--discovery-line-tight);
}


/* =============================================================
   Formulaires de l'en-tête de compte
   ============================================================= */

/*
 * Les deux formulaires de l'en-tête ne portent pas de marge propre : leur
 * espacement relève des conteneurs de zone, qui les disposent.
 */
.discovery-compte-deconnexion,
.discovery-compte-sections {
    display: flex;
    flex-wrap: wrap;
    gap: var(--discovery-space-2);
    align-items: end;
    margin: 0;
    min-width: 0;
}

/*
 * L'étiquette occupe une ligne entière au-dessus du contrôle. Placée à côté,
 * elle réduirait la liste à une largeur où les libellés de section les plus
 * longs seraient tronqués.
 */
.discovery-compte-sections label {
    flex: 1 0 100%;
    margin-block-end: 0;
}

/*
 * La liste des sections revient à une largeur souple. La règle générale des
 * champs l'étend à toute la largeur disponible, ce qui repousserait le bouton
 * de validation sur la ligne suivante en toute circonstance.
 */
.discovery-compte-sections select {
    flex: 1 1 14rem;
    width: auto;
    min-width: 0;
    max-width: 100%;
}


/* =============================================================
   Messages
   ============================================================= */

/*
 * Les messages occupent une position constante, au-dessus du contenu et quelle
 * que soit la section affichée.
 */
.discovery-compte-messages > .woocommerce-notices-wrapper > * {
    margin: 0;
    padding: var(--discovery-space-4);
    background-color: var(--discovery-color-surface);
    border: 1px solid var(--discovery-color-border);
    border-inline-start-width: var(--discovery-space-1);
    border-radius: var(--discovery-radius-sm);
}

.discovery-compte-messages > .woocommerce-notices-wrapper > * + * {
    margin-block-start: var(--discovery-space-3);
}

/*
 * Les messages d'erreur arrivent sous forme de liste. Les puces sont retirées
 * et le retrait rendu au conteneur : la liste ne sert ici qu'à regrouper des
 * énoncés de même nature.
 */
.discovery-compte-messages ul.woocommerce-error {
    list-style: none;
}

.discovery-compte-messages ul.woocommerce-error li + li {
    margin-block-start: var(--discovery-space-2);
}

/*
 * La couleur de la bordure de départ distingue les trois natures de message.
 * Elle ne porte aucune information à elle seule : chaque message énonce en
 * toutes lettres ce qu'il signale, et son rôle est annoncé par alert ou par
 * status. Les trois teintes dépassent le rapport de trois pour un exigé par le
 * critère WCAG 2.1 1.4.11 pour un élément d'interface, avec respectivement
 * 9,07, 11,31 et 8,95 pour un sur la surface qui les porte.
 */
.discovery-compte-messages .woocommerce-error {
    border-inline-start-color: var(--discovery-color-erreur, #ff9b8f);
}

.discovery-compte-messages .woocommerce-message {
    border-inline-start-color: var(--discovery-color-succes, #7ddf9a);
}

.discovery-compte-messages .woocommerce-info {
    border-inline-start-color: var(--discovery-color-info, #7fb8ff);
}

/*
 * Un bouton placé dans un message se sépare du texte qui le précède.
 */
.discovery-compte-messages .button {
    margin-inline-start: var(--discovery-space-3);
}


/* =============================================================
   Téléchargements
   ============================================================= */

.discovery-telechargements-decompte {
    margin: 0 0 var(--discovery-space-4);
    color: var(--discovery-color-muted);
}

/*
 * Les téléchargements sont groupés par commande, puis par produit. Les
 * groupes se détachent les uns des autres par leur espacement, la hiérarchie
 * étant déjà portée par les titres.
 */
.discovery-telechargements-commande + .discovery-telechargements-commande {
    margin-block-start: var(--discovery-space-10);
}

.discovery-telechargements-commande-titre {
    margin-block-end: var(--discovery-space-2);
}

.discovery-telechargements-commande-lien {
    margin-block-end: var(--discovery-space-6);
    font-size: var(--discovery-text-sm);
}

.discovery-telechargements-produit + .discovery-telechargements-produit {
    margin-block-start: var(--discovery-space-6);
}

.discovery-telechargements-produit-titre {
    margin-block-end: var(--discovery-space-3);
}

/*
 * La liste des fichiers perd ses puces : chaque fichier est une carte
 * autonome, dont le titre du produit qui la précède porte déjà le
 * regroupement.
 */
.discovery-telechargements-fichiers {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--discovery-space-4);
}

/*
 * Chaque fichier est une carte posée sur la surface du thème, distinguée du
 * fond par sa bordure et non par sa seule couleur.
 */
.discovery-telechargement {
    padding: var(--discovery-space-4);
    background-color: var(--discovery-color-surface);
    border: 1px solid var(--discovery-color-border);
    border-radius: var(--discovery-radius-md);
}

/*
 * Les données du fichier se rangent en colonnes souples, chaque intitulé
 * au-dessus de sa valeur. Le regroupement de chaque couple dans un conteneur
 * est ce qui permet cette disposition sans rompre la liste de définitions.
 */
.discovery-telechargement-details {
    margin: 0 0 var(--discovery-space-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--discovery-space-2) var(--discovery-space-6);
}

.discovery-telechargement-detail dt {
    margin: 0;
    color: var(--discovery-color-muted);
    font-size: var(--discovery-text-sm);
}

.discovery-telechargement-detail dd {
    margin: 0;
    font-weight: var(--discovery-weight-semibold);
}

.discovery-telechargement-action {
    margin: 0;
}

/*
 * Tous les boutons de l'espace de compte partagent cette apparence, qu'ils
 * soumettent un formulaire ou qu'ils naviguent. La règle générale des boutons
 * les pose sur la surface du thème avec la couleur de bordure ordinaire ;
 * celle-ci est calculée pour trancher sur le fond de page, où elle atteint
 * trois pour un, et non sur la surface d'une carte, où elle tombe à 2,63. La
 * couleur atténuée y atteint 8,79.
 */
.discovery-bouton {
    background-color: var(--discovery-color-surface);
    border-color: var(--discovery-color-muted);
    font-weight: var(--discovery-weight-semibold);
}

.discovery-bouton:hover,
.discovery-bouton:focus-visible {
    border-color: var(--discovery-color-text);
}

/*
 * Le formulaire qui porte un bouton de navigation ne compte pas dans la
 * disposition : il n'existe que pour donner au bouton une destination sans
 * script. Il se comporte donc comme le bouton qu'il contient.
 */
.discovery-bouton-navigation {
    display: inline-block;
    margin: 0;
}




/* =============================================================
   Onglets de la section
   ============================================================= */

/*
 * Les onglets sont des liens, et aucun ne porte de tabindex : le tabindex
 * mobile du patron ARIA suppose un deplacement aux fleches assure par un
 * script, et rendrait sans lui les onglets non selectionnes inatteignables
 * au clavier. La tabulation les parcourt donc tous.
 */
.discovery-compte-onglets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--discovery-space-1);
    margin: 0 0 var(--discovery-space-6);
    padding: 0;
    list-style: none;
    border-block-end: 1px solid var(--discovery-color-border);
}

.discovery-compte-onglet-bouton {
    display: block;
    padding: var(--discovery-space-3) var(--discovery-space-4);
    border: 1px solid transparent;
    border-block-end: none;
    border-start-start-radius: var(--discovery-radius-sm);
    border-start-end-radius: var(--discovery-radius-sm);
    color: var(--discovery-color-muted);
    text-decoration: none;
}

.discovery-compte-onglet-bouton:hover,
.discovery-compte-onglet-bouton:focus-visible {
    color: var(--discovery-color-text);
    text-decoration: underline;
}

/*
 * L'onglet selectionne se distingue par trois moyens simultanes : sa couleur
 * de texte, sa graisse et sa bordure. Aucun etat visuel du theme ne repose
 * sur la seule couleur.
 */
.discovery-compte-onglet-bouton[aria-selected="true"] {
    background-color: var(--discovery-color-surface);
    border-color: var(--discovery-color-muted);
    color: var(--discovery-color-text);
    font-weight: var(--discovery-weight-semibold);
}


/* =============================================================
   Panneaux
   ============================================================= */

.discovery-compte-panneau + .discovery-compte-panneau {
    margin-block-start: var(--discovery-space-10);
}

.discovery-compte-panneau-titre {
    margin-block-end: var(--discovery-space-4);
}

.discovery-compte-panneau-action {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--discovery-space-4);
    margin-block-start: var(--discovery-space-6);
    margin-block-end: 0;
}

/* =============================================================
   Donnees en consultation
   ============================================================= */

/*
 * Chaque donnee occupe une ligne, son intitule au-dessus de sa valeur. Le
 * conteneur de chaque couple permet cette disposition sans rompre la liste
 * de definitions.
 */
.discovery-compte-donnees {
    display: grid;
    gap: var(--discovery-space-4);
    margin: 0;
}

.discovery-compte-donnee dt {
    margin: 0;
    color: var(--discovery-color-muted);
    font-size: var(--discovery-text-sm);
}

.discovery-compte-donnee dd {
    margin: 0;
    font-weight: var(--discovery-weight-semibold);
}


/* =============================================================
   Formulaire de modification
   ============================================================= */

.discovery-compte-rangee {
    margin: 0 0 var(--discovery-space-4);
}

.discovery-compte-rangee label {
    display: block;
    margin-block-end: var(--discovery-space-1);
}

/*
 * La mention d'obligation est ecrite en toutes lettres dans l'etiquette, et
 * non signalee par un asterisque : elle est ainsi annoncee avec le nom du
 * champ, sans dependre d'une legende placee ailleurs.
 */
.discovery-compte-obligatoire {
    color: var(--discovery-color-muted);
    font-size: var(--discovery-text-sm);
    font-weight: var(--discovery-weight-normal);
}

.discovery-compte-aide {
    display: block;
    margin-block-start: var(--discovery-space-1);
    color: var(--discovery-color-muted);
    font-size: var(--discovery-text-sm);
}

.discovery-compte-motdepasse {
    margin: var(--discovery-space-8) 0 0;
    padding: var(--discovery-space-4);
    border: 1px solid var(--discovery-color-border);
    border-radius: var(--discovery-radius-md);
}

.discovery-compte-motdepasse legend {
    padding-inline: var(--discovery-space-2);
    font-weight: var(--discovery-weight-semibold);
}

.discovery-compte-motdepasse .discovery-compte-aide {
    margin-block-end: var(--discovery-space-4);
}

.discovery-compte-annuler {
    color: var(--discovery-color-link);
}


/* =============================================================
   Onglets et panneaux du profil
   ============================================================= */

/*
 * Les boutons d'onglet ne portent pas l'apparence ordinaire des boutons du
 * thème : leur forme est celle de la barre, et leur état sélectionné se lit
 * par leur couleur, leur graisse et leur bordure à la fois.
 */
.discovery-compte-onglet-bouton {
    padding: var(--discovery-space-3) var(--discovery-space-4);
    background-color: transparent;
    border: 1px solid transparent;
    border-block-end: none;
    border-radius: var(--discovery-radius-sm) var(--discovery-radius-sm) 0 0;
}

.discovery-compte-panneaux {
    margin: 0;
}


/* =============================================================
   Adresses
   ============================================================= */

.discovery-compte-adresses-introduction {
    margin: 0 0 var(--discovery-space-6);
    color: var(--discovery-color-muted);
}

.discovery-compte-adresses {
    display: grid;
    gap: var(--discovery-space-6);
}

/*
 * Les deux adresses se rangent côte à côte dès que la place le permet. Sous ce
 * seuil, elles s'empilent : une adresse comprimée se replie sur trop de lignes
 * pour rester lisible.
 */
@media (min-width: 768px) {

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

/*
 * L'élément d'adresse est rendu en italique par les navigateurs. Le thème
 * l'écrit comme le reste du texte : une adresse postale n'est pas une citation.
 */
.discovery-compte-adresse {
    margin: 0;
    font-style: normal;
    line-height: var(--discovery-line-normal);
}

.discovery-compte-adresse-absente {
    margin: 0;
    color: var(--discovery-color-muted);
}

.discovery-compte-adresse-champs {
    display: grid;
    gap: 0;
}


/* =============================================================
   Zone d'identité
   ============================================================= */

/*
 * La zone d'identité porte la salutation puis les commandes. La salutation
 * occupe la place disponible et repousse les commandes à l'opposé, qui
 * restent groupées entre elles.
 */
.discovery-compte-salutation {
    flex: 1 1 auto;
}

.discovery-compte-deconnexion {
    display: inline-block;
    margin: 0;
}

.discovery-compte-formulaire {
    margin: 0;
}

.discovery-telechargements-absence-action {
    margin-block-start: var(--discovery-space-4);
}


/* =============================================================
   Commandes, barre de filtres
   ============================================================= */

/*
 * Les trois critères et la validation se rangent sur une ligne dès que la
 * place le permet, et repassent à la ligne entiers plutôt que de se
 * comprimer.
 */
.discovery-commandes-filtres {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--discovery-space-4);
    margin: 0 0 var(--discovery-space-6);
    padding: var(--discovery-space-4);
    background-color: var(--discovery-color-surface);
    border: 1px solid var(--discovery-color-border);
    border-radius: var(--discovery-radius-md);
}

/*
 * Le groupe des statuts perd la bordure que les navigateurs donnent aux
 * groupes de champs : la barre en porte déjà une, et deux cadres imbriqués
 * n'apportent rien.
 */
.discovery-commandes-statuts {
    flex: 1 1 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

.discovery-commandes-statuts legend {
    padding: 0;
    margin-block-end: var(--discovery-space-2);
    color: var(--discovery-color-muted);
    font-size: var(--discovery-text-sm);
}

/*
 * Chaque bouton radio reste attaché à son intitulé : le couple ne se coupe
 * pas en fin de ligne, et la zone cliquable couvre les deux.
 */
.discovery-commandes-statut {
    display: inline-flex;
    align-items: center;
    gap: var(--discovery-space-1);
    margin-inline-end: var(--discovery-space-4);
    white-space: nowrap;
}

.discovery-commandes-statut label {
    margin: 0;
    cursor: pointer;
}

.discovery-commandes-periode,
.discovery-commandes-par-page {
    margin: 0;
}

.discovery-commandes-periode label,
.discovery-commandes-par-page label {
    display: block;
    margin-block-end: var(--discovery-space-1);
    color: var(--discovery-color-muted);
    font-size: var(--discovery-text-sm);
}

.discovery-commandes-periode select,
.discovery-commandes-par-page select {
    width: auto;
    min-width: 0;
}

.discovery-commandes-validation {
    margin: 0;
}


/* =============================================================
   Commandes, liste
   ============================================================= */

.discovery-commandes-decompte {
    margin: 0 0 var(--discovery-space-4);
    color: var(--discovery-color-muted);
}

.discovery-commandes {
    display: grid;
    gap: var(--discovery-space-4);
}

/*
 * Chaque commande est une carte posée sur la surface du thème, distinguée du
 * fond par sa bordure et non par sa seule couleur.
 */
.discovery-commande {
    padding: var(--discovery-space-4);
    background-color: var(--discovery-color-surface);
    border: 1px solid var(--discovery-color-border);
    border-radius: var(--discovery-radius-md);
}

.discovery-commande-titre {
    margin: 0 0 var(--discovery-space-3);
    font-size: var(--discovery-text-lg);
}

/*
 * Les données de la commande se rangent en colonnes souples, chaque intitulé
 * au-dessus de sa valeur. Le regroupement de chaque couple dans un conteneur
 * est ce qui permet cette disposition sans rompre la liste de définitions.
 */
.discovery-commande-details {
    margin: 0 0 var(--discovery-space-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--discovery-space-2) var(--discovery-space-6);
}

.discovery-commande-detail dt {
    margin: 0;
    color: var(--discovery-color-muted);
    font-size: var(--discovery-text-sm);
}

.discovery-commande-detail dd {
    margin: 0;
    font-weight: var(--discovery-weight-semibold);
}

.discovery-commande-action {
    margin: 0;
}


/* =============================================================
   Commandes, pagination et absence
   ============================================================= */

.discovery-commandes-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--discovery-space-4);
    margin-block-start: var(--discovery-space-6);
}

/*
 * L'indication de page se place entre les deux commandes et occupe l'espace
 * libre : la commande précédente reste au départ de la ligne et la suivante à
 * l'opposé, quelle que soit la présence de l'une ou de l'autre.
 */
.discovery-commandes-page {
    order: 1;
    flex: 1 1 auto;
    margin: 0;
    text-align: center;
    color: var(--discovery-color-muted);
}

.discovery-commandes-bouton-precedent {
    order: 0;
}

.discovery-commandes-bouton-suivant {
    order: 2;
}

.discovery-commandes-retrait,
.discovery-commandes-absence-action {
    margin-block-start: var(--discovery-space-4);
}


/* =============================================================
   Détail d'une commande
   ============================================================= */

.discovery-commande-retour {
    margin-block-end: var(--discovery-space-6);
}

.discovery-commande-statut {
    margin: 0 0 var(--discovery-space-6);
}

/*
 * Les trois éléments mis en valeur par WooCommerce dans la phrase de statut
 * perdent le fond que les navigateurs donnent à l'élément mark : la graisse
 * suffit à les distinguer, et un fond clair sur une palette sombre les
 * rendrait illisibles.
 */
.discovery-commande-statut mark {
    background-color: transparent;
    color: inherit;
    font-weight: var(--discovery-weight-semibold);
}


/* =============================================================
   Détail d'une commande, téléchargements repliés
   ============================================================= */

.discovery-commande-telechargements {
    margin-block-end: var(--discovery-space-8);
}

.discovery-commande-telechargements-titre {
    margin-block-end: var(--discovery-space-3);
}

.discovery-commande-telechargements-panneau {
    margin-block-start: var(--discovery-space-4);
}

/*
 * Le bouton de divulgation n'occupe pas toute la largeur : il commande un
 * repli, il n'est pas la commande principale de la page.
 */
.discovery-commande-divulgation {
    margin-block-end: 0;
}


/* =============================================================
   Détail d'une commande, récapitulatif
   ============================================================= */

.discovery-commande-recapitulatif {
    margin-block-end: var(--discovery-space-8);
}

.discovery-commande-recapitulatif-titre {
    margin-block-end: var(--discovery-space-4);
}

/*
 * Le tableau des articles est conservé : produit et total forment une
 * matrice. Les bordures ne servent qu'à séparer les lignes ; l'appartenance
 * d'une cellule à sa colonne est portée par les en-têtes, non par le trait.
 */
.discovery-commande-articles {
    width: 100%;
    margin: 0 0 var(--discovery-space-6);
    border-collapse: collapse;
}

.discovery-commande-articles th,
.discovery-commande-articles td {
    padding: var(--discovery-space-3);
    text-align: start;
    vertical-align: top;
    border-block-end: 1px solid var(--discovery-color-border);
}

.discovery-commande-articles thead th {
    color: var(--discovery-color-muted);
    font-size: var(--discovery-text-sm);
    font-weight: var(--discovery-weight-semibold);
}

/*
 * La quantité suit le nom du produit sur la même ligne, et ne s'en détache
 * pas en fin de ligne.
 */
.discovery-commande-articles .product-quantity {
    white-space: nowrap;
}


/* =============================================================
   Détail d'une commande, totaux et actions
   ============================================================= */

/*
 * Les totaux se lisent ligne à ligne, intitulé et valeur en regard : à la
 * différence des données d'une carte, ils forment une suite que l'on parcourt
 * du haut vers le bas.
 */
.discovery-commande-totaux {
    display: grid;
    gap: var(--discovery-space-2);
    margin: 0 0 var(--discovery-space-6);
}

.discovery-commande-total {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--discovery-space-2) var(--discovery-space-4);
    padding-block-end: var(--discovery-space-2);
    border-block-end: 1px solid var(--discovery-color-border);
}

.discovery-commande-total dt {
    margin: 0;
    color: var(--discovery-color-muted);
}

.discovery-commande-total dd {
    margin: 0;
    font-weight: var(--discovery-weight-semibold);
    text-align: end;
}

.discovery-commande-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--discovery-space-3);
}

/*
 * Le titre des actions occupe une ligne entière au-dessus d'elles : placé à
 * côté, il serait pris pour l'une d'elles.
 */
.discovery-commande-actions-titre {
    flex: 1 0 100%;
    margin: 0;
    font-size: var(--discovery-text-lg);
}