/* ============================================================================= Florâme — « Mon compte » WooCommerce — look & feel premium (charte Figma) Vert olive foncé #828D7D (accents / boutons / état actif) Vert olive clair #B3BEAF (placeholders / hover doux) Olive très clair #CED9CB (hairlines / bordures) Olive très clair+ #F0F2EF (fonds doux) Blanc #FFFFFF Typo : Montserrat (corps) ; les titres héritent de la police du thème. IMPORTANT : « woocommerce-account » est une classe du , donc ANCÊTRE de #ajax-content-wrap. La base est donc « .woocommerce-account #ajax-content-wrap ». ========================================================================== */ .woocommerce-account{ --flo-olive: #828D7D; --flo-olive-dark: #6f7a6a; --flo-olive-light: #B3BEAF; --flo-border: #CED9CB; --flo-soft: #F0F2EF; --flo-shadow: 0 6px 24px rgba(60,74,57,.07); --flo-shadow-sm: 0 2px 10px rgba(60,74,57,.06); } /* Zone « Mon compte » sur 100% du container (plus de largeur max centrée) */ .woocommerce-account #ajax-content-wrap .woocommerce{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:48px; max-width:100%; margin:0; padding:8px 0 24px; font-family:"Montserrat",sans-serif; color:#3c4a39; } /* --------------------------------------------------------------------------- 1. NAVIGATION — carte premium, état actif olive plein --------------------------------------------------------------------------- */ .woocommerce-account #ajax-content-wrap .woocommerce-MyAccount-navigation{ flex:0 0 260px; width:260px; margin:0; font-size:15px; } .woocommerce-account #ajax-content-wrap .woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:10px; background:#fff; border:1px solid var(--flo-border); border-radius:18px; box-shadow:var(--flo-shadow); } .woocommerce-account #ajax-content-wrap .woocommerce-MyAccount-navigation li{ margin:2px 0; padding:0; border:0; } .woocommerce-account #ajax-content-wrap .woocommerce-MyAccount-navigation li a{ display:block; padding:13px 18px; border-radius:12px; color:var(--flo-olive); font:500 15px/1.3 "Montserrat",sans-serif; text-decoration:none; letter-spacing:.2px; transition:background .18s ease, color .18s ease, transform .18s ease; } .woocommerce-account #ajax-content-wrap .woocommerce-MyAccount-navigation li a:hover{ background:var(--flo-soft); } .woocommerce-account #ajax-content-wrap .woocommerce-MyAccount-navigation li.is-active a{ background:var(--flo-olive); color:#fff; font-weight:600; box-shadow:0 4px 12px rgba(130,141,125,.30); } /* Icône FontAwesome (a:before) en blanc sur l'onglet actif (sinon olive sur olive) */ .woocommerce-account #ajax-content-wrap .woocommerce-MyAccount-navigation li.is-active a, .woocommerce-account #ajax-content-wrap .woocommerce-MyAccount-navigation li.is-active a:before{ color:#fff !important; -webkit-text-fill-color:#fff !important; opacity:1 !important; } /* Déconnexion : légèrement détachée, en bas */ .woocommerce-account #ajax-content-wrap .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout{ margin-top:8px; padding-top:8px; border-top:1px solid var(--flo-soft); } .woocommerce-account #ajax-content-wrap .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a{ color:var(--flo-olive-dark); } /* --------------------------------------------------------------------------- 2. CONTENU — carte blanche, ombre douce, beaucoup d'air --------------------------------------------------------------------------- */ .woocommerce-account #ajax-content-wrap .woocommerce-MyAccount-content{ flex:1 1 0; min-width:0; margin:0; background:#fff; border:1px solid var(--flo-border); border-radius:18px; box-shadow:var(--flo-shadow); padding:40px clamp(24px,3.5vw,48px); font:400 16px/1.7 "Montserrat",sans-serif; color:#3c4a39; } /* Titres = EXACTEMENT la classe « h3like » du thème (style.css) : The Seasons, 32px (base) / 28px (≤990) / 26px (≤690), weight 400, line-height normal. On garde les mêmes déclarations + la spécificité/!important pour passer devant Salient. */ .woocommerce-account #ajax-content-wrap .woocommerce-MyAccount-content h1, .woocommerce-account #ajax-content-wrap .woocommerce-MyAccount-content h2, .woocommerce-account #ajax-content-wrap .woocommerce-MyAccount-content h3, .woocommerce-account #ajax-content-wrap .woocommerce-Address-title h2, .woocommerce-account #ajax-content-wrap .woocommerce-Address-title h3{ leading-trim:both; text-edge:cap; font-family:"the-seasons", Georgia, serif !important; font-size:32px !important; font-style:normal !important; font-weight:400 !important; line-height:normal !important; letter-spacing:0 !important; text-transform:none !important; margin:0 0 18px; } .woocommerce-account #ajax-content-wrap .woocommerce-Address-title h2, .woocommerce-account #ajax-content-wrap .woocommerce-Address-title h3{ margin:0; } .woocommerce-account #ajax-content-wrap .woocommerce-MyAccount-content > h2:not(:first-child), .woocommerce-account #ajax-content-wrap .woocommerce-MyAccount-content > h3:not(:first-child){ margin-top:34px; padding-top:26px; border-top:1px solid var(--flo-soft); } @media screen and (max-width:990px){ .woocommerce-account #ajax-content-wrap .woocommerce-MyAccount-content h1, .woocommerce-account #ajax-content-wrap .woocommerce-MyAccount-content h2, .woocommerce-account #ajax-content-wrap .woocommerce-MyAccount-content h3, .woocommerce-account #ajax-content-wrap .woocommerce-Address-title h2, .woocommerce-account #ajax-content-wrap .woocommerce-Address-title h3{ font-size:28px !important; } } @media screen and (max-width:690px){ .woocommerce-account #ajax-content-wrap .woocommerce-MyAccount-content h1, .woocommerce-account #ajax-content-wrap .woocommerce-MyAccount-content h2, .woocommerce-account #ajax-content-wrap .woocommerce-MyAccount-content h3, .woocommerce-account #ajax-content-wrap .woocommerce-Address-title h2, .woocommerce-account #ajax-content-wrap .woocommerce-Address-title h3{ font-size:26px !important; } } .woocommerce-account #ajax-content-wrap .woocommerce-MyAccount-content a:not(.button){ color:var(--flo-olive); text-decoration:none; border-bottom:1px solid var(--flo-olive-light); transition:border-color .15s ease; } .woocommerce-account #ajax-content-wrap .woocommerce-MyAccount-content a:not(.button):hover{ border-bottom-color:var(--flo-olive); } .woocommerce-account #ajax-content-wrap .woocommerce-MyAccount-content mark{ background:var(--flo-soft); color:var(--flo-olive-dark); padding:0 4px; border-radius:3px; } @media (max-width:782px){ .woocommerce-account #ajax-content-wrap .woocommerce{ gap:24px; } .woocommerce-account #ajax-content-wrap .woocommerce-MyAccount-navigation{ flex:1 1 100%; width:100%; } .woocommerce-account #ajax-content-wrap .woocommerce-MyAccount-content{ padding:28px 22px; } } /* --------------------------------------------------------------------------- 3. TABLEAUX (commandes, etc.) — aérés, hairlines --------------------------------------------------------------------------- */ .woocommerce-account #ajax-content-wrap .woocommerce table.shop_table, .woocommerce-account #ajax-content-wrap .woocommerce-orders-table{ border:1px solid var(--flo-border) !important; border-radius:14px !important; border-collapse:separate !important; border-spacing:0 !important; overflow:hidden; background:#fff; margin:0; } .woocommerce-account #ajax-content-wrap .woocommerce table.shop_table thead th, .woocommerce-account #ajax-content-wrap .woocommerce-orders-table thead th{ background:var(--flo-soft) !important; color:var(--flo-olive) !important; font:600 12px/1.2 "Montserrat",sans-serif !important; text-transform:uppercase; letter-spacing:.6px; padding:15px 18px !important; border:0 !important; } .woocommerce-account #ajax-content-wrap .woocommerce table.shop_table td, .woocommerce-account #ajax-content-wrap .woocommerce-orders-table td{ padding:16px 18px !important; border-top:1px solid var(--flo-soft) !important; color:#3c4a39; vertical-align:middle; } /* --------------------------------------------------------------------------- 4. BLOCS ADRESSES — 1 type par ligne, sans bordure, séparés d'un filet, bouton « Ajouter » sous le titre, au style charte (pilule olive). --------------------------------------------------------------------------- */ .woocommerce-account #ajax-content-wrap .woocommerce-Addresses{ display:block; /* 1 type d'adresse par ligne */ margin-top:6px; } .woocommerce-account #ajax-content-wrap .woocommerce-Address{ width:100% !important; float:none !important; /* WooCommerce flotte les colonnes par défaut */ border:0 !important; /* pas de bordure dans les blocs */ border-radius:0 !important; background:transparent !important; box-shadow:none !important; padding:26px 0 !important; border-bottom:1px solid var(--flo-soft) !important; /* filet de séparation */ } .woocommerce-account #ajax-content-wrap .woocommerce-Address:last-child{ border-bottom:0 !important; } /* Titre puis bouton EN DESSOUS */ .woocommerce-account #ajax-content-wrap .woocommerce-Address-title{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; margin-bottom:14px; } /* Bouton « Ajouter / Modifier » : style charte (pilule olive) */ .woocommerce-account #ajax-content-wrap .woocommerce-Address-title .edit{ -webkit-appearance:none; appearance:none; display:inline-block; border:0 !important; border-radius:100px !important; background:#828d7d !important; color:#fff !important; padding:9px 20px !important; font:600 12px/1 "Montserrat",sans-serif !important; text-transform:uppercase !important; letter-spacing:.4px !important; text-decoration:none !important; transition:background .2s ease, box-shadow .2s ease; } .woocommerce-account #ajax-content-wrap .woocommerce-Address-title .edit:hover{ background:#6f7a6a !important; box-shadow:0 6px 16px rgba(130,141,125,.30) !important; } .woocommerce-account #ajax-content-wrap address{ font-style:normal; line-height:1.8; color:#3c4a39; } /* « Aucune commande » : on ne garde que le texte → on masque le bouton « Parcourir les produits » (classe réelle : woocommerce-Button wc-forward button). */ .woocommerce-account #ajax-content-wrap .woocommerce-MyAccount-content .woocommerce-info a.woocommerce-Button, .woocommerce-account #ajax-content-wrap .woocommerce-MyAccount-content .woocommerce-info a.button.wc-forward{ display:none !important; } /* --------------------------------------------------------------------------- 5. FORMULAIRES — édition adresse + infos compte Inputs : fond blanc, contour accent, arrondi 4px, texte olive (comme inscription) --------------------------------------------------------------------------- */ .woocommerce-account #ajax-content-wrap .woocommerce form .form-row label, .woocommerce-account #ajax-content-wrap .woocommerce-EditAccountForm label, .woocommerce-account #ajax-content-wrap .woocommerce-address-fields label{ display:block; margin:0 0 7px; color:var(--flo-olive) !important; font:500 15px/1.4 "Montserrat",sans-serif !important; text-transform:none !important; letter-spacing:0 !important; } .woocommerce-account #ajax-content-wrap .woocommerce form .required{ color:var(--flo-olive); border:0; text-decoration:none; } .woocommerce-account #ajax-content-wrap .woocommerce form .form-row{ margin:0 0 20px; padding:0; } .woocommerce-account #ajax-content-wrap .woocommerce input.input-text, .woocommerce-account #ajax-content-wrap .woocommerce input[type=text], .woocommerce-account #ajax-content-wrap .woocommerce input[type=email], .woocommerce-account #ajax-content-wrap .woocommerce input[type=tel], .woocommerce-account #ajax-content-wrap .woocommerce input[type=password], .woocommerce-account #ajax-content-wrap .woocommerce input[type=number], .woocommerce-account #ajax-content-wrap .woocommerce select, .woocommerce-account #ajax-content-wrap .woocommerce textarea, .woocommerce-account #ajax-content-wrap .woocommerce .select2-container .select2-selection{ -webkit-appearance:none !important; appearance:none !important; display:block !important; width:100% !important; box-sizing:border-box !important; margin:0 !important; padding:12px 14px !important; min-height:46px !important; background-color:#FFF !important; border:1px solid var(--nectar-accent-color, #CED9CB) !important; border-radius:4px !important; box-shadow:none !important; color:var(--flo-olive) !important; font:400 16px/1.5 "Montserrat",sans-serif !important; transition:border-color .15s ease, box-shadow .15s ease; } .woocommerce-account #ajax-content-wrap .woocommerce textarea{ min-height:120px !important; resize:vertical; } .woocommerce-account #ajax-content-wrap .woocommerce input.input-text::placeholder, .woocommerce-account #ajax-content-wrap .woocommerce textarea::placeholder{ color:var(--flo-olive-light); } .woocommerce-account #ajax-content-wrap .woocommerce input.input-text:focus, .woocommerce-account #ajax-content-wrap .woocommerce input:focus, .woocommerce-account #ajax-content-wrap .woocommerce select:focus, .woocommerce-account #ajax-content-wrap .woocommerce textarea:focus{ outline:none !important; border-color:var(--flo-olive) !important; box-shadow:0 0 0 3px rgba(130,141,125,.16) !important; } /* Select natif : chevron olive */ .woocommerce-account #ajax-content-wrap .woocommerce select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23828D7D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right 14px center !important; padding-right:42px !important; } /* Select2 (pays / état) */ .woocommerce-account #ajax-content-wrap .woocommerce .select2-container .select2-selection--single{ height:46px !important; display:flex !important; align-items:center !important; } .woocommerce-account #ajax-content-wrap .woocommerce .select2-selection__rendered{ line-height:normal !important; padding:0 !important; color:var(--flo-olive) !important; } .woocommerce-account #ajax-content-wrap .woocommerce .select2-selection__arrow{ height:44px !important; right:10px !important; } .woocommerce-account #ajax-content-wrap .woocommerce .woocommerce-password-hint{ color:var(--flo-olive-light); font-size:13px; } /* « Changement de mot de passe » : bloc nettement séparé des infos du compte (carte au fond doux, détachée par une marge + un filet). */ .woocommerce-account #ajax-content-wrap .woocommerce form.edit-account fieldset, .woocommerce-account #ajax-content-wrap .woocommerce-EditAccountForm fieldset{ margin-top:36px !important; padding:26px 28px !important; background:var(--flo-soft) !important; border:1px solid var(--flo-border) !important; border-radius:16px !important; } .woocommerce-account #ajax-content-wrap .woocommerce form.edit-account fieldset legend, .woocommerce-account #ajax-content-wrap .woocommerce-EditAccountForm fieldset legend{ float:left; width:100%; margin:0 0 16px; padding:0 0 14px; border-bottom:1px solid var(--flo-border); color:var(--flo-olive) !important; font:600 17px/1.2 "Montserrat",sans-serif !important; } /* les champs mot de passe sur fond doux gardent un fond blanc bien lisible */ .woocommerce-account #ajax-content-wrap .woocommerce form.edit-account fieldset .form-row{ clear:both; } /* --------------------------------------------------------------------------- 6. BOUTONS — « Bouton olive » du design system --------------------------------------------------------------------------- */ .woocommerce-account #ajax-content-wrap .woocommerce a.button, .woocommerce-account #ajax-content-wrap .woocommerce button.button, .woocommerce-account #ajax-content-wrap .woocommerce input.button, .woocommerce-account #ajax-content-wrap .woocommerce button[type=submit], .woocommerce-account #ajax-content-wrap .woocommerce .woocommerce-Button{ -webkit-appearance:none !important; appearance:none !important; display:inline-block !important; width:auto !important; margin:4px 0 0 !important; border:0 !important; border-radius:100px !important; background:#828d7d !important; color:#fff !important; box-shadow:none !important; padding:9px 20px !important; font:600 12px/1 "Montserrat",sans-serif !important; text-transform:uppercase !important; letter-spacing:.4px !important; cursor:pointer !important; transition:background .2s ease, box-shadow .2s ease, transform .1s ease !important; } .woocommerce-account #ajax-content-wrap .woocommerce a.button:hover, .woocommerce-account #ajax-content-wrap .woocommerce button.button:hover, .woocommerce-account #ajax-content-wrap .woocommerce input.button:hover, .woocommerce-account #ajax-content-wrap .woocommerce button[type=submit]:hover, .woocommerce-account #ajax-content-wrap .woocommerce .woocommerce-Button:hover{ background:#6f7a6a !important; box-shadow:0 6px 16px rgba(130,141,125,.30) !important; } .woocommerce-account #ajax-content-wrap .woocommerce a.button:active, .woocommerce-account #ajax-content-wrap .woocommerce button[type=submit]:active{ transform:translateY(1px); } /* Bouton « Voir » d'une commande : variante contour (secondaire) */ .woocommerce-account #ajax-content-wrap .woocommerce-orders-table a.button.view, .woocommerce-account #ajax-content-wrap .woocommerce-orders-table a.button.order-again{ background:#fff !important; color:var(--flo-olive) !important; border:1px solid var(--flo-border) !important; padding:10px 20px !important; } .woocommerce-account #ajax-content-wrap .woocommerce-orders-table a.button.view:hover{ background:var(--flo-soft) !important; box-shadow:none !important; } /* --------------------------------------------------------------------------- 7. MESSAGES / NOTICES --------------------------------------------------------------------------- */ .woocommerce-account #ajax-content-wrap .woocommerce-message, .woocommerce-account #ajax-content-wrap .woocommerce-info, .woocommerce-account #ajax-content-wrap .woocommerce-notice{ border-radius:12px !important; border:1px solid var(--flo-border) !important; border-top:3px solid var(--flo-olive) !important; background:var(--flo-soft) !important; color:var(--flo-olive-dark) !important; font-family:"Montserrat",sans-serif; box-shadow:var(--flo-shadow-sm); } .woocommerce-account #ajax-content-wrap .woocommerce-message::before, .woocommerce-account #ajax-content-wrap .woocommerce-info::before{ color:var(--flo-olive) !important; } .woocommerce-account #ajax-content-wrap .woocommerce-error{ border-radius:12px !important; border:1px solid #e6b8b3 !important; border-top:3px solid #b3261e !important; background:#fcf0ef !important; color:#8a231c !important; } .woocommerce-account #ajax-content-wrap .woocommerce-message a.button, .woocommerce-account #ajax-content-wrap .woocommerce-info a.button{ padding:9px 20px !important; } /* --------------------------------------------------------------------------- 8. PAGE « Voir la commande » (view-order) — détails client Les blocs « Adresse de facturation » et « Adresse de livraison » passent chacun sur 100% de large (empilés), au lieu des 2 colonnes WooCommerce. --------------------------------------------------------------------------- */ .woocommerce-account #ajax-content-wrap .woocommerce-customer-details .col2-set, .woocommerce-account #ajax-content-wrap .woocommerce-customer-details .woocommerce-columns--addresses{ display:block !important; width:100% !important; } .woocommerce-account #ajax-content-wrap .woocommerce-customer-details .col2-set .col-1, .woocommerce-account #ajax-content-wrap .woocommerce-customer-details .col2-set .col-2, .woocommerce-account #ajax-content-wrap .woocommerce-customer-details .woocommerce-column{ width:100% !important; max-width:100% !important; float:none !important; margin:0 0 26px !important; padding:0 !important; box-sizing:border-box !important; } .woocommerce-account #ajax-content-wrap .woocommerce-customer-details .woocommerce-column:last-child{ margin-bottom:0 !important; }