/* ------------------------------------------------------------------ Le grand pop-up d'anniversaire (public/extra/anniversaire.js). Posé sur , au-dessus de tout (affiche de saison comprise). Des `div` seulement : style.css habille header/footer en plein écran. */ .anv-fond{ position:fixed; inset:0; z-index:12000; display:flex; align-items:flex-start; justify-content:center; padding:max(12px, env(safe-area-inset-top)) 12px 12px; overflow-y:auto; overscroll-behavior:contain; background: radial-gradient(circle at 20% 15%, rgba(255,156,200,.55), transparent 45%), radial-gradient(circle at 85% 80%, rgba(183,124,255,.5), transparent 50%), radial-gradient(circle at 70% 10%, rgba(255,201,60,.35), transparent 40%), rgba(40,8,30,.82); backdrop-filter:blur(4px); opacity:0; transition:opacity .35s ease; } .anv-fond.vu{opacity:1} .anv-confettis{position:fixed; inset:0; width:100%; height:100%; z-index:12001; pointer-events:none; opacity:0; transition:opacity .35s ease} .anv-confettis.vu{opacity:1} .anv-carte{ position:relative; margin:auto 0; box-sizing:border-box; width:min(640px,100%); padding:22px 22px 18px; border-radius:28px; background: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 14px, transparent 14px 28px), linear-gradient(180deg,#FFF5FA 0%,#FFE1EE 45%,#FFD0E4 100%); border:4px solid #fff; box-shadow:0 0 0 6px #FF7FB5, 0 30px 80px rgba(60,0,40,.55), 0 0 60px rgba(255,127,181,.6); color:#5A1638; text-align:center; font-family:"Instrument Sans", system-ui, sans-serif; transform:translateY(40px) scale(.8) rotate(-2deg); transition:transform .6s cubic-bezier(.2,1.6,.35,1); } .anv-fond.vu .anv-carte{transform:none} /* le glaçage qui coule du haut de la carte */ .anv-carte::before{ content:""; position:absolute; left:10px; right:10px; top:-4px; height:30px; pointer-events:none; background: radial-gradient(circle at 6% 0, #FF7FB5 0 16px, transparent 17px), radial-gradient(ellipse 14px 26px at 19% 0, #FF7FB5 98%, transparent 100%), radial-gradient(circle at 33% 0, #FF7FB5 0 12px, transparent 13px), radial-gradient(ellipse 12px 30px at 47% 0, #FF7FB5 98%, transparent 100%), radial-gradient(circle at 61% 0, #FF7FB5 0 15px, transparent 16px), radial-gradient(ellipse 13px 22px at 76% 0, #FF7FB5 98%, transparent 100%), radial-gradient(circle at 92% 0, #FF7FB5 0 14px, transparent 15px); border-radius:0 0 12px 12px; } .anv-croix{ position:absolute; top:12px; right:14px; z-index:2; width:36px; height:36px; border-radius:50%; border:2px solid #fff; background:#FF7FB5; color:#fff; font-size:24px; line-height:1; cursor:pointer; box-shadow:0 4px 10px rgba(120,0,60,.3); } .anv-sur{margin-top:18px; font-size:12px; letter-spacing:.24em; text-transform:uppercase; font-weight:700; color:#C2266D} .anv-titre{ margin:6px 0 0; font-family:"Fraunces", Georgia, serif; font-weight:900; font-size:clamp(24px, 8.2vw, 50px); line-height:1.02; letter-spacing:-.01em; } .anv-titre span{ display:inline-block; color:hsl(calc(var(--i) * 23 + 320), 90%, 58%); text-shadow:0 3px 0 #fff, 0 5px 0 rgba(90,22,56,.25); animation:anv-saute 1.6s ease-in-out infinite; animation-delay:calc(var(--i) * .07s); } .anv-titre .anv-mot{display:inline-block; white-space:nowrap} @keyframes anv-saute{ 0%,60%,100%{transform:translateY(0) rotate(0)} 30%{transform:translateY(-10px) rotate(-4deg)} } .anv-prenom{ margin:2px 0 4px; font-family:"Fraunces", Georgia, serif; font-weight:900; font-size:clamp(46px, 13vw, 92px); line-height:1; letter-spacing:.02em; background:linear-gradient(180deg,#FF4F8B 0%,#FF2E6E 45%,#B8186A 100%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 4px 0 #fff) drop-shadow(0 8px 14px rgba(184,24,106,.45)); animation:anv-balance 2.4s ease-in-out infinite; overflow-wrap:anywhere; } @keyframes anv-balance{ 0%,100%{transform:scale(1) rotate(-1.5deg)} 50%{transform:scale(1.06) rotate(1.5deg)} } .anv-scene{ position:relative; height:320px; margin:10px 0 6px; border-radius:22px; overflow:hidden; background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.95), rgba(255,230,242,.6) 40%, transparent 70%), linear-gradient(180deg,#FFD6EA 0%,#FFC2DE 60%,#F6A9CF 100%); box-shadow:inset 0 0 0 3px #fff, inset 0 -30px 50px rgba(255,127,181,.35); } .anv-3d{position:absolute; inset:0; width:100%; height:100%; display:block; cursor:grab; touch-action:none} .anv-3d:active{cursor:grabbing} .anv-astuce{position:absolute; left:0; right:0; bottom:8px; font-size:11px; opacity:.55; pointer-events:none} .anv-scene.sans-3d .anv-astuce{display:none} .anv-texte{margin:8px 4px 4px; font-size:16px; line-height:1.45; font-weight:500} .anv-sous{ margin:14px 0 10px; font-family:"Fraunces", Georgia, serif; font-weight:800; font-size:19px; color:#C2266D; } .anv-cadeaux{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px} .anv-cadeau{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 6px 10px; border-radius:16px; background:#fff; box-shadow:0 0 0 2px #FFB3D3, 0 6px 14px rgba(184,24,106,.15); animation:anv-arrive .6s cubic-bezier(.2,1.6,.35,1) both; } .anv-cadeau:nth-child(2){animation-delay:.12s} .anv-cadeau:nth-child(3){animation-delay:.24s} .anv-cadeau:nth-child(4){animation-delay:.36s} .anv-cadeau:nth-child(5){animation-delay:.48s} @keyframes anv-arrive{ from{opacity:0; transform:translateY(20px) scale(.7)} to{opacity:1; transform:none} } .anv-cadeau canvas{width:100%; aspect-ratio:1/1; display:block; border-radius:12px; background:radial-gradient(circle at 50% 60%, #FFE6F1, #FFF7FB 70%)} .anv-cadeau i{font-style:normal; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#E0558F; font-weight:700; margin-top:4px} .anv-cadeau b{font-size:12.5px; line-height:1.2; font-weight:700} .anv-cadeau.anv-pseudo{grid-column:1 / -1} .anv-cadeau.anv-pseudo canvas{aspect-ratio:640/150; width:min(100%, 440px); background:none} .anv-boutons{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:16px} .anv-boutons button{ font:inherit; font-weight:800; font-size:17px; border-radius:999px; padding:13px 24px; cursor:pointer; border:3px solid #fff; box-shadow:0 6px 0 rgba(120,0,60,.25), 0 10px 20px rgba(120,0,60,.2); transition:transform .12s ease; } .anv-boutons button:active{transform:translateY(3px)} .anv-tout{background:linear-gradient(180deg,#FF6FA8,#E62E78); color:#fff; animation:anv-pulse 1.8s ease-in-out infinite} .anv-tout:disabled{animation:none; opacity:.85; cursor:default} @keyframes anv-pulse{ 0%,100%{box-shadow:0 6px 0 rgba(120,0,60,.25), 0 0 0 0 rgba(255,79,139,.55)} 50%{box-shadow:0 6px 0 rgba(120,0,60,.25), 0 0 0 12px rgba(255,79,139,0)} } .anv-merci{background:#FFF3C4; color:#7A4A00} .anv-pied{margin-top:12px; font-size:12px; opacity:.6} @media (max-width:640px){ .anv-carte{padding:18px 12px 14px; border-radius:22px} .anv-scene{height:260px} .anv-cadeaux{grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px} .anv-texte{font-size:14.5px} .anv-boutons button{font-size:16px; padding:12px 18px; flex:1 1 auto} } @media (max-height:560px) and (min-width:641px){ .anv-scene{height:220px} } @media (prefers-reduced-motion:reduce){ .anv-titre span,.anv-prenom,.anv-tout{animation:none} }