/* ============================================ WOOCommerce - Mon compte / Dashboard client ============================================ */ /* Page globale */ .woocommerce-account #site-content, .woocommerce-account .site-content, .woocommerce-account .content-area { background: #0d0d0d !important; color: #aea899 !important; } /* Titre page */ .woocommerce-account h1, .woocommerce-account h2, .woocommerce-account h3, .woocommerce-account .entry-title, .woocommerce-account .page-title { font-family: 'Playfair Display', serif !important; color: #ddab2c !important; } /* Conteneur principal WooCommerce */ .woocommerce-account .woocommerce { color: #aea899 !important; } /* Layout Mon compte */ .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { background: #111111 !important; border: 1px solid #181818 !important; border-radius: 16px !important; } /* Navigation gauche */ .woocommerce-account .woocommerce-MyAccount-navigation { padding: 18px !important; } /* Liste navigation */ .woocommerce-account .woocommerce-MyAccount-navigation ul { margin: 0 !important; padding: 0 !important; list-style: none !important; } /* Items navigation */ .woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0 0 8px !important; padding: 0 !important; } /* Liens navigation */ .woocommerce-account .woocommerce-MyAccount-navigation li a { display: flex !important; align-items: center !important; min-height: 48px !important; padding: 12px 16px !important; justify-content: center !important; background: #0d0d0d !important; border: 1px solid #252525 !important; border-radius: 999px !important; text-align: center !important; color: #f5ecd6 !important; font-size: 0.9rem !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; text-decoration: none !important; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease !important; } /* Hover navigation */ .woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: #181818 !important; border-color: #ddab2c !important; color: #ddab2c !important; } /* Item actif */ .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: #ddab2c !important; border-color: #ddab2c !important; color: #000000 !important; } /* Focus accessible */ .woocommerce-account .woocommerce-MyAccount-navigation li a:focus, .woocommerce-account .woocommerce-MyAccount-navigation li a:focus-visible { outline: 3px solid rgba(221, 171, 44, 0.42) !important; outline-offset: 3px !important; } /* Contenu principal */ .woocommerce-account .woocommerce-MyAccount-content { padding: clamp(22px, 4vw, 36px) !important; } /* Paragraphes */ .woocommerce-account .woocommerce-MyAccount-content p, .woocommerce-account .woocommerce-MyAccount-content li { color: #aea899 !important; line-height: 1.7 !important; } /* Liens dans le contenu */ .woocommerce-account .woocommerce-MyAccount-content a { color: #f5ecd6 !important; text-decoration: underline !important; text-underline-offset: 3px !important; } .woocommerce-account .woocommerce-MyAccount-content a:hover, .woocommerce-account .woocommerce-MyAccount-content a:focus { color: #ddab2c !important; } /* Message de bienvenue / dashboard */ .woocommerce-account .woocommerce-MyAccount-content strong { color: #f5ecd6 !important; } /* Titres sections */ .woocommerce-account .woocommerce-MyAccount-content h2, .woocommerce-account .woocommerce-MyAccount-content h3 { margin-top: 0 !important; color: #ddab2c !important; } /* Tables : commandes, adresses, moyens de paiement */ .woocommerce-account table.shop_table, .woocommerce-account .woocommerce-orders-table, .woocommerce-account .woocommerce-MyAccount-paymentMethods { overflow: hidden !important; background: #111111 !important; border: 1px solid #252525 !important; border-radius: 14px !important; color: #aea899 !important; } /* En-têtes tables */ .woocommerce-account table.shop_table thead, .woocommerce-account .woocommerce-orders-table thead { background: #0d0d0d !important; } .woocommerce-account table.shop_table th, .woocommerce-account .woocommerce-orders-table th { padding: 16px !important; border-color: #252525 !important; color: #ddab2c !important; font-size: 0.82rem !important; font-weight: 800 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } /* Cellules tables */ .woocommerce-account table.shop_table td, .woocommerce-account .woocommerce-orders-table td { padding: 16px !important; border-color: #252525 !important; color: #aea899 !important; } /* Lignes */ .woocommerce-account table.shop_table tr, .woocommerce-account .woocommerce-orders-table tr { border-color: #252525 !important; } /* Numéros de commande / liens */ .woocommerce-account table.shop_table a, .woocommerce-account .woocommerce-orders-table a { color: #f5ecd6 !important; font-weight: 700 !important; } .woocommerce-account table.shop_table a:hover, .woocommerce-account .woocommerce-orders-table a:hover { color: #ddab2c !important; } /* Boutons WooCommerce */ .woocommerce-account .button, .woocommerce-account button.button, .woocommerce-account input.button, .woocommerce-account .woocommerce-button, .woocommerce-account a.button { min-height: 46px !important; padding: 13px 24px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #ddab2c !important; background-color: #ddab2c !important; background-image: none !important; border: 2px solid #ddab2c !important; border-radius: 999px !important; color: #000000 !important; font-size: 0.84rem !important; font-weight: 800 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; text-decoration: none !important; box-shadow: none !important; text-shadow: none !important; cursor: pointer !important; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease !important; } .woocommerce-account .button:hover, .woocommerce-account button.button:hover, .woocommerce-account input.button:hover, .woocommerce-account .woocommerce-button:hover, .woocommerce-account a.button:hover { background: #f0bd39 !important; background-color: #f0bd39 !important; border-color: #f0bd39 !important; color: #000000 !important; } /* Focus boutons */ .woocommerce-account .button:focus, .woocommerce-account button.button:focus, .woocommerce-account input.button:focus, .woocommerce-account .woocommerce-button:focus, .woocommerce-account a.button:focus { outline: 3px solid rgba(221, 171, 44, 0.42) !important; outline-offset: 3px !important; } /* Formulaires compte */ .woocommerce-account form, .woocommerce-account .woocommerce-form, .woocommerce-account .edit-account { color: #aea899 !important; } /* Labels */ .woocommerce-account form label, .woocommerce-account .woocommerce-form label { color: #f5ecd6 !important; font-size: 0.82rem !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; } /* Champs */ .woocommerce-account input[type="text"], .woocommerce-account input[type="email"], .woocommerce-account input[type="password"], .woocommerce-account input[type="tel"], .woocommerce-account input[type="number"], .woocommerce-account select, .woocommerce-account textarea, .woocommerce-account .select2-container .select2-selection { min-height: 50px !important; padding: 12px 14px !important; background: #0d0d0d !important; border: 1px solid #252525 !important; border-radius: 10px !important; color: #f5ecd6 !important; box-shadow: none !important; outline: none !important; } /* Focus champs */ .woocommerce-account input[type="text"]:focus, .woocommerce-account input[type="email"]:focus, .woocommerce-account input[type="password"]:focus, .woocommerce-account input[type="tel"]:focus, .woocommerce-account input[type="number"]:focus, .woocommerce-account select:focus, .woocommerce-account textarea:focus, .woocommerce-account .select2-container--open .select2-selection { border-color: #ddab2c !important; box-shadow: 0 0 0 3px rgba(221, 171, 44, 0.22) !important; } /* Placeholder */ .woocommerce-account input::placeholder, .woocommerce-account textarea::placeholder { color: #5f5a4f !important; } /* Fieldsets */ .woocommerce-account fieldset { margin-top: 24px !important; padding: 22px !important; border: 1px solid #252525 !important; border-radius: 14px !important; background: #0d0d0d !important; } .woocommerce-account fieldset legend { padding: 0 10px !important; color: #ddab2c !important; font-family: 'Playfair Display', serif !important; font-size: 1.25rem !important; font-weight: 700 !important; } /* Adresses */ .woocommerce-account .woocommerce-Address, .woocommerce-account .woocommerce-customer-details address { padding: 22px !important; background: #0d0d0d !important; border: 1px solid #252525 !important; border-radius: 14px !important; color: #aea899 !important; } /* Titres blocs adresses */ .woocommerce-account .woocommerce-Address-title h3 { color: #ddab2c !important; } /* Lien modifier adresse */ .woocommerce-account .woocommerce-Address-title .edit { color: #f5ecd6 !important; font-weight: 700 !important; } .woocommerce-account .woocommerce-Address-title .edit:hover { color: #ddab2c !important; } /* Notices WooCommerce */ .woocommerce-account .woocommerce-message, .woocommerce-account .woocommerce-info, .woocommerce-account .woocommerce-error { background: #111111 !important; border: 1px solid #252525 !important; border-top: 3px solid #ddab2c !important; border-radius: 14px !important; color: #aea899 !important; } .woocommerce-account .woocommerce-message::before, .woocommerce-account .woocommerce-info::before { color: #ddab2c !important; } .woocommerce-account .woocommerce-error { border-top-color: #cc0000 !important; } .woocommerce-account .woocommerce-error::before { color: #cc0000 !important; } /* Connexion / inscription */ .woocommerce-account .u-columns .u-column1, .woocommerce-account .u-columns .u-column2, .woocommerce-account .woocommerce-form-login, .woocommerce-account .woocommerce-form-register { background: #111111 !important; border: 1px solid #181818 !important; border-radius: 16px !important; padding: clamp(22px, 4vw, 34px) !important; } /* Remember me */ .woocommerce-account .woocommerce-form-login__rememberme { color: #aea899 !important; } /* Mot de passe oublié */ .woocommerce-account .woocommerce-LostPassword a { color: #f5ecd6 !important; } .woocommerce-account .woocommerce-LostPassword a:hover { color: #ddab2c !important; } /* Suppression visuelle de l'entrée Téléchargements par sécurité CSS */ .woocommerce-account .woocommerce-MyAccount-navigation-link--downloads { display: none !important; } /* Responsive */ @media (max-width: 768px) { .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { width: 100% !important; float: none !important; } .woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 22px !important; } .woocommerce-account .woocommerce-MyAccount-navigation ul { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; } .woocommerce-account .woocommerce-MyAccount-navigation li { margin-bottom: 0 !important; } .woocommerce-account .woocommerce-MyAccount-navigation li a { justify-content: center !important; text-align: center !important; } .woocommerce-account .woocommerce-MyAccount-content { padding: 22px !important; } .woocommerce-account table.shop_table, .woocommerce-account .woocommerce-orders-table { font-size: 0.9rem !important; } .woocommerce-account table.shop_table th, .woocommerce-account table.shop_table td, .woocommerce-account .woocommerce-orders-table th, .woocommerce-account .woocommerce-orders-table td { padding: 12px !important; } .woocommerce-account .button, .woocommerce-account button.button, .woocommerce-account input.button, .woocommerce-account .woocommerce-button, .woocommerce-account a.button { width: 100% !important; } } /* ============================================ PANNEAU GLISSANT - COMPTE CLIENT ============================================ */ /* Conteneur principal */ .panel__container { background: #0d0d0d !important; color: #aea899 !important; border-left: 1px solid #252525 !important; box-shadow: -24px 0 80px rgba(0, 0, 0, 0.72) !important; } /* En-tête */ .panel__container .panel__header { min-height: 74px !important; padding: 20px 24px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; background: #111111 !important; border-bottom: 0 !important; color: #f5ecd6 !important; font-family: 'Playfair Display', serif !important; font-size: 1.1rem !important; font-weight: 700 !important; } /* Supprime le séparateur généré par le thème */ .panel__container .panel__header::after { content: none !important; display: none !important; } /* Nom utilisateur */ .panel__container .account-panel__name { display: inline-flex !important; align-items: center !important; gap: 12px !important; color: #f5ecd6 !important; font-family: 'Playfair Display', serif !important; font-size: 1.15rem !important; font-weight: 700 !important; line-height: 1.2 !important; } /* Avatar rond */ .panel__container .account-panel__name .avatar { width: 38px !important; height: 38px !important; min-width: 38px !important; max-width: 38px !important; min-height: 38px !important; max-height: 38px !important; flex: 0 0 38px !important; aspect-ratio: 1 / 1 !important; border-radius: 50% !important; border: 2px solid #ddab2c !important; background: #181818 !important; object-fit: cover !important; } /* Bouton fermer */ .panel__container .panel__button-close { width: 40px !important; height: 40px !important; flex: 0 0 40px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #0d0d0d !important; border: 1px solid #252525 !important; border-radius: 999px !important; color: #f5ecd6 !important; cursor: pointer !important; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease !important; } .panel__container .panel__button-close svg { width: 14px !important; height: 14px !important; color: currentColor !important; } .panel__container .panel__button-close:hover { background: #ddab2c !important; border-color: #ddab2c !important; color: #000000 !important; } .panel__container .panel__button-close:focus, .panel__container .panel__button-close:focus-visible { outline: 3px solid rgba(221, 171, 44, 0.42) !important; outline-offset: 3px !important; } /* Contenu */ .panel__container .panel__content { padding: 24px !important; background: #0d0d0d !important; color: #aea899 !important; } /* Liste */ .panel__container .account-panel__links { margin: 0 !important; padding: 0 !important; list-style: none !important; } .panel__container .account-panel__links li { margin: 0 0 10px !important; padding: 0 !important; } /* Liens */ .panel__container .account-panel__links li a { min-height: 52px !important; padding: 14px 18px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; background: #111111 !important; border: 1px solid #252525 !important; border-radius: 999px !important; color: #f5ecd6 !important; font-size: 0.9rem !important; font-weight: 800 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; text-decoration: none !important; box-shadow: none !important; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.15s ease !important; } /* Flèche décorative */ .panel__container .account-panel__links li a::after { content: "→" !important; margin-left: 14px !important; color: #f5ecd6 !important; font-size: 1rem !important; font-weight: 700 !important; line-height: 1 !important; transition: color 0.25s ease, transform 0.2s ease !important; } /* Hover liens */ .panel__container .account-panel__links li a:hover { background: #181818 !important; border-color: #ddab2c !important; color: #ddab2c !important; transform: translateX(-2px) !important; } .panel__container .account-panel__links li a:hover::after { color: #ddab2c !important; transform: translateX(3px) !important; } /* Focus liens */ .panel__container .account-panel__links li a:focus, .panel__container .account-panel__links li a:focus-visible { outline: 3px solid rgba(221, 171, 44, 0.42) !important; outline-offset: 3px !important; } /* Déconnexion */ .panel__container .account-panel__links .account-link--customer-logout a { margin-top: 16px !important; background: transparent !important; border-color: rgba(204, 0, 0, 0.45) !important; color: #ffb3b3 !important; } .panel__container .account-panel__links .account-link--customer-logout a::after { color: #ffb3b3 !important; } .panel__container .account-panel__links .account-link--customer-logout a:hover { background: rgba(204, 0, 0, 0.12) !important; border-color: #cc0000 !important; color: #ffb3b3 !important; } .panel__container .account-panel__links .account-link--customer-logout a:hover::after { color: #ffb3b3 !important; } /* Supprime l'effet underline du thème */ .panel__container .account-panel__links a.underline-hover, .panel__container .account-panel__links a.underline-hover:hover { text-decoration: none !important; background-image: none !important; } /* Mobile */ @media (max-width: 600px) { .panel__container .panel__header { min-height: 68px !important; padding: 18px 20px !important; } .panel__container .account-panel__name { font-size: 1.05rem !important; } .panel__container .account-panel__name .avatar { width: 34px !important; height: 34px !important; min-width: 34px !important; max-width: 34px !important; min-height: 34px !important; max-height: 34px !important; flex: 0 0 34px !important; } .panel__container .panel__content { padding: 20px !important; } .panel__container .account-panel__links li a { min-height: 50px !important; padding: 13px 16px !important; font-size: 0.84rem !important; letter-spacing: 0.06em !important; } } /* ============================================ MODALE CONNEXION / INSCRIPTION WooCommerce + thème Glozin Quality CBD ByNiko Scope strict : uniquement la modale contenant #customer_login ============================================ */ /* ============================================ CONTENEUR PRINCIPAL ============================================ */ .modal__container:has(#customer_login) { width: min(calc(100% - 32px), 560px) !important; max-width: 560px !important; max-height: calc(100dvh - 32px) !important; display: flex !important; flex-direction: column !important; background: #111111 !important; background-color: #111111 !important; background-image: none !important; border: 1px solid #252525 !important; border-radius: 18px !important; color: #aea899 !important; box-shadow: none !important; outline: 0 !important; overflow: hidden !important; } /* Wrapper interne */ .modal__container:has(#customer_login) > .modal__wrapper { position: relative !important; width: 100% !important; max-height: calc(100dvh - 32px) !important; display: flex !important; flex-direction: column !important; background: #111111 !important; color: #aea899 !important; border: 0 !important; border-radius: 18px !important; box-shadow: none !important; outline: 0 !important; overflow: hidden !important; } /* Suppression des décorations natives du thème */ .modal__container:has(#customer_login)::before, .modal__container:has(#customer_login)::after, .modal__container:has(#customer_login) > .modal__wrapper::before, .modal__container:has(#customer_login) > .modal__wrapper::after { content: none !important; display: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* ============================================ CONTENU SCROLLABLE ============================================ */ .modal__container:has(#customer_login) .modal__content { flex: 1 1 auto !important; min-height: 0 !important; padding: clamp(28px, 5vw, 44px) !important; background: #111111 !important; color: #aea899 !important; border: 0 !important; box-shadow: none !important; outline: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; scrollbar-color: #444444 #111111 !important; scrollbar-width: thin !important; } /* Scrollbar Chromium */ .modal__container:has(#customer_login) .modal__content::-webkit-scrollbar { width: 8px !important; } .modal__container:has(#customer_login) .modal__content::-webkit-scrollbar-track { background: #111111 !important; } .modal__container:has(#customer_login) .modal__content::-webkit-scrollbar-thumb { background: #444444 !important; border-radius: 999px !important; } .modal__container:has(#customer_login) .modal__content::-webkit-scrollbar-thumb:hover { background: #ddab2c !important; } /* ============================================ BOUTON FERMER ============================================ */ .modal__container:has(#customer_login) .modal__button-close { position: absolute !important; z-index: 10 !important; top: 18px !important; right: 18px !important; width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; padding: 0 !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #0d0d0d !important; background-color: #0d0d0d !important; background-image: none !important; border: 1px solid #252525 !important; border-radius: 999px !important; color: #f5ecd6 !important; text-decoration: none !important; box-shadow: none !important; text-shadow: none !important; outline: 0 !important; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease !important; } /* Neutralisation des effets Glozin */ .modal__container:has(#customer_login) .modal__button-close::before, .modal__container:has(#customer_login) .modal__button-close::after { content: none !important; display: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Icône */ .modal__container:has(#customer_login) .modal__button-close .glozin-svg-icon, .modal__container:has(#customer_login) .modal__button-close svg { width: 14px !important; height: 14px !important; display: block !important; color: currentColor !important; fill: currentColor !important; } .modal__container:has(#customer_login) .modal__button-close svg path { color: currentColor !important; fill: currentColor !important; } /* Hover */ .modal__container:has(#customer_login) .modal__button-close:hover { background: #ddab2c !important; background-color: #ddab2c !important; border-color: #ddab2c !important; color: #000000 !important; } /* ============================================ STRUCTURE CONNEXION / INSCRIPTION ============================================ */ .modal__container:has(#customer_login) .woocommerce-customer-login, .modal__container:has(#customer_login) .woocommerce-customer-register { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; color: #aea899 !important; border: 0 !important; box-shadow: none !important; outline: 0 !important; } /* Neutralise le flex desktop injecté par Glozin */ .modal__container:has(#customer_login) #customer_login { display: block !important; } /* Colonne interne */ .modal__container:has(#customer_login) #customer_login > .flex-1 { width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } /* ============================================ TITRES ============================================ */ .modal__container:has(#customer_login) .woocommerce-customer-login__title { margin: 0 !important; padding: 0 54px !important; color: #ddab2c !important; font-family: "Playfair Display", serif !important; font-size: clamp(1.65rem, 4vw, 2.15rem) !important; font-weight: 800 !important; line-height: 1.15 !important; letter-spacing: 0.01em !important; text-align: center !important; } /* Description sous le titre */ .modal__container:has(#customer_login) .woocommerce-customer-login__title-desc { max-width: 430px !important; margin: 12px auto 28px !important; padding: 0 !important; color: #aea899 !important; font-size: 0.94rem !important; font-weight: 400 !important; line-height: 1.65 !important; text-align: center !important; } /* ============================================ FORMULAIRES ============================================ */ .modal__container:has(#customer_login) .woocommerce-form-login, .modal__container:has(#customer_login) .woocommerce-form-register { width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; color: #aea899 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: 0 !important; } /* Lignes */ .modal__container:has(#customer_login) .form-row, .modal__container:has(#customer_login) .woocommerce-form-row { width: 100% !important; margin: 0 0 18px !important; padding: 0 !important; } /* Annule la classe focused du thème */ .modal__container:has(#customer_login) .form-row.focused, .modal__container:has(#customer_login) .woocommerce-form-row.focused { background: transparent !important; border: 0 !important; box-shadow: none !important; } /* ============================================ LABELS ============================================ */ .modal__container:has(#customer_login) .woocommerce-form label, .modal__container:has(#customer_login) .form-row > label { display: block !important; margin: 0 0 8px !important; padding: 0 !important; color: #f5ecd6 !important; font-size: 0.78rem !important; font-weight: 800 !important; line-height: 1.4 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } /* Astérisque obligatoire */ .modal__container:has(#customer_login) .required { color: #ddab2c !important; } /* ============================================ CHAMPS ============================================ */ .modal__container:has(#customer_login) input[type="text"], .modal__container:has(#customer_login) input[type="email"], .modal__container:has(#customer_login) input[type="password"] { width: 100% !important; min-height: 52px !important; padding: 13px 15px !important; background: #0d0d0d !important; background-color: #0d0d0d !important; background-image: none !important; border: 1px solid #252525 !important; border-radius: 10px !important; color: #f5ecd6 !important; -webkit-text-fill-color: #f5ecd6 !important; font-size: 0.96rem !important; font-weight: 500 !important; line-height: 1.5 !important; box-shadow: none !important; text-shadow: none !important; outline: none !important; transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease !important; } /* Hover */ .modal__container:has(#customer_login) input[type="text"]:hover, .modal__container:has(#customer_login) input[type="email"]:hover, .modal__container:has(#customer_login) input[type="password"]:hover { border-color: #444444 !important; } /* Focus */ .modal__container:has(#customer_login) input[type="text"]:focus, .modal__container:has(#customer_login) input[type="email"]:focus, .modal__container:has(#customer_login) input[type="password"]:focus { background: #0d0d0d !important; border-color: #ddab2c !important; color: #f5ecd6 !important; -webkit-text-fill-color: #f5ecd6 !important; box-shadow: 0 0 0 3px rgba(221, 171, 44, 0.22) !important; } /* Autofill navigateur */ .modal__container:has(#customer_login) input:-webkit-autofill, .modal__container:has(#customer_login) input:-webkit-autofill:hover, .modal__container:has(#customer_login) input:-webkit-autofill:focus { -webkit-text-fill-color: #f5ecd6 !important; caret-color: #f5ecd6 !important; box-shadow: 0 0 0 1000px #0d0d0d inset !important; border-color: #252525 !important; } /* ============================================ CHAMP MOT DE PASSE ============================================ */ .modal__container:has(#customer_login) .password-input { position: relative !important; width: 100% !important; display: block !important; } /* Espace réservé pour le bouton œil */ .modal__container:has(#customer_login) .password-input input { padding-right: 54px !important; } /* Afficher / masquer le mot de passe */ .modal__container:has(#customer_login) .show-password-input { position: absolute !important; top: 50% !important; right: 7px !important; width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; padding: 0 !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transform: translateY(-50%) !important; background: #181818 !important; background-color: #181818 !important; background-image: none !important; border: 1px solid #252525 !important; border-radius: 999px !important; color: #aea899 !important; box-shadow: none !important; outline: 0 !important; cursor: pointer !important; } /* Icône native WooCommerce */ .modal__container:has(#customer_login) .show-password-input::after { color: currentColor !important; } /* Hover */ .modal__container:has(#customer_login) .show-password-input:hover { background: #ddab2c !important; border-color: #ddab2c !important; color: #000000 !important; } /* ============================================ SE SOUVENIR / MOT DE PASSE PERDU ============================================ */ .modal__container:has(#customer_login) .woocommerce-form-row--remember { width: 100% !important; margin: 2px 0 22px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 14px !important; } /* Label checkbox */ .modal__container:has(#customer_login) .woocommerce-form-login__rememberme { margin: 0 !important; display: inline-flex !important; align-items: center !important; gap: 9px !important; color: #aea899 !important; font-size: 0.86rem !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; cursor: pointer !important; } /* Checkbox */ .modal__container:has(#customer_login) input[type="checkbox"] { width: 18px !important; height: 18px !important; min-width: 18px !important; margin: 0 !important; accent-color: #ddab2c !important; background: #0d0d0d !important; border: 1px solid #252525 !important; border-radius: 4px !important; box-shadow: none !important; cursor: pointer !important; } /* Mot de passe perdu */ .modal__container:has(#customer_login) .woocommerce-lost-password { color: #f5ecd6 !important; font-size: 0.86rem !important; font-weight: 700 !important; line-height: 1.4 !important; text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 4px !important; transition: color 0.25s ease !important; } .modal__container:has(#customer_login) .woocommerce-lost-password:hover { color: #ddab2c !important; } /* ============================================ BOUTON PRINCIPAL ============================================ */ .modal__container:has(#customer_login) .woocommerce-form-login__submit, .modal__container:has(#customer_login) .woocommerce-form-register__submit { position: relative !important; z-index: 1 !important; width: 100% !important; min-height: 54px !important; padding: 0 30px !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; background: #ddab2c !important; background-color: #ddab2c !important; background-image: none !important; border: 2px solid #ddab2c !important; border-radius: 999px !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; font-size: 0.86rem !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; text-align: center !important; text-decoration: none !important; box-shadow: none !important; text-shadow: none !important; outline: 0 !important; cursor: pointer !important; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease !important; } /* Neutralise les animations Glozin */ .modal__container:has(#customer_login) .woocommerce-form-login__submit::before, .modal__container:has(#customer_login) .woocommerce-form-login__submit::after, .modal__container:has(#customer_login) .woocommerce-form-register__submit::before, .modal__container:has(#customer_login) .woocommerce-form-register__submit::after { content: none !important; display: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Hover */ .modal__container:has(#customer_login) .woocommerce-form-login__submit:hover, .modal__container:has(#customer_login) .woocommerce-form-login__submit:focus, .modal__container:has(#customer_login) .woocommerce-form-register__submit:hover, .modal__container:has(#customer_login) .woocommerce-form-register__submit:focus { background: #000000 !important; background-color: #000000 !important; border-color: #ddab2c !important; color: #ddab2c !important; -webkit-text-fill-color: #ddab2c !important; } /* ============================================ BOUTON SECONDAIRE CRÉER UN COMPTE / SE CONNECTER ============================================ */ .modal__container:has(#customer_login) .gz-button-register-mode { position: relative !important; z-index: 1 !important; width: 100% !important; min-height: 52px !important; padding: 0 28px !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border: 2px solid #ddab2c !important; border-radius: 999px !important; color: #ddab2c !important; font-size: 0.84rem !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; text-align: center !important; text-decoration: none !important; box-shadow: none !important; text-shadow: none !important; outline: 0 !important; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease !important; } .modal__container:has(#customer_login) .gz-button-register-mode::before, .modal__container:has(#customer_login) .gz-button-register-mode::after { content: none !important; display: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Texte interne */ .modal__container:has(#customer_login) .gz-button-register-mode .glozin-button-text { color: inherit !important; } /* Hover */ .modal__container:has(#customer_login) .gz-button-register-mode:hover, .modal__container:has(#customer_login) .gz-button-register-mode:focus { background: #ddab2c !important; background-color: #ddab2c !important; border-color: #ddab2c !important; color: #000000 !important; } /* ============================================ TEXTE INSCRIPTION / CONFIDENTIALITÉ ============================================ */ .modal__container:has(#customer_login) .woocommerce-customer-register form > p:not(.form-row), .modal__container:has(#customer_login) .woocommerce-privacy-policy-text, .modal__container:has(#customer_login) .woocommerce-privacy-policy-text p { color: #aea899 !important; font-size: 0.88rem !important; line-height: 1.7 !important; } /* Message d'envoi du mot de passe */ .modal__container:has(#customer_login) .woocommerce-form-register > p:not(.form-row):not(.woocommerce-privacy-policy-text) { margin: 0 0 20px !important; padding: 14px 16px !important; background: #0d0d0d !important; border: 1px solid #252525 !important; border-radius: 12px !important; color: #aea899 !important; } /* Confidentialité */ .modal__container:has(#customer_login) .woocommerce-privacy-policy-text { margin: 0 0 22px !important; padding: 14px 16px !important; background: #0d0d0d !important; border: 1px solid #252525 !important; border-left: 3px solid #ddab2c !important; border-radius: 12px !important; } /* Liens */ .modal__container:has(#customer_login) .woocommerce-privacy-policy-text a { color: #f5ecd6 !important; font-weight: 700 !important; text-decoration: underline !important; text-underline-offset: 3px !important; } .modal__container:has(#customer_login) .woocommerce-privacy-policy-text a:hover { color: #ddab2c !important; } /* ============================================ NOTICES WOOCOMMERCE ============================================ */ .modal__container:has(#customer_login) .woocommerce-notices-wrapper:not(:empty) { margin: 0 0 24px !important; } .modal__container:has(#customer_login) .woocommerce-message, .modal__container:has(#customer_login) .woocommerce-info, .modal__container:has(#customer_login) .woocommerce-error { margin: 0 0 18px !important; padding: 15px 18px 15px 46px !important; background: #0d0d0d !important; border: 1px solid #252525 !important; border-left: 3px solid #ddab2c !important; border-radius: 12px !important; color: #aea899 !important; font-size: 0.9rem !important; line-height: 1.55 !important; box-shadow: none !important; } /* Icônes notices */ .modal__container:has(#customer_login) .woocommerce-message::before, .modal__container:has(#customer_login) .woocommerce-info::before { color: #ddab2c !important; } /* Erreurs */ .modal__container:has(#customer_login) .woocommerce-error { background: rgba(204, 0, 0, 0.12) !important; border-color: rgba(204, 0, 0, 0.45) !important; border-left-color: #cc0000 !important; color: #ffb3b3 !important; } .modal__container:has(#customer_login) .woocommerce-error::before { color: #cc0000 !important; } /* Liens des notices */ .modal__container:has(#customer_login) .woocommerce-message a, .modal__container:has(#customer_login) .woocommerce-info a, .modal__container:has(#customer_login) .woocommerce-error a { color: #f5ecd6 !important; font-weight: 700 !important; } .modal__container:has(#customer_login) .woocommerce-message a:hover, .modal__container:has(#customer_login) .woocommerce-info a:hover, .modal__container:has(#customer_login) .woocommerce-error a:hover { color: #ddab2c !important; } /* ============================================ ESPACEMENTS DES BOUTONS ============================================ */ .modal__container:has(#customer_login) .woocommerce-form-row--submit, .modal__container:has(#customer_login) .woocommerce-form--register-button { margin-bottom: 0 !important; } /* Deuxième bouton */ .modal__container:has(#customer_login) .woocommerce-form-row--create, .modal__container:has(#customer_login) .woocommerce-form--register-button + .woocommerce-form--register-button { margin-top: 12px !important; } /* ============================================ FOCUS ACCESSIBLE ============================================ */ .modal__container:has(#customer_login) a:focus-visible, .modal__container:has(#customer_login) button:focus-visible, .modal__container:has(#customer_login) input:focus-visible { outline: 3px solid rgba(221, 171, 44, 0.42) !important; outline-offset: 3px !important; } /* ============================================ MOBILE ============================================ */ @media (max-width: 600px) { .modal__container:has(#customer_login) { width: calc(100% - 24px) !important; max-height: calc(100dvh - 24px) !important; border-radius: 14px !important; } .modal__container:has(#customer_login) > .modal__wrapper { max-height: calc(100dvh - 24px) !important; border-radius: 14px !important; } .modal__container:has(#customer_login) .modal__content { padding: 72px 20px 24px !important; } .modal__container:has(#customer_login) .modal__button-close { top: 16px !important; right: 16px !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; } .modal__container:has(#customer_login) .woocommerce-customer-login__title { padding: 0 !important; font-size: 1.65rem !important; } .modal__container:has(#customer_login) .woocommerce-customer-login__title-desc { margin-bottom: 24px !important; font-size: 0.88rem !important; } .modal__container:has(#customer_login) .woocommerce-form-row--remember { align-items: flex-start !important; flex-direction: column !important; gap: 12px !important; } .modal__container:has(#customer_login) .woocommerce-lost-password { align-self: flex-start !important; } .modal__container:has(#customer_login) .woocommerce-form-login__submit, .modal__container:has(#customer_login) .woocommerce-form-register__submit, .modal__container:has(#customer_login) .gz-button-register-mode { width: 100% !important; min-height: 52px !important; padding-left: 18px !important; padding-right: 18px !important; font-size: 0.8rem !important; letter-spacing: 0.08em !important; } .modal__container:has(#customer_login) .woocommerce-privacy-policy-text { padding: 13px 14px !important; } } /* ============================================ RÉDUCTION DES ANIMATIONS ============================================ */ @media (prefers-reduced-motion: reduce) { .modal__container:has(#customer_login) *, .modal__container:has(#customer_login) *::before, .modal__container:has(#customer_login) *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } } /* ============================================ PATCH MODALE COMPTE Labels au-dessus + checkbox lisible ============================================ */ /* Labels toujours placés au-dessus des champs */ .modal__container:has(#customer_login) .woocommerce-form-row--wide { display: flex !important; flex-direction: column !important; align-items: stretch !important; } .modal__container:has(#customer_login) .woocommerce-form-row--wide > label { position: static !important; inset: auto !important; order: -1 !important; display: block !important; width: 100% !important; margin: 0 0 8px !important; padding: 0 !important; transform: none !important; background: transparent !important; color: #f5ecd6 !important; font-size: 0.78rem !important; font-weight: 800 !important; line-height: 1.4 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; pointer-events: auto !important; } /* Sécurité pour le wrapper du mot de passe */ .modal__container:has(#customer_login) .woocommerce-form-row--wide .password-input { order: 1 !important; width: 100% !important; } /* Texte "Se souvenir de moi" */ .modal__container:has(#customer_login) .woocommerce-form-login__rememberme, .modal__container:has(#customer_login) .woocommerce-form-login__rememberme span { color: #aea899 !important; -webkit-text-fill-color: #aea899 !important; } /* Survol lisible */ .modal__container:has(#customer_login) .woocommerce-form-login__rememberme:hover, .modal__container:has(#customer_login) .woocommerce-form-login__rememberme:hover span { color: #f5ecd6 !important; -webkit-text-fill-color: #f5ecd6 !important; } /* Lorsque la case est cochée */ .modal__container:has(#customer_login) .woocommerce-form-login__rememberme:has(input:checked), .modal__container:has(#customer_login) .woocommerce-form-login__rememberme:has(input:checked) span { color: #ddab2c !important; -webkit-text-fill-color: #ddab2c !important; } /* Focus clavier */ .modal__container:has(#customer_login) .woocommerce-form-login__rememberme:focus-within { color: #ddab2c !important; } /* Empêche les effets de fond du thème sur le label */ .modal__container:has(#customer_login) .woocommerce-form-login__rememberme:hover, .modal__container:has(#customer_login) .woocommerce-form-login__rememberme:focus, .modal__container:has(#customer_login) .woocommerce-form-login__rememberme:focus-within { background: transparent !important; border: 0 !important; box-shadow: none !important; } /* ============================================ PATCH MODALE COMPTE Deux boutons jaunes ============================================ */ /* Bouton principal : connexion / création */ .modal__container:has(#customer_login) .woocommerce-form-login__submit, .modal__container:has(#customer_login) .woocommerce-form-register__submit, /* Bouton secondaire : créer un compte / se connecter */ .modal__container:has(#customer_login) .gz-button-register-mode { background: #ddab2c !important; background-color: #ddab2c !important; background-image: none !important; border: 2px solid #ddab2c !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* Texte interne du bouton secondaire */ .modal__container:has(#customer_login) .gz-button-register-mode .glozin-button-text { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* Hover identique sur les deux boutons */ .modal__container:has(#customer_login) .woocommerce-form-login__submit:hover, .modal__container:has(#customer_login) .woocommerce-form-login__submit:focus, .modal__container:has(#customer_login) .woocommerce-form-register__submit:hover, .modal__container:has(#customer_login) .woocommerce-form-register__submit:focus, .modal__container:has(#customer_login) .gz-button-register-mode:hover, .modal__container:has(#customer_login) .gz-button-register-mode:focus { background: #f0bd39 !important; background-color: #f0bd39 !important; border-color: #f0bd39 !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* Texte interne au survol */ .modal__container:has(#customer_login) .gz-button-register-mode:hover .glozin-button-text, .modal__container:has(#customer_login) .gz-button-register-mode:focus .glozin-button-text { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* ============================================ PAGE MON COMPTE - Bouton Se connecter jaune Mode inscription ============================================ */ body.woocommerce-account .woocommerce-form-register a.gz-button-login-mode { width: 100% !important; min-height: 52px !important; padding: 14px 28px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #ddab2c !important; background-color: #ddab2c !important; background-image: none !important; border: 2px solid #ddab2c !important; border-radius: 999px !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; font-size: 0.86rem !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; text-align: center !important; text-decoration: none !important; box-shadow: none !important; text-shadow: none !important; outline: 0 !important; } /* Texte interne */ body.woocommerce-account .woocommerce-form-register a.gz-button-login-mode .glozin-button-text { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* Neutralise l'effet animé Glozin */ body.woocommerce-account .woocommerce-form-register a.gz-button-login-mode::before, body.woocommerce-account .woocommerce-form-register a.gz-button-login-mode::after { content: none !important; display: none !important; background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } /* Survol */ body.woocommerce-account .woocommerce-form-register a.gz-button-login-mode:hover, body.woocommerce-account .woocommerce-form-register a.gz-button-login-mode:focus { background: #f0bd39 !important; background-color: #f0bd39 !important; background-image: none !important; border-color: #f0bd39 !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; } body.woocommerce-account .woocommerce-form-register a.gz-button-login-mode:hover .glozin-button-text, body.woocommerce-account .woocommerce-form-register a.gz-button-login-mode:focus .glozin-button-text { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* Focus clavier */ body.woocommerce-account .woocommerce-form-register a.gz-button-login-mode:focus-visible { outline: 3px solid rgba(221, 171, 44, 0.42) !important; outline-offset: 3px !important; } /* ============================================ PAGE MON COMPTE Supprime l'effet slide noir sur "Créer un compte" ============================================ */ body.woocommerce-account .woocommerce-form-register button.woocommerce-form-register__submit { background: #ddab2c !important; background-color: #ddab2c !important; background-image: none !important; border-color: #ddab2c !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; overflow: visible !important; } /* Supprime les calques animés de Glozin */ body.woocommerce-account .woocommerce-form-register button.woocommerce-form-register__submit::before, body.woocommerce-account .woocommerce-form-register button.woocommerce-form-register__submit::after { content: none !important; display: none !important; width: 0 !important; height: 0 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; transform: none !important; transition: none !important; opacity: 0 !important; visibility: hidden !important; border: 0 !important; box-shadow: none !important; } /* Survol simple, sans slide noir */ body.woocommerce-account .woocommerce-form-register button.woocommerce-form-register__submit:hover, body.woocommerce-account .woocommerce-form-register button.woocommerce-form-register__submit:focus { background: #f0bd39 !important; background-color: #f0bd39 !important; background-image: none !important; border-color: #f0bd39 !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; transform: none !important; box-shadow: none !important; } /* Désactive aussi l'animation portée par la classe Glozin */ body.woocommerce-account .woocommerce-form-register button.woocommerce-form-register__submit.gz-button-hover-effect { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease !important; } /* ============================================ PAGE MON COMPTE Label Adresse e-mail au-dessus du champ ============================================ */ body.woocommerce-account .woocommerce-form-register .woocommerce-form-row--wide { display: flex !important; flex-direction: column !important; align-items: stretch !important; } /* Label au-dessus */ body.woocommerce-account .woocommerce-form-register .woocommerce-form-row--wide > label { position: static !important; inset: auto !important; display: block !important; order: -1 !important; width: 100% !important; margin: 0 0 8px !important; padding: 0 !important; transform: none !important; background: transparent !important; color: #f5ecd6 !important; font-size: 0.82rem !important; font-weight: 700 !important; line-height: 1.4 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; pointer-events: auto !important; } /* Champ sous le label */ body.woocommerce-account .woocommerce-form-register .woocommerce-form-row--wide > input { order: 1 !important; width: 100% !important; } /* Astérisque obligatoire */ body.woocommerce-account .woocommerce-form-register .woocommerce-form-row--wide > label .required { color: #ddab2c !important; } /* ============================================ PAGE MON COMPTE Champ e-mail avec contour jaune par défaut ============================================ */ body.woocommerce-account .woocommerce-form-register #reg_email { border-color: #ddab2c !important; box-shadow: 0 0 0 3px rgba(221, 171, 44, 0.22) !important; } /* Conserve le même rendu au survol */ body.woocommerce-account .woocommerce-form-register #reg_email:hover { border-color: #ddab2c !important; box-shadow: 0 0 0 3px rgba(221, 171, 44, 0.22) !important; } /* Focus identique */ body.woocommerce-account .woocommerce-form-register #reg_email:focus, body.woocommerce-account .woocommerce-form-register #reg_email:focus-visible { border-color: #ddab2c !important; box-shadow: 0 0 0 3px rgba(221, 171, 44, 0.22) !important; outline: none !important; } /* ============================================ PAGE MON COMPTE - CONNEXION Labels au-dessus, champs dorés, bouton créer un compte jaune ============================================ */ /* ============================================ LABELS AU-DESSUS DES CHAMPS ============================================ */ body.woocommerce-account #customer_login .woocommerce-form-login .woocommerce-form-row--wide { display: flex !important; flex-direction: column !important; align-items: stretch !important; } /* Labels Adresse e-mail et Mot de passe */ body.woocommerce-account #customer_login .woocommerce-form-login .woocommerce-form-row--wide > label { position: static !important; inset: auto !important; order: -1 !important; display: block !important; width: 100% !important; margin: 0 0 8px !important; padding: 0 !important; transform: none !important; background: transparent !important; color: #f5ecd6 !important; font-size: 0.82rem !important; font-weight: 700 !important; line-height: 1.4 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; pointer-events: auto !important; } /* Astérisque */ body.woocommerce-account #customer_login .woocommerce-form-login .woocommerce-form-row--wide > label .required { color: #ddab2c !important; } /* Champ e-mail sous le label */ body.woocommerce-account #customer_login .woocommerce-form-login .woocommerce-form-row--wide > input { order: 1 !important; width: 100% !important; } /* Wrapper mot de passe sous le label */ body.woocommerce-account #customer_login .woocommerce-form-login .woocommerce-form-row--wide > .password-input { order: 1 !important; width: 100% !important; display: block !important; } /* ============================================ CHAMPS AVEC CONTOUR DORÉ PERMANENT ============================================ */ body.woocommerce-account #customer_login .woocommerce-form-login #username, body.woocommerce-account #customer_login .woocommerce-form-login #password { width: 100% !important; min-height: 50px !important; padding: 12px 14px !important; background: #0d0d0d !important; background-color: #0d0d0d !important; background-image: none !important; border: 1px solid #ddab2c !important; border-radius: 10px !important; color: #f5ecd6 !important; -webkit-text-fill-color: #f5ecd6 !important; box-shadow: 0 0 0 3px rgba(221, 171, 44, 0.22) !important; outline: none !important; } /* Hover identique */ body.woocommerce-account #customer_login .woocommerce-form-login #username:hover, body.woocommerce-account #customer_login .woocommerce-form-login #password:hover { border-color: #ddab2c !important; box-shadow: 0 0 0 3px rgba(221, 171, 44, 0.22) !important; } /* Focus identique */ body.woocommerce-account #customer_login .woocommerce-form-login #username:focus, body.woocommerce-account #customer_login .woocommerce-form-login #username:focus-visible, body.woocommerce-account #customer_login .woocommerce-form-login #password:focus, body.woocommerce-account #customer_login .woocommerce-form-login #password:focus-visible { border-color: #ddab2c !important; box-shadow: 0 0 0 3px rgba(221, 171, 44, 0.22) !important; outline: none !important; } /* Autofill navigateur */ body.woocommerce-account #customer_login .woocommerce-form-login #username:-webkit-autofill, body.woocommerce-account #customer_login .woocommerce-form-login #password:-webkit-autofill { -webkit-text-fill-color: #f5ecd6 !important; box-shadow: 0 0 0 1000px #0d0d0d inset, 0 0 0 3px rgba(221, 171, 44, 0.22) !important; border-color: #ddab2c !important; } /* ============================================ BOUTON CRÉER UN COMPTE ============================================ */ body.woocommerce-account #customer_login .woocommerce-form-new a.gz-button { width: 100% !important; min-height: 52px !important; padding: 14px 28px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #ddab2c !important; background-color: #ddab2c !important; background-image: none !important; border: 2px solid #ddab2c !important; border-radius: 999px !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; font-size: 0.86rem !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; text-align: center !important; text-decoration: none !important; box-shadow: none !important; text-shadow: none !important; outline: 0 !important; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease !important; } /* Texte interne */ body.woocommerce-account #customer_login .woocommerce-form-new a.gz-button .glozin-button-text { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* Supprime l'effet slide noir Glozin */ body.woocommerce-account #customer_login .woocommerce-form-new a.gz-button::before, body.woocommerce-account #customer_login .woocommerce-form-new a.gz-button::after { content: none !important; display: none !important; background: transparent !important; background-image: none !important; transform: none !important; transition: none !important; box-shadow: none !important; } /* Survol simple jaune clair */ body.woocommerce-account #customer_login .woocommerce-form-new a.gz-button:hover, body.woocommerce-account #customer_login .woocommerce-form-new a.gz-button:focus { background: #f0bd39 !important; background-color: #f0bd39 !important; background-image: none !important; border-color: #f0bd39 !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; transform: none !important; box-shadow: none !important; } body.woocommerce-account #customer_login .woocommerce-form-new a.gz-button:hover .glozin-button-text, body.woocommerce-account #customer_login .woocommerce-form-new a.gz-button:focus .glozin-button-text { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* Focus clavier */ body.woocommerce-account #customer_login .woocommerce-form-new a.gz-button:focus-visible { outline: 3px solid rgba(221, 171, 44, 0.42) !important; outline-offset: 3px !important; } /* ============================================ PAGE MON COMPTE - CONNEXION "Se souvenir de moi" + "Mot de passe perdu" toujours en blanc ============================================ */ /* Se souvenir de moi */ body.woocommerce-account #customer_login .woocommerce-form-login__rememberme, body.woocommerce-account #customer_login .woocommerce-form-login__rememberme span { color: #f5ecd6 !important; -webkit-text-fill-color: #f5ecd6 !important; } /* Hover / focus */ body.woocommerce-account #customer_login .woocommerce-form-login__rememberme:hover, body.woocommerce-account #customer_login .woocommerce-form-login__rememberme:hover span, body.woocommerce-account #customer_login .woocommerce-form-login__rememberme:focus, body.woocommerce-account #customer_login .woocommerce-form-login__rememberme:focus span, body.woocommerce-account #customer_login .woocommerce-form-login__rememberme:focus-within, body.woocommerce-account #customer_login .woocommerce-form-login__rememberme:focus-within span { color: #f5ecd6 !important; -webkit-text-fill-color: #f5ecd6 !important; background: transparent !important; box-shadow: none !important; } /* Mot de passe perdu */ body.woocommerce-account #customer_login .woocommerce-lost-password { color: #f5ecd6 !important; -webkit-text-fill-color: #f5ecd6 !important; text-decoration-color: #f5ecd6 !important; } /* Hover / focus */ body.woocommerce-account #customer_login .woocommerce-lost-password:hover, body.woocommerce-account #customer_login .woocommerce-lost-password:focus, body.woocommerce-account #customer_login .woocommerce-lost-password:focus-visible { color: #f5ecd6 !important; -webkit-text-fill-color: #f5ecd6 !important; text-decoration-color: #f5ecd6 !important; background: transparent !important; box-shadow: none !important; } /* ============================================ PAGE MON COMPTE - NOUVEAU MOT DE PASSE Labels au-dessus + champs dorés ============================================ */ /* ============================================ CONTENEUR DU FORMULAIRE ============================================ */ body.woocommerce-account form.woocommerce-ResetPassword.lost_reset_password { max-width: 680px !important; margin: 0 auto !important; padding: clamp(24px, 4vw, 36px) !important; background: #111111 !important; border: 1px solid #252525 !important; border-radius: 18px !important; color: #aea899 !important; box-shadow: none !important; } /* Texte d'introduction */ body.woocommerce-account form.woocommerce-ResetPassword.lost_reset_password > p:first-child { margin: 0 0 24px !important; color: #aea899 !important; line-height: 1.7 !important; } /* ============================================ LIGNES DES CHAMPS ============================================ */ body.woocommerce-account form.woocommerce-ResetPassword .woocommerce-form-row--first, body.woocommerce-account form.woocommerce-ResetPassword .woocommerce-form-row--last { float: none !important; width: 100% !important; max-width: 100% !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; margin: 0 0 20px !important; padding: 0 !important; } /* ============================================ LABELS AU-DESSUS ============================================ */ body.woocommerce-account form.woocommerce-ResetPassword .woocommerce-form-row--first > label, body.woocommerce-account form.woocommerce-ResetPassword .woocommerce-form-row--last > label { position: static !important; inset: auto !important; order: -1 !important; display: block !important; width: 100% !important; margin: 0 0 8px !important; padding: 0 !important; transform: none !important; background: transparent !important; color: #f5ecd6 !important; font-size: 0.82rem !important; font-weight: 700 !important; line-height: 1.4 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; pointer-events: auto !important; } /* Astérisque */ body.woocommerce-account form.woocommerce-ResetPassword label .required { color: #ddab2c !important; } /* ============================================ WRAPPER MOT DE PASSE ============================================ */ body.woocommerce-account form.woocommerce-ResetPassword .password-input { position: relative !important; order: 1 !important; display: block !important; width: 100% !important; } /* ============================================ CHAMPS AVEC CONTOUR DORÉ PERMANENT ============================================ */ body.woocommerce-account form.woocommerce-ResetPassword #password_1, body.woocommerce-account form.woocommerce-ResetPassword #password_2 { width: 100% !important; min-height: 52px !important; padding: 13px 56px 13px 15px !important; background: #0d0d0d !important; background-color: #0d0d0d !important; background-image: none !important; border: 1px solid #ddab2c !important; border-radius: 10px !important; color: #f5ecd6 !important; -webkit-text-fill-color: #f5ecd6 !important; font-size: 0.96rem !important; font-weight: 500 !important; line-height: 1.5 !important; box-shadow: 0 0 0 3px rgba(221, 171, 44, 0.22) !important; outline: none !important; } /* Hover */ body.woocommerce-account form.woocommerce-ResetPassword #password_1:hover, body.woocommerce-account form.woocommerce-ResetPassword #password_2:hover { border-color: #ddab2c !important; box-shadow: 0 0 0 3px rgba(221, 171, 44, 0.22) !important; } /* Focus */ body.woocommerce-account form.woocommerce-ResetPassword #password_1:focus, body.woocommerce-account form.woocommerce-ResetPassword #password_1:focus-visible, body.woocommerce-account form.woocommerce-ResetPassword #password_2:focus, body.woocommerce-account form.woocommerce-ResetPassword #password_2:focus-visible { background: #0d0d0d !important; border-color: #ddab2c !important; color: #f5ecd6 !important; -webkit-text-fill-color: #f5ecd6 !important; box-shadow: 0 0 0 3px rgba(221, 171, 44, 0.22) !important; outline: none !important; } /* ============================================ AUTOFILL NAVIGATEUR ============================================ */ body.woocommerce-account form.woocommerce-ResetPassword #password_1:-webkit-autofill, body.woocommerce-account form.woocommerce-ResetPassword #password_1:-webkit-autofill:hover, body.woocommerce-account form.woocommerce-ResetPassword #password_1:-webkit-autofill:focus, body.woocommerce-account form.woocommerce-ResetPassword #password_2:-webkit-autofill, body.woocommerce-account form.woocommerce-ResetPassword #password_2:-webkit-autofill:hover, body.woocommerce-account form.woocommerce-ResetPassword #password_2:-webkit-autofill:focus { -webkit-text-fill-color: #f5ecd6 !important; caret-color: #f5ecd6 !important; border-color: #ddab2c !important; box-shadow: 0 0 0 1000px #0d0d0d inset, 0 0 0 3px rgba(221, 171, 44, 0.22) !important; } /* ============================================ BOUTON AFFICHER LE MOT DE PASSE ============================================ */ body.woocommerce-account form.woocommerce-ResetPassword .show-password-input { position: absolute !important; top: 50% !important; right: 7px !important; width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; padding: 0 !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transform: translateY(-50%) !important; background: #181818 !important; background-color: #181818 !important; background-image: none !important; border: 1px solid #252525 !important; border-radius: 999px !important; color: #f5ecd6 !important; box-shadow: none !important; outline: none !important; cursor: pointer !important; } body.woocommerce-account form.woocommerce-ResetPassword .show-password-input:hover { background: #ddab2c !important; border-color: #ddab2c !important; color: #000000 !important; } /* ============================================ BOUTON ENREGISTRER ============================================ */ body.woocommerce-account form.woocommerce-ResetPassword button.woocommerce-Button { width: 100% !important; min-height: 54px !important; padding: 0 30px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #ddab2c !important; background-color: #ddab2c !important; background-image: none !important; border: 2px solid #ddab2c !important; border-radius: 999px !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; font-size: 0.86rem !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; box-shadow: none !important; text-shadow: none !important; outline: none !important; cursor: pointer !important; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease !important; } /* Supprime les animations natives Glozin */ body.woocommerce-account form.woocommerce-ResetPassword button.woocommerce-Button::before, body.woocommerce-account form.woocommerce-ResetPassword button.woocommerce-Button::after { content: none !important; display: none !important; background: transparent !important; background-image: none !important; transform: none !important; transition: none !important; box-shadow: none !important; } /* Survol simple */ body.woocommerce-account form.woocommerce-ResetPassword button.woocommerce-Button:hover, body.woocommerce-account form.woocommerce-ResetPassword button.woocommerce-Button:focus { background: #f0bd39 !important; background-color: #f0bd39 !important; background-image: none !important; border-color: #f0bd39 !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; transform: none !important; box-shadow: none !important; } /* Focus clavier */ body.woocommerce-account form.woocommerce-ResetPassword button.woocommerce-Button:focus-visible, body.woocommerce-account form.woocommerce-ResetPassword .show-password-input:focus-visible { outline: 3px solid rgba(221, 171, 44, 0.42) !important; outline-offset: 3px !important; } /* ============================================ CORRECTION DU FLOAT WOOCOMMERCE ============================================ */ body.woocommerce-account form.woocommerce-ResetPassword .clear { display: none !important; } /* ============================================ MOBILE ============================================ */ @media (max-width: 600px) { body.woocommerce-account form.woocommerce-ResetPassword.lost_reset_password { padding: 22px 18px !important; border-radius: 14px !important; } body.woocommerce-account form.woocommerce-ResetPassword .woocommerce-form-row--first > label, body.woocommerce-account form.woocommerce-ResetPassword .woocommerce-form-row--last > label { font-size: 0.76rem !important; letter-spacing: 0.05em !important; } } /* ============================================ MON COMPTE CONNECTÉ Conteneur large + vraie colonne principale ============================================ */ /* Élargit uniquement la page Mon compte */ body.woocommerce-account #site-content > .container { width: min(100% - 40px, 1320px) !important; max-width: 1320px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; } /* Article pleine largeur */ body.woocommerce-account #post-10 { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* Conteneur navigation + contenu */ body.woocommerce-account #post-10 > .woocommerce:has(.woocommerce-MyAccount-navigation) { width: 100% !important; max-width: none !important; min-width: 0 !important; display: grid !important; grid-template-columns: 270px minmax(0, 1fr) !important; column-gap: 32px !important; align-items: start !important; margin: 0 !important; padding: 0 !important; } /* ============================================ COLONNE NAVIGATION ============================================ */ body.woocommerce-account #post-10 .woocommerce-MyAccount-navigation { grid-column: 1 !important; float: none !important; width: 270px !important; min-width: 270px !important; max-width: 270px !important; margin: 0 !important; position: sticky !important; top: 110px !important; box-sizing: border-box !important; } /* ============================================ COLONNE CONTENU ============================================ */ body.woocommerce-account #post-10 .woocommerce-MyAccount-content { grid-column: 2 !important; float: none !important; width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; box-sizing: border-box !important; } /* Neutralise les largeurs en pourcentage natives de WooCommerce/Glozin */ body.woocommerce-account #post-10 .woocommerce-MyAccount-navigation, body.woocommerce-account #post-10 .woocommerce-MyAccount-content { flex: none !important; } /* ============================================ TABLETTE Navigation en haut, contenu en dessous ============================================ */ @media (max-width: 980px) { body.woocommerce-account #site-content > .container { width: min(100% - 32px, 900px) !important; } body.woocommerce-account #post-10 > .woocommerce:has(.woocommerce-MyAccount-navigation) { display: grid !important; grid-template-columns: 1fr !important; gap: 22px !important; } body.woocommerce-account #post-10 .woocommerce-MyAccount-navigation, body.woocommerce-account #post-10 .woocommerce-MyAccount-content { grid-column: 1 !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; position: static !important; top: auto !important; } /* Navigation en deux colonnes sur tablette */ body.woocommerce-account #post-10 .woocommerce-MyAccount-navigation ul { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } body.woocommerce-account #post-10 .woocommerce-MyAccount-navigation li { margin: 0 !important; } } /* ============================================ MOBILE ============================================ */ @media (max-width: 600px) { body.woocommerce-account #site-content > .container { width: calc(100% - 24px) !important; max-width: none !important; } body.woocommerce-account #post-10 > .woocommerce:has(.woocommerce-MyAccount-navigation) { display: flex !important; flex-direction: column !important; gap: 18px !important; } body.woocommerce-account #post-10 .woocommerce-MyAccount-navigation, body.woocommerce-account #post-10 .woocommerce-MyAccount-content { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; } /* Un bouton par ligne */ body.woocommerce-account #post-10 .woocommerce-MyAccount-navigation ul { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; } body.woocommerce-account #post-10 .woocommerce-MyAccount-navigation li, body.woocommerce-account #post-10 .woocommerce-MyAccount-navigation li a { width: 100% !important; } body.woocommerce-account #post-10 .woocommerce-MyAccount-content { padding: 20px 16px !important; } } /* Espace sous les messages d’information du compte client */ .woocommerce-account .woocommerce-MyAccount-content > .woocommerce-info { margin-bottom: 30px !important; }