/* Theme Name: Nacre. Theme URI: https://example.com Author: — Description: Thème bloc WooCommerce sur mesure. Couleurs et polices réglables dans Apparence → Éditeur → Styles ; en-tête et pied de page dans Apparence → Éditeur → Compositions. Version: 1.0.0 Requires at least: 6.8 Tested up to: 7.1 Requires PHP: 8.0 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: nacre Tags: block-theme, full-site-editing, e-commerce, woocommerce */ /* ========================================================================== Mode d'emploi du squelette - Sections 1 à 3 et 11 : à compléter avec le CSS de la maquette (composants de l'accueil, en-tête, pied de page), classes posées sur les blocs. - Sections 4 à 10 : les pages marchandes, déjà éprouvées sur le DOM de WooCommerce 11.1 (voir references/blocs-woocommerce.md). On en règle la SURFACE d'après la maquette (tailles, espacements, boutons) — on ne supprime pas les correctifs commentés « PIÈGE ». ========================================================================== */ /* ========================================================================== 1 · Jetons Les couleurs sont des ALIAS des couleurs de theme.json : le client les change dans Styles → Couleurs → Palette, et tout le site suit. Aucune couleur en dur ailleurs dans cette feuille (porte « styles globaux ») — les nuances se dérivent par color-mix(). --police-titres et --police-texte ne se définissent PAS ici : functions.php les pose depuis Styles → Typographie (le « pont »). ========================================================================== */ :root{ --fond:var(--wp--preset--color--fond); --surface:var(--wp--preset--color--surface); --texte:var(--wp--preset--color--texte); --sourdine:var(--wp--preset--color--sourdine); --trait:var(--wp--preset--color--trait); --accent:var(--wp--preset--color--accent); --sur-accent:var(--wp--preset--color--sur-accent); --promo:var(--wp--preset--color--promo); --alerte:var(--wp--preset--color--alerte); --scene:var(--wp--preset--color--scene); --sur-scene:var(--wp--preset--color--sur-scene); --rayon:var(--wp--custom--rayon,10px); --rayon-bouton:var(--wp--custom--rayon-bouton,999px); --largeur:1240px; --gouttiere:clamp(16px,4vw,40px); /* la valeur de la maquette : elle règle aussi les sections pleine largeur */ --entete-h:76px; /* Icônes en masques CSS (jamais de SVG dans le contenu) : color = currentColor */ --i-fleche: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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); --i-sac: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.6' stroke-linejoin='round'%3E%3Cpath d='M5.5 8.5h13l-1 11.5h-11z'/%3E%3Cpath d='M9 8.5V7a3 3 0 0 1 6 0v1.5'/%3E%3C/svg%3E"); --i-livraison: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.5' stroke-linejoin='round'%3E%3Cpath d='M3 6.5h11v9H3zM14 9.5h4l3 3v3h-7z'/%3E%3Ccircle cx='7' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E"); --i-retour: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.5' stroke-linecap='round'%3E%3Cpath d='M19.5 12a7.5 7.5 0 1 1-2.2-5.3'/%3E%3Cpath d='M19.5 4.5v4h-4'/%3E%3C/svg%3E"); --i-cadenas: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.5' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='1.5'/%3E%3Cpath d='M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5'/%3E%3C/svg%3E"); /* Variables exposées par WooCommerce, branchées sur les rôles du thème */ --wc-separator-color:var(--trait); --wc-form-color-text:var(--texte); --wc-product-filter-chips-text:var(--texte); --wc-product-filter-chips-border:var(--trait); --wc-product-filter-chips-background:var(--fond); --wc-product-filter-chips-selected-text:var(--sur-accent); --wc-product-filter-chips-selected-border:var(--accent); --wc-product-filter-chips-selected-background:var(--accent); --wc-product-filter-price-slider:var(--accent); --wc-product-filter-price-slider-handle:var(--accent); --wc-product-filter-price-slider-handle-border:var(--fond); --wc-product-filter-checkbox-list-option-element:var(--trait); --wc-product-filter-checkbox-list-option-element-border:var(--trait); --wc-product-filter-checkbox-list-option-element-selected:var(--accent); --wc-product-filter-removable-chips-text:var(--texte); --wc-product-filter-removable-chips-border:var(--trait); --wc-product-filter-removable-chips-background:var(--surface); --wc-customer-account-dropdown-border-color:var(--trait); --wc-customer-account-dropdown-surface:var(--fond); --wc-customer-account-dropdown-item-hover-bg:var(--surface); } /* ========================================================================== 2 · Base ========================================================================== */ /* pseudo-éléments compris : sinon un rond de 9 px bordé mesure 11 px, et la ligne de base d'un surtitre en inline-flex bouge d'1 px par section (vécu : −3 px en bas de page) */ *,*::before,*::after{box-sizing:border-box} /* Pas de position:relative sur body : un en-tête posé sur un héros se cale sur le haut de la page, et les décalages de la barre d'admin restent justes. */ body{margin:0;background:var(--fond);color:var(--texte);font-family:var(--police-texte);-webkit-font-smoothing:antialiased} img{max-width:100%;height:auto;display:block} /* height:auto obligatoire : sinon l'attribut height des blocs image l'emporte sur aspect-ratio */ /* PIÈGE : img{display:block} écrase l'attribut hidden — le mini-panier et le panier affichaient leur image de secours cachée (deux vignettes par article). */ [hidden]{display:none!important} h1,h2,h3,h4{margin:0;font-family:var(--police-titres);text-wrap:balance;hyphens:none} p{margin:0} a{color:inherit;text-underline-offset:.18em} a:hover{color:var(--accent)} /* Gutenberg applique margin-block-start entre frères. La neutralisation se fait d'abord dans theme.json (blockGap: "0px") et, en filet de sécurité, ICI À SPÉCIFICITÉ NULLE — jamais en .wp-block-group > * : cette version-là écraserait toutes les marges de vos composants (vécu : 14 marges à zéro, 307 px de rythme vertical perdus). */ :where(.wp-block-group)>:where(*),:where(.wp-block-buttons){margin-block:0} figure.wp-block-image{margin:0} .wrap{width:100%;max-width:calc(var(--largeur) + 2 * var(--gouttiere));margin-inline:auto;padding-inline:var(--gouttiere)} /* Boutons : les styles de theme.json (elements.button) valent pour les boutons de la page ET pour ceux de WooCommerce, qui portent tous .wp-element-button. Un bouton de la maquette (ex. .b-sombre) : UNE définition pour deux DOM — « :is(a,button).b-sombre, .b-sombre>.wp-block-button__link » — et le conteneur du bloc neutralisé, sinon il double la pastille (blocs-gutenberg.md). */ .wp-block-button.b-plein{display:inline-block;background:none;border:0;padding:0;border-radius:0} .wp-block-button.is-style-outline .wp-block-button__link{background:transparent;color:var(--texte);border:1px solid var(--trait)} .wp-element-button,.wp-block-button__link{transition:background-color .2s,color .2s,border-color .2s} /* Champs de formulaire — WooCommerce (blocs et « Mon compte »), recherche, CF7. Le rayon est celui des champs de la maquette. */ :where(input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number], input[type=search],input[type=url],select,textarea){ font:inherit;color:var(--texte);background:var(--fond);border:1px solid var(--trait); border-radius:var(--rayon);padding:12px 14px;min-height:48px;max-width:100%} :where(input,select,textarea):focus{outline:none;border-color:var(--texte)} :where(a,button,input,select,textarea,[tabindex]):focus-visible{ outline:2px solid var(--accent);outline-offset:3px;border-radius:4px} /* Promesses : paragraphes à icône (fiche produit, récapitulatif du panier). N'y écrire QUE des faits : seuil de livraison des réglages, rétractation légale de 14 jours, paiement sécurisé — jamais un service non demandé. */ .promesse{display:flex;align-items:center;gap:12px;font-size:13px} .promesse::before{content:"";flex:none;width:18px;height:18px;background:currentColor; -webkit-mask:var(--i-livraison) center/contain no-repeat;mask:var(--i-livraison) center/contain no-repeat} .promesse-retours::before{-webkit-mask-image:var(--i-retour);mask-image:var(--i-retour)} .promesse-paiement::before{-webkit-mask-image:var(--i-cadenas);mask-image:var(--i-cadenas)} /* ========================================================================== 3 · En-tête, en-tête de commande, pied de page (parts/) Tout y est modifiable dans Apparence → Éditeur → Compositions : logo (bloc Logo du site → Remplacer), menu, textes, liens, réseaux. Menu : le lien du catalogue toujours ; les catégories à plat si elles tiennent (2 à 4), sinon en sous-menu du catalogue (core/navigation-submenu). Jamais la loupe de recherche par défaut (core/search) dans l'en-tête. ========================================================================== */ .entete{position:sticky;top:0;z-index:40;background:var(--fond);border-bottom:1px solid var(--trait)} /* Décalage de la barre d'admin : seulement pour un en-tête collant (ici) ou posé sur le héros. Sur un en-tête en flux, il le ferait descendre sur le contenu. */ /* (Nacre. : le décalage se pose sur le
qui colle — section 11) */ .entete-rangee{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:var(--entete-h)} /* Largeur du logo = celle du logo texte de la maquette, mesurée (porte 4) */ .entete-logo img{width:auto;max-height:36px} .menu .wp-block-navigation__container{gap:28px} .menu .wp-block-navigation-item__content{text-decoration:none;font-weight:500} .menu .current-menu-item>.wp-block-navigation-item__content{text-decoration:underline} /* sous-menu des catégories (au survol en ordinateur, dans le panneau en mobile) */ .menu .wp-block-navigation__submenu-container{min-width:220px;padding:10px 0;border:1px solid var(--trait)!important; border-radius:var(--rayon);background:var(--fond)!important;color:var(--texte)!important;box-shadow:0 12px 32px color-mix(in srgb,var(--texte) 8%,transparent)} .menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content{padding:8px 18px;font-weight:400} /* ---------- Menu mobile (panneau de core/navigation) ---------- PIÈGE (vécu en production) : WordPress règle la marge du panneau sur le padding racine de theme.json — absent : liens collés au bord gauche, croix de 24 px collée dans l'angle, sous la barre d'admin quand on est connecté, « impossible à fermer ». Et il s'ouvre blanc sur blanc. Le CSS du bloc est imprimé APRÈS cette feuille : sélecteurs qualifiés, !important là où WordPress écrit à spécificité égale. */ .wp-block-navigation.menu .wp-block-navigation__responsive-container-open{width:44px;height:44px;align-items:center;justify-content:center;margin-left:-11px;color:inherit} .wp-block-navigation.menu .wp-block-navigation__responsive-container-open svg{width:26px;height:26px} .wp-block-navigation.menu .wp-block-navigation__responsive-container.is-menu-open{ background-color:var(--fond)!important;color:var(--texte)!important;padding:14px var(--gouttiere) 40px!important} .wp-block-navigation.menu .is-menu-open .wp-block-navigation__responsive-container-close{top:0;right:-11px;width:44px;height:44px; display:flex;align-items:center;justify-content:center;color:var(--texte)} .wp-block-navigation.menu .is-menu-open .wp-block-navigation__responsive-container-close svg{width:28px;height:28px} .wp-block-navigation.menu .is-menu-open .wp-block-navigation__responsive-container-content{padding-top:64px!important;align-items:stretch!important} .wp-block-navigation.menu .is-menu-open .wp-block-navigation__container{gap:0!important;width:100%;align-items:stretch!important} .wp-block-navigation.menu .is-menu-open .wp-block-navigation-item{width:100%;border-bottom:1px solid var(--trait)} .wp-block-navigation.menu .is-menu-open .wp-block-navigation-item__content{display:block;width:100%;padding:16px 0!important; font-family:var(--police-titres);font-size:24px;line-height:1.2;text-decoration:none} /* sous-menu des catégories : déplié dans le panneau, en retrait */ .wp-block-navigation.menu .is-menu-open .wp-block-navigation__submenu-container{padding:0 0 12px 16px!important;border:0!important; box-shadow:none!important;background:transparent!important} .wp-block-navigation.menu .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item{border:0} .wp-block-navigation.menu .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content{ font-family:var(--police-texte);font-size:16px;padding:8px 0!important} /* Liens réservés au panneau (className « menu-mobile-seul ») : tout ce que l'en-tête masque en mobile (un lien Contact des actions, un bouton) doit rester accessible ici */ .wp-block-navigation.menu .wp-block-navigation__responsive-container:not(.is-menu-open) .menu-mobile-seul{display:none} .entete-actions{display:flex;align-items:center;gap:6px} .entete-compte a,.entete-panier .wc-block-mini-cart__button{color:var(--texte);padding:8px} .wc-block-mini-cart__badge{background:var(--accent)!important;color:var(--sur-accent)!important} .entete-commande{border-bottom:1px solid var(--trait);background:var(--fond)} .entete-commande-rangee{display:flex;align-items:center;gap:24px;min-height:var(--entete-h)} .entete-commande-rangee .commande-securisee{display:flex;align-items:center;gap:8px;margin-left:auto;color:var(--sourdine);font-size:12px;letter-spacing:.08em;text-transform:uppercase} .entete-commande-rangee .commande-securisee::before{content:"";width:15px;height:15px;background:currentColor; -webkit-mask:var(--i-cadenas) center/contain no-repeat;mask:var(--i-cadenas) center/contain no-repeat} .entete-commande-rangee .commande-retour{font-size:14px} .pied{background:var(--surface);color:var(--texte);margin-top:120px} .pied-haut{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,2fr);gap:48px;padding-block:72px 48px} .pied-logo img{width:auto;max-height:32px} .pied-baseline{margin-top:16px;color:var(--sourdine);max-width:34ch} .pied-colonnes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px} /* un titre de colonne en h2 hérite la hauteur de ligne des titres (theme.json) : la poser, sinon elle diffère de la maquette (vécu : 4 px par colonne) */ .pied-titre{font-family:var(--police-texte);font-size:14px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px} .pied-menu .wp-block-navigation__container{gap:10px} .pied-menu .wp-block-navigation-item__content,.pied-legal .wp-block-navigation-item__content{text-decoration:none;color:var(--sourdine)} .pied-contact{color:var(--sourdine)} .pied-contact+.pied-contact{margin-top:10px} .pied-bas{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap; padding-block:24px;border-top:1px solid var(--trait);font-size:14px;color:var(--sourdine)} .pied-legal .wp-block-navigation__container{gap:20px} .pied-reseaux.wp-block-social-links{gap:10px} .pied-reseaux .wp-social-link{background:transparent!important;color:var(--texte)!important} /* ========================================================================== 4 · Cartes produit — le même composant partout : catalogue, accueil, produits associés, ventes croisées, panier vide.