/* ============================================================================ Animation d'ouverture « Hold-Up » — voile dégradé, logo, tampon. Maquette : HABILLAGE SITE.pdf, pages 1, 2 (desktop) et 8 (mobile). ⚠️ Toute la chorégraphie est ICI, en keyframes, et démarre au premier paint. Le JS ne lance rien : il corrige le nombre d'heures, ferme au tap et retire l'élément. Sans JS, l'animation finit d'elle-même en `opacity: 0 ; visibility: hidden ; pointer-events: none` (keyframes `forwards`) — rien ne peut rester coincé par-dessus le site. Ne pas remplacer par un `--go` posé en JS : on perdrait cette garantie. ⚠️ Classes préfixées `spliff-` (allowlist UCSS, mu-plugins/spliff-litespeed- ucss.php). `html.spliff-*` y est listé à part de `.spliff-*`. Le dégradé est le jeton de l'habillage (spliff-anniv-habillage.css), incliné à 135° comme sur la maquette. Le voile n'est pas opaque : le site reste deviné dessous, c'est voulu (page 1). Timing (5,4 s) : 0 → 0,3 s le voile monte · 0,2 → 0,75 s le lockup surgit · 1,15 → 1,55 s le tampon claque · 1,75 → 2,2 s le rappel de l'offre monte · 4,8 → 5,4 s tout s'efface. ⚠️ Le PLATEAU entre 1,55 s (tampon posé) et 4,8 s (début de l'effacement) est une demande explicite : le tampon porte un compte à rebours qui bat à la seconde, il doit rester lisible **au moins 3 secondes** — ici 3,25 s. Réduire la durée totale sans déplacer le 4,8 s reviendrait à remettre un chrono que personne n'a le temps de lire. Le filet JS (9 s) doit rester au-dessus. ========================================================================== */ .spliff-anniv-ouv { position: fixed; inset: 0; /* Sommet absolu de la pile — max entier 32 bits. Le tiroir panier (spliff-minicart) y est déjà : à égalité, c'est l'ordre du DOM qui tranche, et nous sommes en TÊTE de (il faut être peint à la première frame), donc nous perdrions. D'où le passage dans le top layer côté JS — voir `spliff-anniv-ouverture.js`. Ce z-index reste la garantie de base : il suffit face à tout ce qui vit plus bas (999999 et moins). */ z-index: 2147483647; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; background: linear-gradient(135deg, #AD1892 0%, #985BB3 37%, #F2542F 80%, #EF3229 100%); color: #fff; cursor: pointer; opacity: 0; animation: spliff-anniv-ouv-voile 5.4s ease-in-out forwards; overscroll-behavior: contain; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; /* La page peut arriver sous une view transition : sans ça l'overlay peut être capturé dans le fondu croisé et clignoter. */ view-transition-name: none; } /* ── Top layer ─────────────────────────────────────────────────────────────── Le JS promeut l'overlay en popover dès qu'il démarre : il passe alors dans le « top layer », au-dessus de TOUT z-index, quel que soit l'ordre du DOM. Mais l'agent utilisateur impose aux popovers une boîte à lui — `width/height: fit-content` centrée par des marges automatiques, une bordure, un fond opaque. Sans ces quelques lignes, le voile plein écran deviendrait une petite carte au milieu de la page. Les couleurs, elles, n'ont pas à être répétées : une déclaration d'auteur l'emporte toujours sur celle de l'agent utilisateur. */ .spliff-anniv-ouv:popover-open { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; overflow: hidden; /* L'ouverture d'un popover pose `display: block` : on remet le nôtre, sans quoi le lockup et le tampon perdent leur centrage. */ display: flex; } /* Déjà vue pendant cette visite, ou opération finie : masquée AVANT le paint par le script inline émis juste avant le markup (class-ouverture.php). */ html.spliff-anniv-ouv-vu .spliff-anniv-ouv { display: none; } /* Fermeture au tap. `!important` obligatoire : une déclaration importante est la seule chose qui passe devant une valeur animée (cascade : important > animations > normal). Le JS retire l'élément 450 ms plus tard. */ .spliff-anniv-ouv--done { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } @keyframes spliff-anniv-ouv-voile { 0% { opacity: 0; } 5.6% { opacity: .9; } /* 0,3 s */ 88.9% { opacity: .9; } /* 4,8 s — fin du plateau de lecture */ 100% { opacity: 0; visibility: hidden; pointer-events: none; } } /* ── Lockup : THE THIRD ANNIVERSARY / SPLIFF (contour) / HOLD-UP ──────────── */ .spliff-anniv-ouv__lockup { display: flex; flex-direction: column; align-items: center; width: min(78vw, 560px); animation: spliff-anniv-ouv-pop .55s cubic-bezier(.2, .9, .25, 1) .2s both; } @keyframes spliff-anniv-ouv-pop { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } } .spliff-anniv-ouv__sur, .spliff-anniv-ouv__holdup { font-family: "Spliff Gabriella", "Arial Black", Impact, sans-serif; font-weight: 900; line-height: 1; text-transform: uppercase; color: #fff; margin: 0; padding: 0; text-align: center; /* Gabriella est très large : une ligne qui casse ferait « HOLD- / UP ». Les tailles sont calées sur la largeur du lockup (≈ 12 % pour HOLD-UP, ≈ 4 % pour la ligne du dessus), jamais sur la seule largeur d'écran. */ white-space: nowrap; } .spliff-anniv-ouv__sur { font-size: min(2.3vw, 22px); letter-spacing: .05em; margin-bottom: .5em; } .spliff-anniv-ouv__logo { display: block; width: 100%; height: auto; overflow: visible; } .spliff-anniv-ouv__holdup { font-size: min(9.5vw, 68px); letter-spacing: .02em; margin-top: .1em; } /* Mobile (page 8 de la maquette) : SPLIFF + HOLD-UP seulement, pas de « THE THIRD ANNIVERSARY » — il casserait sur deux lignes de toute façon. */ @media (max-width: 768px) { .spliff-anniv-ouv__sur { display: none; } } /* ── Tampon « IL VOUS RESTE / 96H 12MIN 05SEC » ───────────────────────────── Centré sur l'écran, donc en plein milieu du logo (page 2). Il claque : part grand et transparent, retombe à sa taille avec un léger rebond. Deux lignes depuis la 1.6.0 : le libellé au-dessus, le compte à rebours dessous. La taille de base est calée sur la LIGNE LA PLUS LONGUE possible — « 120H 00MIN 00SEC », 17 signes — pour qu'elle tienne sans césure sur un téléphone de 320 px ; c'est elle qui fixe le 6,2vw, pas le confort de lecture du libellé. Les deux enfants se dimensionnent ensuite en `em`. */ .spliff-anniv-ouv__tampon { position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; align-items: center; gap: .12em; margin: 0; padding: .5em .9em .45em; background: #fff; color: #111; font-family: "Spliff Syne", "Helvetica Neue", Arial, sans-serif; font-weight: 700; font-size: clamp(15px, 5.6vw, 40px); line-height: 1; text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; box-shadow: 0 12px 40px rgba(0, 0, 0, .28); opacity: 0; transform: translate(-50%, -50%) rotate(-8deg); animation: spliff-anniv-ouv-tampon .4s cubic-bezier(.25, 1.55, .5, 1) 1.15s both; } .spliff-anniv-ouv__tampon-label { font-size: .58em; letter-spacing: .1em; color: #444; } /* `tabular-nums` : sans lui, un « 1 » est plus étroit qu'un « 8 » et le tampon respire à chaque seconde qui tourne. */ .spliff-anniv-ouv__tampon-chrono { font-size: 1.12em; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } @keyframes spliff-anniv-ouv-tampon { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(2.2); } 55% { opacity: 1; } 100% { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(1); } } /* ── Rappel de l'offre ────────────────────────────────────────────────────── Demande d'Oliver (15/09/2026) : le voile d'entrée doit redire ce qui se joue, pas seulement qu'il reste peu de temps. Posé en bas de l'écran plutôt que sous le tampon : le tampon est centré et tourné de 8°, tout ce qui le suit de près se cogne dedans sur un petit écran. Il arrive APRÈS le tampon (1,75 s) — l'œil lit le logo, puis le temps qui reste, puis pourquoi ça vaut le coup. */ .spliff-anniv-ouv__offre { position: absolute; left: 50%; bottom: max(28px, 11vh); /* Repris par les keyframes ; ici pour que la ligne reste centrée même si l'animation ne tourne pas (mouvement réduit, UCSS trop zélé). */ transform: translateX(-50%); margin: 0; /* `width`, surtout pas `max-width` : cet élément est absolument positionné à `left: 50%`, et la largeur « disponible » qu'un navigateur accorde à une boîte comme celle-ci est ce qui reste À DROITE de son ancre — soit la moitié de l'écran. Avec un simple `max-width`, le texte se recassait donc en quatre lignes sur un téléphone alors qu'il avait la place : il ne la voyait pas. Une largeur explicite la lui donne, le `translateX(-50%)` ci-dessus la recentre. */ width: min(94vw, 1080px); box-sizing: border-box; text-align: center; font-family: "Spliff Syne", "Helvetica Neue", Arial, sans-serif; font-weight: 700; /* Gros, exprès (demande de Julien du 15/09) : c'est l'argument commercial de l'opération, il doit se lire d'un coup d'œil et de loin — 4,4vw → 7,4vw, soit +70 %. L'interlettrage est resserré (.06 → .04em) pour rendre à la taille ce qu'il prenait en largeur. ⚠️ Le 7,4vw n'est pas un réglage d'humeur : en Syne 700 majuscules, un caractère pèse ~0,83em (mesuré sur iPhone, pas estimé). « -25 % SUR TOUT » fait 14 signes, soit ~11,6em ; à 8vw il réclamait 372 pt pour 370 disponibles et cassait en deux, ce qui mettait le rappel sur QUATRE lignes. Monter la taille sans refaire ce calcul le recassera. */ font-size: clamp(20px, 7.4vw, 42px); line-height: 1.18; letter-spacing: .04em; text-transform: uppercase; color: #fff; /* Ombre plus dense qu'avant : à cette taille, le texte couvre une bonne part du dégradé, et l'orange du bas de l'écran est clair. */ text-shadow: 0 3px 18px rgba(0, 0, 0, .45); opacity: 0; animation: spliff-anniv-ouv-offre .45s ease-out 1.75s both; } /* Sur un téléphone, les deux moitiés tiennent chacune sur sa ligne — et le point médian ne finit pas une ligne tout seul. Dès qu'il y a la place, elles se remettent côte à côte et le séparateur revient (en pseudo-élément : il est décoratif, il n'a rien à faire dans le texte lu). */ .spliff-anniv-ouv__offre-a, .spliff-anniv-ouv__offre-b { display: block; /* Volontairement SANS `nowrap` : le français tient sur une ligne par moitié à cette taille, mais le polonais (« -25 % NA WSZYSTKO », 17 signes) ne tient pas sur un petit écran. Mieux vaut qu'il casse en deux, réparti par `balance`, que de déborder de l'écran. */ text-wrap: balance; } /* Seuil relevé de 600 px à 1100 px avec la nouvelle taille : les deux moitiés sur une seule ligne réclament ~976 px à 42 px de corps (23,2em), et il faut la largeur pour les tenir sans césure. En dessous, deux lignes — et donc pas de point médian orphelin en fin de ligne. */ @media (min-width: 1100px) { .spliff-anniv-ouv__offre-a, .spliff-anniv-ouv__offre-b { display: inline; white-space: nowrap; } .spliff-anniv-ouv__offre-b::before { content: '·'; margin: 0 .55em; } } @keyframes spliff-anniv-ouv-offre { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } } /* Le client a demandé moins d'animations : on ne joue pas du tout. Le JS retire aussi l'élément. */ @media (prefers-reduced-motion: reduce) { .spliff-anniv-ouv { display: none; } }