/* Heop — l'historique d'achat du particulier : annee, mois, ligne.
 *
 * POURQUOI UNE FEUILLE ET PAS DES LIGNES DANS users.css.
 *
 * Meme raison qu'account-dashboard.css, et elle est ecrite en tete de celle-ci :
 * users.css fait 3600 lignes, sert trois espaces, et plusieurs voies y
 * travaillent en meme temps. Un selecteur, une declaration, ici.
 *
 * CE QU'ELLE N'INVENTE PAS. La carte et sa bordure viennent de `.account-list-
 * card` (users.css), le badge d'etat de `.ui-tag`, l'appel secondaire de
 * `.ui-cta--trait --compact`, les couleurs des jetons de css/ui/tokens.css.
 * Cette feuille ne pose que le PLIAGE de l'arborescence et la disposition d'une
 * ligne a deux destinations — ce que rien d'existant ne portait.
 *
 * ELLE SE CHARGE APRES account-dashboard.css, donc apres users.css : elle peut
 * preciser `.account-list-card` sans en supprimer une regle.
 */

/* --- L'arborescence ------------------------------------------------------ */

.account-history {
    display: grid;
    gap: var(--ui-space-2, 12px);
}

/* PAS DE `display: grid` SUR LE `<details>` — ET C'EST UN PIEGE PAYE ICI.
 *
 * Un `<details>` transforme en conteneur de grille fait participer son contenu
 * replie a la mise en page : le `gap` de la grille est reserve MEME quand
 * l'annee est fermee. Mesure, au navigateur, sur une annee fermee dont l'en-tete
 * fait 44px : 60px avec la grille sur le `<details>`, 44px sans. Seize pixels de
 * blanc fantome sous chaque annee repliee, que rien dans le HTML n'annonce — pas
 * d'attribut `open`, la bonne balise, le bon gabarit.
 *
 * La grille descend donc sur un corps interne, et le `<details>` garde le
 * `display` que le navigateur lui donne. */
.account-history__year-body {
    display: grid;
    gap: var(--ui-space-2, 12px);
    padding-top: var(--ui-space-2, 12px);
}

/* Le marqueur natif du navigateur est un triangle noir qui ne suit ni la
   graisse ni la couleur du reste. On le retire et on dessine la rotation du
   chevron maison, deja present partout ailleurs dans le compte. */
.account-history__year-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 14px;
    gap: 8px;
    align-items: center;
    min-height: var(--tap-size, 44px);
    padding: 0 2px;
    border-bottom: 1px solid var(--ui-color-line, #DFD4C3);
    cursor: pointer;
    list-style: none;
}

.account-history__year-summary::-webkit-details-marker {
    display: none;
}

.account-history__year-label {
    color: var(--ui-color-ink, #241D16);
    font-family: var(--ui-font-display, Georgia, serif);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.1;
}

.account-history__year-count {
    /* Le compteur n'est pas une vanite : il dit combien de lignes se cachent
       derriere une annee repliee. Sans lui, une annee fermee ne se distingue
       pas d'une annee vide. */
    justify-self: end;
}

.account-history__year-summary > .ui-icon {
    color: var(--ui-color-muted, #6E6252);
    transition: transform .18s ease;
}

.account-history__year[open] > .account-history__year-summary > .ui-icon {
    transform: rotate(90deg);
}

.account-history__month {
    display: grid;
    gap: 5px;
}

.account-history__month-label {
    margin: 0;
    color: var(--ui-color-muted, #6E6252);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.3;
    text-transform: uppercase;
}

/* --- Une ligne : la commande a gauche, ses pieces en dessous ------------- */

.account-history-row {
    display: grid;
    gap: 2px;
    padding: 8px 9px 10px;
    border-top: 1px solid rgba(223, 212, 195, .62);
}

.account-history-row:first-child {
    border-top: 0;
}

.account-history-row__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 14px;
    gap: 8px;
    align-items: center;
    min-height: var(--tap-size, 44px);
    color: var(--ui-color-ink, #241D16);
    text-decoration: none;
}

/* `base.css` souligne TOUT lien au survol. Sur une rangee entiere, ce
   soulignement courrait sous le numero, les producteurs et le montant a la
   fois : la rangee se lirait alors comme un lien casse. Les autres rangees du
   compte coupent deja cette regle (`.account-list-row:hover`) ; celle-ci fait
   pareil, et signale le survol par le fond. */
.account-history-row__main:hover,
.account-history-row__main:focus-visible {
    text-decoration: none;
}

.account-history-row:hover {
    background: var(--ui-plan-sunk, #F4EBD9);
}

.account-history-row__ident {
    display: grid;
    min-width: 0;
    gap: 2px;
}

/* LES PRODUCTEURS PASSENT A LA LIGNE PLUTOT QUE D'ETRE COUPES. Une commande
   multi-vendeurs tronquee a « Ferme des Qua… » ne repond pas a la question
   « qui ? », qui est precisement la raison d'etre de ce champ. */
.account-history-row__producers {
    color: var(--ui-color-muted, #6E6252);
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.account-history-row__amount {
    color: var(--ui-color-accent-dark, #A64F31);
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}

.account-history-row__main > .ui-icon {
    color: var(--ui-color-muted, #6E6252);
}

.account-history-row__aside {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.account-history-row__invoice {
    font-size: .7rem;
}

/* La facture annoncee mais pas encore deposee. Elle porte le vocabulaire de
   l'attente, pas celui de l'erreur : rien n'a echoue, la piece arrive. */
.account-history-row__invoice--pending {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ui-color-muted, #6E6252);
    font-size: .7rem;
    font-weight: 600;
}

/* --- Les quatre tonalites d'un etat de retrait --------------------------- */

/* `.ui-tag` sert de base : fond vert doux, texte vert de marque. C'est deja la
   tonalite juste pour « remis », donc `--done` n'ajoute rien et n'existe pas
   comme surcharge — il herite. Les trois autres se distinguent d'elle. */
.account-state--accent {
    background: #F6E3D6;
    color: var(--ui-color-accent-dark, #A64F31);
}

.account-state--muted {
    background: var(--ui-plan-sunk, #F4EBD9);
    color: var(--ui-color-muted, #6E6252);
}

.account-state--alert {
    background: #F7DCD6;
    color: #8E3320;
}

/* --- Au-dela du telephone ------------------------------------------------ */

@media (min-width: 640px) {
    /* Sur un ecran large, l'etat et la facture remontent sur la ligne du
       numero : la place existe, et deux lignes par commande gaspillaient le
       balayage vertical d'un historique de trois ans. */
    .account-history-row {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
    }

    .account-history-row__aside {
        justify-content: flex-end;
    }

    /* LE CHEVRON SERT LA OU IL N'Y A PAS DE SURVOL.
     *
     * A 375 il ferme la rangee a droite et dit « ceci s'ouvre » — sur un ecran
     * tactile, rien d'autre ne le dit. Au-dela de 640px la rangee passe a deux
     * colonnes et le chevron se retrouve COINCE ENTRE le montant et l'etat, au
     * milieu de la ligne : il ne designe plus rien et se lit comme un glyphe
     * egare. La capture desktop l'a montre, le HTML ne pouvait pas.
     *
     * Il disparait donc la ou le survol prend le relais — fond de rangee et
     * curseur suffisent a dire qu'on peut cliquer. */
    .account-history-row__main {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .account-history-row__main > .ui-icon {
        display: none;
    }
}

/* ---- L'avis d'une ligne livree : constat ou formulaire, jamais les deux. */
.line-review {
    display: grid;
    gap: 10px;
    margin: 4px 0 10px;
    padding: 12px 14px;
    border: 1px solid rgba(223, 212, 195, .72);
    border-radius: 12px;
    background: rgba(250, 247, 241, .6);
}

.line-review--done {
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
}

.line-review__stars,
.line-review__etoile span {
    color: #c98a2d;
}

.line-review fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.line-review legend {
    padding: 0;
    font-weight: 600;
    font-size: 0.85rem;
}

.line-review__radios {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}

.line-review__etoile {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 2px;
    min-width: 44px;
    min-height: 44px;
    padding: 4px;
    border-radius: 10px;
    cursor: pointer;
}

.line-review__etoile span {
    font-size: 1.4rem;
    line-height: 1;
    opacity: .35;
}

.line-review__etoile input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Toutes les etoiles jusqu'a la cochee s'allument (l'ordre DOM suffit). */
.line-review__etoile:has(input:checked) span,
.line-review__etoile:has(~ .line-review__etoile input:checked) span {
    opacity: 1;
}

.line-review__etoile:has(input:focus-visible) {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.line-review textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(223, 212, 195, .9);
    border-radius: 10px;
    font: inherit;
    resize: vertical;
}

/* ---- L'abandon : un geste offert, pas un geste mis en avant. */
.order-abandon {
    display: grid;
    gap: 6px;
    justify-items: start;
    margin: 12px 0 4px;
}

.order-abandon small {
    color: var(--muted, #6b6257);
    font-size: 0.78rem;
}

/* --- La barre de filtres, en tete de liste ------------------------------- */

/* QUATRE LIENS, PAS UN MENU DEROULANT. Chaque vue de la liste a son URL —
   elle se met en favori, se colle dans un message, et le tableau de bord y
   pointe. Un `<select>` aurait exige du script pour se soumettre.
   ELLE DEFILE PLUTOT QU'ELLE NE SE REPLIE : a 320px les quatre onglets ne
   tiennent pas cote a cote, et les faire passer a la ligne ferait sauter la
   liste d'un onglet a l'autre. Un defilement horizontal garde la barre sur une
   ligne, a hauteur constante. */
.account-filtres {
    display: flex;
    gap: 6px;
    margin: 0 0 var(--ui-space-2, 12px);
    padding-bottom: 2px;
    overflow-x: auto;
    scrollbar-width: none;
}

.account-filtres::-webkit-scrollbar {
    display: none;
}

.account-filtres__onglet {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 6px;
    align-items: center;
    /* `--tap-size` : la cible tactile du site, tenue ici comme ailleurs. Un
       onglet de 28px de haut se rate une fois sur trois au pouce. */
    min-height: var(--tap-size, 44px);
    padding: 0 14px;
    border: 1px solid var(--ui-color-line, #DFD4C3);
    border-radius: 999px;
    color: var(--ui-color-muted, #6E6252);
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.account-filtres__onglet:hover,
.account-filtres__onglet:focus-visible {
    background: var(--ui-plan-sunk, #F4EBD9);
    color: var(--ui-color-ink, #241D16);
    text-decoration: none;
}

/* L'ONGLET ACTIF SE VOIT AUTREMENT QUE PAR LA COULEUR SEULE : fond plein ET
   graisse. Un daltonien, ou un ecran en plein soleil, ne lit pas une nuance ;
   `aria-current="page"` porte la meme information a la voix. */
.account-filtres__onglet--actif {
    border-color: var(--ui-color-accent-dark, #A64F31);
    background: var(--ui-color-accent-dark, #A64F31);
    color: #FFF;
    font-weight: 700;
}

.account-filtres__onglet--actif:hover,
.account-filtres__onglet--actif:focus-visible {
    background: var(--ui-color-accent-dark, #A64F31);
    color: #FFF;
}

/* Le compte est plus discret que le libelle : il informe, il n'appelle pas. */
.account-filtres__compte {
    color: inherit;
    font-size: .72rem;
    font-weight: 700;
    opacity: .72;
}

/* --- La date et le contenu d'une ligne ----------------------------------- */

/* LA DATE ET LE NUMERO PARTAGENT LA PREMIERE LIGNE. La date d'abord parce que
   c'est par elle qu'un humain cherche ; le numero ensuite, en retrait, parce
   qu'il ne sert qu'au support. `wrap` : sur un ecran etroit le numero passe
   dessous plutot que d'ecraser la date. */
.account-history-row__entete {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    min-width: 0;
}

.account-history-row__date {
    font-size: .82rem;
    font-weight: 700;
    /* La date est la seule chose qui ne doit JAMAIS se couper : c'est l'ancre
       de lecture de la rangee. */
    white-space: nowrap;
}

/* Le numero perd sa graisse de titre : il n'est plus l'identifiant principal
   de la rangee depuis que la date et les articles la nomment. */
.account-history-row__number {
    overflow: hidden;
    color: var(--ui-color-muted, #6E6252);
    font-size: .7rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* LES ARTICLES SE COUPENT A DEUX LIGNES, PAS PLUS. Trois intitules longs
   feraient une rangee plus haute que le mois entier ; `line-clamp` garde la
   liste balayable en laissant la fiche dire le reste. */
.account-history-row__articles {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    color: var(--ui-color-ink, #241D16);
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* ---- Commander a nouveau : un geste offert sous la commande. */
.order-recommander {
    display: grid;
    gap: 6px;
    justify-items: start;
    margin: 12px 0 4px;
}

.order-recommander small {
    color: var(--muted, #6b6257);
    font-size: 0.78rem;
}