:root { --lilac:#cbb8ff; --choc:#2a1610; --choc-soft:#5b4038; }
* { box-sizing:border-box; margin:0; }
body { background:var(--lilac); color:var(--choc); font:400 19px/1.6 "Bricolage Grotesque",system-ui,sans-serif; font-optical-sizing:auto; -webkit-font-smoothing:antialiased; }
::selection { background:var(--choc); color:var(--lilac); }
:focus-visible { outline:3px solid var(--choc); outline-offset:4px; }
button { font:700 18px "Bricolage Grotesque",sans-serif; letter-spacing:-.01em; background:var(--choc); color:var(--lilac); border:0; border-radius:999px; padding:16px 32px; cursor:pointer; transition:transform .15s; }
button:active { transform:scale(.97); }

/* Code */
#gate { min-height:100svh; display:grid; grid-template-columns:1fr auto; align-content:center; justify-items:start; gap:24px clamp(24px,5vw,80px); padding:16px clamp(16px,7vw,96px); }
#gate > * { grid-column:1; }
#gate .bubble { grid-column:2; grid-row:1 / span 5; align-self:center; width:clamp(260px,40vw,580px); aspect-ratio:4/3; object-fit:cover; object-position:50% 35%; border-radius:63% 37% 54% 46% / 45% 55% 45% 55%; border:6px solid var(--choc); transform:rotate(-3deg); }
#gate h1 { font-weight:700; font-size:clamp(52px,9vw,130px); line-height:.9; letter-spacing:-.04em; }
@media (max-width:700px) {
  #gate .bubble { grid-column:1; grid-row:auto; order:-1; justify-self:end; width:min(300px,85vw); border-width:4px; }
}
#gate label { font-weight:700; }
#gate input { font:700 64px "Bricolage Grotesque",sans-serif; letter-spacing:.2em; width:min(260px,100%); background:none; border:0; border-bottom:4px solid var(--choc); color:var(--choc); padding:0; }
#gate input:focus { outline:none; }
#gate button { align-self:flex-start; }
#wrong { font-weight:700; min-height:1.6em; }

/* Sections */
section { padding:120px clamp(16px,7vw,96px); }
h2 { font-weight:700; font-size:clamp(40px,8vw,88px); line-height:.95; letter-spacing:-.035em; margin-bottom:48px; }

/* Déclaration : une phrase par écran, en minuscules */
.decl { padding-top:0; padding-bottom:0; }
.decl p { min-height:100svh; display:flex; align-items:center; position:relative;
  font-weight:700; font-size:clamp(44px,10vw,124px); line-height:.92; letter-spacing:-.04em; text-transform:lowercase; text-wrap:balance; }
.decl p > span { max-width:13em; opacity:0; transform:translateY(40px); transition:opacity .9s, transform .9s cubic-bezier(.2,.8,.2,1); }
.decl p.in > span { opacity:1; transform:none; }
.decl p:first-child::after { content:"fais défiler"; position:absolute; bottom:28px; left:0; font-size:15px; letter-spacing:0; font-weight:400; color:var(--choc-soft); }

/* Compteur */
.count { font-weight:700; font-size:clamp(36px,6.5vw,72px); line-height:1; letter-spacing:-.035em; max-width:14em; }

/* Souvenirs : mur de photos commentées, chaque photo garde son format */
.gallery { columns:3 300px; column-gap:20px; }
.gallery figure { break-inside:avoid; margin-bottom:36px; }
.gallery img, .gallery .ph { width:100%; display:block; border-radius:20px; background:var(--choc-soft); }
.gallery figcaption { margin-top:12px; font-size:17px; line-height:1.45; }
.gallery time { display:block; font-weight:700; }

/* Cartes : un booster par mois, façon cartes à collectionner */
.cards-hint { margin:-32px 0 40px; }
.booster-row + .booster-row { margin-top:56px; }
.booster-row > h3 { font-size:24px; font-weight:700; letter-spacing:-.02em; margin-bottom:16px; }
.hand { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:8px 4px 24px; }
.next { margin-top:40px; font-weight:700; }

/* Booster scellé : bande du haut à déchirer, bords dentelés, papier brillant */
.pack { --s:10px; flex:0 0 min(230px,68vw); aspect-ratio:63/100; margin:0 auto; position:relative; padding:0; border-radius:0; background:none; color:var(--lilac); touch-action:pan-y; }
.pack:active { transform:none; }
.pack-top, .pack-body { position:absolute; left:0; right:0;
  background:linear-gradient(115deg, var(--choc) 10%, #6b3f9e 40%, #b89cf0 50%, #6b3f9e 60%, var(--choc) 90%); }
.pack-top { top:0; height:14%; transform-origin:100% 100%; transform:rotate(calc(var(--tear, 0) * -10deg)) translateY(calc(var(--tear, 0) * -8px));
  background-image:repeating-linear-gradient(90deg, #fff2 0 2px, transparent 2px 6px), linear-gradient(115deg, var(--choc) 10%, #6b3f9e 40%, #b89cf0 50%, #6b3f9e 60%, var(--choc) 90%);
  -webkit-mask:conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--s) 100%;
          mask:conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--s) 100%; }
/* La déchirure qui suit le doigt */
.pack-top::after { content:""; position:absolute; left:0; bottom:0; height:3px; width:calc(var(--tear, 0) * 100%); background:#fff; box-shadow:0 0 8px #fff; }
.pack-body { top:14%; bottom:0; border-top:2px dashed #cbb8ff88; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px;
  -webkit-mask:conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--s) 100%;
          mask:conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--s) 100%; }
.pack-body::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg, transparent 35%, #fff4 50%, transparent 65%); background-size:250% 100%; animation:holo 3s linear infinite; }
.pack-body b { width:56px; height:56px; border-radius:50%; background:var(--lilac); color:var(--choc); display:grid; place-items:center; font-size:28px; margin-bottom:6px; }
.pack-body span { font-size:44px; letter-spacing:-.04em; line-height:1; }
.pack-body small { font-size:13px; font-weight:400; }
.pack-body .pack-hint { position:absolute; top:10px; font-size:12px; font-weight:700; }
.pack.open .pack-top { animation:fly .5s ease-in forwards; }
.pack.open .pack-body { animation:drop .45s .4s ease-in forwards; }
@keyframes fly { to { transform:translate(30%, -160%) rotate(25deg); opacity:0; } }
@keyframes drop { to { transform:translateY(25%) scale(.92); opacity:0; } }
.slot.dealt { animation:deal .55s cubic-bezier(.2,.8,.2,1) backwards; }
@keyframes deal { from { transform:translateY(80px) rotate(-10deg) scale(.85); opacity:0; } }

.slot { flex:0 0 min(230px,68vw); aspect-ratio:63/88; position:relative; perspective:1000px; scroll-snap-align:center; }
.slot > .back, .slot > .card { position:absolute; inset:0; backface-visibility:hidden; transition:transform .7s cubic-bezier(.2,.8,.2,1); }
.slot > .card { transform:rotateY(180deg); }
.slot.shown > .card { transform:none; }
.slot.shown > .back { transform:rotateY(-180deg); }
.slot > .back { border-radius:14px; padding:0; font-size:56px; border:8px solid var(--lilac); outline:2px solid var(--choc); outline-offset:-2px;
  background:radial-gradient(circle, #6b3f9e 0 30%, var(--choc) 31%); }

.card { --frame:var(--choc); --face:#f6f0ff; overflow:hidden; border-radius:14px; border:8px solid var(--frame); background:var(--face); color:var(--choc);
  padding:8px 8px 26px; display:flex; flex-direction:column; gap:6px; font-size:13px; line-height:1.35; }
.card.rare { --frame:#d6a73a; --face:#fff6dc; }
.card.legendaire { --frame:#9b6bff; --face:#fdf7ff; }
.card header { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.card h3 { font-size:18px; font-weight:700; line-height:1.05; letter-spacing:-.02em; text-transform:lowercase; }
.card .pv { font-size:12px; font-weight:700; white-space:nowrap; }
.card img { width:100%; aspect-ratio:4/3 !important; object-fit:cover; border:3px solid var(--frame); border-radius:6px; background:var(--choc-soft); display:block; }
.card .when { font-size:11px; font-style:italic; color:var(--choc-soft); }
.card p:last-child { overflow:hidden; }
/* Numéro et symbole de rareté en bas, comme sur une vraie carte */
.card::before { content:"n°" attr(data-num) "   ●"; white-space:pre; position:absolute; left:10px; bottom:6px; font-size:11px; font-weight:700; }
.card.rare::before { content:"n°" attr(data-num) "   ★"; }
.card.legendaire::before { content:"n°" attr(data-num) "   ★★★"; }
/* Reflet holographique sur les rares et légendaires */
.card.rare::after, .card.legendaire::after { content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:overlay; background-size:250% 100%; animation:holo 4s linear infinite;
  background-image:linear-gradient(115deg, transparent 30%, #fff9 45%, #ffe9a8aa 50%, transparent 65%); }
.card.legendaire::after { mix-blend-mode:color-dodge;
  background-image:linear-gradient(115deg, transparent 20%, #ff9de255 35%, #9be7ff55 45%, #fff3a055 55%, #b8a2ff55 65%, transparent 80%); }
@keyframes holo { from { background-position:150% 0; } to { background-position:-100% 0; } }

/* Raisons */
.reasons { list-style:none; padding:0; }
.reasons li { font-weight:700; font-size:clamp(28px,5vw,56px); line-height:1; letter-spacing:-.03em; max-width:16em; }
.reasons li + li { margin-top:28px; }

/* Fin : la page passe en chocolat */
.end { min-height:100svh; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; transition:background .8s, color .8s; }
.end.open { background:var(--choc); color:var(--lilac); }
#secret { font-weight:700; font-size:clamp(34px,7vw,96px); line-height:.95; letter-spacing:-.04em; max-width:16em; overflow-wrap:break-word; }

@media (prefers-reduced-motion:reduce) {
  .decl p > span { opacity:1; transform:none; transition:none; }
  .end { transition:none; }
  .pack-body::after, .card::after, .slot.dealt { animation:none; }
  .slot > .back, .slot > .card { transition:none; }
}