) sur la page /mon-compte/. Deux rôles : 1. Le bloc visible : explique qu'aucun compte n'est nécessaire pour réserver et renvoie vers /mes-reservations/. Sans lui, un visiteur qui atterrit ici voit un formulaire qu'il ne peut pas remplir. 2. Les styles WooCommerce : le formulaire de connexion s'affiche autrement avec la mise en forme brute du thème, en clair au milieu d'un site sombre. Les règles ci-dessous le remettent à la charte. Elles sont globales : peu importe que ce widget soit au-dessus ou en dessous du formulaire. ========================================================================== */ /* ---------- 1. LE BLOC D'EXPLICATION ---------- */ .lmdm-cpt-zone { background-color: #0f3337; font-family: 'Plus Jakarta Sans', sans-serif; padding: 60px 20px 10px 20px; box-sizing: border-box; width: 100%; } .lmdm-cpt-wrapper { max-width: 620px; margin: 0 auto; } .lmdm-cpt-hero { text-align: center; margin-bottom: 34px; } .lmdm-cpt-badge { display: inline-block; color: #c5a059; background: rgba(197, 160, 89, 0.12); border: 1px solid #c5a059; padding: 6px 22px; border-radius: 30px; font-size: 12.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 20px; } .lmdm-cpt-titre { font-family: 'Cinzel Decorative', serif; font-size: 30px; color: #c5a059; letter-spacing: 1.5px; margin: 0 0 14px 0; line-height: 1.3; text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); } .lmdm-cpt-lead { font-size: 15.5px; color: #cbdad8; line-height: 1.8; margin: 0; } /* L'orientation principale : la très grande majorité des visiteurs qui arrivent ici cherchent leur réservation, pas un compte. */ .lmdm-cpt-orientation { background: linear-gradient(145deg, rgba(19, 61, 66, 0.9), rgba(12, 42, 45, 0.98)); border: 1.5px solid rgba(197, 160, 89, 0.45); border-radius: 8px; padding: 30px 28px; text-align: center; box-shadow: 0 10px 32px rgba(0, 0, 0, 0.32); margin-bottom: 30px; } .lmdm-cpt-orientation p { font-size: 14.5px; color: #cbdad8; line-height: 1.75; margin: 0 0 20px 0; } .lmdm-cpt-orientation strong { color: #f5f2eb; } .lmdm-cpt-bouton { display: inline-flex; align-items: center; justify-content: center; background-color: #c5a059; color: #0f3337 !important; border: 1.5px solid #c5a059; padding: 12px 28px; border-radius: 25px; font-size: 13px; font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: 0.6px; transition: all 0.25s ease; } .lmdm-cpt-bouton:hover { background-color: transparent; color: #c5a059 !important; } /* ---------- 2. MISE EN CHARTE DU BLOC WOOCOMMERCE ---------- */ /* Ces règles visent les classes générées par WooCommerce sur la page de compte. Elles s'appliquent à toute la page, pas seulement au widget, d'où le préfixe .woocommerce-account. */ /* Astra empile plusieurs conteneurs autour du contenu, et l'un d'eux garde un vert plus clair — visible comme un cadre autour de la page. On les remet tous au fond du site. Toutes ces règles sont préfixées par .woocommerce-account : elles ne touchent aucune autre page. */ body.woocommerce-account, .woocommerce-account #page, .woocommerce-account #content, .woocommerce-account .site, .woocommerce-account .site-content, .woocommerce-account .ast-container, .woocommerce-account .entry-content, .woocommerce-account .ast-article-single, .woocommerce-account .entry-content > .woocommerce { background-color: #0f3337 !important; } /* Astra réserve une gouttière autour de l'article ; elle laisse apparaître le fond du conteneur parent sur les côtés. */ .woocommerce-account .ast-article-single, .woocommerce-account .ast-container { border: 0 !important; box-shadow: none !important; } .woocommerce-account .entry-title, .woocommerce-account .page-title { display: none !important; /* Le titre est déjà dans le bloc ci-dessus. */ } .woocommerce-account .woocommerce { max-width: 620px; margin: 0 auto; padding: 0 20px 70px 20px; box-sizing: border-box; font-family: 'Plus Jakarta Sans', sans-serif; } /* Le titre que WooCommerce écrit lui-même au-dessus du formulaire (« Se connecter », ou « Mot de passe perdu ? » selon la page). Sans cette règle il s'affiche en vert foncé sur fond vert foncé, donc invisible. On le garde plutôt que de le masquer : il change de libellé selon la page, et c'est lui qui reste juste partout. */ .woocommerce-account .woocommerce h2 { font-family: 'Cinzel Decorative', serif; font-size: 19px; color: #c5a059 !important; text-align: center; letter-spacing: 0.8px; margin: 0 0 22px 0; line-height: 1.35; } /* Le cadre du formulaire */ .woocommerce-account .woocommerce form.login, .woocommerce-account .woocommerce form.register, .woocommerce-account .woocommerce form.lost_reset_password, .woocommerce-account .woocommerce .woocommerce-ResetPassword { background: linear-gradient(180deg, rgba(19, 61, 66, 0.65) 0%, rgba(10, 35, 38, 0.92) 100%); border: 1px solid rgba(197, 160, 89, 0.3); border-radius: 8px; padding: 30px 28px; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.25); } .woocommerce-account .woocommerce form p, .woocommerce-account .woocommerce form label { color: #cbdad8; } .woocommerce-account .woocommerce form label { display: block; font-size: 12.5px; font-weight: 600; color: #c5a059; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 7px; } .woocommerce-account .woocommerce .required { color: #c5a059; text-decoration: none; border: 0; } /* Les champs */ .woocommerce-account .woocommerce input[type="text"], .woocommerce-account .woocommerce input[type="email"], .woocommerce-account .woocommerce input[type="password"] { width: 100%; box-sizing: border-box; background: rgba(10, 32, 35, 0.85); border: 1px solid rgba(197, 160, 89, 0.3); border-radius: 5px; padding: 12px 14px; color: #f5f2eb; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; transition: border-color 0.2s ease; } .woocommerce-account .woocommerce input[type="text"]:focus, .woocommerce-account .woocommerce input[type="email"]:focus, .woocommerce-account .woocommerce input[type="password"]:focus { border-color: #c5a059; outline: none; } /* L'œil de révélation du mot de passe, sinon invisible sur fond sombre */ .woocommerce-account .woocommerce .show-password-input::after { color: #c5a059; } /* Le bouton */ .woocommerce-account .woocommerce button.button, .woocommerce-account .woocommerce .button { background-color: #c5a059 !important; color: #0f3337 !important; border: 1.5px solid #c5a059 !important; border-radius: 25px !important; padding: 12px 30px !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.6px !important; transition: all 0.25s ease !important; } .woocommerce-account .woocommerce button.button:hover, .woocommerce-account .woocommerce .button:hover { background-color: transparent !important; color: #c5a059 !important; } /* « Se souvenir de moi » et « Mot de passe perdu ? » */ .woocommerce-account .woocommerce .woocommerce-form-login__rememberme span { font-size: 13.5px; color: #cbdad8; text-transform: none; letter-spacing: 0; font-weight: 400; } .woocommerce-account .woocommerce .woocommerce-LostPassword a, .woocommerce-account .woocommerce a { color: #c5a059; } .woocommerce-account .woocommerce .woocommerce-LostPassword a:hover { color: #f5f2eb; } /* Messages d'erreur et d'information */ .woocommerce-account .woocommerce-error, .woocommerce-account .woocommerce-message, .woocommerce-account .woocommerce-info { background: rgba(10, 32, 35, 0.9) !important; border-top: 3px solid #c5a059 !important; color: #f5f2eb !important; border-radius: 6px; max-width: 620px; margin: 0 auto 22px auto; list-style: none; } .woocommerce-account .woocommerce-error a, .woocommerce-account .woocommerce-message a, .woocommerce-account .woocommerce-info a { color: #c5a059 !important; } /* Vue connectée — utile le jour où des comptes existeront */ .woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; } .woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 10px 14px; color: #cbdad8; border-bottom: 1px solid rgba(197, 160, 89, 0.18); text-decoration: none; } .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: #c5a059; font-weight: 700; } .woocommerce-account .woocommerce-MyAccount-content, .woocommerce-account .woocommerce-MyAccount-content p { color: #cbdad8; } @media (max-width: 600px) { .lmdm-cpt-titre { font-size: 24px; } .lmdm-cpt-zone { padding: 45px 15px 10px 15px; } .lmdm-cpt-orientation { padding: 26px 20px; } .woocommerce-account .woocommerce h2 { font-size: 17px; } }