/* Theme Name: Hello Child Template: hello-elementor Author: Hicham Zian Version: 1.21 Description: Thème enfant de Hello Elementor pour Le Bataclan asbl. */ /* ========================================================================== Où vit le style de ce site ========================================================================== Le style des pages est porté par l'éditeur Elementor : variables globales, classes globales (préfixe g-btc) et styles locaux des éléments. C'est là qu'on le modifie, dans l'éditeur, pas ici. Ce fichier ne contient que ce qu'Elementor ne sait pas exprimer : des états que l'éditeur n'expose pas, comme celui d'une barre collante une fois détachée. Chaque règle dit pourquoi elle est ici plutôt que dans l'éditeur. Après toute modification : incrémenter « Version » ci-dessus. Elle sert de clé de cache, sans elle les navigateurs gardent l'ancienne feuille. ========================================================================== */ /* -------------------------------------------------------------------------- En-tête : barre de navigation collante -------------------------------------------------------------------------- En haut de page, la barre est translucide pour laisser voir le fond du hero de chaque page (réglage de fond dans l'éditeur : rgba(36,57,91,0.45)). Une fois détachée au défilement, elle flotte au-dessus du contenu de la page : translucide, le texte des sections passerait au travers du menu et le rendrait illisible. Elementor ajoute alors la classe .elementor-sticky--effects, mais son éditeur n'offre aucun réglage pour cet état. D'où cette règle. Spécificité : Elementor pose le fond avec un sélecteur à 0,4,0 (.elementor-4874 .elementor-element.elementor-element-80d1382:not(...)). Celui-ci est à 0,5,0 pour l'emporter sans !important et sans viser l'identifiant de l'élément, qui change si le conteneur est recréé. La classe btc-entete-nav est posée sur le conteneur dans l'éditeur (Avancé > Classes CSS) : ne pas la retirer. -------------------------------------------------------------------------- */ .elementor-location-header .elementor-element.e-con.btc-entete-nav.elementor-sticky--effects { background-color: #24395B; box-shadow: 0 2px 18px rgba(13, 27, 42, 0.35); } /* -------------------------------------------------------------------------- En-tête : resserrer la barre entre 1025 et 1199 px -------------------------------------------------------------------------- Le rang de navigation porte cinq éléments : logo, menu, badge accessibilité, Green Deal, Faire un don — plus le panier WooCommerce depuis le 2026-10-29. Largeurs mesurées à 1440 px : 140 + 527 + 434, plus 32 px d'écarts, soit 1133 px de contenu pour un conteneur « boxed » plafonné à 1200. En dessous de 1200 px le conteneur suit la fenêtre : à 1100 px il ne fait plus que 1060 px et le menu passe sur deux lignes. La barre monte alors à 124 px alors que son margin-bottom vaut -93 : 31 px de contenu de page restent cachés dessous en permanence. Elementor ne peut pas corriger cette bande : ses points de rupture s'arrêtent à 1024 px (tablette), et 1025-1199 relève donc des réglages « bureau », qui s'appliqueraient aussi à 1440. D'où cette règle, limitée à la bande. Spécificité : Elementor pose le padding des items de menu avec un sélecteur à 0,4,0. Celui du menu ci-dessous est à 0,6,1 pour l'emporter sans !important. Les deux autres visent des widgets dont Elementor n'utilise que {{WRAPPER}} (0,2,0) : 0,3,0 suffit. Mesures après règle : 1100, 1160 et 1199 px repassent sur une ligne, barre à 93 px. Il reste 1025-1076 px sur deux lignes — défaut antérieur au panier, qui courait alors de 1025 à 1095 px. -------------------------------------------------------------------------- */ @media (min-width: 1025px) and (max-width: 1199px) { .elementor-location-header .elementor-element.e-con.btc-entete-nav .elementor-widget-nav-menu a.elementor-item { padding-left: 0; padding-right: 0; } .btc-entete-nav .elementor-menu-cart__toggle .elementor-button { padding-left: 6px; padding-right: 6px; } /* Icône « Mon compte » (client connecté) : même largeur que le panier resserré, 31 px. À 43 px, le menu repassait sur deux lignes à 1100 px. Spécificité 0,3,1 : la règle de base, plus bas dans la feuille, est à 0,2,1 et l'emporterait à égalité. */ .elementor-location-header .btc-entete-nav a.btc-compte { width: 31px; } /* Client connecté : l'icône de compte ajoute 41 px (31 + écart). On les reprend sur les écarts du groupe de droite et sur les deux boutons. */ body.logged-in .btc-entete-nav .elementor-element-07071ab { --gap: 6px; --column-gap: 6px; gap: 6px; } body.logged-in .btc-entete-nav .elementor-element-btcgdbtn1 .elementor-button, body.logged-in .btc-entete-nav .elementor-element-10e3b14 .elementor-button { padding-left: 10px; padding-right: 10px; } .btc-entete-nav .elementor-element-btcgdbtn1 .elementor-button, .btc-entete-nav .elementor-element-10e3b14 .elementor-button { padding-left: 12px; padding-right: 12px; } } /* -------------------------------------------------------------------------- Messages WooCommerce : dégager la bande recouverte par la barre collante -------------------------------------------------------------------------- Symptôme : après « Ajouter au panier », l'encart « … a été ajouté à votre panier » s'affichait SOUS la barre de navigation, illisible. Cause mesurée, pas déduite. Le conteneur de la barre (80d1382) porte margin-bottom: -93px (-81px en mobile) pour que le hero remonte derrière elle. WooCommerce imprime
en frère IMMÉDIAT de : c'est donc lui, et non le hero, qui reçoit cette remontée sur les gabarits WooCommerce. Relevé Playwright avant correctif : encart top 46 / bottom 134, barre top 46 / bottom 139, et document.elementFromPoint au centre de l'encart renvoyait elementor-element-80d1382. Pourquoi padding-top et non margin-top : margin-top aurait éloigné l'encart sans rien mettre derrière la barre translucide, qui se serait retrouvée sur le blanc de la page — contraste du menu mesuré à 2,46:1, sous le minimum WCAG de 4,5:1. Le padding garde la bande dans l'élément et le fond navy la remplit : contraste remesuré 11,62:1. :not(:empty) : sans encart, WooCommerce imprime quand même le conteneur, vide. La condition évite d'ajouter 93px de vide sur toutes les pages boutique. Les deux valeurs sont le margin-bottom de 80d1382. Si ce réglage change dans l'éditeur, changer les deux nombres ici. -------------------------------------------------------------------------- */ body .woocommerce-notices-wrapper:not(:empty) { padding-top: 93px; background-color: #24395B; } @media (max-width: 767px) { body .woocommerce-notices-wrapper:not(:empty) { padding-top: 81px; } } /* Panneau latéral du panier : le libellé « Voir le panier » passe sur deux lignes dans la colonne de 440 px, à côté de « Commander » qui tient sur une. Les deux boutons prennent alors des hauteurs différentes (64 et 47 px mesurés). Elementor n'expose ni la typographie ni la disposition de ces deux boutons : son contrôle « buttons_position » est vertical (haut/bas). */ .elementor-menu-cart__footer-buttons .elementor-button { white-space: nowrap; } /* -------------------------------------------------------------------------- WooCommerce : boutique, panier, commande, formulaire de don -------------------------------------------------------------------------- Ces pages sont produites par WooCommerce et par Donation Platform for WooCommerce, pas par l'éditeur Elementor : leurs boutons et champs ne reçoivent pas les classes g-btc. Les règles ci-dessous reprennent les valeurs des classes globales pour que ces pages ressemblent au reste du site. Valeurs relevées sur le rendu de g-btcbtn01 le 2026-10-28 : fond #C24E00, survol #A84300, rayon 8px, 14px 28px, 17px, graisse 600. Spécificité : WooCommerce pose ses boutons avec .woocommerce:where(...) button.button (0,1,1 + :where nul) et le kit Elementor avec .elementor-kit-5 button (0,1,1). Les sélecteurs ci-dessous sont à 0,2,2 au moins. :is(body.woocommerce, body .woocommerce) couvre les deux cas : sur la boutique et les fiches, WooCommerce pose la classe woocommerce sur lui-même ; ailleurs, sur un conteneur. -------------------------------------------------------------------------- */ :is(body.woocommerce, body .woocommerce) a.button, :is(body.woocommerce, body .woocommerce) button.button, :is(body.woocommerce, body .woocommerce) input.button, :is(body.woocommerce, body .woocommerce) #respond input#submit, :is(body.woocommerce, body .woocommerce) a.button.alt, :is(body.woocommerce, body .woocommerce) button.button.alt, :is(body.woocommerce, body .woocommerce) #place_order, body .wcdp-form button.wcdp-button { background-color: #C24E00; color: #FFFFFF; border: 0; border-radius: 8px; padding: 14px 28px; font-size: 17px; font-weight: 600; line-height: 1.2; text-decoration: none; } :is(body.woocommerce, body .woocommerce) a.button:hover, :is(body.woocommerce, body .woocommerce) button.button:hover, :is(body.woocommerce, body .woocommerce) input.button:hover, :is(body.woocommerce, body .woocommerce) a.button.alt:hover, :is(body.woocommerce, body .woocommerce) button.button.alt:hover, :is(body.woocommerce, body .woocommerce) #place_order:hover, body .wcdp-form button.wcdp-button:hover, :is(body.woocommerce, body .woocommerce) a.button:focus-visible, :is(body.woocommerce, body .woocommerce) button.button:focus-visible, body .wcdp-form button.wcdp-button:focus-visible { background-color: #A84300; color: #FFFFFF; } :is(body.woocommerce, body .woocommerce) a.button:focus-visible, :is(body.woocommerce, body .woocommerce) button.button:focus-visible, body .wcdp-form button.wcdp-button:focus-visible { outline: 3px solid #24395B; outline-offset: 2px; } /* Bouton « Retour » du don : action secondaire, contour navy. */ body .wcdp-form button.wcdp-button.wcdp-left { background-color: transparent; color: #24395B; box-shadow: inset 0 0 0 2px #24395B; } body .wcdp-form button.wcdp-button.wcdp-left:hover { background-color: #24395B; color: #FFFFFF; } /* Montants proposés : cartes blanches à bord, navy une fois choisies. Le plugin les peint en gris #d3d3d3 par défaut (--wcdp-label-inactive). */ body .wcdp-form ul.wcdp_options > li > label { background: #FFFFFF; color: #24395B; box-shadow: inset 0 0 0 1px #D8E0EA; border-radius: 8px; padding: 12px 14px; font-weight: 600; } body .wcdp-form ul.wcdp_options > li > input:hover:not(:disabled):not(:checked) + label { background: #F5F7FA; box-shadow: inset 0 0 0 2px #24395B; } body .wcdp-form ul.wcdp_options > li > input:checked + label, body .wcdp-form ul.wcdp_options > li > input:checked + label span { background: #24395B; color: #FFFFFF; } /* Champ quantité et bouton « ajouter au panier » du formulaire de don. Le plugin les masque par style="display:none !important". La configuration Extensi-O « espaces insécables » transforme l'espace devant « !important » en   et invalide la déclaration : elle ne rétablit l'espace que si la balise tient sur une ligne, celle-ci en fait deux. À retirer quand Extensi-O sera corrigé. */ .wcdp-form input.quantity.qty[name="quantity"], .wcdp-form button.single_add_to_cart_button[name="add-to-cart"] { display: none !important; } /* Champs de formulaire : même bord que les formulaires Elementor du site. */ :is(body.woocommerce, body .woocommerce) form .form-row input.input-text, :is(body.woocommerce, body .woocommerce) form .form-row textarea, :is(body.woocommerce, body .woocommerce) form .form-row select, body .wcdp-form input[type="number"] { border: 1px solid #D8E0EA; border-radius: 8px; padding: 10px 12px; } /* Vignettes produits (boutique, produits liés) : la photo entière dans un carré. Les photos Green Deal sont des bouteilles détourées sur fond blanc, en portrait (1335×2000) ou paysage (pack, 2000×1644) : recadrées en carré, le bouchon et le bas de la bouteille disparaissaient. Les miniatures sont générées sans recadrage (woocommerce_thumbnail_cropping = uncropped, 600 px) ; ce cadre carré garde la grille alignée malgré des formats différents. Fond blanc = fond des photos. */ :is(body.woocommerce, body .woocommerce) ul.products li.product a img { aspect-ratio: 1 / 1; width: 100%; height: auto; object-fit: contain; background-color: #FFFFFF; } /* Prix : navy plutôt que le vert par défaut de WooCommerce. */ :is(body.woocommerce, body .woocommerce) ul.products li.product .price, :is(body.woocommerce, body .woocommerce) div.product p.price, :is(body.woocommerce, body .woocommerce) div.product span.price { color: #24395B; font-weight: 600; } /* Messages WooCommerce : bord navy au lieu du bleu/violet par défaut. */ body .woocommerce-info, body .woocommerce-message { border-top-color: #24395B; } body .woocommerce-info::before, body .woocommerce-message::before { color: #24395B; } /* Couleur du texte dans le HTML produit par WooCommerce. Le kit Elementor définit la couleur de texte par défaut en blanc (.elementor-kit-5 { color: #FFFFFF }) : les widgets du site la remplacent par leurs classes g-btcontxt, mais les tableaux du panier, de la commande, du compte et du formulaire de don en héritent et deviennent invisibles sur fond blanc. On cible les conteneurs WooCommerce, pas , pour ne pas toucher l'en-tête et le pied de page, qui comptent sur ce blanc. */ body div.woocommerce, body .wcdp-form, body .elementor-widget-wc-archive-products, body .elementor-widget-woocommerce-product-related, body .elementor-widget-woocommerce-product-data-tabs, body .elementor-widget-woocommerce-product-add-to-cart { color: #2B2B2B; } body div.woocommerce table.shop_table th, body div.woocommerce .woocommerce-privacy-policy-text, body .wcdp-form .woocommerce-privacy-policy-text { color: #2B2B2B; } /* -------------------------------------------------------------------------- Bandeau cookies et fenêtre de préférences (extension Cookiez) -------------------------------------------------------------------------- Cookiez affiche ses deux encarts dans des popups Elementor Pro (#elementor-popup-modal-2153 : consentement, -2154 : préférences). Ses réglages de position, de marge et d'arrondi ne s'appliquent pas à ces popups : sans ces règles, le consentement s'ouvre centré, collé à ses bords, sans arrondi (constaté le 2026-11-12 sur bataclan.be). Les couleurs, elles, viennent des réglages Cookiez (texte #2B2B2B, liens #A84300, boutons #24395B). La position est posée par le script de la popup en style inline : d'où les !important sur top/left/right/bottom. L'extension impose la police Poppins : on rend celle du site. -------------------------------------------------------------------------- */ #elementor-popup-modal-2153 .dialog-widget-content { position: fixed !important; top: auto !important; right: auto !important; bottom: 24px !important; left: 24px !important; width: 440px !important; max-width: calc(100vw - 32px); padding: 24px; border-radius: 16px; box-shadow: 0 12px 40px rgba(13, 27, 42, 0.28); } #elementor-popup-modal-2154 .dialog-widget-content { width: 560px !important; max-width: calc(100vw - 32px); padding: 28px; border-radius: 16px; box-shadow: 0 12px 40px rgba(13, 27, 42, 0.28); } #elementor-popup-modal-2153 .e-con, #elementor-popup-modal-2154 .e-con { --gap: 14px; --row-gap: 14px; padding: 0; } /* Liens vers les politiques : séparés au lieu d'être collés. */ #elementor-popup-modal-2153 .cookiez-content .cc-link { display: inline-block; margin-right: 12px; } :is(#elementor-popup-modal-2153, #elementor-popup-modal-2154) :is(.cookiez-heading__text, .cookiez-content, .cookiez-footer-button, [class*="cookiez-preferences"]) { font-family: "Montserrat", sans-serif; } :is(#elementor-popup-modal-2153, #elementor-popup-modal-2154) .cookiez-footer-button { font-weight: 600; } :is(#elementor-popup-modal-2153, #elementor-popup-modal-2154) .cookiez-footer-button:focus-visible { outline: 3px solid #A84300; outline-offset: 2px; } /* La popup garde une largeur interne fixe (.dialog-message, 640 px par défaut) : sans ceci, le contenu déborde du cadre redimensionné. */ :is(#elementor-popup-modal-2153, #elementor-popup-modal-2154) .dialog-message { width: 100% !important; max-width: 100%; } /* Boutons des préférences : largeur selon le texte, retour à la ligne si besoin. À parts égales, « Enregistrer mes préférences » était tronqué. */ #elementor-popup-modal-2154 [class*="footer"] { flex-wrap: wrap; } #elementor-popup-modal-2154 [class*="footer"] button { flex: 1 1 auto; white-space: nowrap; } @media (max-width: 767px) { /* Au-dessus du bouton d'accessibilité (ea11y, 44 px en bas à droite), qui recouvrait « Tout accepter ». */ #elementor-popup-modal-2153 .dialog-widget-content { left: 16px !important; right: 16px !important; bottom: 76px !important; width: auto !important; padding: 20px; } #elementor-popup-modal-2154 .dialog-widget-content { padding: 20px; } /* Boutons empilés : côte à côte, « Tout accepter » était coupé. */ :is(#elementor-popup-modal-2153, #elementor-popup-modal-2154) [class*="footer"] { flex-direction: column; } :is(#elementor-popup-modal-2153, #elementor-popup-modal-2154) [class*="footer"] button { width: 100%; } } /* -------------------------------------------------------------------------- Pied de page : sous-menus de la navigation -------------------------------------------------------------------------- Le menu vertical du pied de page ouvrait ses sous-menus en fenêtre flottante décalée sur la droite, par-dessus la colonne « Informations », et les refermait 53 ms après la sortie de la souris (mesuré le 2026-11-12) : impossible à atteindre sans viser parfaitement, contraire à WCAG 1.4.13 (contenu au survol : persistant, atteignable). Ici le sous-menu s'ouvre directement sous son parent, dans le flux, au survol, au clavier (:focus-within) ou au clic sur la flèche (classe .highlighted posée par le script du menu), et ne se referme que 0,6 s après la sortie de la souris. Les !important l'emportent sur les styles en ligne (display, top, left) que pose le script du menu. -------------------------------------------------------------------------- */ .elementor-location-footer .elementor-nav-menu--layout-vertical .sub-menu { position: static !important; display: block !important; top: auto !important; left: auto !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 0 0 16px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; max-height: 0; overflow: hidden; visibility: hidden; opacity: 0; transition: max-height 0.25s ease 0.6s, opacity 0.2s ease 0.6s, visibility 0s linear 0.85s; } .elementor-location-footer .elementor-nav-menu--layout-vertical li:hover > .sub-menu, .elementor-location-footer .elementor-nav-menu--layout-vertical li:focus-within > .sub-menu, .elementor-location-footer .elementor-nav-menu--layout-vertical a.highlighted + .sub-menu { max-height: 480px; visibility: visible; opacity: 1; transition-delay: 0s; } .elementor-location-footer .elementor-nav-menu--layout-vertical .sub-menu a { background: transparent !important; color: #E9ECEF !important; font-size: 15px; padding: 6px 0 !important; border: 0 !important; } .elementor-location-footer .elementor-nav-menu--layout-vertical .sub-menu a:hover, .elementor-location-footer .elementor-nav-menu--layout-vertical .sub-menu a:focus-visible { color: #FF8A50 !important; } @media (prefers-reduced-motion: reduce) { .elementor-location-footer .elementor-nav-menu--layout-vertical .sub-menu { transition: visibility 0s linear 0.6s; } } /* -------------------------------------------------------------------------- En-tête : accès « Mon compte » et mini-panier -------------------------------------------------------------------------- L'icône « Mon compte » (widget html btccompte1, à droite du panier) n'apparaît qu'aux clients connectés : WordPress pose la classe logged-in sur . Les visiteurs ne la voient pas, ce qui évite un lien de connexion de plus dans un en-tête déjà chargé ; la connexion reste proposée au moment de commander. Même gabarit que le bouton du panier : carré de 43 px (marge intérieure du panier ramenée de 12/24 px à 12 px dans le widget), bord blanc à 35 %. À 67 px de large, les deux boutons renvoyaient « Contact » à la ligne pour un client connecté. Le lien « Continuer mes achats » est ajouté par le mini-panier du thème (woocommerce/elementor-mini-cart.php). -------------------------------------------------------------------------- */ .elementor-location-header .btc-compte-entete { display: none; } body.logged-in .elementor-location-header .btc-compte-entete { display: block; } /* Spécificité 0,2,1 : la couleur des liens du kit Elementor (.elementor-kit-5 a, 0,1,1) peignait l'icône en orange. */ .elementor-location-header a.btc-compte { display: inline-flex; align-items: center; justify-content: center; width: 43px; height: 43px; border: 1px solid rgba(255, 255, 255, 0.35); color: #FFFFFF; transition: color 0.2s ease; } .elementor-location-header a.btc-compte:hover, .elementor-location-header a.btc-compte:focus-visible { color: #FF8A50; } .btc-compte:focus-visible { outline: 3px solid #FF8A50; outline-offset: 2px; } .btc-mini-panier__boutique { margin-top: 16px; } .btc-mini-panier__continuer { margin: 12px 0 0; text-align: center; font-size: 15px; } .btc-mini-panier__continuer a { color: #24395B; text-decoration: underline; } /* -------------------------------------------------------------------------- Mon compte (WooCommerce) -------------------------------------------------------------------------- Page produite par WooCommerce, hors des widgets du site : sans ces règles, la navigation était une liste à puces soulignée et le tableau de bord deux paragraphes de liens. Ici, même vocabulaire que le reste du site : cartes blanches à bord #D8E0EA arrondies à 16 px, navy #24395B pour l'actif, orange AA pour les actions. - navigation : carte à gauche, une icône par rubrique, actif en navy, « Se déconnecter » séparé ; en mobile, rangée d'onglets défilante ; - tableau de bord : bloc .btc-compte-tableau ajouté par functions.php ; les deux paragraphes par défaut de WooCommerce sont masqués quand il est présent (:has) ; - commandes, adresses, formulaires ; visiteur : connexion et inscription côte à côte. Icônes : SVG en masque CSS, la couleur suit currentColor. -------------------------------------------------------------------------- */ body.woocommerce-account { --btc-icone-dashboard: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2324395B%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221.5%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221.5%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221.5%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221.5%22%2F%3E%3C%2Fsvg%3E"); --btc-icone-orders: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2324395B%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%207h12l-1%2013H7L6%207z%22%2F%3E%3Cpath%20d%3D%22M9%207a3%203%200%200%201%206%200%22%2F%3E%3C%2Fsvg%3E"); --btc-icone-edit-address: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2324395B%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021s-7-6.2-7-11a7%207%200%200%201%2014%200c0%204.8-7%2011-7%2011z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%222.5%22%2F%3E%3C%2Fsvg%3E"); --btc-icone-payment-methods: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2324395B%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.5%22%20y%3D%225%22%20width%3D%2219%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M2.5%2010h19%22%2F%3E%3C%2Fsvg%3E"); --btc-icone-edit-account: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2324395B%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M4%2021c0-4%203.6-6.5%208-6.5s8%202.5%208%206.5%22%2F%3E%3C%2Fsvg%3E"); --btc-icone-customer-logout: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2324395B%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%204h3a2%202%200%200%201%202%202v12a2%202%200%200%201-2%202h-3%22%2F%3E%3Cpath%20d%3D%22M10%2017l-5-5%205-5%22%2F%3E%3Cpath%20d%3D%22M5%2012h11%22%2F%3E%3C%2Fsvg%3E"); --btc-icone-shop: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2324395B%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2019c9%200%2014-5%2014-14-9%200-14%205-14%2014z%22%2F%3E%3Cpath%20d%3D%22M5%2019l7-7%22%2F%3E%3C%2Fsvg%3E"); --btc-icone-don: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2324395B%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020s-7-4.4-7-10a4%204%200%200%201%207-2.6A4%204%200%200%201%2019%2010c0%205.6-7%2010-7%2010z%22%2F%3E%3C%2Fsvg%3E"); } body.woocommerce-account div.woocommerce:has(> .woocommerce-MyAccount-navigation) { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; align-items: start; } /* WooCommerce pose un « clearfix » (::before/::after) sur ce conteneur : en grille, ces pseudo-éléments occupaient des cases et poussaient la navigation dans la colonne de droite. */ body.woocommerce-account div.woocommerce:has(> .woocommerce-MyAccount-navigation)::before, body.woocommerce-account div.woocommerce:has(> .woocommerce-MyAccount-navigation)::after { display: none; } body.woocommerce-account .woocommerce-MyAccount-navigation, body.woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; } /* Navigation */ body.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 8px; background: #FFFFFF; border: 1px solid #D8E0EA; border-radius: 16px; box-shadow: 0 6px 20px rgba(13, 27, 42, 0.06); } body.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; } body.woocommerce-account .woocommerce-MyAccount-navigation li a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; color: #24395B; font-weight: 600; font-size: 16px; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; } body.woocommerce-account .woocommerce-MyAccount-navigation li a::before { content: ""; flex: 0 0 20px; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: var(--btc-icone, var(--btc-icone-dashboard)) center / contain no-repeat; mask: var(--btc-icone, var(--btc-icone-dashboard)) center / contain no-repeat; } body.woocommerce-account .woocommerce-MyAccount-navigation-link--dashboard { --btc-icone: var(--btc-icone-dashboard); } body.woocommerce-account .woocommerce-MyAccount-navigation-link--orders { --btc-icone: var(--btc-icone-orders); } body.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-address { --btc-icone: var(--btc-icone-edit-address); } body.woocommerce-account .woocommerce-MyAccount-navigation-link--payment-methods { --btc-icone: var(--btc-icone-payment-methods); } body.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-account { --btc-icone: var(--btc-icone-edit-account); } body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout { --btc-icone: var(--btc-icone-customer-logout); } body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover, body.woocommerce-account .woocommerce-MyAccount-navigation li a:focus-visible { background: #F5F7FA; } body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: #24395B; color: #FFFFFF; } body.woocommerce-account .woocommerce-MyAccount-navigation li a:focus-visible { outline: 3px solid #FF8A50; outline-offset: 2px; } body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 8px !important; padding-top: 8px; border-top: 1px solid #D8E0EA; } body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a { color: #B03838; font-weight: 500; } /* Contenu */ body.woocommerce-account .woocommerce-MyAccount-content { color: #2B2B2B; font-size: 16px; line-height: 1.6; } body.woocommerce-account .woocommerce-MyAccount-content a:not(.button) { color: #A84300; } /* Tableau de bord */ body.woocommerce-account .woocommerce-MyAccount-content:has(.btc-compte-tableau) > p { display: none; } .btc-compte-tableau { display: grid; gap: 24px; } .btc-compte-accueil { position: relative; padding: 28px 32px; border-radius: 16px; background: #24395B; background-image: radial-gradient(circle at 92% 20%, rgba(255, 138, 80, 0.35), transparent 45%), radial-gradient(circle at 70% 120%, rgba(103, 163, 254, 0.3), transparent 50%); color: #FFFFFF; } .btc-compte-accueil__titre { margin: 0 0 6px; font-size: 28px; font-weight: 700; line-height: 1.2; } .btc-compte-accueil__texte { margin: 0; color: #DCE3EE; max-width: 52ch; } body.woocommerce-account .btc-compte-tableau a.btc-compte-accueil__sortie { position: absolute; top: 24px; right: 28px; color: #FFFFFF; font-size: 14px; } .btc-compte-derniere { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding: 20px 24px; border: 1px solid #D8E0EA; border-radius: 16px; background: #F5F7FA; } .btc-compte-derniere__titre { flex: 1 0 100%; margin: 0; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #595959; } .btc-compte-derniere__detail { margin: 0; } body.woocommerce-account .btc-compte-tableau a.btc-compte-derniere__lien { font-weight: 600; } .btc-statut { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; background: #E9EEF4; color: #24395B; } .btc-statut--completed { background: #E4EFD9; color: #456B22; } .btc-statut--processing { background: #E3EDFB; color: #315F9D; } .btc-statut--on-hold, .btc-statut--pending { background: #FFF1D6; color: #7A5A00; } .btc-statut--cancelled, .btc-statut--failed, .btc-statut--refunded { background: #F6E1E1; color: #B03838; } .btc-compte-cartes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } .btc-compte-carte a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 20px; border: 1px solid #D8E0EA; border-radius: 16px; background: #FFFFFF; text-decoration: none; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .btc-compte-carte a::before { content: ""; width: 40px; height: 40px; margin-bottom: 6px; border-radius: 12px; background: #F5F1E8 var(--btc-icone) center / 20px no-repeat; background-color: #F5F1E8; -webkit-mask: none; } .btc-compte-carte--orders { --btc-icone: var(--btc-icone-orders); } .btc-compte-carte--edit-address { --btc-icone: var(--btc-icone-edit-address); } .btc-compte-carte--edit-account { --btc-icone: var(--btc-icone-edit-account); } .btc-compte-carte--shop { --btc-icone: var(--btc-icone-shop); } .btc-compte-carte--don { --btc-icone: var(--btc-icone-don); } .btc-compte-carte a:hover, .btc-compte-carte a:focus-visible { border-color: #24395B; box-shadow: 0 10px 24px rgba(13, 27, 42, 0.1); transform: translateY(-2px); } .btc-compte-carte a:focus-visible { outline: 3px solid #FF8A50; outline-offset: 2px; } .btc-compte-carte__titre { color: #24395B; font-size: 17px; font-weight: 700; } .btc-compte-carte__texte { color: #595959; font-size: 14px; line-height: 1.5; } /* Commandes */ body.woocommerce-account table.woocommerce-orders-table, body.woocommerce-account table.shop_table { border: 1px solid #D8E0EA; border-radius: 16px; border-collapse: separate; border-spacing: 0; overflow: hidden; } body.woocommerce-account table.woocommerce-orders-table thead th { background: #24395B; color: #FFFFFF; font-weight: 600; padding: 12px 14px; } body.woocommerce-account table.woocommerce-orders-table td { padding: 12px 14px; vertical-align: middle; } body.woocommerce-account table.woocommerce-orders-table tbody tr:nth-child(even) td { background: #F5F7FA; } body.woocommerce-account .woocommerce-orders-table__cell-order-status { font-weight: 600; } body.woocommerce-account .woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status { color: #456B22; } body.woocommerce-account .woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status { color: #315F9D; } body.woocommerce-account .woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status { color: #7A5A00; } body.woocommerce-account .woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status, body.woocommerce-account .woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status { color: #B03838; } /* Message « aucune commande » */ body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info { border-radius: 12px; } /* Adresses */ body.woocommerce-account .woocommerce-Addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } body.woocommerce-account .woocommerce-Addresses::before, body.woocommerce-account .woocommerce-Addresses::after { display: none; } body.woocommerce-account .woocommerce-Addresses .woocommerce-Address { float: none; width: auto; padding: 20px 24px; border: 1px solid #D8E0EA; border-radius: 16px; background: #FFFFFF; } body.woocommerce-account .woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } body.woocommerce-account .woocommerce-Address-title h2 { margin: 0 0 8px; font-size: 20px; color: #24395B; } body.woocommerce-account .woocommerce-Address address { font-style: normal; line-height: 1.6; } /* Formulaires (informations, adresses) */ body.woocommerce-account .woocommerce-MyAccount-content form fieldset { margin: 24px 0; padding: 20px 24px; border: 1px solid #D8E0EA; border-radius: 16px; } body.woocommerce-account .woocommerce-MyAccount-content form legend { padding: 0 8px; font-weight: 700; color: #24395B; } /* Visiteur : connexion et inscription */ body.woocommerce-account #customer_login.u-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; } body.woocommerce-account #customer_login.u-columns::before, body.woocommerce-account #customer_login.u-columns::after { display: none; } body.woocommerce-account #customer_login .u-column1, body.woocommerce-account #customer_login .u-column2 { float: none; width: auto; padding: 28px 32px; border: 1px solid #D8E0EA; border-radius: 16px; background: #FFFFFF; box-shadow: 0 6px 20px rgba(13, 27, 42, 0.06); } body.woocommerce-account #customer_login h2 { margin: 0 0 16px; font-size: 24px; color: #24395B; } body.woocommerce-account #customer_login form.woocommerce-form { margin: 0; padding: 0; border: 0; } @media (max-width: 1024px) { body.woocommerce-account div.woocommerce:has(> .woocommerce-MyAccount-navigation) { grid-template-columns: minmax(0, 1fr); gap: 24px; } /* Rangée d'onglets défilante : la liste verticale prenait tout l'écran avant le contenu. */ body.woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } body.woocommerce-account .woocommerce-MyAccount-navigation li a { white-space: nowrap; padding: 10px 14px; font-size: 15px; } body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 0 !important; padding-top: 0; border-top: 0; } } @media (max-width: 767px) { .btc-compte-accueil { padding: 24px 20px 56px; } body.woocommerce-account .btc-compte-tableau a.btc-compte-accueil__sortie { top: auto; bottom: 20px; right: auto; left: 20px; } }