/* Heop — le tableau de bord du compte, dans la recette de fusion.
 *
 * POURQUOI CETTE FEUILLE EXISTE PLUTOT QUE DES LIGNES DE PLUS DANS users.css.
 *
 * users.css fait 3600 lignes et sert TROIS espaces — particulier, vendeur,
 * support — plus l'inscription et la connexion. Plusieurs voies y travaillent
 * en meme temps. Les formes du tableau de bord refondu y seraient allees se
 * sedimenter au milieu de leurs propres ancetres, avec le risque habituel :
 * deux declarations du meme selecteur a 400 lignes d'ecart, dont une seule
 * gagne, et personne ne sait laquelle.
 *
 * Ici : un selecteur, une declaration. La feuille est chargee EN DERNIER par
 * layouts/partials/account_styles.html, ce qui lui permet de reprendre la main
 * sur les quelques regles de users.css qu'elle remplace sans en supprimer une
 * seule — les autres surfaces qui les emploient encore restent intactes.
 *
 * CE QU'ELLE N'INVENTE PAS. La carte, sa bordure, son ombre, son soulevement
 * au survol viennent de `.ui-tile` ; l'aplat de marque de `.ui-hero` ; le
 * bouton de `.ui-cta` ; la pastille d'icone de `.ui-ico` ; l'entree en cascade
 * de `.ui-cascade`/`.ui-enter`. Tout cela est declare une fois, dans
 * css/ui/fusion.css et css/ui/motion.css. Cette feuille ne pose que la
 * disposition propre au compte.
 *
 * Les couleurs viennent des jetons, a UNE exception nommee : la premiere borne
 * du degrade de la pastille (#EFE5D0). La cible pose ce degrade, et cette
 * teinte tombe entre --ui-color-sable et --ui-plan-sunk sans correspondre a
 * aucun jeton existant. Inventer un jeton pour une seule borne d'un seul
 * degrade coutait plus cher que de l'ecrire ici, ou on la voit.
 */

/* --- La respiration de la page ------------------------------------------ */

.account-dashboard {
    gap: var(--ui-space-3);
}

/* --- L'ouverture : « Bonjour », un prenom, une pastille ------------------ */

.account-hello {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--ui-space-2);
}

/* La pastille d'initiales. JAMAIS un visage par defaut : quand la photo
   manque, les initiales sont le repli assume — et quand le prenom manque
   aussi, c'est la feuille de la marque qui s'affiche, jamais un fragment
   d'adresse courriel comme le faisait l'ancien calcul. */
.account-hello__avatar {
    display: grid;
    place-items: center;
    width: clamp(46px, 13vw, 58px);
    height: clamp(46px, 13vw, 58px);
    border: 1px solid var(--ui-color-sable, #E7DCC6);
    border-radius: 50%;
    background: linear-gradient(150deg, #EFE5D0, var(--ui-plan-sunk, #F4EBD9));
    color: var(--ui-color-accent, #C86138);
    font-family: var(--ui-font-display, Georgia, serif);
    font-size: clamp(.92rem, 3.4vw, 1.1rem);
    font-weight: 600;
    line-height: 1;
}

.account-hello__avatar .ui-icon {
    width: 22px;
    height: 22px;
    color: var(--ui-color-accent, #C86138);
}

.account-hello__identity {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.account-hello__identity h1 {
    margin: 0;
    color: var(--ui-color-ink, #241D16);
    font-family: var(--ui-font-display, Georgia, serif);
    font-size: clamp(1.24rem, 5.4vw, 1.5rem);
    font-weight: 600;
    line-height: 1.1;
    /* Pas de troncature ici : un prenom long doit passer a la ligne plutot que
       de se faire couper. Ce n'est pas une tuile de barre d'outils, c'est le
       titre de la page. */
    overflow-wrap: anywhere;
}

.account-hello__identity p {
    margin: 0;
    color: var(--ui-color-muted, #6E6252);
    font-size: var(--ui-font-xs);
    font-weight: 500;
    line-height: 1.35;
}

/* --- L'accroche : le prochain geste, sur l'aplat de marque --------------- */

.account-next {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-2);
}

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

.account-next__copy strong {
    color: #FFFFFF;
    font-family: var(--ui-font-display, Georgia, serif);
    font-size: var(--ui-font-sm);
    font-weight: 600;
    line-height: 1.2;
}

.account-next__copy span {
    color: var(--ui-color-cream, #FFF8EC);
    font-size: var(--ui-font-xs);
    line-height: 1.35;
    opacity: .88;
}

/* Le CTA ne se comprime jamais : sur 375px il passe a la ligne entier plutot
   que de se laisser reduire a trois lettres et des points de suspension. */
.account-next__cta {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* --- L'en-tete de section ----------------------------------------------- */

.account-section-heading h2 {
    color: var(--ui-color-brand, #245A3B);
    font-family: var(--ui-font-display, Georgia, serif);
    font-size: var(--ui-font-sm);
    font-weight: 600;
    line-height: 1.15;
}

/* --- Les metriques : le chiffre d'abord ---------------------------------- */

.account-metrics {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ui-space-1);
}

.account-metric {
    display: grid;
    min-width: 0;
    align-content: center;
    justify-items: center;
    gap: 3px;
    text-align: center;
}

/* Chiffres alignes verticalement d'une tuile a l'autre : sans tabular-nums,
   « 11 » est plus etroit que « 00 » et la rangee se decale. */
.account-metric__value {
    color: var(--ui-color-ink, #241D16);
    font-family: var(--ui-font-display, Georgia, serif);
    font-size: clamp(1.45rem, 6vw, 1.9rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
}

/* Le seul chiffre qui appelle un geste porte la couleur d'accent. Un seul :
   si tout est accentue, plus rien ne l'est. */
.account-metric__value--accent {
    color: var(--ui-color-accent-dark, #A64F31);
}

.account-metric__label {
    color: var(--ui-color-muted, #6E6252);
    font-size: var(--ui-font-xs);
    line-height: 1.2;
}

/* --- UN CHIFFRE QUI MENE QUELQUE PART LE MONTRE, SANS SURVOL --------------- *
 *
 * Les tuiles de commandes ouvrent desormais la liste FILTREE sur leur etat.
 * `.ui-tile` repond deja au survol et au focus — mais un telephone n'a ni l'un
 * ni l'autre avant le doigt, et « 28 terminees » avait exactement l'air de ce
 * qu'il etait jusqu'ici : un nombre mort. Le chevron est le seul signe qui
 * tienne sans pointeur.
 *
 * Il est pose sur le LIBELLE et pas sur la tuile : la tuile est une grille
 * centree, un pseudo-element pose sur elle ajouterait une troisieme ligne et
 * decalerait le chiffre par rapport a la tuile voisine, qui elle ne mene nulle
 * part. Sur le libelle, il se lit « Terminees › » et la rangee reste alignee.
 *
 * `a.account-metric` et non `.account-metric` : c'est la BALISE qui dit s'il y
 * a une destination — `metric_tile.html` ne rend un <a> que s'il a une `url`.
 * Un chevron sur un <div> promettrait un clic qui ne vient pas.
 */
a.account-metric .account-metric__label::after {
    content: ' ›';
    color: var(--ui-color-accent-dark, #A64F31);
    font-weight: 700;
}

a.account-metric:hover .account-metric__label,
a.account-metric:focus-visible .account-metric__label {
    color: var(--ui-color-brand, #245A3B);
}

/* --- L'etat vide, humain ------------------------------------------------- */

.account-empty {
    display: grid;
    justify-items: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-3) var(--ui-space-2);
    /* Trait DISCONTINU : il dit « il n'y a rien ici, pour l'instant ». Une
       bordure pleine dessinerait une carte, c'est-a-dire un contenu. */
    border: 1px dashed var(--ui-color-sable, #E7DCC6);
    border-radius: var(--ui-radius-hero, 18px);
    background: var(--ui-plan-card, #FFFDF7);
    text-align: center;
}

.account-empty__copy {
    margin: 0;
    max-width: 46ch;
    color: var(--ui-color-muted, #6E6252);
    font-size: var(--ui-font-xs);
    line-height: 1.45;
}

.account-empty__hint {
    color: var(--ui-color-brand, #245A3B);
    font-weight: 600;
}

/* --- Les raccourcis : trois gestes --------------------------------------- *
 *
 * Et les favoris, qui empruntent la meme rangee. DEUX NOMS, UNE REGLE : la
 * grille est declaree une fois, les conteneurs restent distincts. Fondre les
 * deux sous `.account-shortcuts` aurait mis deux rangees sous la meme ancre sur
 * la meme page, et le contrat « il y a trois raccourcis, pas un menu » se
 * serait mis a mesurer la premiere venue en se croyant satisfait.
 */

.account-shortcuts,
.account-favorites {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ui-space-1);
}

.account-shortcut {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--ui-space-2);
}

.account-shortcut__ico {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--ui-plan-sunk, #F4EBD9);
    color: var(--ui-color-brand, #245A3B);
}

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

.account-shortcut__copy strong {
    color: var(--ui-color-ink, #241D16);
    font-size: var(--ui-font-xs);
    font-weight: 600;
    line-height: 1.2;
}

.account-shortcut__copy small {
    color: var(--ui-color-muted, #6E6252);
    font-size: .76rem;
    line-height: 1.25;
}

/* --- SOUS 860px, LA BARRE LATERALE EST UNE PISTE ET PAS UNE CARTE --------- *
 *
 * MESURE, sur le telephone de reference (375x667) et un compte garni :
 * l'en-tete du site prend 136px, la barre laterale 126 de plus. 39% du premier
 * ecran passent donc avant le « Bonjour » — et le premier ecran est tout ce que
 * Julien regarde.
 *
 * Sous le palier, `users.css` a deja transforme la colonne en PISTE horizontale
 * de pastilles : c'est la bonne forme, et on n'y touche pas. Ce qui coute, c'est
 * la CARTE autour d'elle — bordure, aplat, ombre et marge interieure, dessines
 * pour une colonne posee a cote du contenu. Sur un telephone, elle empile une
 * carte de navigation au-dessus d'une page de cartes, et l'oeil doit traverser
 * deux cadres avant d'arriver au prenom.
 *
 * On retire le cadre, RIEN d'autre : memes rubriques, meme ordre, meme piste
 * qui defile, meme pastille d'etat sur la rubrique courante — c'est elle qui
 * dit que ces liens sont une navigation, pas le cadre. Au-dela du palier la
 * carte revient telle quelle : la colonne y est posee a cote du contenu, ou son
 * cadre a un sens.
 *
 * La regle d'origine vit dans users.css (l.18) ; cette feuille est chargee
 * apres, et ne la remplace que sous le palier — les autres surfaces de compte
 * gardent la leur, intacte, au-dessus.
 */

@media (max-width: 859px) {
    .account-shell-nav__section {
        padding: 0 14px;
        border: 0;
        background: none;
        box-shadow: none;
    }

    /* LES 14px NE SONT PAS UNE MARGE DE CONFORT : c'est le retrait du contenu de
       la page, mesure sur le banc (les sections tombent a x=14 pour 348 de
       large). Une piste posee a x=0 sous un « Bonjour » pose a x=14 se lit comme
       un element etranger colle au bord ; alignee, elle appartient a la page.

       Le titre du groupe perd alors sa marge propre : elle s'ajoutait au retrait
       et le decalait de la piste qu'il nomme. */
    .account-shell-nav__title {
        margin-inline: 0;
    }
}

/* --- L'invitation vendeur, en pied de barre laterale (A-001) -------------- */

.account-seller-invite {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--tap-size, 44px);
    margin-top: 6px;
    padding: 0 12px;
    border-radius: 12px;
    color: var(--ui-color-muted, #6E6252);
    font-size: .82rem;
    font-weight: 500;
    text-decoration: none;
}

.account-seller-invite .ui-icon {
    color: var(--ui-color-sable-fort, #9B8B6E);
}

.account-seller-invite__arrow {
    margin-left: auto;
}

.account-seller-invite:hover,
.account-seller-invite:focus-visible {
    background: var(--ui-plan-sunk, #F4EBD9);
    color: var(--ui-color-brand, #245A3B);
    text-decoration: none;
}

/* --- Le vendeur reprend la meme tuile ------------------------------------ *
 *
 * La rangee du vendeur garde sa grille d'un seul cadre, mais ses cellules
 * sont desormais la tuile partagee. users.css stylait `.account-pro-metric
 * strong` et `.account-pro-metric span` ; le balisage commun porte des classes,
 * et ces deux regles ne l'atteignent plus. On les redit ici, une fois, sur le
 * balisage commun — plutot que de dupliquer la tuile pour deux couleurs.
 */

.account-pro-metrics .account-metric {
    justify-items: start;
    padding: 9px 11px;
    text-align: left;
}

.account-pro-metrics .account-metric__value {
    color: var(--ui-color-brand, #245A3B);
    font-size: 1.35rem;
}

@media (min-width: 560px) {
    /* Trois colonnes : la largeur de la cible. En dessous, une seule — trois
       tuiles cote a cote sur 375px donneraient 100px chacune, ou le libelle
       « Producteurs suivis » se casse en trois lignes. */
    .account-metrics--3,
    .account-shortcuts,
    .account-favorites {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .account-metrics--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .account-metrics,
    .account-shortcuts,
    .account-favorites {
        gap: var(--ui-space-2);
    }
}

/* --- L'etat SANS MESURE, qui ne doit ressembler ni a un chiffre ni a un vide -
 *
 * Trois etats coexistent sur cette page et le lecteur doit les distinguer SANS
 * lire :
 *
 *   une valeur        -> `.account-metric`, une tuile bordee, un chiffre
 *   une absence       -> `.account-empty`, trait DISCONTINU, un geste, une sortie
 *   aucune mesure     -> ici, aplat CREUX, trait plein discret, aucun geste
 *
 * D'ou le choix de peinture : ni la bordure pointillee de l'etat vide — qui
 * annonce « il n'y a rien ici, pour l'instant », c'est-a-dire un objet manquant
 * — ni la carte posee d'une tuile, qui annonce un contenu. Un aplat creux, a
 * plat sur la page, sans ombre et sans elevation : rien ne flotte, donc rien
 * n'est offert.
 *
 * Et surtout : AUCUNE regle de chiffre. Ce bloc n'a pas de `--value`, pas de
 * `tabular-nums`, pas de taille de titre. Une section qui ne mesure rien ne
 * doit pas pouvoir ressembler a une mesure, meme par accident de feuille.
 */

.account-unmeasured {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--ui-space-2);
    padding: var(--ui-space-2);
    border: 1px solid var(--ui-color-sable, #E7DCC6);
    border-radius: var(--ui-radius-card, 14px);
    background: var(--ui-plan-sunk, #F4EBD9);
}

/* La pastille est en registre SOURDINE, pas en accent : un etat qui n'appelle
   aucun geste ne doit pas attirer l'oeil plus que les sections qui en appellent
   un. Elle porte `info`, jamais un point d'exclamation — rien n'est en panne. */
.account-unmeasured__ico {
    background: var(--ui-plan-card, #FFFDF7);
    color: var(--ui-color-muted, #6E6252);
}

.account-unmeasured__copy {
    margin: 0;
    max-width: 62ch;
    color: var(--ui-color-muted, #6E6252);
    font-size: var(--ui-font-xs);
    line-height: 1.45;
}

/* --- Les moyens de paiement, quand la vanne est ouverte ------------------- *
 *
 * Une rangee de `.ui-tag` et une note. Rien de plus : il n'y a pas de carte
 * enregistree chez Heop a montrer, et aucun champ ou en taper une.
 *
 * Les pastilles de marque du tunnel de paiement (`commerce-payment-brand`) ne
 * sont PAS reprises ici : les recopier ferait deux verites pour un seul fait,
 * et les extraire demanderait de toucher le tunnel, hors de ce lot. Ce qui est
 * partage est la source, pas la peinture.
 */

.account-payment {
    display: grid;
    gap: var(--ui-space-2);
    padding: var(--ui-space-2);
    border: 1px solid var(--ui-color-line, #DFD4C3);
    border-radius: var(--ui-radius-card, 14px);
    background: var(--ui-plan-card, #FFFDF7);
}

.account-payment__brands {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Une marque acceptee est un ETAT, pas une porte : elle ne se souleve pas, elle
   ne repond pas au survol, et elle ne mene nulle part. */
.account-payment__brand {
    cursor: default;
}

.account-payment__note {
    margin: 0;
    max-width: 62ch;
    color: var(--ui-color-muted, #6E6252);
    font-size: var(--ui-font-xs);
    line-height: 1.45;
}

/* --- Le prochain retrait : ou, quand, chez qui ---------------------------- *
 *
 * Une carte, trois faits nommes, un etat, un appel secondaire. La carte, son
 * ombre et sa reponse au geste viennent de `.ui-tile` ; l'etat de `.ui-tag` et
 * des tonalites de retrait deja posees par account-orders.css ; le bouton de
 * `.ui-cta--trait --compact`. Rien de tout cela n'est redessine ici.
 *
 * Les trois faits sont une LISTE DE DEFINITIONS, pas trois paragraphes : le
 * libelle nomme la question (« Ou »), la valeur y repond. Un lecteur d'ecran
 * les annonce par paires, ce que trois lignes de texte ne feraient pas.
 */

.account-pickup {
    display: grid;
    gap: var(--ui-space-2);
    padding: var(--ui-space-2);
}

/* La carte OUVRE la page quand elle existe, et le trait d'accent le dit : c'est
   le seul bloc de la page qui porte un rendez-vous, avec une heure et un lieu.
   Un trait plutot qu'un aplat de marque — l'aplat est celui de l'accroche
   (`.ui-hero`), et deux aplats de marque sur un ecran ne hierarchisent plus
   rien. Les deux ne coexistent d'ailleurs jamais : la vue rend l'un OU l'autre. */
.account-dashboard__pickup .account-pickup {
    border-left: 3px solid var(--ui-color-accent, #C86138);
}

.account-pickup__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.account-pickup__ico {
    width: 32px;
    height: 32px;
    border-radius: 10px;
}

.account-pickup__facts {
    display: grid;
    gap: var(--ui-space-1);
    margin: 0;
}

/* Le libelle a gauche, la reponse a droite : sur le telephone de reference la
   colonne de gauche est bornee, sinon « Chez qui » et « Quand » se cadrent
   differemment et la lecture zigzague. */
.account-pickup__fact {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    align-items: baseline;
    gap: 10px;
}

.account-pickup__fact dt {
    color: var(--ui-color-muted, #6E6252);
    font-size: .76rem;
    line-height: 1.3;
}

.account-pickup__fact dd {
    margin: 0;
    min-width: 0;
    color: var(--ui-color-ink, #241D16);
    font-size: var(--ui-font-xs);
    font-weight: 600;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* L'adresse est la SUITE du lieu, pas un second titre : le composant partage la
   rend en <strong>, on lui retire ce poids ici plutot que d'ouvrir le composant
   a une variante pour un seul appelant. */
.account-pickup__fact--where dd strong {
    display: block;
    color: var(--ui-color-muted, #6E6252);
    font-weight: 400;
}

.account-pickup__cta {
    justify-self: start;
}

/* --- Les annonces partagent une rangee au-dela du telephone --------------- *
 *
 * Empilees, « Ma fidelite » et « Mes moyens de paiement » poussaient « Vos
 * raccourcis » a 880px — sous le pli de 800px que garde
 * apps/core/test_compte_rendu.py depuis la refonte. Le contrat a raison : la
 * hierarchie d'un compte doit se lire d'un seul regard en desktop, et deux
 * bandeaux qui ANNONCENT ne valent pas le geste qu'ils repoussaient.
 *
 * Cote a cote, ils rendent les 80px qu'ils prenaient. Une annonce n'a de toute
 * facon jamais besoin de toute la largeur : sur 1120px, une phrase de trois
 * lignes a 62ch laissait la moitie droite vide.
 *
 * `auto-fit` plutot que deux colonnes fixes : si une seule des deux sections se
 * rend — la fidelite se cable, le paiement s'ouvre et sort du registre — celle
 * qui reste reprend seule toute la largeur, sans qu'aucune regle ne bouge.
 *
 * Au telephone, rien : elles s'empilent comme tout le reste, et le pli n'a
 * jamais promis d'y tenir.
 */

.account-dashboard__notices {
    display: grid;
    gap: var(--ui-space-2);
    padding: 2px var(--ui-space-2) var(--ui-space-2);
}

/* Le chevron du repli de l'acheteur est un caractere et non l'icone du vendeur :
   son resume ne porte ni compteur ni pastille, et lui poser un <svg> demanderait
   un troisieme enfant dans un <summary> qui n'en a qu'un. La rotation dit
   l'ouverture ; l'ETAT, lui, est expose nativement par <details>. */
.account-notices > summary::after {
    content: '›';
    margin-left: auto;
    transition: transform .18s var(--ui-motion-ease, ease);
}

.account-notices[open] > summary::after {
    transform: rotate(90deg);
}

@media (min-width: 860px) {
    /* Les deux annonces partagent une rangee des que la page est large : une
       annonce n'a jamais besoin de toute la largeur — sur 1120px, une phrase de
       trois lignes a 62ch laissait la moitie droite vide.

       `auto-fit` plutot que deux colonnes fixes : le jour ou le paiement s'ouvre
       et remonte dans le corps de page, la fidelite restee seule reprend toute
       la largeur sans qu'aucune regle ne bouge. */
    .account-dashboard__notices {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: var(--ui-space-3);
        align-items: start;
    }
}


/* Le hub concepteur : vitrine (presentation) et produits (catalogue). */
.account-pro-vitrine-studio__grid { display: grid; gap: 12px; }
@media (min-width: 640px) { .account-pro-vitrine-studio__grid { grid-template-columns: 1fr 1fr; } }
.account-pro-studio-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.account-pro-studio-card__lead { display: flex; align-items: center; gap: 12px; }
.account-pro-studio-card__title { font-size: 1rem; margin: 0; color: var(--ui-color-ink); }
.account-pro-studio-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.account-pro-ring { flex: 0 0 auto; }

/* =========================================================================
   LE POSTE DE PILOTAGE DU VENDEUR — la composition, telephone d'abord.
   =========================================================================
 * ELLE N'INVENTE NI COULEUR NI COMPOSANT. La carte vient de `.ui-tile`, le
 * bouton de `.ui-cta`, la pastille de `.ui-ico`/`.ui-tag`, la rangee de
 * `.account-pro-metrics`, la ligne d'action de `.account-pro-task`, la
 * pastille de variation de `.account-pro-trend`. Ce qui est pose ici est une
 * COMPOSITION : qui domine, qui se groupe, qui se replie.
 *
 * MOBILE D'ABORD. Le petit ecran est ecrit en premier ; les points d'appui
 * DEJA EN SERVICE (560, 680, 860) enrichissent. Aucun palier nouveau.
 *
 * PIEGE DE CASCADE. users.css redeclare `.account-pro-dashboard` sous
 * @media (min-width: 860px) (l.3476). Une media query ne change pas la
 * specificite : ma regle de base, plus tardive, gagnerait aussi a 860. Tout ce
 * qui doit varier au-dela est donc REDIT ici, dans mon propre bloc 860.
 * ========================================================================= */

/* --- 1. RESPIRER PAR LA TYPOGRAPHIE, PAS PAR LES MARGES ------------------ *
 * La page gagnait sa lisibilite en s'ECARTANT : 14px entre chaque bloc, 18
 * au-dela de 860. On serre l'espace a un rythme unique, et on ECARTE LES
 * REGISTRES — un titre de section descend a .82rem en capitales legerement
 * espacees, la grande valeur du pilote monte. C'est ce qui fait la densite :
 * peu d'air, beaucoup d'ecart entre les tailles. */

.account-pro-dashboard {
    gap: 8px;
    padding-bottom: 16px;
}

.account-pro-dashboard .account-pro-activity,
.account-pro-dashboard .account-pro-section {
    gap: 6px;
}

/* TOUT CE QUI TOUCHE UN COMPOSANT PARTAGE EST PORTE PAR
   `.account-pro-dashboard`. components/account/section_heading.html sert huit
   surfaces — son propre commentaire le dit (l.9-12) : paiement, retraits,
   commande, portail vendeur. Un `.account-section-heading h2` non porte ici
   aurait retaille les titres de toutes, pour un lot qui ne concerne que le
   tableau de bord vendeur. */
.account-pro-dashboard .account-pro-section__head h2,
.account-pro-dashboard .account-section-heading h2 {
    font-size: .82rem;
    letter-spacing: .02em;
}

.account-pro-dashboard .account-pro-action-head h2 {
    font-size: 1.05rem;
}

/* La variante compacte plafonne a 38px (fusion.css:113-117), sous la cible
   tactile que le projet s'impose partout ailleurs. On la remonte SUR LE SEUL
   PERIMETRE DE CE TABLEAU DE BORD : elle existe pour les en-tetes de module ou
   44px ecraserait la ligne de titre (son commentaire, fusion.css:111-112), et
   l'elargir globalement deplacerait des lignes de titre hors de ce lot. */
.account-pro-dashboard .ui-cta--compact {
    min-height: var(--tap-size, 44px);
}

/* --- 2. LE BANDEAU PILOTE ------------------------------------------------ *
 * La rangee pilote n'est PAS une grille nouvelle : c'est
 * `.account-pro-metrics--{{ metrics|length }}` — la classe qu'epingle
 * test_visual_contract.py:413 — a qui l'on donne une premiere cellule pleine
 * largeur. Les variantes --1 a --4 restent declarees dans users.css et ne
 * bougent pas d'un caractere.
 *
 * DEUX COLONNES, ET LA DERNIERE CELLULE COMBLE SON TROU TOUTE SEULE.
 * `metrics` vaut 0, 1, 3 ou 4 selon le role (views.py:1716-1743). Avec la
 * premiere cellule sur toute la ligne, il reste 0, 2 ou 3 tuiles : a 3, la
 * derniere serait seule sur sa rangee avec un trou a droite.
 * `:last-child:nth-child(even)` la fait s'etendre — quand l'INDICE du dernier
 * enfant est pair, le nombre de tuiles secondaires est impair, donc il y a un
 * trou. Aucun compte ne remonte au gabarit, aucune classe supplementaire n'est
 * inventee : la feuille se debrouille avec ce que le DOM dit deja. */

.account-pro-metrics--pilote {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-pro-metrics--pilote > :first-child,
.account-pro-metrics--pilote > :last-child:nth-child(even) {
    grid-column: 1 / -1;
}

/* Les filets suivent la nouvelle grille, ils ne la subissent pas.
   users.css les pose sur `:nth-child(-n+2)` et `:nth-child(2n)` (l.3121-3127),
   ce qui supposait deux tuiles par rangee des la premiere. */
.account-pro-metrics--pilote > .account-pro-metric {
    border-top: 1px solid var(--ui-color-sable, #E7DCC6);
    border-left: 0;
}

.account-pro-metrics--pilote > :first-child {
    border-top: 0;
}

.account-pro-metrics--pilote > :nth-child(odd):not(:first-child) {
    border-left: 1px solid var(--ui-color-sable, #E7DCC6);
}

/* LA GRANDE VALEUR, ET LA VARIATION SUR LA MEME LIGNE. Une pastille sous un
   nombre ferait un troisieme etage pour trois mots. `tabular-nums` vient de la
   tuile partagee (account-dashboard.css:170) : la ligne ne danse pas d'un
   chargement a l'autre. */
.account-pro-metrics--pilote > :first-child {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    column-gap: 8px;
    row-gap: 2px;
}

.account-pro-metrics--pilote > :first-child .account-metric__value {
    font-size: clamp(1.7rem, 8vw, 2.2rem);
    line-height: 1.05;
}

.account-pro-metrics--pilote > :first-child .account-pro-trend {
    justify-self: start;
}

.account-pro-metrics--pilote > :first-child .account-metric__label,
.account-pro-metrics--pilote > :first-child .account-spark {
    grid-column: 1 / -1;
}

.account-pro-metrics--pilote > :first-child .account-spark {
    height: 22px;
}

/* --- 3. LES TONALITES DE VALEUR QUI NE PEIGNAIENT RIEN ------------------- *
 * views.py pose `tone: 'green'` sur le CA (l.1724), le panier moyen (l.1755)
 * et le solde (l.2356) ; build_catalog_summary_metrics
 * (apps/customer_portal/presentation.py:68-73) pose 'green'/'orange' sur les
 * quatre compteurs du catalogue. La feuille ne connaissait que `--accent`
 * (l.176 de ce fichier) : ces classes ne peignaient RIEN depuis leur ecriture.
 * On les declare, une fois, ici.
 *
 * L'information n'est jamais portee par la seule couleur : le libelle dit
 * toujours de quoi il s'agit (« Brouillons »), la teinte ne fait qu'appuyer. */

.account-metric__value--green {
    color: var(--ui-color-brand, #245A3B);
}

.account-metric__value--orange {
    color: var(--ui-color-accent-dark, #A64F31);
}

/* --- 4. LA LIGNE DE FAITS ------------------------------------------------ *
 * Ce qui se consulte se lit, ce qui se surveille se balaie. On donne du TEXTE
 * a un total depuis l'ouverture, pas une carte. */

.account-pro-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid var(--ui-color-sable, #E7DCC6);
    border-radius: var(--ui-radius-sm, 8px);
    background: var(--ui-plan-sunk, #F4EBD9);
}

.account-pro-fact {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 6px;
}

.account-pro-fact dt {
    color: var(--ui-color-muted, #6E6252);
    font-size: .7rem;
    font-weight: 500;
    line-height: 1.3;
}

.account-pro-fact dd {
    margin: 0;
    color: var(--ui-color-ink, #241D16);
    font-size: .82rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
}

.account-pro-facts__scope dd {
    color: var(--ui-color-muted, #6E6252);
    font-size: .68rem;
    font-style: italic;
    font-weight: 400;
}

/* --- 5. « A TRAITER » : LA BANDE DE GROUPE ------------------------------- *
 * « Points de vigilance » et « A faire aujourd'hui » etaient deux sections de
 * la meme forme, rendues par le meme composant, a deux bouts opposes de la
 * page. La distinction n'est pas perdue — elle devient une bande dans la
 * liste — et elle reste NOMMEE pour qui lit avec les oreilles : c'est un <h3>,
 * donc un point d'arret de navigation par titres. */

.account-pro-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 3px 11px;
    border-top: 1px solid var(--ui-color-sable, #E7DCC6);
    background: var(--ui-plan-sunk, #F4EBD9);
    color: var(--ui-color-muted, #6E6252);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1.4;
    text-transform: uppercase;
}

.account-pro-task-list > .account-pro-band:first-child {
    border-top: 0;
}

/* users.css retire le filet du PREMIER enfant de la liste (l.3216). Avec une
   bande devant, la premiere ligne n'est plus le premier enfant : elle
   redoublerait le trait de la bande. */
.account-pro-band + .account-pro-task {
    border-top: 0;
}

.account-pro-band__count {
    font-variant-numeric: tabular-nums;
}

/* La bande porte desormais la separation que la hauteur achetait. La ligne
   descend a 52px — huit de plus que la cible tactile exigee. */
.account-pro-todo .account-pro-task {
    min-height: 52px;
}

/* « Rien a traiter » n'est plus une carte de 60px : c'est une ligne. Le vide se
   dit, il ne se decore pas. */
.account-pro-todo .account-pro-empty {
    min-height: var(--tap-size, 44px);
    padding-block: 6px;
}

/* --- 5 bis. CE QUE DISENT MES CLIENTS ------------------------------------ *
 * Une liste, pas des cartes : le producteur relit ses avis comme il lirait des
 * messages. La note domine parce que c'est elle qu'il cherche en arrivant. */

.account-pro-avis__note {
    margin: 0 0 8px;
    font-size: .9rem;
}

.account-pro-avis__note strong {
    font-size: 1.5rem;
    line-height: 1.1;
}

.account-pro-avis__note span {
    color: var(--color-text-muted, #6b6b6b);
}

.account-pro-avis__liste {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.account-pro-avis__item {
    padding-block: 6px;
    border-top: 1px solid var(--color-border-subtle, rgba(0, 0, 0, .08));
}

.account-pro-avis__qui {
    margin: 0;
    font-size: .78rem;
    color: var(--color-text-muted, #6b6b6b);
}

.account-pro-avis__mot {
    margin: 2px 0 0;
    font-size: .88rem;
}

/* --- 6. LE DUO DU QUOTIDIEN ET LES OUTILS -------------------------------- */

.account-pro-duo,
.account-pro-outils {
    display: grid;
    min-width: 0;
    gap: 8px;
}

.account-pro-duo__argent {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: 8px;
}

/* Les tuiles d'encaissement vivent dans une colonne de 300px : la hauteur de
   68px etait celle d'un bandeau pleine largeur. */
.account-pro-duo__argent .account-pro-metric {
    min-height: 56px;
}

/* --- 7. LE GRAPHIQUE ----------------------------------------------------- *
 * 220px de haut sur un telephone (users.css:3630), c'est un quart d'ecran pour
 * douze barres qu'on ne lit pas au pixel — et la courbe du mois est DEJA dans
 * la grande tuile, juste au-dessus. Le rapport de forme du SVG (320x120, pose
 * par get_revenue_chart) le ramene de lui-meme a la largeur ; on borne le
 * plafond.
 *
 * LES LIBELLES : douze mois sur ~348px utiles font 29px chacun, en .58rem
 * (9,3px). On en masque un sur deux — `visibility` et NON `display: none` : la
 * colonne de grille doit rester, sinon les libelles se desalignent des barres
 * qu'ils nomment. `:not(:nth-last-child(odd))` compte DEPUIS LA FIN, donc le
 * mois en cours (terracotta) reste visible quel que soit le nombre de seaux —
 * une regle en `nth-child(even)` l'aurait masque a 12 mois.
 *
 * L'<ol> est deja `aria-hidden` (revenue_chart.html:42) et la table
 * `visually-hidden` porte les douze valeurs : masquer six libelles ne coute
 * rien a un lecteur d'ecran. */

.account-pro-dashboard .account-pro-chart__svg {
    max-height: clamp(104px, 26vw, 150px);
}

.account-pro-dashboard .account-pro-chart__labels li {
    font-size: .66rem;
}

.account-pro-dashboard .account-pro-chart__labels li:not(:nth-last-child(odd)) {
    visibility: hidden;
}

/* L'en-tete du graphique posait `minmax(0, 1fr) auto` (users.css:3036) avec
   deux pastilles `nowrap` a droite : le <h2> pouvait etre ecrase vers zero. Au
   telephone, on empile. */
.account-pro-dashboard .account-pro-chart > .account-pro-section__head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 4px;
}

/* --- 8. LES ACCES RAPIDES, PLUS SERRES ----------------------------------- *
 * Le chevron d'un acces rapide n'apprend rien : dans une grille de tuiles, la
 * tuile EST la porte. Sa colonne rendue, la rangee descend a la taille de
 * touche exacte et le libelle S'ENROULE au lieu d'etre coupe — « Encaisse… »
 * n'est pas une information, c'est une devinette.
 *
 * DEUX colonnes sur le telephone, et pas trois : a trois, la cellule tombe
 * sous 70px utiles et « Encaissements » se casse au milieu d'un mot. Une cesure
 * n'est pas de la densite. */

.account-pro-quick-grid--dense {
    gap: 6px;
}

.account-pro-quick-grid--dense .account-pro-quick-link {
    grid-template-columns: 18px minmax(0, 1fr);
    min-height: var(--tap-size, 44px);
    padding: 5px 8px;
}

.account-pro-quick-grid--dense .account-pro-quick-link > .ui-icon:last-child {
    display: none;
}

.account-pro-quick-grid--dense .account-pro-quick-link > span {
    overflow: visible;
    font-size: .68rem;
    line-height: 1.15;
    text-overflow: clip;
    white-space: normal;
}

/* --- 9. LE REPLI --------------------------------------------------------- *
 * <details> NATIF, ZERO SCRIPT. La politique de contenu est `script-src 'self'`
 * sans `unsafe-inline` (config/middleware.py:125) : un depliant pilote en JS
 * inline serait bloque SANS RIEN DIRE. Ici c'est le navigateur qui ouvre et
 * ferme, et le clavier suit. */

/* DEUX NOMS, UNE SERRURE. Le tableau de bord du vendeur replie deja « ce que
   Heop ne mesure pas encore » ; le compte de l'acheteur replie « ce qui n'est
   pas encore ouvert ». Meme objet, meme peinture, deux contenus — on ajoute
   donc le second nom aux regles du premier plutot que d'ecrire une seconde
   fois la meme carte. C'est la regle deja tenue par `.account-shortcuts` et
   `.account-favorites` juste au-dessus : les conteneurs restent distincts —
   sinon les contrats de l'un mesureraient l'autre — et la forme est declaree
   une fois. */
.account-pro-fold,
.account-notices {
    min-width: 0;
    border: 1px solid var(--ui-color-line, #DFD4C3);
    border-radius: var(--ui-radius-sm, 8px);
    background: var(--ui-plan-card, #FFFDF7);
}

.account-pro-fold > summary,
.account-notices > summary {
    display: flex;
    min-height: var(--tap-size, 44px);
    align-items: center;
    gap: 8px;
    padding: 0 11px;
    color: var(--ui-color-muted, #6E6252);
    cursor: pointer;
    font-size: .74rem;
    font-weight: 600;
    list-style: none;
}

.account-pro-fold > summary::-webkit-details-marker,
.account-notices > summary::-webkit-details-marker {
    display: none;
}

.account-pro-fold > summary > span:first-child {
    margin-right: auto;
}

/* L'etat n'est PAS porte par la seule rotation : <summary> expose nativement
   son etat deplie aux technologies d'assistance. Le chevron est un appui. */
.account-pro-fold__chevron {
    transition: transform .18s var(--ui-motion-ease, ease);
}

.account-pro-fold[open] .account-pro-fold__chevron {
    transform: rotate(90deg);
}

.account-pro-fold > summary:focus-visible,
.account-notices > summary:focus-visible {
    outline: 3px solid var(--focus, #245A3B);
    outline-offset: -3px;
}

.account-pro-fold__body {
    display: grid;
    gap: 10px;
    padding: 2px 11px 11px;
}

/* Replie, un etat sans mesure n'a pas besoin de son propre aplat creux : le
   depliant EST deja le registre sourdine. On lui retire la carte, on garde la
   pastille et la phrase — les trois etats restent distinguables sans lire :
   une valeur = tuile bordee ; une absence = trait discontinu ; aucune mesure =
   a plat, sans geste. */
.account-pro-fold .account-unmeasured {
    padding: 0;
    border: 0;
    background: none;
}

.account-pro-fold .account-unmeasured__copy {
    font-size: .74rem;
}

.account-unmeasured__label {
    color: var(--ui-color-ink, #241D16);
    font-weight: 700;
}

/* --- 10. LE PARCOURS FONDATEUR ------------------------------------------- *
 * Cinq etapes en deux colonnes, avec `text-overflow: ellipsis`
 * (users.css:3008-3012) : « Publier une premiere offre » finissait en points de
 * suspension dans ~126px utiles. Le pave fait deja 44px de haut
 * (users.css:3004-3006, EPINGLE par test_visual_contract.py:283-289 — on n'y
 * touche pas) ; deux lignes y tiennent. */

.account-pro-dashboard .account-pro-onboarding {
    padding: 10px;
    gap: 8px;
}

.account-pro-onboarding__step > span {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* La barre redit ce que le pourcentage annonce a sa droite et ce que les puces
   montrent dessous. On la garde — trois lectures valent mieux qu'une pour qui
   compte mal — mais a 4px. */
.account-pro-onboarding__bar {
    height: 4px;
}

/* =========================================================================
   560px — la premiere respiration.
   ========================================================================= */

@media (min-width: 560px) {
    /* IL FAUT REDECLARER LES COLONNES ICI, et le commentaire precedent se
       trompait. `--pilote` pose sa grille a deux colonnes HORS media query,
       dans une feuille chargee APRES users.css : a specificite egale, c est
       elle qui gagne, et `--4` de users.css ne pouvait plus s appliquer. La
       rangee restait donc a deux colonnes sur un ecran de 1500 pixels.

       La grande valeur garde une colonne et demie : elle domine sans ecraser
       les trois compteurs. */
    .account-pro-metrics--pilote {
        grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    }

    .account-pro-metrics--pilote > :first-child,
    .account-pro-metrics--pilote > :last-child:nth-child(even) {
        grid-column: auto;
    }

    .account-pro-metrics--pilote > .account-pro-metric {
        border-top: 0;
        border-left: 1px solid var(--ui-color-sable, #E7DCC6);
    }

    .account-pro-metrics--pilote > :first-child {
        border-left: 0;
    }

    .account-pro-dashboard .account-pro-chart__labels li:not(:nth-last-child(odd)) {
        visibility: visible;
    }

    .account-pro-dashboard .account-pro-chart > .account-pro-section__head {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    /* Trois colonnes, et pas quatre : a quatre la colonne retombe sous 130px et
       « Encaissements » se recasse. */
    .account-pro-quick-grid--dense {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* L'en-tete et la barre partagent une ligne. Un bandeau de parcours n'a pas
       besoin de trois etages pour dire « il vous reste deux etapes ». */
    .account-pro-dashboard .account-pro-onboarding {
        grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
        align-items: center;
        gap: 8px 14px;
    }

    .account-pro-dashboard .account-pro-onboarding__steps {
        grid-column: 1 / -1;
    }
}

/* =========================================================================
   680px — les outils partagent une rangee.
   ========================================================================= */

@media (min-width: 680px) {
    .account-pro-outils {
        grid-template-columns: minmax(0, 1.35fr) minmax(240px, .85fr);
        align-items: start;
    }
}

/* =========================================================================
   860px — le duo du quotidien tient dans un seul regard.
   ========================================================================= */

@media (min-width: 860px) {
    .account-pro-duo {
        grid-template-columns: minmax(0, 1.35fr) minmax(300px, .85fr);
        align-items: start;
        gap: 18px;
    }

    .account-pro-outils {
        gap: 18px;
    }

    /* REDIT ICI, ET IL LE FAUT : users.css:3476-3479 pose ces deux valeurs sous
       la meme requete, a specificite egale, dans une feuille chargee AVANT.
       Sans ce bloc, ma regle de base ecraserait le 860 de users.css. */
    .account-pro-dashboard {
        gap: 14px;
        padding-bottom: 32px;
    }

    .account-pro-dashboard .account-pro-activity,
    .account-pro-dashboard .account-pro-section {
        gap: 8px;
    }

    .account-pro-dashboard .account-pro-action-head h2 {
        font-size: 1.16rem;
    }

    /* users.css fait grandir la ligne d'action a 66px au-dela de 860 (l.3528).
       Elle y achetait la separation que la liste ne portait pas ; les bandes de
       groupe la portent maintenant. */
    .account-pro-todo .account-pro-task {
        min-height: 56px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .account-pro-fold__chevron,
    .account-notices > summary::after {
        transition: none;
    }
}