) 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; }
}
Customer area
My account
You don't need an account to book with us. Our experiences can be booked and paid for in just a few clicks, without registration or passwords to remember.
Looking for your booking confirmation?
Your confirmation has been sent to you by email, and that's the official confirmation. Our help page explains where to find it, how to change your date, and what the cancellation policy is.
Legal notice
Loading…