/**
 * Mon compte - langage visuel de l'application mobile
 *
 * LA COULEUR SEULE, PLUS AUCUN TRAIT.
 *
 * L'espace client se lisait par ses bordures : un trait de 1 px autour de la
 * navigation, du bloc de contenu, de chaque raccourci, de chaque champ. En
 * theme sombre le fond du site (#00071a) et son fond secondaire sont la MEME
 * couleur : le trait faisait seul le travail de separation, d'ou un ecran
 * quadrille ou rien ne parait plus important que le reste.
 *
 * L'application mobile a resolu ca en donnant a chaque niveau sa propre valeur
 * (`App/src/theme.ts`). On reprend ici ses quatre altitudes, ses trois rayons
 * et sa typographie, pour que le compte sur le site et le compte dans
 * l'application se reconnaissent.
 *
 * Les tokens sont portes par `.dix-account` et non par `:root` : le reste du
 * site garde ses variables, seul l'espace client bascule.
 *
 * @package Dix
 * @since 1.0.0
 */

/* ==========================================================================
   LES QUATRE ALTITUDES
   ========================================================================== */

.dix-account {
    /* Le fond de l'ecran. Couleur de marque, elle ne bouge pas. */
    --acc-bg: #00071a;
    /* Les cartes. Un cran au-dessus du fond, assez pour se voir sans trait. */
    --acc-card: #111e36;
    /* Ce qui se pose SUR une carte : option, pastille, bouton secondaire. */
    --acc-raised: #1b2a45;
    /* Le creux d'un champ de saisie. Plus clair que la carte comme que le fond :
       un champ pose directement sur le fond, deja tres sombre, disparaitrait. */
    --acc-field: #1b2a45;
    /* L'etat choisi. Il remplace la bordure bleue qui le signalait avant. */
    --acc-selected: #123a66;

    --acc-text: #f5f7fc;
    --acc-muted: #9baac3;
    --acc-blue: #0083ff;
    --acc-pale: #73b7ff;
    --acc-purple: #c12bea;
    --acc-green: #69e4b5;
    --acc-red: #f0989a;

    /* Trois rayons suffisent, et un ecart se voit alors immediatement. */
    --acc-radius-s: 10px;
    --acc-radius-m: 14px;
    --acc-radius-l: 22px;

    --acc-gap: 14px;
    --acc-pad: 20px;
}

/* En theme clair, les memes roles, les memes ecarts, dans l'autre sens :
   la carte est blanche sur un fond gris, et ce qui se pose sur la carte
   s'assombrit d'un cran. Aucun trait n'apparait ici non plus. */
[data-theme="light"] .dix-account {
    --acc-bg: #f4f6fa;
    --acc-card: #ffffff;
    --acc-raised: #eef2f8;
    /* Le champ clair se distingue du blanc de la carte : a #f6f8fc il
       disparaissait, et le formulaire ne montrait plus ou l'on ecrit. */
    --acc-field: #e9eef6;
    --acc-selected: #e2edfc;
    --acc-text: #0b1220;
    --acc-muted: #5b6b82;
    --acc-pale: #0b63c5;
    --acc-purple: #8d19ad;
    --acc-green: #0f8f69;
    --acc-red: #c0392b;
}

/* ==========================================================================
   MISE EN PAGE
   ========================================================================== */

.dix-account {
    max-width: 1120px;
    margin: 0 auto;
    padding: var(--spacing-8) var(--spacing-4) var(--spacing-16);
    color: var(--acc-text);
}

.dix-account__layout {
    display: grid;
    grid-template-columns: 264px 1fr;
    gap: var(--spacing-6);
    align-items: start;
}

/* `min-width: 0` : sans lui, une case de grille se dimensionne sur son contenu.
   Le menu horizontal du mobile, qui doit defiler DANS sa case, l'elargissait
   donc jusqu'a sa propre longueur — et c'est la page entiere qui partait en
   defilement lateral, cartes coupees a droite. */
.dix-account__sidebar {
    position: sticky;
    top: var(--spacing-6);
    min-width: 0;
}

.dix-account__main {
    min-width: 0;
}

/* LE CONTENU N'EST PLUS UNE BOITE.
   Le bloc portait un cadre et un fond : les cartes posees dedans se
   retrouvaient dans un cadre dans un cadre. Ce sont les cartes qui donnent
   la structure, la colonne ne fait que les empiler. */
.dix-account__content {
    display: flex;
    flex-direction: column;
    gap: var(--acc-gap);
    background: none;
    border: 0;
    padding: 0;
}

/* Une page d'endpoint — commandes, adresses, informations — n'apporte pas ses
   cartes : elle recoit la surface qui la porte, avec le meme rayon et la meme
   couleur que les cartes du tableau de bord. */
.dix-account__content--boxed {
    background: var(--acc-card);
    border-radius: var(--acc-radius-l);
    padding: var(--acc-pad);
}

/* LE BLOC D'AVIS VIDE NE DOIT PAS COMPTER.
   WooCommerce pose toujours un `woocommerce-notices-wrapper`, meme sans avis
   a montrer. Invisible mais present, il restait une case de la colonne flex
   et son `gap` repoussait tout le contenu de 14 px : sur le tableau de bord
   et « Mes points » — les deux pages sans cadre — la premiere carte tombait
   plus bas que le haut de la colonne de gauche. */
.dix-account__content > .woocommerce-notices-wrapper:empty {
    display: none;
}

/* Le titre d'endpoint, quand WooCommerce en pose un. */
.dix-account__content h2:first-child,
.dix-account__content h3:first-child {
    margin-top: 0;
}

/* ==========================================================================
   LA CARTE, BRIQUE DE BASE
   ========================================================================== */

.dix-acc-card {
    background: var(--acc-card);
    border: 0;
    border-radius: var(--acc-radius-l);
    padding: var(--acc-pad);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Une carte qui doit se distinguer le fait par sa teinte, pas par un cadre. */
.dix-acc-card--blue {
    background: color-mix(in srgb, var(--acc-blue) 13%, var(--acc-card));
}

.dix-acc-card--purple {
    background: color-mix(in srgb, var(--acc-purple) 13%, var(--acc-card));
}

.dix-acc-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Le sur-titre : ce que la carte raconte, avant de le raconter. */
.dix-acc-label {
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--acc-muted);
    margin: 0;
}

.dix-acc-heading {
    font-family: var(--font-family-heading);
    font-size: 1.125rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.02em;
    color: var(--acc-text);
    margin: 0;
}

.dix-acc-body {
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--acc-muted);
    margin: 0;
}

.dix-acc-strong {
    font-size: 0.875rem;
    font-weight: var(--font-weight-semibold);
    color: var(--acc-text);
    margin: 0;
}

.dix-acc-fine {
    font-size: 0.625rem;
    color: var(--acc-muted);
    margin: 0;
}

/* La pastille de rang ou d'etat. Fond teinte, jamais de contour. */
.dix-acc-tag {
    align-self: flex-start;
    display: inline-block;
    padding: 5px 9px;
    border-radius: var(--acc-radius-s);
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--acc-tag-color, var(--acc-pale));
    background: color-mix(in srgb, var(--acc-tag-color, var(--acc-pale)) 15%, transparent);
}

/* L'icone dans son carre teinte, comme l'`IconBox` de l'application. */
.dix-acc-icon {
    flex-shrink: 0;
    width: 43px;
    height: 43px;
    border-radius: var(--acc-radius-m);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acc-icon-color, var(--acc-pale));
    background: color-mix(in srgb, var(--acc-icon-color, var(--acc-pale)) 14%, transparent);
}

.dix-acc-icon svg {
    width: 22px;
    height: 22px;
}

/* ==========================================================================
   BOUTONS
   ========================================================================== */

.dix-acc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--acc-radius-m);
    background: var(--acc-blue);
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    text-decoration: none !important;
    transition: opacity var(--transition-fast);
}

.dix-acc-btn:hover {
    opacity: 0.85;
    color: #ffffff;
}

.dix-acc-btn svg {
    width: 17px;
    height: 17px;
}

/* Une action secondaire garde la forme du bouton et perd sa couleur :
   disponible, pas proposee. */
.dix-acc-btn--ghost {
    background: var(--acc-raised);
    color: var(--acc-text);
}

.dix-acc-btn--ghost:hover {
    color: var(--acc-text);
}

/* 40 px de haut : au-dessus de la cible tactile minimale, et assez petit pour
   ne pas se lire comme ce qu'on est venu faire. */
.dix-acc-btn--compact {
    min-height: 40px;
    padding: 0 14px;
    font-size: 0.8125rem;
}

.dix-acc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

/* ==========================================================================
   NAVIGATION LATERALE
   ========================================================================== */

.dix-account-nav {
    display: flex;
    flex-direction: column;
    gap: var(--acc-gap);
    background: none;
    border: 0;
    overflow: visible;
}

/* La fiche d'identite : une carte, comme dans l'application. Elle porte le
   nom, puis les deux actions du compte. */
.dix-account-nav__header {
    padding: 16px;
    background: var(--acc-card);
    border: 0;
    border-radius: var(--acc-radius-l);
}

.dix-account-nav__identity {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dix-account-nav__avatar {
    flex-shrink: 0;
}

.dix-account-nav__avatar img {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    object-fit: cover;
}

.dix-account-nav__user {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dix-account-nav__name {
    font-size: 0.875rem;
    font-weight: var(--font-weight-semibold);
    color: var(--acc-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dix-account-nav__email {
    font-size: 0.6875rem;
    color: var(--acc-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Les deux actions du compte, sous l'identite. Elles partagent la largeur :
   a leur largeur propre, « Modifier mon profil » faisait deux fois « Se
   deconnecter » et la paire paraissait de travers. */
.dix-account-nav__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

/* A sa largeur, et non pleine largeur : seule la deconnexion reste ici, et
   un bouton etire sur toute la carte se lirait comme l'action principale du
   compte — ce qu'elle n'est pas. */
.dix-account-nav__actions .dix-acc-btn {
    align-self: flex-start;
    min-height: 38px;
    padding: 0 14px;
    font-size: 0.8125rem;
}

.dix-account-nav__menu {
    list-style: none !important;
    margin: 0;
    padding: 10px !important;
    background: var(--acc-card);
    border-radius: var(--acc-radius-l);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dix-account-nav__item {
    list-style: none !important;
    margin: 0;
    padding: 0;
}

.dix-account-nav__item::before,
.dix-account-nav__item::marker {
    display: none !important;
    content: none !important;
}

/* LE FOND REMPLACE LE LISERE.
   La page courante se signalait par un trait bleu de 3 px a gauche, qui
   decalait le libelle d'un item a l'autre. Un fond plein dit la meme chose
   sans rien deplacer. */
.dix-account-nav__link {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: var(--acc-radius-m);
    color: var(--acc-muted);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-medium);
    text-decoration: none !important;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.dix-account-nav__link:hover {
    background: var(--acc-raised);
    color: var(--acc-text);
    text-decoration: none !important;
}

.dix-account-nav__item.is-active .dix-account-nav__link,
.dix-account-nav__link[aria-current="page"] {
    background: var(--acc-selected);
    color: var(--acc-text);
    font-weight: var(--font-weight-semibold);
}

.dix-account-nav__link svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* La deconnexion se detache par sa couleur, sans trait de separation. */
.dix-account-nav__item.woocommerce-MyAccount-navigation-link--customer-logout .dix-account-nav__link {
    color: var(--acc-red);
    margin-top: 6px;
}

.dix-account-nav__item.woocommerce-MyAccount-navigation-link--customer-logout .dix-account-nav__link:hover {
    background: color-mix(in srgb, var(--acc-red) 16%, transparent);
    color: var(--acc-red);
}

/* ==========================================================================
   TABLEAU DE BORD
   ========================================================================== */

.dix-dashboard {
    display: flex;
    flex-direction: column;
    gap: var(--acc-gap);
}

/* L'accueil : une carte teintee, le seul degrade de la page. L'application
   ouvre de la meme facon, sur un bloc qui nomme la personne. */
.dix-dashboard__hello {
    background: linear-gradient(135deg, #103a6d 0%, #0c234b 55%, #111b37 100%);
    border-radius: var(--acc-radius-l);
    padding: 24px var(--acc-pad);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

[data-theme="light"] .dix-dashboard__hello {
    background: linear-gradient(135deg, #0b3f7d 0%, #10336a 55%, #152a4d 100%);
}

.dix-dashboard__hello .dix-acc-label {
    color: #b6d9ff;
}

.dix-dashboard__hello-name {
    font-family: var(--font-family-heading);
    font-size: clamp(1.6rem, 4vw, 2.125rem);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.04em;
    line-height: 1.1;
    color: #ffffff;
    margin: 0;
}

.dix-dashboard__hello-note {
    font-size: 0.8125rem;
    line-height: 1.6;
    color: #cee4ff;
    margin: 0;
    max-width: 46ch;
}

/* Les deux chiffres du compte, cote a cote. Sous 420 px ils s'empilent :
   un nombre de 30 px sur une demi-largeur de telephone se couperait. */
.dix-dashboard__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--acc-gap);
}

.dix-dashboard__stat {
    gap: 6px;
    padding: 17px;
    text-decoration: none !important;
    transition: background var(--transition-fast);
}

a.dix-dashboard__stat:hover {
    background: var(--acc-raised);
}

.dix-dashboard__stat-value {
    font-family: var(--font-family-heading);
    font-size: 1.875rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.035em;
    line-height: 1.1;
    color: var(--acc-text);
    margin: 0;
}

.dix-dashboard__stat-unit {
    font-size: 0.75rem;
    font-weight: var(--font-weight-normal);
    letter-spacing: 0;
    color: var(--acc-muted);
}

/* ==========================================================================
   PARRAINAGE
   ========================================================================== */

/* Le code en grand, espace comme un code : c'est ce qu'on dicte au telephone
   ou qu'on recopie dans un message. */
.dix-dashboard__referral-code {
    font-family: var(--font-family-heading);
    font-size: 1.875rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.12em;
    color: var(--acc-text);
    margin: 0;
}

.dix-dashboard__referral-share {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

/* Le lien reste lisible et selectionnable : on le partage aussi a la main,
   quand le presse-papiers n'est pas disponible. */
.dix-dashboard__referral-link {
    flex: 1 1 220px;
    min-width: 0;
    min-height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--acc-radius-m);
    background: var(--acc-field);
    color: var(--acc-text);
    font-size: 0.8125rem;
}

/* ==========================================================================
   LIGNES DE RACCOURCIS
   ========================================================================== */

/* Six raccourcis en grille de cartes prenaient la hauteur de l'ecran pour
   six libelles. En lignes dans une seule carte, ils se parcourent d'un coup
   d'oeil — c'est le `RowLink` de l'application. */
.dix-dashboard__links {
    padding: 8px var(--acc-pad);
}

.dix-acc-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    text-decoration: none !important;
    color: inherit;
}

.dix-acc-row + .dix-acc-row {
    box-shadow: 0 -1px 0 color-mix(in srgb, var(--acc-muted) 18%, transparent);
}

.dix-acc-row:hover .dix-acc-strong {
    color: var(--acc-pale);
}

.dix-acc-row__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dix-acc-row__arrow {
    flex-shrink: 0;
    color: var(--acc-muted);
}

.dix-acc-row__arrow svg {
    width: 18px;
    height: 18px;
}

/* ==========================================================================
   DERNIERE COMMANDE, ADRESSES
   ========================================================================== */

.dix-dashboard__order {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dix-dashboard__order-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Les faits de la commande : chacun sur son propre fond pose sur la carte,
   plutot qu'un tableau a filets. */
.dix-dashboard__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 8px;
}

.dix-dashboard__fact {
    background: var(--acc-raised);
    border-radius: var(--acc-radius-m);
    padding: 11px 13px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.dix-dashboard__fact-value {
    font-size: 0.9375rem;
    font-weight: var(--font-weight-semibold);
    color: var(--acc-text);
}

.dix-dashboard__addresses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 8px;
}

.dix-dashboard__address {
    background: var(--acc-raised);
    border-radius: var(--acc-radius-m);
    padding: 13px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dix-dashboard__address address {
    font-style: normal;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--acc-text);
}

/* ==========================================================================
   FORMULAIRES DU COMPTE
   ========================================================================== */

/* Le champ se voit par son fond, et le focus par un halo : ni l'un ni l'autre
   n'a besoin du cadre de 1 px qui cernait tous les champs. */
.dix-account__content input[type="text"],
.dix-account__content input[type="email"],
.dix-account__content input[type="password"],
.dix-account__content input[type="tel"],
.dix-account__content input[type="number"],
.dix-account__content input[type="url"],
.dix-account__content select,
.dix-account__content textarea {
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    background: var(--acc-field);
    border: 0;
    border-radius: var(--acc-radius-m);
    color: var(--acc-text);
    font-size: 0.9375rem;
    box-shadow: none;
    transition: box-shadow var(--transition-fast);
}

.dix-account__content input:focus,
.dix-account__content select:focus,
.dix-account__content textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--acc-blue);
}

.dix-account__content input::placeholder,
.dix-account__content textarea::placeholder {
    color: color-mix(in srgb, var(--acc-muted) 80%, transparent);
}

.dix-account__content label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.8125rem;
    font-weight: var(--font-weight-medium);
    color: var(--acc-muted);
}

.dix-account__content label .required {
    color: var(--acc-red);
    text-decoration: none;
}

/* La fleche du select est redessinee ici : la regle de fond ci-dessus utilise
   la forme courte `background`, qui effacerait l'image heritee. */
.dix-account__content select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239baac3' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
    cursor: pointer;
}

/* Les boutons que WooCommerce ecrit lui-meme — « Enregistrer », « Commander a
   nouveau », « Payer » — prennent la forme de ceux du tableau de bord.
   `!important` sur le survol pour battre `.woocommerce .button:hover`, qui
   force un fond vert avec `!important` lui aussi. */
/* `button.button` et `input.button` en plus de `.button` : WooCommerce cible
   l'element en meme temps que la classe (`.woocommerce button.button`) et
   impose ses couleurs en `!important`. Une classe seule perdait, et le bouton
   restait vert au milieu d'une page bleue. */
.dix-account .dix-account__content a.button,
.dix-account .dix-account__content button.button,
.dix-account .dix-account__content input.button,
.dix-account .dix-account__content .button,
.dix-account .dix-account__content button[type="submit"],
.dix-account .dix-account__content input[type="submit"],
.dix-account .dix-account__content .woocommerce-Button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    width: auto;
    padding: 0 18px;
    border: 0;
    border-radius: var(--acc-radius-m);
    background: var(--acc-blue) !important;
    color: #ffffff !important;
    font-size: 0.875rem;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

.dix-account .dix-account__content a.button:hover,
.dix-account .dix-account__content button.button:hover,
.dix-account .dix-account__content input.button:hover,
.dix-account .dix-account__content .button:hover,
.dix-account .dix-account__content button[type="submit"]:hover,
.dix-account .dix-account__content input[type="submit"]:hover,
.dix-account .dix-account__content .woocommerce-Button:hover {
    background: var(--acc-blue) !important;
    color: #ffffff !important;
    border: 0;
    opacity: 0.85;
    transform: none;
}

/* Le titre d'une section de formulaire — « Changement de mot de passe » —
   portait un filet sur toute la largeur. C'est le seul trait qui restait dans
   la page : la taille et le poids disent deja que c'est un titre. */
.dix-account__content legend {
    width: 100%;
    margin-bottom: 14px;
    padding: 0;
    border: 0;
    font-family: var(--font-family-heading);
    font-size: 1.125rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.02em;
    color: var(--acc-text);
}

/* ==========================================================================
   LES MESSAGES DE WOOCOMMERCE
   ========================================================================== */

/* Un avis WooCommerce place son bouton en flottant : le texte passait DESSOUS
   et les deux se chevauchaient. En ligne, le libelle garde sa place et le
   bouton la sienne. */
.dix-account__content .woocommerce-message,
.dix-account__content .woocommerce-info,
.dix-account__content .woocommerce-error {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 var(--acc-gap);
    padding: 16px;
    border: 0;
    border-radius: var(--acc-radius-m);
    background: var(--acc-raised);
    color: var(--acc-text);
    font-size: 0.875rem;
    list-style: none;
}

.dix-account__content .woocommerce-message::before,
.dix-account__content .woocommerce-info::before,
.dix-account__content .woocommerce-error::before {
    content: none;
}

.dix-account__content .woocommerce-error {
    background: color-mix(in srgb, var(--acc-red) 16%, var(--acc-card));
}

/* Le bouton de l'avis ne flotte plus : il se pose au bout de la ligne. */
.dix-account__content .woocommerce-message .button,
.dix-account__content .woocommerce-info .button {
    float: none;
    margin-left: auto;
}

/* ==========================================================================
   UNE SEULE ECHELLE DE TEXTE
   ==========================================================================

   Le tableau de bord ecrit sa propre typographie, classe par classe. Les pages
   d'endpoint, elles, sortent de WooCommerce et de ses extensions en HTML nu —
   des `<p>`, des `<h2>`, des `<address>` — et recevaient donc celle de
   `page.css`, calibree pour un article : paragraphe a 1 rem, titre a 1.5 rem,
   marges de 2 rem. D'ou le decrochage d'une page a l'autre, visible a l'oeil
   nu entre « Factures » et « Details du compte ».

   On rattache ici ce HTML nu a l'echelle du compte. Les regles portent
   `.dix-account` EN PLUS de `.dix-account__content` : `.page-body p` pese
   (0,2,0) et se charge apres ce fichier.
   ========================================================================== */

/* `:not([class*="dix-"])` : seul le HTML nu est repris. Sans ce garde-fou, la
   regle attrapait aussi les blocs du tableau de bord — qui sont des `<p>` eux
   aussi — et ramenait le solde de 30 px a 14, le code de parrainage avec. */
.dix-account .dix-account__content p:not([class*="dix-"]),
.dix-account .dix-account__content li:not([class*="dix-"]),
.dix-account .dix-account__content address:not([class*="dix-"]),
.dix-account .dix-account__content label:not([class*="dix-"]) {
    font-size: 0.875rem;
    line-height: 1.6;
    font-style: normal;
}

.dix-account .dix-account__content p:not([class*="dix-"]) {
    margin: 0 0 12px;
    color: var(--acc-muted);
}

.dix-account .dix-account__content p:not([class*="dix-"]):last-child {
    margin-bottom: 0;
}

.dix-account .dix-account__content h2:not([class*="dix-"]) {
    font-size: 1.125rem;
    margin: 0 0 12px;
}

.dix-account .dix-account__content h3:not([class*="dix-"]) {
    font-size: 1rem;
    margin: 0 0 10px;
}

.dix-account .dix-account__content h4:not([class*="dix-"]),
.dix-account .dix-account__content h5:not([class*="dix-"]),
.dix-account .dix-account__content h6:not([class*="dix-"]) {
    font-size: 0.875rem;
    margin: 0 0 8px;
    color: var(--acc-text);
}

/* ==========================================================================
   LES ADRESSES
   ========================================================================== */

/* Les deux adresses sont deux blocs poses sur la carte, comme au tableau de
   bord. Elles portent `u-columns col2-set`, la meme classe que les colonnes
   « Connexion / Inscription » : elles heritaient donc de leur mise en page —
   deux colonnes de 400 px centrees, cadrees, titre au milieu. D'ou les trois
   classes de chaque selecteur, qui reprennent la main sur celle-la. */
.dix-account .dix-account__content .woocommerce-Addresses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
    margin: 0;
    justify-content: stretch;
}

.dix-account .dix-account__content .woocommerce-Addresses .woocommerce-Address {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: auto;
    max-width: none;
    float: none;
    padding: 16px;
    border: 0;
    border-radius: var(--acc-radius-m);
    background: var(--acc-raised);
}

.dix-account .dix-account__content .woocommerce-Address-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    text-align: left;
}

.dix-account .dix-account__content .woocommerce-Address-title h2,
.dix-account .dix-account__content .woocommerce-Address-title h3 {
    margin: 0;
    font-size: 1rem;
    text-align: left;
}

/* « Modifier » devient le bouton discret qu'il est, au bout du titre. Son
   libelle court vient du gabarit `myaccount/my-address.php`, qui garde la
   phrase entiere dans `aria-label`. */
.dix-account .dix-account__content .woocommerce-Address-title .edit {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: var(--acc-radius-m);
    background: var(--acc-card);
    color: var(--acc-text);
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    white-space: nowrap;
}

.dix-account .dix-account__content .woocommerce-Address-title .edit:hover {
    background: var(--acc-selected);
    color: var(--acc-text);
}

.dix-account .dix-account__content .woocommerce-Address address {
    color: var(--acc-text);
}

/* ==========================================================================
   LES TABLEAUX DU COMPTE
   ========================================================================== */

/* Le tableau des commandes se lisait comme un tableur : une ligne de filets
   entre chaque cellule, une barre d'en-tete pleine. Chaque ligne devient une
   surface posee sur la carte — la meme matiere que les faits du tableau de
   bord — et les filets disparaissent. */
.dix-account__content table.shop_table {
    width: 100%;
    border: 0;
    border-collapse: separate;
    border-spacing: 0 8px;
}

.dix-account__content table.shop_table thead,
.dix-account__content table.shop_table thead tr {
    background: none;
    border: 0;
}

.dix-account__content table.shop_table thead th {
    padding: 0 14px 4px;
    border: 0;
    background: none;
    text-align: left;
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--acc-muted);
}

/* `tbody th` autant que `td` : WooCommerce ecrit la premiere cellule de chaque
   ligne en `<th scope="row">` (le numero de commande). Oubliee, elle restait
   seule sans fond, et la ligne paraissait amputee de sa premiere colonne. */
.dix-account__content table.shop_table tbody th,
.dix-account__content table.shop_table td {
    padding: 14px;
    border: 0;
    background: var(--acc-raised);
    color: var(--acc-text);
    font-size: 0.875rem;
    vertical-align: middle;
}

.dix-account__content table.shop_table tbody tr > :first-child {
    border-radius: var(--acc-radius-m) 0 0 var(--acc-radius-m);
}

.dix-account__content table.shop_table tbody tr > :last-child {
    border-radius: 0 var(--acc-radius-m) var(--acc-radius-m) 0;
    text-align: right;
}

.dix-account__content table.shop_table tbody a:not(.button) {
    color: var(--acc-pale);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

/* ==========================================================================
   MES POINTS
   ==========================================================================

   La page de fidelite s'est construite avant ce langage : fond secondaire,
   bordure de 1 ou 2 px teintee du palier, onglets souligne, cartes cernees.
   Elle disait les memes choses que le reste du compte, dans une autre langue.

   On la rhabille ici plutot que de reecrire son gabarit : le plugin
   `dix-loyalty` fabrique ce HTML, et le suivre a la trace a chaque mise a
   jour couterait plus que de reprendre ses classes. La couleur du palier
   (`--header-tier-color`) est CONSERVEE — elle porte une information, le rang —
   mais elle teinte un fond au lieu de dessiner un cadre.

   Toutes les regles portent `.dix-account` en plus : les regles d'origine
   existent en double, une fois nues et une fois sous `[data-theme="dark"]`.
   ========================================================================== */

.dix-account .dix-loyalty {
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: var(--acc-gap);
}

/* Le bandeau solde + rang, en haut de chaque onglet. */
.dix-account .dix-loyalty__summary {
    margin: 0;
    padding: 16px var(--acc-pad);
    border: 0;
    border-radius: var(--acc-radius-l);
    background: color-mix(in srgb, var(--header-tier-color, #888) 14%, var(--acc-card));
}

.dix-account .dix-loyalty__summary-points strong {
    font-family: var(--font-family-heading);
    font-size: 1.75rem;
    letter-spacing: -0.03em;
    color: var(--acc-text);
}

.dix-account .dix-loyalty__summary-points span,
.dix-account .dix-loyalty__summary-tier-mult {
    color: var(--acc-muted);
    font-size: 0.8125rem;
}

.dix-account .dix-loyalty__summary-tier-badge {
    border-radius: var(--acc-radius-s);
    font-size: 10px;
    letter-spacing: 0.08em;
}

/* LES ONGLETS DEVIENNENT DES PASTILLES.
   Souligne d'un trait bleu, l'onglet actif reprenait le lisere que la
   navigation laterale vient justement d'abandonner. Un fond plein dit la
   meme chose, et la rangee se pose sur sa propre carte. */
.dix-account .dix-loyalty__tabs {
    margin: 0;
    padding: 8px;
    gap: 4px;
    border: 0;
    border-radius: var(--acc-radius-l);
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
}

.dix-account .dix-loyalty__tabs::-webkit-scrollbar {
    display: none;
}

.dix-account .dix-loyalty__tabs .dix-loyalty__tab {
    margin: 0;
    padding: 10px 14px;
    border: 0;
    border-radius: var(--acc-radius-m);
    color: var(--acc-muted);
    font-size: 0.8125rem;
}

.dix-account .dix-loyalty__tabs .dix-loyalty__tab:hover {
    background: var(--acc-raised);
    color: var(--acc-text);
}

.dix-account .dix-loyalty__tabs .dix-loyalty__tab.is-active {
    background: var(--acc-selected);
    color: var(--acc-text);
    font-weight: var(--font-weight-semibold);
}

/* Chaque section est une carte, et son titre a la taille d'un titre de carte
   — il montait a 1.875 rem, soit la taille du solde lui-meme. */
.dix-account .dix-loyalty__section {
    margin: 0;
    padding: var(--acc-pad);
    border-radius: var(--acc-radius-l);
    background: var(--acc-card);
}

.dix-account .dix-loyalty__section + .dix-loyalty__section {
    margin-top: var(--acc-gap);
}

.dix-account .dix-loyalty__section-title {
    font-family: var(--font-family-heading);
    font-size: 1.125rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.02em;
    color: var(--acc-text);
    margin: 0 0 10px;
    padding: 0;
    border: 0;
}

.dix-account .dix-loyalty__section-intro,
.dix-account .dix-loyalty__rewards-intro {
    color: var(--acc-muted);
    font-size: 0.8125rem;
    margin: 0 0 14px;
}

/* Le bloc solde + jauge : teinte du palier, sans les 2 px de cadre. */
.dix-account .dix-loyalty__header {
    padding: var(--acc-pad);
    border: 0;
    border-radius: var(--acc-radius-l);
    background: color-mix(in srgb, var(--header-tier-color, #888) 14%, var(--acc-card));
}

.dix-account .dix-loyalty__header-badge {
    border-radius: var(--acc-radius-s);
    font-size: 10px;
    letter-spacing: 0.17em;
}

.dix-account .dix-loyalty__balance-value {
    font-family: var(--font-family-heading);
    color: var(--acc-text);
}

.dix-account .dix-loyalty__balance-label,
.dix-account .dix-loyalty__multiplier,
.dix-account .dix-loyalty__gauge-next {
    color: var(--acc-muted);
}

/* Les tuiles : actions a faire, paliers, recompenses, etapes. Toutes posees
   sur la carte, aucune cernee. */
.dix-account .dix-loyalty__earn-card,
.dix-account .dix-loyalty__reward,
.dix-account .dix-loyalty__tier-card,
.dix-account .dix-loyalty__howto-step {
    border: 0;
    border-radius: var(--acc-radius-m);
    background: var(--acc-raised);
}

.dix-account .dix-loyalty__earn-card:hover,
.dix-account .dix-loyalty__reward:not(.is-locked):hover {
    border: 0;
    background: var(--acc-selected);
}

.dix-account .dix-loyalty__earn-card.is-unlocked {
    background: color-mix(in srgb, var(--acc-green) 14%, var(--acc-raised));
}

/* « Bientot disponible » se disait par un cadre en pointilles — le seul trait
   de la page a survivre. L'opacite et sa pastille suffisent. */
.dix-account .dix-loyalty__earn-card.is-coming-soon {
    border: 0;
    background: var(--acc-raised);
}

/* Le palier atteint : fond teinte de sa couleur. `box-shadow: none` en plus
   de la bordure — le cadre se dessinait en deux fois, un trait et un halo de
   1 px, et retirer le trait seul laissait le halo. */
.dix-account .dix-loyalty__tier-card.is-active {
    background: color-mix(in srgb, var(--tier-color, var(--acc-blue)) 22%, var(--acc-raised));
    box-shadow: none;
}

.dix-account .dix-loyalty__earn-card-icon,
.dix-account .dix-loyalty__howto-icon {
    border-radius: var(--acc-radius-m);
    background: color-mix(in srgb, var(--acc-pale) 14%, transparent);
    color: var(--acc-pale);
}

.dix-account .dix-loyalty__earn-card-title,
.dix-account .dix-loyalty__howto-step h3,
.dix-account .dix-loyalty__reward-name {
    font-size: 0.9375rem;
    color: var(--acc-text);
}

.dix-account .dix-loyalty__earn-card-desc,
.dix-account .dix-loyalty__howto-step p,
.dix-account .dix-loyalty__earn-card-points-suffix,
.dix-account .dix-loyalty__reward-variation {
    font-size: 0.8125rem;
    color: var(--acc-muted);
}

.dix-account .dix-loyalty__earn-card-badge {
    border-radius: var(--acc-radius-s);
    font-size: 10px;
}

/* L'historique suit les memes lignes que le tableau des commandes. */
.dix-account .dix-loyalty__history-scroll {
    border: 0;
    border-radius: var(--acc-radius-m);
    background: none;
}

.dix-account .dix-loyalty__history {
    border-collapse: separate;
    border-spacing: 0 6px;
}

.dix-account .dix-loyalty__history th {
    padding: 0 12px 4px;
    border: 0;
    background: none;
    font-size: 10px;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--acc-muted);
}

.dix-account .dix-loyalty__history td {
    padding: 12px;
    border: 0;
    background: var(--acc-raised);
    color: var(--acc-text);
    font-size: 0.8125rem;
}

.dix-account .dix-loyalty__history tbody tr > :first-child {
    border-radius: var(--acc-radius-m) 0 0 var(--acc-radius-m);
}

.dix-account .dix-loyalty__history tbody tr > :last-child {
    border-radius: 0 var(--acc-radius-m) var(--acc-radius-m) 0;
}

.dix-account .dix-loyalty__history .is-positive {
    color: var(--acc-green);
}

.dix-account .dix-loyalty__history .is-negative {
    color: var(--acc-red);
}

/* Le parrainage de cette page reprend celui du tableau de bord : c'est le
   meme objet, il ne peut pas avoir deux apparences. */
.dix-account .dix-loyalty__referral-code-value {
    font-family: var(--font-family-heading);
    font-size: 1.875rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.12em;
    color: var(--acc-text);
}

.dix-account .dix-loyalty__referral-code-label {
    color: var(--acc-muted);
    font-size: 0.8125rem;
}

.dix-account .dix-loyalty__referral-link {
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--acc-radius-m);
    background: var(--acc-field);
    color: var(--acc-text);
    font-size: 0.8125rem;
}

/* Les avis de la page : meme forme que ceux de WooCommerce ailleurs. */
.dix-account .dix-loyalty__alert,
.dix-account .dix-loyalty__empty {
    border: 0;
    border-radius: var(--acc-radius-m);
    padding: 14px 16px;
    font-size: 0.875rem;
    background: var(--acc-raised);
    color: var(--acc-text);
}

.dix-account .dix-loyalty__alert--success {
    background: color-mix(in srgb, var(--acc-green) 16%, var(--acc-card));
    color: var(--acc-text);
}

.dix-account .dix-loyalty__alert--error {
    background: color-mix(in srgb, var(--acc-red) 16%, var(--acc-card));
    color: var(--acc-text);
}

.dix-account .dix-loyalty__alert--info {
    background: color-mix(in srgb, var(--acc-blue) 16%, var(--acc-card));
    color: var(--acc-text);
}


/* ==========================================================================
   CE QUI DEFILE LE DIT
   ==========================================================================

   Deux rangees de la page defilent a l'horizontale sur mobile : le menu du
   compte et, sur « Mes points », les onglets. Rien ne le signalait — la
   barre de defilement est invisible sur telephone, et une rangee coupee net
   au bord de l'ecran se lit comme une rangee finie.

   Les deux ombres ci-dessous sont des fonds, pas des elements : celui en
   `local` suit le contenu et masque celui en `scroll`, fixe au bord. L'ombre
   n'apparait donc que du cote ou il reste quelque chose a voir, et disparait
   d'elle-meme en fin de course.
   ========================================================================== */

.dix-acc-scroller {
    background-color: var(--acc-card);
    background-image:
        linear-gradient(to right, var(--acc-card) 40%, transparent),
        linear-gradient(to left, var(--acc-card) 40%, transparent),
        linear-gradient(to right, rgba(0, 0, 0, 0.32), transparent),
        linear-gradient(to left, rgba(0, 0, 0, 0.32), transparent);
    background-position: left center, right center, left center, right center;
    background-size: 28px 100%, 28px 100%, 14px 100%, 14px 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
}

/* ==========================================================================
   LES LIENS QUI N'EN SONT PAS
   ==========================================================================

   « Mon compte » est une page WordPress : son contenu passe par `page.css`,
   ou `.page-body a` colore TOUS les liens en bleu de marque. Une carte, une
   ligne de raccourci ou un bouton plein sont des liens pour le navigateur :
   ils heritaient donc du bleu, et un bouton bleu avec un libelle bleu ne
   montrait plus rien — c'est exactement ce qui se passait.

   `.page-body a` pese (0,2,0) et se charge APRES ce fichier : une classe seule
   ne suffit ni en poids ni en ordre. D'ou le qualificatif `a` sur l'element,
   qui porte chaque regle a (0,2,1) et tranche sans `!important`.
   ========================================================================== */

/* Meme histoire pour les titres : `.page-body h2` fixe leur couleur, leur
   taille et leurs marges. Sur le fond bleu de l'accueil, « Bonjour Abel »
   repassait en couleur de texte courant — illisible en theme clair. */
/* Trois classes et non deux : la regle generique sur les titres du contenu,
   juste en dessous, est plus forte qu'un simple `.dix-account .classe` — et
   l'accueil est un titre du contenu comme les autres. */
.dix-account .dix-dashboard__hello .dix-dashboard__hello-name {
    color: #ffffff;
    font-size: clamp(1.6rem, 4vw, 2.125rem);
    margin: 0;
}

.dix-account .dix-acc-heading {
    color: var(--acc-text);
    font-size: 1.125rem;
    margin: 0;
}

.dix-account .dix-account__content h2:not([class*="dix-"]),
.dix-account .dix-account__content h3:not([class*="dix-"]) {
    color: var(--acc-text);
    margin-top: 0;
}

.dix-account a.dix-acc-btn {
    color: #ffffff;
}

.dix-account a.dix-acc-btn--ghost {
    color: var(--acc-text);
}

.dix-account a.dix-acc-card,
.dix-account a.dix-acc-row {
    color: var(--acc-text);
}

.dix-account a.dix-account-nav__link {
    color: var(--acc-muted);
}

.dix-account a.dix-account-nav__link:hover,
.dix-account .is-active a.dix-account-nav__link,
.dix-account a.dix-account-nav__link[aria-current="page"] {
    color: var(--acc-text);
}

.dix-account .woocommerce-MyAccount-navigation-link--customer-logout a.dix-account-nav__link {
    color: var(--acc-red);
}

/* La case vide d'un endpoint sans icone : elle ne se voit pas, elle aligne. */
.dix-account-nav__icon-blank {
    display: block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 991px) {
    /* Le meme ecart qu'entre deux cartes : les 24 px prevus pour separer deux
       colonnes laissaient, une fois empilees, un trou entre le menu et le
       premier bloc. */
    .dix-account__layout {
        grid-template-columns: 1fr;
        gap: var(--acc-gap);
    }

    .dix-account__sidebar {
        position: static;
    }

    /* Sur mobile, le menu se parcourt a l'horizontale : empile, il repoussait
       le contenu d'une page entiere vers le bas. */
    /* Les actions restent empilees sur mobile : cote a cote dans une carte
       pleine largeur, elles auraient l'air de deux boutons d'achat. */
    .dix-account-nav__menu {
        flex-direction: row;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .dix-account-nav__menu::-webkit-scrollbar {
        display: none;
    }

    .dix-account-nav__link {
        white-space: nowrap;
    }
}

/* UN TABLEAU NE TIENT PAS SUR UN TELEPHONE.
   Cinq colonnes sur 390 px, c'est une ligne illisible ou un defilement
   lateral. WooCommerce prevoit le repli — d'ou `shop_table_responsive` et les
   `data-title` du gabarit — mais sa feuille « smallscreen » n'est pas chargee
   par le theme : les cellules s'empilaient donc sans leurs libelles, chacune
   gardant son fond et son coin arrondi, ce qui donnait un empilement de
   pavés decousus. On ecrit le repli ici.

   Chaque ligne devient une carte, et chaque cellule une paire
   « libelle · valeur ». Le libelle vient de `data-title`, pose par le gabarit
   de WooCommerce comme par celui du tableau de bord. */
@media (max-width: 767px) {
    .dix-account .dix-account__content table.shop_table {
        border-spacing: 0;
    }

    .dix-account .dix-account__content table.shop_table thead {
        display: none;
    }

    .dix-account .dix-account__content table.shop_table tbody,
    .dix-account .dix-account__content table.shop_table tbody tr {
        display: block;
        width: 100%;
    }

    .dix-account .dix-account__content table.shop_table tbody tr {
        padding: 6px 14px;
        margin-bottom: 8px;
        border-radius: var(--acc-radius-m);
        background: var(--acc-raised);
    }

    /* `flex-end` plutot que `space-between`, et c'est le libelle qui pousse :
       une cellule peut contenir plusieurs morceaux — « 51,85 € » et
       « pour 1 article » sont deux elements — et `space-between` les ecartait
       aux deux bouts de la ligne comme s'ils n'avaient rien a voir. */
    .dix-account .dix-account__content table.shop_table tbody th,
    .dix-account .dix-account__content table.shop_table tbody td {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 5px;
        width: auto;
        padding: 8px 0;
        background: none;
        border-radius: 0;
        text-align: right;
    }

    .dix-account .dix-account__content table.shop_table tbody [data-title]::before {
        content: attr(data-title);
        flex-shrink: 0;
        margin-right: auto;
        font-size: 10px;
        font-weight: var(--font-weight-bold);
        letter-spacing: 0.17em;
        text-transform: uppercase;
        color: var(--acc-muted);
        text-align: left;
    }

    /* La cellule d'action garde son bouton a droite, sans son libelle :
       « ACTIONS » au-dessus d'un bouton nomme ne dit rien de plus. */
    .dix-account .dix-account__content table.shop_table tbody td.woocommerce-orders-table__cell-order-actions::before,
    .dix-account .dix-account__content table.shop_table tbody td[data-title="Actions"]::before {
        content: none;
    }

    /* Le bouton prend la largeur de la carte : sur un telephone, une cible
       tactile pleine largeur vaut mieux qu'un bouton perdu dans un coin. */
    .dix-account .dix-account__content table.shop_table tbody td .dix-acc-btn,
    .dix-account .dix-account__content table.shop_table tbody td .button {
        flex: 1 1 auto;
        width: 100%;
        margin: 4px 0;
    }
}

@media (max-width: 575px) {
    .dix-account {
        padding: var(--spacing-4) var(--spacing-3) var(--spacing-12);
        --acc-pad: 16px;
    }
}