:root{--papier:#f3ead6;--points:#3c466429;--encre:#2f3a56;--encre-douce:#44506d;--surligneur:#f7d46a;--tampon:#c2334d;--polaroid:#fffdf8;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background-color:var(--papier);background-image:radial-gradient(circle, var(--points) 1px, transparent 1.6px);color:var(--encre);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;background-size:22px 22px;font-family:Nunito,system-ui,sans-serif}.page{max-width:640px;padding:calc(env(safe-area-inset-top) + 36px) 16px calc(env(safe-area-inset-bottom) + 48px);margin:0 auto}.tete{text-align:center;margin-bottom:26px}.salut{color:var(--encre-douce);margin:0 0 4px;font-family:Caveat,cursive;font-size:1.4rem;font-weight:600}h1{margin:0;line-height:1}h1 span{background:linear-gradient(transparent 58%, var(--surligneur) 58%, var(--surligneur) 88%, transparent 88%);padding:0 10px;font-family:Caveat,cursive;font-size:clamp(3.4rem,15vw,4.6rem);font-weight:700}.famille{justify-content:space-between;gap:6px;margin:8px 0 30px;padding:0;list-style:none;display:flex}.membre{--scotch:#f09696b3;--r:-4deg;flex-direction:column;flex:1 1 0;align-items:center;gap:8px;min-width:0;display:flex}.membre:nth-child(5n+2){--scotch:#8cbee6bf;--r:3deg}.membre:nth-child(5n+3){--scotch:#a0cd82bf;--r:-2deg}.membre:nth-child(5n+4){--scotch:#f7d46acc;--r:4deg}.membre:nth-child(5n+5){--r:-3deg}.portrait{background:var(--polaroid);width:60px;transform:translateY(var(--y,0)) rotate(var(--r,0deg));border-radius:3px;padding:4px 4px 12px;transition:transform .35s cubic-bezier(.34,1.56,.64,1);display:block;position:relative;box-shadow:0 6px 12px -4px #28283c59}.portrait:before{content:"";background:var(--scotch);width:30px;height:12px;margin-left:-15px;position:absolute;top:-7px;left:50%;transform:rotate(-6deg)}.portrait img{aspect-ratio:1;object-fit:cover;border-radius:1px;width:100%;height:auto;display:block}.membre:hover .portrait,.membre:active .portrait{--y:-5px;--r:0deg}.prenom{white-space:nowrap;max-width:100%;font-family:Caveat,cursive;font-size:1.1rem;font-weight:700}.rubrique{margin:0 0 14px;font-family:Caveat,cursive;font-size:1.8rem;font-weight:700}.tuiles{grid-template-columns:1fr 1fr;gap:14px;margin:0;padding:0;list-style:none;display:grid}.tuiles>li{--postit:#fbe58b;--r:-1.2deg;display:flex}.tuiles>li:nth-child(4n+2){--postit:#f8c6c9;--r:1.4deg}.tuiles>li:nth-child(4n+3){--postit:#c4ddf2;--r:1deg}.tuiles>li:nth-child(4n+4){--postit:#cfe6b8;--r:-1.5deg}.tuile{background:var(--postit);color:inherit;transform:translateY(var(--y,0)) rotate(var(--r,0deg));border-radius:3px 3px 18px;flex-direction:column;flex:1;align-items:flex-start;gap:12px;padding:16px 14px 18px;text-decoration:none;transition:transform .3s cubic-bezier(.34,1.56,.64,1);display:flex;position:relative;box-shadow:0 12px 14px -10px #28283c73}button.tuile:hover,button.tuile:focus-visible{--y:-4px;--r:0deg}button.tuile:active{--y:1px}button.tuile:focus-visible{outline:2px solid var(--encre);outline-offset:3px}.pastille{flex:none;place-items:center;width:40px;height:40px;font-family:Caveat,cursive;font-size:1.9rem;font-weight:700;display:grid}.pastille svg{width:32px;height:32px}.texte{flex-direction:column;gap:4px;min-width:0;display:flex}.nom{font-family:Caveat,cursive;font-size:1.7rem;font-weight:700;line-height:1}.phrase{color:var(--encre-douce);font-size:.86rem;line-height:1.35}.bientot{color:var(--tampon);border:2px solid var(--tampon);text-transform:uppercase;letter-spacing:.06em;border-radius:6px;padding:3px 8px;font-size:.66rem;font-weight:800;position:absolute;top:14px;right:12px;transform:rotate(8deg)}button.tuile{font:inherit;text-align:left;cursor:pointer;border:0}.porte{min-height:100dvh;padding:calc(env(safe-area-inset-top) + 24px) 16px calc(env(safe-area-inset-bottom) + 24px);place-items:center;display:grid}.porte__carte{background:var(--polaroid);border-radius:4px;flex-direction:column;gap:8px;width:min(100%,360px);padding:28px 22px 24px;display:flex;transform:rotate(-.8deg);box-shadow:0 16px 24px -14px #28283c80}.porte__carte h1{text-align:center}.porte__sous{text-align:center;color:var(--encre-douce);margin:4px 0 14px;font-family:Caveat,cursive;font-size:1.35rem}.porte__carte label{font-size:.9rem;font-weight:700}.porte__carte input{font:inherit;color:var(--encre);background:#fff;border:2px solid #2f3a5640;border-radius:8px;padding:11px 12px;font-size:1rem}.porte__carte input:focus-visible{border-color:var(--encre);outline:none}.porte__erreur{color:var(--tampon);margin:4px 0 0;font-size:.9rem;font-weight:700}.porte__carte button{font:inherit;background:var(--encre);color:var(--polaroid);cursor:pointer;border:0;border-radius:8px;margin-top:12px;padding:12px;font-size:1.05rem;font-weight:800}.porte__carte button:disabled{opacity:.6}.tiroir{z-index:10;background:var(--papier);flex-direction:column;transition:transform .3s cubic-bezier(.22,1,.36,1);display:flex;position:fixed;inset:0;transform:translateY(100%)}.tiroir--ouvert{transform:translateY(0)}.tiroir__tete{padding:calc(env(safe-area-inset-top) + 6px) 10px 6px;border-bottom:1px solid #2f3a5626;flex:none;align-items:center;gap:10px;display:flex}.tiroir__retour,.tiroir__dehors{width:40px;height:40px;color:var(--encre);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:50%;place-items:center;font-size:1.4rem;text-decoration:none;display:grid}.tiroir__titre{flex:1;font-family:Caveat,cursive;font-size:1.6rem;font-weight:700}.tiroir__cadre{background:#fff;border:0;flex:1;width:100%}.membre,.tuiles>li{animation:.6s cubic-bezier(.2,.8,.2,1) both arrivee;animation-delay:calc(var(--i,0) * 55ms + 80ms)}@keyframes arrivee{0%{opacity:0;transform:translateY(16px)scale(.96)}to{opacity:1;transform:none}}@media (width>=720px){.page{max-width:820px;padding-top:64px}.tete{margin-bottom:36px}.famille{justify-content:center;gap:34px;margin-bottom:48px}.membre{flex:none}.portrait{width:104px;padding:6px 6px 18px}.portrait:before{width:44px;height:16px;margin-left:-22px;top:-9px}.prenom{font-size:1.35rem}.tuiles{grid-template-columns:repeat(4,1fr);gap:20px}}@media (prefers-reduced-motion:reduce){.membre,.tuiles>li{animation:none}.portrait,.tuile,.tiroir{transition:none}.membre:hover .portrait,.membre:active .portrait,button.tuile:hover,button.tuile:focus-visible,button.tuile:active{--y:0}}