:root{--bg:#f6f0e7;--ink:#26352e;--muted:#777a70;--wine:#803b43;--wine-dark:#672c35;--line:#d8d3c9;--card:#fffdf8;--mint:#dee5d8;--gold:#c9a76a}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',Arial,sans-serif}button,input,textarea{font:inherit}button{cursor:pointer}a{color:inherit}.texture{pointer-events:none;position:fixed;inset:0;opacity:.22;background-image:radial-gradient(#adac9d .65px,transparent .65px);background-size:8px 8px;z-index:9}.topbar{height:91px;display:flex;align-items:center;justify-content:space-between;max-width:1300px;margin:auto;padding:0 5%;border-bottom:1px solid var(--line);position:relative;z-index:10}.logo{text-decoration:none;font-family:'Playfair Display',serif;font-weight:700;font-size:26px;display:flex;align-items:center;gap:8px;white-space:nowrap}.logo-mark{font-size:29px;color:var(--wine)}.logo-star{font-size:13px;color:#caa16b;align-self:flex-start}.tiny,.eyebrow{letter-spacing:2.1px;font-weight:700;font-size:10px;color:#687267}.top-actions{display:flex;gap:18px;align-items:center}.profile-btn{border:1px solid var(--ink);padding:11px 16px;background:transparent;border-radius:30px}.hidden{display:none!important}main{min-height:70vh}.landing{max-width:1300px;padding:70px 5% 95px;display:grid;grid-template-columns:1.05fr .95fr;gap:35px;margin:auto;align-items:center;min-height:650px}.dot{background:#bc866b;width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:8px}.hero-copy{position:relative;z-index:1}h1,h2,h3{font-family:'Playfair Display',serif;font-weight:500}h1{font-size:clamp(48px,5.1vw,78px);letter-spacing:-2.7px;line-height:1.15;margin:26px 0 25px}h1 em,h2 em{color:var(--wine);font-weight:500}.hero-sub{font-size:18px;line-height:1.8;color:#626960}.landing-actions,.buttons{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px}.btn{border-radius:4px;border:1px solid var(--wine);padding:16px 20px;font-size:13px;font-weight:700;display:inline-flex;gap:15px;align-items:center;justify-content:space-between;transition:transform .15s,background .15s}.btn:hover{transform:translateY(-2px)}.btn-primary{background:var(--wine);color:white}.btn-primary:hover{background:var(--wine-dark)}.btn-outline{color:var(--wine);background:transparent}.btn-light{background:#f5f3ed;border-color:var(--line);color:var(--ink)}.btn-small{padding:10px 14px;font-size:12px}.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}.small-note{font-size:12px;color:#96958b;margin-top:18px}.hero-art{height:540px;min-width:0;position:relative;display:flex;align-items:flex-end;justify-content:center;isolation:isolate}.hero-art img{position:relative;z-index:1;display:block;max-width:100%;height:100%;aspect-ratio:1;object-fit:contain;object-position:center bottom;-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 97%),linear-gradient(to right,transparent 0,#000 9%,#000 93%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,#000 70%,transparent 97%),linear-gradient(to right,transparent 0,#000 9%,#000 93%,transparent 100%);mask-composite:intersect;filter:drop-shadow(0 22px 34px rgba(103,44,53,.16))}.img-glow{position:absolute;z-index:0;left:50%;top:50%;width:min(100%,560px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#f2d6c2 0%,#f0e0cd 34%,rgba(246,240,231,0) 68%)}.hero-art.art-fallback:after{content:'🎅 🎸';position:absolute;font-size:120px;top:35%;left:50%;transform:translateX(-50%) rotate(-9deg)}.art-stamp{position:absolute;z-index:2;left:25px;bottom:24px;background:#fff8e7db;color:#6d3e3c;padding:13px 16px;transform:rotate(-5deg);font-size:11px;line-height:1.2;font-weight:800;letter-spacing:2px}.art-stars{position:absolute;z-index:2;right:20px;top:25px;color:var(--gold);font-size:30px}.invitation{background:#e9e6dd;padding:75px 25px;text-align:center}.invitation h2{font-size:clamp(34px,4vw,54px);margin:18px 0}.invitation p{max-width:560px;margin:0 auto 24px;line-height:1.8;color:#626960}.text-btn{border:0;border-bottom:1px solid var(--wine);background:none;padding:8px 0;color:var(--wine);font-weight:700}footer{display:flex;justify-content:space-between;gap:15px;max-width:1300px;margin:auto;padding:38px 5%;font-size:12px;color:#74796f}footer b{font-family:'Playfair Display',serif;font-size:19px;color:var(--ink)}footer p{margin:8px 0}dialog{border:0;border-radius:15px;padding:35px;width:min(480px,calc(100% - 30px));box-shadow:0 15px 80px #1e2c2340;color:var(--ink);background:var(--card)}dialog::backdrop{background:#2029209e;backdrop-filter:blur(3px)}dialog h2{font-size:32px;margin:3px 0 12px}dialog p{line-height:1.55;color:#71766e}dialog label{font-size:12px;font-weight:800;display:block;margin:20px 0 7px}dialog input,dialog textarea,.form-input{width:100%;border-radius:6px;border:1px solid #cacdc4;background:white;padding:13px;color:var(--ink)}dialog textarea{resize:vertical;min-height:86px}.close{position:absolute;right:16px;top:12px;border:0;background:none;font-size:26px;color:#7c8178}.modal-actions{display:flex;gap:10px;margin-top:23px}.modal-actions .btn{flex:1}.hint{font-size:11px!important}.linkbox{overflow-wrap:anywhere;background:#f0ece4;border:1px dashed #aaa396;padding:12px;border-radius:8px;font-size:12px}.dashboard{max-width:1180px;margin:0 auto;padding:45px 25px 100px}.dashboard-head{display:flex;justify-content:space-between;align-items:start;gap:25px}.dashboard h1{font-size:clamp(37px,5vw,64px);margin:13px 0}.dashboard .lead{font-size:15px;color:var(--muted);line-height:1.7}.dash-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.member-strip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:30px 0;border-bottom:1px solid var(--line);padding-bottom:25px}.member-chip{border:1px solid #c9cfc4;background:transparent;padding:10px 17px;border-radius:40px;color:var(--ink);font-size:13px}.member-chip.active{color:#fff;background:var(--ink)}.member-chip:hover{border-color:var(--wine)}.section-label{font-size:11px;font-weight:800;letter-spacing:2px;margin:30px 0 18px}.gift-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.gift{border-radius:10px;border:1px solid #ddd8cd;background:var(--card);padding:23px;min-height:190px;display:flex;flex-direction:column;gap:10px}.gift h3{font-size:22px;margin:0;line-height:1.2}.gift p{font-size:13px;line-height:1.6;color:#77786f;margin:0;overflow-wrap:anywhere}.gift .gift-top{display:flex;justify-content:space-between;align-items:center;color:#9b8974;font-size:12px}.gift .gift-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto;padding-top:10px}.price{font-weight:800;color:var(--wine)}.status{font-size:12px;color:#7d826f}.empty{border:1px dashed #bfc6ba;border-radius:12px;padding:55px 20px;text-align:center;color:#787a70;grid-column:1/-1}.empty b{display:block;font-family:'Playfair Display',serif;font-size:25px;color:var(--ink);margin:10px}.secret{margin:35px 0;padding:18px 22px;background:#e6e8dd;border-left:3px solid #879782;font-size:13px;line-height:1.6;color:#525e51}.link-small{font-size:12px;text-decoration:underline;overflow-wrap:anywhere}.danger{color:#9a3d45;border:0;background:none;font-size:12px;text-decoration:underline}.share-box{background:#f0ece4;border-radius:10px;padding:18px;margin-top:24px}#toast{position:fixed;bottom:22px;right:22px;background:#27392c;color:white;border-radius:7px;padding:13px 19px;font-size:13px;opacity:0;pointer-events:none;transform:translateY(8px);transition:.2s;z-index:30;max-width:330px}#toast.visible{opacity:1;transform:translateY(0)}@media(max-width:800px){.landing{grid-template-columns:1fr;padding-top:52px;gap:45px}.hero-art{height:390px;max-width:550px;width:100%;margin:auto}.tiny{display:none}.dashboard-head{flex-direction:column}.dash-actions{justify-content:flex-start}.gift-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:550px){.topbar{height:76px}.logo{font-size:22px}.landing{padding-bottom:55px}.landing-actions{flex-direction:column;align-items:stretch}.hero-art{height:325px}.gift-grid{grid-template-columns:1fr}.dashboard{padding:30px 16px 60px}footer{flex-direction:column}.member-strip{gap:7px}}


/* ===== MAGIE DE NOËL ===== */
/* Modes posés par magic.js sur <html data-magic="…"> :
   on = toutes les animations · reduced = prefers-reduced-motion, fondus doux seulement · off = bouton Magie coupé.
   Tous les éléments décoratifs sont aria-hidden et sans interaction (seules les ampoules réagissent au survol). */

/* Calques canvas : neige derrière le contenu, effets devant */
.magic-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;display:none}
.magic-snow{z-index:-1}
.magic-fx{z-index:25}
[data-magic="on"] .magic-canvas{display:block}
[data-magic="on"] .invitation{background:rgba(233,230,221,.82)}
[data-magic="off"] .magic-deco{display:none!important}
.magic-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Boutons Magie et Sons */
.magic-controls{display:flex;gap:8px;align-items:center}
.magic-btn{border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:30px;padding:8px 13px;font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:background .2s,border-color .2s,color .2s}
.magic-btn:hover{border-color:var(--gold)}
.magic-btn.is-on{border-color:var(--gold);background:#fbf3e2;color:var(--wine)}
.magic-btn:focus-visible,.profile-btn:focus-visible{outline:2px solid var(--wine);outline-offset:2px}
.magic-btn-ico{color:var(--gold);font-size:13px;line-height:1}
.magic-btn:not(.is-on) .magic-btn-ico{filter:grayscale(1);opacity:.6}

/* Guirlande lumineuse */
.magic-garland{position:relative;height:0;max-width:1300px;margin:0 auto;z-index:8;pointer-events:none}
.magic-garland svg{position:absolute;left:0;top:-1px;overflow:visible;pointer-events:none}
.magic-garland .wire{fill:none;stroke:var(--ink);stroke-opacity:.45;stroke-width:1.2}
.magic-garland .bulb{pointer-events:auto}
.magic-garland .cap{fill:#56625a}
.magic-garland .glass{stroke-width:.8;transition:filter .25s}
.magic-garland .shine{fill:#fff;opacity:.55}
.bulb-wine .glass{fill:var(--wine);stroke:var(--wine-dark)}
.bulb-gold .glass{fill:var(--gold);stroke:#a8864c}
.bulb-mint .glass{fill:var(--mint);stroke:#97ad92}
.bulb-white .glass{fill:#fff6df;stroke:#d6c193}
.magic-garland .glow{opacity:.4;transform-box:fill-box;transform-origin:center;transition:scale .3s,opacity .3s}
[data-magic="on"] .magic-garland .glow{animation:magic-bulb var(--dur,3s) ease-in-out var(--delay,0s) infinite alternate}
[data-magic="reduced"] .magic-garland .glow{animation:magic-bulb calc(var(--dur,3s) * 2.5) ease-in-out var(--delay,0s) infinite alternate}
.magic-garland .bulb:hover .glow{opacity:1!important;scale:1.7}
.magic-garland .bulb:hover .glass{filter:brightness(1.25) saturate(1.3)}
@keyframes magic-bulb{0%{opacity:.12}100%{opacity:.85}}

/* Accueil : Père Noël qui se balance, halo doré, étoiles, titre lettre par lettre */
[data-magic="on"] .hero-art img{transform-origin:50% 100%;animation:magic-sway 6s ease-in-out infinite}
.img-glow::after{content:'';position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle,rgba(201,167,106,.42),rgba(201,167,106,0) 64%);opacity:0;pointer-events:none}
[data-magic="on"] .img-glow{animation:magic-halo 4.5s ease-in-out infinite}
[data-magic="on"] .img-glow::after{animation:magic-halo-gold 4.5s ease-in-out infinite}
[data-magic="reduced"] .img-glow::after{opacity:.5}
.magic-star{display:inline-block;margin:0 .24em}
[data-magic="on"] .magic-star{animation:magic-twinkle 2.8s ease-in-out var(--d,0s) infinite,magic-spin 16s linear infinite}
.magic-word{display:inline-block;white-space:nowrap}
.magic-letter{display:inline-block}
[data-magic="on"] .magic-letter{animation:magic-letter .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 55ms + 350ms)}
[data-magic="reduced"] .magic-type{animation:magic-fade 1.2s ease both}
@keyframes magic-sway{0%,100%{rotate:-2deg}50%{rotate:2deg}}
@keyframes magic-halo{0%,100%{scale:1;opacity:.9}50%{scale:1.06;opacity:1}}
@keyframes magic-halo-gold{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes magic-twinkle{0%,100%{opacity:.45;scale:.82}50%{opacity:1;scale:1.14}}
@keyframes magic-spin{to{rotate:360deg}}
@keyframes magic-letter{0%{opacity:0;translate:0 .35em;filter:blur(6px)}55%{opacity:1;filter:blur(0);text-shadow:0 0 16px rgba(201,167,106,.95)}100%{opacity:1;translate:0 0;text-shadow:0 0 0 rgba(201,167,106,0)}}
@keyframes magic-fade{from{opacity:0}to{opacity:1}}
@keyframes magic-fadeout{from{opacity:1}to{opacity:0}}

/* Paquet volant et traîneau (positionnés image par image par magic.js) */
.magic-gift,.magic-sleigh{position:fixed;left:0;top:0;z-index:26;pointer-events:none;will-change:transform}
.magic-gift{width:46px;height:46px;filter:drop-shadow(0 6px 10px rgba(103,44,53,.25))}
.magic-gift svg{display:block}
.magic-sleigh{color:var(--ink);opacity:.9}
.magic-sleigh svg{display:block;width:100%;height:100%;overflow:visible}

/* Cartes cadeaux */
.gift{position:relative}
[data-magic="on"] .gift{transition:transform .25s ease-out,border-color .3s,box-shadow .3s}
[data-magic="on"] .gift:hover,[data-magic="reduced"] .gift:hover{border-color:var(--gold);box-shadow:0 0 0 1px rgba(201,167,106,.55),0 16px 32px -20px rgba(103,44,53,.4)}
.magic-tilt{will-change:transform}
[data-magic="on"] .magic-cascade{animation:magic-rise .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 60ms)}
[data-magic="reduced"] .magic-cascade{animation:magic-fade .45s ease both;animation-delay:calc(var(--i,0) * 60ms)}
.magic-pending{opacity:0!important}
[data-magic="on"] .magic-unwrap{animation:magic-unwrap .8s cubic-bezier(.2,.9,.25,1.15) both}
.magic-sheen{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.magic-sheen::before{content:'';position:absolute;top:-10%;bottom:-10%;left:0;width:45%;background:linear-gradient(105deg,rgba(232,206,150,0) 10%,rgba(232,206,150,.7) 50%,rgba(255,247,226,0) 90%);translate:-110% 0;animation:magic-sheen 1.1s .3s ease-out both}
[data-magic="on"] .magic-thud{animation:magic-thud .35s ease-out}
[data-magic="on"] .magic-melting{animation:magic-melt var(--melt,700ms) linear forwards;pointer-events:none}
.magic-fadein{animation:magic-fade .6s ease both}
.magic-fadeout{animation:magic-fadeout .3s ease forwards}
[data-magic="off"] .magic-fadein,[data-magic="off"] .magic-fadeout{animation:none}
@keyframes magic-rise{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
@keyframes magic-unwrap{0%{opacity:0;scale:.8}55%{opacity:1;scale:1.05}100%{opacity:1;scale:1}}
@keyframes magic-sheen{to{translate:330% 0}}
@keyframes magic-thud{0%{scale:1}35%{scale:.975}100%{scale:1}}
@keyframes magic-melt{0%{clip-path:inset(0 0 0 0);opacity:1}85%{opacity:.85}100%{clip-path:inset(100% 0 0 0);opacity:0}}

/* Nœud doré des réservations (visible uniquement par la personne qui réserve) */
.magic-bow{position:absolute;top:-17px;right:18px;width:46px;height:34px;pointer-events:none;filter:drop-shadow(0 3px 4px rgba(103,44,53,.22))}
.magic-bow svg{display:block;width:100%;height:100%;overflow:visible}
.magic-bow path,.magic-bow rect{fill:var(--gold);stroke:#a8864c;stroke-width:.8}
.magic-bow .bow-in{fill:#a8864c;opacity:.55;stroke:none}
.magic-bow .bow-k rect{fill:#dcbf86}
.magic-bow g{transform-box:view-box}
[data-magic="on"] .magic-bow.magic-stamp{animation:magic-stamp .6s cubic-bezier(.3,1.4,.5,1) both}
[data-magic="on"] .magic-untie .bow-l{transform-origin:23px 14px;animation:magic-untie-l .7s ease-in forwards}
[data-magic="on"] .magic-untie .bow-r{transform-origin:23px 14px;animation:magic-untie-r .7s ease-in forwards}
[data-magic="on"] .magic-untie .bow-t1,[data-magic="on"] .magic-untie .bow-t2{animation:magic-untie-t .6s .1s ease-in forwards}
[data-magic="on"] .magic-untie .bow-k{transform-origin:23px 14px;animation:magic-untie-k .5s ease-in forwards}
[data-magic="on"] .magic-bow.magic-untie{animation:magic-fadeout .35s .4s ease forwards}
@keyframes magic-stamp{0%{opacity:0;scale:2.6;rotate:-24deg}55%{opacity:1;scale:.88;rotate:5deg}78%{scale:1.07;rotate:-2deg}100%{opacity:1;scale:1;rotate:0deg}}
@keyframes magic-untie-l{to{rotate:-60deg;translate:-7px 5px;opacity:0}}
@keyframes magic-untie-r{to{rotate:60deg;translate:7px 5px;opacity:0}}
@keyframes magic-untie-t{to{translate:0 9px;opacity:0}}
@keyframes magic-untie-k{to{scale:.2;opacity:0}}

/* Puce de membre active : petit flocon qui tourne */
.magic-chip-flake{display:inline-flex;width:13px;height:13px;margin-left:7px;vertical-align:-2px;color:var(--gold);pointer-events:none}
.magic-chip-flake svg{width:100%;height:100%}
[data-magic="on"] .magic-chip-flake{animation:magic-spin 9s linear infinite}
[data-magic="on"] .magic-chip-new .magic-chip-flake{animation:magic-flake-in .8s cubic-bezier(.2,.9,.3,1.3) both,magic-spin 9s linear .8s infinite}
[data-magic="reduced"] .magic-chip-new .magic-chip-flake{animation:magic-fade .5s ease both}
@keyframes magic-flake-in{0%{opacity:0;scale:0;rotate:-180deg}100%{opacity:1;scale:1;rotate:0deg}}

/* Reflet sur les boutons principaux */
[data-magic="on"] .btn-primary{position:relative;overflow:hidden;isolation:isolate}
[data-magic="on"] .btn-primary::after{content:'';position:absolute;top:0;bottom:0;left:0;width:60%;background:linear-gradient(105deg,transparent 20%,rgba(255,238,200,.4) 50%,transparent 80%);translate:-110% 0;pointer-events:none}
[data-magic="on"] .btn-primary:hover::after{translate:190% 0;transition:translate .75s ease}

/* Liste vide : bonhomme de neige */
.magic-snowman{display:block;margin:0 auto 4px;overflow:visible;pointer-events:none}
[data-magic="on"] .magic-replaced,[data-magic="reduced"] .magic-replaced{display:none}
.magic-snowman .sm-shadow{fill:rgba(38,53,46,.08)}
.magic-snowman .sm-body{fill:#fff;stroke:#c9d0c4;stroke-width:1.5}
.magic-snowman .sm-arm path{fill:none;stroke:#7a5a45;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.magic-snowman .sm-scarf{fill:var(--wine)}
.magic-snowman .sm-coal{fill:var(--ink)}
.magic-snowman .sm-nose{fill:#d08a4c}
.magic-snowman .sm-smile{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:.1 3.2}
.magic-snowman .sm-hat{fill:var(--ink)}
.magic-snowman .sm-band{fill:var(--gold)}
.magic-snowman .sm-pompom{fill:#fff;stroke:#c9d0c4;stroke-width:1.2}
.magic-snowman .sm-eyes{transform-box:fill-box;transform-origin:center}
.magic-snowman .sm-arm-wave{transform-box:view-box;transform-origin:78px 66px}
[data-magic="on"] .magic-snowman .sm-eyes{animation:magic-blink 4.2s infinite}
[data-magic="on"] .magic-snowman .sm-arm-wave{animation:magic-wave 3.4s ease-in-out infinite}
[data-magic="reduced"] .magic-snowman{animation:magic-fade .8s ease both}
@keyframes magic-blink{0%,90%,100%{scale:1 1}93%{scale:1 .1}96%{scale:1 1}}
@keyframes magic-wave{0%,55%,100%{rotate:0deg}10%{rotate:-22deg}20%{rotate:4deg}30%{rotate:-22deg}40%{rotate:4deg}}

/* Toast : descente avec rebond, étoile qui tourne */
[data-magic="on"] #toast.visible{animation:magic-toast-drop .7s cubic-bezier(.3,1.3,.5,1) both}
[data-magic="on"] #toast.magic-festive::before,[data-magic="reduced"] #toast.magic-festive::before{content:'✦';display:inline-block;margin-right:9px;color:var(--gold)}
[data-magic="on"] #toast.magic-festive::before{animation:magic-spin 1.6s linear infinite}
@keyframes magic-toast-drop{0%{opacity:0;transform:translateY(-28px)}55%{opacity:1;transform:translateY(5px)}78%{transform:translateY(-3px)}100%{opacity:1;transform:translateY(0)}}

@media(max-width:550px){
  .topbar{flex-wrap:wrap;height:auto;min-height:76px;padding-top:12px;padding-bottom:12px;row-gap:10px}
  .top-actions{gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto}
  .magic-btn{padding:8px 10px}
  .magic-btn-txt{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
}
/* Achat : le paquet se ferme et reçoit un nœud doré (posé sur la carte) */
.magic-wrap{position:absolute;inset:0;z-index:3;display:grid;place-items:center;border-radius:inherit;background:rgba(255,253,248,.9);pointer-events:none;animation:magic-fade .25s ease both,magic-fadeout .45s ease 1.5s forwards}
.magic-wrap svg{width:min(118px,62%);height:auto;overflow:visible;filter:drop-shadow(0 8px 14px rgba(103,44,53,.22))}
.magic-wrap g{transform-box:view-box}
[data-magic="on"] .magic-wrap .wrap-box{transform-origin:50px 86px;animation:magic-wrap-box .35s cubic-bezier(.3,1.4,.5,1) both}
[data-magic="on"] .magic-wrap .wrap-lid{transform-origin:50px 41px;animation:magic-wrap-lid .45s .3s cubic-bezier(.3,1.5,.5,1) both}
[data-magic="on"] .magic-wrap .wrap-bow{transform-origin:50px 35px;animation:magic-wrap-bow .45s .78s cubic-bezier(.3,1.7,.5,1) both}
@keyframes magic-wrap-box{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
@keyframes magic-wrap-lid{0%{opacity:0;translate:0 -34px;rotate:-16deg}35%{opacity:1}100%{opacity:1;translate:0 0;rotate:0deg}}
@keyframes magic-wrap-bow{0%{opacity:0;scale:0}70%{opacity:1;scale:1.18}100%{opacity:1;scale:1}}
/* Bienvenue : message doré au centre de l'écran à la création d'un profil */
.magic-welcome{position:fixed;inset:0;z-index:24;display:grid;place-items:center;pointer-events:none;background:radial-gradient(circle at 50% 42%,rgba(246,240,231,.94),rgba(246,240,231,0) 62%);animation:magic-fade .35s ease both,magic-fadeout .6s ease 2s forwards}
.magic-welcome-text{position:relative;top:-8vh;margin:0;padding:0 24px;text-align:center;font-family:'Playfair Display',serif;font-size:clamp(34px,6vw,64px);color:var(--wine);letter-spacing:-1px;text-shadow:0 2px 18px rgba(201,167,106,.45)}
[data-magic="on"] .magic-welcome-text{animation:magic-letter .9s cubic-bezier(.2,.7,.2,1) both}
[data-magic="off"] .magic-wrap,[data-magic="off"] .magic-welcome{display:none}
/* Filet de sécurité : si la préférence système change avant que magic.js ne réagisse */
@media (prefers-reduced-motion: reduce){
  .magic-gift,.magic-sleigh{display:none}
  [data-magic] .hero-art img,[data-magic] .magic-star,[data-magic] .img-glow,[data-magic] .magic-letter{animation:none}
}


/* ===== MUSIQUE ===== */
/* Bouton flottant créé par music.js. Même langage visuel que les boutons « Magie » et « Sons » :
   bordure dorée et fond crème quand la musique joue, icône grisée et barrée quand elle est coupée. */
.music-btn{position:fixed;right:22px;bottom:22px;z-index:29;width:50px;height:50px;padding:0;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 12px 28px -14px rgba(103,44,53,.45),0 2px 6px rgba(38,53,46,.08);transition:background .2s,border-color .2s,box-shadow .2s,transform .2s}
.music-btn[hidden]{display:none}
.music-btn:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(103,44,53,.5),0 2px 6px rgba(38,53,46,.08)}
.music-btn:focus-visible{outline:2px solid var(--wine);outline-offset:3px}
.music-btn.is-on{border-color:var(--gold);background:#fbf3e2}
.music-ico{font-size:22px;line-height:1;color:var(--wine);transition:filter .2s,opacity .2s}
.music-btn.is-off .music-ico{filter:grayscale(1);opacity:.55}
.music-btn.is-off::after{content:'';position:absolute;left:50%;top:50%;width:30px;height:2px;border-radius:2px;background:var(--wine);transform:translate(-50%,-50%) rotate(-45deg);box-shadow:0 0 0 1.5px var(--card);pointer-events:none}
.music-notes{position:absolute;inset:0;pointer-events:none}
.music-notes span{position:absolute;left:50%;top:8px;font-size:14px;line-height:1;color:var(--gold);opacity:0}
.music-notes span:nth-child(2){color:var(--wine)}
.music-btn.is-on .music-notes span{animation:music-note 2.4s ease-out infinite}
.music-btn.is-on .music-notes span:nth-child(2){animation-delay:.8s}
.music-btn.is-on .music-notes span:nth-child(3){animation-delay:1.6s}
@keyframes music-note{0%{opacity:0;transform:translate(-50%,0) rotate(0deg)}20%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx,-12px)),-38px) rotate(-14deg)}}
/* Magie coupée ou mouvements réduits : la musique continue, seules les notes animées s'arrêtent */
[data-magic="off"] .music-notes span,[data-magic="reduced"] .music-notes span{animation:none!important;opacity:0}
@media (prefers-reduced-motion: reduce){.music-notes span{animation:none!important;opacity:0}.music-btn:hover{transform:none}}
/* Le toast passe au-dessus du bouton, et la fin de page lui laisse la place : aucune action n'est masquée */
.has-music #toast{bottom:84px}
.has-music footer{padding-bottom:96px}
@media(max-width:550px){
  .music-btn{right:16px;bottom:16px;width:46px;height:46px}
  .has-music #toast{bottom:74px}
}


/* ===== PROFILS, ACHATS ET VUE « TOUTES LES ENVIES » ===== */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.form-error{margin:14px 0 0;color:#9a3d45;font-size:13px;font-weight:600;line-height:1.5}
.form-error:empty{margin:0}
.form-error .text-btn{font-size:13px;padding:2px 0}
.form-hint{font-size:12px;color:var(--muted);line-height:1.5;margin:12px 0 0}
/* Codes secrets masqués à l'écran, sans déclencher les gestionnaires de mots de passe */
.pin-field,.pin-box{-webkit-text-security:disc}
.pin-field{letter-spacing:6px}

/* Écran d'accueil du lien familial */
.welcome{max-width:880px;margin:0 auto;padding:56px 25px 90px}
.welcome-card{background:var(--card);border:1px solid #e3ddd1;border-radius:22px;padding:clamp(28px,5vw,56px);box-shadow:0 30px 60px -40px rgba(103,44,53,.35);text-align:center}
.welcome h1{font-size:clamp(34px,5vw,56px);letter-spacing:-1.5px;line-height:1.12;margin:16px 0 14px}
.welcome-lead{color:var(--muted);font-size:16px;line-height:1.7;margin:0 auto 26px;max-width:520px}
.welcome-step{font-size:clamp(26px,3.4vw,34px);margin:6px 0 10px}
.choice-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;text-align:left}
.choice-btn{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:26px 24px;border-radius:16px;border:1px solid var(--line);background:#fffdf8;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:transform .15s,border-color .2s,box-shadow .2s,background .2s}
.choice-btn:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:0 18px 32px -24px rgba(103,44,53,.45)}
.choice-main{background:var(--wine);border-color:var(--wine);color:#fff;box-shadow:0 20px 36px -24px rgba(103,44,53,.7)}
.choice-main:hover{background:var(--wine-dark);border-color:var(--wine-dark)}
.choice-ico{font-size:24px;color:var(--gold)}
.choice-title{font-family:'Playfair Display',serif;font-size:24px;line-height:1.2}
.choice-sub{font-size:13px;opacity:.82;line-height:1.5}
.choice-btn:focus-visible,.who-chip:focus-visible{outline:2px solid var(--wine);outline-offset:3px}
.welcome-form{max-width:460px;margin:0 auto;text-align:left}
.welcome-form label,.pin-label{display:block;font-size:12px;font-weight:800;margin:18px 0 7px}
.pin-label{text-align:center}
.pin-pair{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.welcome-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 22px;margin-top:26px}
.welcome-form .welcome-actions{justify-content:flex-start}
.who-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:8px auto 4px;max-width:640px}
.who-chip{display:inline-flex;align-items:center;gap:12px;min-height:60px;padding:8px 22px 8px 8px;border-radius:40px;border:1px solid var(--line);background:#fffdf8;color:var(--ink);font:inherit;font-size:17px;font-weight:600;cursor:pointer;transition:transform .15s,border-color .2s,background .2s}
.who-chip:hover{transform:translateY(-2px);border-color:var(--gold);background:#fbf3e2}
.who-initial{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fbf3e2;border:1px solid var(--gold);color:var(--wine);font-family:'Playfair Display',serif;font-size:20px}
.pin-boxes{display:flex;justify-content:center;gap:12px;margin:6px 0 4px}
.pin-box{width:58px;height:66px;padding:0;border-radius:12px;border:1px solid #cacdc4;background:#fff;text-align:center;font-size:26px;font-weight:700;color:var(--ink)}
.pin-box:focus{border-color:var(--wine);box-shadow:0 0 0 3px rgba(128,59,67,.18);outline:none}
.pin-box:disabled{opacity:.5}
[data-magic="on"] .pin-boxes.is-wrong{animation:pin-shake .4s ease}
@keyframes pin-shake{0%,100%{translate:0}20%{translate:-8px}40%{translate:7px}60%{translate:-5px}80%{translate:3px}}
.welcome .form-error{text-align:center}
.welcome-form .form-error{text-align:left}

/* Cartes : actions, badges, modification */
.gift .gift-bottom{flex-wrap:wrap}
.gift-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 12px;margin-left:auto}
.gift[hidden],.wish-section[hidden]{display:none}
.badge{display:inline-block;padding:4px 10px;border-radius:20px;background:#fbf3e2;border:1px solid var(--gold);color:var(--wine);font-size:11px;font-weight:700;letter-spacing:.3px}
.link-btn{border:0;background:none;padding:0;color:var(--ink);font-size:12px;text-decoration:underline;cursor:pointer}
.link-btn:hover{color:var(--wine)}

/* Vue « Toutes les envies » */
.wish-search{max-width:460px;margin:4px 0 6px}
.wish-section{margin-top:34px}
.wish-section-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin-bottom:14px}
.wish-section-head h2{font-size:26px;margin:0}
.wish-counter{font-size:12px;color:var(--muted);font-weight:500;letter-spacing:.2px;text-transform:none}
.section-label .wish-counter{margin-left:12px}
.empty-mini{grid-column:1/-1;margin:0;padding:14px 18px;border:1px dashed #d4d8cf;border-radius:10px;color:var(--muted);font-size:13px}
.search-empty{margin:26px 0;color:var(--muted);font-size:14px}
.modal-section{margin-top:26px;border-top:1px solid var(--line)}
.modal-section h3{font-size:22px;margin:20px 0 0}

@media(max-width:800px){.choice-grid{grid-template-columns:1fr}}
@media(max-width:550px){
  .welcome{padding:28px 14px 70px}
  .pin-boxes{gap:10px}
  .pin-box{width:52px;height:60px}
  .pin-pair{grid-template-columns:1fr}
  .who-chip{min-height:54px;font-size:16px}
}


/* ===== PROCHES : LISTES GÉRÉES ===== */
.chip-note{font-size:11px;font-weight:500;color:var(--muted);letter-spacing:.2px;text-transform:none;white-space:nowrap}
.member-chip .chip-note{margin-left:7px}
.member-chip.active .chip-note{color:#d6dbd3}
.wish-section-head .chip-note{align-self:baseline}
.list-label{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.list-label > span{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.list-label .chip-note{letter-spacing:.2px}
.wish-section-head .section-add{margin-left:auto;font-size:13px}
/* Cartes d'un proche que je gère : statut et actions d'abord, gestion de la liste en dessous */
.gift-manage{display:flex;justify-content:flex-end;align-items:center;gap:14px;padding-top:10px;margin-top:2px;border-top:1px dashed #e6e0d4}
/* Proposition juste après la création d'un profil */
.proposal{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:26px 0 4px;padding:18px 22px;border:1px solid var(--gold);border-radius:14px;background:#fbf3e2}
.proposal-ico{font-size:24px;color:var(--gold);line-height:1}
.proposal-text{margin:0;flex:1 1 260px;line-height:1.5}
.proposal-text b{font-family:'Playfair Display',serif;font-size:19px;font-weight:600}
.proposal-text span{color:var(--muted);font-size:14px}
.proposal-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
/* Formulaire « proche » : case à cocher */
dialog label.check{display:flex;align-items:flex-start;gap:10px;margin:22px 0 4px;font-size:13px;font-weight:600;line-height:1.45;cursor:pointer}
dialog label.check input{width:auto;margin:2px 0 0;accent-color:var(--wine)}
/* Mon profil : mes proches */
.dep-list{list-style:none;margin:14px 0 16px;padding:0;display:grid;gap:10px}
.dep-item{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 14px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fff}
.dep-info{display:flex;flex-direction:column;gap:3px}
.dep-rel{color:var(--muted);font-size:13px}
.dep-meta{font-size:12px;color:var(--muted)}
.dep-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
@media(max-width:550px){
  .member-chip .chip-note{display:block;margin:2px 0 0}
  .proposal{padding:16px}
}


/* ===== APPLI INSTALLABLE ET ALBUM PHOTO ===== */
/* Bouton « Installer l'appli » : même allure que les boutons « Magie » et « Sons » */
.install-btn{border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:30px;padding:8px 13px;font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.install-btn:hover{border-color:var(--gold);background:#fbf3e2;color:var(--wine)}
.install-btn:focus-visible{outline:2px solid var(--wine);outline-offset:2px}
.install-btn[hidden]{display:none}
.install-btn-ico{font-size:13px;line-height:1}
/* Aide d'installation (iPhone, autres navigateurs) */
.install-steps{list-style:none;counter-reset:step;margin:20px 0 4px;padding:0;display:grid;gap:12px}
.install-steps li{counter-increment:step;display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff}
.install-steps li > div{display:flex;flex-direction:column;gap:2px}
.install-steps b::before{content:counter(step) ". ";color:var(--wine)}
.install-steps li > div span{font-size:13px;color:var(--muted);line-height:1.45}
.install-ico{flex:none;display:grid;place-items:center;min-width:46px;height:46px;border-radius:12px;background:#fbf3e2;border:1px solid var(--gold);color:#2f6fde}
.install-ico-text{padding:0 12px;font-size:14px;font-weight:700}
dialog .install-note{font-size:17px;font-weight:600;color:var(--ink)}

/* Album photo */
.album{margin-top:6px}
.album-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:14px 24px}
.album-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.album-title h2{font-size:30px;margin:0}
.album-count{font-size:12px;color:var(--muted);letter-spacing:.3px}
.album-add{display:flex;flex-direction:column;align-items:flex-end;gap:8px;max-width:320px}
.album-privacy{margin:0;font-size:12px;line-height:1.5;color:var(--muted);text-align:right}
.album-privacy::before{content:'🔒 '}
.upload-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.upload-list:empty{display:none}
.upload-row{display:grid;grid-template-columns:minmax(0,1fr) 150px auto;align-items:center;gap:8px 14px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.upload-name{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upload-row progress{width:100%;height:8px;accent-color:var(--wine)}
.upload-status{font-size:12px;color:var(--muted);white-space:nowrap}
.upload-row.is-done .upload-status{color:#2f6b45;font-weight:600}
.upload-row.is-error .upload-status{grid-column:1/-1;color:#9a3d45;white-space:normal}
.upload-row.is-error .upload-caption,.upload-row.is-error progress{display:none}
.upload-caption{grid-column:1/3;font-size:13px}
.upload-row .form-input.upload-caption{padding:9px 11px}
.album-empty{margin:24px 0 0;padding:46px 20px;text-align:center;border:1px dashed #d4d8cf;border-radius:14px;color:var(--muted)}
.album-empty[hidden]{display:none}
.album-empty span{font-size:34px}
.album-empty b{display:block;margin:10px 0 6px;font-family:'Playfair Display',serif;font-size:24px;font-weight:500;color:var(--ink)}
.album-empty p{margin:0}
.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:22px}
.photo-tile{position:relative;aspect-ratio:1;padding:0;border:0;border-radius:10px;overflow:hidden;background:linear-gradient(135deg,#efe7da,#f8f2e8);cursor:zoom-in}
.photo-tile img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s,transform .4s}
.photo-tile.is-loaded img{opacity:1}
.photo-tile:hover img{transform:scale(1.04)}
.photo-tile:focus-visible{outline:2px solid var(--wine);outline-offset:3px}
.album-sentinel{height:1px}

/* Visionneuse plein écran */
dialog.viewer{width:100vw;max-width:100vw;height:100vh;height:100dvh;max-height:100dvh;margin:0;padding:0;border:0;border-radius:0;background:rgba(18,24,20,.97);color:#f6f0e7;box-shadow:none;overflow:hidden}
dialog.viewer[open]{display:grid;grid-template-rows:minmax(0,1fr) auto}
dialog.viewer::backdrop{background:rgba(18,24,20,.85);backdrop-filter:none}
.viewer-stage{position:relative;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;min-height:0;padding:58px 70px 12px;touch-action:pan-y;user-select:none}
.viewer-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.viewer-nav{position:absolute;top:50%;translate:0 -50%;width:48px;height:48px;border-radius:50%;border:1px solid rgba(246,240,231,.35);background:rgba(20,27,23,.55);color:#fff;font-size:30px;line-height:1;cursor:pointer}
.viewer-prev{left:14px}
.viewer-next{right:14px}
.viewer-nav:disabled{opacity:.25;cursor:default}
.viewer-close{position:absolute;top:10px;right:14px;width:44px;height:44px;border:0;background:none;color:#fff;font-size:32px;line-height:1;cursor:pointer}
.viewer-nav:focus-visible,.viewer-close:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.viewer-info{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;width:100%;max-width:1100px;margin:0 auto;padding:14px 24px 22px}
.viewer-caption{margin:0 0 4px;font-family:'Playfair Display',serif;font-size:20px;line-height:1.4;color:#fff}
.viewer-meta{margin:0;font-size:13px;color:#c9cfc6}
.viewer-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.viewer .link-btn{color:#f6f0e7}
.viewer .danger{color:#f3b3b3}
.viewer .text-btn{color:#f6f0e7;border-color:#f6f0e7}
.viewer-edit-form{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:6px}
.viewer-edit-form[hidden]{display:none}
.viewer .viewer-edit-form .form-input{width:min(340px,100%);padding:9px 11px}

@media(max-width:550px){
  .install-btn{padding:8px 10px}
  .album-add{align-items:flex-start;max-width:none}
  .album-privacy{text-align:left}
  .album-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .upload-row{grid-template-columns:minmax(0,1fr) auto}
  .upload-row progress{grid-column:1/-1}
  .upload-caption{grid-column:1/-1}
  .viewer-stage{padding:56px 8px 8px}
  .viewer-nav{width:40px;height:40px;font-size:24px}
  .viewer-info{padding:12px 16px 18px}
}