/* ========================================================== Espace membre (Mon compte) — reskin 2026-09-02 Même patron structurel que le reskin cocktailmedia.ca/mon-compte (cartes sans bordure sur fond contrastant, badges de statut pilule colorés, KPI en haut) -- couleurs 100% LMP (--lmp-*, voir theme.css), aucun nouveau token de couleur requis (progression à 4 étapes déjà couverte par jaune/lavande-light/lavande-aa/vert-light déjà en place). Scopé à .woocommerce-account (classe posée par WordPress sur le de toutes les pages Mon compte) -- jamais de bleed vers panier/checkout/ boutique qui partagent certaines classes WooCommerce de base. ========================================================== */ .woocommerce-account .woocommerce { max-width: 900px; margin: 0 auto; padding: clamp(32px, 5vw, 56px) 20px clamp(56px, 6vw, 80px); } /* Reliquat de l'ancien layout WooCommerce à 2 colonnes (nav sidebar 30% + contenu 68% flottant à droite) : notre navigation.php a remplacé .woocommerce-MyAccount-navigation par .lmp-mc-nav (pleine largeur, plus de float), mais .woocommerce-MyAccount-content (posé par myaccount/my-account.php, jamais surchargé) gardait son float:right -- sans la colonne de gauche pour le contrebalancer, tout le contenu (dashboard/formulaires/adresses/ commandes) atterrissait décalé à droite de sa carte, sous le titre et les onglets fraîchement centrés (2026-09-07). Cause racine, pas un correctif page par page. ========================================================== */ .woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; } /* --- Navigation (pilules) --- */ .lmp-mc-nav { margin-bottom: clamp(24px, 3vw, 36px); } .lmp-mc-nav__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin: 0; padding: 0; } .lmp-mc-nav__item { margin: 0; } .lmp-mc-nav__link { display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 999px; background: var(--lmp-blanc-casse); color: var(--lmp-brun); font-family: var(--font-body); font-weight: 700; font-size: 13.5px; text-decoration: none; transition: background 0.15s ease, color 0.15s ease; } .lmp-mc-nav__link:hover { background: var(--lmp-lavande-light); } .lmp-mc-nav__item.is-active .lmp-mc-nav__link { background: var(--lmp-lavande-aa); color: var(--lmp-blanc); } /* --- En-tête / salutation --- */ .lmp-mc-hero { margin-bottom: clamp(20px, 2.5vw, 28px); } .lmp-mc-kicker { font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lmp-lavande-aa); margin: 0 0 8px; } .lmp-mc-title { font-family: var(--font-heading); font-size: clamp(28px, 4.5vw, 42px); color: var(--lmp-brun); margin: 0; } .lmp-mc-section-title { font-family: var(--font-heading); font-size: 22px; color: var(--lmp-brun); margin: clamp(28px, 3vw, 40px) 0 16px; } /* --- Cartes KPI --- */ .lmp-mc-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: clamp(20px, 2.5vw, 28px) 0; } @media (max-width: 640px) { .lmp-mc-kpis { grid-template-columns: 1fr; } } .lmp-mc-card { background: var(--lmp-blanc-casse); border-radius: 18px; padding: 20px 22px; } .lmp-mc-card__label { font-family: var(--font-body); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lmp-text-light); margin: 0 0 10px; } .lmp-mc-card__value { font-family: var(--font-heading); font-size: 30px; color: var(--lmp-brun); margin: 0; line-height: 1; } .lmp-mc-card__value--small { font-size: 18px; } /* --- Code de bienvenue 10% (à l'inscription, 2026-09-10) --- */ .lmp-mc-bienvenue { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--lmp-vert-light); border-radius: 18px; padding: 18px 22px; margin: clamp(20px, 2.5vw, 28px) 0; font-family: var(--font-body); font-size: 14px; color: var(--lmp-brun); } .lmp-mc-bienvenue__emoji { font-size: 22px; line-height: 1; } .lmp-mc-bienvenue__code { display: inline-block; font-weight: 700; font-size: 15px; color: var(--lmp-brun); background: var(--lmp-blanc); padding: 4px 12px; border-radius: 8px; letter-spacing: 0.03em; margin-left: 4px; } /* --- Carte fidélité (6 commandes = 15% + cadeau, Phase 5 2026-09-09) --- */ .lmp-mc-fidelite { background: var(--lmp-lavande-light); border-radius: 18px; padding: 20px 22px; margin: clamp(20px, 2.5vw, 28px) 0; } .lmp-mc-fidelite__titre { font-family: var(--font-heading); font-size: 18px; color: var(--lmp-brun); margin: 0 0 6px; } .lmp-mc-fidelite__texte { font-family: var(--font-body); font-size: 13.5px; color: var(--lmp-text-light); margin: 0 0 14px; } .lmp-mc-fidelite__barre { background: var(--lmp-blanc); border-radius: 999px; height: 12px; overflow: hidden; } .lmp-mc-fidelite__barre-remplie { background: var(--lmp-lavande-aa); height: 100%; border-radius: 999px; transition: width 0.3s ease; } .lmp-mc-fidelite__recompense { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--lmp-vert-light); border-radius: 14px; padding: 14px 18px; margin-top: 14px; } .lmp-mc-fidelite__recompense-code { font-family: var(--font-body); font-weight: 700; font-size: 15px; color: var(--lmp-brun); background: var(--lmp-blanc); padding: 4px 12px; border-radius: 8px; letter-spacing: 0.03em; } /* --- Cartes commande --- */ .lmp-mc-orders { display: flex; flex-direction: column; gap: 12px; } .lmp-mc-order-card { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--lmp-blanc-casse); border-radius: 16px; padding: 16px 20px; text-decoration: none; color: inherit; transition: background 0.15s ease; } a.lmp-mc-order-card:hover { background: var(--lmp-lavande-light); } .lmp-mc-order-card__main { flex: 1 1 180px; min-width: 0; } .lmp-mc-order-card__number { font-family: var(--font-body); font-weight: 700; font-size: 14.5px; color: var(--lmp-brun); margin: 0; } .lmp-mc-order-card__date { font-family: var(--font-body); font-size: 12.5px; color: var(--lmp-text-light); margin: 3px 0 0; } .lmp-mc-order-card__total { font-family: var(--font-body); font-weight: 700; font-size: 14px; color: var(--lmp-brun); white-space: nowrap; } .lmp-mc-order-card__actions { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; margin-top: 4px; } .lmp-mc-order-card--row { align-items: flex-start; } /* --- Badges de statut (pipeline attente/approuvée/préparation/livraison/livrée) --- */ .lmp-mc-badge { flex-shrink: 0; display: inline-flex; align-items: center; font-family: var(--font-body); font-weight: 700; font-size: 11.5px; letter-spacing: 0.03em; padding: 6px 14px; border-radius: 999px; white-space: nowrap; color: var(--lmp-brun); } .lmp-mc-badge--attente_approbation { background: var(--lmp-jaune); } .lmp-mc-badge--approuvee { background: var(--lmp-beige); } .lmp-mc-badge--preparation { background: var(--lmp-lavande-light); } .lmp-mc-badge--livraison { background: var(--lmp-lavande-aa); color: var(--lmp-blanc); } .lmp-mc-badge--livree { background: var(--lmp-vert-light); } /* --- Pilules (boutons/liens) --- */ .lmp-mc-pill { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 999px; font-family: var(--font-body); font-weight: 700; font-size: 13px; text-decoration: none; border: none; cursor: pointer; } .lmp-mc-pill--ghost { background: var(--lmp-creme-dark); color: var(--lmp-brun); } .lmp-mc-pill--ghost:hover { background: var(--lmp-lavande-light); } .lmp-mc-pill--solid { background: var(--lmp-lavande-aa); color: var(--lmp-blanc); } .lmp-mc-pill--solid:hover { background: var(--lmp-lavande); } /* --- Détail de commande / suivi --- */ .lmp-mc-order-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; } .lmp-mc-order-header__number { font-family: var(--font-body); font-weight: 700; font-size: 16px; color: var(--lmp-brun); margin: 0; } .lmp-mc-order-status-fallback { font-family: var(--font-body); font-size: 14px; color: var(--lmp-text-light); } .lmp-mc-stepper { display: flex; list-style: none; margin: 0 0 32px; padding: 0; gap: 4px; } .lmp-mc-stepper__step { flex: 1; text-align: center; position: relative; } .lmp-mc-stepper__dot { display: block; width: 100%; height: 8px; border-radius: 999px; background: var(--lmp-creme-dark); margin-bottom: 10px; } .lmp-mc-stepper__step.is-done .lmp-mc-stepper__dot, .lmp-mc-stepper__step.is-active .lmp-mc-stepper__dot { background: var(--lmp-lavande-aa); } .lmp-mc-stepper__label { font-family: var(--font-body); font-weight: 700; font-size: 11.5px; color: var(--lmp-text-light); } .lmp-mc-stepper__step.is-active .lmp-mc-stepper__label { color: var(--lmp-brun); } .lmp-mc-stepper__date { font-family: var(--font-body); font-size: 13px; color: var(--lmp-text-light); margin: -16px 0 24px; } .lmp-mc-empty { font-family: var(--font-body); color: var(--lmp-text-light); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } /* --- Rendu par défaut WooCommerce (tableau d'articles, item_data de personnalisation) -- jamais réécrit en PHP, seulement re-stylé pour s'accorder au reste de la page. --- */ .woocommerce-account .woocommerce-table--order-details, .woocommerce-account table.order_details { width: 100%; border-collapse: collapse; background: var(--lmp-blanc-casse); border-radius: 16px; overflow: hidden; font-family: var(--font-body); } .woocommerce-account .woocommerce-table--order-details th, .woocommerce-account .woocommerce-table--order-details td { padding: 14px 18px; border-bottom: 1px solid var(--lmp-creme-dark); } .woocommerce-account .woocommerce-table--order-details tfoot th, .woocommerce-account .woocommerce-table--order-details tfoot td { font-weight: 700; color: var(--lmp-brun); } .woocommerce-account .woocommerce-order-details__title, .woocommerce-account .woocommerce-column__title { font-family: var(--font-heading); color: var(--lmp-brun); } .woocommerce-account .woocommerce-OrderUpdates { list-style: none; margin: 0 0 24px; padding: 0; } .woocommerce-account .woocommerce-OrderUpdate { background: var(--lmp-blanc-casse); border-radius: 12px; padding: 14px 18px; margin-bottom: 8px; font-family: var(--font-body); font-size: 13.5px; color: var(--lmp-text-light); } /* --- Adresses de facturation/livraison DE LA COMMANDE (détail d'une commande, order/order-details-customer.php) -- rendu par défaut WooCommerce, jamais réécrit en PHP, seulement re-stylé. Gabarit DIFFÉRENT de my-address.php (l'onglet "Détails du compte" plus haut) : classes propres (woocommerce-customer-details/.woocommerce-column), donc CSS séparé -- mais même langage visuel (cartes sans bordure) et même piège de clearfix ::before/::after sur .col2-set une fois passé en grid (voir plus haut). --- */ .woocommerce-account .woocommerce-customer-details { margin: 28px 0 0; } /* Une seule adresse (pas de livraison requise) : pas de wrapper .col2-set du tout dans ce cas -- le

et l'
sont des enfants DIRECTS de .woocommerce-customer-details, qui devient alors la carte elle-même. / .woocommerce-account .woocommerce-customer-details:has( > address ) { max-width: 460px; background: var(--lmp-blanc-casse); border-radius: 18px; padding: 20px 22px; } .woocommerce-account .woocommerce-columns--addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 900px; } @media ( max-width: 640px ) { .woocommerce-account .woocommerce-columns--addresses { grid-template-columns: 1fr; } } .woocommerce-account .woocommerce-columns--addresses::before, .woocommerce-account .woocommerce-columns--addresses::after { display: none; content: none; } .woocommerce-account .woocommerce-customer-details .woocommerce-column { float: none !important; width: auto !important; background: var(--lmp-blanc-casse); border-radius: 18px; padding: 20px 22px; } .woocommerce-account .woocommerce-customer-details .woocommerce-column__title { font-family: var(--font-heading); font-size: 18px; color: var(--lmp-brun); margin: 0 0 12px; } .woocommerce-account .woocommerce-customer-details address { font-family: var(--font-body); font-style: normal; font-size: 13.5px; line-height: 1.7; color: var(--lmp-text-light); } .woocommerce-account .woocommerce-customer-details .woocommerce-customer-details--phone, .woocommerce-account .woocommerce-customer-details .woocommerce-customer-details--email { margin: 4px 0 0; } / ========================================================== Connexion / inscription / mot de passe (reskin 2026-09-07) Templates concernés : myaccount/form-login.php, form-lost-password.php, form-reset-password.php -- même langage visuel que .contact-form (voir plus haut dans theme.css) : carte blanche à bordure fine, inputs à bordure lavande, bouton pilule lavande. Scopé à .woocommerce-account, jamais de bleed vers le panier/checkout. ========================================================== / .lmp-mc-auth { max-width: 460px; margin: 0 auto; } .lmp-mc-auth--split { max-width: 900px; } .lmp-mc-auth--split #customer_login { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } / WooCommerce pose lui-même float:left/right + width:47% sur .u-column1/ .u-column2 (woocommerce-layout.css, système de colonnes flottantes d'origine) -- une fois le conteneur passé en grid ci-dessus, ce float n'a plus d'effet réel sur la position (les grid items ignorent float pour leur placement) mais le width:47% reste appliqué tel quel : chaque carte ne remplissait alors que ~47% de sa cellule de grille au lieu de la remplir en entier, ce qui donnait l'impression de cartes décalées/mal alignées (repéré en testant en direct, jamais vu avant puisque l'inscription était désactivée jusqu'ici -- ce chemin n'avait jamais été exercé). / .lmp-mc-auth--split #customer_login .u-column1, .lmp-mc-auth--split #customer_login .u-column2 { / !important : woocommerce-layout.css (float:left/right;width:48%) ET woocommerce-smallscreen.css (float:none;width:100%, actif seulement sous ~768px via l'attribut media du , mais measuré quand même plus étroit que prévu en testant -- l'un des deux gagnait encore par spécificité/ordre de chargement malgré width:auto ci-dessus). Seule combinaison qui a fiablement donné deux colonnes pleine largeur en testant en direct. / float: none !important; width: 100% !important; max-width: none !important; } / Même piège que .woocommerce-Addresses::before/::after plus bas dans ce fichier (clearfix ::before/::after de woocommerce-layout.css sur .col2-set, qui devient lui-même 2 items de grille une fois en display:grid) -- #customer_login porte aussi la classe .col2-set (voir form-login.php). Sans ce correctif : carte "Se connecter" poussée en colonne 2/ligne 1, carte "S'inscrire" poussée en colonne 1/ligne 2 -- constaté en testant en direct. / .lmp-mc-auth--split #customer_login::before, .lmp-mc-auth--split #customer_login::after { display: none; content: none; } @media (max-width: 720px) { .lmp-mc-auth--split #customer_login { grid-template-columns: 1fr; } } .lmp-mc-auth-card { background: var(--lmp-blanc); border: 1px solid var(--lmp-creme-dark); border-radius: 28px; padding: clamp(28px, 4vw, 40px); / min-width:0 -- sans ça, un item de grille garde min-width:auto par défaut (taille minimale intrinsèque de son contenu), ce qui l'empêche de rétrécir à la largeur réelle de sa colonne (438px) et le fait déborder sur la carte voisine -- piège classique CSS Grid, découvert en testant en direct (Playwright) après l'ajout des avantages/de l'assistant 2 étapes le 2026-09-09 : les deux cartes se chevauchaient d'environ 58px avant ce correctif. / min-width: 0; box-sizing: border-box; } / WooCommerce donne lui-même une bordure/padding/coin arrondi à form.login et form.register (woocommerce.css, pensé pour un formulaire affiché SEUL, sans carte autour) -- en plus de .lmp-mc-auth-card ci-dessus, ça créait un second encadré emboîté dans le premier, avec le bouton "Se connecter"/ "Continuer" retombant pile sur le bord intérieur -- repéré en testant en direct (Playwright) le 2026-09-09. Neutralisé : .lmp-mc-auth-card reste le SEUL encadré visible. / .lmp-mc-auth-card form.woocommerce-form-login, .lmp-mc-auth-card form.woocommerce-form-register { border: none; padding: 0; margin: 0; border-radius: 0; } .lmp-mc-auth-cardtitle { font-family: var(--font-heading); font-size: 22px; color: var(--lmp-brun); margin: 0 0 20px; } .lmp-mc-auth-card > p:first-child:not(.form-row) { font-family: var(--font-body); font-size: 13.5px; line-height: 1.5; color: var(--lmp-text-light); margin: -6px 0 20px; } .lmp-mc-auth-card .form-row { margin: 0 0 18px; } .lmp-mc-auth-card label { display: block; font-family: var(--font-body); font-weight: 700; font-size: 13px; color: var(--lmp-brun); margin-bottom: 6px; } .lmp-mc-auth-card label .required { color: var(--lmp-lavande-aa); text-decoration: none; } .lmp-mc-auth-card input.input-text { display: block; width: 100%; padding: 13px 16px; font-family: var(--font-body); font-size: 15px; color: var(--lmp-brun); background: var(--lmp-creme); border: 1px solid var(--lmp-lavande-bordure); border-radius: 12px; box-sizing: border-box; transition: border-color 0.15s ease, background 0.15s ease; } .lmp-mc-auth-card input.input-text:focus { outline: none; border-color: var(--lmp-lavande-aa); background: var(--lmp-blanc); } .lmp-mc-auth-card .lmp-mc-auth-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; } .lmp-mc-auth-card .woocommerce-form-loginrememberme { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 500; font-size: 13.5px; color: var(--lmp-text-light); margin: 0; cursor: pointer; } .lmp-mc-auth-card input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--lmp-lavande-aa); margin: 0; } .lmp-mc-auth-card button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 14px 18px; margin-top: 4px; background: var(--lmp-lavande-aa); color: var(--lmp-blanc); border: none; border-radius: 999px; font-family: var(--font-body); font-weight: 700; font-size: 15px; cursor: pointer; transition: background 0.15s ease; } .lmp-mc-auth-card button[type="submit"]:hover { background: var(--lmp-lavande); } .lmp-mc-auth-card .woocommerce-LostPassword { margin: 18px 0 0; text-align: center; } .lmp-mc-auth-card .woocommerce-LostPassword a { font-family: var(--font-body); font-size: 13.5px; font-weight: 700; color: var(--lmp-lavande-aa); text-decoration: none; } .lmp-mc-auth-card .woocommerce-LostPassword a:hover { text-decoration: underline; } / ========================================================== Connexion/inscription -- ajouts 2026-09-09 (import mockup Claude Design "Mon compte" : bascule mot de passe, avantages du compte, assistant d'inscription 2 étapes). Palette LMP conservée, structure du mockup. ========================================================== / .lmp-mc-auth-actions { justify-content: space-between; } .lmp-mc-auth-actionsforgot { font-family: var(--font-body); font-size: 13.5px; font-weight: 700; color: var(--lmp-lavande-aa); text-decoration: none; } .lmp-mc-auth-actionsforgot:hover { text-decoration: underline; } .lmp-mc-password-wrap { position: relative; display: block; } .lmp-mc-password-wrap input { padding-right: 46px !important; } / Inscription : le jauge de solidité WooCommerce (.woocommerce-password-strength, inséré par JS APRÈS le champ, au 'change' -- donc au moment où le champ perd le focus) doit être hors flux. En flux, il faisait descendre le bouton "Continuer" de ~26 px entre le mousedown et le mouseup du premier clic (le clic qui fait perdre le focus au champ mot de passe) : le clic ne s'enregistrait jamais sur le bouton, "Continuer" semblait mort après un mot de passe collé/rempli automatiquement (aucun keyup avant le blur). Reproduit avec Playwright le 2026-09-18. L'espace est donc réservé en permanence, et le conseil long de WooCommerce (.woocommerce-password-hint) est remplacé par le texte statique .lmp-mc-field-hint de form-login.php. / #lmp-register .lmp-mc-password-wrap { margin-bottom: 46px; } #lmp-register .lmp-mc-password-wrap .woocommerce-password-strength { position: absolute; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 3px 10px; border-radius: 6px; font-size: 12px; line-height: 1.3; text-align: left; } #lmp-register .lmp-mc-password-wrap .woocommerce-password-hint { display: none; } .lmp-mc-password-toggle { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; padding: 4px; cursor: pointer; color: var(--lmp-text-light); } .lmp-mc-password-toggle:hover { color: var(--lmp-lavande-aa); } .lmp-mc-password-toggleeye-off { display: none; } .lmp-mc-password-toggle.is-visible .lmp-mc-password-toggleeye { display: none; } .lmp-mc-password-toggle.is-visible .lmp-mc-password-toggleeye-off { display: block; } .lmp-mc-perks { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--lmp-creme-dark); display: flex; flex-direction: column; gap: 14px; } .lmp-mc-perk { display: flex; align-items: flex-start; gap: 12px; } .lmp-mc-perkicon { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; background: var(--lmp-lavande-light); color: var(--lmp-lavande-aa); } .lmp-mc-perk strong { display: block; font-family: var(--font-body); font-size: 13.5px; font-weight: 700; color: var(--lmp-brun); } .lmp-mc-perk span span { display: block; font-family: var(--font-body); font-size: 12.5px; line-height: 1.5; color: var(--lmp-text-light); margin-top: 2px; } .lmp-mc-auth-cardheader { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .lmp-mc-auth-cardheader .lmp-mc-auth-cardtitle { margin-bottom: 0; } .lmp-mc-wizard-step-label { font-family: var(--font-body); font-size: 12.5px; font-weight: 700; color: var(--lmp-text-light); white-space: nowrap; margin-top: 4px; } .lmp-mc-wizard-progress { margin: 14px 0 22px; height: 4px; border-radius: 999px; background: var(--lmp-creme-dark); overflow: hidden; } .lmp-mc-wizard-progressbar { display: block; height: 100%; width: 50%; background: var(--lmp-lavande-aa); border-radius: 999px; transition: width 0.25s ease; } .lmp-mc-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 480px) { .lmp-mc-field-row { grid-template-columns: 1fr; } } .lmp-mc-field-hint { display: block; font-family: var(--font-body); font-size: 12px; color: var(--lmp-text-light); margin-top: 6px; } .lmp-mc-privacy-note { font-family: var(--font-body); font-size: 12.5px; line-height: 1.6; color: var(--lmp-text-light); margin: 0 0 18px; } .lmp-mc-wizard-actions { display: flex; gap: 12px; flex-wrap: wrap; } / button[...] (sélecteur de type explicit, pas juste la classe) -- sans le tag "button", la spécificité (0,2,0) perd contre la règle grise par défaut de WooCommerce (.woocommerce button.button, spécificité 0,2,1) : c'est exactement pourquoi "Continuer"/"Retour" restaient gris alors que "Se connecter" (déjà stylé avec button[type="submit"], voir plus haut dans ce fichier) était déjà correctement violet -- repéré en testant en direct (Playwright) le 2026-09-09. / .lmp-mc-wizard-actions button.lmp-mc-wizard-next, .lmp-mc-wizard-actions button[type="submit"] { flex: 1; min-width: 160px; display: inline-flex; align-items: center; justify-content: center; padding: 14px 18px; background: var(--lmp-lavande-aa); color: var(--lmp-blanc); border: none; border-radius: 999px; font-family: var(--font-body); font-weight: 700; font-size: 15px; cursor: pointer; transition: background 0.15s ease; } .lmp-mc-wizard-actions button.lmp-mc-wizard-next:hover, .lmp-mc-wizard-actions button[type="submit"]:hover { background: var(--lmp-lavande); } .lmp-mc-wizard-actions button.lmp-mc-wizard-back { flex: 0 0 auto; background: var(--lmp-creme-dark); color: var(--lmp-brun); border: none; border-radius: 999px; padding: 14px 22px; font-family: var(--font-body); font-weight: 700; font-size: 15px; cursor: pointer; } .lmp-mc-wizard-actions button.lmp-mc-wizard-back:hover { background: var(--lmp-lavande-light); } .lmp-mc-auth-card select.input-select { display: block; width: 100%; padding: 13px 16px; font-family: var(--font-body); font-size: 15px; color: var(--lmp-brun); background: var(--lmp-creme); border: 1px solid var(--lmp-lavande-bordure); border-radius: 12px; box-sizing: border-box; } / ========================================================== Notices WooCommerce (erreur/succès/info) -- réutilisées sur login, edit-account (sauvegarde), lost/reset password. Rendu par défaut WooCommerce (notices/error.php, success.php, notice.php), jamais réécrit en PHP -- même palette pastel que les badges de statut (.lmp-mc-badge). ========================================================== / .woocommerce-account .woocommerce-error, .woocommerce-account .woocommerce-message, .woocommerce-account .woocommerce-info { list-style: none; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; max-width: 460px; margin: 0 auto 24px; padding: 14px 20px; border-radius: 16px; border: none; outline: none; font-family: var(--font-body); font-size: 13.5px; line-height: 1.5; color: var(--lmp-brun); } .woocommerce-account .woocommerce-error { background: var(--lmp-rose); } .woocommerce-account .woocommerce-message { background: var(--lmp-vert-light); } .woocommerce-account .woocommerce-info { background: var(--lmp-lavande-light); } .woocommerce-account .woocommerce-error li { flex: 1 1 auto; } .woocommerce-account .woocommerce-error::before, .woocommerce-account .woocommerce-message::before, .woocommerce-account .woocommerce-info::before { display: none; } .woocommerce-account .woocommerce-error a, .woocommerce-account .woocommerce-message a, .woocommerce-account .woocommerce-info a { color: var(--lmp-lavande-aa); font-weight: 700; text-decoration: none; } .woocommerce-account .woocommerce-error a:hover, .woocommerce-account .woocommerce-message a:hover, .woocommerce-account .woocommerce-info a:hover { text-decoration: underline; } .woocommerce-account .woocommerce-message a.button, .woocommerce-account .woocommerce-info a.button { flex-shrink: 0; padding: 8px 16px; border-radius: 999px; background: var(--lmp-lavande-aa); color: var(--lmp-blanc); } .woocommerce-account .woocommerce-message a.button:hover, .woocommerce-account .woocommerce-info a.button:hover { background: var(--lmp-lavande); text-decoration: none; } / --- Formulaire "Détails du compte" (edit-account) -- rendu par défaut WooCommerce, jamais réécrit en PHP, seulement re-stylé (même langage que .lmp-mc-auth-card ci-dessus). --- / .woocommerce-account form.edit-account { max-width: 460px; margin: 0 auto; background: var(--lmp-blanc-casse); border-radius: 20px; padding: 28px 26px; box-sizing: border-box; } .woocommerce-account form.edit-account .form-row { margin: 0 0 18px; } .woocommerce-account form.edit-account label { display: block; font-family: var(--font-body); font-weight: 700; font-size: 13px; color: var(--lmp-brun); margin-bottom: 6px; } .woocommerce-account form.edit-account label .required { color: var(--lmp-lavande-aa); text-decoration: none; } .woocommerce-account form.edit-account span#account_display_name_description { display: block; margin-top: 6px; font-size: 12px; color: var(--lmp-text-light); } .woocommerce-account form.edit-account input.input-text { display: block; width: 100%; padding: 13px 16px; font-family: var(--font-body); font-size: 15px; color: var(--lmp-brun); background: var(--lmp-creme); border: 1px solid var(--lmp-lavande-bordure); border-radius: 12px; box-sizing: border-box; transition: border-color 0.15s ease, background 0.15s ease; } .woocommerce-account form.edit-account input.input-text:focus { outline: none; border-color: var(--lmp-lavande-aa); background: var(--lmp-blanc); } .woocommerce-account form.edit-account fieldset { / Plus de carte imbriquée dans la carte du formulaire (voir .edit-account ci-dessus) -- juste un regroupement avec un peu d'air au-dessus. / border: none; margin: 26px 0 0; padding: 0; } .woocommerce-account form.edit-account fieldset legend { / width:100% -- un a une largeur intrinsèque (min-content) par défaut, ce qui peut désaligner ce qui suit; ici on veut un simple sous-titre pleine largeur, pas le comportement "à cheval sur la bordure" d'un legend classique (déjà neutralisé vu qu'il n'y a plus de bordure). / display: block; width: 100%; font-family: var(--font-heading); font-size: 17px; color: var(--lmp-brun); padding: 0; margin: 0 0 16px; } .woocommerce-account form.edit-account button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 14px 18px; background: var(--lmp-lavande-aa); color: var(--lmp-blanc); border: none; border-radius: 999px; font-family: var(--font-body); font-weight: 700; font-size: 15px; cursor: pointer; transition: background 0.15s ease; } .woocommerce-account form.edit-account button[type="submit"]:hover { background: var(--lmp-lavande); } / --- Adresses de facturation/livraison (edit-address) -- pré-remplissent le checkout au rachat, voir lmp_account_menu_items() dans functions.php (onglet remis le 2026-09-07). Templates my-address.php (liste en cartes) et form-edit-address.php (formulaire par champ) -- rendu par défaut WooCommerce, jamais réécrit en PHP, seulement re-stylé (même langage que .lmp-mc-auth-card et .edit-account ci-dessus). --- / .woocommerce-account .woocommerce-MyAccount-content > p:first-child, .woocommerce-account p:has(+ .woocommerce-Addresses) { font-family: var(--font-body); font-size: 13.5px; color: var(--lmp-text-light); margin: 0 0 20px; } .woocommerce-account .woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 8px 0 0; max-width: 900px; } / Neutralise le clearfix ::before/::after que WooCommerce applique à .col2-set (woocommerce-layout.css) -- en display:grid, ces pseudo-éléments deviennent eux-mêmes des items de grille et décalaient les deux cartes (facturation en ligne 1/col 2, livraison en ligne 2/col 1). / .woocommerce-account .woocommerce-Addresses::before, .woocommerce-account .woocommerce-Addresses::after { display: none; content: none; } @media (max-width: 640px) { .woocommerce-account .woocommerce-Addresses { grid-template-columns: 1fr; } } .woocommerce-account .woocommerce-Addresses .woocommerce-Address { float: none !important; width: auto !important; background: var(--lmp-blanc-casse); border-radius: 18px; padding: 20px 22px; } .woocommerce-account .woocommerce-Address-title { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0 0 12px; } .woocommerce-account .woocommerce-Address-title h2 { font-family: var(--font-heading); font-size: 18px; color: var(--lmp-brun); margin: 0; } .woocommerce-account .woocommerce-Address-title .edit { flex-shrink: 0; display: inline-flex; align-items: center; padding: 7px 16px; border-radius: 999px; background: var(--lmp-lavande-aa); color: var(--lmp-blanc); font-family: var(--font-body); font-weight: 700; font-size: 12.5px; text-decoration: none; } .woocommerce-account .woocommerce-Address-title .edit:hover { background: var(--lmp-lavande); } .woocommerce-account .woocommerce-Address address { font-family: var(--font-body); font-style: normal; font-size: 13.5px; line-height: 1.7; color: var(--lmp-text-light); } .woocommerce-account .woocommerce-address-fields { max-width: 460px; margin: 0 auto; background: var(--lmp-blanc-casse); border-radius: 20px; padding: 28px 26px; box-sizing: border-box; } .woocommerce-account .woocommerce-address-fields h2 { font-family: var(--font-heading); font-size: 22px; color: var(--lmp-brun); margin: 0 0 20px; } .woocommerce-account .woocommerce-address-fieldsfield-wrapper { display: flex; flex-wrap: wrap; gap: 0 12px; } .woocommerce-account .woocommerce-address-fields .form-row { flex: 1 1 100%; min-width: 0; margin: 0 0 18px; } .woocommerce-account .woocommerce-address-fields .form-row-first, .woocommerce-account .woocommerce-address-fields .form-row-last { / grow:0 -- avec flex-wrap, un item seul sur sa ligne (ex. arrondi de calc() qui fait passer le suivant à la ligne) ne doit pas s'étirer sur 100% : mieux vaut une petite marge à droite qu'une bascule brutale en pleine largeur. Marge large (20px) dans le calc() pour garder du jeu par rapport au gap du wrapper (12px) et éviter tout dépassement d'arrondi. / flex: 0 1 calc(50% - 20px); } @media (max-width: 480px) { .woocommerce-account .woocommerce-address-fields .form-row-first, .woocommerce-account .woocommerce-address-fields .form-row-last { flex: 1 1 100%; } } .woocommerce-account .woocommerce-address-fields label { display: block; font-family: var(--font-body); font-weight: 700; font-size: 13px; color: var(--lmp-brun); margin-bottom: 6px; } .woocommerce-account .woocommerce-address-fields label .required { color: var(--lmp-lavande-aa); text-decoration: none; } .woocommerce-account .woocommerce-address-fields input.input-text, .woocommerce-account .woocommerce-address-fields select { display: block; width: 100%; padding: 13px 16px; font-family: var(--font-body); font-size: 15px; color: var(--lmp-brun); background: var(--lmp-creme); border: 1px solid var(--lmp-lavande-bordure); border-radius: 12px; box-sizing: border-box; appearance: none; transition: border-color 0.15s ease, background 0.15s ease; } .woocommerce-account .woocommerce-address-fields input.input-text:focus, .woocommerce-account .woocommerce-address-fields select:focus { outline: none; border-color: var(--lmp-lavande-aa); background: var(--lmp-blanc); } .woocommerce-account .woocommerce-address-fields .select2-container { width: 100% !important; } .woocommerce-account .woocommerce-address-fields .select2-container--default .select2-selection--single { height: auto; padding: 13px 16px; background: var(--lmp-creme); border: 1px solid var(--lmp-lavande-bordure); border-radius: 12px; } .woocommerce-account .woocommerce-address-fields .select2-selectionrendered { padding: 0 !important; line-height: 1.4 !important; font-family: var(--font-body); color: var(--lmp-brun) !important; } .woocommerce-account .woocommerce-address-fields .select2-selection__arrow { height: 100% !important; right: 12px !important; } .woocommerce-account .woocommerce-address-fields button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 14px 18px; background: var(--lmp-lavande-aa); color: var(--lmp-blanc); border: none; border-radius: 999px; font-family: var(--font-body); font-weight: 700; font-size: 15px; cursor: pointer; transition: background 0.15s ease; } .woocommerce-account .woocommerce-address-fields button[type="submit"]:hover { background: var(--lmp-lavande); } / ========================================================== Modale d'aperçu d'un article personnalisé (mon-compte-apercu.js, 2026-09-07) -- le lien lui-même (.cmp-item-preview-link, posé par cmp_order_item_name_with_preview() dans le plugin configurateur) n'a pas besoin de style particulier, seule la modale ci-dessous est nouvelle. ========================================================== / body.lmp-mc-apercu-modal-open { overflow: hidden; } .lmp-mc-apercu-modal { / display:none par défaut (pas [hidden] -- une règle CSS auteur qui pose display:flex sur ce même sélecteur aurait la même spécificité que le [hidden] du navigateur et gagnerait à l'ordre d'arrivée, empêchant tout masquage : bug constaté en testant, pas une supposition. is-open, posée/retirée par mon-compte-apercu.js, est le seul état qui compte). */ display: none; position: fixed; inset: 0; z-index: 10000; align-items: center; justify-content: center; padding: 24px; background: rgba( 61, 43, 31, 0.55 ); box-sizing: border-box; } .lmp-mc-apercu-modal.is-open { display: flex; } .lmp-mc-apercu-modalbox { position: relative; width: 100%; max-width: 480px; max-height: min( 640px, 100% ); background: var(--lmp-blanc); border-radius: 20px; box-shadow: 0 20px 60px -10px rgba( 61, 43, 31, 0.5 ); overflow: hidden; display: flex; } .lmp-mc-apercu-modalclose { position: absolute; top: 10px; right: 10px; z-index: 1; width: 34px; height: 34px; border: none; border-radius: 999px; background: var(--lmp-blanc-casse); color: var(--lmp-brun); font-size: 20px; line-height: 1; cursor: pointer; } .lmp-mc-apercu-modalclose:hover { background: var(--lmp-lavande-light); } .lmp-mc-apercu-modalframe { flex: 1 1 auto; width: 100%; min-height: 420px; border: none; background: var(--lmp-blanc); } @media ( max-width: 480px ) { .lmp-mc-apercu-modal { padding: 0; } .lmp-mc-apercu-modal__box { max-width: none; max-height: none; height: 100%; border-radius: 0; } }