/* Theme Name: Boizar Theme URI: https://example.com/boizar Author: Boizar Description: Thème WooCommerce sur mesure, esthétique éditoriale et minimaliste (fond clair, typographie fine, boutons carrés) inspirée du mobilier design haut de gamme. Version: 1.25.6 Requires at least: 6.0 Requires PHP: 7.4 Text Domain: boizar */ /* ========================================================================== Design tokens ========================================================================== */ :root { --color-bg: #ffffff; --color-bg-alt: #efece6; --color-text: #2e2e2e; --color-text-strong: #191919; --color-border: #e2ded4; --color-accent: #1a1a1a; --color-on-accent: #ffffff; --color-muted: #767676; --color-sale: #b23b3b; --font-base: 'Jost', 'Helvetica Neue', Arial, sans-serif; --radius: 0px; --tracking-wide: 0.08em; --tracking-wider: 0.14em; /* Pleine largeur d'écran : seule une marge latérale sépare le contenu du bord, proportionnelle à la taille de l'écran. */ --container-max: 100%; --gutter: clamp(12px, 1vw, 20px); --transition: 200ms ease; } /* ========================================================================== Reset / base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } /* La page ne doit jamais dépasser la largeur de l'écran : sans cela, un panneau hors-champ suffit à élargir le document, et le mobile laisse dézoomer sur une bande vide. « clip » et non « hidden » : hidden ferait de la racine un conteneur de défilement, ce qui casserait le position:sticky de la colonne d'achat. */ html, body { max-width: 100%; overflow-x: clip; } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-base); font-weight: 300; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; transition: color var(--transition), opacity var(--transition); } ul { list-style: none; margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-base); font-weight: 400; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-strong); margin: 0 0 16px; } h1 { font-size: 28px; } h2 { font-size: 22px; } h3 { font-size: 17px; } p { margin: 0 0 16px; } .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); } /* ========================================================================== Buttons ========================================================================== */ .btn, a.button, button.button, input[type="submit"], .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--color-accent); color: var(--color-on-accent) !important; border: 1px solid var(--color-accent); border-radius: var(--radius); padding: 14px 28px; font-family: var(--font-base); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-wider); cursor: pointer; transition: background var(--transition), color var(--transition); } .btn:hover, a.button:hover, button.button:hover, input[type="submit"]:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: var(--color-bg); color: var(--color-accent) !important; } /* porte la classe "woocommerce" (ajoutée par WC) : .woocommerce button.button ci-dessus a donc une spécificité plus élevée (2 classes + tag) que button.button seul. On la ré-égale explicitement ici pour que l'ordre du fichier (celle-ci vient après) suffise à gagner. */ .btn--outline, button.btn--outline, a.btn--outline, input.btn--outline, .woocommerce button.btn--outline, .woocommerce a.btn--outline, .woocommerce input.btn--outline { background: transparent !important; color: var(--color-accent) !important; } .btn--outline:hover, button.btn--outline:hover, a.btn--outline:hover, input.btn--outline:hover, .woocommerce button.btn--outline:hover, .woocommerce a.btn--outline:hover, .woocommerce input.btn--outline:hover { background: var(--color-accent) !important; color: var(--color-on-accent) !important; } /* ========================================================================== Top announcement bar ========================================================================== */ .announcement-bar { background: var(--color-accent); color: var(--color-on-accent); text-align: center; font-size: 12px; letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: 10px var(--gutter); } /* Widget Trustpilot (voir boizar_trustpilot_widget, inc/trustpilot.php) : la largeur 100% du widget se cale sur .trustpilot-widget, qu'on centre et limite ici plutôt que de laisser un iframe s'étirer sur toute la largeur de l'écran. Moins de padding vertical : le widget a déjà sa propre hauteur. */ .announcement-bar--trustpilot { display: flex; justify-content: center; padding-block: 6px; } .announcement-bar--trustpilot .trustpilot-widget { max-width: 320px; width: 100%; } /* ========================================================================== Site header ========================================================================== */ /* Header non fixe : il reste en haut de la page et défile avec le contenu. */ .site-header { border-bottom: 1px solid var(--color-border); background: var(--color-bg); position: relative; z-index: 50; } /* Hauteur calée sur 44 px, comme les sites de référence : 32 px de contenu (le plus haut étant les boutons d'action) plus 6 px de marge de chaque côté. */ .site-header__inner { display: flex; align-items: center; padding-block: 6px; gap: 16px; } /* Le logo se place juste à droite du bouton menu ; la marge automatique repousse les actions (recherche, compte, panier) vers la droite. */ .site-branding { margin-right: auto; } .site-branding a { font-size: 18px; font-weight: 500; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-text-strong); } .header-actions { display: flex; align-items: center; gap: 4px; } /* Actions en icônes : le libellé texte faisait déborder l'en-tête sur mobile. Le nom accessible est porté par aria-label + .screen-reader-text. */ /* padding réduit de 8 à 6 px : c'est ce qui déterminait la hauteur de la barre, les boutons étant les éléments les plus hauts. */ .header-actions a, .header-actions button { position: relative; background: none; border: none; padding: 6px; color: var(--color-text-strong); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .header-actions a:hover, .header-actions button:hover { color: var(--color-muted); } .header-actions .icon { display: block; } /* Pastille de comptage, en haut à droite de l'icône panier / favoris. */ .cart-contents .cart-count, .wishlist-contents .wishlist-count { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--color-accent); color: var(--color-on-accent); font-size: 10px; line-height: 16px; text-align: center; font-weight: 500; } .cart-contents .cart-count.is-empty, .wishlist-contents .wishlist-count.is-empty { display: none; } /* Bouton hamburger — déclenche le drawer de catégories, visible sur bureau et mobile. */ .menu-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; } .menu-toggle span { width: 22px; height: 1px; background: var(--color-text-strong); } /* ========================================================================== Hero / editorial banner ========================================================================== */ .hero { position: relative; background: var(--color-bg-alt); display: grid; grid-template-columns: 1fr 1fr; min-height: 480px; align-items: stretch; } .hero__media { overflow: hidden; } .hero__media img { width: 100%; height: 100%; object-fit: cover; } .hero__content { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 72px clamp(32px, 5vw, 80px); gap: 18px; } .hero__eyebrow { font-size: 12px; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-muted); } .hero__title { font-size: clamp(26px, 2.4vw, 36px); line-height: 1.25; max-width: 22ch; margin: 0; } .hero__text { font-weight: 300; color: var(--color-text); max-width: 46ch; margin: 0; } /* Le bouton ne doit pas s'étirer sur toute la colonne (align-items: flex-start). */ .hero__content .btn { margin-top: 8px; } @media (max-width: 900px) { .hero { grid-template-columns: 1fr; min-height: auto; } .hero__content { padding: 40px var(--gutter); } } /* ========================================================================== Category tiles ========================================================================== */ .category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--color-border); } .category-tile { position: relative; background: var(--color-bg); aspect-ratio: 2 / 3; overflow: hidden; } .category-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; } .category-tile:hover img { transform: scale(1.05); } .category-tile__label { position: absolute; left: 16px; bottom: 16px; font-size: 13px; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-strong); background: rgba(255, 255, 255, 0.85); padding: 8px 14px; } @media (max-width: 900px) { .category-grid { grid-template-columns: repeat(2, 1fr); } } /* ========================================================================== Section heading ========================================================================== */ .section { padding-block: 64px; } .section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 32px; } .section__head h2 { margin: 0; } .section__head a { font-size: 12px; text-transform: uppercase; letter-spacing: var(--tracking-wide); border-bottom: 1px solid var(--color-text-strong); padding-bottom: 2px; } /* ========================================================================== WooCommerce — product grid / cards ========================================================================== */ ul.products { display: grid !important; grid-template-columns: repeat(4, 1fr); /* Écart resserré : l'horizontal peut être très faible, le vertical doit garder de quoi séparer le prix d'une carte de l'image de la suivante. */ gap: 12px 6px; margin: 0 !important; padding: 0 !important; } ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; list-style: none; /* Colonne flex : le bouton reste aligné en bas quel que soit le nombre de lignes du titre. */ display: flex; flex-direction: column; } ul.products li.product > a:first-of-type { flex: 1; } /* Galerie de carte produit — image principale + jusqu'à 2 images secondaires. Desktop : la 2e image apparaît au survol. Mobile : carrousel swipable (jusqu'à 3 images), même mécanique que la galerie de fiche produit. */ .boizar-loop-gallery { position: relative; aspect-ratio: 2 / 3; overflow: hidden; border-radius: var(--radius); margin-bottom: 12px; background: var(--color-bg-alt); } .boizar-loop-gallery__img { width: 100%; height: 100%; object-fit: cover; } @media (min-width: 701px) { .boizar-loop-gallery__img { position: absolute; inset: 0; opacity: 0; transition: opacity 0.25s ease; } .boizar-loop-gallery__img:first-child { opacity: 1; } /* Au-delà de 2 images, les suivantes n'alimentent que le carrousel mobile. */ .boizar-loop-gallery__img:nth-child(n + 3) { display: none; } li.product:hover .boizar-loop-gallery__img:first-child { opacity: 0; } li.product:hover .boizar-loop-gallery__img:nth-child(2) { opacity: 1; } } @media (max-width: 700px) { .boizar-loop-gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .boizar-loop-gallery::-webkit-scrollbar { display: none; } .boizar-loop-gallery__img { flex: 0 0 100%; scroll-snap-align: start; } } ul.products li.product .woocommerce-loop-product__title { font-size: 13px; font-weight: 400; letter-spacing: normal; color: var(--color-text); margin: 0 0 4px; line-height: 1.35; } ul.products li.product .price { display: flex; flex-direction: column; font-size: 13px; font-weight: 400; color: var(--color-text-strong); } ul.products li.product .price del { display: block; order: 1; color: var(--color-muted); text-decoration: line-through; opacity: 1; margin-right: 0; font-size: 12px; } ul.products li.product .price ins { display: block; order: 2; text-decoration: none; font-weight: 600; color: var(--color-text-strong); } /* Badge "Special Price" (voir woocommerce_sale_flash, functions.php) — même couleur et forme carrée que sur la fiche produit (.boizar-special-price plus bas), mais flottant en haut à gauche de l'image comme l'était l'ancien badge "Promo". */ ul.products li.product .onsale { position: absolute; top: 12px; left: 12px; background: #d18a6b; color: var(--color-text-strong); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-wide); border-radius: 0; min-height: auto; min-width: auto; line-height: 1.4; padding: 4px 8px; } ul.products li.product { position: relative; } span.onsale { top: 12px; left: 12px; } /* Fiche produit : badge "Special Price" au-dessus du titre, repris de Sklum (même couleur terracotta, même carré sans arrondi — voir woocommerce_show_product_sale_flash, functions.php). En position normale dans le fil du résumé, pas flottant : pas besoin de position/top/left. */ .boizar-special-price { display: inline-block; /* .summary est en display:flex sur mobile (voir plus bas, pour faire remonter les variations au-dessus du titre) : un enfant flex direct s'étire par défaut sur l'axe transversal, donc en largeur ici — sans quoi ce badge, pensé pour ne tenir que la taille de son texte, remplirait toute la largeur. Ciblé sur ce seul badge plutôt que sur tout .summary, pour ne pas affecter les autres enfants (bouton d'achat, champs...) qui doivent au contraire garder leur pleine largeur. */ align-self: flex-start; margin: 0 0 10px; padding: 4px 8px; background: #d18a6b; color: var(--color-text-strong); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-wide); border-radius: 0; min-height: auto; min-width: auto; line-height: 1.4; } /* ========================================================================== Favoris — bouton signet (carte produit, fiche produit) ========================================================================== */ .wishlist-toggle { background: none; border: none; padding: 0; cursor: pointer; color: var(--color-text-strong); display: inline-flex; align-items: center; gap: 6px; } .wishlist-toggle .icon { display: block; } /* Vide par défaut (voir boizar_icon), remplie une fois le produit enregistré. */ .wishlist-toggle svg { fill: none; transition: fill 150ms ease; } .wishlist-toggle.is-active svg { fill: currentColor; } /* Carte produit : signet flottant en haut à droite de l'image, symétrique du badge promo (span.onsale, en haut à gauche). ul.products li.product est déjà en position: relative (ligne ~523). */ .wishlist-toggle--card { position: absolute; top: 12px; right: 12px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; justify-content: center; background: transparent; } .wishlist-toggle--card:hover { background: rgba(255, 255, 255, 0.15); } /* Fiche produit : icône seule, flottante à droite du titre — jamais de texte, sur ordinateur comme sur mobile. Ancrée sur .boizar-title-row (voir woocommerce/single-product/title.php), pas sur .summary : ça la fait suivre le titre partout où il se trouve, y compris quand .summary devient flex sur mobile et réordonne ses enfants (les variations passent devant le titre — voir @media max-width:900px plus bas). */ .boizar-title-row { position: relative; } .wishlist-toggle--single { position: absolute; top: 0; right: 0; width: 36px; height: 36px; justify-content: center; color: var(--color-muted); } .wishlist-toggle--single:hover { color: var(--color-text-strong); } .wishlist-toggle--single.is-active { color: var(--color-text-strong); } .wishlist-toggle--single svg { width: 24px; height: 24px; } /* Espace réservé à droite pour que le titre ne passe jamais sous l'icône. */ .woocommerce div.product .product_title { padding-right: 44px; } /* ========================================================================== Page /favoris/ ========================================================================== */ .wishlist-page__title { text-transform: none; font-weight: 500; letter-spacing: normal; font-size: 28px; margin: 0 0 32px; } .wishlist-empty { color: var(--color-muted); } /* ========================================================================== Catégorie — pastilles de sous-catégories + barre outils (tri / compteur) ========================================================================== */ .woocommerce-products-header__title.page-title { text-transform: none; font-weight: 500; letter-spacing: normal; font-size: 28px; margin: 0; } /* Titre de page + bouton de tri sur une même ligne (functions.php). */ .shop-header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .subcat-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 40px; } .subcat-pill { font-size: 12px; text-transform: uppercase; letter-spacing: var(--tracking-wide); padding: 8px 16px; border: 1px solid var(--color-border); color: var(--color-text); white-space: nowrap; } .subcat-pill:hover, .subcat-pill--active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); } /* La grille étant en pleine largeur, on augmente le nombre de colonnes sur les grands écrans plutôt que d'étirer quatre cartes démesurées. */ @media (min-width: 1600px) { ul.products { grid-template-columns: repeat(5, 1fr); } } @media (min-width: 2000px) { ul.products { grid-template-columns: repeat(6, 1fr); } } @media (max-width: 1100px) { ul.products { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 700px) { ul.products { grid-template-columns: repeat(2, 1fr); gap: 10px 8px; } } /* Boutique / catégorie : marges latérales plus resserrées que le reste du site pour rapprocher la grille produits des bords. */ .post-type-archive-product .container, .tax-product_cat .container, .tax-product_tag .container { --gutter: clamp(8px, 1.5vw, 14px); } /* Sur mobile, le titre de la page catégorie/boutique doit rester proche du menu : on réduit uniquement le padding du haut (le bas reste à 64px). */ @media (max-width: 700px) { .post-type-archive-product .container.section, .tax-product_cat .container.section, .tax-product_tag .container.section { padding-top: 20px; } } /* ========================================================================== Single product — galerie / infos deux colonnes, swatches, onglets ========================================================================== */ /* En version web, la fiche produit garde le padding générique de .section (64px) hérité de woocommerce.php : trop d'écart avec le header, qui n'a rien à faire là puisque la galerie n'a pas besoin de cette respiration. Le mobile a déjà son propre 0 (ligne ~1213, header en surimpression). */ @media (min-width: 901px) { body.single-product .container.section { padding-top: 24px; } /* Fil d'Ariane au-dessus de la galerie, comme sur Sklum. */ body.single-product .woocommerce-breadcrumb { margin-bottom: 16px; } } /* Absent en mobile (comme sur Sklum, u-hidden@sm--down) : la fiche produit y est en immersion, header transparent posé sur l'image (voir .has-overlay-header plus bas) — un fil d'Ariane texte n'a pas sa place dans cette mise en page. */ @media (max-width: 900px) { body.single-product .woocommerce-breadcrumb { display: none; } } /* Bloc haut de fiche : galerie + colonne d'achat. Les onglets et les produits liés restent en dehors, en pleine largeur. Répartition reprise de Sklum (bureau Serpi) : les deux colonnes sont en flex:1 1 auto, mais chacune plafonnée à sa propre largeur maximale — la galerie ne dépasse jamais 60% du bloc, la colonne d'achat jamais 600px (au-delà, une colonne de texte devient illisible) — c'est ce double plafond, pas un simple partage 50/50, qui donne la proportion ~60/40 vue chez eux. */ .woocommerce div.product .product-main { display: flex; /* Même distance qu'à droite de la colonne d'achat (marge de page, --gutter) — pas un espacement propre à ce bloc. */ gap: var(--gutter); align-items: start; } .woocommerce div.product .product-main > .boizar-gallery { flex: 1 1 auto; max-width: 60%; } .woocommerce div.product .product-main > .summary { flex: 1 1 auto; max-width: 600px; } /* Galerie produit — grille 2 colonnes sur desktop, carrousel sur mobile. Toutes les images sont en portrait 2:3. */ .boizar-gallery { opacity: 1 !important; position: relative; /* Ancre le badge "Promo" (span.onsale, plus bas). */ } /* Grille à 2 colonnes régulières : chaque image occupe toujours la moitié de la largeur. Remplace le motif alterné 2-3 précédent, dont les groupes de 5 images ne se complétaient jamais pour une galerie de variation (2, 3, 4... photos selon ce que l'administrateur a renseigné) — la dernière rangée incomplète laissait alors un vide sur la largeur restante. */ .boizar-gallery__track { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; } .boizar-gallery .woocommerce-product-gallery__image, .boizar-gallery .woocommerce-product-gallery__image--placeholder { margin: 0; overflow: hidden; background: var(--color-bg-alt); } .boizar-gallery .woocommerce-product-gallery__image a { display: block; } .boizar-gallery .woocommerce-product-gallery__image img, .boizar-gallery .woocommerce-product-gallery__image--placeholder img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--radius); } /* Une image seule occupe toute la largeur. */ .boizar-gallery .woocommerce-product-gallery__image:only-child { grid-column: 1 / -1; } /* Bouton « Voir plus de photos » — masqué par défaut, activé en desktop ci-dessous. */ .boizar-gallery__more { display: none; } @media (min-width: 901px) { /* Seules les 5 premières images (un cycle complet du motif 2+3) sont visibles au chargement ; le bouton révèle le reste. */ .boizar-gallery:not(.is-expanded) .woocommerce-product-gallery__image:nth-child(n + 6) { display: none; } .boizar-gallery__more { display: block; width: 100%; margin-top: 3px; padding: 14px; border: 1px solid var(--color-border); background: none; font-family: var(--font-base); font-size: 12px; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-strong); cursor: pointer; } .boizar-gallery__more:hover { background: var(--color-bg-alt); } .boizar-gallery.is-expanded .boizar-gallery__more { display: none; } } /* La galerie défile normalement ; c'est la colonne d'achat qui reste visible. */ .woocommerce div.product div.summary { position: sticky; top: 24px; } .woocommerce div.product .woocommerce-tabs { margin-top: 64px; } .woocommerce div.product .related, .woocommerce div.product .upsells { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--color-border); } .woocommerce div.product .related > h2, .woocommerce div.product .upsells > h2 { font-size: 18px; margin-bottom: 28px; } .woocommerce div.product .product-collection { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--color-muted); margin-bottom: 6px; } .woocommerce div.product .product_title { text-transform: none; letter-spacing: normal; font-weight: 400; font-size: 26px; line-height: 1.25; margin-bottom: 12px; } .woocommerce div.product .product-ref { font-size: 11px; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-muted); margin: -12px 0 18px; } .woocommerce div.product .product-subtitle { font-size: 15px; font-weight: 300; color: var(--color-muted); margin: -8px 0 12px; line-height: 1.5; } .woocommerce div.product .product-delivery { font-size: 13px; color: var(--color-text); padding: 12px 14px; background: var(--color-bg-alt); margin-bottom: 20px; } /* Aucun délai renseigné : on n'affiche pas d'encart vide. */ .woocommerce div.product .product-delivery.is-empty { display: none; } /* ========================================================================== Onglets produit — liste de lignes + panneau latéral ========================================================================== */ .product-tabs { margin-top: 24px; border-top: 1px solid var(--color-border); } .product-tab { border-bottom: 1px solid var(--color-border); } .product-tab__trigger { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 16px 0; background: none; border: none; cursor: pointer; font-family: var(--font-base); font-size: 13px; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-strong); text-align: left; } .product-tab__trigger:hover { color: var(--color-muted); } /* Casse normale (Description, Dimensions...) plutôt que MAJUSCULES, contrairement au reste du texte des déclencheurs de tiroir. */ .product-tab__label { text-transform: none; } .product-tab__chevron { font-size: 20px; line-height: 1; color: var(--color-muted); } /* Surcouche partagée par tous les panneaux. */ .tab-drawer-overlay { position: fixed; inset: 0; background: rgba(25, 25, 25, 0.4); opacity: 0; visibility: hidden; transition: opacity var(--transition); z-index: 110; } .tab-drawer-overlay.is-open { opacity: 1; visibility: visible; } .tab-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 560px; display: flex; flex-direction: column; background: var(--color-bg); transform: translateX(100%); visibility: hidden; transition: transform 300ms ease, visibility 0s linear 300ms; z-index: 120; box-shadow: -2px 0 24px rgba(0, 0, 0, 0.08); } .tab-drawer.is-open { transform: translateX(0); visibility: visible; transition: transform 300ms ease, visibility 0s; } .tab-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--color-border); flex: 0 0 auto; } .tab-drawer__title { margin: 0; font-size: 15px; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-strong); } .tab-drawer__close { background: none; border: none; padding: 4px; font-size: 26px; line-height: 1; color: var(--color-text-strong); cursor: pointer; } .tab-drawer__close:hover { color: var(--color-muted); } .tab-drawer__body { padding: 24px; overflow-y: auto; flex: 1 1 auto; font-size: 15px; font-weight: 300; line-height: 1.7; } .tab-drawer__body img { margin: 16px 0; border-radius: var(--radius); } .tab-drawer__body :is(h2, h3, h4) { font-size: 14px; margin-top: 24px; } .tab-drawer__body ul { list-style: disc; padding-left: 20px; } .tab-drawer__body ul li { margin-bottom: 6px; } .tab-drawer__body table { width: 100%; border-collapse: collapse; } .tab-drawer__body th, .tab-drawer__body td { padding: 10px 0; border-bottom: 1px solid var(--color-border); text-align: left; font-weight: 400; } /* Mobile : le panneau monte depuis le bas. */ @media (max-width: 900px) { .tab-drawer { top: auto; left: 0; right: 0; max-width: 100%; height: 85vh; transform: translateY(100%); box-shadow: 0 -2px 24px rgba(0, 0, 0, 0.12); } .tab-drawer.is-open { transform: translateY(0); } } /* Panneau « Avis » : modal centrée sur ordinateur (au lieu du tiroir latéral des autres panneaux) — voir boizar_render_reviews_drawer, inc/product-tabs.php, et woocommerce/single-product/rating.php pour son déclencheur. Réservé au-delà de 900px : en dessous, .tab-drawer--modal garde le comportement « tiroir depuis le bas » générique ci-dessus, sans quoi cette règle (même spécificité, mais plus tardive dans la feuille de style) l'emporterait aussi sur mobile. */ @media (min-width: 901px) { .tab-drawer--modal { top: 50%; left: 50%; right: auto; bottom: auto; width: 90%; max-width: 640px; max-height: 85vh; border-radius: var(--radius); transform: translate(-50%, -50%) scale(0.96); transition: transform 300ms ease, visibility 0s linear 300ms, opacity 300ms ease; opacity: 0; } .tab-drawer--modal.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; transition: transform 300ms ease, visibility 0s, opacity 300ms ease; } } /* Étoiles de notation (avis) : déjà stylées en Unicode dans assets/css/woocommerce.css (.star-rating), pas besoin d'y retoucher ici. */ /* Prix et bulle de note sur la même ligne — voir boizar_render_price_and_rating(), functions.php. */ .boizar-price-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 12px; } .woocommerce div.product .boizar-price-row p.price, .woocommerce div.product .boizar-price-row span.price { margin: 0; } /* Bulle de note, tout à droite du prix — voir boizar_render_rating_trigger, inc/product-tabs.php, qui remplace le widget natif WooCommerce. */ .boizar-rating-trigger { display: inline-flex; align-items: center; gap: 8px; width: auto; background: none; border: none; padding: 0; margin: 0; cursor: pointer; font-family: var(--font-base); font-size: 13px; text-transform: none; letter-spacing: normal; color: var(--color-muted); } .boizar-rating-trigger:hover { color: var(--color-text-strong); } .boizar-rating-trigger .star-rating { margin: 0; } .boizar-rating-trigger__average { font-weight: 600; color: var(--color-text-strong); } .boizar-rating-trigger__count { text-decoration: underline; } /* ========================================================================== Panneau « Avis » — liste des avis + formulaire (générés par WooCommerce). ========================================================================== */ /* Récapitulatif : note globale sur la même ligne que la croix de fermeture (.tab-drawer__head est déjà en flex/space-between), mention de modération juste en dessous, en première ligne du panneau — voir boizar_render_reviews_drawer, inc/product-tabs.php. */ .boizar-reviews-summary__disclaimer { font-size: 12px; color: var(--color-muted); margin: 0 0 20px; } .boizar-reviews-summary__score { display: flex; align-items: center; gap: 8px; } .boizar-reviews-summary__average { font-size: 20px; font-weight: 600; color: var(--color-text-strong); } .boizar-reviews-summary__count { font-size: 13px; color: var(--color-muted); } .tab-drawer__body--reviews .woocommerce-Reviews-title, .tab-drawer__body--reviews #reply-title { font-size: 14px; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-strong); margin: 0 0 20px; } .tab-drawer__body--reviews #reply-title small a { color: var(--color-muted); } .tab-drawer__body--reviews .commentlist { list-style: none; margin: 0 0 32px; padding: 0; } .tab-drawer__body--reviews .commentlist > li + li { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--color-border); } .tab-drawer__body--reviews .comment_container { display: flex; gap: 14px; } /* Pas de photo de profil — voir woocommerce/single-product/review-meta.php pour le reste des métadonnées (achat vérifié, ville/pays). */ .tab-drawer__body--reviews .comment_container img.avatar { display: none; } .tab-drawer__body--reviews .comment-text { flex: 1 1 auto; min-width: 0; } .tab-drawer__body--reviews .comment-text .star-rating { margin-bottom: 8px; } .tab-drawer__body--reviews .comment-text .meta { font-size: 12px; color: var(--color-muted); margin: 0 0 8px; } .tab-drawer__body--reviews .woocommerce-review__author { color: var(--color-text-strong); font-weight: 500; } .boizar-review-verified { display: inline-flex; align-items: center; gap: 4px; color: #1dd15e; font-style: normal; font-size: 12px; font-weight: 500; } .boizar-review-verified__badge { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: #1dd15e; color: #fff; font-size: 9px; line-height: 1; flex: 0 0 auto; } .boizar-review-location { color: var(--color-muted); } .tab-drawer__body--reviews .description p { margin: 0; } .tab-drawer__body--reviews .woocommerce-noreviews { font-size: 14px; color: var(--color-muted); } /* Formulaire d'avis */ .tab-drawer__body--reviews #respond .comment-notes, .tab-drawer__body--reviews #respond .comment-form-rating label, .tab-drawer__body--reviews #respond p.comment-form-comment label, .tab-drawer__body--reviews #respond p.comment-form-author label, .tab-drawer__body--reviews #respond p.comment-form-email label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-muted); margin-bottom: 6px; } .tab-drawer__body--reviews #respond .comment-notes { text-transform: none; letter-spacing: normal; margin-bottom: 16px; } .tab-drawer__body--reviews #respond p { margin: 0 0 16px; } .tab-drawer__body--reviews #respond select, .tab-drawer__body--reviews #respond input[type="text"], .tab-drawer__body--reviews #respond input[type="email"], .tab-drawer__body--reviews #respond textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--color-border); background: var(--color-bg); font-family: var(--font-base); font-size: 14px; } .tab-drawer__body--reviews #respond textarea { min-height: 120px; } /* Widget d'étoiles cliquables du formulaire (le