/* Theme Name: Storefront Child Theme URI: https://adaptateur-silencieux.fr Description: Thème enfant de Storefront pour Adaptateur & Silencieux. Regroupe toutes les personnalisations de présentation (CSS, templates, hooks d'affichage) afin qu'elles survivent aux mises à jour de Storefront. Author: Adaptateur & Silencieux Template: storefront Version: 1.0.0 Text Domain: storefront-child */ /* ===================================================================== CSS ADDITIONNEL — migré depuis le Personnalisateur le 2026-06-28 (anciennement post custom_css "storefront"). Désormais versionné ici. Archive brute : docs/customizer-additional-css-backup-2026-06-28.css ===================================================================== */ .main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a { padding: 1em 0.8em 1em 0.8em; } .secondary-navigation { display: block; } .col-full { max-width: 72em; } .page-template-template-homepage .type-page { background-color :#ddd; } .woocommerce-tabs ul.tabs li a { padding-left: 5px; margin-left: 5px; } /* ===================================================================== ONGLETS PRODUIT — barre horizontale en haut + contenu pleine largeur (2026-06-29). Remplace la disposition d'origine « colonne d'onglets à gauche / contenu à droite » de Storefront. Les onglets s'alignent en ligne dans la bande du haut ; le contenu (Description, etc.) passe en dessous sur toute la largeur. Le chevron de l'onglet actif est orienté vers le bas (voir plus bas, règle li.active::after). ===================================================================== */ /* NB : woocommerce.css / icons.css de Storefront se chargent APRÈS ce fichier. De plus la règle d'origine `.storefront-full-width-content .woocommerce-tabs ul.tabs` a la même spécificité que `.single-product …` ET les deux classes sont sur le MÊME (donc un sélecteur descendant `.single-product .storefront-full-width-content` ne matche pas). On préfixe donc par `body.single-product` (classe composée) pour primer à coup sûr. */ /* Storefront met `.woocommerce-tabs` ET `.single-product div.product` en overflow:hidden. Le 1er onglet est collé au bord gauche du conteneur, donc ces deux clips rognaient le côté gauche de son cadre de focus. On les repasse en visible : plus aucun flottant à contenir ici (les onglets ont clear:both), la hauteur du produit est inchangée — vérifié sur fiche simple ET configurateur (description déportée). */ body.single-product .woocommerce-tabs { overflow: visible; } body.single-product div.product { overflow: visible; } body.single-product .woocommerce-tabs ul.tabs { width: 100%; float: none; margin-right: 0; padding-left: 0; display: flex; flex-wrap: wrap; border-bottom: 2px solid rgba(0, 0, 0, .08); } /* Chaque onglet : en ligne, sans la bordure basse pleine largeur d'origine. */ body.single-product .woocommerce-tabs ul.tabs li { display: block; margin: 0 1.5em 0 0; border-bottom: none; } /* Place pour le chevron à droite du libellé de l'onglet actif. `position: relative` = repère pour le cadre de focus ::before ci-dessous. */ body.single-product .woocommerce-tabs ul.tabs li a { padding: 1em 1.5em 1em 0; position: relative; } /* Cadre bleu au clic : on remplace l'outline d'origine (dont l'`outline-offset` s'applique uniformément aux 4 côtés → débordait en haut/bas autant qu'il respirait à gauche/droite) par un rectangle maîtrisé. On règle alors chaque côté séparément : écart à gauche/droite, mais serré en haut/bas pour rester dans la hauteur de la barre d'onglets. */ body.single-product .woocommerce-tabs ul.tabs li a:focus { outline: none; } body.single-product .woocommerce-tabs ul.tabs li a:focus::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: -6px; right: -6px; border: 2px solid #3d9cd2; border-radius: 2px; pointer-events: none; } /* Le panneau de contenu passe sous les onglets, sur toute la largeur. */ body.single-product .woocommerce-tabs .panel { width: 100%; float: none; clear: both; margin-right: 0; } .woocommerce-LoopProduct-link.woocommerce-loop-product__link { margin-left: 5px; } .site-header { background-color: #ffffff !important; } #menu-item-wpml-ls-41-fr { margin-bottom: 15px; } .secondary-navigation .menu { margin-top:15px; } .secondary-navigation .menu a { padding:1em 1em 1em 1em; } .woocommerce.columns-2 { margin-top: 3em; } .storefront-secondary-navigation.woocommerce-active .site-header .secondary-navigation { margin-right:0; } .site-header .site-branding img { max-width:350px; width:350px; } .storefront-secondary-navigation.woocommerce-active .site-header .secondary-navigation { float:right; } .storefront-full-width-content .woocommerce-products-header { padding-bottom: 2em; } .site-header-cart .cart-contents { padding: 1em 0; } .wpml-ls-menu-item .wpml-ls-flag{ margin-right: 5px; } .secondary-navigation .menu a { font-size: 16px; } #tab-description { text-align: justify; } .woocommerce-product-details__short-description > h2 { font-size: 1.4em; text-align: justify; } .woocommerce-tabs .panel h6:first-of-type { font-size: 1.618em; margin-bottom: 1em; } #tab-description > h3 { color: #3d9cd2; font-weight: 400; } .single-product div.product p.price { font-size: 2em; margin: 1em 0; } .woocommerce-variation-description { background-color: #c5ffc5; border-radius: 5px; } .woocommerce-variation-description p { padding: 10px; } blockquote+h2, blockquote+h3, blockquote+h4, blockquote+header h2, form+h2, form+h3, form+h4, form+header h2, ol+h2, ol+h3, ol+h4, ol+header h2, p+h2, p+h3, p+h4, p+header h2, table+h2, table+h3, table+h4, table+header h2, ul+h2, ul+h3, ul+h4, ul+header h2 { margin-top: 1.0em; } .page-template-template-homepage .entry-header h1 { font-size: 3em; } #post-1566 .entry-content h2 { font-size: 1.5em; text-align: justify; } #post-1569 .entry-content h2 { font-size: 1.5em; text-align: justify; } #post-1569 .entry-content .woocommerce-loop-product__title { text-align:center; font-size: 1rem; } #post-1566 .entry-content .woocommerce-loop-product__title { text-align:center; font-size: 1rem; } h1 { font-weight: 400; } .page-template-template-homepage .entry-content, .page-template-template-homepage .entry-header { max-width: 90%; } .storefront-secondary-navigation.woocommerce-active .site-header .site-branding { width: 35%; } .secondary-navigation ul { list-style: none; float: right; } .product.wcml-dropdown-click, .product.wcml-dropdown-click li, .product.wcml-dropdown-click li li { float: right; position: relative; } .wcml-dropdown-click { width: 6em; } .wcml-dropdown-click a{ width:135px; } .storefront-secondary-navigation.woocommerce-active .site-header .secondary-navigation { width: 30%; } button.menu-toggle { margin-top: 25px; } .storefront-breadcrumb { margin: 0 0 1em; } @media (max-width: 450px) { .storefront-full-width-content .woocommerce-tabs ul.tabs { width: 99%; } .storefront-full-width-content .woocommerce-tabs .panel { width: 100%; } .storefront-secondary-navigation.woocommerce-active .site-header .site-branding { width:45%; margin-left: 90px; position: absolute; } .site-header { padding-bottom:0; padding-top :1em; } .site-header .site-branding img { max-width:165px; } .secondary-navigation { text-align: right; display: block; } .site-main { margin-left: 1.4em; margin-right: 1.4em; } .footer-widgets { margin-left: 1.4em; margin-right: 1.4em; } .secondary-navigation .menu a { padding:0em 0em 0em 1em; } .secondary-navigation ul { margin: 0 0 2em; margin-top : 15px; } #menu-item-wpml-ls-41-fr { margin-bottom: 5px; } #menu-menu-boutique-haut { margin-top:0px; } #menu-menu-boutique-haut-anglais { margin-top:0px; } .secondary-navigation ul { margin: 0 0 0.5em; } .storefront-secondary-navigation.woocommerce-active .site-header .secondary-navigation { width: 40%; margin-left: 60%; float:none; } .storefront-secondary-navigation.woocommerce-active .site-header .site-branding { width: 45%; } button.menu-toggle { margin-top: 5px; margin-right: 0; float: left; } } @media (max-width: 568px) { .col-full { margin-left: 0; margin-right: 0; padding: 0; } } @media (min-device-width: 451px) and (max-device-width: 767px) { #menu-item-wpml-ls-41-fr { margin-bottom: 15px; } #menu-menu-boutique-haut { margin-top:10px; } .secondary-navigation { text-align: right; display: block; } .woocommerce-product-search { margin-bottom: 20px; } .storefront-secondary-navigation.woocommerce-active .site-header .site-branding { width: 35%; } .storefront-secondary-navigation.woocommerce-active .site-header .secondary-navigation { width: 40%; margin-left: 60%; } .storefront-full-width-content .woocommerce-tabs ul.tabs { width: 99%; } .storefront-full-width-content .woocommerce-tabs .panel { width: 100%; } } .wcml-dropdown-click .wcml-cs-submenu li { margin: -1px !important; border-width: 1px !important; } ul.products li.product img, ul.products .wc-block-grid__product img, .wc-block-grid__products li.product img, .wc-block-grid__products .wc-block-grid__product img { margin : 0 auto 1.5em; background-color: #ddd; } .footer-widgets { padding-top:1em; } .site-info{ padding-top:2em; } h1, h2, h3, h4, h5, h6, .wc-block-grid__product-title{ color:#444; } .page-template-template-homepage.has-post-thumbnail .type-page.has-post-thumbnail{ padding-top:3em; } .wmc-currency-wrapper { text-align:center; } /* Chevron de l'onglet actif orienté vers le BAS (le contenu est en dessous) au lieu de vers la droite. \f078 = chevron-down (Font Awesome 5 Free). */ .single-product .woocommerce-tabs ul.tabs li.active::after { content: "\f078"; right: 0; top: 50%; transform: translateY(-50%); } .woocommerce-variation-price { font-size: 2em; } .single-product div.product .woocommerce-product-gallery .flex-viewport { background-color:#ddd; } .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img { background-color:#ddd; } /* ===================================================================== HEADER — ajustements thème enfant (placés APRÈS le CSS migré pour primer) Recherche élargie/flexible + centrée, drapeaux SVG nets et alignés. ===================================================================== */ /* Drapeaux WPML en SVG vectoriel (nets à n'importe quelle taille). `content` remplace l'image PNG d'origine sur la balise . */ .site-header .wpml-ls-item-fr img.wpml-ls-flag { content: url(assets/flags/fr.svg); } .site-header .wpml-ls-item-en img.wpml-ls-flag { content: url(assets/flags/gb.svg); } /* Taille de base des drapeaux (sinon le SVG sans dimension s'affiche énorme). Surchargée à 36×24 sur desktop plus bas. */ .site-header .wpml-ls-flag { width: 24px; height: 16px; vertical-align: middle; } /* Desktop : rangée du haut du header en flex (logo gauche / recherche + drapeaux droite), alignés verticalement. Évite le débordement des floats quand on élargit la recherche. */ @media (min-width: 769px) { /* Drapeaux de langue (WPML) : deux fois plus grands (desktop) */ .site-header .wpml-ls-flag { width: 36px; height: 24px; vertical-align: middle; } /* Centrage vertical propre des drapeaux (annule les marges du CSS migré) */ .site-header .secondary-navigation .menu { margin-top: 0; } .site-header #menu-item-wpml-ls-41-fr { margin-bottom: 0; } .site-header > .col-full { display: flex; align-items: center; flex-wrap: wrap; gap: 1.25rem; } .site-header > .col-full .site-branding { order: 1; flex: 0 0 auto; margin-bottom: 0; } .site-header > .col-full .site-search { order: 2; flex: 1 1 260px; /* remplit l'espace entre logo et drapeaux */ max-width: 460px; float: none; margin: 0; } .site-header > .col-full .secondary-navigation { order: 3; flex: 0 0 auto; float: none; margin: 0; } .site-header .site-search .widget_product_search, .site-header .site-search form, .site-header .site-search .woocommerce-product-search { width: 100%; } .site-header .site-search .search-field { width: 100%; box-sizing: border-box; } } /* ===================================================================== HEADER MOBILE (≤768px) Rangée 1 : logo à gauche + sélecteur de langue à droite. Rangée 2 : bouton « Menu » sur toute la largeur, menu déplié propre. Remplace la mise en page mobile historique (du CSS migré). ===================================================================== */ @media (max-width: 768px) { /* --- Rangée 1 : logo + langues sur une ligne --- */ .storefront-secondary-navigation.woocommerce-active .site-header > .col-full { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: .75em; } .storefront-secondary-navigation.woocommerce-active .site-header .site-branding { position: static; float: none; width: auto; max-width: 62%; margin: 0; } .site-header .site-branding img { max-width: 250px; /* logo plus grand : ~même hauteur que le bloc langues (plafonné par .site-branding max-width 62%) */ width: auto; } .storefront-secondary-navigation.woocommerce-active .site-header .secondary-navigation { position: static; float: none; width: auto; margin: 0; text-align: right; } .site-header .secondary-navigation ul, .site-header .secondary-navigation .menu { float: none; margin: 0; } .site-header .secondary-navigation .menu li { margin: 0 0 4px; } .site-header .secondary-navigation .menu a { padding: 2px 0; } /* --- Rangée 2 : bouton Menu ~70% centré, avec marge dessous --- */ .site-header .storefront-primary-navigation { width: 70%; margin: .6em auto 1.5em; clear: both; } .main-navigation button.menu-toggle { display: block; width: 100% !important; max-width: none !important; float: none; margin: 0; text-align: center; } /* --- Menu déplié : liste pleine largeur, items alignés --- */ .main-navigation ul.menu, .main-navigation ul.nav-menu { width: 100%; margin: 0; } .main-navigation ul.menu li, .main-navigation ul.nav-menu li { width: 100%; float: none; text-align: left; } .main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a { padding: .85em 1em; } } /* ===================================================================== Mise en page des fiches "configurateur" (plugin Cascade variable product). Desktop : description sous l'image (colonne gauche), options remontées. Mobile : ordre inchangé (description rendue dans le résumé). Déclenchée par la classe body `cvp-active` posée par le plugin. ===================================================================== */ .cvp-active .cvp-desc--desktop .woocommerce-product-details__short-description, .cvp-active .cvp-desc--mobile .woocommerce-product-details__short-description { margin-bottom: 0; } @media (min-width: 769px) { .cvp-active .cvp-desc--mobile { display: none; } .cvp-active .cvp-desc--desktop { float: left; clear: left; width: 39.13%; /* = largeur de la galerie Storefront (calée sous l'image) */ box-sizing: border-box; margin: 1.4em 0 0; } } @media (max-width: 768px) { .cvp-active .cvp-desc--desktop { display: none; } }