/*
* Compte client Animal-Rit - DA2 « L'Écurie » (chantier C6)
*
* Habille les gabarits woocommerce/myaccount/*.php : connexion/inscription,
* tableau de bord, commandes, détail de commande, adresses, détails du
* compte, mot de passe oublié/réinitialisation.
*
* Consomme exclusivement les tokens (--c-*, --od-*, --sp-*...) et composants
* (.field/.input/.select/.btn/.table/.empty/.notice/.crumb/.pager) de
* tokens.css/base.css/components.css - fichiers gelés, non modifiés ici.
* Les classes coeur WooCommerce sont conservées dans les gabarits PHP pour
* la compatibilité des extensions ; cette feuille les habille en plus des
* composants DA2 (ex. .form-row à côté de .field), jamais à leur place.
*
* Portée : tout est scopé sous body.woocommerce-account (posée par
* wc_body_class() sur les 6 écrans du compte, y compris connexion/inscription
* puisque is_account_page() reste vrai tant qu'on est sur la page compte),
* pour ne rien faire fuiter vers la boutique ou le tunnel.
*/
/* -------------------------------------------------------------------
* 0. PAGE - la page.php générique ouvre .wrap.shop-page sans mise en page ;
* on lui donne ici le conteneur/la respiration verticale du reste du site,
* uniquement quand le contexte est le compte (ne touche pas la page Panier,
* qui passe par le même page.php côté chantier tunnel).
* ------------------------------------------------------------------- */
body.woocommerce-account .shop-page {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--pad-x);
padding-block: var(--sec-y);
}
body.woocommerce-account .shop-page > h1 {
font-size: var(--t-h2);
margin-bottom: var(--sp-6);
}
/* Lien inline dans un paragraphe de prose (ex. "Ce n'est pas vous ?
* Déconnectez-vous.") : base.css met tous les liens en color:inherit et
* text-decoration:none par défaut (les vrais liens de navigation passent par
* .lnk/.crumb/.nav déjà stylés) - sans ce filet, un lien au milieu d'une
* phrase est indiscernable du texte autour, WCAG 1.4.1. */
.acct-link-inline {
text-decoration: underline;
text-decoration-color: var(--c-line-strong);
text-underline-offset: .15em;
transition: color var(--dur-1) var(--ease), text-decoration-color var(--dur-1) var(--ease);
}
.acct-link-inline:hover {
color: var(--c-accent);
text-decoration-color: currentColor;
}
/* Notices coeur (woocommerce/notices/*.php -> .notice/.notice--*, composant
* A11 partagé) : seule leur position au sommet du flux de contenu du compte
* est ajustée ici. */
body.woocommerce-account .woocommerce-notices-wrapper:empty { display: none; }
body.woocommerce-account .woocommerce-notices-wrapper {
margin-bottom: var(--sp-6);
}
body.woocommerce-account .woocommerce-notices-wrapper .notice { margin-bottom: var(--sp-3); }
body.woocommerce-account .woocommerce-notices-wrapper .notice:last-child { margin-bottom: 0; }
/* -------------------------------------------------------------------
* 1. STRUCTURE DEUX COLONNES (.acct.l-split, my-account.php)
* ------------------------------------------------------------------- */
.acct.l-split { gap: 0; }
/* .l-rail (base.css) n'a pas de min-width:0, contrairement à .l-flow. Sans
* cette ligne, la rangée de pills horizontale du nav mobile (voir section 2)
* impose sa largeur min-content (~700px, la somme de ses pills sans
* retour à la ligne) à la piste de grille .l-split entière, qui grossit en
* conséquence et fait déborder toute la page à 390px - le overflow-x:auto
* posé sur le ne sert à rien si son ancêtre grid refuse déjà de
* rétrécir en dessous de ce min-content. */
.acct-nav { min-width: 0; }
.acct__flow { padding-block: var(--sp-7) var(--sp-9); min-width: 0; }
@media (min-width: 61rem) {
.acct__flow { padding-inline-start: clamp(2rem, 4vw, var(--sp-9)); }
}
/* -------------------------------------------------------------------
* 2. NAVIGATION DU COMPTE (.acct-nav, navigation.php)
* Ledger typographique : numéro auto-incrémenté en compteur CSS, cohérent
* avec le traitement .univ__idx de la liste univers, sans dupliquer sa
* mise en page (grille pensée pour une photo, pas pour une nav verticale).
* ------------------------------------------------------------------- */
/* .l-rail (base.css) porte padding:var(--pad-x) sur les 4 côtés ; le rail
* vit ici dans .shop-page qui a déjà son propre padding-inline:var(--pad-x)
* (section 0), donc le gutter horizontal ne doit pas se cumuler - seul le
* padding vertical du rail est repris. */
.acct-nav { padding-block: var(--sp-6); padding-inline: 0; }
.acct-nav__list ul { counter-reset: acct-nav; border-top: 1px solid var(--c-line); }
.acct-nav__list li { counter-increment: acct-nav; border-bottom: 1px solid var(--c-line); }
.acct-nav .woocommerce-MyAccount-navigation-link a {
display: flex;
align-items: center;
gap: var(--sp-3);
min-height: 48px;
padding-block: var(--sp-3);
font-size: var(--t-small);
letter-spacing: .02em;
color: var(--c-ink-soft);
border-left: 2px solid transparent;
padding-left: var(--sp-3);
transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.acct-nav .woocommerce-MyAccount-navigation-link a::before {
content: counter(acct-nav, decimal-leading-zero);
font-family: var(--od-serif);
font-size: var(--t-micro);
letter-spacing: .1em;
color: var(--c-deco-ink);
flex: 0 0 auto;
}
.acct-nav .woocommerce-MyAccount-navigation-link a:hover {
color: var(--c-ink);
background: var(--c-muted);
}
.acct-nav .woocommerce-MyAccount-navigation-link.is-active a,
.acct-nav .woocommerce-MyAccount-navigation-link a[aria-current="page"] {
color: var(--c-ink);
font-weight: 500;
border-left-color: var(--c-cta);
background: var(--c-muted);
}
/* Déconnexion : reste dans la même liste mais visuellement plus discrète,
* ce n'est pas une destination, c'est une sortie. */
.acct-nav .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--c-ink-faint); }
.acct-nav .woocommerce-MyAccount-navigation-link--customer-logout a::before { content: "→"; font-family: var(--od-sans); }
.acct-nav__help { padding-top: var(--sp-6); }
.acct-nav__help .lnk { margin-top: var(--sp-2); }
/* Mobile : rail horizontal scrollable au lieu de la colonne sticky, pour ne
* pas pousser tout le contenu du compte sous une longue liste verticale. */
@media (max-width: 60.99rem) {
.acct-nav { padding-block: var(--sp-5); }
.acct-nav__list ul {
display: flex;
gap: var(--sp-2);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-top: 0;
padding-bottom: var(--sp-2);
}
.acct-nav__list li { border-bottom: 0; flex: 0 0 auto; }
.acct-nav .woocommerce-MyAccount-navigation-link a {
border-left: 0;
border: 1px solid var(--c-line-strong);
border-radius: var(--r-pill);
padding-inline: var(--sp-4);
min-height: 44px;
}
.acct-nav .woocommerce-MyAccount-navigation-link.is-active a,
.acct-nav .woocommerce-MyAccount-navigation-link a[aria-current="page"] {
background: var(--c-ink);
color: var(--c-bg);
border-color: var(--c-ink);
}
.acct-nav__help { display: none; }
}
/* -------------------------------------------------------------------
* 3. TABLEAU DE BORD (dashboard.php)
* ------------------------------------------------------------------- */
.acct-tiles {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
background: var(--c-line);
border: 1px solid var(--c-line);
border-radius: var(--r-sm);
overflow: hidden;
margin-top: var(--sp-7);
}
@media (min-width: 40rem) { .acct-tiles { grid-template-columns: repeat(3, 1fr); } }
.acct-tile {
background: var(--c-bg);
padding: var(--sp-5);
display: flex;
flex-direction: column;
gap: var(--sp-2);
min-height: 44px;
transition: background-color var(--dur-1) var(--ease);
}
.acct-tile:hover { background: var(--c-muted); }
.acct-tile__no { font-family: var(--od-serif); font-size: var(--t-small); color: var(--c-deco-ink); letter-spacing: .1em; }
.acct-tile__label { font-family: var(--od-serif); font-size: 1.15rem; letter-spacing: -.01em; }
.acct-tile__desc { font-size: var(--t-small); color: var(--c-ink-soft); }
/* -------------------------------------------------------------------
* 4. CONNEXION / INSCRIPTION (form-login.php)
* ------------------------------------------------------------------- */
.acct-auth.u-columns { display: grid; grid-template-columns: 1fr; gap: var(--sp-8); }
@media (min-width: 54rem) {
/* Deux enfants réels (.u-column1/.u-column2) : deux pistes, pas trois -
* la ligne verticale de séparation est un border-left, pas une piste de
* grille dédiée (avec 3 pistes pour 2 enfants, le 2e enfant héritait de
* la piste du milieu et s'écrasait à 1px de large). */
.acct-auth.u-columns { grid-template-columns: 1fr 1fr; align-items: start; }
.acct-auth .u-column1 { padding-right: var(--sp-8); }
.acct-auth .u-column2 { padding-left: var(--sp-8); border-left: 1px solid var(--c-line); }
}
.acct-auth .u-column1, .acct-auth .u-column2 { min-width: 0; }
.acct-form { max-width: 30rem; }
.acct-form__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
margin-top: var(--sp-2);
}
.acct-form__actions .btn { flex: 1 1 auto; }
/* Sans flex-shrink:0, le label du "se souvenir de moi" se compresse et
* repasse à la ligne mot par mot dès que le bouton réclame sa part - la
* case doit garder sa largeur de contenu, c'est au bouton de s'ajuster. */
.acct-form__actions .check { flex: 0 0 auto; white-space: nowrap; }
@media (min-width: 26rem) { .acct-form__actions { flex-wrap: nowrap; } }
.acct-form__row2 { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 30rem) { .acct-form__row2 { grid-template-columns: 1fr 1fr; } }
/* -------------------------------------------------------------------
* 5. CHAMPS COEUR WOOCOMMERCE (form-edit-address.php via
* woocommerce_form_field() - pays/état gérés par le coeur, balisage non
* remplacé) : on rejoue le look de .field/.input sur les classes natives
* (form-row, woocommerce-input-wrapper, input-text, select) plutôt que de
* dupliquer les composants, pour rester correct même si une extension ajoute
* un champ via woocommerce_address_to_edit sans passer par nos gabarits.
* ------------------------------------------------------------------- */
body.woocommerce-account .form-row {
display: flex;
flex-direction: column;
gap: var(--sp-2);
margin-bottom: var(--sp-5);
}
body.woocommerce-account .form-row:last-child { margin-bottom: 0; }
body.woocommerce-account .form-row > label {
font-size: var(--t-micro);
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--c-ink-soft);
}
body.woocommerce-account .form-row .required { color: var(--c-danger); text-decoration: none; }
body.woocommerce-account .form-row .optional { color: var(--c-ink-faint); text-transform: none; letter-spacing: 0; font-weight: 400; }
body.woocommerce-account .form-row .woocommerce-input-wrapper { display: block; }
body.woocommerce-account .form-row .description {
display: block;
margin-top: var(--sp-2);
font-size: var(--t-small);
color: var(--c-ink-faint);
}
/* !important sur background/color/border : le coeur WooCommerce pose
* .woocommerce form .form-row .input-text, .woocommerce form .form-row select
* { background-color:#fff; color:#000; border:...var(--wc-form-border-color) }
* (woocommerce.css) - 3 classes + 1 type = specificite (0,3,1), superieure a
* la regle ci-dessous (0,2,0) malgre l'enqueue plus tardif d'account.css.
* Sans !important, TOUS les champs de saisie du compte (E1, E5, E6) restaient
* blanc/noir fixes au lieu de suivre --c-bg/--c-ink du theme - invisible en
* clair (blanc proche du papier), tres visible en sombre (encarts blancs
* plaques sur fond navy) et surtout catastrophique pour le placeholder
* (--c-ink-faint = ivoire a 52% d'opacite, quasi invisible sur fond blanc
* force). Constat QA capture E5 sombre. */
body.woocommerce-account .input-text,
body.woocommerce-account select.select,
body.woocommerce-account select.country_select,
body.woocommerce-account select.state_select,
body.woocommerce-account select.country_to_state {
width: 100%;
min-height: 44px;
padding: var(--sp-3) var(--sp-4);
background: var(--c-bg) !important;
color: var(--c-ink) !important;
border: 1px solid var(--c-line-strong) !important;
border-radius: var(--r-sm);
font-size: var(--t-body);
font-weight: 300;
font-family: inherit;
transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
body.woocommerce-account .input-text::placeholder { color: var(--c-ink-faint) !important; }
body.woocommerce-account .input-text:hover,
body.woocommerce-account select.select:hover,
body.woocommerce-account select.country_select:hover,
body.woocommerce-account select.state_select:hover { border-color: var(--c-ink-soft) !important; }
body.woocommerce-account .input-text:focus,
body.woocommerce-account select.select:focus,
body.woocommerce-account select.country_select:focus,
body.woocommerce-account select.state_select:focus {
border-color: var(--c-accent) !important;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 22%, transparent);
outline: none;
}
body.woocommerce-account select.select,
body.woocommerce-account select.country_select,
body.woocommerce-account select.state_select,
body.woocommerce-account select.country_to_state {
appearance: none;
padding-right: var(--sp-8);
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: right 1.375rem center, right 1rem center;
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
}
/* Validation coeur : le JS de WooCommerce pose .woocommerce-invalid sur le
* .form-row en cas d'échec et .woocommerce-validated au succès. On relie
* visuellement l'état au champ, le message reste porté par la bannière
* .notice--err au sommet du contenu (role="alert", woocommerce/notices/error.php)
* plutôt qu'un texte dupliqué sous chaque champ. */
body.woocommerce-account .form-row.woocommerce-invalid .input-text,
body.woocommerce-account .form-row.woocommerce-invalid select {
border-color: var(--c-danger);
}
body.woocommerce-account .form-row.woocommerce-invalid > label { color: var(--c-danger); }
/* Champs cachés (ex. state select sans état pour le pays choisi) : ne pas
* laisser le form-row occuper un espace vide dans la mise en page. */
body.woocommerce-account .form-row[style*="display: none"] { margin: 0; }
/* Champs pleine largeur / demi-largeur (form-row-first/last/wide, posés par
* woocommerce_form_field() et par nos gabarits statiques) */
body.woocommerce-account .woocommerce-address-fields__field-wrapper {
display: grid;
grid-template-columns: 1fr;
gap: 0 var(--sp-5);
}
@media (min-width: 30rem) {
body.woocommerce-account .woocommerce-address-fields__field-wrapper { grid-template-columns: 1fr 1fr; }
body.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row-wide { grid-column: 1 / -1; }
}
.acct-fieldset { border: 0; padding: var(--sp-6) 0 0; margin-top: var(--sp-6); border-top: 1px solid var(--c-line); }
.acct-fieldset legend {
padding: 0;
margin-bottom: var(--sp-5);
font-size: var(--t-micro);
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--c-deco-ink);
}
/* -------------------------------------------------------------------
* 6. COMMANDES (orders.php) - table réutilisée telle quelle (.table/.table__wrap,
* composant A11) ; seules les cellules propres aux commandes (statut, actions)
* reçoivent une classe DA2 spécifique à ce chantier.
* ------------------------------------------------------------------- */
.acct-orders { margin-top: var(--sp-6); }
.acct-orders .table th, .acct-orders .table td { white-space: nowrap; }
.acct-orders .woocommerce-orders-table__cell-order-number { white-space: normal; }
/* Pastille de statut - vocabulaire de couleur volontairement restreint : le
* succès et l'alerte reprennent --c-success/--c-danger déjà définis pour les
* messages système, plutôt que d'inventer une nouvelle palette de statuts. */
.acct-status {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
font-size: var(--t-micro);
letter-spacing: .08em;
text-transform: uppercase;
white-space: nowrap;
}
.acct-status::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--c-ink-faint);
flex: 0 0 auto;
}
.acct-status--completed::before,
.acct-status--processing::before { background: var(--c-success); }
.acct-status--on-hold::before,
.acct-status--pending::before { background: var(--c-cta); }
.acct-status--cancelled::before,
.acct-status--failed::before,
.acct-status--refunded::before { background: var(--c-danger); }
.acct-orders__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.acct-orders__actions .btn { white-space: nowrap; }
/* A 390px, la table reste lisible par défilement horizontal contrôlé
* (.table__wrap { overflow-x:auto } de components.css) plutôt que par un
* empilement en carte : le visiteur garde les colonnes alignées. Constat de
* QA (captures 390px) : sans indice, les colonnes Total et Actions - qui
* portent les boutons Voir/Payer - sortent entièrement du cadre sans que
* rien ne suggère qu'il y a plus à voir. Deux mesures, pas une seule :
* (1) la colonne Date, la moins utile au premier coup d'oeil (la date reste
* visible sur le détail de la commande), est masquée pour rapprocher
* Actions du bord visible ; (2) l'indication manuscrite reprend le motif
* déjà utilisé pour le rayon panoramique (.shelf__hint, "le rayon défile
* pendant que vous descendez"), plutôt que d'inventer un nouveau motif. */
.acct-orders__hint { display: none; }
@media (max-width: 26.99rem) {
.acct-orders .table th, .acct-orders .table td { padding: var(--sp-3) var(--sp-3); }
.acct-orders .woocommerce-orders-table__header-order-date,
.acct-orders .woocommerce-orders-table__cell-order-date { display: none; }
.acct-orders__hint { display: block; margin-top: var(--sp-5); }
.acct-orders { margin-top: var(--sp-3); }
}
/* -------------------------------------------------------------------
* 7. DÉTAIL DE COMMANDE (view-order.php + order/order-details.php coeur,
* non surchargé - voir le commentaire en tête de view-order.php)
* ------------------------------------------------------------------- */
.acct-order-summary { color: var(--c-ink-soft); margin-top: var(--sp-3); }
.acct-order-summary time { color: var(--c-ink); font-weight: 500; }
.acct-notes { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); }
.acct-notes__item {
padding: var(--sp-4) var(--sp-5);
border: 1px solid var(--c-line);
border-left: 3px solid var(--c-line-gold);
border-radius: var(--r-sm);
background: var(--c-bg-elev);
}
.acct-notes__item .meta { margin-bottom: var(--sp-2); }
.acct-notes__item .description p { font-size: var(--t-small); color: var(--c-ink-soft); }
.acct-notes__item .description p:not(:last-child) { margin-bottom: var(--sp-2); }
/* order/order-details.php (coeur) : tableau des articles + totaux. Mêmes
* classes que le panier (shop_table, product-name, product-total) - habillage
* en cohérence avec .table plutôt qu'une réécriture du gabarit, ce calcul
* (totaux, remises, taxes) reste au coeur WooCommerce. */
.acct-order-details .woocommerce-order-details__title { font-size: var(--t-h3); margin-bottom: var(--sp-5); }
.acct-order-details table.shop_table {
width: 100%;
border-collapse: collapse;
font-size: var(--t-small);
margin-bottom: var(--sp-6);
}
.acct-order-details table.shop_table th,
.acct-order-details table.shop_table td {
padding: var(--sp-4) var(--sp-3);
text-align: left;
border-bottom: 1px solid var(--c-line);
vertical-align: top;
}
.acct-order-details table.shop_table thead th {
font-size: var(--t-micro);
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--c-ink-soft);
}
.acct-order-details table.shop_table tfoot th { text-align: left; font-weight: 400; color: var(--c-ink-soft); }
.acct-order-details table.shop_table tfoot tr:last-child th,
.acct-order-details table.shop_table tfoot tr:last-child td { border-bottom: 0; font-weight: 500; color: var(--c-ink); font-size: 1rem; }
.acct-order-details .product-total { text-align: right; white-space: nowrap; }
.acct-order-details .wc-item-meta { margin-top: var(--sp-2); font-size: var(--t-micro); color: var(--c-ink-faint); list-style: none; padding: 0; }
.acct-order-details .order-actions-button,
.acct-order-details a.button { display: inline-flex; align-items: center; min-height: 44px; padding: var(--sp-2) var(--sp-5); border-radius: var(--r-sm); border: 1px solid var(--c-line-strong); font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; margin: 0 var(--sp-2) var(--sp-2) 0; transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease); }
.acct-order-details .order-actions-button:hover,
.acct-order-details a.button:hover { border-color: var(--c-ink); background: var(--c-muted); }
/* Adresses de facturation/livraison affichées sous le tableau
* (order/order-details-customer.php, coeur) */
.acct-order-details address {
font-style: normal;
font-size: var(--t-small);
color: var(--c-ink-soft);
line-height: var(--lh-body);
}
/* .woocommerce-customer-details (order/order-details-customer.php) est le
* conteneur EXTÉRIEUR : il n'a qu'un seul enfant, soit .col2-set (livraison
* différente de facturation), soit directement une
(livraison
* identique - pas de .col2-set du tout dans ce cas). Seul .col2-set est une
* grille 2 colonnes ; l'appliquer aussi à son parent revient à couper
* l'espace en quatre au lieu de deux (constat QA : adresses écrasées à
* l'écran 1440px). */
.acct-order-details .woocommerce-customer-details { margin-top: var(--sp-2); }
.acct-order-details .col2-set { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); }
@media (min-width: 40rem) {
.acct-order-details .col2-set { grid-template-columns: 1fr 1fr; }
}
/* Le coeur WooCommerce (woocommerce-layout.css) pose .woocommerce-page
* .col2-set .col-1/.col-2 { float:left/right; width:48% } - le corps porte
* bien la classe woocommerce-page sur le compte. float est sans effet sur un
* enfant de grille, mais width:48% s'applique quand meme et retaille chaque
* carte a 48% de sa PROPRE piste de grille (deja ~50% du conteneur), d'ou des
* cartes ecrasees a un quart de la largeur attendue avec titres coupes mot par
* mot. Constat QA (capture desktop 1280px, adresses + detail de commande).
* !important necessaire : la regle coeur a 3 classes (0,3,0), une regle a
* 2 classes ne la bat pas malgre l'ordre d'enqueue plus tardif d'account.css.
* Placement explicite grid-column/grid-row : meme constat QA que
* .acct-addresses .col-1/.col-2 ci-dessous, sans lui les deux blocs
* d'adresse retombent chacun sur sa propre ligne au lieu de cote a cote. */
.acct-order-details .col2-set .col-1,
.acct-order-details .col2-set .col-2 { float: none !important; width: auto !important; min-width: 0; grid-row: 1; }
.acct-order-details .col2-set .col-1 { grid-column: 1; }
.acct-order-details .col2-set .col-2 { grid-column: 2; }
@media (max-width: 39.99rem) {
.acct-order-details .col2-set .col-1,
.acct-order-details .col2-set .col-2 { grid-column: 1; grid-row: auto; }
}
.acct-order-details .col2-set h2,
.acct-order-details .woocommerce-column__title { font-size: var(--t-h4); margin-bottom: var(--sp-3); }
@media (max-width: 26.99rem) {
.acct-order-details table.shop_table th,
.acct-order-details table.shop_table td { padding: var(--sp-3); }
}
/* -------------------------------------------------------------------
* 8. ADRESSES (my-address.php)
* ------------------------------------------------------------------- */
.acct-addresses.u-columns { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); }
@media (min-width: 40rem) { .acct-addresses.u-columns { grid-template-columns: 1fr 1fr; } }
/* Meme correctif que .acct-order-details .col2-set ci-dessus, meme cause :
* woocommerce-layout.css pose .woocommerce-page .col2-set .col-1/.col-2
* { width:48% }, jamais neutralise avant ce chantier - chaque carte
* d'adresse retombait a 48% de sa piste de grille (~24% du conteneur au
* lieu de 50%), titres coupes mot par mot. Constat QA capture desktop
* 1280px. !important necessaire, voir commentaire equivalent plus haut.
* Placement explicite (grid-column/grid-row) plutot que le flux automatique :
* constat QA, sans cette ligne les deux cartes atterrissent chacune sur sa
* propre ligne (pas cote a cote) des que .col-1/.col-2 restent sur
* grid-column:auto dans ce conteneur - deux classes coeur WooCommerce dont
* l'interaction exacte avec l'auto-placement n'est pas a rejouer, le
* placement explicite est la solution robuste. */
.acct-addresses .col-1,
.acct-addresses .col-2 { float: none !important; width: auto !important; min-width: 0; grid-row: 1; }
.acct-addresses .col-1 { grid-column: 1; }
.acct-addresses .col-2 { grid-column: 2; }
@media (max-width: 39.99rem) {
.acct-addresses .col-1, .acct-addresses .col-2 { grid-column: 1; grid-row: auto; }
}
.acct-address {
padding: clamp(1.25rem, 2.6vw, var(--sp-6));
border: 1px solid var(--c-line);
border-radius: var(--r-sm);
min-width: 0;
}
.acct-address__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--sp-4);
margin-bottom: var(--sp-4);
padding-bottom: var(--sp-3);
border-bottom: 1px solid var(--c-line);
}
.acct-address__head h3 { font-size: var(--t-h4); }
.acct-address__head .lnk { font-size: var(--t-micro); flex: 0 0 auto; }
.acct-address address { font-style: normal; font-size: var(--t-small); color: var(--c-ink-soft); line-height: var(--lh-body); }
/* -------------------------------------------------------------------
* 9. RESPONSIVE FIN - garantit zéro débordement horizontal à 390px sur les
* blocs propres au compte (le reste, .l-container/.table__wrap, est déjà
* contraint par base.css/components.css).
* ------------------------------------------------------------------- */
@media (max-width: 26.99rem) {
.acct__flow { padding-inline: 0; }
.acct-tiles { grid-template-columns: 1fr; }
.acct-form { max-width: none; }
.acct-auth.u-columns { gap: var(--sp-7); }
}