/** * TPT Boutique — « Mon Compte » (tableau de bord, commandes, téléchargements, * adresses, moyens de paiement, détails du compte, connexion/inscription). * * Chargée uniquement sur les pages "Mon Compte" (voir tpt-shop.php), par- * dessus tpt-shop.css dont elle réutilise les tokens (--tpt-*) et les règles * de base déjà partagées avec le panier/checkout (titres en Playfair Display * via .entry-title/h1-h3, champs .form-row, cases à cocher...). Ici : le * reste, propre aux classes standards WooCommerce de "Mon Compte" * (.woocommerce-MyAccount-*, #customer_login, .shop_table, .woocommerce- * Address...). Aucune surcharge de template : tout passe par ces classes, * déjà présentes dans le HTML par défaut de WooCommerce. */ .tpt-shop.woocommerce-account, .tpt-shop .woocommerce-MyAccount-navigation, .tpt-shop .woocommerce-MyAccount-content, .tpt-shop #customer_login { font-family: var(--tpt-sans); color: var(--tpt-text); } /* ------------------------------------------------------------------ * Connecté : navigation à gauche + contenu à droite * * WooCommerce flotte déjà ces deux blocs par défaut (nav 30% / contenu * 68%) : on garde ce mécanisme (déjà éprouvé, pas de souci de hauteur * ou de clearfix à gérer) et on ne change que largeurs/espacement/habillage. * --------------------------------------------------------------- */ .tpt-shop .woocommerce-MyAccount-navigation { float: left; width: 250px; box-sizing: border-box; background: var(--tpt-card); border: 1px solid var(--tpt-border); border-radius: var(--tpt-radius-lg); box-shadow: var(--tpt-shadow); padding: 10px; position: sticky; top: 24px; } .tpt-shop .woocommerce-MyAccount-content { float: right; width: calc(100% - 250px - 28px); box-sizing: border-box; background: var(--tpt-card); border: 1px solid var(--tpt-border); border-radius: var(--tpt-radius-lg); box-shadow: var(--tpt-shadow); padding: 30px; min-height: 220px; } .tpt-shop .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; } .tpt-shop .woocommerce-MyAccount-navigation-link { margin: 2px 0; } /* Séparateur avant « Se déconnecter », pour la détacher visuellement du * reste des liens (action différente, pas juste une section de plus). */ .tpt-shop .woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--tpt-border); } .tpt-shop .woocommerce-MyAccount-navigation-link a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; font-size: 13px; font-weight: 500; color: var(--tpt-sub); text-decoration: none; transition: background 0.15s ease, color 0.15s ease; } .tpt-shop .woocommerce-MyAccount-navigation-link a:hover { background: var(--tpt-bg-warm); color: var(--tpt-text); } .tpt-shop .woocommerce-MyAccount-navigation-link.is-active a { background: var(--tpt-green-50); color: var(--tpt-green-700); font-weight: 600; } /* Icône par lien : un simple masque CSS (pas de JS, pas de PHP) appliqué * via le modificateur de classe que WooCommerce ajoute déjà tout seul sur * chaque
  • (…-link--dashboard, --orders, etc.). Un onglet ajouté par une * extension tierce (ex. fidélité) sans modificateur connu garde simplement * la puce générique ci-dessous plutôt que de rester sans icône. */ .tpt-shop .woocommerce-MyAccount-navigation-link a::before { content: ''; width: 18px; height: 18px; flex: 0 0 auto; background-color: currentColor; opacity: 0.7; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); } .tpt-shop .woocommerce-MyAccount-navigation-link.is-active a::before { opacity: 1; } .tpt-shop .woocommerce-MyAccount-navigation-link--dashboard a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M5 10v9a1 1 0 0 0 1 1h4v-6h4v6h4a1 1 0 0 0 1-1v-9'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M5 10v9a1 1 0 0 0 1 1h4v-6h4v6h4a1 1 0 0 0 1-1v-9'/%3E%3C/svg%3E"); } .tpt-shop .woocommerce-MyAccount-navigation-link--orders a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5 12 3l9 4.5v9L12 21l-9-4.5z'/%3E%3Cpath d='M3 7.5 12 12l9-4.5'/%3E%3Cpath d='M12 12v9'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5 12 3l9 4.5v9L12 21l-9-4.5z'/%3E%3Cpath d='M3 7.5 12 12l9-4.5'/%3E%3Cpath d='M12 12v9'/%3E%3C/svg%3E"); } .tpt-shop .woocommerce-MyAccount-navigation-link--downloads a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E"); } .tpt-shop .woocommerce-MyAccount-navigation-link--edit-address a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.5 7-11.5a7 7 0 1 0-14 0C5 14.5 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.5 7-11.5a7 7 0 1 0-14 0C5 14.5 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.3'/%3E%3C/svg%3E"); } .tpt-shop .woocommerce-MyAccount-navigation-link--payment-methods a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='13' rx='2'/%3E%3Cpath d='M3 10.5h18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='13' rx='2'/%3E%3Cpath d='M3 10.5h18'/%3E%3C/svg%3E"); } .tpt-shop .woocommerce-MyAccount-navigation-link--edit-account a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20c0-3.9 3.1-7 7-7s7 3.1 7 7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20c0-3.9 3.1-7 7-7s7 3.1 7 7'/%3E%3C/svg%3E"); } .tpt-shop .woocommerce-MyAccount-navigation-link--customer-logout a::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h4'/%3E%3Cpath d='m16 17 5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h4'/%3E%3Cpath d='m16 17 5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E"); } /* ------------------------------------------------------------------ * Tableau de bord : message d'accueil * --------------------------------------------------------------- */ .tpt-shop .woocommerce-MyAccount-content > p { font-size: 14px; line-height: 1.75; color: var(--tpt-sub); margin: 0 0 12px; } .tpt-shop .woocommerce-MyAccount-content > p:last-child { margin-bottom: 0; } .tpt-shop .woocommerce-MyAccount-content > p a { color: var(--tpt-green-700); font-weight: 600; text-decoration: underline; text-decoration-color: var(--tpt-green-200); text-underline-offset: 2px; } /* ------------------------------------------------------------------ * Tableaux : commandes, téléchargements, moyens de paiement * --------------------------------------------------------------- */ .tpt-shop table.shop_table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--tpt-border); border-radius: var(--tpt-radius); overflow: hidden; margin: 0 0 4px; } .tpt-shop table.shop_table thead th { background: var(--tpt-bg-warm); border-bottom: 1px solid var(--tpt-border); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--tpt-muted); padding: 14px 16px; text-align: left; } .tpt-shop table.shop_table td { padding: 16px; border-top: 1px solid var(--tpt-border); font-size: 13.5px; color: var(--tpt-text); vertical-align: middle; } .tpt-shop table.shop_table tbody tr:first-child td { border-top: none; } .tpt-shop mark.order-status { background: var(--tpt-green-100); color: var(--tpt-green-700); border-radius: 100px; padding: 5px 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; display: inline-block; } /* Statuts « en attente » ou annulés/remboursés : neutre plutôt que vert * (le vert reste réservé aux statuts positifs, cf. .tpt-steps__item.is-done). */ .tpt-shop mark.status-pending, .tpt-shop mark.status-on-hold, .tpt-shop mark.status-cancelled, .tpt-shop mark.status-refunded, .tpt-shop mark.status-failed { background: var(--tpt-bg-warm); color: var(--tpt-sub); } /* ------------------------------------------------------------------ * Boutons : distinction par balise plutôt que par classe, WooCommerce * réutilisant la même classe .button pour les liens d'action de ligne * (, ex. « Voir », « Payer ») et les vrais boutons de validation de * formulaire (