/* Custom CSS classes or overrides */
@layer components {
/* Page container */
.woocommerce-account .woocommerce {
    max-width: 80rem !important;
    margin: 0 auto !important;
    padding: 10rem 1rem 4rem !important; /* top: 96px pour éviter overlap header sticky */
}

/* Idem pour les autres pages WC qui ont aussi un header sticky à éviter */
body.woocommerce-checkout .flux-checkout__content,
body.woocommerce-cart .woocommerce-cart-form,
body.woocommerce-orders .woocommerce {
    padding:10rem 1rem 4rem !important;
}

/* Navigation */
.woocommerce-MyAccount-navigation {
    width: 100% !important;
}

@media (min-width: 768px) {
    .woocommerce-MyAccount-navigation {
        width: 25% !important;
        margin-bottom: 0 !important;
    }
}

.woocommerce-MyAccount-navigation ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
}

.woocommerce-MyAccount-navigation ul li {
    border-radius: 0.5rem !important;
    overflow: hidden !important;
}

.woocommerce-MyAccount-navigation ul li a {
    display: block !important;
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: #4B5563 !important;
    transition: all 0.2s !important;
}

.woocommerce-MyAccount-navigation ul li a:hover {
    color: var(--color-violet) !important;
    background-color: #F9FAFB !important;
}

.woocommerce-MyAccount-navigation ul li.is-active a {
    background-color: var(--color-violet) !important;
    color: white !important;   
}

/* Content Area */
.woocommerce-MyAccount-content {
    width: 100% !important;
}

@media (min-width: 768px) {
    .woocommerce-MyAccount-content {
        width: 75% !important;
        padding-left: 2rem !important;
    }
}

/* Welcome Message — beige clair sur cobalt */
.woocommerce-MyAccount-content > p:first-child {
    font-size: 1.125rem !important;
    color: var(--color-beige, #e8e0d3) !important;
    margin-bottom: 2rem !important;
}

/* Forms */
.woocommerce-MyAccount-content form .form-row {
    margin-bottom: 1rem !important;
}

.woocommerce-MyAccount-content form label {
    display: block !important; 
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #374151 !important;
    margin-bottom: 0.25rem !important;
}

.woocommerce-MyAccount-content form input:not([type="checkbox"]),
.woocommerce-MyAccount-content form textarea {
    width: 100% !important;
    padding: 0.5rem !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 0.375rem !important;
    font-size: 0.875rem !important;
}

.woocommerce-MyAccount-content form input:focus,
.woocommerce-MyAccount-content form textarea:focus {
    outline: none !important;
    border-color: var(--color-violet) !important;
    box-shadow: 0 0 0 2px rgba(143, 116, 171, 0.2) !important;
}

/* Buttons */
.woocommerce-MyAccount-content .button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: white !important;
    background-color: var(--color-violet) !important;
    border: none !important;
    border-radius: 0.375rem !important;
    transition: all 0.2s !important;
}

.woocommerce-MyAccount-content .button:hover {
    background-color: var(--color-violet) !important;
}

/* Messages */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    padding: 1rem !important;
    margin-bottom: 1.5rem !important;
    border-radius: 0.5rem !important;
    border-color: var(--color-violet) !important;
}

.woocommerce-message,
.woocommerce-info{
    background-color: #ECFDF5 !important;
    color: #065F46 !important;
}


.woocommerce-error {
    background-color: #FEF2F2 !important;
    color: #991B1B !important               ; 
}
.woocommerce-message::before ,
.woocommerce-info::before,
.woocommerce-error::before {
    display: contents !important;
}

/* Reset des li internes (WC enveloppe les messages dans <ul><li>) — ils héritent
   parfois d'un border + padding qui crée un effet "box dans box" visible. */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
    list-style: none !important;
}
.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* WC NoticeGroup imbrique parfois <ul.woocommerce-error> dans <ul.woocommerce-error>
   (cas checkout : terms + autres validations groupees). On reset TOUS les bords
   incl. border-left (qui est plus specifique que border shorthand) pour ne pas
   avoir d'effet "box dans box". */
.woocommerce-error .woocommerce-error,
.woocommerce-message .woocommerce-message,
.woocommerce-info .woocommerce-info {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Tables */
.woocommerce-orders-table,
.woocommerce-table--order-downloads {
    width: 100% !important;
    border-collapse: collapse !important;
}

.woocommerce-orders-table th,
.woocommerce-table--order-downloads th {
    background-color: #F9FAFB !important;
    padding: 0.75rem 1rem !important;
    text-align: left !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #111827 !important;
}

.woocommerce-orders-table td,
.woocommerce-table--order-downloads td {
    padding: 1rem !important;
    font-size: 0.875rem !important;
    color: #6B7280 !important;
    border-bottom: 1px solid #E5E7EB !important;
}

/* Addresses */
.woocommerce-Addresses {
    display: grid !important;
    gap: 1.5rem !important;
    margin-top: 2rem !important;
}

/* @media (min-width: 768px) {
    .woocommerce-Addresses {
        grid-template-columns: repeat(2, 1fr) !important;
    }
} */

.woocommerce-Address {
    border: 1px solid #E5E7EB !important;
    border-radius: 0.5rem !important;
    padding: 1.5rem !important;
}

.woocommerce-Address-title {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 1rem !important;
}

.woocommerce-Address-title h3 {
    font-size: 1.125rem !important;
    font-weight: 500 !important;
    color: #111827 !important;
}

/* Payment Methods */
.woocommerce-PaymentMethods {
    @apply space-y-4 !important;
}

/* Account Details Form */
.woocommerce-EditAccountForm {
    @apply space-y-6 !important;
}

/* Login Form Styles */
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword {
    max-width: 500px !important;
    margin: 2rem auto !important;
    padding: 2rem !important;
    background-color: white !important;
    border-radius: 1rem !important;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important ;
}

/* Form Title */
.woocommerce h2,
.woocommerce-page h2 {
    font-family: var(--font-nourd) !important;
    font-size: 2.5rem !important;
    color: #1F2937 ;
}

/* Form Fields */
.woocommerce form .form-row {
    padding: 0 !important;
    margin: 0 0 1.5rem !important;
}

.woocommerce form .form-row label {
    font-family: var(--font-montserrat) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #374151 !important;
    margin-bottom: 0.5rem !important;
    display: block !important;
}

.woocommerce form .form-row input.input-text {
    font-family: var(--font-montserrat) !important;
    height: 2.75rem !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 0.5rem !important;
    width: 100% !important;
    background-color: #F9FAFB !important;
}

.woocommerce form .form-row input.input-text:focus {
    outline: none !important;
    border-color: var(--color-violet) !important;
    box-shadow: 0 0 0 2px rgba(143, 116, 171, 0.1) !important;
    background-color: white !important;
}

/* Remember Me Checkbox */
.woocommerce form .form-row label.woocommerce-form__label-for-checkbox {
    display: flex !important;
    align-items: center !important;
    margin: 1rem 0 !important;
    cursor: pointer !important;
}

.woocommerce form .form-row .woocommerce-form__input-checkbox {
    margin-right: 0.5rem !important;
    cursor: pointer !important;
}

/* Submit Button — Nuance CTA (terracotta) */
.woocommerce form .form-row button.woocommerce-button,
.woocommerce form .form-row input.woocommerce-Button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    font-family: var(--font-nourd) !important;
    font-weight: 600 !important;
    background-color: var(--color-terracotta) !important;
    color: white !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 0.75rem !important;
    font-size: 1rem !important;
    line-height: 1.5rem !important;
    letter-spacing: 0.02em !important;
    border: none !important;
    cursor: pointer !important;
    width: auto !important;
    min-width: 12rem !important;
    margin-top: 1rem !important;
    transition: background-color 0.2s, transform 0.1s !important;
    box-shadow: 0 1px 3px rgba(200, 89, 48, 0.25) !important;
}

.woocommerce form .form-row button.woocommerce-button:hover,
.woocommerce form .form-row input.woocommerce-Button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce-Button.button:hover {
    background-color: var(--color-terracotta-brun) !important;
    color: white !important;
    transform: translateY(-1px) !important;
}

.woocommerce form .form-row button.woocommerce-button:active,
.woocommerce a.button:active,
.woocommerce button.button:active {
    transform: translateY(0) !important;
}

/* Bouton secondaire (outline violet) — pour actions moins importantes */
.woocommerce a.button.alt-secondary,
.woocommerce button.button.alt-secondary {
    background-color: transparent !important;
    color: var(--color-violet) !important;
    border: 1.5px solid var(--color-violet) !important;
    box-shadow: none !important;
}
.woocommerce a.button.alt-secondary:hover,
.woocommerce button.button.alt-secondary:hover {
    background-color: var(--color-violet) !important;
    color: white !important;
}

/* Lost Password Link */
.woocommerce-LostPassword {
    text-align: center !important;
    margin-top: 1.5rem !important;
}

.woocommerce-LostPassword a {
    color: var(--color-violet) !important;
    text-decoration: none !important;
    font-size: 0.875rem !important;
    transition: color 0.2s !important;
}

.woocommerce-LostPassword a:hover {
    color: var(--color-violet) !important;
    text-decoration: underline !important;
}

/* Error Messages — no border-left (Flux ajoute un 8px sombre qui crée un liseré
   pourri, on lui dit non aussi via le selecteur agressif plus bas) */
.woocommerce-error {
    border: none !important;
    border-left: 0 !important;
    background-color: #fef2f2 !important;
    color: #991B1B !important;
    padding: 0.875rem 1.25rem !important;
    border-radius: 0.5rem !important;
    margin-bottom: 2rem !important;
    font-family: var(--font-montserrat) !important;
    font-size: 0.9375rem !important;
    line-height: 1.5 !important;
}
/* Override Flux Checkout : border-left: 8px solid rgba(0,0,0,.15) crée un liseré
   sombre indésirable. Selecteur sur-specifie pour battre Flux dans le cascade. */
ul.woocommerce-error,
ul.woocommerce-message,
ul.woocommerce-info,
ul.woocommerce-noreviews,
.woocommerce-NoticeGroup ul.woocommerce-error,
.woocommerce-NoticeGroup ul.woocommerce-message,
.woocommerce-NoticeGroup ul.woocommerce-info {
    border-left: 0 !important;
}

/* Success Messages */
.woocommerce-message {
    border: none !important;
    border-left: 4px solid #16a34a !important;
    background-color: #f0fdf4 !important;
    color: #14532d !important;
    padding: 0.875rem 1.25rem !important;
    border-radius: 0.5rem !important;
    margin-bottom: 2rem !important;
    font-family: var(--font-montserrat) !important;
    font-size: 0.9375rem !important;
    line-height: 1.5 !important;
}

/* Info Messages — Nuance violet */
.woocommerce-info {
    border: none !important;
    border-left: 4px solid var(--color-violet) !important;
    background-color: rgba(143, 116, 171, 0.08) !important;
    color: var(--color-cobalt) !important;
    padding: 0.875rem 1.25rem !important;
    border-radius: 0.5rem !important;
    margin-bottom: 2rem !important;
    font-family: var(--font-montserrat) !important;
    font-size: 0.9375rem !important;
    line-height: 1.5 !important;
}

/* Required Field Star */
.required {
    color: #DC2626;
}

/* Password Strength Meter */
.woocommerce-password-strength {
    margin-top: 0.5rem !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.875rem !important;
    border-radius: 0.25rem !important;
    text-align: center !important;
}

.woocommerce-password-strength.strong {
    background-color: #ECFDF5 !important;
    color: #065F46 !important;
}

.woocommerce-password-strength.good {
    background-color: #FEF3C7 !important;
    color: #92400E !important;
}

.woocommerce-password-strength.bad  {
    background-color: #FEE2E2 !important;
    color: #991B1B !important;
}

/* Password Hint */
.woocommerce-password-hint {
    font-size: 0.875rem !important;
    color: #6B7280 !important;
    margin-top: 0.5rem !important; 
    display: block !important;
}
.u-column1.col-1.woocommerce-Address {
    margin-top: 26px !important;
}
/* Responsive Styles */
@media (max-width: 768px) {
    .woocommerce-account .woocommerce {
        @apply flex flex-col !important;
    }
    
    .woocommerce-MyAccount-navigation,
    .woocommerce-MyAccount-content {
        @apply w-full !important;
        margin-bottom: 40px !important;
    }
    
    .woocommerce-MyAccount-content {
        @apply pl-0 mt-8 !important;
    }

    .woocommerce-form-login,
    .woocommerce-form-register,
    .woocommerce-ResetPassword {
        margin: 1rem !important;
        padding: 1.5rem !important;
    }

    .woocommerce h2,
    .woocommerce-page h2 {
        font-size: 2rem !important;
    }

    .woocommerce-Address-title {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
    }

    .woocommerce-Address-title h3 {
        margin-bottom: 0.5rem !important;
    }
}

/* =====================================================================
   POLISH NUANCE — design system cohérent (cobalt + violet + terracotta)
   ===================================================================== */

/* Wrapper Mon Compte — fond cobalt cohérent avec l'identité brand Nuance.
   Demande client (juin 2026) : passer de beige clair à cobalt sombre pour
   aligner les pages WC sur le reste du site. Les cards internes (nav,
   formulaire, adresses, table commandes) restent blanches → contraste fort
   sur cobalt = très lisible. Texte hors-card adapté en beige clair plus bas. */
body.woocommerce-account,
body.woocommerce-checkout,
body.woocommerce-cart,
body.woocommerce-orders {
    background-color: var(--color-cobalt, #170d42) !important;
}
.woocommerce-account .woocommerce {
    background-color: transparent !important;
}

/* Sidebar navigation Mon Compte — pills blancs sur fond clair, accent violet */
.woocommerce-MyAccount-navigation ul li {
    border-radius: 0.5rem !important;
    overflow: hidden !important;
    background-color: white !important;
    border: 1px solid rgba(23, 13, 66, 0.06) !important;
    margin-bottom: 0.25rem !important;
}
.woocommerce-MyAccount-navigation ul li a {
    color: var(--color-cobalt) !important;
    background-color: white !important;
    border-left: 3px solid transparent !important;
    border-radius: 0.5rem !important;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s !important;
    font-family: var(--font-montserrat) !important;
    font-weight: 500 !important;
}
.woocommerce-MyAccount-navigation ul li a:hover {
    color: var(--color-violet) !important;
    background-color: rgba(143, 116, 171, 0.06) !important;
    border-left-color: var(--color-violet) !important;
}
.woocommerce-MyAccount-navigation ul li.is-active {
    border-color: var(--color-violet) !important;
}
.woocommerce-MyAccount-navigation ul li.is-active a {
    color: white !important;
    background-color: var(--color-violet) !important;
    border-left-color: var(--color-violet) !important;
    font-weight: 600 !important;
}

/* Titre principal Mon Compte — beige clair sur fond cobalt */
.woocommerce h2,
.woocommerce-page h2 {
    font-family: var(--font-nourd) !important;
    color: var(--color-beige, #e8e0d3) !important;
    font-weight: 700 !important;
    font-size: 1.875rem !important;
    margin-bottom: 1rem !important;
}
/* Exception : titres dans les cards blanches restent cobalt (lisibilité) */
.woocommerce-form-login h2,
.woocommerce-form-register h2,
.woocommerce-ResetPassword h2,
.woocommerce-Address h2,
.woocommerce-Address h3,
.woocommerce-Address-title h3 {
    color: var(--color-cobalt) !important;
}

/* H3 sous-titre */
.woocommerce h3 {
    font-family: var(--font-nourd) !important;
    color: var(--color-beige, #e8e0d3) !important;
    font-weight: 600 !important;
    font-size: 1.125rem !important;
}

/* Body text Mon Compte — beige clair sur fond cobalt */
.woocommerce-MyAccount-content p,
.woocommerce-MyAccount-content li,
.woocommerce-MyAccount-content td,
.woocommerce-MyAccount-content em,
.woocommerce-MyAccount-content .em,
.woocommerce-MyAccount-content > div:not(form) {
    font-family: var(--font-montserrat) !important;
    color: var(--color-beige, #e8e0d3) !important;
}
/* Labels formulaires (Prénom, Nom, etc.) sur fond cobalt → beige clair */
.woocommerce-EditAccountForm label,
.woocommerce-address-fields label,
.woocommerce-MyAccount-content form .form-row label,
.woocommerce-MyAccount-content form label:not(.woocommerce-form__label-for-checkbox) {
    color: var(--color-beige, #e8e0d3) !important;
}
/* Helper italique "Indique comment votre nom apparaîtra..." */
.woocommerce-MyAccount-content form em,
.woocommerce-MyAccount-content form .description,
.woocommerce-MyAccount-content form span.em {
    color: var(--color-beige, #e8e0d3) !important;
    opacity: 0.85 !important;
}
/* Exception : textes dans tables sur fond white restent cobalt */
.woocommerce-orders-table td,
.woocommerce-table--order-downloads td,
.woocommerce-MyAccount-paymentMethods td,
/* Détail d'une commande (/view-order/) : la table est sur fond blanc → tout son texte en cobalt,
   Y COMPRIS la méta de ligne (Engagement / Élève / Date de naissance) : sinon elle hérite du beige
   et devient illisible (beige clair sur blanc). */
.woocommerce-table--order-details td,
.woocommerce-table--order-details th,
.woocommerce-table--order-details .wc-item-meta,
.woocommerce-table--order-details .wc-item-meta strong,
.woocommerce-table--order-details .wc-item-meta p {
    color: var(--color-cobalt) !important;
}
/* Cartes injectées sur la page commande du compte (fond cobalt) : récap « Paiement échelonné »
   (thankyou-display.php → .nuance-installments-recap) et « Code de réduction » essai
   (trial-codes/display.php → .nuance-trial-box). Conçues pour un fond clair (textes cobalt), leur
   fond translucide laisse passer le cobalt → cobalt sur cobalt = illisible. On force :
   1) un fond blanc opaque, 2) le texte foncé sur TOUT sauf les liens/boutons (sinon le beige global
   !important sur td/p/div rend le tableau d'échéances et les libellés illisibles sur le blanc). */
body.woocommerce-account .nuance-installments-recap,
body.woocommerce-account .nuance-trial-box {
    background: #fff !important;
}
body.woocommerce-account .nuance-installments-recap *:not(a):not(button),
body.woocommerce-account .nuance-trial-box *:not(a):not(button):not(code) {
    color: #170d42 !important;
}
/* Adresse de facturation : l'<address> n'est ni p/td/li → non couvert → reste foncé sur le cobalt.
   Sur fond cobalt il faut du beige clair (les <p> tél/email étaient déjà beige, pas les lignes). */
.woocommerce-MyAccount-content address,
.woocommerce-MyAccount-content address p {
    color: var(--color-beige, #e8e0d3) !important;
}

/* Exception : textes dans les cards custom Nuance (Mes échéances) restent cobalt
   car ces cards ont leur propre fond clair. Le dashboard installments utilise
   les classes .nuance-echeances-wrapper, .nuance-schedule-card. */
.nuance-echeances-wrapper p,
.nuance-echeances-wrapper li,
.nuance-echeances-wrapper td,
.nuance-echeances-wrapper th,
.nuance-echeances-wrapper span,
.nuance-echeances-wrapper div,
.nuance-schedule-card p,
.nuance-schedule-card li,
.nuance-schedule-card td,
.nuance-schedule-card th,
.nuance-schedule-card span,
.nuance-schedule-card div {
    color: var(--color-cobalt) !important;
}
.nuance-echeances-wrapper strong,
.nuance-schedule-card strong {
    color: var(--color-cobalt) !important;
}
/* Liens dans le contenu mon-compte : violet clair pour ressortir sur cobalt */
.woocommerce-MyAccount-content p a,
.woocommerce-MyAccount-content li a {
    color: var(--color-violet, #8f74ab) !important;
    text-decoration: underline !important;
}
.woocommerce-MyAccount-content p a:hover,
.woocommerce-MyAccount-content li a:hover {
    color: var(--color-terracotta, #c85930) !important;
}
.woocommerce-MyAccount-content p strong {
    color: white !important;
}

/* Tables commandes / téléchargements / moyens de paiement — card blanc sur cobalt */
.woocommerce-orders-table,
.woocommerce-table--order-downloads,
.woocommerce-MyAccount-paymentMethods,
.woocommerce-MyAccount-content .shop_table {
    background-color: white !important;
    border: 1px solid rgba(23, 13, 66, 0.08) !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
    box-shadow: 0 1px 2px rgba(23, 13, 66, 0.04) !important;
    margin-top: 0 !important;
}
.woocommerce-orders-table th,
.woocommerce-table--order-downloads th,
.woocommerce-MyAccount-paymentMethods th,
.woocommerce-MyAccount-content .shop_table th {
    background-color: rgba(143, 116, 171, 0.08) !important;
    color: var(--color-cobalt) !important;
    font-family: var(--font-nourd) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.08em !important;
    padding: 0.875rem 1rem !important;
}
.woocommerce-orders-table td,
.woocommerce-table--order-downloads td,
.woocommerce-MyAccount-paymentMethods td,
.woocommerce-MyAccount-content .shop_table td {
    color: var(--color-cobalt) !important;
    background-color: white !important;
    font-family: var(--font-montserrat) !important;
    border-bottom: 1px solid rgba(23, 13, 66, 0.06) !important;
    padding: 1rem !important;
}
.woocommerce-orders-table tr:last-child td,
.woocommerce-MyAccount-paymentMethods tr:last-child td {
    border-bottom: none !important;
}

/* Status badges dans la table commandes */
.woocommerce-orders-table .order-status,
mark.order-status {
    display: inline-block !important;
    padding: 0.25rem 0.75rem !important;
    border-radius: 999px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    background-color: rgba(143, 116, 171, 0.12) !important;
    color: var(--color-violet) !important;
}
mark.order-status.status-completed {
    background-color: rgba(22, 163, 74, 0.12) !important;
    color: #15803d !important;
}
mark.order-status.status-cancelled,
mark.order-status.status-failed {
    background-color: rgba(220, 38, 38, 0.12) !important;
    color: #b91c1c !important;
}
mark.order-status.status-on-hold {
    background-color: rgba(234, 88, 12, 0.12) !important;
    color: #c2410c !important;
}

/* Cards d'adresses */
.woocommerce-Address {
    background-color: white !important;
    border: 1px solid rgba(23, 13, 66, 0.08) !important;
    border-radius: 0.75rem !important;
    padding: 1.5rem !important;
    box-shadow: 0 1px 2px rgba(23, 13, 66, 0.04) !important;
    transition: box-shadow 0.2s !important;
}
.woocommerce-Address:hover {
    box-shadow: 0 4px 12px rgba(23, 13, 66, 0.08) !important;
}
.woocommerce-Address-title h3 {
    font-family: var(--font-nourd) !important;
    color: var(--color-cobalt) !important;
    font-size: 1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}
.woocommerce-Address-title a {
    color: var(--color-violet) !important;
    font-family: var(--font-montserrat) !important;
    font-size: 0.875rem !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}
.woocommerce-Address-title a:hover {
    color: var(--color-terracotta) !important;
}
.woocommerce-Address address {
    font-family: var(--font-montserrat) !important;
    color: var(--color-cobalt) !important;
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
    font-style: normal !important;
}

/* Login form — accent violet sur le titre */
.woocommerce-form-login h2,
.woocommerce-form-register h2,
.woocommerce-ResetPassword h2 {
    text-align: center !important;
    color: var(--color-cobalt) !important;
    margin-bottom: 1.5rem !important;
}
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword {
    border-top: 4px solid var(--color-violet) !important;
}

/* Liens lost-password */
.woocommerce-LostPassword a:hover {
    color: var(--color-terracotta) !important;
}

/* Page thank-you / order-received */
.woocommerce-thankyou-order-received {
    font-family: var(--font-nourd) !important;
    color: var(--color-cobalt) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    padding: 1.5rem !important;
    background: linear-gradient(180deg, rgba(143,116,171,0.08), rgba(143,116,171,0.02)) !important;
    border-radius: 0.75rem !important;
    border: none !important;
    margin-bottom: 2rem !important;
}

.woocommerce-order-overview {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 1rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 2rem 0 !important;
}
.woocommerce-order-overview li {
    background-color: white !important;
    border: 1px solid rgba(23, 13, 66, 0.08) !important;
    border-radius: 0.5rem !important;
    padding: 1rem !important;
    text-align: center !important;
    font-family: var(--font-montserrat) !important;
    color: rgba(23, 13, 66, 0.6) !important;
    font-size: 0.8125rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}
.woocommerce-order-overview li strong {
    display: block !important;
    margin-top: 0.5rem !important;
    color: var(--color-cobalt) !important;
    font-family: var(--font-nourd) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* === Flux Checkout — input[type="date"] (billing_birthdate) ===
   Flux ne style que text/email/tel/password/number — l'input date apparaît
   donc avec son rendu navigateur natif (cassé visuellement dans le step
   Détails Client). On le force ici à matcher la hauteur/bordure des autres
   champs Flux + label classique au-dessus. */
#billing_birthdate_field {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 0 1.25rem !important;
    padding: 0 !important;
}

#billing_birthdate_field label {
    display: block !important;
    margin: 0 0 0.5rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #374151 !important;
    line-height: 1.4 !important;
    position: static !important;
    transform: none !important;
}

#billing_birthdate_field .woocommerce-input-wrapper {
    display: block !important;
    width: 100% !important;
}

#billing_birthdate_field input[type="date"],
input#billing_birthdate {
    width: 100% !important;
    height: 3.5rem !important;
    padding: 0.875rem 1rem !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.5rem !important;
    background-color: #fff !important;
    font-family: inherit !important;
    font-size: 1rem !important;
    color: var(--color-cobalt, #170d42) !important;
    box-sizing: border-box !important;
    line-height: 1.5 !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

#billing_birthdate_field input[type="date"]:focus,
input#billing_birthdate:focus {
    outline: none !important;
    border-color: var(--color-violet, #8f74ab) !important;
    box-shadow: 0 0 0 3px rgba(143, 116, 171, 0.15) !important;
}

/* Style minimal pour le bouton calendrier natif (webkit) */
#billing_birthdate_field input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}
#billing_birthdate_field input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

}