/**
 * Compte : connexion et inscription (design « Login Register », section 22),
 * tableau de bord et onglets (design « My Account », section 26).
 *
 * Chargée quand is_account_page() est vrai (inc/assets.php). Les primitives
 * de formulaire (.form, .field, œil, jauge) et la note grise sont dans
 * composants.css : la commande et les adresses s'en servent aussi.
 */

/* --------------------------------------------------------------------------
   0. JETONS DE LA PAGE : dimensions que le design écrit en dur.
   -------------------------------------------------------------------------- */
:root {
    --ct-h1:           var(--fs-28);      /* titre de la page               */
    --ct-h1-sm:        var(--fs-24);      /* … sous 900 px                  */
    --ct-h2:           20px;   /* titre des cartes et des sections          */
    --ct-intro-w:     640px;   /* largeur maximale de l'intro               */
    --ct-icon:         40px;   /* plaque d'icône des cartes de connexion    */
    --ct-single-w:    560px;   /* carte seule : mot de passe perdu          */
    --ct-nav-w:       240px;   /* colonne des onglets                       */
    --ct-sticky-top:  var(--sticky-top);  /* sous le masthead collant       */
    --ct-nav-gap:       2px;   /* entre deux onglets                        */
    --ct-count-y:       1px;   /* compteur de commandes de la navigation    */
    --ct-count-x:       7px;
    --ct-stat-icon:    32px;   /* plaque d'icône des cartes d'état          */
    --ct-badge-h:      24px;   /* pilules de statut                         */
    --ct-badge-x:       9px;
    --ct-badge-gap:     5px;   /* point et texte de la pilule du compte     */
    --ct-dot:           6px;   /* point des pilules                         */
    --ct-avatar:       40px;   /* initiales du gestionnaire                 */
    --ct-link-h:       32px;   /* liens téléphone et e-mail                 */
    --ct-th-h:         40px;   /* en-tête du tableau                        */
    --ct-table-min-w: 720px;   /* le tableau défile sous cette largeur      */
    --ct-action:       36px;   /* bouton rond et bouton « Reorder »         */
    --ct-note-top:     10px;   /* note sous le tableau                      */
    --ct-item-thumb:   44px;   /* vignette du détail d'une commande         */
    --ct-item-ph:      24px;
    --ct-item-ph-r:     3px;
    --ct-sku-top:       3px;
    --ct-grand:        20px;   /* total du détail d'une commande            */
}

/* --------------------------------------------------------------------------
   1. CONNEXION ET INSCRIPTION (design 22) : la page, l'intro, les deux
   cartes. La classe « auth » est posée sur <main> par inc/compte.php.
   -------------------------------------------------------------------------- */
.auth {
    background: var(--bench);
    border-top: var(--cp-line) solid var(--line);
}

.auth__intro {
    max-width: var(--ct-intro-w);
    padding: var(--sp-40) 0 var(--sp-8);
}

.auth__intro h1 {
    margin: 0;
    font-size: var(--ct-h1);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-h2);
    line-height: var(--lh-page-title);
}

.auth__intro p {
    margin: var(--sp-8) 0 0;
    font-size: var(--fs-15);
    line-height: var(--lh-lede);
    color: var(--grey);
    text-wrap: pretty;
}

.auth__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-24);
    align-items: start;
    padding: var(--sp-24) 0 var(--sp-64);
}

/* Une seule carte (inscription fermée, mot de passe perdu) : au centre. */
.auth__grid--seule {
    grid-template-columns: minmax(0, var(--ct-single-w));
    justify-content: center;
}

.auth__card {
    padding: var(--sp-32);
}

.auth__card-head {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-14);
    margin-bottom: var(--sp-24);
}

.auth__icon {
    width: var(--ct-icon);
    height: var(--ct-icon);
    flex: none;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth__icon--slate {
    background: var(--pastel-slate-bg);
    color: var(--slate);
}

.auth__icon--green {
    background: var(--pastel-green-bg);
    color: var(--action);
}

.auth__card h2 {
    margin: 0;
    font-size: var(--ct-h2);
    font-weight: var(--fw-medium);
    line-height: var(--lh-title);
}

.auth__card-head p {
    margin: var(--sp-4) 0 0;
    font-size: var(--fs-14);
    line-height: var(--lh-lede);
    color: var(--grey);
}

/* --- 1.1 Bandeau de confiance sous les cartes (design 22.3) ---------------- */
.auth__trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-12) var(--sp-32);
    margin: 0;
    padding: 0 0 var(--sp-48);
    list-style: none;
    font-size: var(--fs-13);
    color: var(--grey);
}

.auth__trust li {
    display: flex;
    align-items: center;
    gap: var(--sp-8);
}

.auth__trust svg {
    color: var(--slate);
    flex: none;
}

/* --------------------------------------------------------------------------
   2. TABLEAU DE BORD (design 26) : titre, colonne d'onglets, contenu.
   -------------------------------------------------------------------------- */
.account {
    display: grid;
    grid-template-columns: var(--ct-nav-w) minmax(0, 1fr);
    gap: var(--sp-32);
    align-items: start;
    padding: var(--sp-16) 0 var(--sp-64);
}

.account__title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-16);
    flex-wrap: wrap;
    grid-column: 1 / -1;
    margin-bottom: var(--sp-8);
}

.account__title h1 {
    margin: 0;
    font-size: var(--ct-h1);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-h2);
    line-height: var(--lh-page-title);
}

.account__title p {
    margin: 0;
    font-size: var(--fs-14);
    color: var(--grey);
}

.account__title strong {
    color: var(--ink);
    font-weight: var(--fw-medium);
}

/* --- 2.1 Onglets (design 26.1) : colonne collante, <select> sous 900 px ---- */
.woocommerce-MyAccount-navigation {
    min-width: 0;
}

.acc-nav {
    position: sticky;
    top: var(--ct-sticky-top);
    display: flex;
    flex-direction: column;
    gap: var(--ct-nav-gap);
}

.acc-nav a {
    display: flex;
    align-items: center;
    gap: var(--sp-12);
    height: var(--touch);
    padding: 0 var(--sp-14);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-size: var(--fs-14);
    transition: background var(--ease), color var(--ease);
}

.acc-nav a:hover {
    background: var(--chrome);
    color: var(--ink);
    text-decoration: none;
}

.acc-nav a svg {
    color: var(--grey);
    flex: none;
    transition: color var(--ease);
}

.acc-nav a[aria-current="page"] {
    background: var(--pastel-green-bg);
    color: var(--action);
    font-weight: var(--fw-medium);
}

.acc-nav a[aria-current="page"] svg {
    color: var(--action);
}

.acc-nav__sep {
    height: var(--cp-line);
    margin: var(--sp-8) var(--sp-14);
    background: var(--line);
}

.acc-nav__count {
    margin-left: auto;
    padding: var(--ct-count-y) var(--ct-count-x);
    border: var(--cp-line) solid var(--line);
    border-radius: var(--pill);
    background: var(--paper);
    font-size: var(--fs-11);
    color: var(--grey);
}

.acc-nav-select {
    display: none;
    position: relative;
}

.acc-nav-select select {
    width: 100%;
    height: var(--cp-field-h);
    margin: 0;
    padding: 0 var(--touch) 0 var(--sp-14);
    border: var(--cp-line) solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--paper);
    font-size: var(--fs-15);
    font-weight: var(--fw-medium);
    color: var(--ink);
    appearance: none;
    -webkit-appearance: none;
    outline: none;
}

.acc-nav-select select:focus {
    border-color: var(--action);
}

.acc-nav-select svg {
    position: absolute;
    right: var(--sp-14);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--grey);
}

/* --- 2.2 Cartes d'état (design 26.2) ---------------------------------------- */
.status {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-16);
    margin-bottom: var(--sp-24);
}

.stat-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-12);
    min-width: 0;
    padding: var(--sp-20);
}

.stat-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-8);
}

.stat-card h2 {
    margin: 0;
    font-size: var(--fs-12);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--grey);
}

.stat-card__icon {
    width: var(--ct-stat-icon);
    height: var(--ct-stat-icon);
    flex: none;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-card__icon--green {
    background: var(--pastel-green-bg);
    color: var(--action);
}

.stat-card__icon--amber {
    background: var(--pastel-amber-bg);
    color: var(--pastel-amber-ink);
}

.stat-card__icon--orange {
    background: var(--pastel-orange-bg);
    color: var(--accent);
}

.stat-card__value {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-8);
    font-size: var(--ct-h2);
    font-weight: var(--fw-medium);
    line-height: var(--lh-page-title);
}

.stat-card__sub {
    margin: 0;
    font-size: var(--fs-13);
    line-height: var(--lh-body);
    color: var(--grey);
}

.stat-card__sub .num {
    font-variant-numeric: tabular-nums;
}

.stat-card__sub a {
    font-weight: var(--fw-medium);
}

/* Pilule de statut du compte et pilules de statut de commande : même forme. */
.badge-ok,
.st {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-6);
    height: var(--ct-badge-h);
    padding: 0 var(--ct-badge-x);
    border-radius: var(--pill);
    font-size: var(--fs-12);
    font-weight: var(--fw-medium);
    white-space: nowrap;
}

.badge-ok::before,
.st::before {
    content: "";
    width: var(--ct-dot);
    height: var(--ct-dot);
    border-radius: var(--pill);
    background: currentColor;
}

.badge-ok {
    gap: var(--ct-badge-gap);
    background: var(--pastel-green-bg);
    color: var(--action);
}

.badge-ok--pending {
    background: var(--pastel-amber-bg);
    color: var(--pastel-amber-ink);
}

/* Gestionnaire de compte */
.manager {
    display: flex;
    align-items: center;
    gap: var(--sp-12);
}

.manager__avatar {
    width: var(--ct-avatar);
    height: var(--ct-avatar);
    flex: none;
    border-radius: var(--pill);
    background: var(--pastel-slate-bg);
    color: var(--slate);
    font-size: var(--fs-13);
    font-weight: var(--fw-medium);
    display: flex;
    align-items: center;
    justify-content: center;
}

.manager strong {
    display: block;
    font-size: var(--fs-15);
    font-weight: var(--fw-medium);
}

.manager span {
    display: block;
    font-size: var(--fs-12);
    color: var(--grey);
}

.manager__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-8);
}

.manager__links a {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-6);
    height: var(--ct-link-h);
    padding: 0 var(--sp-10);
    border: var(--cp-line) solid var(--line-strong);
    border-radius: var(--pill);
    font-size: var(--fs-12);
    color: var(--ink);
    transition: border-color var(--ease);
}

.manager__links a:hover {
    border-color: var(--slate);
    color: var(--ink);
    text-decoration: none;
}

/* --- 2.3 Tableau des commandes (design 26.3) -------------------------------- */
.orders__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-16);
    flex-wrap: wrap;
    margin-bottom: var(--sp-12);
}

.orders__head h2 {
    margin: 0;
    font-size: var(--ct-h2);
    font-weight: var(--fw-medium);
}

.orders__head a {
    font-size: var(--fs-13);
}

/* Le tableau vit dans un cadre qui défile sur le côté sous 720 px. */
.tscroll {
    background: var(--paper);
    border: var(--cp-line) solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* margin et border : GeneratePress habille toute table ; rien ici. */
.otable {
    width: 100%;
    min-width: var(--ct-table-min-w);
    margin: 0;
    border: 0;
    border-collapse: collapse;
}

.otable th {
    height: var(--ct-th-h);
    padding: 0 var(--sp-16);
    border: 0;
    border-bottom: var(--cp-line) solid var(--line);
    background: var(--bench);
    font-size: var(--fs-11);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--grey);
    text-align: left;
    white-space: nowrap;
}

.otable td,
.otable tbody th {
    padding: var(--sp-14) var(--sp-16);
    border: 0;
    border-bottom: var(--cp-line) solid var(--line);
    background: transparent;
    vertical-align: middle;
    font-size: var(--fs-14);
    font-weight: var(--fw-normal);
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    text-align: left;
    white-space: nowrap;
}

.otable tbody tr:last-child td,
.otable tbody tr:last-child th {
    border-bottom: 0;
}

.otable tbody tr {
    transition: background var(--ease);
}

.otable tbody tr:hover {
    background: var(--row-hover);
}

.otable .num,
.otable th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.otable td.num {
    font-weight: var(--fw-medium);
}

.otable .ono {
    font-family: var(--mono);
    font-weight: var(--fw-medium);
    color: var(--ink);
}

.otable .ono:hover {
    color: var(--action);
    text-decoration: none;
}

.otable .items {
    font-family: var(--sans);
    font-size: var(--fs-12);
    font-weight: var(--fw-normal);
    color: var(--grey);
}

.otable .actions,
.otable th.actions {
    text-align: right;
}

/* Pilules de statut : une famille pastel par état */
.st--processing {
    background: var(--pastel-amber-bg);
    color: var(--pastel-amber-ink);
}

.st--shipped {
    background: var(--pastel-slate-bg);
    color: var(--pastel-slate-ink);
}

.st--ready {
    background: var(--pastel-orange-bg);
    color: var(--pastel-orange-ink);
}

.st--completed {
    background: var(--pastel-green-bg);
    color: var(--action);
}

.st--pending {
    background: var(--pastel-grey-bg);
    color: var(--pastel-grey-ink);
}

.st--cancelled {
    background: var(--danger-bg);
    color: var(--stock-out);
}

/* Actions d'une ligne : bouton rond (voir), pilules (payer, annuler, Reorder) */
.row-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-8);
}

/* Scopé à .row-actions : le sélecteur nu .icon-btn attrapait aussi le
   bouton rond du masthead (masqué en desktop par header.css) et le
   faisait réapparaître en double sur cette page. */
.row-actions .icon-btn,
.row-actions .icon-btn:hover,
.row-actions .icon-btn:focus {
    width: var(--ct-action);
    height: var(--ct-action);
    padding: 0;
    border: var(--cp-line) solid var(--line-strong);
    border-radius: var(--pill);
    background: var(--paper);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--ease), color var(--ease), transform var(--ease-press);
}

.row-actions .icon-btn:hover {
    border-color: var(--slate);
    text-decoration: none;
}

.row-actions .icon-btn:active {
    transform: scale(.95);
}

.btn--reorder {
    height: var(--ct-action);
    padding: 0 var(--sp-14);
    border-radius: var(--pill);
    font-size: var(--fs-13);
}

/* Les boutons a.btn--primary.button reprennent leurs couleurs dans
   composants.css (section 2, f57) ; reste ici la variante contour. */
.account a.btn--outline.button {
    border: var(--cp-line) solid var(--line-strong);
    background: transparent;
    color: var(--ink);
}

.account a.btn--outline.button:hover {
    border-color: var(--slate);
    background: transparent;
    color: var(--ink);
}

.account a.icon-btn.button,
.account a.icon-btn.button:hover {
    background: var(--paper);
    color: var(--ink);
}

.orders__note {
    margin: var(--ct-note-top) 0 0;
    font-size: var(--fs-12);
    color: var(--grey);
}

.orders__pages {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-12);
    margin-top: var(--sp-16);
}

.orders__pages .woocommerce-button--next {
    margin-left: auto;
}

/* --------------------------------------------------------------------------
   3. ONGLETS NATIFS : adresses, détails du compte, détail d'une commande,
   téléchargements, moyens de paiement. Balisage de WooCommerce, habillage du
   design : cartes, tableau, formulaires (composants.css §12), boutons.
   -------------------------------------------------------------------------- */
.woocommerce-MyAccount-content {
    min-width: 0;
}

.woocommerce-MyAccount-content > h2,
.woocommerce-MyAccount-content > h3,
.woocommerce-MyAccount-content form > h3,
.woocommerce-order-details__title,
.woocommerce-column__title {
    margin: 0 0 var(--sp-12);
    font-size: var(--ct-h2);
    font-weight: var(--fw-medium);
}

.woocommerce-MyAccount-content > p {
    margin: 0 0 var(--sp-16);
    font-size: var(--fs-14);
    line-height: var(--lh-lede);
    color: var(--grey);
}

.woocommerce-MyAccount-content mark {
    background: transparent;
    color: var(--ink);
    font-weight: var(--fw-medium);
}

/* Boutons natifs (enregistrer, télécharger, payer…) : le bouton principal. */
.woocommerce-MyAccount-content .button:not(.btn):not(.icon-btn),
.woocommerce-MyAccount-content .button:not(.btn):not(.icon-btn):focus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-8);
    height: var(--touch);
    padding: 0 var(--sp-20);
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--action);
    color: var(--paper);
    font-size: var(--fs-14);
    font-weight: var(--fw-medium);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--ease), transform var(--ease-press);
}

.woocommerce-MyAccount-content .button:not(.btn):not(.icon-btn):hover {
    background: var(--action-lift);
    color: var(--paper);
    text-decoration: none;
}

.woocommerce-MyAccount-content .button:not(.btn):not(.icon-btn):active {
    transform: scale(.95);
}

/* Adresses : les deux cartes, leur lien de modification */
.woocommerce-Addresses,
.woocommerce-columns--addresses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-16);
    margin: 0 0 var(--sp-24);
}

.woocommerce-Address,
.woocommerce-column--billing-address,
.woocommerce-column--shipping-address {
    padding: var(--sp-20);
    background: var(--paper);
    border: var(--cp-line) solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.woocommerce-Address-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-12);
    margin-bottom: var(--sp-12);
}

.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
    margin: 0;
    font-size: var(--fs-15);
    font-weight: var(--fw-medium);
}

.woocommerce-Address-title .edit {
    font-size: var(--fs-13);
}

.woocommerce-MyAccount-content address {
    font-style: normal;
    font-size: var(--fs-14);
    line-height: var(--lh-lede);
    color: var(--grey);
}

/* Formulaires natifs à deux colonnes : composants.css §12. */

.woocommerce-EditAccountForm fieldset {
    display: grid;
    gap: var(--sp-16);
    margin: var(--sp-8) 0 0;
    padding: 0;
    border: 0;
}

.woocommerce-EditAccountForm legend {
    margin-bottom: var(--sp-4);
    padding: 0;
    font-size: var(--fs-15);
    font-weight: var(--fw-medium);
}

.woocommerce-EditAccountForm .clear,
.woocommerce-address-fields .clear {
    display: none;
}

.woocommerce-address-fields .form-row-wide + .button,
.woocommerce-address-fields > .button {
    margin-top: var(--sp-16);
}

/* Tableaux natifs (détail d'une commande, téléchargements, moyens de paiement) */
.woocommerce-MyAccount-content .shop_table:not(.otable) {
    width: 100%;
    margin: 0 0 var(--sp-24);
    border: var(--cp-line) solid var(--line);
    border-radius: var(--radius);
    border-collapse: separate;
    border-spacing: 0;
    background: var(--paper);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.woocommerce-MyAccount-content .shop_table:not(.otable) th,
.woocommerce-MyAccount-content .shop_table:not(.otable) td {
    padding: var(--sp-12) var(--sp-16);
    border: 0;
    border-bottom: var(--cp-line) solid var(--line);
    font-size: var(--fs-14);
    text-align: left;
    vertical-align: middle;
}

.woocommerce-MyAccount-content .shop_table:not(.otable) thead th {
    height: var(--ct-th-h);
    padding: 0 var(--sp-16);
    background: var(--bench);
    font-size: var(--fs-11);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--grey);
    white-space: nowrap;
}

.woocommerce-MyAccount-content .shop_table:not(.otable) tfoot th,
.woocommerce-MyAccount-content .shop_table:not(.otable) tfoot td {
    background: var(--bench);
    font-weight: var(--fw-medium);
}

.woocommerce-MyAccount-content .shop_table:not(.otable) tr:last-child > * {
    border-bottom: 0;
}

.woocommerce-MyAccount-content .shop_table:not(.otable) .woocommerce-Price-amount,
.woocommerce-MyAccount-content .shop_table:not(.otable) .product-quantity {
    font-variant-numeric: tabular-nums;
}

.woocommerce-order-details .btn--reorder {
    margin-top: var(--sp-16);
}

.woocommerce-customer-details {
    margin-top: var(--sp-24);
}


/* --- 3.5 Détail d'une commande (design 25.2 et 25.3) : cartes de détails,
   tableau des articles. Servent au détail du compte et à la confirmation. */
.detail-card {
    padding: var(--sp-24);
}

.detail-card h2 {
    display: flex;
    align-items: center;
    gap: var(--sp-8);
    margin: 0 0 var(--sp-16);
    font-size: var(--fs-15);
    font-weight: var(--fw-medium);
}

.detail-card h2 svg {
    color: var(--slate);
    flex: none;
}

.kv {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sp-10) var(--sp-24);
    margin: var(--sp-14) 0;
    font-size: var(--fs-14);
}

/* GeneratePress graisse dt ; le design garde la marge du navigateur sur dd. */
.kv dt {
    margin: 0;
    font-weight: var(--fw-normal);
    color: var(--grey);
    white-space: nowrap;
}

.kv dd {
    margin: 0 0 0 var(--sp-40);
    color: var(--ink);
}

.kv dd small {
    display: block;
    margin-top: var(--cp-line-thick);
    font-size: var(--fs-12);
    color: var(--grey);
}

.kv code {
    padding: 0;
    background: transparent;
    font-family: var(--mono);
    font-size: var(--fs-13);
}

.kv__vide {
    color: var(--grey);
}

.addr {
    margin: 0;
    font-style: normal;
    font-size: var(--fs-14);
    line-height: var(--lh-address);
    color: var(--ink);
}

.addr strong {
    font-weight: var(--fw-medium);
}

.addr code {
    padding: 0;
    background: transparent;
    font-family: var(--mono);
    font-size: var(--fs-13);
    color: var(--grey);
}

.addr__ok {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-4);
    margin-top: var(--sp-4);
    font-size: var(--fs-12);
    color: var(--action);
}

.addr--contact,
.addr--shipping {
    margin-top: var(--sp-16);
    padding-top: var(--sp-16);
    border-top: var(--cp-line) solid var(--line);
    color: var(--grey);
}

.addr--shipping h3 {
    margin: 0 0 var(--sp-6);
    font-size: var(--fs-11);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--grey);
}

.addr--shipping address {
    margin: 0;
    font-style: normal;
    color: var(--ink);
}

.items__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-16);
    flex-wrap: wrap;
    margin-bottom: var(--sp-16);
}

.items__head h2 {
    margin: 0;
    font-size: var(--ct-h2);
    font-weight: var(--fw-medium);
}

.items__head h2 span {
    color: var(--grey);
    font-weight: var(--fw-normal);
}

/* Le tableau des articles : celui des commandes (.otable), sans cadre
   défilant, avec sa vignette, ses prix et ses totaux en pied. */
.items .otable {
    min-width: 0;
    margin: 0;
    background: var(--paper);
    border: var(--cp-line) solid var(--line);
    border-radius: var(--radius);
    border-collapse: separate;
    border-spacing: 0;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.items .otable th {
    white-space: normal;
}

.items .otable td {
    padding: var(--sp-12) var(--sp-16);
    white-space: normal;
}

.items .otable td.num {
    font-weight: var(--fw-normal);
    white-space: nowrap;
}

.items .otable .shipped_via {
    display: block;
    font-family: var(--sans);
    font-size: var(--fs-12);
    color: var(--grey);
}

.items .otable tbody tr:hover {
    background: transparent;
}

.otable__cell-thumb {
    width: var(--ct-item-thumb);
}

.otable__thumb {
    width: var(--ct-item-thumb);
    height: var(--ct-item-thumb);
    border-radius: var(--radius-sm);
    background: var(--bench);
    border: var(--cp-line) solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.otable__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.otable__thumb .line__ph {
    width: var(--ct-item-ph);
    height: var(--ct-item-ph);
    border-radius: var(--ct-item-ph-r);
    background: var(--placeholder);
}

.otable__name {
    display: block;
    font-weight: var(--fw-medium);
    line-height: var(--lh-card);
}

.otable__name a {
    color: var(--ink);
}

.otable__name a:hover {
    color: var(--action);
    text-decoration: none;
}

.otable__sku {
    display: block;
    margin-top: var(--ct-sku-top);
    font-family: var(--mono);
    font-size: var(--fs-12);
    color: var(--grey);
}

.items .otable .wc-item-meta {
    margin: var(--sp-4) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-12);
    color: var(--grey);
}

.items .otable .wc-item-meta p {
    display: inline;
    margin: 0;
}

.items .otable td.otable__cell-total {
    font-weight: var(--fw-medium);
}

.items .otable tfoot th,
.items .otable tfoot td {
    height: auto;
    padding: var(--sp-10) var(--sp-16);
    border: 0;
    border-top: var(--cp-line) solid var(--line);
    background: transparent;
    font-size: var(--fs-14);
    font-weight: var(--fw-normal);
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
}

.items .otable tfoot tr:first-child th,
.items .otable tfoot tr:first-child td {
    padding-top: var(--sp-16);
}

.items .otable tfoot .lbl {
    text-align: right;
    color: var(--grey);
}

.items .otable tfoot .grand th,
.items .otable tfoot .grand td {
    padding: var(--sp-16);
    font-size: var(--fs-16);
    font-weight: var(--fw-medium);
}

.items .otable tfoot .grand .lbl {
    color: var(--ink);
}

.items .otable tfoot .grand .num {
    font-size: var(--ct-grand);
}

.items .otable tfoot .grand .includes_tax {
    display: block;
    font-family: var(--sans);
    font-size: var(--fs-12);
    font-weight: var(--fw-normal);
    color: var(--grey);
}

.items .otable tfoot .note__texte {
    text-align: right;
}

.items .otable tfoot .row-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-8);
}

.items .btn--reorder {
    margin-top: var(--sp-16);
}

/* --------------------------------------------------------------------------
   9. POINTS DE RUPTURE : le design de ces pages bascule à 1024, 900 et 640.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {

    .status {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 900px) {

    .auth__grid {
        grid-template-columns: 1fr;
        gap: var(--sp-16);
        padding-bottom: var(--sp-40);
    }

    .auth__card {
        padding: var(--sp-24);
    }

    .auth__intro {
        padding-top: var(--sp-24);
    }

    .auth__intro h1,
    .account__title h1 {
        font-size: var(--ct-h1-sm);
    }

    .account {
        grid-template-columns: 1fr;
        gap: var(--sp-20);
        padding-bottom: var(--sp-40);
    }

    /* La colonne d'onglets devient un <select> ; sans JavaScript, elle reste. */
    .js .acc-nav {
        display: none;
    }

    .js .acc-nav-select {
        display: block;
    }
}

@media (max-width: 640px) {

    .status {
        grid-template-columns: 1fr;
    }

    .otable td,
    .otable tbody th {
        padding: var(--sp-12) var(--sp-14);
    }
}

@media (max-width: 520px) {

    .woocommerce-Addresses,
    .woocommerce-columns--addresses {
        grid-template-columns: 1fr;
    }
}

/* --- Détail d'une commande (design 25.5) : le tableau s'empile sous 640 --- */
@media (max-width: 640px) {

    .items .otable thead {
        display: none;
    }

    .items .otable,
    .items .otable tbody,
    .items .otable tbody tr,
    .items .otable tbody td {
        display: block;
    }

    .items .otable tbody tr {
        display: grid;
        grid-template-columns: var(--ct-item-thumb) minmax(0, 1fr) auto;
        gap: var(--sp-4) var(--sp-12);
        padding: var(--sp-12) var(--sp-16);
        border-bottom: var(--cp-line) solid var(--line);
    }

    .items .otable tbody td {
        padding: 0;
        border: 0;
    }

    .items .otable td.otable__cell-thumb {
        grid-row: 1 / 3;
    }

    .items .otable td.otable__cell-qty {
        grid-column: 2;
        font-size: var(--fs-12);
        color: var(--grey);
    }

    .items .otable td.otable__cell-total {
        grid-column: 3;
        grid-row: 1 / 3;
        align-self: center;
    }

    .items .otable td.otable__cell-unit {
        display: none;
    }

    .items .otable tfoot,
    .items .otable tfoot tr {
        display: block;
    }

    .items .otable tfoot tr {
        display: flex;
        justify-content: space-between;
        gap: var(--sp-12);
        padding: var(--sp-8) var(--sp-16);
    }

    .items .otable tfoot th,
    .items .otable tfoot td {
        padding: 0;
        border: 0;
    }

    .items .otable tfoot tr:first-child th,
    .items .otable tfoot tr:first-child td {
        padding-top: 0;
    }

    .items .otable tfoot .grand {
        padding: var(--sp-14) var(--sp-16);
        border-top: var(--cp-line) solid var(--line);
    }

    .items .otable tfoot .grand th,
    .items .otable tfoot .grand td {
        padding: 0;
    }

    .kv {
        grid-template-columns: 1fr;
        gap: var(--sp-4);
    }

    .kv dt {
        margin-top: var(--sp-8);
    }
}