/* Theme Name: Hello Elementor Child Theme URI: https://github.com/elementor/hello-theme-child/ Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team Author: Elementor Team Author URI: https://elementor.com/ Template: hello-elementor Version: 2.0.0 Text Domain: hello-elementor-child License: GNU General Public License v3 or later. License URI: https://www.gnu.org/licenses/gpl-3.0.html Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready */ /* ============================================================================ GOLDEN LED STUDIO - DEBUT DU BLOC GERE Le TROISIEME FORMAT du golden, celui qui pose la base typographique du site. Source de verite : golden/GOLDEN.md, sections 1, 2 et 5. Ce fichier en est une traduction, et `tests/test_golden_formats.py` refuse toute divergence. NE PAS EDITER A LA MAIN dans le theme enfant : editer ce fichier-ci, versionne, puis redeposer. Le bloc est delimite par ses deux marqueurs, donc remplacable d'un bout a l'autre sans toucher au reste de la feuille. OU IL VIT : dans `style.css` du theme enfant `hello-theme-child-master`, juste apres l'en-tete du theme et avant le CSS additionnel migre le 2026-07-02. POURQUOI CE FORMAT EXISTE, ET POURQUOI ICI PLUTOT QU'AILLEURS (mesure du 2026-09-02 sur le socle neuf, pas heritee de l'ancien). Sur les 148 adresses, la base typographique n'est declaree que par UNE feuille : `reset.css` du theme parent Hello Elementor, en position 12 des 58 noeuds de style du document. Elle pose `body` en police systeme, 1rem, interligne 1.5, couleur #333, et les six titres en graisse 500, interligne 1.2, tailles en rem. Rien d'autre ne parle : `theme.css` du parent ne declare aucun des sept selecteurs, le `style.css` du theme enfant non plus, et le bloc `global-styles-inline-css` produit par theme.json - 11 154 octets - n'y pose aucune regle typographique ni aucune variable de famille. Deux consequences, et c'est ce qui a decide de l'emplacement : - deposer notre `theme.json` NE SUFFIRAIT PAS. Sa feuille sort en position 3, donc AVANT `reset.css` : a specificite egale, c'est la derniere declaree qui gagne, et ce serait le reset. C'est le constat G11, re-mesure sur le socle Hello Elementor apres la bascule du 31/08 ; - la feuille du theme enfant sort en position 41, apres le reset ET apres les feuilles Elementor de page. C'est le seul endroit du socle d'ou une regle a specificite (0,0,1) l'emporte. CE QUE CE BLOC NE FAIT PAS, dit plutot que tu : - il ne charge aucune police. Jost est chargee par Elementor (`elementor-gf-jost`), Manrope ne l'est PAS aujourd'hui - mesure le 2026-09-02, elle est absente du document. Tant que le kit Elementor n'est pas importe, `Manrope` retombe sur son repli sans-serif. LE KIT SE DEPOSE DONC AVANT CETTE FEUILLE, pas apres ; - il ne touche ni les liens, ni les boutons, ni les legendes : ceux-la sont des composants, stylés par Elementor sur la quasi-totalite du site, et les reprendre ici toucherait un rendu qu'aucune mesure ne couvre. Ils restent au kit (widgets) et a theme.json (blocs) ; - il ne surcharge jamais un widget Elementor : ses selecteurs sont a (0,1,1) ou plus, donc ils gagnent sur les notres. C'est voulu - la ou Elementor decide, il decide deja aujourd'hui. ============================================================================ */ /* Le corps. GOLDEN.md § 2 (corps = 16 px), § 5 (Jost, interligne de prose 1,7), § 1 (texte courant #5C5C5C, fond de page blanc). */ body { font-family: var(--e-global-typography-text-font-family, Jost), sans-serif; font-size: var(--e-global-typography-text-font-size, 16px); font-weight: var(--e-global-typography-text-font-weight, 400); line-height: 1.7; color: var(--e-global-color-text, #5C5C5C); background-color: var(--e-global-color-lsblanc, #FFFFFF); } /* Les titres. GOLDEN.md § 5 (Manrope, graisse de titre 700, interligne 1,05), § 1 (encre #140E5C : ce qui s'ecrit). LE REPLI EST JOST, ET C'EST UNE DECISION (2026-09-02, mesuree apres le premier depot). Manrope n'est PAS chargee par le site : les familles chargees du document sont Jost, Plus Jakarta Sans et Ubuntu, toutes par Elementor. Tant que le kit n'est pas importe, un titre retombe donc sur son repli - et `sans-serif` seul, c'est Helvetica sur un Mac, Arial sur Windows, autre chose ailleurs : une police que personne n'a choisie. Jost est chargee, elle est de la maison, et elle reste un repli au sens strict : Manrope passe devant des qu'elle est disponible. *Ce defaut a failli passer inapercu : Manrope est installee sur le Mac de travail, donc les captures de controle la montraient et `document.fonts.check` rendait vrai. La mesure qui tranche est la liste des familles CHARGEES PAR LE DOCUMENT, jamais ce que le navigateur de mesure sait rendre.* */ h1, h2, h3, h4, h5, h6 { font-family: var(--e-global-typography-primary-font-family, Manrope), Jost, sans-serif; font-weight: var(--e-global-typography-primary-font-weight, 700); line-height: 1.05; color: var(--e-global-color-primary, #140E5C); } /* Les six paliers de l'echelle fermee, GOLDEN.md § 2. */ h1 { font-size: 60px; } h2 { font-size: 38px; } h3 { font-size: 28px; } h4 { font-size: 22px; } h5 { font-size: 18px; } h6 { font-size: 16px; text-transform: uppercase; letter-spacing: .04em; } /* Sur telephone, chaque titre descend d'UN palier de l'echelle - il n'en sort jamais. GOLDEN.md § 2 bis. Le seuil de 768 px est celui que le golden emploie deja au § 10 pour les formulaires : aucun point de rupture neuf. */ @media (max-width: 767.98px) { h1 { font-size: 38px; } h2 { font-size: 28px; } h3 { font-size: 22px; } h4 { font-size: 18px; } h5 { font-size: 16px; } h6 { font-size: 14px; } } /* ============================================================================ GOLDEN LED STUDIO - FIN DU BLOC GERE ============================================================================ */ /* ============================================================================ GOLDEN LED STUDIO - COMPOSANTS DE LA BOUTIQUE - DEBUT DU BLOC GERE ETAPE 2 du chantier de charte : aligner les composants que l'agence n'a pas faits - ceux de WooCommerce et du theme - sur les valeurs du golden. Source de verite : golden/GOLDEN.md (§ 1, 2, 4, 5, 6) et golden/composants.md. POURQUOI CE BLOC EXISTE ICI ET PAS DANS UN WIDGET. Trois sources produisent l'apparence du site, et le geste qui ferme un ecart n'est pas le meme : - le KIT Elementor (variables globales) -> se corrige dans le kit - un REGLAGE DE WIDGET (gabarit ou page) -> se corrige dans Elementor ; le CSS du theme ne peut pas l'atteindre sans surspecificite, et le bloc golden de cette meme feuille dit explicitement qu'il ne le fait jamais - une FEUILLE TIERCE (WooCommerce, theme) -> c'est ICI, et nulle part ailleurs Ce bloc ne traite QUE la troisieme source. CE QU'IL NE TOUCHE PAS, ET C'EST DELIBERE : - LE TUNNEL DE COMMANDE (panier, commande, compte) : Stripe est en production, un bouton de paiement modifie sans QA du tunnel est exactement le risque que la garde « Stripe : jamais touche » vise. Le tunnel n'est pas dans les six pages temoins mesurees le 2026-09-02 ; - LES BOUTONS, et le rayon est TRANCHE depuis le 2026-09-05 : le golden (§ 4) veut desormais 8 px, la valeur que nos pages rendaient deja au 2026-09-02. C'est la pilule de 999 px qui etait l'ecart, posee le 03/09 et renversee par Pascal sur planche deux jours plus tard. RESTE DIVERGENT, et c'est un arbitrage, pas une valeur a choisir seul : la COULEUR, le golden disant `action` la ou nos pages rendent `marque` ; - les widgets Elementor, pour la raison dite plus haut. MESURE QUI L'A FONDE : releve au rendu reel du 2026-09-02 sur six pages temoins (`livrables/charte-pages-agence/releve.py`), confronte au golden par `comparer.py`, sources attribuees par `sources.py`. ============================================================================ */ /* ---------- Fil d'Ariane (99 adresses) ---------- Mesure : Jost 400 a 14,72 px (soit .92em de 16), couleur #767676. La taille n'est dans aucun des huit paliers et la couleur n'est pas de la palette. Golden (composants.md) : Jost 500 14 px, `texte`, separateur `texte-attenue`, lien courant `encre`. */ .woocommerce .woocommerce-breadcrumb, nav.woocommerce-breadcrumb { font-family: var(--e-global-typography-accent-font-family, Jost), sans-serif; font-size: 14px; font-weight: var(--e-global-typography-accent-font-weight, 500); line-height: 1.5; color: var(--e-global-color-text, #5C5C5C); } .woocommerce .woocommerce-breadcrumb a, nav.woocommerce-breadcrumb a { color: var(--e-global-color-text, #5C5C5C); text-decoration: none; } .woocommerce .woocommerce-breadcrumb a:hover, nav.woocommerce-breadcrumb a:hover { color: var(--e-global-color-primary, #140E5C); text-decoration: underline; text-underline-offset: 3px; } /* ---------- Le prix (82 fiches, 15 listes) ---------- Mesure : Jost 400 a 20 px, couleur rgb(149, 142, 9) - un vert olive qui n'est ni le rose de la marque ni aucune couleur de la charte. Golden depuis le 2026-09-05 : `encre` #140E5C, Manrope 700, 18 px, exactement ce que `.lss-prix` de la carte de reference rend au navigateur. La mention hors taxe garde la taille `mention` et la couleur `texte`. LES TROIS EXCLUSIONS SONT UNE BORNE, PAS UNE CORRECTION (2026-09-02, sur revue). L'extension TM Extra Product Options emet ``, `fees` et `final` pour le prix unitaire, la TVA et les totaux d'un configurateur. Mesure au rendu sur deux fiches, options comprises : le gabarit de l'extension est CHARGE partout mais jamais instancie - `0` conteneur, `0` champ, `0` total. Le risque est donc nul aujourd'hui ; il redeviendrait reel le jour ou un produit activerait ses options, et la borne coute zero. */ .woocommerce div.product p.price:not(.options):not(.fees):not(.final), .woocommerce div.product span.price:not(.options):not(.fees):not(.final), .woocommerce ul.products li.product .price { /* LE PRIX SUIT LA CARTE DE REFERENCE : 18 px en ENCRE, pas 22 px en rose. Corrige le 2026-09-05 apres que Pascal l'a vu sur la premiere planche - « pourquoi les prix sur les cartes sont aussi gros et en magenta ? Tu dois suivre ce qui est sur page stand ». Releve au rendu sur la page Stands, rejouable : `python3 golden/_releve_carte_reference.py`. POURQUOI CA COMPTE, ET PAS SEULEMENT POUR LE GOUT. Le titre du produit garde sa taille dans une liste WooCommerce (mesure du 02/09) : un prix a 22 px en rose y est donc PLUS GROS et plus contraste que le nom du produit, qui est pourtant ce qu'on lit en premier. La carte de reference met le rose ailleurs - sur le SUR-TITRE, au dessus du titre - et n'a qu'un seul accent. */ font-family: var(--e-global-typography-primary-font-family, Manrope), Jost, sans-serif; font-size: 18px; /* en dur : le kit n'expose que la taille du CORPS, pas celle-ci */ font-weight: var(--e-global-typography-primary-font-weight, 700); line-height: 1.05; color: var(--e-global-color-primary, #140E5C); } .woocommerce div.product p.price small, .woocommerce div.product span.price small, .woocommerce ul.products li.product .price small { font-family: var(--e-global-typography-accent-font-family, Jost), sans-serif; font-size: 12px; font-weight: var(--e-global-typography-accent-font-weight, 500); color: var(--e-global-color-text, #5C5C5C); text-transform: uppercase; letter-spacing: .02em; } /* Un prix barre est une information secondaire : il ne porte pas l'accent. */ .woocommerce div.product del, .woocommerce ul.products li.product del { color: var(--e-global-color-lsattenu, #6E6E78); font-weight: var(--e-global-typography-text-font-weight, 400); } /* ---------- Onglets de la fiche produit (80 fiches) ---------- Mesure : Jost 700, couleur rgb(81, 81, 81), hors palette. Golden : libelle Jost 500 16 px, onglet actif souligne `action`. */ .woocommerce div.product .woocommerce-tabs ul.tabs li a { font-family: var(--e-global-typography-accent-font-family, Jost), sans-serif; font-size: var(--e-global-typography-text-font-size, 16px); font-weight: var(--e-global-typography-accent-font-weight, 500); color: var(--e-global-color-text, #5C5C5C); } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a, .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--e-global-color-primary, #140E5C); } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { box-shadow: inset 0 -2px 0 0 var(--e-global-color-secondary, #D1058B); } /* ---------- Carte produit en liste (17 adresses) ---------- LA CARTE DE REFERENCE, ET IL N'Y EN A PLUS QU'UNE (demande de Pascal, 2026-09-04 au soir) : « je veux qu'on reprenne les memes cartes que sur la page stand : fond blanc, bord gris, effet ombre en survol et texte avec marge (pas colle a gauche). Il faut que les cartes sur toutes les pages soient identiques. » Ses DIX elements sont ecrits au golden, pas ici : `composants.md`, tableau « Les dix elements de la carte de reference », qui pointe lui-meme le § 4 bis (le trait) et le § 6 bis (le soulevement). Ces deux sections ont ete ecrites le 2026-09-05 parce qu'elles MANQUAIENT : la carte etait indescriptible, ce qui est la vraie raison pour laquelle le golden ne la portait pas. DIX ET NON SIX, et la difference a ete vue par Pascal, pas par moi : la premiere version ne portait que le CONTENANT. Le releve se rejoue desormais plutot que de se recopier - `python3 golden/_releve_carte_reference.py`. CE QUE CE BLOC REMPLACE, ET CE QU'IL GARDE. Il remplace la carte du 02/09 - rayon et ombre `posee` au repos, sans fond ni trait - puis celle du 04/09, sans fond du tout, qui prenait le gris de la page. Il garde le fond de page gris des listes et l'alignement des rangs du § 7 ter. Le prix, lui, CHANGE avec ce bloc : il passe de `action` 22 px a `encre` 18 px, la valeur de la carte de reference. STRUCTURE REELLE, RELEVEE DANS LE HTML SERVI (pas supposee) : `li.product` contient UN lien `a.woocommerce-loop-product__link` qui porte a la fois l'image, le titre et le prix, puis le bouton en frere. L'image et le texte n'ont donc pas de conteneur separe. C'est pourquoi la marge de 24 px se pose sur les elements de texte un par un, et JAMAIS sur `li.product` : un padding sur la carte mettrait l'image en retrait, alors que le golden la veut bord a bord. LE TITRE RESTE A SA TAILLE, et ce n'est pas un oubli (mesure du 2026-09-02) : au palier `titre-carte` 22 px il passe sur deux lignes, les hauteurs divergent et le bouton sort de la carte. */ .woocommerce ul.products li.product { background: #ffffff; border: 1px solid rgba(0, 0, 0, .12); /* trait du golden § 4 bis */ border-radius: 18px; overflow: hidden; /* l'image epouse le rayon de la carte */ /* AUCUNE ombre au repos : la carte se detache par son trait, pas par une ombre. Une ombre posee sur fond gris cerne une surface de la couleur de son voisinage. */ transition: transform .3s cubic-bezier(.32, .72, 0, 1), box-shadow .3s cubic-bezier(.32, .72, 0, 1); } .woocommerce ul.products li.product:hover { /* -3 px, et non -2 : § 6 bis du golden, ecrit le 2026-09-05. Quatre amplitudes cohabitaient dans le site (2, 3, 4 et 8 px), donc deux cartes voisines ne se soulevaient pas pareil. La carte de reference de la page Stands fait foi. */ transform: translateY(-3px); box-shadow: 0 16px 38px rgba(20, 14, 92, .13); } /* L'image va d'un bord a l'autre : son rayon propre de 8 px disparait, c'est la carte qui arrondit. */ .woocommerce ul.products li.product img { border-radius: 0; width: 100%; margin: 0; display: block; } /* La marge de 24 px, posee sur les elements de TEXTE. Le premier d'entre eux reprend l'air perdu sous l'image. */ .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product .price { padding-left: 24px; padding-right: 24px; } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: Manrope, Jost, sans-serif; color: var(--e-global-color-primary, #140E5C); padding-top: 24px; } .woocommerce ul.products li.product .button { margin-left: 24px; margin-right: 24px; margin-bottom: 24px; } /* SOUS 768 PX, LA MARGE TOMBE A 16 PX, ET C'EST UNE MESURE (planche du 2026-09-05). A 390 px de large, la liste est en deux colonnes : une carte fait environ 171 px. Avec 24 px de chaque cote il ne reste que 123 px de texte, et « Ajouter au panier » passe sur DEUX lignes - alors qu'il tenait sur une avant ce bloc. C'est une regression, vue sur la capture avant/apres et sur rien d'autre. 16 px est sur la grille du § 3, et le § 2 bis du golden a deja le precedent : sous 768 px, la charte descend d'un cran plutot que de creer une valeur. CE QUE 16 PX NE RATTRAPE PAS, ET C'EST ASSUME : « Ajouter au panier » reste sur deux lignes a 390 px, la ou il tenait sur une avant ce bloc. Mesure : la carte fait 171 px, le texte 139 px une fois les marges posees, et ce libelle en demande environ 162 avec le padding du bouton. Aucune marge ne le sauve - a 12 px il en resterait 147. Les deux voies pour le rattraper touchent un composant hors de ce lot (reduire le padding du bouton WooCommerce, ou raccourcir le libelle), donc elles ne se prennent pas ici. Le bouton reste cliquable, lisible, et aligne sur ses voisins de rang (§ 7 ter) : c'est un cout de mise en page, pas un defaut. */ @media (max-width: 767.98px) { .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product .price { padding-left: 16px; padding-right: 16px; } .woocommerce ul.products li.product .woocommerce-loop-product__title { padding-top: 16px; } .woocommerce ul.products li.product .button { margin-left: 16px; margin-right: 16px; margin-bottom: 16px; } } /* ============================================================================ GOLDEN LED STUDIO - COMPOSANTS DE LA BOUTIQUE - FIN DU BLOC GERE ============================================================================ */ /* ============================================================ CSS additionnel migré depuis Apparence > Personnaliser (le 2026-07-02, par From-Scratch). Source unique désormais ici. ============================================================ */ .cmplz-cookie-banner.cmplz-accepted, .cmplz-cookie-banner.cmplz-denied { display: none !important; } .cmplz-manage-consent { display: none !important; } .elementor-sticky--effects { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .elementor-nav-menu--layout-horizontal .elementor-nav-menu > li.menu-item-33792 { padding-left:30px; } .elementor-menu-cart__toggle_button.elementor-button.elementor-size-sm { border: none !important; } .btn_devis_rapide a { background-color: var(--e-global-color-secondary, #D1058B); color: var(--e-global-color-lsblanc, #ffffff); font-size: 14px; font-weight: var(--e-global-typography-accent-font-weight, 500); text-transform: uppercase; padding: 10px 16px; border-radius: 8px; box-shadow: 0 0 .2rem #fff, 0 0 .2rem #fff, 0 0 2rem #F2059F, 0 0 0.2rem #F2059F, 0 0 1.3rem #F2059F, inset 0 0 1.3rem #F2059F; cursor: pointer; transition: all 0.3s ease; animation: blink 1.5s infinite; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.7; } 100% { opacity: 1; } } .btn_devis_rapide a:hover { animation: none; opacity: 0.7 !important; } .elementor-nav-menu--layout-horizontal .elementor-nav-menu { display: flex !important; flex-wrap: nowrap !important; } .elementor-nav-menu--main a, .elementor-nav-menu__container a { white-space: normal !important; text-align: center !important; } li.menu-item-33792 ul.sub-menu { min-width: 220px !important; } /* survol du menu */ .elementor-34240 .elementor-element.elementor-element-5981fd .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-nav-menu--dropdown, .elementor-34240 .elementor-element.elementor-element-5981fd .elementor-nav-menu__container.elementor-nav-menu--dropdown { padding-top: 15px; padding-bottom: 15px } li.menu-item-33199 ul.sub-menu { min-width: 450px !important; background-size: contain; background-repeat: no-repeat; background-position: right center; background-image: url("https://www.ledstudio.ch/wp-content/uploads/2025/09/S-LIGHT-Pro-30_1-600x600.jpg"); } li.menu-item-33199 ul.sub-menu:has(.menu-item-33201:hover) { background-image: url("https://www.ledstudio.ch/wp-content/uploads/2026/04/S-LIGHT-1.jpg"); } li.menu-item-33199 ul.sub-menu:has(.menu-item-34764:hover) { background-image: url("https://www.ledstudio.ch/wp-content/uploads/2026/04/S-LIGHT-MODULAR-1.jpg"); } li.menu-item-33199 ul.sub-menu:has(.menu-item-33202:hover) { background-image: url("https://www.ledstudio.ch/wp-content/uploads/2026/04/S-LIGHT-PRO-1.jpg"); } li.menu-item-33199 ul.sub-menu:has(.menu-item-33200:hover) { background-image: url("https://www.ledstudio.ch/wp-content/uploads/2026/04/C-Light.jpg"); } /* menu écran led & affichage */ li.menu-item-33203 ul.sub-menu { min-width: 475px !important; background-size: contain; background-repeat: no-repeat; background-position: right center; background-image: url("https://www.ledstudio.ch/wp-content/uploads/2026/04/4.1-ECRANS-LED.jpg"); } li.menu-item-33203 ul.sub-menu:has(.menu-item-34973:hover) { background-image: url("https://www.ledstudio.ch/wp-content/uploads/2026/04/pitch_led_1.jpg"); } li.menu-item-33203 ul.sub-menu:has(.menu-item-34984:hover) { background-image: url("https://www.ledstudio.ch/wp-content/uploads/2026/04/Totem_LED_1.jpg"); } li.menu-item-33203 ul.sub-menu:has(.menu-item-34983:hover) { background-image: url("https://www.ledstudio.ch/wp-content/uploads/2026/04/Chevalet_LED_1.jpg"); } li.menu-item-33203 ul.sub-menu:has(.menu-item-34982:hover) { background-image: url("https://www.ledstudio.ch/wp-content/uploads/2026/04/Cube_LED_1.jpg"); } li.menu-item-33203 ul.sub-menu:has(.menu-item-34981:hover) { background-image: url("https://www.ledstudio.ch/wp-content/uploads/2026/04/Sac_a_dos_LED_1.jpg"); } .container { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; } /* Animations */ @keyframes slide-in { to { transform: translateX(0); } } @keyframes text-fade-in { to { opacity: 1; } } div.wpforms-container .wpforms-required-label { color:var(--e-global-color-lsblanc, #ffffff); } div.wpforms-container-full .wpforms-field-label, .wp-core-ui div.wpforms-container-full .wpforms-field-label{ color:var(--e-global-color-lsblanc, #ffffff); } .wpforms-container .wpforms-form .wpforms-field-layout .wpforms-layout-column { padding: 0 0 0 40px !important; } div.wpforms-container-full .wpforms-field-label, .wp-core-ui div.wpforms-container-full .wpforms-field-label{ margin-bottom: 15px; font-weight: var(--e-global-typography-secondary-font-weight, 600); } #wpforms-33455 { --wpforms-field-size-input-spacing: 5px !important; --wpforms-field-size-input-height: 35px !important; --wpforms-label-color:#ffffff !important; } .wpforms-container .wpforms-field { padding: 10px 0; } #demande-sur-mesure-form{ margin-top: 100px ; } /* tous les formulaires */ .wpforms-container.wpforms-container-full.wpforms-render-modern { background-color: #f7f7f7; padding: 20px 60px 40px; border-radius:10px; max-width:700px; } /* demande de devis */ .dialog-message #wpforms-33455.wpforms-container.wpforms-container-full.wpforms-render-modern { background-color: var(--e-global-color-lsmarqu, #F2059F); padding: 0px 50px; border-radius:0; max-width:100%; margin:0; } /* demande de devis (dans le popup) */ #wpforms-33455.wpforms-container.wpforms-container-full.wpforms-render-modern { background-color: var(--e-global-color-lsmarqu, #F2059F); padding: 50px 50px 50px 50px ; border-radius:0; max-width:100%; margin:0; } .wpforms-field.wpforms-field-checkbox[data-field-id="16"] { padding: 20px 0 !important; } .wpforms-field-file-upload { padding: 30px 0 !important; } #wpforms-33455 .wpforms-submit-container { text-align: right; } div.wpforms-container-full .wpforms-form input[type="submit"], div.wpforms-container-full .wpforms-form button[type="submit"] { border-color: var(--e-global-color-lsblanc, #ffffff); border-radius:10px; text-transform: uppercase; font-size: var(--e-global-typography-text-font-size, 16px); transition: transform 0.3s ease; } div.wpforms-container-full .wpforms-form input[type="submit"]:hover, div.wpforms-container-full .wpforms-form input[type="submit"]:active, div.wpforms-container-full .wpforms-form button[type="submit"]:hover, div.wpforms-container-full .wpforms-form button[type="submit"]:active { color: var(--e-global-color-lsmarqu, #f2059f) !important; background: transparent !important; } .elementor-gallery-item__overlay, .e-gallery-masonry .e-gallery-image { border-radius:16px;} /* Catégories */ .woocommerce-archive-description ul { margin-bottom: 20px; } .sous-titre-categorie { font-size: 22px ; font-weight: var(--e-global-typography-primary-font-weight, 700); } .woocommerce-ordering { display:none; } .woocommerce-products-header__title.page-title { font-size: 60px; font-weight: var(--e-global-typography-primary-font-weight, 700); } ul.products li.product .button {color: var(--e-global-color-lsblanc, #ffffff) !important; background-color: var(--e-global-color-secondary, #D1058B) !important; border-radius: 8px !important; font-family: var(--e-global-typography-secondary-font-family, Manrope), Jost, sans-serif; font-weight: var(--e-global-typography-secondary-font-weight, 600); } .acf-texte-dessous-produits .bouton { color: var(--e-global-color-lsmarqu, #f2059f); text-transform: uppercase; font-size: var(--e-global-typography-text-font-size, 16px); font-weight: var(--e-global-typography-accent-font-weight, 500); background: transparent; border-radius: 8px; border: 1px solid; padding: 10px 20px ; display: inline-block; transition: all 0.3s ease; } .acf-texte-dessous-produits .bouton:hover { transform: translateY(-8px); }.tm-extra-product-options .tc-epo-label { margin-top:0; } .tc-cell.tm-element-description.tm-description.tcwidth-100 p { margin-top: 0 !important; } .woocommerce div.product .quantity { margin-top: 20px; } .tc-extra-product-options .tmcp-field-wrap label.cpf-upload-container .cpf-upload-wrap { border-radius: 10px } /* Bouton "Ajouter au panier" : fond blanc, bord rose, texte rose. Corrige la coquille (sélecteur sans accolade) et force la priorité sur konte/woocommerce.css (background:#161619;border:0) quel que soit l'ordre de chargement, via !important. — 2026-07-02, From-Scratch */ .woocommerce div.product .single_add_to_cart_button, .woocommerce div.product.layout-v6.product-type-simple .single_add_to_cart_button { color: var(--e-global-color-lsmarqu, #f2059f) !important; background: #ffffff !important; border: solid 1px #f2059f !important; border-radius: 8px !important; font-size: var(--e-global-typography-text-font-size, 16px); font-weight: var(--e-global-typography-accent-font-weight, 500); margin-top: 20px; } .term-description { max-width:900px;} .term-description h2 { margin-top:70px; } /* Bloc « Produits similaires » désormais désactivé côté PHP (functions.php, filtre woocommerce_related_products) — masquage CSS retiré. 2026-07-22 */ ul.products { margin-top: 50px; } ul.products li.product-category .woocommerce-loop-category__title { position: static; margin: 12px 0 0 0; font-size: 1.5rem; font-weight: var(--e-global-typography-secondary-font-weight, 600); } ul.products li.product-category.pitch-card .woocommerce-loop-category__title { font-size: 18px; font-weight: var(--e-global-typography-text-font-weight, 400); } .acf-galerie-dessous-produits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 50px 0; } .acf-galerie-item img { width: 100%; height: 300px; object-fit: cover; display: block; border-radius:25px; } #cmplz-document {margin: 0 auto;} /* ============================================================ #4 — Effet néon au survol des catégories du menu principal (réunion 2/07 : dégradé façon néon, côté "pop"). 2026-07-04 ============================================================ */ /* liens de 1er niveau du menu horizontal principal */ .elementor-nav-menu--main.elementor-nav-menu--layout-horizontal .elementor-nav-menu > li > a.elementor-item { transition: color .3s ease, text-shadow .3s ease; } /* le texte s'illumine (halo néon rose) au survol */ .elementor-nav-menu--main.elementor-nav-menu--layout-horizontal .elementor-nav-menu > li > a.elementor-item:hover, .elementor-nav-menu--main.elementor-nav-menu--layout-horizontal .elementor-nav-menu > li:hover > a.elementor-item { color: var(--e-global-color-lsmarqu, #f2059f) !important; text-shadow: 0 0 6px rgba(242, 5, 159, .55), 0 0 12px rgba(242, 5, 159, .35); } /* la barre de soulignement Elementor devient un dégradé néon rose→bleu */ .elementor-nav-menu--main.elementor-nav-menu--layout-horizontal .elementor-nav-menu > li > a.elementor-item::after { background: linear-gradient(90deg, #f2059f 0%, #7a15c4 50%, #0304B8 100%) !important; height: 2px !important; border-radius: 2px; transition: transform .3s ease, box-shadow .3s ease, opacity .3s ease !important; } /* halo lumineux sous la barre au survol */ .elementor-nav-menu--main.elementor-nav-menu--layout-horizontal .elementor-nav-menu > li > a.elementor-item:hover::after, .elementor-nav-menu--main.elementor-nav-menu--layout-horizontal .elementor-nav-menu > li:hover > a.elementor-item::after { box-shadow: 0 0 6px #f2059f, 0 0 12px rgba(242, 5, 159, .7), 0 0 18px rgba(122, 21, 196, .5); } /* même halo néon au survol des liens de sous-menu (dropdown) */ .elementor-nav-menu--dropdown a.elementor-sub-item { transition: color .3s ease, text-shadow .3s ease; } .elementor-nav-menu--dropdown a.elementor-sub-item:hover, .elementor-nav-menu--dropdown li:hover > a.elementor-sub-item { color: var(--e-global-color-lsmarqu, #f2059f) !important; text-shadow: 0 0 6px rgba(242, 5, 159, .55), 0 0 12px rgba(242, 5, 159, .35); } /* ============================================================ Bouton "Parlons-nous" — pendant du bouton "Demande sur mesure". Rose plein / texte blanc, aligné et même hauteur ; inversion au survol. Sélecteur très spécifique pour battre la règle "tout le texte produit en bleu" (.product-content-container *…). 2026-07-04 ============================================================ */ a.fs-parlons-nous-button { display: inline-block; vertical-align: top; margin-top: 20px; margin-left: 5px; min-width: 200px; padding: 0 24px; line-height: 60px; background: #D1058B !important; color: var(--e-global-color-lsblanc, #ffffff) !important; border: 1px solid #f2059f !important; border-radius: 8px !important; font-size: var(--e-global-typography-text-font-size, 16px); font-weight: var(--e-global-typography-accent-font-weight, 500); text-transform: uppercase; text-align: center; transition: all .3s ease; } a.fs-parlons-nous-button:hover { background: #ffffff !important; color: var(--e-global-color-lsmarqu, #f2059f) !important; transform: translateY(-4px); } /* ============================================================ Popup « Parlons-nous » (Elementor #35597) — mise en forme du mini-formulaire « Vous souhaitez être rappelé ? ». Tout est scopé à ce popup → aucun impact sur les autres formulaires. Objectifs : grande marge interne, espacements harmonisés, champs alignés proprement en grille 2×2. 2026-07-08 (maj 2026-07-10) ============================================================ */ /* --- Marge interne du popup (modérée, pour aérer sans excès) --- */ #elementor-popup-modal-35597 .dialog-message { padding: 30px 36px 34px !important; box-sizing: border-box; } /* --- La carte du formulaire : on retire le fond gris / la largeur bornée hérités de la règle globale WPForms, pour un rendu propre dans le popup. --- */ .elementor-35597 .wpforms-container.wpforms-container-full.wpforms-render-modern { background: transparent; padding: 0; max-width: 100%; margin: 0; } .elementor-35597 .wpforms-form { margin-top: 0 !important; } /* --- Masque les champs anti-spam WPForms (honeypot type_3 / token type_6) qui ne portent pas toujours de style inline de masquage. --- */ .elementor-35597 .wpforms-field-container > .wpforms-field:has(> input[tabindex="-1"][aria-hidden="true"]) { display: none !important; } /* --- Rythme vertical : chaque champ VISIBLE de 1er niveau a la même marge basse ; les champs imbriqués (dans une colonne) n'en ajoutent pas. --- */ .elementor-35597 .wpforms-field-container > .wpforms-field { padding: 0 !important; margin: 0 0 18px 0 !important; } .elementor-35597 .wpforms-field-layout .wpforms-layout-column .wpforms-field { margin: 0 !important; padding: 0 !important; } /* Le fieldset du champ « Nom » : reset des marges/bordures par défaut. */ .elementor-35597 .wpforms-field-name fieldset { margin: 0; padding: 0; border: 0; } /* --- Les DEUX rangées en 2 colonnes égales, même gouttière. Rangée Prénom/Nom = .wpforms-field-row ; rangée E-mail/Téléphone = .wpforms-layout-row. On force 100 % de large (la 1re était bridée par .wpforms-field-medium, la 2e était en .wpforms-field-large). --- */ .elementor-35597 .wpforms-field-name .wpforms-field-row, .elementor-35597 .wpforms-field-layout .wpforms-field-layout-rows, .elementor-35597 .wpforms-field-layout .wpforms-layout-row { width: 100% !important; max-width: 100% !important; margin: 0 !important; } .elementor-35597 .wpforms-field-name .wpforms-field-row, .elementor-35597 .wpforms-field-layout .wpforms-layout-row { display: flex !important; flex-wrap: nowrap !important; gap: 20px !important; } /* Chaque demi-colonne = 50 % pile, sans padding/marge/flottement parasite. */ .elementor-35597 .wpforms-field-name .wpforms-field-row > .wpforms-field-row-block, .elementor-35597 .wpforms-field-layout .wpforms-layout-column { flex: 1 1 0 !important; width: 50% !important; max-width: none !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; float: none !important; } /* --- Sous-labels (Prénom, Nom) masqués : les placeholders suffisent et uniformisent les 4 champs (E-mail/Téléphone n'ont pas de sous-label). --- */ .elementor-35597 .wpforms-field-sublabel, .elementor-35597 .wpforms-field-name legend.wpforms-field-label { display: none !important; } /* --- Champs de saisie : fond gris clair doux, arrondis, focus rose. width !important pour battre les classes de taille WPForms (medium/large) qui donnaient des largeurs différentes à E-mail et Téléphone. --- */ .elementor-35597 .wpforms-field input[type="text"], .elementor-35597 .wpforms-field input[type="email"], .elementor-35597 .wpforms-field input[type="tel"], .elementor-35597 .wpforms-field input[type="url"], .elementor-35597 .wpforms-field input[type="number"] { width: 100% !important; max-width: 100% !important; height: 52px; padding: 0 18px; border: 1px solid #e4e4ec; border-radius: 12px; background: #f6f6f9; font-size: 15px; color: #0204af; box-shadow: none; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; } .elementor-35597 .wpforms-field input:focus { background: #ffffff; border-color: var(--e-global-color-lsmarqu, #f2059f); box-shadow: 0 0 0 3px rgba(242, 5, 159, .14); outline: none; } .elementor-35597 .wpforms-field input::placeholder { color: #9a9aa8; opacity: 1; } /* --- Bouton d'envoi : rose plein, léger halo néon, hover inversé --- */ .elementor-35597 .wpforms-submit-container { text-align: center; margin-top: 6px !important; } .elementor-35597 div.wpforms-container-full .wpforms-form button[type="submit"], .elementor-35597 div.wpforms-container-full .wpforms-form input[type="submit"] { background: #f2059f !important; color: var(--e-global-color-lsblanc, #ffffff) !important; border: 1px solid #f2059f !important; border-radius: 12px !important; padding: 0 36px; height: 52px; font-size: var(--e-global-typography-text-font-size, 16px); font-weight: var(--e-global-typography-secondary-font-weight, 600); text-transform: uppercase; box-shadow: 0 0 .2rem rgba(242, 5, 159, .4), 0 0 1rem rgba(242, 5, 159, .35); transition: all .3s ease; } .elementor-35597 div.wpforms-container-full .wpforms-form button[type="submit"]:hover, .elementor-35597 div.wpforms-container-full .wpforms-form input[type="submit"]:hover { background: #ffffff !important; color: var(--e-global-color-lsmarqu, #f2059f) !important; transform: translateY(-3px); } /* --- Mobile : marge interne réduite et champs empilés --- */ @media (max-width: 767px) { #elementor-popup-modal-35597 .dialog-message { padding: 24px 20px 26px !important; } .elementor-35597 .wpforms-field-name .wpforms-field-row, .elementor-35597 .wpforms-field-layout .wpforms-layout-row { flex-direction: column !important; gap: 0 !important; } .elementor-35597 .wpforms-field-name .wpforms-field-row > .wpforms-field-row-block, .elementor-35597 .wpforms-field-layout .wpforms-layout-column { width: 100% !important; } .elementor-35597 .wpforms-field-name .wpforms-field-row > .wpforms-field-row-block:first-child { margin-bottom: 18px !important; } } /* ============================================================ Pages « Néons sur mesure » (maquette client) — 2026-07-22, From-Scratch La mise en page (colonnes, largeurs, responsive) est gérée nativement par les réglages de conteneurs Elementor. Ne reste ici que la finition « bouton aligné en bas » des cartes technologie (non exprimable via les réglages Elementor). Ciblé par l'ID Elementor des cartes. ============================================================ */ .elementor-element-00ba1b > .elementor-widget-button, .elementor-element-012a1b > .elementor-widget-button { margin-top: auto; } /* ============================================================ Sticky colonne aperçu — pages « Néon Flex » (#35635) & « Acrylique 360 » (#35637) Konte applique overflow-x:hidden sur body et .site, ce qui casse position:sticky des descendants. overflow-x:clip clippe à l'identique SANS créer de conteneur de défilement → le sticky refonctionne. Ciblé sur ces 2 pages uniquement. 2026-07-23, From-Scratch ============================================================ */ body.page-id-35635, body.page-id-35637 { overflow-x: clip; } .home .elementor-sticky--active, .home .elementor-sticky { background: #000000; background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 60%) !important;} .home .elementor-sticky--active.elementor-sticky--effects { background: none !important;background-color:var(--e-global-color-lsblanc, #fff) !important;} .home .elementor-34240 div:not(.elementor-sticky--effects) .elementor-element.elementor-element-5981fd .elementor-nav-menu--main .elementor-item { color:var(--e-global-color-lsblanc, #fff); } .home .elementor-menu-cart__toggle .elementor-button svg { fill:var(--e-global-color-lsblanc, #fff) !important;} /* La rangée étire ses deux colonnes à la même hauteur */ .elementor-element-013a1b { align-items: stretch; } /* Chaque colonne remplit toute la hauteur de la rangée */ .elementor-element-00ba1b, .elementor-element-012a1b { align-self: stretch; height: auto; } /* Le bouton se colle en bas (l'espace libre existe désormais) */ .elementor-element-00aa1b, .elementor-element-011a1b { margin-top: auto !important; } /* Étoiles roses au-dessus de chaque témoignage */ .elementor-element-5c5a0ff .elementor-testimonial__content::before { content: "★★★★★"; display: block; color: var(--e-global-color-lsmarqu, #F2059F); /* rose de la charte */ font-size: 20px; letter-spacing: 4px; /* espace entre les étoiles */ line-height: 1; margin-bottom: 15px; } /* ========================================================================== #lss-stands - LE BLOC À INTÉGRER. Tout est scopé sous cet identifiant. ========================================================================== */ #lss-stands { --bleu: var(--e-global-color-primary, #140E5C); --rose: var(--e-global-color-lsmarqu, #F2059F); --rose-profond: var(--e-global-color-secondary, #D1058B); --gris: var(--e-global-color-text, #5C5C5C); --gris-clair: var(--e-global-color-lsattenu, #6E6E78); --blanc: var(--e-global-color-lsblanc, #FFFFFF); --trait: rgba(0,0,0,.12); --trait-fort: rgba(0,0,0,.24); --fond-doux: #F7F7F9; --ok: var(--e-global-color-lsconfir, #0F7A4F); /* Les ombres du GOLDEN.md § 6, nommees ici pour que chaque regle pointe la charte au lieu d'en recopier les chiffres. */ --ombre-posee: 0 5px 18px rgba(0, 0, 0, .08); --ombre-soulevee: 0 16px 38px rgba(20, 14, 92, .13); --ombre-accent: 0 12px 30px rgba(209, 5, 139, .28); --ressort: cubic-bezier(.32,.72,0,1); font-family: var(--e-global-typography-text-font-family, 'Jost'), sans-serif; font-size: var(--e-global-typography-text-font-size, 16px); font-weight: var(--e-global-typography-text-font-weight, 400); line-height: 1.5; color: var(--gris); background: var(--blanc); } #lss-stands *, #lss-stands *::before, #lss-stands *::after { margin: 0; padding: 0; box-sizing: border-box; } #lss-stands img { max-width: 100%; } #lss-stands a { color: inherit; } #lss-stands .lss-container { max-width: 1386px; margin: 0 auto; padding: 0 48px; } /* ---------- Pages ---------- */ #lss-stands .lss-page { display: none; } #lss-stands .lss-page.actif { display: block; } /* Le thème du site coiffe les PAGES d'un bandeau de titre que nos pages portent déjà : il faisait doublon (relevé 2026-07-31, deux h1 sur le hub), on masque le sien. Format du titre : celui des pages de famille construites par l'agence, relevé sur /creer-votre-neon/ le 2026-08-01 (Jost 60px/700, le bleu d'alors, fil d'Ariane 14px/500 à droite, identique en 390px de large). Nos fiches produit gardent .lss-titre-produit, déjà aligné sur la fiche néon (/creer-votre-neon/neon-flex/, 32px). Le sélecteur se borne tout seul aux pages qui portent notre zone : inerte ailleurs, et inerte dans cet aperçu local, qui n'a pas de bandeau de thème. */ #lss-stands .lss-entete { display: flex; justify-content: space-between; align-items: baseline; padding: 48px 0 8px; flex-wrap: wrap; gap: 8px; } #lss-stands .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } #lss-stands .lss-h1 { font-family: var(--e-global-typography-primary-font-family, Manrope), Jost, sans-serif; font-size: 60px; font-weight: var(--e-global-typography-primary-font-weight, 700); line-height: 1.05; color: var(--bleu); } #lss-stands .lss-entete .lss-fil { font-size: 14px; font-weight: var(--e-global-typography-accent-font-weight, 500); } #lss-stands .lss-fil { font-size: var(--e-global-typography-text-font-size, 16px); color: var(--bleu); } #lss-stands .lss-fil a { text-decoration: none; cursor: pointer; } #lss-stands .lss-fil a:hover { color: var(--rose-profond); } #lss-stands .lss-fil .sep { margin: 0 4px; } /* ---------- Titres de section ---------- */ #lss-stands .lss-h2 { font-family: var(--e-global-typography-primary-font-family, Manrope), Jost, sans-serif; font-size: 38px; font-weight: var(--e-global-typography-primary-font-weight, 700); line-height: 1.05; color: var(--bleu); margin: 72px 0 24px; } #lss-stands .lss-sur { display: block; font-family: var(--e-global-typography-primary-font-family, Manrope), Jost, sans-serif; font-size: 22px; font-weight: var(--e-global-typography-primary-font-weight, 700); color: var(--gris); margin-bottom: 8px; } #lss-stands .lss-intro-sec { text-wrap: pretty; font-size: var(--e-global-typography-text-font-size, 16px); line-height: 1.7; margin-bottom: 24px; } /* ---------- Chapeau catégorie (aligné sur la page néon) ---------- */ #lss-stands .lss-chapeau { display: flex; gap: 32px; align-items: flex-start; padding-top: 24px; } #lss-stands .lss-chapeau-txt { flex: 1 1 auto; } #lss-stands .lss-chapeau-txt p { margin: 0 0 24px; line-height: 1.7; } #lss-stands .lss-chapeau-media { flex: 0 0 calc((100% - 40px) / 2); margin: 0; } #lss-stands .lss-chapeau-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; display: block; } #lss-stands p strong, #lss-stands li strong { font-weight: var(--e-global-typography-secondary-font-weight, 600); color: var(--gris); } /* ---------- Atouts (4 cartes premium) ---------- */ #lss-stands .lss-reassure { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 48px; } #lss-stands .lss-reassure .item { background: #fff; border: 1px solid var(--trait); border-radius: 18px; padding: 24px 24px; box-shadow: var(--ombre-posee); transition: transform .35s var(--ressort), box-shadow .35s var(--ressort); } #lss-stands .lss-reassure .item:hover { transform: translateY(-4px); box-shadow: var(--ombre-soulevee); } #lss-stands .lss-reassure .ic { width: 52px; height: 52px; border-radius: 12px; background: linear-gradient(140deg, rgba(20,14,92,.09), rgba(242,5,159,.11)); color: var(--bleu); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; transition: color .35s var(--ressort); } #lss-stands .lss-reassure .item:hover .ic { color: var(--rose-profond); } #lss-stands .lss-reassure h3 { font-family: var(--e-global-typography-primary-font-family, Manrope), Jost, sans-serif; font-size: 16px; font-weight: var(--e-global-typography-primary-font-weight, 700); color: var(--bleu); margin-bottom: 8px; } #lss-stands .lss-reassure p { font-size: 14px; line-height: 1.5; } /* ---------- Tuiles CATÉGORIES (accueil : on choisit une famille) ---------- */ #lss-stands .lss-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } #lss-stands .lss-cat { position: relative; display: block; border-radius: 18px; overflow: hidden; cursor: pointer; box-shadow: var(--ombre-posee); background: #14141a; min-height: 320px; text-decoration: none; } #lss-stands .lss-cat img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; opacity: .84; transition: transform .5s var(--ressort), opacity .3s; } #lss-stands .lss-cat:hover img { transform: scale(1.05); opacity: .72; } #lss-stands .lss-cat .in { position: relative; z-index: 2; padding: 72px 24px 24px; color: var(--e-global-color-lsblanc, #fff); background: linear-gradient(transparent 12%, rgba(20,20,26,.55) 46%, rgba(20,20,26,.93)); height: 100%; display: flex; flex-direction: column; justify-content: flex-end; } /* color explicite, pas hérité de .in : le thème du site colore les h3 directement, et une règle directe bat toujours un héritage (mesuré le 2026-07-31 : contraste 1,43 sur fond sombre). */ #lss-stands .lss-cat h3 { font-family: var(--e-global-typography-primary-font-family, Manrope), Jost, sans-serif; font-size: 22px; font-weight: var(--e-global-typography-primary-font-weight, 700); margin-bottom: 4px; color: var(--e-global-color-lsblanc, #fff); } #lss-stands .lss-cat p { font-size: 14px; color: rgba(255,255,255,.88); line-height: 1.5; } #lss-stands .lss-cat .fleche { margin-top: 12px; font-size: 14px; font-weight: var(--e-global-typography-secondary-font-weight, 600); color: var(--e-global-color-lsblanc, #fff); text-transform: uppercase; letter-spacing: .04em; display: inline-flex; align-items: center; gap: 8px; } /* ---------- Cartes produit (pages catégorie + upselling) ---------- */ #lss-stands .lss-produits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } #lss-stands .lss-carte { display: flex; flex-direction: column; border: 1px solid var(--trait); border-radius: 18px; overflow: hidden; background: #fff; transition: box-shadow .3s var(--ressort), transform .3s var(--ressort); } #lss-stands .lss-carte:hover { transform: translateY(-3px); box-shadow: var(--ombre-soulevee); } #lss-stands .lss-visuel { position: relative; aspect-ratio: 4 / 3; background: #F7F7F9; overflow: hidden; cursor: pointer; } #lss-stands .lss-visuel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ressort); } #lss-stands .lss-visuel.contain { background: #fff; } #lss-stands .lss-visuel.contain img { object-fit: contain; padding: 12px; } #lss-stands .lss-carte:hover .lss-visuel img { transform: scale(1.04); } #lss-stands .lss-badge { position: absolute; top: 14px; left: 14px; z-index: 2; font-size: 12px; font-weight: var(--e-global-typography-secondary-font-weight, 600); letter-spacing: .04em; text-transform: uppercase; color: var(--e-global-color-lsblanc, #fff); background: var(--rose-profond); border-radius: 999px; padding: 4px 12px; } #lss-stands .lss-corps { display: flex; flex-direction: column; flex: 1; padding: 24px 24px 24px; } #lss-stands .lss-corps h3 { font-family: var(--e-global-typography-primary-font-family, Manrope), Jost, sans-serif; font-size: 22px; font-weight: var(--e-global-typography-primary-font-weight, 700); color: var(--bleu); margin-bottom: 4px; } #lss-stands .lss-corps .lss-sign { font-size: 14px; font-weight: var(--e-global-typography-secondary-font-weight, 600); text-transform: uppercase; color: var(--rose-profond); letter-spacing: .03em; margin-bottom: 12px; } #lss-stands .lss-corps p { font-size: 14px; line-height: 1.7; margin-bottom: 12px; } #lss-stands .lss-pied { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--trait); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } #lss-stands .lss-prix { font-family: var(--e-global-typography-primary-font-family, Manrope), Jost, sans-serif; font-size: 22px; font-weight: var(--e-global-typography-primary-font-weight, 700); color: var(--bleu); } #lss-stands .lss-prix small { display: block; font-family: var(--e-global-typography-accent-font-family, 'Jost'), sans-serif; font-size: 12px; font-weight: var(--e-global-typography-accent-font-weight, 500); color: var(--gris-clair); letter-spacing: .02em; text-transform: uppercase; margin-top: 4px; } #lss-stands .lss-prix.devis { font-size: 18px; } /* ---------- Boutons ---------- */ #lss-stands .btn-plein, #lss-stands .btn-contour { display: inline-block; font-family: Manrope, Jost, sans-serif; font-size: var(--e-global-typography-text-font-size, 16px); font-weight: var(--e-global-typography-accent-font-weight, 500); text-transform: uppercase; text-decoration: none; border-radius: 8px; padding: 12px 24px; line-height: 1.05; transition: opacity .2s, transform .2s; cursor: pointer; white-space: nowrap; border: 1px solid var(--rose); } #lss-stands .btn-plein { background: var(--rose-profond); color: var(--e-global-color-lsblanc, #fff); } #lss-stands .btn-contour { background: #fff; color: var(--rose-profond); } #lss-stands .btn-plein:hover, #lss-stands .btn-contour:hover { opacity: .88; } #lss-stands .btn-plein:active, #lss-stands .btn-contour:active { transform: scale(.98); } /* ---------- Carrousel « Nos réalisations » (façon néon) ---------- */ #lss-stands .lss-real { display: flex; gap: 16px; overflow-x: auto; padding: 4px 4px 16px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } #lss-stands .lss-real::-webkit-scrollbar { height: 8px; } #lss-stands .lss-real::-webkit-scrollbar-track { background: #F7F7F9; border-radius: 8px; } #lss-stands .lss-real::-webkit-scrollbar-thumb { background: var(--e-global-color-secondary, #D1058B); border-radius: 8px; } #lss-stands .lss-real figure { position: relative; flex: 0 0 auto; height: 320px; margin: 0; border-radius: 8px; overflow: hidden; scroll-snap-align: start; box-shadow: var(--ombre-posee); background: #14141a; } #lss-stands .lss-real figure img { height: 100%; width: auto; display: block; } #lss-stands .lss-real figure figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 16px 12px; font-size: 12px; color: var(--e-global-color-lsblanc, #fff); background: linear-gradient(transparent, rgba(20,20,26,.82)); font-family: 'Jost', sans-serif; } @media (max-width: 640px) { #lss-stands .lss-real figure { height: 250px; max-width: 88vw; } #lss-stands .lss-real figure img { max-width: 100%; height: 100%; object-fit: cover; } } /* ---------- FAQ ---------- */ #lss-stands .lss-faq { text-wrap: pretty; } #lss-stands .lss-faq details { border-bottom: 1px solid var(--trait); } #lss-stands .lss-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 4px; font-family: var(--e-global-typography-secondary-font-family, Manrope), Jost, sans-serif; font-size: 18px; font-weight: var(--e-global-typography-secondary-font-weight, 600); color: var(--bleu); } #lss-stands .lss-faq summary::-webkit-details-marker { display: none; } #lss-stands .lss-faq summary::after { content: '+'; flex: 0 0 auto; font-size: 28px; font-weight: var(--e-global-typography-text-font-weight, 400); line-height: 1.05; color: var(--rose-profond); } #lss-stands .lss-faq details[open] summary::after { content: '\2212'; } #lss-stands .lss-faq summary:hover { color: var(--rose-profond); } #lss-stands .lss-faq .rep { padding: 0 4px 24px; text-wrap: pretty; } #lss-stands .lss-faq .rep p { font-size: var(--e-global-typography-text-font-size, 16px); line-height: 1.7; color: var(--gris); } /* ---------- Bloc CTA (fin de page) ---------- */ #lss-stands .lss-contact { background: var(--fond-doux); border: 1px solid var(--trait); border-radius: 24px; padding: 48px 48px; margin-top: 32px; } #lss-stands .lss-contact .lss-h2 { margin-top: 0; } #lss-stands .lss-contact .intro { text-wrap: pretty; margin-bottom: 32px; line-height: 1.7; } /* ========================================================================== FICHE PRODUIT ========================================================================== */ #lss-stands .lss-produit { display: grid; grid-template-columns: 88px 1fr 500px; gap: 16px 48px; padding-top: 32px; align-items: start; } #lss-stands .lss-thumbs { display: flex; flex-direction: column; gap: 12px; } #lss-stands .lss-thumbs img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; cursor: pointer; border: 1px solid var(--trait); background: #fff; transition: opacity .18s, border-color .18s; } #lss-stands .lss-thumbs img:hover { opacity: .82; border-color: var(--rose-profond); } #lss-stands .lss-galerie-main { border-radius: 18px; overflow: hidden; background: #F7F7F9; border: 1px solid var(--trait); } #lss-stands .lss-galerie-main.contain { background: #fff; } #lss-stands .lss-galerie-main img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; } #lss-stands .lss-galerie-main.contain img { object-fit: contain; padding: 24px; } #lss-stands .lss-resume .lss-fil { margin-bottom: 16px; } #lss-stands .lss-titre-produit { font-family: var(--e-global-typography-primary-font-family, Manrope), Jost, sans-serif; font-size: 28px; font-weight: var(--e-global-typography-primary-font-weight, 700); color: var(--bleu); line-height: 1.05; margin-bottom: 12px; } #lss-stands .lss-accroche { font-size: 18px; line-height: 1.7; margin-bottom: 16px; } #lss-stands .lss-accroche strong { font-weight: var(--e-global-typography-secondary-font-weight, 600); color: var(--gris); } #lss-stands .lss-resume p { margin-bottom: 12px; line-height: 1.7; } #lss-stands .lss-specs { list-style: none; margin: 4px 0 24px; display: grid; gap: 8px; } #lss-stands .lss-specs li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.5; color: var(--gris); } #lss-stands .lss-specs li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--rose); opacity: .6; } #lss-stands .lss-achat { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 24px 0 4px; border-top: 1px solid var(--trait); } #lss-stands .lss-achat .lss-prix { font-size: 28px; } #lss-stands .lss-achat .lss-prix small { font-size: 12px; } #lss-stands .lss-livraison { font-size: 14px; color: var(--gris); margin-top: 12px; display: flex; align-items: center; gap: 8px; } #lss-stands .lss-fiche-detail { margin-top: 48px; } #lss-stands .lss-onglet { font-family: var(--e-global-typography-secondary-font-family, Manrope), Jost, sans-serif; font-size: var(--e-global-typography-text-font-size, 16px); font-weight: var(--e-global-typography-secondary-font-weight, 600); color: var(--bleu); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 16px; } /* Caractéristiques : grille de paires intégrée dans le flux (plus de tableau détaché) */ #lss-stands .lss-caracts-carte { background: #fff; border: 1px solid var(--trait); border-radius: 18px; padding: 32px 32px 32px; box-shadow: var(--ombre-posee); } #lss-stands .lss-specs-grid, #lss-stands .lss-specs-grid dt, #lss-stands .lss-specs-grid dd { margin: 0; } #lss-stands .lss-specs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; } #lss-stands .lss-specs-grid .cell:nth-last-child(-n+2) { border-bottom: none; } #lss-stands .lss-specs-grid .cell { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--trait); } #lss-stands .lss-specs-grid .cle { font-size: 14px; font-weight: var(--e-global-typography-secondary-font-weight, 600); color: var(--bleu); flex: 0 0 auto; } #lss-stands .lss-specs-grid .val { font-size: 14px; color: var(--gris); text-align: right; } #lss-stands .lss-similaires { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } /* ---------- Responsive ---------- */ @media (max-width: 1080px) { #lss-stands .lss-reassure { grid-template-columns: repeat(2, 1fr); } #lss-stands .lss-produit { grid-template-columns: 1fr; } #lss-stands .lss-thumbs { flex-direction: row; order: 2; flex-wrap: wrap; } #lss-stands .lss-thumbs img { width: auto; flex: 1 1 0; min-width: 0; } } @media (max-width: 980px) { #lss-stands .lss-container { padding: 0 24px; } #lss-stands .lss-h2 { font-size: 28px; margin-top: 48px; } #lss-stands .lss-chapeau { flex-direction: column; align-items: stretch; gap: 24px; } #lss-stands .lss-chapeau-media { flex-basis: auto; } #lss-stands .lss-chapeau-media img { aspect-ratio: 16 / 10; } #lss-stands .lss-cats, #lss-stands .lss-produits, #lss-stands .lss-services, #lss-stands .lss-similaires { grid-template-columns: 1fr; } #lss-stands .lss-specs-grid { grid-template-columns: 1fr; } #lss-stands .lss-caracts-carte { padding: 24px 24px 24px; } #lss-stands .lss-contact { padding: 32px 24px; } } @media (max-width: 560px) { #lss-stands .lss-reassure { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { #lss-stands *, #lss-stands *::before, #lss-stands *::after { transition-duration: .001ms !important; } } #lss-stands a.lss-visuel, #lss-stands a.lss-zoom { display: block; color: inherit; text-decoration: none; } #lss-stands .lss-ico { display: inline-block; flex: 0 0 auto; background-color: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; vertical-align: middle; } /* ---- Fidélité du formulaire WPForms à la maquette (exigence Pascal 2026-07-30 : « le design du formulaire doit etre 100% en ligne avec la maquette »). Le formulaire réel (CRÉEZ VOTRE STAND, id 35785) remplace le mockup ; ces règles transposent le style .lss-form de la maquette sur le balisage WPForms. ---- */ #lss-stands .lss-contact .wpforms-container { margin: 0; } #lss-stands .lss-contact .wpforms-field-container { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } #lss-stands .lss-contact .wpforms-field { display: flex; flex-direction: column; padding: 0; } #lss-stands .lss-contact .wpforms-field-textarea { grid-column: 1 / -1; } #lss-stands .lss-contact .wpforms-field-label { display: block; font-size: 14px; font-weight: var(--e-global-typography-secondary-font-weight, 600); color: var(--gris); margin: 0 0 4px; line-height: 1.5; } /* la maquette ne marque pas l'obligatoire : pas d'astérisque, et les champs facultatifs portent leur étiquette en petites capitales, comme le mockup */ #lss-stands .lss-contact .wpforms-required-label { display: none; } #lss-stands .lss-contact .wpforms-field:not(:has(.wpforms-required-label)) .wpforms-field-label::after { content: "facultatif"; font-weight: var(--e-global-typography-text-font-weight, 400); color: var(--gris-clair); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; margin-left: 8px; } #lss-stands .lss-contact .wpforms-field input[type=text], #lss-stands .lss-contact .wpforms-field input[type=email], #lss-stands .lss-contact .wpforms-field input[type=tel], #lss-stands .lss-contact .wpforms-field select, #lss-stands .lss-contact .wpforms-field textarea { width: 100%; max-width: none; min-height: 52px; border: 1px solid var(--trait-fort); border-radius: 12px; padding: 0 16px; font-family: 'Jost', sans-serif; font-size: var(--e-global-typography-text-font-size, 16px); color: var(--gris); background: #fff; transition: border-color .25s var(--ressort), box-shadow .25s var(--ressort); } #lss-stands .lss-contact .wpforms-field textarea { min-height: 118px; padding: 12px 16px; resize: vertical; line-height: 1.5; } #lss-stands .lss-contact .wpforms-field input:focus, #lss-stands .lss-contact .wpforms-field select:focus, #lss-stands .lss-contact .wpforms-field textarea:focus { outline: none; border-color: var(--rose-profond); box-shadow: 0 0 0 3px rgba(20,14,92,.16); } #lss-stands .lss-contact .iti { width: 100%; } /* Sélecteur de pays du champ téléphone (intl-tel-input 28.0.4, embarqué par WPForms). Notre reset `#lss-stands *` porte un identifiant : il l'emporte sur les règles de la bibliothèque, qui sont en classes, et annule ses paddings. Résultat mesuré le 2026-08-01 : drapeau à 1 px de la bordure, flèche chevauchant le drapeau de 1 px, et dans la liste des pays le nom collé au drapeau. On rétablit les valeurs natives, exprimées avec les variables de la bibliothèque pour rester juste si elle change de gabarit. */ #lss-stands .lss-contact .iti__selected-country-primary { padding: 0 var(--iti-arrow-padding) 0 var(--iti-spacer-horizontal); } #lss-stands .lss-contact .iti__arrow { margin-left: var(--iti-arrow-padding); margin-top: -2px; } #lss-stands .lss-contact .iti__country-list .iti__flag { margin-right: var(--iti-spacer-horizontal); } #lss-stands .lss-contact .iti__country-check { margin-left: var(--iti-spacer-horizontal); } /* le conteneur et le
s'effacent (display:contents) : la grille de champs, le bouton et la note page-side deviennent voisins directs -> bouton et note sur la MEME ligne, comme le pied de formulaire de la maquette */ #lss-stands .lss-contact .wpforms-container, #lss-stands .lss-contact form.wpforms-form { display: contents; } #lss-stands .lss-contact .wpforms-field-container { margin-bottom: 4px; } #lss-stands .lss-contact .wpforms-submit-container { display: inline-flex; align-items: center; vertical-align: middle; margin-top: 4px; } #lss-stands .lss-contact .wpforms-submit { display: inline-flex; align-items: center; gap: 12px; font-family: 'Jost', sans-serif; font-size: var(--e-global-typography-text-font-size, 16px); font-weight: var(--e-global-typography-secondary-font-weight, 600); color: var(--e-global-color-lsblanc, #fff); text-transform: none; letter-spacing: normal; background: var(--rose-profond); border: none; border-radius: 8px; cursor: pointer; padding: 16px 32px; box-shadow: var(--ombre-accent); transition: transform .3s var(--ressort), box-shadow .3s var(--ressort); } #lss-stands .lss-contact .wpforms-submit::after { content: "\2192"; font-size: 18px; line-height: 1.05; } #lss-stands .lss-contact .wpforms-submit:hover { transform: translateY(-2px); box-shadow: var(--ombre-accent); } /* ---- Bandeau « Nos services et options » : gabarit Elementor 35865 déposé dans notre zone. Notre reset porte un identifiant, donc il l'emporte sur les règles d'Elementor et du thème, qui sont en classes : les marges du gabarit tombent à zéro. On rétablit ici l'espacement exact du bandeau des pages Néons, relevé sur /creer-votre-neon/ le 2026-08-01 (titre à 70 px du bloc précédent, titre de carte 18/11 dans une colonne à gap 20, paragraphe 17, soit 38 px entre l'image et le titre et 48 px entre le titre et le texte). Le cadrage 4/3 des visuels vient du même relevé (425 x 319) et de la maquette validée ; sans lui, nos sources 3/2 s'afficheraient plus plates que le bandeau néon. Les textes et les images, eux, restent pleinement éditables dans Elementor. Deux écarts mesurés le 2026-08-02 sur le site en ligne, tous deux de la même cause : le conteneur du gabarit et la marge basse du paragraphe. - Le titre de section TOUCHAIT les images (0 px contre 20 px sur la page néon). Chez l'agence, ces 20 px viennent du `gap` de `.e-con-inner`, qui est en flex colonne ; notre conteneur, lui, est un simple bloc : on reproduit la mécanique plutôt qu'une marge inventée, pour qu'un widget ajouté plus tard dans le gabarit hérite du même air. - Le paragraphe avait perdu sa marge basse native (1.5 em, soit 25 px pour du 17 px), visible entre deux cartes empilées en mobile : 40 px chez nous contre 65 px sur la page néon. Le rétablir ajoute aussi ces 25 px sous le bandeau, comme là-bas. ---- */ #lss-stands .elementor { margin-top: 72px; display: flex; flex-direction: column; gap: 16px; } #lss-stands .elementor .e-con .elementor-widget-heading { margin: 16px 0 12px; } #lss-stands .elementor .elementor-widget-text-editor p { margin: 16px 0 1.5em; } #lss-stands .elementor .elementor-widget-heading h2.elementor-heading-title { color: var(--bleu); } #lss-stands .elementor .elementor-widget-image img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; } /* la note du pied (24-48 h + confidentialité), posée par la page apres le formulaire */ #lss-stands .lss-contact .lss-form-note { display: inline-block; font-size: 14px; color: var(--gris-clair); text-wrap: pretty; line-height: 1.5; margin: 4px 0 0 24px; vertical-align: middle; } #lss-stands .lss-contact .lss-form-note span { display: block; } @media (max-width: 980px) { #lss-stands .lss-contact .wpforms-field-container { grid-template-columns: 1fr; } #lss-stands .lss-contact .lss-form-note { margin-left: 0; display: block; } } /* icônes (masques) */ #lss-stands .lss-ico-i2ccdc95d { width: 24px; height: 24px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20aria-hidden%3D%22true%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%3E%3Cpath%20d%3D%22M12%2020h9%22/%3E%3Cpath%20d%3D%22M16.5%203.5a2.1%202.1%200%200%201%203%203L7%2019l-4%201%201-4%2012.5-12.5z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20aria-hidden%3D%22true%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%3E%3Cpath%20d%3D%22M12%2020h9%22/%3E%3Cpath%20d%3D%22M16.5%203.5a2.1%202.1%200%200%201%203%203L7%2019l-4%201%201-4%2012.5-12.5z%22/%3E%3C/svg%3E"); } #lss-stands .lss-ico-i30ec065c { width: 24px; height: 24px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20aria-hidden%3D%22true%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%3E%3Cpath%20d%3D%22M3%2012a9%209%200%200%201%2015-6.7L21%208%22/%3E%3Cpath%20d%3D%22M21%203v5h-5%22/%3E%3Cpath%20d%3D%22M21%2012a9%209%200%200%201-15%206.7L3%2016%22/%3E%3Cpath%20d%3D%22M3%2021v-5h5%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20aria-hidden%3D%22true%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%3E%3Cpath%20d%3D%22M3%2012a9%209%200%200%201%2015-6.7L21%208%22/%3E%3Cpath%20d%3D%22M21%203v5h-5%22/%3E%3Cpath%20d%3D%22M21%2012a9%209%200%200%201-15%206.7L3%2016%22/%3E%3Cpath%20d%3D%22M3%2021v-5h5%22/%3E%3C/svg%3E"); } #lss-stands .lss-ico-ia461d3b5 { width: 18px; height: 18px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20aria-hidden%3D%22true%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20aria-hidden%3D%22true%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22/%3E%3C/svg%3E"); } #lss-stands .lss-ico-id1dc0eeb { width: 16px; height: 16px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20aria-hidden%3D%22true%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M5%2012h14M13%206l6%206-6%206%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20aria-hidden%3D%22true%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M5%2012h14M13%206l6%206-6%206%22/%3E%3C/svg%3E"); } #lss-stands .lss-ico-id7b7a970 { width: 24px; height: 24px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20aria-hidden%3D%22true%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%3E%3Cpath%20d%3D%22M13%202%204%2014h7l-2%208%209-12h-7l2-8z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20aria-hidden%3D%22true%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%3E%3Cpath%20d%3D%22M13%202%204%2014h7l-2%208%209-12h-7l2-8z%22/%3E%3C/svg%3E"); } #lss-stands .lss-ico-if3b97b96 { width: 24px; height: 24px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20aria-hidden%3D%22true%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%3E%3Cpath%20d%3D%22M17%2021v-2a4%204%200%200%200-4-4H5a4%204%200%200%200-4%204v2%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M23%2021v-2a4%204%200%200%200-3-3.9%22/%3E%3Cpath%20d%3D%22M16%203.1a4%204%200%200%201%200%207.8%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20aria-hidden%3D%22true%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%3E%3Cpath%20d%3D%22M17%2021v-2a4%204%200%200%200-4-4H5a4%204%200%200%200-4%204v2%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M23%2021v-2a4%204%200%200%200-3-3.9%22/%3E%3Cpath%20d%3D%22M16%203.1a4%204%200%200%201%200%207.8%22/%3E%3C/svg%3E"); } /* ============================================================ GRILLE DES LISTES DE PRODUITS Les cartes d'un meme rang ont la meme hauteur, donc leurs boutons s'alignent sur une ligne commune. Mesure du 2026-09-03, avant ce bloc : en mise en page flottante, les boutons du premier rang etaient decales de 40 px, et les cartes mesuraient 403 / 363 / 363 / 363 px. Les gouttieres POINTENT `theme.json` : elles se changent dans le fichier de charte, jamais ici. - 2026-09-03 ============================================================ */ .woocommerce ul.products, .woocommerce-page ul.products { display: grid; /* `minmax(0, 1fr)` et non `1fr` : la taille minimale d'une piste `1fr` est celle de son contenu, donc quatre cartes portant une image debordaient de 15 px des 800 px de large. Mesure du 2026-09-03, avant ce correctif. */ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wp--preset--spacing--70, 48px); } /* Le nettoyage de flottants de WooCommerce devient une CELLULE en grille. `ul.products::before` et `::after` portent `content: " "; display: table` : invisibles tant que la liste etait un bloc, ils occupent chacun une case des qu'elle devient une grille, et decalent toute la premiere ligne d'une colonne. Mesure du 2026-09-03 : la premiere carte partait a x=447 au lieu de x=150. Ils n'ont plus d'objet ici, puisqu'il n'y a plus de flottant a nettoyer. */ .woocommerce ul.products::before, .woocommerce ul.products::after, .woocommerce-page ul.products::before, .woocommerce-page ul.products::after { content: none; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { display: flex; flex-direction: column; float: none; width: auto; margin: 0; clear: none; } /* Le bouton est pousse en bas de sa carte : c'est ce geste, combine a la grille ci-dessus, qui aligne les boutons d'un meme rang. */ .woocommerce ul.products li.product .button, .woocommerce-page ul.products li.product .button { margin-top: auto; } /* Entre 768 et 1024 px, la gouttiere se resserre a 24 px. Sans ce palier, les 48 px du bureau rongeaient la largeur des cartes : 114 px au lieu de 132 a 800 px de fenetre, soit 14 % de moins qu'aujourd'hui. 24 est sur la grille du golden, et redonne exactement la largeur actuelle. */ @media (max-width: 1024px) { .woocommerce ul.products, .woocommerce-page ul.products { gap: var(--wp--preset--spacing--70, 48px) var(--wp--preset--spacing--50, 24px); } } @media (max-width: 768px) { .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--70, 48px) var(--wp--preset--spacing--40, 16px); } /* LE SELECTEUR D'ATTRIBUT EST REPRIS A DESSEIN, et ce n'est pas un artifice. `woocommerce-smallscreen.css` pose ici `float: left; width: 48%` sur `ul.products[class*="columns-"] li.product` : sa specificite depasse la regle ci-dessus, donc sans cette reprise les cartes redeviennent flottantes et tombent a 85 px de large dans une grille de deux colonnes - mesure du 2026-09-03. Ecrire une regle aussi precise que celle qu'on corrige vaut mieux qu'un `!important`, que ce chantier existe pour retirer. Notre feuille charge au rang 30 quand WooCommerce charge aux rangs 7 et 8 : a specificite egale, la derniere declaree gagne, et c'est la notre. */ .woocommerce ul.products[class*="columns-"] li.product, .woocommerce-page ul.products[class*="columns-"] li.product { float: none; width: auto; margin: 0; } } /* ============================================================================ LES LISTES DE PRODUITS PASSENT EN GRIS CLAIR (2026-09-04) DEMANDE DE PASCAL, 2026-09-04, verbatim : « je veux que les cartes et le fond de page soit gris clair ». Elle corrige deux propositions de la meme journee qui posaient un fond BLANC sur la carte : ce n'est pas ce qui est voulu. POURQUOI DEUX DECLARATIONS SUFFISENT. La carte produit n'a AUCUN fond a elle - mesure du 2026-09-04 au rendu : `rgba(0, 0, 0, 0)`. Ce que l'oeil prenait pour un rectangle blanc etait le fond de la page. Peindre la page suffit donc a peindre les cartes ; il n'y a rien a poser sur `li.product`, et poser quoi que ce soit y serait une regression. L'OMBRE AU REPOS TOMBE, arbitrage de Pascal le meme jour (variante « a plat ») : une ombre cerne une surface, et quand la surface a la couleur de son voisinage elle cerne un objet qu'on ne voit pas. Le golden § 7 prescrivait l'ombre « posee » sur la carte produit : cette exception est inscrite au golden avec ce depot. L'ombre au SURVOL n'est pas touchee - c'est le seul moment ou la carte se detache, et elle doit le faire. CE QUI N'EST PAS TOUCHE : l'alignement des rangs et le bouton pousse en bas (§ 7 ter, depose le 03/09), les prix, les libelles, les liens, le tunnel de commande, et toutes les pages qui ne portent pas de liste de produits. PORTEE MESUREE : 17 adresses de liste (les 15 controlees avant depot, plus deux categories aujourd'hui vides - /creation-graphique-pao/ et /neons-customises/ - verifiees apres coup : elles recoivent le gris comme les autres). Controle avant depot : fond `#F7F7F9` partout, carte au meme fond, aucune ombre au repos, rangs alignes, contraste du titre 15,74 et du prix 4,78 - conformes. LA VALEUR EST PILOTABLE DEPUIS L'ADMINISTRATION (2026-09-04, second depot du jour). Elle ne l'etait pas : elle etait ecrite en dur ici, donc modifiable par nous seuls - contraire a l'objectif de Pascal du 2026-09-03. La couleur globale `lsfondse` « Fond de section » a ete ajoutee au kit Elementor, et cette regle pointe dessus. Un tiers change le gris des listes depuis l'ecran des couleurs globales, sans code. La valeur en repli reste `#F7F7F9` : si la couleur globale disparaissait du kit, le fond ne tomberait pas en blanc. Preuves et planche : `livrables/cartes-produit-fond/`. ============================================================================ */ body.tax-product_cat, body.post-type-archive-product { background-color: var(--e-global-color-lsfondse, #F7F7F9); /* jeton `fond-section` du golden § 1 */ } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { box-shadow: none; }