/* =========================================================================
   WooCommerce — Espace compte : page de connexion
   Couche thème au-dessus des styles WooCommerce classiques (le contenu de la
   page Mon compte vient du shortcode [woocommerce_my_account] → markup
   « classique » .woocommerce-form-login, pas les blocs wc-block-*).
   Enqueue conditionnel is_account_page() dans inc/woo-conf.php.

   ⚠️ Scopé .woocommerce-account:not(.logged-in) → ne cible QUE les vues
   déconnectées (connexion, mot de passe perdu). Le tableau de bord connecté
   (body.logged-in) n'est pas touché — il sera traité séparément.
   Tokens/valeurs calqués sur checkout.css (champs) et le bouton « Commander »
   (bouton principal doré + hover) pour rester cohérent avec le reste du site.
   ========================================================================= */

/* ── Respiration : le contenu compte ne colle pas au header (ni au footer) ──
   S'applique aux deux états (connexion + tableau de bord). Le <main> d'archive
   n'est pas .wp-block-post-content, mais ici le contenu vit dans .entry-content
   (post-content) sans marge propre → on l'ajoute sur le wrapper .woocommerce. */
.woocommerce-account .woocommerce {
    margin-block: var(--wp--preset--spacing--xxl);
}

/* ── Formulaire de connexion : carte étroite et centrée ─────────────────────
   On contraint le FORM (et non le wrapper .woocommerce, que la mise en page
   « constrained » du thème borne déjà à contentSize avec la même spécificité →
   conflit). La carte reprend la bordure grise du site, coins nets. */
.woocommerce-account:not(.logged-in) .woocommerce-form-login {
    max-width: 460px;
    margin-inline: auto;
    padding: var(--wp--preset--spacing--l);
    border: 1px solid var(--wp--custom--color--gris-bordure);
    border-radius: var(--wp--custom--radius--xs, 0px);
}

/* ── Titre « Connexion » : centré, typo de titre du site (Fraunces) ─────── */
.woocommerce-account:not(.logged-in) .woocommerce > h2 {
    text-align: center;
    margin-bottom: var(--wp--preset--spacing--l);
    font-family: var(--wp--preset--font-family--primary);
    font-size: var(--wp--preset--font-size--xxxxl);
    font-weight: var(--wp--custom--font-weight--regular);
    line-height: var(--wp--custom--line-height--tight, 1.2);
    color: var(--wp--preset--color--primary);
}

/* ── Espacement des rangées du formulaire ───────────────────────────────── */
.woocommerce-account:not(.logged-in) .woocommerce-form-login .form-row {
    margin-bottom: var(--wp--preset--spacing--m);
}

/* ── Champs texte : bordure grise, coins nets, focus doré (comme checkout) ─ */
.woocommerce-account:not(.logged-in) .woocommerce-form-login .input-text {
    width: 100%;
    box-sizing: border-box;
    padding: 0.85em 1em;
    border: 1px solid var(--wp--custom--color--gris-bordure);
    border-radius: var(--wp--custom--radius--xs, 0px);
    background: var(--wp--preset--color--white);
    font-family: var(--wp--preset--font-family--secondary);
    font-size: var(--wp--preset--font-size--s, 1rem);
    color: var(--wp--preset--color--primary);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.woocommerce-account:not(.logged-in) .woocommerce-form-login .input-text:focus {
    border-color: var(--wp--preset--color--secondary);
    box-shadow: 0 0 0 1px var(--wp--preset--color--secondary);
    outline: none;
}

/* Libellés / case « se souvenir » : gris discret, JetBrains Mono. */
.woocommerce-account:not(.logged-in) .woocommerce-form-login label {
    font-family: var(--wp--preset--font-family--secondary);
    color: var(--wp--preset--color--primary);
}

.woocommerce-account:not(.logged-in) .woocommerce-form-login__rememberme {
    font-family: var(--wp--preset--font-family--tertiary);
    font-size: var(--wp--preset--font-size--xs);
    color: var(--wp--preset--color--quinary);
}

/* ── Bouton « Se connecter » : bouton principal doré + hover identique ────
   Réplique du bouton « Commander » (checkout.css/cart.css). Sélecteur
   0,3,0 (login__submit) pour battre `.woocommerce button.button` (0,2,1). */
.woocommerce-account:not(.logged-in) .woocommerce-form-login .woocommerce-form-login__submit {
    display: block;
    width: 100%;
    margin-top: var(--wp--preset--spacing--s);
    padding: 0.95em 1.5em;
    background: var(--wp--preset--color--secondary);
    color: var(--wp--preset--color--primary);
    border: 1.5px solid var(--wp--preset--color--secondary);
    border-radius: 0;
    font-family: var(--wp--preset--font-family--secondary);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.woocommerce-account:not(.logged-in) .woocommerce-form-login .woocommerce-form-login__submit:hover,
.woocommerce-account:not(.logged-in) .woocommerce-form-login .woocommerce-form-login__submit:focus {
    background: var(--wp--custom--color--or-hover);
    border-color: var(--wp--custom--color--or-hover);
    color: var(--wp--preset--color--primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(193, 154, 107, .45);
}

/* ── Lien « Mot de passe perdu ? » : centré, discret ────────────────────── */
.woocommerce-account:not(.logged-in) .woocommerce-form-login .lost_password,
.woocommerce-account:not(.logged-in) .woocommerce-LostPassword {
    margin-top: var(--wp--preset--spacing--m);
    text-align: center;
    font-family: var(--wp--preset--font-family--tertiary);
    font-size: var(--wp--preset--font-size--xs);
}


/* =========================================================================
   Tableau de bord connecté (body.logged-in)
   Markup classique WooCommerce : .woocommerce > nav.woocommerce-MyAccount-
   navigation + div.woocommerce-MyAccount-content. Restylé dans l'esprit du
   site (Fraunces titres · Inter Tight courant · JetBrains Mono méta/overline ·
   or pour les actions). Responsive : la nav passe au-dessus du contenu ≤782px.
   ========================================================================= */

/* ── Mise en page 2 colonnes (flex, remplace les floats natifs de WC) ──────
   Contenu en pleine largeur « wide » : .woocommerce est un enfant direct de
   .entry-content (is-layout-constrained) qui le borne à contentSize → on force
   wideSize (centré). Spécificité 0,3,0 > la règle de layout `:where(…)` (0,1,0). */
.woocommerce-account.logged-in .woocommerce {
    display: flex;
    align-items: flex-start;
    gap: var(--wp--preset--spacing--xxl);
    max-width: var(--wp--style--global--wide-size, 1340px);
    margin-inline: auto;
}

.woocommerce-account.logged-in .woocommerce-MyAccount-navigation {
    flex: 0 0 clamp(200px, 24%, 280px);
    float: none;
    width: auto;
}

.woocommerce-account.logged-in .woocommerce-MyAccount-content {
    flex: 1 1 auto;
    float: none;
    width: auto;
    min-width: 0; /* autorise le rétrécissement des tableaux larges */
}

/* ── Menu latéral du compte ──────────────────────────────────────────────── */
.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--wp--custom--color--gris-bordure);
    background:var(--wp--preset--color--tertiary);
}

.woocommerce-account.logged-in .woocommerce-MyAccount-navigation li {
    margin: 0;
    border-bottom: 1px solid var(--wp--custom--color--gris-bordure);
    padding:0;
}

.woocommerce-account.logged-in .woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 0.85em 0.4em;
    font-family: var(--wp--preset--font-family--secondary);
    font-size: var(--wp--preset--font-size--s, 1rem);
    font-weight: var(--wp--custom--font-weight--medium, 500);
    color: var(--wp--preset--color--primary);
    text-decoration: none;
    letter-spacing: 0.01em;
    box-shadow: inset 0 0 0 0 var(--wp--preset--color--secondary);
    transition: color .18s ease, padding-left .18s ease, box-shadow .18s ease;
}

.woocommerce-account.logged-in .woocommerce-MyAccount-navigation li a:hover {
    color: var(--wp--preset--color--secondary);
    padding-left: 0.9em;
}

/* Élément actif : texte doré + filet doré à gauche (inset, sans décalage). */
.woocommerce-account.logged-in .woocommerce-MyAccount-navigation li.is-active a {
    color: var(--wp--preset--color--secondary);
    padding-left: 0.9em;
    box-shadow: inset 3px 0 0 0 var(--wp--preset--color--secondary);
}

/* Lien « Se déconnecter » : séparé visuellement (discret, mono). */
.woocommerce-account.logged-in .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
    font-family: var(--wp--preset--font-family--tertiary);
    font-size: var(--wp--preset--font-size--xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wp--preset--color--quinary);
}

.woocommerce-account.logged-in .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
    color: var(--wp--preset--color--secondary);
}

/* ── Contenu : typographie ───────────────────────────────────────────────── */
.woocommerce-account.logged-in .woocommerce-MyAccount-content p,
.woocommerce-account.logged-in .woocommerce-MyAccount-content li,
.woocommerce-account.logged-in .woocommerce-MyAccount-content address {
    font-family: var(--wp--preset--font-family--secondary);
    color: var(--wp--preset--color--primary);
}

.woocommerce-account.logged-in .woocommerce-MyAccount-content h1,
.woocommerce-account.logged-in .woocommerce-MyAccount-content h2,
.woocommerce-account.logged-in .woocommerce-MyAccount-content h3 {
    font-family: var(--wp--preset--font-family--primary);
    font-weight: var(--wp--custom--font-weight--regular);
    line-height: var(--wp--custom--line-height--tight, 1.2);
    color: var(--wp--preset--color--primary);
}

/* Tailles raisonnables (le h2 natif du thème est très grand). */
.woocommerce-account.logged-in .woocommerce-MyAccount-content h2 {
    font-size: var(--wp--preset--font-size--xxl);
}

.woocommerce-account.logged-in .woocommerce-MyAccount-content h3 {
    font-size: var(--wp--preset--font-size--xl);
}

/* Liens en clair (hors boutons) : doré, souligné. */
.woocommerce-account.logged-in .woocommerce-MyAccount-content a:not(.button):not(.wp-element-button) {
    color: var(--wp--preset--color--secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .18s ease;
}

.woocommerce-account.logged-in .woocommerce-MyAccount-content a:not(.button):not(.wp-element-button):hover {
    color: var(--wp--custom--color--or-hover);
}

/* ── Champs de formulaire (Détails du compte, Adresses) ──────────────────── */
.woocommerce-account.logged-in .woocommerce :is(
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input.input-text,
    textarea,
    select
) {
    width: 100%;
    box-sizing: border-box;
    padding: 0.85em 1em;
    border: 1px solid var(--wp--custom--color--gris-bordure);
    border-radius: var(--wp--custom--radius--xs, 0px);
    background: var(--wp--preset--color--white);
    font-family: var(--wp--preset--font-family--secondary);
    font-size: var(--wp--preset--font-size--s, 1rem);
    color: var(--wp--preset--color--primary);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.woocommerce-account.logged-in .woocommerce :is(
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input.input-text,
    textarea,
    select
):focus {
    border-color: var(--wp--preset--color--secondary);
    box-shadow: 0 0 0 1px var(--wp--preset--color--secondary);
    outline: none;
}

.woocommerce-account.logged-in .woocommerce form .form-row {
    margin-bottom: var(--wp--preset--spacing--m);
}

.woocommerce-account.logged-in .woocommerce label {
    font-family: var(--wp--preset--font-family--secondary);
    color: var(--wp--preset--color--primary);
}

/* Aide sous les champs (« Laisser vide pour conserver… »). */
.woocommerce-account.logged-in .woocommerce form .form-row span em,
.woocommerce-account.logged-in .woocommerce fieldset legend {
    font-family: var(--wp--preset--font-family--tertiary);
    font-size: var(--wp--preset--font-size--xs);
    color: var(--wp--preset--color--quinary);
    font-style: normal;
}

/* ── Boutons : bouton principal doré (inline) + hover identique au CTA ────── */
.woocommerce-account.logged-in .woocommerce :is(a.button, button.button, input.button, button[type="submit"]) {
    display: inline-block;
    width: auto;
    padding: 0.85em 2em;
    background: var(--wp--preset--color--secondary);
    color: var(--wp--preset--color--primary);
    border: 1.5px solid var(--wp--preset--color--secondary);
    border-radius: 0;
    font-family: var(--wp--preset--font-family--secondary);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.woocommerce-account.logged-in .woocommerce :is(a.button, button.button, input.button, button[type="submit"]):hover,
.woocommerce-account.logged-in .woocommerce :is(a.button, button.button, input.button, button[type="submit"]):focus {
    background: var(--wp--custom--color--or-hover);
    border-color: var(--wp--custom--color--or-hover);
    color: var(--wp--preset--color--primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(193, 154, 107, .45);
}

/* ── Tableaux (Commandes, Téléchargements) ───────────────────────────────── */
.woocommerce-account.logged-in .woocommerce table.shop_table {
    width: 100%;
    border: 1px solid var(--wp--custom--color--gris-bordure);
    border-radius: var(--wp--custom--radius--xs, 0px);
    border-collapse: collapse;
}

.woocommerce-account.logged-in .woocommerce table.shop_table th {
    padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
    border-bottom: 1px solid var(--wp--custom--color--gris-bordure);
    font-family: var(--wp--preset--font-family--tertiary);
    font-size: var(--wp--preset--font-size--xs);
    font-weight: var(--wp--custom--font-weight--regular);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    color: var(--wp--preset--color--quinary);
}

.woocommerce-account.logged-in .woocommerce table.shop_table td {
    padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
    border-top: 1px solid var(--wp--custom--color--gris-bordure);
    font-family: var(--wp--preset--font-family--secondary);
    color: var(--wp--preset--color--primary);
    vertical-align: middle;
}

/* Le bouton d'action dans une cellule reste petit (pas full padding). */
.woocommerce-account.logged-in .woocommerce table.shop_table td .button {
    padding: 0.55em 1.2em;
    font-size: var(--wp--preset--font-size--xs);
}

/* ── Adresses (Livraison / Facturation) ──────────────────────────────────── */
.woocommerce-account.logged-in .woocommerce .woocommerce-Addresses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--wp--preset--spacing--xl);
    margin: 0;
}

/* ⚠️ WooCommerce pose un clearfix (::before/::after, display:table) sur
   .col2-set → dans un conteneur GRID ces pseudos deviennent des items grille
   et décalent les colonnes en diagonale. On les neutralise (même piège que le
   form.cart du checkout). */
.woocommerce-account.logged-in .woocommerce .woocommerce-Addresses::before,
.woocommerce-account.logged-in .woocommerce .woocommerce-Addresses::after {
    content: none;
}

.woocommerce-account.logged-in .woocommerce .woocommerce-Address {
    width: auto;
    float: none;
    margin: 0;
}

/* Titre d'adresse = un h2 natif (thème → très grand) : ramené à `l` ; le lien
   « Modifier » se place dessous (bloc), lisible dans une colonne étroite. */
.woocommerce-account.logged-in .woocommerce .woocommerce-Address-title {
    margin-bottom: var(--wp--preset--spacing--m);
}

.woocommerce-account.logged-in .woocommerce .woocommerce-Address-title :is(h1, h2, h3) {
    font-size: var(--wp--preset--font-size--l);
    margin: 0 0 var(--wp--preset--spacing--xs);
}

.woocommerce-account.logged-in .woocommerce .woocommerce-Address-title .edit {
    font-family: var(--wp--preset--font-family--tertiary);
    font-size: var(--wp--preset--font-size--xs);
}

.woocommerce-account.logged-in .woocommerce .woocommerce-Address address {
    padding: var(--wp--preset--spacing--l);
    border: 1px solid var(--wp--custom--color--gris-bordure);
    border-radius: var(--wp--custom--radius--xs, 0px);
    font-style: normal;
    line-height: 1.7;
}

/* ── Responsive : nav au-dessus du contenu, adresses empilées ────────────── */
@media screen and (max-width: 782px) {
    .woocommerce-account.logged-in .woocommerce {
        flex-direction: column;
        gap: var(--wp--preset--spacing--xl);
    }

    .woocommerce-account.logged-in .woocommerce-MyAccount-navigation {
        flex-basis: auto;
        width: 100%;
    }

    .woocommerce-account.logged-in .woocommerce .woocommerce-Addresses {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Tableaux : défilement horizontal interne sous ~560px (colonnes nombreuses). */
@media screen and (max-width: 560px) {
    .woocommerce-account.logged-in .woocommerce-MyAccount-content .woocommerce-orders-table,
    .woocommerce-account.logged-in .woocommerce-MyAccount-content .woocommerce-table {
        display: block;
        overflow-x: auto;
    }
}