/* ============================================================ KING PHARMA — Bandeau des offres spéciales (au-dessus du menu) ------------------------------------------------------------ Préfixe kp-promo. Couleurs, police, taille et hauteur arrivent en variables CSS posées par js/bandeau-promo.js, d'après les réglages de l'admin (page « Bandeau promo ») : --kp-promo-bg1 / --kp-promo-bg2 fond (uni ou dégradé) --kp-promo-fg texte --kp-promo-accent séparateurs, flèches, effets --kp-promo-font / -fs / -fw police, taille, épaisseur --kp-promo-h hauteur (posée aussi sur pour décaler la page) ============================================================ */ /* ── La page fait de la place au bandeau ───────────────────── Le bandeau est fixé en haut de l'écran : la page descend d'autant et la barre de navigation flottante se pose juste dessous. */ body.kp-promo-on{padding-top:var(--kp-promo-h,0px)} body.kp-promo-on #navbar{top:calc(24px + var(--kp-promo-h,0px))} body.kp-promo-on #navbar.scrolled{top:calc(12px + var(--kp-promo-h,0px))} @media (max-width:900px) and (orientation:landscape){ body.kp-promo-on #navbar{top:calc(12px + var(--kp-promo-h,0px))} } /* ── Le bandeau ───────────────────────────────────────────── */ .kp-promo{ --kp-promo-bg1:#0B132B;--kp-promo-bg2:#1C2541;--kp-promo-fg:#FFFFFF;--kp-promo-accent:#10B981; position:fixed;top:0;left:0;right:0;z-index:1001; display:flex;align-items:center;gap:2px; box-sizing:border-box;height:var(--kp-promo-h,36px);margin:0;padding:0 6px; background:var(--kp-promo-bg1);color:var(--kp-promo-fg); font-family:var(--kp-promo-font,'Outfit',sans-serif); font-size:calc(var(--kp-promo-fs,14px) * var(--kp-promo-echelle,1)); font-weight:var(--kp-promo-fw,600);font-style:normal; line-height:1.2;letter-spacing:.01em;text-align:left;text-transform:none; overflow:hidden;isolation:isolate; box-shadow:inset 0 -1px 0 rgba(0,0,0,.14); transition:transform .5s cubic-bezier(.16,1,.3,1); -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; } .kp-promo *,.kp-promo *::before,.kp-promo *::after{box-sizing:border-box} .kp-promo--degrade{background:linear-gradient(90deg,var(--kp-promo-bg1),var(--kp-promo-bg2))} .kp-promo--italique{font-style:italic} .kp-promo--majuscules{text-transform:uppercase;letter-spacing:.07em} .kp-promo--compact{padding:0 4px} /* Aperçu de l'espace admin : dans le flux de son cadre, pas fixé à l'écran. */ .kp-promo--apercu{position:relative;z-index:2;flex:0 0 auto} /* Rangé avec la barre de navigation (on descend la page), entrée, sortie. */ .kp-promo--rentre{transform:translateY(-100%)} .kp-promo--sortie{transform:translateY(-100%);transition-duration:.4s} .kp-promo--entree{animation:kp-promo-entree .6s cubic-bezier(.16,1,.3,1) backwards} @keyframes kp-promo-entree{from{transform:translateY(-100%)}to{transform:translateY(0)}} /* ── Scène : là où vivent les messages ────────────────────── */ .kp-promo__scene{position:relative;z-index:2;flex:1 1 auto;min-width:0;height:100%;display:flex;align-items:center;overflow:hidden} .kp-promo__msg{color:inherit;text-decoration:none;white-space:nowrap;padding:0 .1em} a.kp-promo__msg{cursor:pointer} a.kp-promo__msg::after{content:'→';display:inline-block;margin-left:.45em;color:var(--kp-promo-accent);font-style:normal;transition:transform .2s ease} a.kp-promo__msg:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px} a.kp-promo__msg:hover::after{transform:translateX(3px)} a.kp-promo__msg:focus-visible{outline:2px solid var(--kp-promo-accent);outline-offset:2px;border-radius:4px} .kp-promo__sep{flex:0 0 auto;padding:0 1.15em;color:var(--kp-promo-accent);white-space:nowrap} .kp-promo__emo{display:inline-block;font-style:normal} /* ── Défilement continu (droite → gauche, ou l'inverse) ───── */ .kp-promo--anim-defilement .kp-promo__scene, .kp-promo--anim-defilement-inverse .kp-promo__scene{ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%); } .kp-promo__track{display:flex;align-items:center;flex:0 0 auto;width:max-content;animation:kp-promo-defile 30s linear infinite;will-change:transform} .kp-promo__group{display:flex;align-items:center;flex:0 0 auto} .kp-promo--anim-defilement-inverse .kp-promo__track{animation-direction:reverse} @keyframes kp-promo-defile{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}} .kp-promo.is-paused .kp-promo__track{animation-play-state:paused} /* ── Fondu / glissement : un message à la fois ────────────── */ .kp-promo__slide{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 8px; opacity:0;pointer-events:none;transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1); } .kp-promo__slide.is-on{opacity:1;pointer-events:auto} .kp-promo__slide > .kp-promo__msg{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis} /* Message plus large que le bandeau : il part de la gauche et glisse (js). */ .kp-promo__slide.is-long{justify-content:flex-start} .kp-promo__slide.is-long > .kp-promo__msg{display:inline-block;max-width:none;overflow:visible} .kp-promo--anim-fondu .kp-promo__slide{transform:scale(.97)} .kp-promo--anim-fondu .kp-promo__slide.is-on{transform:none} .kp-promo--anim-glissement .kp-promo__slide{transform:translateY(100%)} .kp-promo--anim-glissement .kp-promo__slide.is-on{transform:none} .kp-promo--anim-glissement .kp-promo__slide.is-out{transform:translateY(-100%)} /* ── Machine à écrire ─────────────────────────────────────── */ .kp-promo__type{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 8px;white-space:nowrap;overflow:hidden} .kp-promo__type.is-long{justify-content:flex-end} .kp-promo__caret{display:inline-block;flex:0 0 auto;width:2px;height:1.1em;margin-left:3px;background:var(--kp-promo-accent);animation:kp-promo-curseur 1s steps(1) infinite} @keyframes kp-promo-curseur{50%{opacity:0}} /* ── Fixe : tout côte à côte ──────────────────────────────── */ .kp-promo__fixe{flex:1 1 auto;min-width:0;height:100%;display:flex;align-items:center;justify-content:center;padding:0 8px;white-space:nowrap;overflow:hidden} .kp-promo__fixe.is-long{ justify-content:flex-start; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent); } /* ── Boutons pause et fermeture ───────────────────────────── */ .kp-promo__btn{ position:relative;z-index:4;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center; width:26px;height:26px;margin:0;padding:0;border:0;border-radius:50%; background:transparent;color:inherit;font:inherit;line-height:1; cursor:pointer;opacity:.75;transition:opacity .2s,background-color .2s; } .kp-promo__btn:hover{opacity:1;background:rgba(255,255,255,.16)} @supports (background:color-mix(in srgb,#fff 10%,transparent)){ .kp-promo__btn:hover{background:color-mix(in srgb,var(--kp-promo-fg) 16%,transparent)} } .kp-promo__btn:focus-visible{opacity:1;outline:2px solid var(--kp-promo-accent);outline-offset:1px} .kp-promo__btn svg{display:block;width:14px;height:14px} .kp-promo--compact .kp-promo__btn{width:24px;height:24px} .kp-promo--compact .kp-promo__sep{padding:0 .9em} /* ── Effets ───────────────────────────────────────────────── */ /* Reflet brillant qui traverse le bandeau */ .kp-promo--fx-brillance::after{ content:'';position:absolute;top:0;bottom:0;left:0;z-index:3;width:26%;pointer-events:none; background:linear-gradient(100deg,transparent 0,rgba(255,255,255,.07) 30%,rgba(255,255,255,.32) 50%,rgba(255,255,255,.07) 70%,transparent 100%); transform:translateX(-130%) skewX(-18deg); animation:kp-promo-reflet 5.5s ease-in-out infinite; } @keyframes kp-promo-reflet{0%,50%{transform:translateX(-130%) skewX(-18deg)}100%{transform:translateX(520%) skewX(-18deg)}} /* Dégradé animé (calque de fond dédié : l'animation d'entrée du bandeau reste libre) */ .kp-promo__fond{ position:absolute;inset:0;z-index:0;pointer-events:none; background:linear-gradient(90deg,var(--kp-promo-bg1),var(--kp-promo-bg2),var(--kp-promo-bg1),var(--kp-promo-bg2)); background-size:300% 100%; animation:kp-promo-ondule 10s ease-in-out infinite alternate; } @keyframes kp-promo-ondule{from{background-position:0% 50%}to{background-position:100% 50%}} /* Émojis qui dansent */ .kp-promo--fx-emojis .kp-promo__emo{animation:kp-promo-danse 1.8s ease-in-out infinite;transform-origin:50% 70%} @keyframes kp-promo-danse{ 0%,100%{transform:translateY(0) rotate(0) scale(1)} 25%{transform:translateY(-2px) rotate(-10deg) scale(1.18)} 50%{transform:translateY(0) rotate(0) scale(1)} 75%{transform:translateY(-1px) rotate(10deg) scale(1.12)} } /* Texte lumineux (néon) */ .kp-promo--fx-lueur .kp-promo__scene{text-shadow:0 0 .3em var(--kp-promo-accent),0 0 .85em var(--kp-promo-accent)} /* Étincelles et neige */ .kp-promo__fx{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden} .kp-promo__spark,.kp-promo__flake{position:absolute;display:block;font-style:normal;font-weight:400;line-height:1;text-shadow:none} .kp-promo__spark{color:var(--kp-promo-accent);opacity:0;animation:kp-promo-scintille 2.4s ease-in-out infinite} @keyframes kp-promo-scintille{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:.95;transform:scale(1) rotate(90deg)}} .kp-promo__flake{top:-16px;color:var(--kp-promo-flocon,#fff);animation:kp-promo-neige 6s linear infinite} @keyframes kp-promo-neige{from{transform:translate3d(0,0,0) rotate(0)}to{transform:translate3d(16px,84px,0) rotate(220deg)}} /* Pause demandée par le visiteur : TOUT s'arrête, décor compris. */ .kp-promo.is-stopped::after, .kp-promo.is-stopped *{animation-play-state:paused!important} /* Texte réservé aux lecteurs d'écran (machine à écrire) */ .kp-promo__sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* ── Écrans tactiles (téléphones, tablettes) ──────────────── css/style.css impose 44 px de haut à TOUT lien et TOUT bouton dès que l'écran est tactile (taille d'une cible au doigt). Le bandeau, lui, fixe sa propre hauteur (34 à 36 px sur téléphone) : la règle gonflait ses messages — le texte se collait en haut de la barre et s'y coupait — et changeait ses pastilles pause/× en ovales rognés. Le bandeau reprend donc la main sur sa hauteur, et ses deux boutons prennent toute la surface que la barre permet (28 px : au-dessus des 24 px demandés par le WCAG 2.5.8, les 44 px du confort maximal ne tiennent pas dans une barre d'annonce). */ @media (hover:none) and (pointer:coarse){ .kp-promo a, .kp-promo button, .kp-promo__msg, .kp-promo__btn{min-height:0} .kp-promo__btn{width:30px;height:30px} .kp-promo--compact .kp-promo__btn{width:28px;height:28px} } /* Mouvements réduits (réglage du système) : le script choisit déjà une version calme ; ceci coupe ce qui resterait. L'aperçu admin n'est pas concerné : l'admin doit voir l'animation qu'il choisit. */ @media (prefers-reduced-motion:reduce){ .kp-promo:not(.kp-promo--apercu), .kp-promo:not(.kp-promo--apercu)::after, .kp-promo:not(.kp-promo--apercu) *{animation:none!important;transition:none!important} } @media (forced-colors:active){ .kp-promo{border-bottom:1px solid CanvasText} .kp-promo__fx,.kp-promo__fond,.kp-promo--fx-brillance::after{display:none} } @media print{ .kp-promo{display:none!important} body.kp-promo-on{padding-top:0!important} }