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

/*
 * 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: 600;
}

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

/*
 * Le téléchargement est un lien et non un bouton : il mène à une adresse et
 * ne modifie rien. Il en porte l'habillage, la nature de la commande étant
 * donnée par son intitulé.
 *
 * Sa bordure emploie la couleur atténuée et non la couleur de bordure : cette
 * dernière est calculée pour trancher sur le fond de page, où elle atteint
 * trois pour un, et non sur la surface de la carte, où elle tombe à 2,63 pour
 * un. La couleur atténuée y atteint 8,79 pour un.
 */
.discovery-telechargement-lien {
    display: inline-block;
    padding: var(--discovery-space-2) var(--discovery-space-4);
    background-color: var(--discovery-color-surface);
    border: 1px solid var(--discovery-color-muted);
    border-radius: var(--discovery-radius-sm);
    color: var(--discovery-color-text);
    font-weight: 600;
    text-decoration: none;
}

.discovery-telechargement-lien:hover,
.discovery-telechargement-lien:focus-visible {
    border-color: var(--discovery-color-text);
    text-decoration: underline;
}

/*
 * Le lien vers le catalogue, présenté en l'absence de téléchargement, se
 * détache du texte qui le précède.
 */
.discovery-telechargements-lien-catalogue {
    display: inline-block;
    margin-inline-start: var(--discovery-space-2);
}