/* MayMiru, page d’accueil « pop » (reprise de maquette/accueil-pop.html). Polices auto-hébergées. */ @font-face { font-family: "Caprasimo"; src: url(/assets/fonts/Caprasimo-latin.woff2) format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Instrument Sans"; src: url(/assets/fonts/instrument-sans-wght-normal.woff2) format("woff2"); font-weight: 400 700; font-display: swap; } /* Thème clair unique. Formes : boutons en pilule ou ronds, cartes 28px, tuiles pleine largeur sans arrondi. */ :root { --red: #c8301f; --cream: #fff4e0; --paper: #fffbf3; --ink: #2a1913; --muted: #6b5246; --mustard: #f2b232; --cap: "Caprasimo", "Cooper Black", Georgia, serif; --gutter: clamp(16px, 4vw, 40px); /* Couleurs du héros, pilotées par la saveur affichée (jamais de texte rouge sur moutarde) */ --field: var(--mustard); --on: var(--ink); --chip: var(--red); --on-chip: var(--cream); } html[data-flavour="smash"] { --field: var(--red); --on: var(--cream); --chip: var(--mustard); --on-chip: var(--ink); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scrollbar-width: none; } /* défilement intact, barre masquée */ html::-webkit-scrollbar { display: none; } body { background: var(--cream); color: var(--ink); font-family: "Instrument Sans", system-ui, sans-serif; font-size: 1.0625rem; line-height: 1.5; -webkit-font-smoothing: antialiased; } main { overflow-x: clip; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; } ul, ol { list-style: none; } button { font: inherit; color: inherit; } [hidden] { display: none !important; } :focus-visible { outline: 3px solid currentColor; outline-offset: 3px; } .hero :focus-visible, .topbar :focus-visible { outline-color: var(--on); } .topbar.is-past :focus-visible { outline-color: var(--ink); } .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip { position: absolute; left: -9999px; } .skip:focus { left: 16px; top: 16px; z-index: 60; background: var(--ink); color: var(--cream); padding: 8px 16px; } .wrap { max-width: 1360px; margin-inline: auto; padding-inline: var(--gutter); } .cap { font-family: var(--cap); font-weight: 400; line-height: 0.95; } .up { font-weight: 400; text-transform: uppercase; letter-spacing: -0.045em; line-height: 0.86; } .chip { display: inline-flex; align-items: center; height: 46px; padding: 0 1.25rem; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--cream); color: var(--ink); font-size: 0.95rem; font-weight: 600; white-space: nowrap; text-decoration: none; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .chip:hover { transform: translateY(-2px) rotate(-2deg); } .chip:active { transform: translateY(1px) scale(0.98); } .chip-ink { background: var(--ink); color: var(--cream); } .round { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--cream); color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s; } .round:hover { transform: scale(1.08); } .round:active { transform: scale(0.94); } .round:disabled { opacity: 0.35; cursor: default; transform: none; } /* Bandeau + en-tête fixes, transparents sur le héros */ .topbar { position: fixed; inset: 0 0 auto; z-index: 40; color: var(--on); transition: color 0.4s; pointer-events: none; } .topbar.is-past, html:not(.js) .topbar { color: var(--ink); background: var(--cream); box-shadow: 0 1px 0 rgba(42, 25, 19, 0.12); } .announce { display: block; padding: 7px var(--gutter); background: var(--ink); color: var(--cream); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-align: center; text-transform: uppercase; text-decoration: none; pointer-events: auto; } .top { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 76px; } .top > * { pointer-events: auto; } .logo { font-family: var(--cap); font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1; text-decoration: none; } .nav { display: flex; gap: 10px; } @media (max-width: 639px) { .nav .chip:not(.chip-ink) { display: none; } } /* Héros : le produit au centre, en étages. --p (0 → 1) vient du scroll et écarte les étages. */ .hero { --q: clamp(0, (var(--p, 0) - 0.55) * 2.4, 1); /* fin du scroll : le fond se referme en arc */ position: relative; height: 100svh; min-height: 600px; overflow: hidden; background: var(--field); color: var(--on); transition: background-color 0.6s, color 0.6s; border-radius: 0 0 50% 50% / 0 0 calc(var(--q) * 34vh) calc(var(--q) * 34vh); /* pas de clip-path animé : rendu vide constaté dans Chrome une fois le héros sorti */ } .hero-title { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 124px var(--gutter) 150px; font-size: clamp(3.2rem, 10.4vw, 11rem); text-align: center; pointer-events: none; } .line { display: block; overflow: hidden; padding: 0.14em 0 0.16em; margin: -0.14em 0 -0.16em; } /* place pour l'accent de À et la cédille de FAÇON */ .line > span { display: block; } .l1 { translate: calc(-9vw * var(--p, 0)) calc(-3vh * var(--p, 0)); } .l2 { translate: calc(9vw * var(--p, 0)) calc(3vh * var(--p, 0)); } .stage { position: absolute; left: 50%; top: calc(50% - 16px); z-index: 3; } .stack { --W: min(22vw, 34vh, 340px); position: absolute; left: 0; top: 0; width: var(--W); aspect-ratio: 1 / 1.45; translate: -50% -50%; } .stack[data-p="smash"] { --W: min(25vw, 40vh, 380px); } /* smash double : plus large que haut */ /* --iy / --ir / --is : décalages de l'intro, animés par GSAP en variables pour ne pas écraser translate et rotate */ .ly { --k: 0; --r: 0deg; --iy: 0px; --ir: 0deg; position: absolute; left: 50%; top: var(--t); z-index: var(--z); width: var(--w); max-width: none; translate: -50% calc(var(--k) * var(--p, 0) * var(--W) * 0.1 + var(--iy)); rotate: calc(var(--r) * var(--p, 0) + var(--ir)); } .stack img[src$="menu-smash/bun-up.webp"] { mask: radial-gradient(48% 16% at 50% 84%, transparent 97%, #000 100%); } /* sans la mie vue d'en dessous */ @media (max-width: 899px) { .stack { --W: min(60vw, 34vh); } .stack[data-p="smash"] { --W: min(68vw, 40vh); } } .stickers, .deco { position: absolute; inset: 0; z-index: 2; pointer-events: none; } .deco { z-index: 4; } .stk { --ir: 0deg; --is: 1; position: absolute; left: var(--x); top: var(--y); width: var(--s); max-width: none; translate: calc(var(--dx, 0px) * var(--p, 0)) calc(var(--dy, 0px) * var(--p, 0)); rotate: calc(var(--a, 0deg) + var(--da, 0deg) * var(--p, 0) + var(--ir)); scale: var(--is); } .sparkle { height: var(--s); fill: none; stroke: currentColor; stroke-width: 5; stroke-linejoin: round; } .chip-sticker { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: var(--chip); color: var(--on-chip); font-size: clamp(0.85rem, 1.15vw, 1.1rem); line-height: 1.05; text-align: center; transition: background-color 0.6s, color 0.6s; } @media (max-width: 639px) { .stickers .stk:nth-child(n+3), .sparkle:nth-of-type(n+2) { display: none; } .announce { font-size: 0.68rem; letter-spacing: 0.02em; } } .hero-lede { position: absolute; left: var(--gutter); bottom: clamp(24px, 4.4vh, 44px); z-index: 5; max-width: 25ch; font-size: 0.92rem; font-weight: 600; line-height: 1.3; text-transform: uppercase; } .switch { position: absolute; left: 0; right: 0; bottom: clamp(20px, 4vh, 40px); z-index: 5; display: flex; align-items: center; gap: 10px; width: fit-content; margin-inline: auto; } .switch-name { display: grid; place-items: center; height: 56px; min-width: 13em; padding: 0 1.5em; border-radius: 999px; background: var(--ink); color: var(--cream); font-size: 1.1rem; font-weight: 600; white-space: nowrap; } @media (max-width: 899px) { .hero-title { padding-bottom: 176px; } .hero-lede { left: 0; right: 0; bottom: 96px; width: min(32ch, 100% - 2 * var(--gutter)); max-width: none; margin-inline: auto; font-size: 0.8rem; text-align: center; } } @media (max-width: 639px) { .hero-title { padding-top: 118px; } .switch-name { min-width: 0; padding: 0 1.1em; font-size: 1rem; } } /* Deux bandeaux qui se croisent sous le héros ; avec fx ils défilent et accélèrent avec le scroll */ .bands { position: relative; height: clamp(150px, 15vw, 230px); } .band { position: absolute; left: -5%; top: 50%; width: 110%; overflow: hidden; padding-block: 0.32em 0.38em; font-size: clamp(1.7rem, 3.6vw, 3.3rem); line-height: 1; white-space: nowrap; } .band p { display: flex; width: max-content; } .band span { padding-right: 0.4em; } .b1 { z-index: 1; background: var(--ink); color: var(--mustard); rotate: -4deg; translate: 0 -80%; } .b2 { background: var(--red); color: var(--cream); rotate: 3deg; translate: 0 -15%; } /* La pause : titre incliné, cartes qui défilent (épinglé sur grand écran), un produit détouré déborde de chaque carte */ .pause { position: relative; overflow: hidden; padding: clamp(96px, 12vw, 160px) var(--gutter) 88px; text-align: center; } /* bas : place pour la photo qui dépasse de la carte N°3 */ .pause-head { position: relative; z-index: 2; max-width: 1120px; margin-inline: auto; rotate: -4deg; } .pause h2 { font-size: clamp(2.4rem, 6.2vw, 6.4rem); } .aside { max-width: 46ch; margin: 22px auto 0; font-size: clamp(1rem, 1.3vw, 1.15rem); } .cards { position: relative; z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: 32px 4vw; margin-top: clamp(56px, 7vw, 96px); } .card { position: relative; flex: none; width: clamp(260px, 25vw, 360px); margin-bottom: 40px; border-radius: 28px; background: var(--paper); box-shadow: 0 30px 60px -30px rgba(42, 25, 19, 0.45); rotate: var(--r); translate: 0 var(--y, 0px); } .card h3 { padding: 16px 20px; border-radius: 28px 28px 0 0; background: var(--ink); color: var(--cream); font-size: 1.05rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; } .card.c-red h3 { background: var(--red); } .card.c-mustard h3 { background: var(--mustard); color: var(--ink); } .card p { padding: 28px 28px 0; font-size: 1.15rem; line-height: 1.35; } .card .n { display: block; padding: 14px 0 26px; color: var(--red); font: 400 4.4rem/1 var(--cap); } .card-stk { position: absolute; right: -22%; bottom: -18%; width: var(--w, 44%); max-width: none; rotate: var(--a); filter: drop-shadow(0 14px 12px rgb(42 25 19 / 0.25)); pointer-events: none; } .card-stk.pic { right: -30%; bottom: -24%; border: 5px solid var(--paper); border-radius: 16px; filter: none; box-shadow: 0 18px 30px -12px rgb(42 25 19 / 0.45); } /* rendu du lieu : posé comme une photo */ @media (max-width: 899px) { .card { translate: none; } .card-stk { right: -8%; } .card-stk.pic { right: -6%; bottom: -30%; } } /* sans décalage, le sticker qui dépasse ne passe pas sous la carte suivante */ @media (min-width: 900px) { html.fx .pause { height: 100svh; min-height: 640px; padding-top: max(130px, 15vh); } html.fx .cards { position: absolute; left: 0; top: clamp(340px, 45vh, 440px); flex-wrap: nowrap; justify-content: flex-start; gap: 6vw; margin: 0; will-change: transform; } } /* Promesse sur deux arcs, dans une dalle rouge : une vague moutarde passe sur les lettres au scroll */ .promise { position: relative; margin: clamp(48px, 6vw, 96px) clamp(8px, 1.5vw, 20px) 0; padding: clamp(72px, 10vw, 140px) var(--gutter); border-radius: clamp(32px, 5vw, 72px); background: var(--red); color: var(--cream); text-align: center; } .promise .arc text { fill: var(--cream); } .arc, .wave { display: block; width: min(100%, 1200px); margin-inline: auto; overflow: visible; } .arc text, .wave text { fill: var(--ink); font-family: "Instrument Sans", sans-serif; font-weight: 400; letter-spacing: -0.03em; white-space: pre; } .arc text { font-size: 70px; } .wave text { font-size: 76px; word-spacing: 0.3em; } /* les mots se resserrent dans le creux de la vague */ html.fx :is(.arc, .wave) tspan { fill: rgba(42, 25, 19, 0.14); transition: fill 0.3s; } html.fx :is(.arc, .wave) tspan.hot { fill: var(--red); } html.fx :is(.arc, .wave) tspan.on { fill: var(--ink); } html.fx .promise tspan { fill: rgb(255 244 224 / 0.22); } html.fx .promise tspan.hot { fill: var(--mustard); } html.fx .promise tspan.on { fill: var(--cream); } .promise-sub { margin-top: 8px; font-size: clamp(1.05rem, 1.5vw, 1.3rem); } .dot { position: absolute; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 1; border: 2px solid var(--cream); border-radius: 50%; } html.fx .dot { animation: float 3.6s ease-in-out var(--d, 0s) infinite alternate; } @keyframes float { to { transform: translateY(-18px); } } /* Au menu : le tableau du deli de accueil.html (onglets, ardoise rayée, sticker Student Deal). Sans JS : panneaux empilés. */ .menu { padding-top: clamp(72px, 9vw, 120px); } .h2 { font-size: clamp(2.6rem, 6vw, 5.5rem); } .w, .ch { display: inline-block; } .w { white-space: nowrap; } .board, .lb-board { position: relative; margin-top: 48px; padding: clamp(20px, 3.5vw, 48px); border-radius: 32px; background: repeating-linear-gradient(to bottom, rgb(0 0 0 / 0.22) 0 2px, transparent 2px 14px), var(--ink); box-shadow: inset 0 0 0 2px rgb(255 244 224 / 0.12), 0 12px 0 rgb(42 25 19 / 0.12); color: var(--cream); } :is(.board, .lb-board) :focus-visible { outline-color: var(--mustard); } .tabs { position: relative; display: flex; gap: 4px; width: max-content; max-width: 100%; margin-bottom: clamp(32px, 4vw, 56px); padding: 6px; overflow-x: auto; scrollbar-width: none; border-radius: 999px; background: rgb(255 244 224 / 0.08); } .tabs button { position: relative; z-index: 1; flex: none; padding: 0.6rem 1.15rem; border: 0; border-radius: 999px; background: none; color: var(--cream); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: color 0.3s; } .tabs button[aria-selected="true"] { color: var(--ink); } .tab-ind { position: absolute; top: 6px; bottom: 6px; left: 0; border-radius: 999px; background: var(--mustard); transition: transform 0.5s cubic-bezier(0.34, 1.3, 0.64, 1), width 0.5s cubic-bezier(0.34, 1.3, 0.64, 1); } .panels.tabbed { display: grid; } .panels.tabbed .panel { grid-area: 1 / 1; align-self: center; } .panels.tabbed .panel:not(.is-on) { visibility: hidden; } .panels:not(.tabbed) .panel + .panel { margin-top: 56px; } .panel { display: grid; gap: 24px 48px; align-items: start; } @media (min-width: 900px) { .panel { grid-template-columns: 7fr 6fr; grid-template-rows: 1fr auto auto 1fr; gap: 20px clamp(32px, 5vw, 72px); } .panel > div { grid-area: 2 / 1; } .panel > .board-list { grid-area: 3 / 1; } .panel > .panel-next { grid-area: 4 / 1; align-self: start; } .panel-pic { grid-area: 1 / 2 / -1; } } /* Photo de la catégorie : posée sur un soleil rayé qui tourne, pastille rouge ; GSAP la fait tomber à chaque onglet */ .panel-pic { position: relative; display: grid; place-items: center; width: min(100%, 480px); aspect-ratio: 1; margin: 0 auto; pointer-events: none; } .pp-sun { position: absolute; inset: 2%; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 12px rgb(242 178 50 / 0.16); } .pp-sun::before { content: ""; position: absolute; inset: -21%; background: repeating-conic-gradient(var(--mustard) 0 7.5deg, #df9b22 7.5deg 15deg); } html.fx .pp-sun::before { animation: turn 40s linear infinite; } @keyframes turn { to { rotate: 1turn; } } .pp-img { grid-area: 1 / 1; position: relative; width: 80%; max-width: none; transform: rotate(-6deg); filter: drop-shadow(0 26px 22px rgb(0 0 0 / 0.5)); } .pp-img.is-tall { width: 44%; transform: rotate(7deg); } .is-trio .pp-main { width: 66%; transform: translate(4%, -10%) rotate(-4deg); } .is-trio .pp-drink { width: 32%; transform: translate(-82%, 6%) rotate(-10deg); } .is-trio .pp-fries { width: 46%; transform: translate(46%, 46%) rotate(8deg); } .pp-tag { position: absolute; z-index: 1; right: 0; top: 4%; display: grid; place-items: center; width: 28%; aspect-ratio: 1; border-radius: 50%; background: var(--red); color: var(--cream); font-size: clamp(1rem, 1.6vw, 1.35rem); line-height: 1; text-align: center; transform: rotate(12deg); box-shadow: 0 6px 0 rgb(0 0 0 / 0.3); } @media (max-width: 899px) { .panel-pic { width: min(86%, 360px); } } .panel-cat { font-size: clamp(3rem, 6vw, 5.5rem); color: var(--mustard); rotate: -3deg; transform-origin: left bottom; } .panel-note { margin-top: 20px; max-width: 26ch; color: rgb(255 244 224 / 0.75); } .panel-next { width: max-content; margin-top: 32px; font-size: clamp(2rem, 3.4vw, 3.2rem); color: transparent; -webkit-text-stroke: 1.5px rgb(242 178 50 / 0.7); rotate: -3deg; transform-origin: left bottom; cursor: pointer; transition: color 0.3s; } .panel-next:hover { color: rgb(242 178 50 / 0.2); } .board-list li { padding-block: 16px; } .board-list li + li { border-top: 2px dashed rgb(255 244 224 / 0.18); } .board-list b { display: block; font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight: 600; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; } .board-list b::before { content: "★"; display: inline-block; width: 0; overflow: hidden; vertical-align: top; color: var(--mustard); transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .board-list li:hover b::before { width: 1.2em; } .board-list li > span { display: block; margin-top: 4px; color: rgb(255 244 224 / 0.75); } .tag { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: var(--mustard); color: var(--ink); font-size: 0.8rem; letter-spacing: 0; text-transform: none; vertical-align: 4px; } .board-count { position: absolute; top: calc(clamp(20px, 3.5vw, 48px) + 15px); right: clamp(20px, 3.5vw, 48px); display: flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: 0.08em; color: rgb(255 244 224 / 0.75); } .board-count b { color: var(--mustard); } .bc-bar { width: 72px; height: 2px; background: rgb(255 244 224 / 0.2); } .bc-bar i { display: block; height: 100%; background: var(--mustard); transform-origin: left; } .board-sticker { position: absolute; z-index: 2; right: clamp(16px, 4vw, 48px); bottom: -36px; display: grid; place-items: center; width: 112px; aspect-ratio: 1; border: 0; border-radius: 50%; background: var(--mustard); color: var(--ink); font-family: var(--cap); font-size: 1.15rem; line-height: 1; rotate: 10deg; cursor: pointer; box-shadow: 0 6px 0 rgb(42 25 19 / 0.25); transition: rotate 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), scale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .board-sticker:hover { rotate: -6deg; scale: 1.06; } .board-sticker:focus-visible { outline-color: var(--ink); } @media (max-width: 1099px) { .board-count { display: none; } } @media (max-width: 767px) { .board { padding-bottom: 72px; } .panel-next { display: none; } } @media (prefers-reduced-motion: no-preference) { .panel.is-on .panel-cat { animation: flip 0.7s cubic-bezier(0.34, 1.3, 0.64, 1) both; } .panel.is-on .board-list li { animation: pin 0.55s cubic-bezier(0.34, 1.3, 0.64, 1) both; } .board-list li:nth-child(2) { animation-delay: 0.07s; } .board-list li:nth-child(3) { animation-delay: 0.14s; } .board-list li:nth-child(4) { animation-delay: 0.21s; } html.js .board:not(.is-visible) * { animation-play-state: paused; } } @keyframes flip { from { opacity: 0; transform: translateY(30%) rotate(6deg); } } @keyframes pin { from { opacity: 0; transform: translateY(16px) rotate(-2deg); } } /* Newsletter : titre en vague, puis champ moutarde à bord arrondi avec cartes flottantes */ .nl { position: relative; padding-top: clamp(72px, 9vw, 120px); } .nl-field { position: relative; margin-top: clamp(24px, 4vw, 56px); padding: clamp(110px, 12vw, 170px) var(--gutter) clamp(80px, 9vw, 120px); border-radius: 50% 50% 0 0 / clamp(60px, 10vw, 160px) clamp(60px, 10vw, 160px) 0 0; background: var(--mustard); } .pola { position: absolute; z-index: 1; display: grid; place-items: center; width: clamp(150px, 15vw, 230px); aspect-ratio: 4 / 5; padding: 18px; border-radius: 28px; background: var(--bg); rotate: var(--a); } .p1 { --bg: var(--ink); --a: -10deg; left: 5%; top: 16%; } .p2 { --bg: var(--paper); --a: 8deg; left: 12%; top: 56%; } .p3 { --bg: var(--red); --a: 9deg; right: 6%; top: 12%; } .p4 { --bg: var(--cream); --a: -7deg; right: 12%; top: 54%; } @media (max-width: 1099px) { .pola { display: none; } } .nl-card { position: relative; z-index: 2; max-width: 600px; margin-inline: auto; padding: clamp(28px, 4vw, 44px); border-radius: 32px; background: var(--paper); } .nl-kicker { color: var(--red); font-size: clamp(1.7rem, 2.8vw, 2.3rem); line-height: 1.05; } .dates { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 16px; margin-top: 22px; } .dates div { padding: 14px 18px; border-radius: 20px; background: var(--cream); } .dates dt { color: var(--muted); font-size: 0.9rem; font-weight: 600; } .dates dd { margin-top: 4px; font-family: var(--cap); font-size: 1.6rem; line-height: 1.1; } form { margin-top: 28px; } .field label { display: block; font-weight: 700; } .field-row { display: flex; gap: 10px; margin-top: 8px; } .field input { flex: 1; min-width: 0; padding: 0.85rem 1.2rem; border: 2px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; } .field input::placeholder { color: var(--muted); } .field input:focus-visible { outline-color: var(--red); outline-offset: 2px; } .submit { height: auto; padding: 0.85rem 1.6rem; border-color: var(--red); background: var(--red); color: var(--cream); font-size: 1rem; cursor: pointer; } .consent { display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; color: var(--muted); font-size: 0.9rem; } .consent input { flex: none; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--red); } .alert { min-height: 1.5rem; margin-top: 12px; color: var(--red); font-size: 0.9rem; font-weight: 700; } .honeypot { position: absolute; left: -9999px; } .done { margin-top: 28px; } .done .cap { color: var(--red); font-size: 2.2rem; } .done p:last-child { margin-top: 10px; font-size: 1.1rem; } @media (max-width: 639px) { .field-row { flex-direction: column; } } /* Pied de page : mini-jeu façon dinosaure de Chrome, le bagel saute par-dessus nos canettes. --j = largeur du bagel ; le sol est à --g du bas. Image recadrée au ras du bagel, haute de 0,93 --j. */ .foot { position: relative; overflow: hidden; padding-top: clamp(48px, 6vw, 88px); } .jump { --j: clamp(100px, 10vw, 150px); --g: 32%; position: relative; height: clamp(330px, 30vw, 400px); } .ground { position: absolute; left: 0; right: 0; bottom: calc(var(--g) - 14px); height: 14px; border-top: 2px solid var(--ink); background: radial-gradient(circle, var(--ink) 1.5px, transparent 2px) 0 3px / 38px 8px repeat-x; } .shadow { position: absolute; left: calc(18% + var(--j) * 0.1); bottom: calc(var(--g) - 6px); width: calc(var(--j) * 0.8); height: 12px; border-radius: 50%; background: rgba(42, 25, 19, 0.18); } .jumper { position: absolute; left: 18%; bottom: var(--g); z-index: 1; width: var(--j); max-width: none; } .jump.is-over .jumper { animation: ko 0.5s; } @keyframes ko { 25% { rotate: -14deg; } 50% { rotate: 9deg; } 75% { rotate: -4deg; } } .cans { position: absolute; left: 0; bottom: var(--g); display: flex; align-items: flex-end; gap: calc(var(--j) * 0.035); will-change: transform; } .can { position: relative; width: calc(var(--j) * 0.2); height: calc(var(--j) * 0.42); border: 2px solid var(--ink); border-radius: 30% 30% 18% 18% / 12% 12% 8% 8%; background: var(--c); } .can.tall { height: calc(var(--j) * 0.56); } .can::before { content: ""; position: absolute; left: 18%; right: 18%; top: -6px; height: 4px; border-radius: 3px 3px 0 0; background: var(--ink); } .can::after { content: ""; position: absolute; left: 0; right: 0; top: 30%; height: 28%; border-block: 2px solid var(--ink); background: var(--cream); } /* Ingrédients à attraper en l'air, au-dessus des canettes : +25 */ .bonus { position: absolute; left: 0; bottom: calc(var(--g) + var(--j) * 1.44); width: calc(var(--j) * 0.44); max-width: none; will-change: transform; animation: wob 0.8s ease-in-out infinite alternate; } @keyframes wob { from { rotate: -12deg; } to { rotate: 12deg; } } .plus { position: absolute; bottom: calc(var(--g) + var(--j) * 1.49); color: var(--red); font: 400 clamp(1.4rem, 2.2vw, 1.9rem)/1 var(--cap); pointer-events: none; animation: plus 0.7s ease-out forwards; } @keyframes plus { to { opacity: 0; transform: translateY(-48px) rotate(-8deg); } } .lvl { position: absolute; top: 6%; left: var(--gutter); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; transform-origin: left center; } .lvl.up { animation: lvl 0.9s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes lvl { 30% { color: var(--red); scale: 1.6; } } .score { position: absolute; top: 6%; right: var(--gutter); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.1em; } .score .hi { margin-right: 14px; color: var(--muted); } .score .hi:empty { display: none; } .score.blink { animation: blink 0.25s steps(1) 4; } @keyframes blink { 50% { opacity: 0; } } .jump-msg { position: absolute; left: var(--gutter); right: var(--gutter); top: 12%; font-weight: 600; text-align: center; } .jump-msg b { display: block; margin-bottom: 6px; color: var(--red); font-size: clamp(2rem, 4vw, 3rem); } .jump-msg a { text-underline-offset: 4px; } .jump-btn { position: absolute; left: 50%; bottom: 9%; padding: 0.9rem 1.7rem; border: 2px solid var(--ink); border-radius: 999px; background: var(--mustard); color: var(--ink); font-weight: 600; white-space: nowrap; box-shadow: 0 5px 0 var(--ink); cursor: pointer; touch-action: manipulation; user-select: none; translate: -50% 0; } .jump-btn:active { box-shadow: 0 2px 0 var(--ink); transform: translateY(3px); } .k-touch { display: none; } @media (pointer: coarse) { .k-touch { display: inline; } .k-fine { display: none; } } .foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-block: 24px 32px; border-top: 1.5px solid var(--ink); font-size: 0.92rem; } .foot-row p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; } .foot-row .logo { font-size: 1.6rem; } .foot-row nav { display: flex; flex-wrap: wrap; gap: 8px 22px; } .foot-row nav a { text-decoration: none; } .foot-row nav a:hover { text-decoration: underline; text-underline-offset: 4px; } /* Classement du mois (ardoise du menu) et lots à gagner. Le formulaire n'apparaît qu'avec le jeu (JS). */ .lb { display: grid; gap: 24px; padding-block: 8px clamp(56px, 7vw, 96px); } @media (min-width: 960px) { .lb { grid-template-columns: 7fr 5fr; align-items: start; } } .lb-board { margin: 0; } .lb-title { color: var(--mustard); font-size: clamp(2.2rem, 4vw, 3.4rem); rotate: -3deg; transform-origin: left bottom; } .lb-note { margin-top: 10px; color: rgb(255 244 224 / 0.75); } .lb-list { margin-top: 20px; } .lb-list li { display: grid; grid-template-columns: 2.6em 1fr auto; align-items: baseline; gap: 12px; padding-block: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-variant-numeric: tabular-nums; } .lb-list li + li { border-top: 2px dashed rgb(255 244 224 / 0.18); } .lb-rank { color: rgb(255 244 224 / 0.6); font: 400 1.25rem/1 var(--cap); letter-spacing: 0; } .lb-list li:nth-child(-n+3) .lb-rank { color: var(--mustard); font-size: 1.7rem; } .lb-name { overflow-wrap: anywhere; } .lb-list li.is-me { margin-inline: -12px; padding-inline: 12px; border-radius: 14px; background: var(--mustard); color: var(--ink); } .lb-list li.is-me .lb-rank { color: var(--ink); } .lb-list li.is-me + li { border-top-color: transparent; } .lb-win { padding: clamp(24px, 3.5vw, 40px); border-radius: 32px; background: var(--paper); } .lb-kicker { color: var(--red); font-size: clamp(1.7rem, 2.6vw, 2.2rem); } .prizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; font-weight: 600; line-height: 1.25; text-align: center; } .medal { display: grid; place-items: center; width: 72px; aspect-ratio: 1; margin: 0 auto 10px; border-radius: 50%; background: var(--c); color: var(--on-c); font-size: 1.3rem; rotate: var(--a); } .m1 { --c: var(--mustard); --on-c: var(--ink); --a: -8deg; } .m2 { --c: var(--red); --on-c: var(--cream); --a: 6deg; } .m3 { --c: var(--ink); --on-c: var(--cream); --a: -4deg; } .lb-small { margin-top: 16px; color: var(--muted); font-size: 0.9rem; } .lb-form { margin-top: 24px; padding-top: 24px; border-top: 2px dashed rgb(42 25 19 / 0.2); } .lb-you { margin-bottom: 16px; } .lb-you b { font-family: var(--cap); font-weight: 400; font-size: 1.4rem; } .lb-form .field + .field { margin-top: 16px; } .lb-form .field input { display: block; width: 100%; margin-top: 8px; } .hint { margin-top: 6px; color: var(--muted); font-size: 0.88rem; } .lb-form .consent + .consent { margin-top: 10px; } .lb-form .submit { margin-top: 20px; } /* Signature géante, coupée par le bas de page */ .mega { margin-bottom: -0.2em; color: var(--red); font-size: 21vw; line-height: 1; text-align: center; white-space: nowrap; } /* Couche fx */ html.lenis, html.lenis body { height: auto; } html.lenis { scroll-behavior: auto; } html.lenis-stopped { overflow: hidden; } html.fx .fx-wait { opacity: 0; animation: fx-show 0s 3.5s forwards; } /* filet de sécurité si le script ne démarre jamais */ @keyframes fx-show { to { opacity: 1; } } html.fx .panel.is-on .panel-cat, html.fx .panel.is-on .board-list li { animation: none; } /* GSAP prend le relais (lettres à bascule) */ html.fx .card-stk { animation: float 3.2s ease-in-out var(--d, 0s) infinite alternate; } [tabindex="-1"]:focus { outline: none; } /* Arrivée, comme accueil.html, à chaque visite : logo et barre de chargement animés en CSS dès le premier rendu, puis le script finit la barre et un cercle s'ouvre sur la page */ .intro { display: none; } html.fx .intro { --r: 0px; position: fixed; inset: 0; z-index: 70; display: grid; place-content: center; justify-items: center; gap: 24px; background: var(--ink); color: var(--cream); -webkit-mask: radial-gradient(circle, transparent var(--r), #000 calc(var(--r) + 1px)); mask: radial-gradient(circle, transparent var(--r), #000 calc(var(--r) + 1px)); animation: fx-hide 0s 6s forwards; /* filet de sécurité si le script ne démarre jamais */ } .intro-logo { overflow: hidden; padding-bottom: 0.1em; font-size: clamp(3.5rem, 12vw, 9rem); white-space: nowrap; } .intro-logo span { display: inline-block; animation: intro-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both; } .intro-bar { width: min(240px, 50vw); height: 3px; border-radius: 3px; overflow: hidden; background: rgb(255 244 224 / 0.15); animation: intro-in 0.6s ease-out 0.3s both; } .intro-bar i { display: block; height: 100%; background: var(--mustard); transform: scaleX(0); transform-origin: left; animation: intro-load 2.4s cubic-bezier(0.2, 0.7, 0.3, 1) 0.3s both; } @keyframes intro-in { from { opacity: 0; transform: translateY(110%); } } @keyframes intro-load { to { transform: scaleX(0.9); } } @keyframes fx-hide { to { visibility: hidden; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hero, .topbar, .chip-sticker, .chip, .round, .tab-ind, .tabs button, .board-sticker { transition: none; } /* Le jeu reste jouable (il ne bouge que si on le lance), sans effets autour */ .bonus, .jump.is-over .jumper, .lvl.up, .score.blink { animation: none; } .plus { animation-name: fade; } } @keyframes fade { to { opacity: 0; } } /* Questionnaire Tally : bande rouge sous un store de deli ; le formulaire est un ticket qui sort de l'imprimante. Sans fx : store déroulé et ticket sorti, immobiles. */ .survey { position: relative; overflow: clip; margin: clamp(72px, 9vw, 120px) clamp(8px, 1.5vw, 20px) 0; padding: clamp(130px, 14vw, 180px) 0 clamp(64px, 8vw, 110px); border-radius: clamp(32px, 5vw, 72px); background: var(--red); color: var(--cream); } .survey::before { content: ""; position: absolute; inset: 0 0 auto; height: clamp(64px, 7vw, 96px); background: repeating-linear-gradient(90deg, var(--cream) 0 48px, #a8251a 48px 96px); -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 24px) no-repeat, radial-gradient(circle 24px at 50% 0, #000 98%, #0000) 0 100% / 48px 24px repeat-x; mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 24px) no-repeat, radial-gradient(circle 24px at 50% 0, #000 98%, #0000) 0 100% / 48px 24px repeat-x; transform-origin: top; } .survey-in { display: grid; gap: clamp(72px, 7vw, 96px); align-items: center; } @media (min-width: 960px) { .survey-in { grid-template-columns: 5fr 7fr; } } .survey-kicker { display: inline-flex; align-items: center; height: 40px; padding: 0 1rem; border-radius: 999px; background: var(--ink); color: var(--cream); font-size: 0.9rem; font-weight: 600; rotate: -3deg; } .survey-title { position: relative; margin-top: 22px; font-size: clamp(2.8rem, 6.2vw, 5.8rem); line-height: 1; } .survey-title em { display: inline-block; padding: 0 0.14em; border-radius: 0.14em; background: var(--mustard); color: var(--ink); font-style: normal; rotate: -2deg; } .survey-spark { position: absolute; width: clamp(22px, 2.6vw, 34px); margin-left: 0.15em; fill: var(--mustard); } .survey-lede { max-width: 36ch; margin-top: 22px; font-size: clamp(1.05rem, 1.4vw, 1.25rem); } .survey-perks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } .survey-perks li { padding: 0.5rem 1rem; border: 2px solid rgb(255 244 224 / 0.55); border-radius: 999px; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .survey-perks li::before { content: "★ "; color: var(--mustard); } .survey-side { position: relative; } .survey-ing { position: absolute; z-index: 0; /* derrière le ticket : ne cache jamais le formulaire */ width: clamp(110px, 16vw, 210px); max-width: none; rotate: var(--a); filter: drop-shadow(0 14px 12px rgb(0 0 0 / 0.3)); pointer-events: none; } .survey-ing.i1 { --a: -16deg; left: -16%; bottom: 14%; } .survey-ing.i2 { --a: 14deg; left: -12%; top: 16%; width: clamp(90px, 12vw, 160px); } /* Chrono « 2 min » posé sur l'imprimante : l'aiguille avance par crans */ .survey-watch { position: absolute; z-index: 3; right: -12px; top: clamp(-96px, -8vw, -64px); width: clamp(80px, 9vw, 118px); rotate: 10deg; filter: drop-shadow(0 10px 10px rgb(0 0 0 / 0.3)); } .sw-ink { fill: var(--ink); } .sw-face { fill: var(--mustard); } .sw-ticks { fill: none; stroke: var(--ink); stroke-width: 6; stroke-dasharray: 0.6 4.4; } .sw-txt { fill: var(--ink); font-family: var(--cap); font-size: 17px; } .sw-hand { transform-box: view-box; transform-origin: 60px 76px; rotate: 60deg; } .sw-hand line { stroke: var(--red); stroke-width: 5; stroke-linecap: round; } .survey-slot { position: relative; z-index: 2; height: 22px; margin-inline: -14px; border-radius: 999px; background: var(--ink); box-shadow: inset 0 -7px 0 rgb(0 0 0 / 0.4); } .survey-print { position: relative; z-index: 1; margin-top: -11px; clip-path: inset(11px -80px -80px); filter: drop-shadow(0 28px 26px rgb(0 0 0 / 0.3)); } .survey-card { padding: 26px clamp(14px, 2.4vw, 28px) 40px; background: var(--paper); color: var(--ink); -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 24px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 24px 100%; } .rc-head, .rc-meta, .rc-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .rc-head { padding-bottom: 10px; border-bottom: 2px dashed rgb(42 25 19 / 0.25); } .rc-head .cap { color: var(--red); font-size: 1.6rem; letter-spacing: 0; text-transform: none; } .rc-meta { padding-top: 8px; color: var(--muted); } .rc-foot { margin-top: 6px; padding-top: 14px; border-top: 2px dashed rgb(42 25 19 / 0.25); } .rc-foot .cap { font-size: 1.4rem; letter-spacing: 0; text-transform: none; } .rc-code { width: min(45%, 180px); height: 34px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, #0000 2px 4px, var(--ink) 4px 7px, #0000 7px 9px, var(--ink) 9px 10px, #0000 10px 13px); } .survey-frame { position: relative; padding-block: 8px; } .survey-frame iframe { display: block; width: 100%; border: 0; color-scheme: light; transition: opacity 0.4s ease; } html.js .survey-frame:not(.is-ready) iframe { opacity: 0; } html.js .survey-frame:not(.is-ready)::before { content: "Chargement du questionnaire…"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-weight: 600; } .survey-alt { margin: 8px 0; } .survey-note { margin-top: 18px; color: rgb(255 244 224 / 0.8); font-size: 0.88rem; text-align: center; } @media (max-width: 639px) { .survey-ing.i1 { left: -9%; } .survey-ing.i2 { left: -7%; } .survey-slot { margin-inline: -6px; } .survey-watch { right: -4px; } } html.fx .survey-ing { animation: float 3.4s ease-in-out var(--d, 0s) infinite alternate; } html.fx .sw-hand { animation: tick 6s steps(12) infinite; } @keyframes tick { from { rotate: 0deg; } to { rotate: 1turn; } } /* is-in posé par pop.js à l'arrivée : le store se déroule, le chrono saute, le ticket s'imprime */ html.fx .survey::before { transition: scale 0.9s cubic-bezier(0.34, 1.3, 0.64, 1); } html.fx .survey-watch { transition: scale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s, rotate 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s; } html.fx .survey-card { transition: translate 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.6s; } html.fx .survey:not(.is-in)::before { scale: 1 0; } html.fx .survey:not(.is-in) .survey-watch { scale: 0; rotate: -60deg; } html.fx .survey:not(.is-in) .survey-card { translate: 0 -100%; } .lb-empty { margin-top: 20px; padding: 18px 20px; border: 2px dashed rgb(255 244 224 / 0.25); border-radius: 20px; color: rgb(255 244 224 / 0.8); } /* Maintenance (activée depuis dashboard.miraya.be) : page seule, sans script */ .maint { display: grid; min-height: 100svh; place-content: center; justify-items: center; gap: 22px; padding: 48px var(--gutter); background: var(--mustard); text-align: center; } .maint-title { font-size: clamp(3.2rem, 11vw, 8.5rem); line-height: 0.9; } .maint-reason { max-width: 46ch; font-size: clamp(1.05rem, 1.6vw, 1.3rem); } .maint-end { background: var(--paper); } .maint nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 16px; font-size: 0.92rem; } html:not(.js) .survey-frame iframe { display: none; } /* sans JS : le lien du