/* ========================================================================== ACCROKITE — SURCHARGES ELEMENTOR ET WOOCOMMERCE Objectif : que les widgets natifs adoptent le design system sans avoir à re-styler chaque élément à la main dans l'éditeur. Chargé après components.css. ========================================================================== */ /* -------------------------------------------------------------------------- 1. CONTENEURS -------------------------------------------------------------------------- */ .e-con, .e-con-inner { --container-max-width: var(--ak-content-max); } .elementor-section.elementor-section-boxed > .elementor-container { max-width: var(--ak-content-max); } /* Gouttière latérale cohérente sur tous les paliers */ .elementor-section-wrap > .elementor-section > .elementor-container, body > .e-con > .e-con-inner { padding-inline: 0; } @media (max-width: 1024px) { .e-con { --container-default-padding-inline: var(--ak-gutter-tablet); } } @media (max-width: 640px) { .e-con { --container-default-padding-inline: var(--ak-gutter-mobile); } } /* -------------------------------------------------------------------------- 2. BOUTONS ELEMENTOR ATTENTION — Elementor pose les classes personnalisées sur l'ENVELOPPE du widget (.elementor-widget-button), jamais sur le lien .elementor-button. Les variantes se déclarent donc en descendant : `.ak-b-primary .elementor-button`. Poser directement .ak-btn--primary sur un widget produirait deux boutons superposés (l'enveloppe stylée + le lien stylé). Variantes disponibles dans l'onglet Avancé > Classes CSS : (aucune) → CTA turquoise, le défaut ak-b-primary → bleu plein ak-b-ghost → contour blanc ak-b-link → lien souligné ak-b-stack → pleine largeur sur mobile -------------------------------------------------------------------------- */ .elementor-widget-button.ak-b-primary .elementor-button { background-color: var(--ak-primary); color: var(--ak-primary-foreground); } .elementor-widget-button.ak-b-primary .elementor-button:hover { background-color: var(--ak-primary-hover); color: #fff; } /* Tous les boutons portent une bordure de 1 px (transparente par défaut) : le contour du bouton fantôme ne le rendait plus haut de 2 px que son voisin plein, d'où deux boutons côte à côte qui ne s'alignaient pas. */ .elementor-button, .elementor-button-link { border: 1px solid transparent; } .elementor-widget-button.ak-b-ghost .elementor-button { background-color: var(--ak-card); color: var(--ak-primary); border: 1px solid var(--ak-border); } .elementor-widget-button.ak-b-ghost .elementor-button:hover { background-color: var(--ak-surface-light); color: var(--ak-primary-hover); } .elementor-widget-button.ak-b-link .elementor-button { background: none; box-shadow: none; color: var(--ak-primary); padding: 0; border-radius: 0; text-transform: none; letter-spacing: 0; border-bottom: 1px solid currentColor; transition: color var(--ak-duration) var(--ak-ease), border-bottom-color var(--ak-duration) var(--ak-ease); } /* Le survol ne faisait que passer de #0064A8 a #005490 : 10% d'ecart sur fond blanc, imperceptible. Le texte prend maintenant la couleur d'encre et le souligne double d'epaisseur en turquoise — le retour est net sans nuire au contraste (les deux teintes restent au-dessus de 4.5:1 sur blanc). */ .elementor-widget-button.ak-b-link .elementor-button:hover, .elementor-widget-button.ak-b-link .elementor-button:focus-visible { transform: none; box-shadow: none; color: var(--ak-foreground); border-bottom-width: 2px; border-bottom-color: var(--ak-cta); } @media (max-width: 640px) { .ak-b-stack, .ak-b-stack .elementor-button { width: 100%; } } .elementor-button, .elementor-button-link { font-family: var(--ak-font-body); font-size: var(--ak-size-ui); font-weight: var(--ak-weight-semibold); letter-spacing: .02em; text-transform: uppercase; border-radius: var(--ak-radius-pill); box-shadow: var(--ak-shadow-button); transition: background-color var(--ak-duration) var(--ak-ease), transform var(--ak-duration) var(--ak-ease), box-shadow var(--ak-duration) var(--ak-ease); } /* Défaut : tout bouton sans variante déclarée est un CTA turquoise. */ .elementor-widget-button:not([class*="ak-b-"]) .elementor-button, .elementor-widget-button.ak-b-stack:not([class*="ak-b-primary"]):not([class*="ak-b-ghost"]):not([class*="ak-b-link"]) .elementor-button { background-color: var(--ak-cta); color: var(--ak-cta-foreground); } .elementor-button:hover { transform: translateY(-1px); box-shadow: 0 8px 14px rgba(13,36,51,.20); } .elementor-widget-button:not([class*="ak-b-primary"]):not([class*="ak-b-ghost"]):not([class*="ak-b-link"]) .elementor-button:hover { background-color: var(--ak-cta-hover); color: var(--ak-cta-foreground); } /* -------------------------------------------------------------------------- 3. FORMULAIRES ELEMENTOR PRO ET JETFORMBUILDER -------------------------------------------------------------------------- */ /* Le cadre du champ se pose sur le contrôle lui-même. Pour une liste déroulante, Elementor enveloppe le masqués — le chevron n'a plus rien à annoter. */ .ak-finder .select-caret-down-wrapper { display: none; } .ak-finder .elementor-select-wrapper select { padding-right: var(--ak-space-4); } .elementor-field-group > label, .jet-form-builder__label { font-size: var(--ak-size-small); font-weight: var(--ak-weight-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--ak-muted-foreground); } .elementor-message.elementor-message-success { color: var(--ak-primary); } .elementor-message.elementor-message-danger { color: #C0392B; } /* Elementor pose une gouttière négative (-5px) sur l'enveloppe des champs : sur mobile la ligne dépasse de 5px et fait apparaître un défilement horizontal. On neutralise la gouttière extérieure, en gardant l'espace intérieur entre les champs. */ .elementor-widget-form .elementor-form-fields-wrapper { margin-inline: 0; max-width: 100%; } .elementor-widget-form .elementor-form-fields-wrapper > .elementor-field-group:first-child { padding-inline-start: 0; } .elementor-widget-form .elementor-form-fields-wrapper > .elementor-field-group:last-child { padding-inline-end: 0; } /* Pictos SVG des listes a icones : les fichiers portent un fill blanc en dur (ancienne charte sombre), invisible sur fond clair. La couleur du widget reprend la main. */ .elementor-icon-list-icon svg [class^="st"], .elementor-icon-list-icon svg path, .elementor-icon-list-icon svg polygon, .elementor-icon-list-icon svg circle, .elementor-icon-list-icon svg rect { fill: var(--ak-primary) !important; } /* -------------------------------------------------------------------------- 4. WIDGETS COURANTS -------------------------------------------------------------------------- */ .elementor-widget-divider { --divider-color: var(--ak-border); } .elementor-widget-icon-box .elementor-icon, .elementor-widget-icon-list .elementor-icon-list-icon i { color: var(--ak-primary); } .elementor-widget-heading .elementor-heading-title { font-family: var(--ak-font-display); } .elementor-tab-title, .elementor-accordion-title { font-family: var(--ak-font-display); } .elementor-widget-image img { border-radius: var(--ak-radius-lg); } .elementor-widget-image.ak-image-plain img { border-radius: 0; } /* Onglets et accordéons — Crocoblock JetTabs inclus */ .jet-tabs__control, .jet-accordion__control { font-family: var(--ak-font-body); font-weight: var(--ak-weight-semibold); border-radius: var(--ak-radius-pill); } .jet-tabs__control.active-tab { background: var(--ak-primary); color: #fff; } /* Listings JetEngine — les cartes générées adoptent le style de carte */ .jet-listing-grid__item > .elementor { height: 100%; } /* -------------------------------------------------------------------------- 5. WOOCOMMERCE -------------------------------------------------------------------------- */ .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { background: var(--ak-card); border: 1px solid var(--ak-border); border-radius: var(--ak-radius-xl); box-shadow: var(--ak-shadow-card); overflow: hidden; padding: 0 0 var(--ak-space-5); transition: transform var(--ak-duration) var(--ak-ease), box-shadow var(--ak-duration) var(--ak-ease); } .woocommerce ul.products li.product:hover { transform: translateY(-3px); box-shadow: var(--ak-shadow-float); } .woocommerce ul.products li.product img { border-radius: 0; margin-bottom: var(--ak-space-4); } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--ak-font-display); font-weight: var(--ak-weight-display); font-size: var(--ak-size-card); line-height: var(--ak-lh-card); color: var(--ak-foreground); padding-inline: var(--ak-space-5); } .woocommerce ul.products li.product .price, .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--ak-primary); font-family: var(--ak-font-display); font-weight: var(--ak-weight-display); font-size: var(--ak-size-card); } .woocommerce ul.products li.product .price { padding-inline: var(--ak-space-5); } .woocommerce ul.products li.product .price del { color: var(--ak-muted-foreground); font-weight: 400; } /* Boutons WooCommerce alignés sur le CTA */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt { background-color: var(--ak-cta); color: var(--ak-cta-foreground); font-family: var(--ak-font-body); font-size: var(--ak-size-ui); font-weight: var(--ak-weight-semibold); letter-spacing: .02em; text-transform: uppercase; border-radius: var(--ak-radius-pill); padding: 0 var(--ak-space-7); height: var(--ak-control-sm); line-height: var(--ak-control-sm); box-shadow: var(--ak-shadow-button); transition: background-color var(--ak-duration) var(--ak-ease), transform var(--ak-duration) var(--ak-ease); } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background-color: var(--ak-cta-hover); color: var(--ak-cta-foreground); transform: translateY(-1px); } .woocommerce a.button.ak-btn--ghost { background: var(--ak-card); color: var(--ak-primary); border: 1px solid var(--ak-border); } /* Badge promo */ .woocommerce span.onsale { background: var(--ak-cta); color: #fff; font-family: var(--ak-font-body); font-size: var(--ak-size-small); font-weight: var(--ak-weight-semibold); letter-spacing: var(--ak-tracking-eyebrow); text-transform: uppercase; border-radius: var(--ak-radius-pill); min-width: auto; min-height: auto; line-height: 1; padding: 8px 14px; } /* Notices */ .woocommerce-message, .woocommerce-info, .woocommerce-error { background: var(--ak-card); border: 1px solid var(--ak-border); border-top-width: 3px; border-radius: var(--ak-radius-lg); box-shadow: var(--ak-shadow-card); color: var(--ak-foreground); font-size: var(--ak-size-body); } .woocommerce-message { border-top-color: var(--ak-cta); } .woocommerce-info { border-top-color: var(--ak-primary); } .woocommerce-error { border-top-color: #C0392B; } .woocommerce-message::before, .woocommerce-info::before { color: var(--ak-primary); } /* Onglets de fiche produit */ .woocommerce div.product .woocommerce-tabs ul.tabs { border-bottom: 1px solid var(--ak-border); padding: 0; } .woocommerce div.product .woocommerce-tabs ul.tabs::before { border-color: var(--ak-border); } .woocommerce div.product .woocommerce-tabs ul.tabs li { background: transparent; border: 0; border-radius: 0; margin: 0 var(--ak-space-6) 0 0; } .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li a { font-family: var(--ak-font-body); font-weight: var(--ak-weight-semibold); font-size: var(--ak-size-ui); text-transform: uppercase; letter-spacing: .04em; color: var(--ak-muted-foreground); padding: var(--ak-space-4) 0; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--ak-primary); box-shadow: inset 0 -3px 0 var(--ak-primary); } /* Quantité, panier, tunnel */ .woocommerce .quantity .qty { border: 1px solid var(--ak-border); border-radius: var(--ak-radius-lg); height: var(--ak-control-sm); box-shadow: var(--ak-shadow-field); } .woocommerce table.shop_table { border: 1px solid var(--ak-border); border-radius: var(--ak-radius-xl); border-collapse: separate; border-spacing: 0; overflow: hidden; } .woocommerce table.shop_table th { font-family: var(--ak-font-body); font-size: var(--ak-size-small); letter-spacing: .06em; text-transform: uppercase; color: var(--ak-muted-foreground); } .woocommerce-checkout #payment { background: var(--ak-surface-light); border-radius: var(--ak-radius-xl); } .woocommerce-checkout #payment div.payment_box { background: var(--ak-card); border-radius: var(--ak-radius-md); } .woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--ak-card); } /* Fil d'Ariane */ .woocommerce .woocommerce-breadcrumb { font-size: var(--ak-size-ui); color: var(--ak-muted-foreground); } .woocommerce .woocommerce-breadcrumb a { color: var(--ak-muted-foreground); } .woocommerce .woocommerce-breadcrumb a:hover { color: var(--ak-primary); } /* Espace client */ .woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; } .woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: var(--ak-space-3) var(--ak-space-4); border-radius: var(--ak-radius-md); color: var(--ak-foreground); font-weight: var(--ak-weight-semibold); font-size: var(--ak-size-ui); text-decoration: none; } .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a, .woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--ak-surface-light); color: var(--ak-primary); } /* Sur mobile, le bouton d'ajout au panier occupe toute la largeur */ @media (max-width: 640px) { .woocommerce div.product form.cart .button { width: 100%; margin-inline: 0; } /* Vente à l'unité : WooCommerce rend la quantité en champ caché, mais son enveloppe restait dans le flux et décalait le bouton de 10 px. */ .woocommerce div.product form.cart .quantity:has(> input[type="hidden"]) { display: none; } .woocommerce div.product .elementor-add-to-cart form.cart:has(.quantity > input[type="hidden"]) .single_add_to_cart_button { margin-inline: 0; } /* « UGS N/D » et « Catégorie » se touchaient. */ .woocommerce div.product .product_meta { gap: var(--ak-space-2) var(--ak-space-4); } } /* -------------------------------------------------------------------------- 5 bis. BOUCLE PRODUITS — hiérarchie et alignement Constaté le 07/08/2026 sur l'archive : le titre de boucle héritait de la couleur de lien (bleu) et de la taille des titres de carte, si bien que titre et prix avaient le même poids visuel. Les cartes d'une même rangée ne finissaient pas non plus à la même hauteur, le bouton se calant sous le texte plutôt qu'en bas de carte. -------------------------------------------------------------------------- */ .woocommerce ul.products li.product { display: flex; flex-direction: column; } .woocommerce ul.products li.product > a[href]:not(.button) { display: block; color: inherit; text-decoration: none; } .woocommerce ul.products li.product .woocommerce-loop-product__title { color: var(--ak-foreground); font-size: var(--ak-size-card); line-height: var(--ak-lh-card); margin: 0 0 var(--ak-space-2); } .woocommerce ul.products li.product a:hover .woocommerce-loop-product__title { color: var(--ak-primary); } .woocommerce ul.products li.product .price { display: block; font-size: var(--ak-size-body); line-height: var(--ak-lh-body); margin-bottom: var(--ak-space-4); } /* Le bouton se colle au bas de la carte : toutes les cartes d'une rangée alignent leur appel à l'action, quelle que soit la longueur du titre. */ .woocommerce ul.products li.product .button { /* margin-top:auto colle le bouton au bas de la carte, pour que toutes les cartes d'une rangee alignent leur appel a l'action. Les marges laterales passent en auto : le bouton etait cale a gauche (21px a gauche contre 202px a droite dans une carte de 404px). */ /* La carte est en display:block : des marges auto ne centrent un bouton que s'il est lui-meme block et de largeur definie. align-self couvre le cas ou la carte passe en flex. */ display: block; width: fit-content; margin: auto auto 0; align-self: center; } .woocommerce ul.products li.product .woocommerce-loop-product__link { flex: 0 0 auto; } /* Bouton d'ajout au panier désactivé (variation non choisie) : gris neutre plutôt que la teinte délavée du CTA. */ .woocommerce div.product form.cart .button.disabled, .woocommerce div.product form.cart .button:disabled { background-color: var(--ak-border); color: var(--ak-muted-foreground); box-shadow: none; cursor: not-allowed; } /* Barre de tri de l'archive */ .woocommerce .woocommerce-ordering select { border: 1px solid var(--ak-border); border-radius: var(--ak-radius-lg); height: var(--ak-control-sm); padding-inline: var(--ak-space-4); background: var(--ak-card); font-size: var(--ak-size-ui); } .woocommerce .woocommerce-result-count { color: var(--ak-muted-foreground); font-size: var(--ak-size-ui); } /* Les widgets produits d'Elementor écrivent leur propre CSS à partir des valeurs globales du kit : le titre de boucle hérite donc de la typographie « Primary » (Outfit 38 px) et de la couleur primaire. C'est juste pour un titre de page, beaucoup trop pour une carte dans une grille de quatre. Ces règles reprennent la main avec la même spécificité que celles générées. Vérifié le 07/08/2026 : sans le préfixe de widget, la règle est perdante. */ .elementor-widget-woocommerce-archive-products.elementor-wc-products ul.products li.product .woocommerce-loop-product__title, .elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .woocommerce-loop-product__title, .elementor-widget-woocommerce-product-related.elementor-wc-products ul.products li.product .woocommerce-loop-product__title { font-family: var(--ak-font-display); font-weight: var(--ak-weight-display); font-size: var(--ak-size-card); line-height: var(--ak-lh-card); color: var(--ak-foreground); } .elementor-widget-woocommerce-archive-products.elementor-wc-products ul.products li.product .price, .elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price, .elementor-widget-woocommerce-product-related.elementor-wc-products ul.products li.product .price { font-family: var(--ak-font-display); font-size: var(--ak-size-body); line-height: var(--ak-lh-body); color: var(--ak-primary); } .elementor-widget-woocommerce-archive-products.elementor-wc-products ul.products li.product a:hover .woocommerce-loop-product__title { color: var(--ak-primary); } /* Boutons WooCommerce : hauteur fixe + line-height + padding vertical hérité de Woo faisaient déborder le libellé sous la pastille (« Mise à jour le panier », « Commander »). On centre en flex et on neutralise le padding vertical, la hauteur reste pilotée par --ak-control-sm. */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt { display: inline-flex; align-items: center; justify-content: center; padding-block: 0; line-height: 1; min-height: var(--ak-control-sm); height: auto; text-align: center; } .woocommerce .wc-proceed-to-checkout a.checkout-button, .woocommerce #place_order { width: 100%; } /* La galerie produit (flexslider + zoom jQuery) déborde d'un pixel sur mobile : le calque de zoom est en position absolue et arrondit à l'excès. */ .woocommerce-product-gallery, .woocommerce-product-gallery__wrapper, .woocommerce-product-gallery__image { max-width: 100%; } /* Le calque de zoom (img.zoomImg, 1200 px) est injecté en position absolue dans la vignette : sans découpe, il pousse la page d'un pixel sur mobile. */ .woocommerce-product-gallery__image { overflow: hidden; } img.zoomImg { max-width: none; } /* -------------------------------------------------------------------------- 9. HÉBREU — mise en page de droite à gauche WPML pose dir="rtl" et la classe .rtl sur pour l'hébreu. Elementor gère l'essentiel, mais quelques éléments dessinés « à la main » restent orientés : le dégradé du hero part de la gauche, les flèches de lien pointent à droite, les ombres portées sont décalées. -------------------------------------------------------------------------- */ /* Le hero pose la photo à droite et le voile clair à gauche : en hébreu, tout doit basculer, sinon le texte se retrouve sur la photo. */ [dir="rtl"] .elementor-element > .elementor-background-overlay { transform: scaleX(-1); } [dir="rtl"] .e-con[data-settings*="background_position"] { background-position-x: left !important; } /* Flèches et chevrons des liens « See the gear → » */ [dir="rtl"] .elementor-widget-button.ak-b-link .elementor-button::after, [dir="rtl"] .woocommerce a.button::after { transform: scaleX(-1); display: inline-block; } /* Le retrait des puces et des listes suit le sens de lecture */ [dir="rtl"] .elementor-widget-icon-list .elementor-icon-list-item { flex-direction: row-reverse; } /* Le rail d'onglets produit et le fil d'Ariane */ [dir="rtl"] .woocommerce div.product .woocommerce-tabs ul.tabs li { margin: 0 0 0 var(--ak-space-6); } [dir="rtl"] .woocommerce .woocommerce-breadcrumb { direction: rtl; } /* -------------------------------------------------------------------------- FAQ : widget Accordeon Elementor habille comme les cartes du site -------------------------------------------------------------------------- */ .ak-faq .elementor-accordion { display: flex; flex-direction: column; gap: .85rem; } .ak-faq .elementor-accordion .elementor-accordion-item { background: var(--ak-card); border: 0; border-radius: 12px; box-shadow: 0 1px 2px rgba(11,37,69,.05), 0 10px 24px -20px rgba(11,37,69,.35); overflow: hidden; } .ak-faq .elementor-accordion .elementor-accordion-item + .elementor-accordion-item { border-top: 0; } .ak-faq .elementor-accordion .elementor-tab-title { padding: 1.05rem 1.4rem; font-family: var(--ak-font-body); font-size: .98rem; font-weight: 600; color: var(--ak-foreground); border: 0; } .ak-faq .elementor-accordion .elementor-tab-title .elementor-accordion-icon { color: var(--ak-foreground); font-size: .9rem; } .ak-faq .elementor-accordion .elementor-tab-content { padding: 0 1.4rem 1.25rem; border: 0; font-size: .9rem; color: var(--ak-muted-foreground); max-width: 82ch; } .ak-faq .elementor-accordion .elementor-tab-content p { margin: 0; } .ak-faq .elementor-accordion .elementor-tab-title .elementor-accordion-title, .ak-faq .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-title { font-family: var(--ak-font-body); font-size: .98rem; font-weight: 600; line-height: 1.4; color: var(--ak-foreground); text-decoration: none; } .ak-faq .elementor-accordion .elementor-tab-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .ak-faq .elementor-accordion .elementor-tab-title .elementor-accordion-icon { width: auto; order: 2; } /* -------------------------------------------------------------------------- TABLEAUX : widget Table de JetElements, dans la charte -------------------------------------------------------------------------- */ .ak-table .jet-table { width: 100%; border-collapse: collapse; background: var(--ak-card); border: 1px solid var(--ak-border); border-radius: var(--ak-radius-lg); overflow: hidden; } .ak-table .jet-table__head-cell { background: var(--ak-surface-light); font-size: var(--ak-size-small); font-weight: var(--ak-weight-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--ak-primary); text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--ak-border); } .ak-table .jet-table__body-cell { padding: .7rem 1rem; font-size: var(--ak-size-body); color: var(--ak-foreground); border-bottom: 1px solid var(--ak-border); text-align: left; } .ak-table .jet-table__body-row:last-child .jet-table__body-cell { border-bottom: 0; } .ak-table .jet-table__body-row:hover .jet-table__body-cell { background: var(--ak-background); } /* Barre d'outils de l'archive boutique : le compteur de résultats (24 px de haut) et le sélecteur de tri (44 px) partageaient la même ligne sans être alignés, et la grille collait à 16 px sous eux. */ .elementor-widget-woocommerce-archive-products .woocommerce-result-count, .elementor-widget-woocommerce-products .woocommerce-result-count { margin: 0; line-height: var(--ak-control-sm); } .elementor-widget-woocommerce-archive-products .woocommerce-ordering, .elementor-widget-woocommerce-archive-products .woocommerce-result-count { margin-bottom: var(--ak-space-6); } .elementor-widget-woocommerce-archive-products ul.products li.product .woocommerce-loop-product__title { padding-inline: var(--ak-space-5); } /* Bouton des cartes produit (archives et grilles Elementor). Les widgets produits d'Elementor remettent la carte en display:block et son padding à zéro : le bouton se retrouvait collé au bord bas, centré, et d'une largeur différente selon son libellé (« Select options » 180 px, « Add to cart » 155 px). Il prend maintenant toute la largeur intérieure de la carte, aligné sur le titre et le prix, dans le bleu des boutons de listing. */ .elementor-widget-woocommerce-archive-products.elementor-wc-products ul.products li.product, .elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product, .elementor-widget-woocommerce-product-related.elementor-wc-products ul.products li.product { display: flex; flex-direction: column; padding: 0 0 var(--ak-space-5); } .elementor-widget-woocommerce-archive-products.elementor-wc-products ul.products li.product .button, .elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .button, .elementor-widget-woocommerce-product-related.elementor-wc-products ul.products li.product .button { display: flex; align-items: center; justify-content: center; width: auto; align-self: stretch; margin: auto var(--ak-space-5) 0; min-height: var(--ak-control-sm); padding-inline: var(--ak-space-4); border-radius: var(--ak-radius-pill); background-color: var(--ak-primary); color: var(--ak-primary-foreground); font-size: var(--ak-size-ui); font-weight: var(--ak-weight-semibold); letter-spacing: .02em; text-transform: uppercase; box-shadow: none; } .elementor-widget-woocommerce-archive-products.elementor-wc-products ul.products li.product .button:hover, .elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .button:hover, .elementor-widget-woocommerce-product-related.elementor-wc-products ul.products li.product .button:hover { background-color: var(--ak-foreground); color: #fff; transform: none; } /* Le prix garde l'espace du bas constant avant le bouton, quel que soit le nombre de lignes du titre. */ .elementor-widget-woocommerce-archive-products.elementor-wc-products ul.products li.product .price, .elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price { margin-bottom: var(--ak-space-5); } /* -------------------------------------------------------------------------- GRILLES PRODUITS SUR MOBILE En fin de feuille : les règles de typographie responsive de la section 5 ter (même spécificité) doivent passer avant. -------------------------------------------------------------------------- */ @media (max-width: 640px) { /* Grilles produits (boutique, produits liés) : une colonne de cartes de 343 px faisait 6 000 px de défilement sur la boutique ; deux colonnes, avec les marges internes resserrées à la mesure. */ .elementor-wc-products[class*="elementor-widget-woocommerce-"].elementor-grid-mobile-1 ul.products { --grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr)); --grid-column-gap: var(--ak-space-3); column-gap: var(--ak-space-3); } .elementor-wc-products[class*="elementor-widget-woocommerce-"] ul.products li.product .woocommerce-loop-product__title, .elementor-wc-products[class*="elementor-widget-woocommerce-"] ul.products li.product .price { padding-inline: var(--ak-space-3); } .elementor-wc-products[class*="elementor-widget-woocommerce-"] ul.products li.product .woocommerce-loop-product__title { font-size: 15px; line-height: 1.3; } .elementor-wc-products[class*="elementor-widget-woocommerce-"] ul.products li.product .price { font-size: 15px; line-height: 1.35; } .elementor-wc-products[class*="elementor-widget-woocommerce-"] ul.products li.product .button { margin-inline: var(--ak-space-3); padding-inline: var(--ak-space-2); font-size: 11px; letter-spacing: 0; white-space: nowrap; } } /* Galerie produit : WooCommerce la rend en opacity:0 (style inline) et compte sur son JS pour la révéler après l'init de flexslider. Si un script échoue ou tarde sur le téléphone, la fiche reste sans image. On force l'affichage ; le JS ne fait plus que le slider. */ .woocommerce div.product div.images.woocommerce-product-gallery { opacity: 1 !important; } .woocommerce div.product div.images.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:not(:first-child) { display: none; } /* avant l'init : une seule image, pas la pile */ /* Mobile : boutons un peu moins larges en padding pour garder les libellés longs sur une ligne. */ @media (max-width: 640px) { .elementor-button, .ak-btn { padding-left: 20px; padding-right: 20px; } } /* Mobile : cadres des formulaires Elementor (cours, Kite & Stay, IKO Pro) — padding 30/32 px ramené à 16 px pour des champs pleine largeur. */ @media (max-width: 640px) { .elementor-widget-form > .elementor-widget-container { padding: 22px 16px !important; } .e-con:has(> .elementor-widget-form) { padding-left: 16px !important; padding-right: 16px !important; } .e-con:has(> .elementor-widget-form) > .elementor-widget-form > .elementor-widget-container { padding-left: 0 !important; padding-right: 0 !important; } } /* Vidéo de fond (hero) — ak-bg-video-crop. YouTube impose depuis 2023 son bandeau de titre et son logo sur les lectures intégrées : Elementor dimensionne l'iframe exactement à la taille du conteneur, donc les deux restent visibles. On agrandit l'iframe de 22 % à l'intérieur du conteneur (qui masque le débordement) pour les repousser hors champ. Le centrage en pourcentage remplace celui qu'Elementor calcule en pixels, il reste exact à toutes les tailles. */ .elementor-background-video-container iframe, .elementor-background-video-container .elementor-background-video-embed { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) scale(1.22) !important; }