/* ============================================================================ Habillage « Hold-Up » — anniversaire Spliff, 16 → 20 septembre 2026 inclus. Le dégradé vient de la maquette du pôle com (HABILLAGE SITE.pdf, Illustrator). Il n'a pas été relevé à l'œil : les arrêts ont été lus dans les données vectorielles du PDF (shading CMYK à 4 arrêts, bornes 0 / 33,1 / 70,4 / 100 %), puis les valeurs sRGB mesurées sur le rendu. Le bandeau promo et les boutons de la maquette portent EXACTEMENT le même dégradé : c'est un seul jeton. ── Trois règles, chacune tirée d'un incident du dépôt ────────────────────── 1. ON PEINT DES SÉLECTEURS, JAMAIS DES VARIABLES. `--scw-blue`, `--sqa-blue` et `--slv2-accent` servent aussi à des `color:` et des `border-color:` ; un `linear-gradient` dans l'une d'elles casse le rendu. Repeindre `--slv2-accent` embarquerait au passage le bouton « coupon », qui est un bouton secondaire. 2. TOUT EN `!important`. Les cibles sont défendues par plus fort que l'ordre des feuilles : styles inline PHP/JS, `!important` généralisé de sl-checkout-v2.css, et surtout le Kit Elementor, qui pilote hors dépôt la couleur du bouton fiche produit et celle du tiroir panier. 3. ANCRE PRÉFIXÉE `spliff-`. LiteSpeed UCSS supprime tout sélecteur absent du HTML de la page de référence. `body.spliff-*` a été ajouté à l'allowlist (mu-plugins/spliff-litespeed-ucss.php) — la forme préfixée doit y être listée à part, comme `html.sbd-*` l'est à côté de `.sbd-*`. ── Ce qui n'est VOLONTAIREMENT pas repeint ──────────────────────────────── · `.scw-redeem-btn` (« utiliser mon cashback ») : bouton secondaire, contour noir, il doit le rester pour ne pas concurrencer le bouton de commande. · `.spliff-em-strip` : bandeau d'information, `pointer-events:none`. · Tous les états désactivés : voir la note sur la rupture de stock plus bas. · Le CTA « JE SHOPPE » du hero : le texte est incrusté dans les .webp du carrousel, il n'existe aucun sélecteur. C'est au pôle com. ========================================================================== */ body.spliff-anniv-hu { --spliff-hu-grad: linear-gradient(90deg, #AD1892 0%, #985BB3 37%, #F2542F 80%, #EF3229 100%); --spliff-hu-grad-hover: linear-gradient(90deg, #9F1686 0%, #8C54A5 37%, #DF4D2B 80%, #DC2E26 100%); --spliff-hu-disabled: #E4E3DE; --spliff-hu-disabled-t: #9A9A96; /* Même jeton, vertical : poignée latérale du tiroir (haute et étroite). */ --spliff-hu-grad-v: linear-gradient(180deg, #AD1892 0%, #985BB3 37%, #F2542F 80%, #EF3229 100%); --spliff-hu-magenta: #AD1892; } /* ── 1. Barre d'achat collée en bas de la fiche produit (spliff-pack-mix) ──── Le fond bleu est porté par la BARRE, pas par le bouton : `.spc-btn` est transparent et ne pose qu'un anneau blanc. Peindre le bouton donnerait un dégradé enfermé dans un anneau, posé sur un fond bleu resté plat — c'est donc `.spc-bar` qu'on repeint, et l'anneau blanc ressort tel quel sur le dégradé. `:not(.spc-mix--compact)` est indispensable : en mode compact, la même barre est réutilisée À L'INTÉRIEUR de la modale de choix de format, où elle n'est plus collée en bas et où le CTA est déjà repeint par la règle 4. */ body.spliff-anniv-hu .spc-mix:not(.spc-mix--compact) .spc-bar { background: var(--spliff-hu-grad) !important; } /* ── 2. Bouton « Ajouter » des cartes produit (listings, best-sellers) ─────── Comportement VOLONTAIREMENT différent selon l'appareil : · tactile → dégradé AU REPOS. Le survol n'existe pas sur un écran tactile ; un habillage qui ne vivrait qu'au `:hover` serait invisible pour la majorité du trafic, et c'est ce que montre la maquette mobile. · pointeur fin (desktop) → dégradé AU SURVOL seulement. La grille de listing garde ses boutons sobres, comme aujourd'hui, et se colore au passage de la souris. On ne repeint donc jamais au repos sur desktop, plutôt que de repeindre puis d'annuler : réécrire l'état de repos obligerait à recopier ici les couleurs de quick-add.css (#fff / #d8d8d4 / #141416), qui divergeraient au premier changement là-bas. `hover: none` ET `pointer: coarse` en OU : un hybride (écran tactile + souris) tombe dans la branche desktop, ce qui est le bon défaut — il a un vrai survol. Le bouton est injecté en JS par spliff-quick-add ; il est donc absent du HTML initial, d'où l'entrée `.spliff-*` de l'allowlist UCSS. */ @media (hover: none), (pointer: coarse) { body.spliff-anniv-hu .spliff-qa-btn { background: var(--spliff-hu-grad) !important; border-color: transparent !important; color: #fff !important; } } @media (hover: hover) and (pointer: fine) { body.spliff-anniv-hu .spliff-qa-btn:hover:not([disabled]), body.spliff-anniv-hu .spliff-qa-btn:focus-visible:not([disabled]) { background: var(--spliff-hu-grad) !important; border-color: transparent !important; color: #fff !important; } } /* Indisponible : un dégradé en opacité réduite reste lisible comme un bouton actif. On rend l'état franchement inerte. */ body.spliff-anniv-hu .spliff-qa-btn[disabled] { background: var(--spliff-hu-disabled) !important; color: var(--spliff-hu-disabled-t) !important; border-color: transparent !important; opacity: 1 !important; } /* ── 3. Bouton d'ajout au panier de la fiche produit ──────────────────────── Couleur pilotée hors dépôt par le Kit Elementor (contrôles du widget ATC), d'où le `!important` et la spécificité par `body.` + le wrapper `.spliff-patc`. `:not([disabled])` n'est pas décoratif : à la rupture de stock, le JS fait `.prop('disabled', true)` PUIS pose un fond gris en style inline. Un `!important` sans cette exclusion battrait ce style inline et repeindrait les boutons SOLD-OUT en dégradé — un bouton indisponible qui a l'air cliquable. */ body.spliff-anniv-hu .spliff-patc .single_add_to_cart_button:not([disabled]) { background: var(--spliff-hu-grad) !important; color: #fff !important; } body.spliff-anniv-hu .spliff-patc .single_add_to_cart_button:not([disabled]):hover { background: var(--spliff-hu-grad-hover) !important; } /* ── 4. Modale « Choisissez votre format » (spliff-quick-add) ─────────────── `:not(:disabled)` conserve le gris de l'état « aucun format choisi », qui est porteur de sens : tant qu'il est gris, le libellé dit « Choisissez un format ». Le halo animé du bouton est bleu (`@keyframes cgp2neonQA`, teinte #5A8BFF codée dans les keyframes, donc impossible à retoucher depuis ici). On l'éteint et on pose une ombre chaude fixe, cohérente avec le dégradé. */ body.spliff-anniv-hu .sqa-cta:not(:disabled) { background: var(--spliff-hu-grad) !important; color: #fff !important; animation: none !important; box-shadow: 0 6px 18px rgba(239, 50, 41, .28) !important; } body.spliff-anniv-hu .sqa-cta:not(:disabled):hover { background: var(--spliff-hu-grad-hover) !important; } /* ── 5. Tiroir panier (spliff-minicart) ──────────────────────────────────── `#scwDrawer` porte la spécificité qui bat les contrôles Elementor du widget panier. `.scw-mini-summary-cta` et `.scw-empty-cta` sont des classes distinctes de `.scw-cta` : sans elles, deux boutons resteraient bleus. */ body.spliff-anniv-hu #scwDrawer .scw-cta, body.spliff-anniv-hu .scw-mini-summary-cta, body.spliff-anniv-hu .scw-empty-cta { background: var(--spliff-hu-grad) !important; color: #fff !important; } body.spliff-anniv-hu #scwDrawer .scw-cta:hover, body.spliff-anniv-hu .scw-mini-summary-cta:hover, body.spliff-anniv-hu .scw-empty-cta:hover { background: var(--spliff-hu-grad-hover) !important; } /* Barre de progression des paliers cadeaux : elle est DÉJÀ un dégradé (vert → bleu), posé à la fois par la feuille du plugin et par un contrôle Elementor. On la remplace par celui de l'opération. */ body.spliff-anniv-hu #scwDrawer .scw-progress-fill { background: var(--spliff-hu-grad) !important; } /* ── 6. Bouton de paiement du checkout (spliff-loyalty, checkout v2) ──────── Les quatre formes sont celles réellement utilisées par sl-checkout-v2.css, qui est intégralement en `!important`. On cible le bouton, jamais la variable `--slv2-accent` : elle sert aussi au bouton « coupon », qui doit rester sobre. */ body.spliff-anniv-hu form.woocommerce-checkout #place_order, body.spliff-anniv-hu form.woocommerce-checkout .place-order #place_order, body.spliff-anniv-hu #payment #place_order, body.spliff-anniv-hu .woocommerce #place_order { background: var(--spliff-hu-grad) !important; color: #fff !important; } body.spliff-anniv-hu form.woocommerce-checkout #place_order:hover, body.spliff-anniv-hu #payment #place_order:hover, body.spliff-anniv-hu .woocommerce #place_order:hover { background: var(--spliff-hu-grad-hover) !important; } /* ── 7. CTA de la popup de recharge (spliff-elementor-modules) ────────────── Quatrième bleu du site (#3D5BFF, posé en `!important` par sa propre feuille). */ body.spliff-anniv-hu .spliff-rup__add { background: var(--spliff-hu-grad) !important; color: #fff !important; } body.spliff-anniv-hu .spliff-rup__add:hover { background: var(--spliff-hu-grad-hover) !important; } /* ── 8. Bandeau FOMO — barre « Anniversary Bar » : DÉGRADÉ HOLD-UP, TEXTE BLANC Le bandeau porte le MÊME jeton que les CTA du site, comme la maquette PDF du pôle com. Mais ce n'est PAS cette feuille qui le peint. ── Où sont vraiment les couleurs ─────────────────────────────────── Sur la barre elle-même (spliff-marketing → Bars), posées par l'API sur `spliff-marketing/v1/bars/10` : · `design.bg_gradient` — le dégradé. Clé ajoutée en 3.25.0 : elle l'emporte sur `bg_color`, un champ hexa ne pouvant pas porter 4 arrêts. Elle n'a pas encore de champ dans l'UI React ; `BarsController::update()` la reconduit quand la charge utile n'en parle pas, un « Enregistrer » depuis l'admin ne l'efface donc pas. · `design.text_color` et `countdown.text_color` — blancs. · `design.show_close` — false : plus de croix de fermeture. Tout ça se change sans redéployer. Cette feuille ne pose AUCUN `background` ni `color` sur la barre, exprès : un `!important` qui dort ici finirait par écraser un réglage fait ailleurs, et personne n'irait le chercher. ── Pourquoi cet en-tête a déjà menti ─────────────────────────────── Le parti pris a tourné trois fois dans la journée du 15/09 : dégradé (maquette) → fond noir avec le seul « + » en rose (visuel de référence postérieur) → dégradé + texte blanc (Julien, en regardant la barre en prod). C'est la dernière qui fait foi. Le « + » n'est plus rose : sur le dégradé il tombait dans le violet du milieu et disparaissait. Ce que cette feuille fait, et rien d'autre : la MISE EN PAGE — deux lignes, tailles, espacements. Sélecteur ciblé sur l'ID, jamais sur `.spliff-bar` : une autre barre promo peut tourner en même temps. */ /* Deux lignes (demande de Julien, 15/09, via la session « site-fb ») : le compte à rebours au-dessus, l'accroche « -25 % + CASHBACK ×2 » en dessous. Le module Bars rend la barre sur UNE ligne (flex centré, nowrap, hauteur fixe), d'où le passage en colonne. Le contenu est posé en prod par l'API sur les 8 marchés, au format -25 % + CASHBACK ×2 Deux pièges à ne pas « corriger » : · l'accroche est enveloppée dans .spliff-hu-ligne EXPRÈS. Les enfants de la barre sont posés sans conteneur ($inner = $countdown_html . ' ' . $text_block) : en colonne, un laissé au premier niveau deviendrait un troisième élément flex, donc une troisième ligne. Tout ce qu'on ajoute au texte va DANS .spliff-hu-ligne ; · pour recolorer un morceau de l'accroche : par une CLASSE, jamais par un style inline — Renderer::build_bar_html passe le texte dans wp_kses avec `'span' => ['class' => []]`, un style="color:…" serait retiré en silence. C'est ainsi qu'a vécu le « + » rose (`.spliff-hu-plus`), retiré du contenu des 8 marchés le 15/09 quand le fond est passé au dégradé. Pas de CLS malgré la hauteur auto : la barre est rendue côté serveur et n'est pas collante (print_reservation_style ne réserve que pour une barre sticky). */ body.spliff-anniv-hu .spliff-bar[data-spliff-bar-id="10"] { flex-direction: column !important; justify-content: center !important; height: auto !important; white-space: normal !important; padding: 9px 46px !important; line-height: 1.15 !important; text-align: center !important; gap: 3px !important; } /* Ligne du haut : le compte à rebours, à la place qu'occupait la mention « 16 au 20 septembre » du visuel de référence. Réglage revu le 15/09 par Julien, sur comparaison des deux états côte à côte (iPhone) : à 11 px avec .16em d'interlettrage, « 05J 12H 01M 36S » formait une frise où les unités ne se détachaient plus les unes des autres. On inverse les deux leviers — lettres plus serrées, MOTS plus écartés — et on monte d'un cran : c'est l'espace entre groupes qui donne la lecture, pas l'espace entre lettres. `word-spacing` mord bien ici parce que le Renderer sépare les unités par de vraies espaces (`--j …`) ; changer cette séparation côté PHP rendrait cette règle inopérante. Deuxième passe le même jour : 14 px PARTOUT, mobile compris. Le 12 px du petit écran restait timide alors que la place ne manquait pas — la ligne complète (« 05J 12H 01M 36S ») tient dans la moitié de la largeur à 375 px. */ body.spliff-anniv-hu .spliff-bar[data-spliff-bar-id="10"] .spliff-countdown { font-size: 14px !important; letter-spacing: .04em !important; word-spacing: .35em !important; text-transform: uppercase !important; opacity: .85 !important; } /* Ligne du bas : l'accroche, c'est elle qu'on doit lire de loin. */ body.spliff-anniv-hu .spliff-hu-ligne { display: block !important; font-size: 19px !important; font-weight: 800 !important; letter-spacing: .01em !important; } /* Sous 600 px, l'accroche doit tenir sans être rognée : le module pose overflow:hidden sur la barre, un texte trop large serait coupé sans ellipse ni retour à la ligne visible. */ @media (max-width: 600px) { body.spliff-anniv-hu .spliff-bar[data-spliff-bar-id="10"] { padding: 8px 40px !important; } body.spliff-anniv-hu .spliff-hu-ligne { font-size: 15px !important; } /* Pas de `font-size` ici : le compte à rebours garde les 14 px de la règle ci-dessus. Une seconde déclaration de la même valeur, c'est la dérive assurée le jour où l'une des deux bouge. Seuls les espacements se resserrent, la ligne étant plus étroite. */ body.spliff-anniv-hu .spliff-bar[data-spliff-bar-id="10"] .spliff-countdown { letter-spacing: .03em !important; word-spacing: .3em !important; } } /* ── 9. Tiroir panier, suite (demande d'Oliver du 15/09) ──────────────────── a) Marqueurs de palier VALIDÉS sur la barre de progression : ronds verts (`--scw-success`) → dégradé, anneau blanc pour se détacher de la barre (elle est déjà du même dégradé, règle 5), coche en magenta. `.next`, le prochain palier (bleu, qui pulse), n'est PAS touché : c'est l'objectif, il doit rester différent de ce qui est acquis. b) Poignée latérale de fermeture (`.scw-close-strip`) : bleu → dégradé vertical. Sur mobile la feuille du plugin la rend translucide avec un `!important` (verre dépoli) : on gagne par la spécificité (#scwDrawer), pas par l'ordre. c) Bloc « Vos cadeaux déjà acquis » : pas un simple fond dégradé — les vignettes doivent rester lisibles sur blanc. Le bloc devient une carte « Hold-Up » : liseré dégradé (bordure transparente peinte en border-box), titre en Gabriella, étiquette « HOLD-UP » centrée sur le bord haut ; toutes les cartes cadeau sur #f9f9f9 (un fond teinté jurait avec les vignettes produit, qui sont en `mix-blend-mode: multiply` — retour d'Oliver du 15/09), les ACQUISES avec un liseré dégradé en plus, les verrouillées gardent leur flou. Camion de la livraison offerte en magenta. */ body.spliff-anniv-hu #scwDrawer .scw-progress-badge.reached, body.spliff-anniv-hu #scwDrawer .scw-progress-badge.chosen { background: var(--spliff-hu-grad) !important; border-color: #fff !important; box-shadow: 0 2px 8px rgba(173, 24, 146, .35) !important; } body.spliff-anniv-hu #scwDrawer .scw-progress-badge.reached::after, body.spliff-anniv-hu #scwDrawer .scw-progress-badge.chosen::after { background: var(--spliff-hu-magenta) !important; } body.spliff-anniv-hu #scwDrawer .scw-progress-remaining.scw-all-reached { color: var(--spliff-hu-magenta) !important; } body.spliff-anniv-hu #scwDrawer .scw-close-strip { background: var(--spliff-hu-grad-v) !important; } /* Au survol : le MÊME dégradé, pas la variante foncée horizontale — Oliver ne veut aucune différence de couleur entre repos et survol (15/09). Le plugin élargit la poignée de 4 px au survol, ça reste. */ body.spliff-anniv-hu #scwDrawer .scw-close-strip:hover { background: var(--spliff-hu-grad-v) !important; } body.spliff-anniv-hu #scwDrawer .scw-gifts-block { position: relative; overflow: visible; /* Bordure dégradée : deux fonds empilés, le blanc en padding-box, le dégradé en border-box, sur une bordure transparente. */ border: 2px solid transparent !important; background: linear-gradient(#fff, #fff) padding-box, var(--spliff-hu-grad) border-box !important; box-shadow: 0 6px 22px rgba(173, 24, 146, .14) !important; } /* Étiquette « HOLD-UP » centrée sur le bord haut, droite (Oliver ne la voulait ni en coin ni penchée). ::before est libre sur ce bloc. */ body.spliff-anniv-hu #scwDrawer .scw-gifts-block::before { content: 'HOLD-UP'; position: absolute; top: -9px; left: 50%; padding: 3px 8px 2px; background: var(--spliff-hu-grad); color: #fff; font-family: "Spliff Gabriella", "Arial Black", Impact, sans-serif; font-weight: 900; font-size: 9px; line-height: 1; letter-spacing: .06em; border-radius: 3px; transform: translateX(-50%); box-shadow: 0 3px 8px rgba(0, 0, 0, .18); pointer-events: none; } body.spliff-anniv-hu #scwDrawer .scw-gifts-title { font-family: "Spliff Gabriella", "Arial Black", Impact, sans-serif !important; font-weight: 900 !important; font-size: 11px !important; letter-spacing: .04em; text-transform: uppercase; color: #141416 !important; } /* Sur un téléphone le bloc fait ~300 px : à 11 px, Gabriella casse le titre sur deux lignes (« …DÉJÀ / ACQUIS : »). */ @media (max-width: 480px) { body.spliff-anniv-hu #scwDrawer .scw-gifts-title { font-size: 10px !important; letter-spacing: .02em; } } /* Toutes les cartes cadeau sur #f9f9f9 ; l'acquise ajoute le liseré dégradé (fond uni en padding-box, dégradé en border-box). */ body.spliff-anniv-hu #scwDrawer .scw-gifts-card { background: #f9f9f9 !important; } body.spliff-anniv-hu #scwDrawer .scw-gifts-card:not(.scw-gifts-card--locked) { border: 1.5px solid transparent; background: linear-gradient(#f9f9f9, #f9f9f9) padding-box, var(--spliff-hu-grad) border-box !important; } body.spliff-anniv-hu #scwDrawer .scw-gifts-card:not(.scw-gifts-card--locked) .scw-gifts-card-img--icon { color: var(--spliff-hu-magenta) !important; } body.spliff-anniv-hu #scwDrawer .scw-gifts-shipping svg { color: var(--spliff-hu-magenta) !important; } /* ── 10. Voile lumineux sur les CTA qui n'en ont pas (demande d'Oliver, 15/09) ─ Oliver a montré le bouton « Commander » du tiroir panier : une bande blanche qui traverse le bouton en boucle. Relevé sur la prod, TROIS CTA de l'opération l'ont déjà, chacun avec sa propre recette, toutes bâties pareil — un `::after` en `position: absolute` qu'on déplace : · `.scw-cta` → `scwShimmer` (cart-widget.css:2395) · `.sqa-cta` → `spliffAtcSweep` (quick-add.css:138) · `.single_add_to_cart_button` → `spliffAtcShine` (hors dépôt, Kit Elementor) Ces trois-là ne sont pas touchés : ils ont déjà l'effet, et leur en poser un second ferait se croiser deux bandes déphasées. Cette section le donne aux CINQ qui ne l'ont pas. ── Pourquoi un `::after` et pas un calque de fond animé ──────────────────── Un second calque dans `background`, déplacé par `background-position`, semble plus simple — pas de pseudo-élément à réquisitionner. Essayé, et ça ne marche PAS ici : toutes les règles de couleur de cette feuille sont en `!important` (elles n'ont pas le choix, cf. l'en-tête), et une déclaration `!important` l'emporte sur une animation CSS. Les images-clés n'auraient donc jamais pu déplacer `background-position` : l'animation tourne, le voile ne bouge pas. Mesuré sur banc le 15/09 — six animations `running`, `background-position` figé à `0% 0%`. Un pseudo-élément échappe à ce piège : personne d'autre ne le style, donc aucun `!important` ne s'oppose à l'animation. C'est exactement pour ça que les trois recettes ci-dessus sont toutes bâties comme ça. ── Ce qui n'en reçoit pas, volontairement ───────────────────────────────── · Les états désactivés — un bouton indisponible ne scintille pas. · La barre de progression, les pastilles de palier, la poignée du tiroir : des décors, pas des boutons. · Le bouton des cartes produit en desktop AU REPOS : son dégradé n'apparaît qu'au survol (règle 2), le voile le suit. Ça évite au passage de faire tourner vingt-quatre animations sur une page de listing. */ /* On déplace par `transform`, pas par `left` comme le fait `scwShimmer`. Même trajet à l'œil, mais `left` refait la mise en page à chaque image alors que `transform` reste au compositeur. Ça compte sur une page de listing, où le bouton des cartes produit est répété vingt-quatre fois. 417 % est un pourcentage de la BANDE, pas du bouton : la bande fait 60 % du bouton et part de `left: -100%`, il lui faut donc parcourir 250 % de la largeur du bouton pour sortir à droite — soit 250/60 ≈ 417 % d'elle-même. */ @keyframes spliff-hu-voile { 0% { transform: translateX(0); } 50%, 100% { transform: translateX(417%); } } /* Le voile est découpé par le bouton : il lui faut un cadre (`overflow`) et un repère de positionnement (`position`). `.spc-bar` est la seule exclue du `position: relative` : elle est `fixed` sur mobile et `sticky` en desktop (pack-mix.css:162 et 194). La passer en `relative` décollerait la barre d'achat du bas de l'écran — et ces deux valeurs font déjà d'elle un repère de positionnement. Elle ne contient que son bouton (spliff-pack-mix.php:1033), donc `overflow: hidden` n'y coupe rien. */ body.spliff-anniv-hu .spliff-qa-btn:not([disabled]), body.spliff-anniv-hu .scw-mini-summary-cta, body.spliff-anniv-hu .scw-empty-cta, body.spliff-anniv-hu form.woocommerce-checkout #place_order, body.spliff-anniv-hu #payment #place_order, body.spliff-anniv-hu .woocommerce #place_order, body.spliff-anniv-hu .spliff-rup__add { position: relative !important; overflow: hidden !important; } body.spliff-anniv-hu .spc-mix:not(.spc-mix--compact) .spc-bar { overflow: hidden !important; } /* La bande elle-même. Largeur, durée et courbe reprises de `scwShimmer` pour que les huit CTA battent au même rythme ; l'opacité est un cran au-dessus (.22 au lieu de .15) parce qu'ici le voile passe sur un dégradé plus soutenu que le bleu du tiroir. `pointer-events: none` : sans lui, le voile couvre le bouton et intercepte le survol. */ body.spliff-anniv-hu .spc-mix:not(.spc-mix--compact) .spc-bar::after, body.spliff-anniv-hu .spliff-qa-btn:not([disabled])::after, body.spliff-anniv-hu .scw-mini-summary-cta::after, body.spliff-anniv-hu .scw-empty-cta::after, body.spliff-anniv-hu form.woocommerce-checkout #place_order::after, body.spliff-anniv-hu #payment #place_order::after, body.spliff-anniv-hu .woocommerce #place_order::after, body.spliff-anniv-hu .spliff-rup__add::after { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent); pointer-events: none; animation: spliff-hu-voile 3s ease-in-out infinite; } /* Desktop : le bouton des cartes produit n'est en dégradé qu'au survol, le voile aussi. `content: none` supprime le pseudo-élément, il n'y a donc rien qui tourne au repos sur les listings. */ @media (hover: hover) and (pointer: fine) { body.spliff-anniv-hu .spliff-qa-btn:not([disabled])::after { content: none; } body.spliff-anniv-hu .spliff-qa-btn:hover:not([disabled])::after, body.spliff-anniv-hu .spliff-qa-btn:focus-visible:not([disabled])::after { content: ''; } } /* Mouvement réduit : on retire le voile, pas seulement son animation — une bande claire arrêtée au milieu d'un bouton se lirait comme un défaut d'affichage. Même geste que spliff-quick-add pour son propre voile (quick-add.css:182). */ @media (prefers-reduced-motion: reduce) { body.spliff-anniv-hu .spc-mix:not(.spc-mix--compact) .spc-bar::after, body.spliff-anniv-hu .spliff-qa-btn::after, body.spliff-anniv-hu .scw-mini-summary-cta::after, body.spliff-anniv-hu .scw-empty-cta::after, body.spliff-anniv-hu form.woocommerce-checkout #place_order::after, body.spliff-anniv-hu #payment #place_order::after, body.spliff-anniv-hu .woocommerce #place_order::after, body.spliff-anniv-hu .spliff-rup__add::after { content: none; } } /* ── 11. Le reste du checkout : les quatre bleus de sl-checkout-v2 ────────── Demande de Julien (15/09/2026). Sur le checkout, le bouton de paiement est au dégradé depuis le bloc 6, mais tout ce qui l'entoure est resté au bleu du checkout : le bandeau « Résumé de la commande », la barre de la livraison offerte, le montant qui manque, et le bouton « Ajouter des produits au panier ». Quatre taches bleues autour d'un bouton magenta — c'est l'habillage qui a l'air inachevé, pas le checkout qui a l'air sobre. Les quatre sortent de la même variable, `--slv2-accent` (#5A8BFF, sl-checkout-v2.css:14). On ne la repeint pas pour autant — règle 1 de l'en-tête : elle sert aussi au bouton « coupon », qui doit rester secondaire, et à des `color:` où un `linear-gradient` est invalide. On peint les sélecteurs, un par un, comme partout ailleurs dans cette feuille. Le montant, lui, EST un `color:`. Il prend donc le premier arrêt du dégradé en aplat : un `background-clip: text` sur six caractères ne montrerait de toute façon que ce même arrêt, en risquant un texte invisible là où il n'est pas supporté. Au passage il y gagne — #AD1892 sur blanc vaut ~6,3:1, contre ~3,1:1 pour le bleu qu'il remplace. ── Hiérarchie : « Ajouter des produits » n'est PAS peint en plein ────────── Essayé sur iPhone le 15/09, et rejeté : en dégradé plein, « Ajouter des produits au panier » et « Payer 58,79 € » deviennent le MÊME bouton — même fond, même largeur pleine, même hauteur, l'un au-dessus de l'autre. Le checkout se retrouve avec deux boutons principaux. C'est exactement ce que l'en-tête de cette feuille interdit pour `.scw-redeem-btn` (« bouton secondaire, il doit le rester pour ne pas concurrencer le bouton de commande ») : la règle vaut ici aussi. Il reçoit donc le dégradé en CONTOUR (deux fonds : blanc en `padding-box`, dégradé en `border-box` — la seule façon d'avoir une bordure à 4 arrêts) et le texte au premier arrêt. Il porte les couleurs de l'opération, il ne dispute plus la place au bouton de paiement. Et aucun de ces éléments ne reçoit le voile lumineux du bloc 10 : le bouton de paiement reste le seul du checkout qui bouge. */ body.spliff-anniv-hu .sl-order-summary-toggle, body.spliff-anniv-hu .sl-shipping-promo__fill { background: var(--spliff-hu-grad) !important; } body.spliff-anniv-hu .sl-order-summary-toggle { color: #fff !important; } /* CTA secondaire : contour dégradé, pas aplat. `border: 2px solid transparent` est obligatoire — sl-checkout-v2.css pose `border: none !important`, et sans bordure il n'y a pas de `border-box` où peindre le dégradé. `box-sizing: border-box` y est déjà : la hauteur du bouton ne bouge pas. */ body.spliff-anniv-hu .sl-shipping-promo__cta { background: linear-gradient(#fff, #fff) padding-box, var(--spliff-hu-grad) border-box !important; border: 2px solid transparent !important; color: #AD1892 !important; } /* Le survol d'origine est un `opacity: .9` : sur un aplat il assombrit, sur un contour il délave le texte et la bordure. On rend l'opacité et on marque le survol par un fond très pâle. */ body.spliff-anniv-hu .sl-shipping-promo__cta:hover { opacity: 1 !important; background: linear-gradient(#FCF2F9, #FCF2F9) padding-box, var(--spliff-hu-grad) border-box !important; } /* « Plus que 45,20 € pour la livraison offerte ! » */ body.spliff-anniv-hu .sl-shipping-promo__text strong { color: #AD1892 !important; } /* Le récapitulatif déplié, juste sous le bandeau : son fond est le même bleu à 8 % (`--slv2-accent-light`). Laissé tel quel, il ferait un halo bleu sous un bandeau magenta — on ne le voit qu'une fois le bandeau ouvert, mais c'est précisément le moment où les deux sont côte à côte. */ body.spliff-anniv-hu .sl-order-summary-content { background: rgba(173, 24, 146, .06) !important; } /* ── 12. Home : « Tout afficher » des carrousels, et le bloc « Produit du mois » Demande de Julien (15/09/2026). a) « Tout afficher » — widget Products List du thème (`.spliff-products-List__button-show-all`). Sa forme de base ne vient PAS de theme.css:195 (lien texte souligné, gris) mais de la CSS globale de custom-functions (`uploads/cfm-css/global/frontend-*.min.css`, réglage en base, hors dépôt — vérifié sur spliff.fr le 16/09), qui en fait une PILULE bleue sur les carrousels : `.spliff-products-List__type-slider …` → padding 18/30, rayon 25 px, min-width 33 % (70 % ≤ 768 px), graisse 800, bordure 2 px bleue, survol inversé. Demande de Julien (16/09/2026, après la 1.9.0 qui forçait 10/18, rayon 8 px, graisse 600 et cassait la pilule) : on GARDE cette forme, on ne repeint que le contour et les couleurs — la recette du bloc 11 pour « Ajouter des produits » (contour dégradé, fond blanc, texte magenta). Donc ni padding, ni rayon, ni graisse ici : ils descendent de la règle CFM. Même portée qu'elle (`__type-slider`) pour ne jamais encadrer le lien nu d'une grille. La bordure reste à 2 px, comme la bleue : la taille du bouton ne bouge pas. `text-decoration: none` est doublé par prudence (contrôle Elementor `products_list_typography_button`). Le jumeau du blog (`.spliff-posts-List__button-show-all`) n'est PAS repeint — décision de Julien. b) Bloc « Produit du mois » (Elementor Loop Grid, gabarit hors dépôt) : · le CTA « Je la veux ! » est un bouton Elementor dans le conteneur `.spliff-focus`, bleu du Kit → dégradé plein, comme les autres CTA principaux (bloc 3), survol sur la variante foncée ; · l'étiquette de molécule « THCX » (`.sf-badge-chem`, bleu #5a8bff posé par le `