/* ============================================================ page-mon-compte.css — Espace compte WooCommerce, style batibien Structure réelle (source) : main#main-content › main#primary.site-main--page › article › .entry-content › .woocommerce › nav.woocommerce-MyAccount-navigation › .woocommerce-MyAccount-content Tokens batibien hérités de header.css (--ink, --leaf, --amber…). ============================================================ */ /* ---------- Conteneur + titre de page ---------- */ .woocommerce-account .site-main--page { background: var(--paper); } .woocommerce-account .entry-content { max-width: var(--max); margin: 0 auto; padding: 44px 24px 80px; } /* Titre « Informations client » — UNIQUEMENT quand connecté (pas sur la page de connexion) */ .woocommerce-account.logged-in .entry-content::before { content: "Informations client"; display: block; font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(1.9rem, 4vw, 2.6rem); color: var(--ink); margin: 0 0 24px; } /* Traduction du titre CSS via la langue du (basculée par le module maison) */ html[lang^="en"] .woocommerce-account.logged-in .entry-content::before { content: "Customer information"; } html[lang^="de"] .woocommerce-account.logged-in .entry-content::before { content: "Kundeninformationen"; } /* ---------- Layout : navigation + contenu ---------- Layout en FLOAT (mécanisme natif WooCommerce, fiable) : nav flottante à gauche (240px), contenu à droite qui remplit l'espace via un contexte de formatage de bloc (overflow). On garde !important pour passer devant les largeurs par défaut de WooCommerce (30%/70%). */ .woocommerce-account .entry-content .woocommerce::after { content: ""; display: block; clear: both; } .woocommerce-account .woocommerce-MyAccount-navigation { float: left !important; width: 240px !important; margin: 0 !important; } .woocommerce-account .woocommerce-MyAccount-content { float: none !important; width: auto !important; margin: 0 0 0 264px !important; /* 240 nav + 24 gouttière */ overflow: hidden; /* BFC : le contenu ne coule pas sous la nav */ } /* ---------- Navigation (onglets) ---------- */ .woocommerce-MyAccount-navigation { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; position: sticky; top: 96px; box-shadow: 0 1px 3px rgba(20, 38, 29, .04); } .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; } .woocommerce-MyAccount-navigation li { margin: 0; padding: 0; } .woocommerce-MyAccount-navigation li + li { border-top: 1px solid var(--paper); } .woocommerce-MyAccount-navigation li a { display: block; padding: 12px 14px; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .93rem; transition: background .15s ease, color .15s ease; } .woocommerce-MyAccount-navigation li a:hover { background: var(--leaf-soft); color: var(--leaf); } .woocommerce-MyAccount-navigation li.is-active a { background: var(--leaf); color: var(--paper); } .woocommerce-MyAccount-navigation li.is-active + li { border-top-color: transparent; } .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--muted); } /* ---------- Contenu ---------- */ .woocommerce-MyAccount-content { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 32px; min-height: 340px; min-width: 0; box-shadow: 0 1px 3px rgba(20, 38, 29, .04); } .woocommerce-MyAccount-content > p { color: var(--ink); line-height: 1.7; } .woocommerce-MyAccount-content a { color: var(--leaf); font-weight: 600; } .woocommerce-MyAccount-content h2, .woocommerce-MyAccount-content h3 { font-family: 'Fraunces', serif; color: var(--ink); } /* Message d'accueil « Bonjour … » mis en avant */ .woocommerce-MyAccount-content > p:first-of-type strong { color: var(--leaf); } /* ---------- Tableau de bord modernisé (dashboard.php) ---------- */ .bb-account-dash .bb-dash-hello { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.5rem; color: var(--ink); margin: 0 0 4px; } .bb-account-dash .bb-dash-hello strong { color: var(--leaf); } .bb-account-dash .bb-dash-intro { color: var(--muted); margin: 0 0 24px; } .bb-account-dash .bb-dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .bb-account-dash .bb-dash-card { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); text-decoration: none; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; } .bb-account-dash .bb-dash-card:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -20px rgba(20, 38, 29, .34); border-color: var(--leaf-soft); } .bb-account-dash .bb-dash-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--leaf-soft); color: var(--leaf); margin-bottom: 8px; } .bb-account-dash .bb-dash-ic svg { width: 22px; height: 22px; } .bb-account-dash .bb-dash-t { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.1rem; color: var(--ink); } .bb-account-dash .bb-dash-d { font-size: .88rem; color: var(--muted); } .bb-account-dash .bb-dash-arrow { position: absolute; top: 22px; right: 22px; color: var(--leaf); font-size: 1.15rem; opacity: .55; transition: transform .18s ease, opacity .18s ease; } .bb-account-dash .bb-dash-card:hover .bb-dash-arrow { transform: translateX(3px); opacity: 1; } @media (max-width: 520px) { .bb-account-dash .bb-dash-grid { grid-template-columns: 1fr; } } /* ---------- Avis WooCommerce (ex. « View dashboard ») ---------- */ .woocommerce-account .woocommerce-info, .woocommerce-account .woocommerce-message { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--leaf-soft); border: 1px solid var(--line); border-top: 3px solid var(--leaf); border-radius: 10px; color: var(--ink); padding: 14px 18px; margin: 0 0 22px; } .woocommerce-account .woocommerce-info::before, .woocommerce-account .woocommerce-message::before { display: none; } .woocommerce-account .woocommerce-error { background: #fbeee0; border-top: 3px solid var(--amber); border-radius: 10px; } /* Onglet Commandes : masquer l'avis « Confirmer l'adresse e-mail » (avis avec bouton). Le message texte « aucune commande » (sans bouton) reste, lui, visible. */ .bb-ep-orders .woocommerce-MyAccount-content .woocommerce-info:has(.button), .bb-ep-orders .woocommerce-MyAccount-content .woocommerce-message:has(.button) { display: none !important; } /* ---------- Tableaux (commandes) ---------- */ .woocommerce-account .shop_table, .woocommerce-account .woocommerce-orders-table { border: 1px solid var(--line); border-radius: var(--radius); border-collapse: separate; border-spacing: 0; overflow: hidden; width: 100%; } .woocommerce-account .shop_table th { background: var(--leaf-soft); color: var(--ink); font-weight: 700; padding: 14px 16px; text-align: left; border: none; } .woocommerce-account .shop_table td { padding: 14px 16px; border-top: 1px solid var(--line); color: var(--ink); background: #fff; } /* ---------- Adresses ---------- WooCommerce utilise .col2-set (float + width ~47%) → on neutralise et on remet une grille 2 colonnes propre (1 colonne sur mobile via le bloc responsive). */ .woocommerce-account .woocommerce-Addresses { display: grid !important; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 8px; float: none !important; width: auto !important; } /* Neutralise le clearfix .col2-set (::before/::after) qui, en grille, crée des cases fantômes */ .woocommerce-account .woocommerce-Addresses::before, .woocommerce-account .woocommerce-Addresses::after { display: none !important; } /* Carte en colonne : titre → adresse → bouton « Modifier » en bas. display:contents sur l'en-tête → le titre et le lien deviennent des enfants directs de la carte, ce qui permet de les ordonner (order) avec l'adresse. */ .woocommerce-account .woocommerce-Address { display: flex; flex-direction: column; float: none !important; width: auto !important; margin: 0 !important; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; background: var(--paper); } .woocommerce-account .woocommerce-Address-title.title { display: contents; } .woocommerce-account .woocommerce-Address-title h3 { order: 0; margin: 0 0 12px; } .woocommerce-account .woocommerce-Address address { order: 1; font-style: normal; line-height: 1.7; color: var(--ink); margin: 0; } .woocommerce-account .woocommerce-Address-title .edit { order: 2; align-self: flex-start; margin-top: 18px; display: inline-block; padding: 8px 18px; border: 1.5px solid var(--leaf); border-radius: 999px; color: var(--leaf); font-weight: 600; font-size: .85rem; text-decoration: none; transition: background .15s ease, color .15s ease; } .woocommerce-account .woocommerce-Address-title .edit:hover { background: var(--leaf); color: var(--paper); } /* Détails du compte : masquer la section « Modification du mot de passe » (inutile pour une fiche client). Les champs restent dans le DOM mais vides → WooCommerce ne modifie pas le mot de passe à l'enregistrement. */ .woocommerce-EditAccountForm fieldset, .woocommerce-EditAccountForm .woocommerce-password-strength, .woocommerce-EditAccountForm .woocommerce-password-hint { display: none !important; } /* ---------- Formulaires (détails du compte, connexion) ---------- */ .woocommerce-account form .form-row, .woocommerce form.login .form-row, .woocommerce form.register .form-row { margin-bottom: 16px; } .woocommerce-account label, .woocommerce form.login label, .woocommerce form.register label { font-weight: 600; color: var(--ink); margin-bottom: 6px; display: inline-block; } .woocommerce-account input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), .woocommerce-account select, .woocommerce form.login input, .woocommerce form.register input { width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font: inherit; transition: border-color .15s ease, box-shadow .15s ease; } .woocommerce-account input:focus, .woocommerce-account select:focus, .woocommerce form.login input:focus, .woocommerce form.register input:focus { outline: none; border-color: var(--leaf); box-shadow: 0 0 0 3px rgba(46, 91, 69, .12); } /* ---------- Boutons WooCommerce → style batibien ---------- */ .woocommerce-account .button, .woocommerce-account button[type="submit"], .woocommerce form.login .button, .woocommerce form.register .button { display: inline-block; background: var(--leaf); color: var(--paper); border: 1.5px solid var(--leaf); border-radius: 999px; padding: 11px 24px; font-weight: 600; font-size: .93rem; line-height: 1.2; cursor: pointer; text-decoration: none; transition: background .15s ease, transform .15s ease; } .woocommerce-account .button:hover, .woocommerce-account button[type="submit"]:hover, .woocommerce form.login .button:hover, .woocommerce form.register .button:hover { background: var(--ink); transform: translateY(-1px); } /* Bouton dans un avis (ex. « View dashboard ») → ambre, ne prend pas toute la largeur */ .woocommerce-account .woocommerce-info .button, .woocommerce-account .woocommerce-message .button { background: var(--amber); border-color: var(--amber); color: #fff; margin: 0; } .woocommerce-account .woocommerce-info .button:hover { background: var(--amber-deep); } .woocommerce-account .woocommerce-button--view, .woocommerce-account .button.alt { background: var(--amber); border-color: var(--amber); color: #fff; } .woocommerce-account .woocommerce-button--view:hover, .woocommerce-account .button.alt:hover { background: var(--amber-deep); } /* ---------- Page connexion / inscription (déconnecté) ---------- */ /* Le titre de la page connexion est DANS la carte (voir « CONNEXION » plus bas), pas en ::before flottant (qui traînait mal aligné à gauche). */ /* 2 colonnes en cartes : « Se connecter » | « S'inscrire » */ #customer_login.u-columns { display: grid; grid-template-columns: 1fr 1.15fr; gap: 24px; align-items: start; } #customer_login.u-columns::before, #customer_login.u-columns::after { display: none !important; } /* clearfix col2-set fantôme */ #customer_login .u-column1, #customer_login .u-column2 { float: none !important; width: auto !important; margin: 0 !important; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 30px; } #customer_login h2 { font-family: 'Fraunces', serif; margin: 0 0 18px; color: var(--ink); } /* Formulaire d'inscription : champs sur 2 colonnes internes (compact) */ .woocommerce-form-register { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; } .woocommerce-form-register > p, .woocommerce-form-register > div { grid-column: 1 / -1; } /* plein largeur par défaut */ .woocommerce-form-register #billing_first_name_field, .woocommerce-form-register #billing_last_name_field, .woocommerce-form-register #billing_postcode_field, .woocommerce-form-register #billing_city_field, .woocommerce-form-register #billing_country_field, .woocommerce-form-register #billing_state_field, .woocommerce-form-register #billing_vat_field, .woocommerce-form-register #billing_phone_field { grid-column: span 1; } /* mis en paires */ .woocommerce-form-register .woocommerce-privacy-policy-text { margin-top: 6px; } /* Champ fichier (justificatif) */ .woocommerce-account input[type="file"] { width: 100%; padding: 10px 12px; border: 1.5px dashed var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; cursor: pointer; } .woocommerce-account input[type="file"]:hover { border-color: var(--leaf); } .woocommerce-account .form-text { font-size: .82rem; color: var(--muted); } /* ═══════ Séparation en 2 pages : Connexion (/mon-compte/) + Inscription (/creer-un-compte/) ═══════ Les 2 formulaires existent (inscription WC activée, requise par le shortcode B2B) ; chaque page n'en affiche qu'UN via CSS. Les styles de champ ci-dessous sont scopés à #customer_login (présent sur les 2 pages) car /creer-un-compte/ n'a pas la classe body .woocommerce-account. */ #customer_login label { font-weight: 600; color: var(--ink); margin-bottom: 6px; display: inline-block; } #customer_login input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="file"]), #customer_login select { width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font: inherit; } #customer_login input:focus, #customer_login select:focus { outline: none; border-color: var(--leaf); box-shadow: 0 0 0 3px rgba(46,91,69,.12); } #customer_login .button, #customer_login button[type="submit"] { display: inline-block; background: var(--leaf); color: var(--paper); border: 1.5px solid var(--leaf); border-radius: 999px; padding: 11px 24px; font-weight: 600; cursor: pointer; text-decoration: none; } #customer_login .button:hover, #customer_login button[type="submit"]:hover { background: var(--ink); } #customer_login input[type="file"] { width: 100%; padding: 10px 12px; border: 1.5px dashed var(--line); border-radius: 10px; background: var(--paper); cursor: pointer; } #customer_login input[type="file"]:hover { border-color: var(--leaf); } #customer_login .form-text, #customer_login small { font-size: .82rem; color: var(--muted); } /* page inscription : titre « Demander un accès » DANS la carte (comme le login) */ .page-id-3909 #customer_login h2 { display: block; text-align: center; font-size: 0; margin: 0; } .page-id-3909 #customer_login h2::before { content: "Demander un accès"; display: block; font-family: 'Fraunces', serif; font-size: 1.7rem; color: var(--ink); margin: 0 0 4px; } .page-id-3909 #customer_login h2::after { content: "Créez votre compte partenaire — accès validé après vérification."; display: block; font-family: 'Archivo', sans-serif; font-weight: 400; font-size: .92rem; color: var(--muted); margin: 6px 0 20px; } /* ═══ /mon-compte/ = page de CONNEXION : carte unique, moderne ═══ */ .woocommerce-account:not(.logged-in) .entry-content { max-width: 440px; margin: 0 auto; padding: 64px 20px 90px; } .woocommerce-account:not(.logged-in) #customer_login.u-columns { display: block; max-width: none; margin: 0; } .woocommerce-account:not(.logged-in) #customer_login .u-column2 { display: none; } .woocommerce-account:not(.logged-in) #customer_login .u-column1 { padding: 38px 34px; border-radius: 16px; box-shadow: 0 24px 60px -34px rgba(20, 38, 29, .35); } /* Neutralise une éventuelle double-box (formulaire encadré par le plugin B2B par-dessus la carte) */ #customer_login form.login { border: 0 !important; background: transparent !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; } /* Titre + sous-titre DANS la carte */ .woocommerce-account:not(.logged-in) #customer_login h2 { display: block; text-align: center; font-family: 'Fraunces', serif; font-size: 1.7rem; color: var(--ink); margin: 0 0 4px; } .woocommerce-account:not(.logged-in) #customer_login h2::after { content: "Accédez à votre espace partenaire."; display: block; font-family: 'Archivo', sans-serif; font-weight: 400; font-size: .92rem; color: var(--muted); margin: 6px 0 18px; } /* Bouton pleine largeur, lignes « se souvenir » / « mot de passe perdu » propres */ .woocommerce-account:not(.logged-in) #customer_login .woocommerce-form-login__submit { width: 100%; margin-top: 4px; } .woocommerce-account:not(.logged-in) #customer_login .woocommerce-form-login__rememberme { display: flex !important; align-items: center; gap: 8px; font-size: .9rem; color: var(--muted); margin: 4px 0 16px; cursor: pointer; } .woocommerce-account:not(.logged-in) #customer_login .woocommerce-form-login__rememberme input[type="checkbox"] { width: 16px !important; height: 16px; min-width: 16px; margin: 0 !important; padding: 0 !important; flex: 0 0 auto; box-shadow: none !important; vertical-align: middle; } .woocommerce-account:not(.logged-in) #customer_login .woocommerce-form-login__rememberme span { line-height: 1.2; } .woocommerce-account:not(.logged-in) #customer_login .lost_password { text-align: center; margin-top: 16px; font-size: .9rem; } .woocommerce-account:not(.logged-in) #customer_login .lost_password a { color: var(--leaf); } /* Lien « Demander un accès » sous le formulaire (ajouté via hook woocommerce_login_form_end) */ .bb-login-alt { text-align: center; margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: .92rem; color: var(--muted); } .bb-login-alt a { color: var(--leaf); font-weight: 600; } /* ═══ /creer-un-compte/ (page 3909) = INSCRIPTION : carte unique moderne (comme le login) ═══ */ .page-id-3909 .entry-content { max-width: 680px; margin: 0 auto; padding: 64px 20px 90px; } .page-id-3909 #customer_login.u-columns { display: block; max-width: none; margin: 0; } .page-id-3909 #customer_login .u-column1 { display: none; } .page-id-3909 #customer_login .u-column2 { padding: 38px 34px; border-radius: 16px; box-shadow: 0 24px 60px -34px rgba(20, 38, 29, .35); } /* Neutralise la double-box (form register encadré par le plugin) + bouton pleine largeur */ #customer_login form.register { border: 0 !important; background: transparent !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; } .page-id-3909 #customer_login .woocommerce-form-register__submit { width: 100%; margin-top: 8px; } /* Responsive : tout en une colonne */ @media (max-width: 820px) { #customer_login.u-columns { grid-template-columns: 1fr; } .woocommerce-form-register { grid-template-columns: 1fr; } } /* ---------- Responsive ---------- */ @media (max-width: 780px) { .woocommerce-account .woocommerce-MyAccount-navigation { float: none !important; width: auto !important; margin: 0 0 20px !important; position: static; } .woocommerce-account .woocommerce-MyAccount-content { margin-left: 0 !important; } .woocommerce-account .woocommerce-Addresses { grid-template-columns: 1fr; } .woocommerce-MyAccount-content { padding: 22px; min-height: 0; } } /* ═══ Page « nouveau mot de passe » (reset) — /mon-compte/lost-password ═══ */ .woocommerce-ResetPassword.lost_reset_password { max-width: 440px; margin: 0 auto; padding: 8px 0 48px; } .woocommerce-ResetPassword > p:first-child { color: #3C4F44; margin: 0 0 18px; } .woocommerce-ResetPassword .form-row, .woocommerce-ResetPassword .woocommerce-form-row { display: block !important; width: 100% !important; float: none !important; margin: 0 0 16px; padding: 0; } .woocommerce-ResetPassword label { display: block; font-weight: 600; color: var(--ink); margin-bottom: 6px; } .woocommerce-ResetPassword .password-input { display: block; width: 100%; position: relative; } .woocommerce-ResetPassword input[type="password"], .woocommerce-ResetPassword input[type="text"] { width: 100%; display: block; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font: inherit; } .woocommerce-ResetPassword input:focus { outline: none; border-color: var(--leaf); box-shadow: 0 0 0 3px rgba(46,91,69,.12); } .woocommerce-ResetPassword .show-password-input { position: absolute; right: 12px; top: 13px; cursor: pointer; } .woocommerce-ResetPassword .woocommerce-password-strength { margin-top: 6px; font-size: .85rem; } .woocommerce-ResetPassword button[type="submit"] { width: 100%; margin-top: 4px; background: var(--leaf); color: var(--paper); border: none; border-radius: 999px; padding: 13px 24px; font-weight: 600; cursor: pointer; } .woocommerce-ResetPassword button[type="submit"]:hover { background: var(--ink); }