/* ════════════════════════════════════════════════════════════════════════════ Bandeau « fin du Hold-Up » posé au bas des popups d'achat. Volet 4 de spliff-anniv — voir includes/class-popups.php pour le pourquoi. ── Deux règles d'or, les mêmes que l'habillage ─────────────────────────────── 1. TOUT est scopé sous `body.spliff-anniv-hu`. L'ancre est retirée par la garde JS quand une page sort d'un cache périmé (spliff-anniv-habillage.js) : scoper ici, c'est garantir qu'un bandeau injecté par erreur après la fin de l'opération ne s'affiche pas à moitié peint, mais pas du tout. 2. Le dégradé est écrit EN DUR, il ne lit pas `--spliff-hu-grad`. Cette variable est définie par l'autre feuille ; si celle-ci n'était pas chargée (ordre d'enqueue, UCSS agressive), `background: var(--introuvable)` donnerait un bandeau transparent avec du texte blanc dessus — illisible. Une valeur en dur ne peut pas échouer à moitié. La valeur est la même qu'au § 0 de spliff-anniv-habillage.css : si l'une change, changer l'autre. ── UCSS ───────────────────────────────────────────────────────────────────── Les classes des popups hôtes (`.sqa-sheet`, `.spliff-rup__card`, `.sob-experience`) n'existent PAS dans le HTML initial de la page : quick-add et order-bump construisent leur modale en JS. QUIC.cloud supprimerait donc ces règles à la première régénération d'UCSS si elles n'étaient pas protégées — c'est l'allowlist de mu-plugins/spliff-litespeed-ucss.php qui les couvre (`.spliff-*`, `.sqa-*`, `.sob-*`). Ne rien renommer sans elle. ════════════════════════════════════════════════════════════════════════════ */ /* ── 1. Le bandeau lui-même ─────────────────────────────────────────────────── */ body.spliff-anniv-hu .spliff-anniv-fomo { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 0 0 auto; box-sizing: border-box; width: 100%; padding: 11px 13px; background: linear-gradient(90deg, #AD1892 0%, #985BB3 37%, #F2542F 80%, #EF3229 100%); color: #FFFFFF; font-family: "Spliff Syne", "Syne", system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1; overflow: hidden; } /* La feuille et le logo sont des fonds, pas des : le bandeau a sa hauteur définitive avant même que les fichiers arrivent (donc aucun saut de mise en page à l'ouverture de la popup), et ils sont mis en cache une fois pour toutes les popups du site. */ body.spliff-anniv-hu .spliff-anniv-fomo__leaf, body.spliff-anniv-hu .spliff-anniv-fomo__logo { flex: 0 0 auto; background-repeat: no-repeat; background-position: center; background-size: contain; } /* L'icône officielle du site (médiathèque, `custom_icon_white.svg`) et non un tracé refait à la main : c'est la feuille que le client voit déjà dans les arguments de la home et ailleurs sur le site. */ body.spliff-anniv-hu .spliff-anniv-fomo__leaf { width: 38px; height: 34px; background-image: url("spliff-anniv-feuille.svg"); } /* Le logo officiel de l'opération — « SPLIFF » au-dessus de « HOLD-UP », blanc cerné de noir, tel qu'il est sur les bannières des 8 marchés. ⚠️ Le fichier porte ~10 % de marge transparente sur chaque bord : la boîte est donc déclarée plus grande que le logo voulu, `contain` fait le reste — ne pas s'étonner que 84×58 rende un logo d'environ 70×42. Plus de libellé texte à côté : le mot « HOLD-UP » est DANS l'image. */ body.spliff-anniv-hu .spliff-anniv-fomo__logo { width: 92px; height: 64px; margin: -4px 0; background-image: url("spliff-anniv-logo-anniv.webp"); } /* ── 2. Le compte à rebours ─────────────────────────────────────────────────── */ body.spliff-anniv-hu .spliff-anniv-fomo__clock { display: flex; align-items: flex-start; gap: 8px; margin: 0 auto; } body.spliff-anniv-hu .spliff-anniv-fomo__u { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 30px; } /* `tabular-nums` : sans lui, un « 1 » est plus étroit qu'un « 8 » et le bandeau entier tremble à chaque seconde. */ body.spliff-anniv-hu .spliff-anniv-fomo__u b { font-size: 25px; font-weight: 800; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: .01em; } /* Les libellés sont des mots, pas des initiales (« JOURS », « GIORNI », « GODZ ») : leur longueur change avec le marché, d'où `white-space:nowrap` ici et les tailles resserrées du § 4 pour les écrans étroits. */ body.spliff-anniv-hu .spliff-anniv-fomo__u em { font-size: 9px; font-style: normal; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; opacity: .85; } /* Popup restée ouverte au moment où l'opération se termine : le JS pose cette classe, et on efface au lieu d'afficher « 0j 00h 00m 00s ». */ body.spliff-anniv-hu .spliff-anniv-fomo--done { display: none !important; } /* ── 3. Ajustements par popup hôte ──────────────────────────────────────────── */ /* 3.a Ajout rapide au panier — `.sqa-sheet` (spliff-quick-add). Feuille de bas d'écran en mobile, carte centrée de 450 px en desktop. Elle est en `display:flex;flex-direction:column` SANS `overflow:hidden` : le bandeau s'y pose en dernier enfant, et doit donc arrondir lui-même ses coins bas en desktop, sinon il déborderait des 20 px de rayon de la carte. Le pied (`.sqa-foot`) réserve déjà la zone de sécurité iOS sous son bouton : cette réserve revient au bandeau, qui est désormais l'élément du bas — sans quoi on aurait une bande blanche entre le CTA et le dégradé, et le dégradé collé sous le pouce. */ body.spliff-anniv-hu .sqa-sheet > .sqa-foot { padding-bottom: 12px; } body.spliff-anniv-hu .sqa-sheet > .spliff-anniv-fomo { padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px)); } @media (min-width: 768px) { body.spliff-anniv-hu .sqa-sheet > .spliff-anniv-fomo { border-radius: 0 0 20px 20px; padding-bottom: 9px; } } /* 3.b Popup de recharge — `.spliff-rup__card` (spliff-elementor-modules). Carte à `padding:24px` : le bandeau doit ressortir de ce padding pour aller d'un bord à l'autre, d'où les marges négatives. En mobile la carte est collée en bas (rayon `10px 10px 0 0`) et porte la zone de sécurité iOS dans son padding — on la lui reprend, comme pour la sheet ci-dessus. */ body.spliff-anniv-hu .spliff-rup__card > .spliff-anniv-fomo { margin: 18px -24px -24px; width: auto; border-radius: 0 0 10px 10px; } @media (max-width: 767px) { body.spliff-anniv-hu .spliff-rup__card { padding-bottom: 20px; } body.spliff-anniv-hu .spliff-rup__card > .spliff-anniv-fomo { margin: 16px -20px -20px; border-radius: 0; padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px)); } } /* 3.c Order bump du checkout — `.sob-experience` (spliff-order-bump). Le conteneur (`#sob-bump-container`) est en `overflow-y:auto` : il rogne déjà ses coins, le bandeau n'a rien à arrondir. Il défile avec le contenu, et c'est voulu — il ferme l'offre, il ne la surplombe pas. ⚠️ Cette popup a DÉJÀ son propre chrono (`.sob-fomo-bar`, en mm:ss, durée de l'offre). Les deux ne mesurent pas la même chose et n'ont pas la même place : l'offre en haut, l'opération en bas. */ body.spliff-anniv-hu .sob-experience > .spliff-anniv-fomo { margin-top: 14px; } /* ── 4. Écrans étroits ──────────────────────────────────────────────────────── */ /* Un iPhone SE fait 320 px : quatre mots entiers, une feuille et un logo n'y tiennent qu'en resserrant. On réduit les flancs avant les chiffres — c'est le compte à rebours qu'on est venu lire. */ @media (max-width: 389px) { body.spliff-anniv-hu .spliff-anniv-fomo { gap: 5px; padding-left: 9px; padding-right: 9px; } body.spliff-anniv-hu .spliff-anniv-fomo__clock { gap: 5px; } body.spliff-anniv-hu .spliff-anniv-fomo__u { min-width: 28px; } body.spliff-anniv-hu .spliff-anniv-fomo__u b { font-size: 22px; } body.spliff-anniv-hu .spliff-anniv-fomo__u em { font-size: 8px; letter-spacing: .02em; } body.spliff-anniv-hu .spliff-anniv-fomo__leaf { width: 30px; height: 27px; } body.spliff-anniv-hu .spliff-anniv-fomo__logo { width: 66px; height: 48px; } }