/* Surprise 🎁 — direction « Veillée ».
   Le secret est le sujet : cire, givre, papier découpé et dorure de laiton.
   Un seul jeu de variables, deux thèmes, aucun build. */

/* ---------------------------------------------------------------- jetons */

:root{
  /* fonds et traits */
  --ground:#F2EDE0;
  --surface:#FBF8F0;
  --surface-2:#E9E2D1;
  --line:#D7CCB5;

  /* encres */
  --ink:#16251D;
  --ink-2:#486052;
  --ink-3:#5A6E63;

  /* accents */
  --braise:#A82C22;
  --houx:#2E6B4A;
  --laiton:#8A5C16;
  --foil-1:#F6E3AE;
  --foil-2:#CE9B36;
  --foil-3:#8A5C16;

  /* la nuit : toujours sombre, dans les deux thèmes */
  --nuit:#0C1F17;
  --nuit-2:#12291E;
  --nuit-ink:#F1E9D9;
  --nuit-ink-2:#AEC0B2;
  --givre:#E7F0F3;

  --ombre:0 20px 44px -26px rgba(22,37,29,.5);
  --ombre-s:0 6px 16px -10px rgba(22,37,29,.55);
  --r:14px;
  --maxw:720px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0B1E16; --surface:#132B21; --surface-2:#1B3A2C; --line:#27503B;
    --ink:#F1E9D9; --ink-2:#AFC2B4; --ink-3:#88A092;
    --braise:#E6705F; --houx:#6FC094; --laiton:#E9C173;
    --foil-1:#FBEFC8; --foil-2:#DDAE4E; --foil-3:#A0741F;
    --ombre:0 24px 54px -28px rgba(0,0,0,.85);
    --ombre-s:0 8px 20px -12px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --ground:#0B1E16; --surface:#132B21; --surface-2:#1B3A2C; --line:#27503B;
  --ink:#F1E9D9; --ink-2:#AFC2B4; --ink-3:#88A092;
  --braise:#E6705F; --houx:#6FC094; --laiton:#E9C173;
  --foil-1:#FBEFC8; --foil-2:#DDAE4E; --foil-3:#A0741F;
  --ombre:0 24px 54px -28px rgba(0,0,0,.85);
  --ombre-s:0 8px 20px -12px rgba(0,0,0,.8);
}

/* ------------------------------------------------------------- fondations */

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0);
  background:var(--ground);
  color:var(--ink);
  font-family:"Karla",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
/* le grain d'impression, par-dessus tout, sans jamais intercepter un clic */
body::after{
  content:""; position:fixed; inset:0; z-index:90; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%}
::selection{background:var(--foil-2); color:var(--nuit)}

h1,h2,h3{
  margin:0;
  font-family:"Fraunces","Iowan Old Style",Georgia,"Times New Roman",serif;
  font-variation-settings:"SOFT" 45,"WONK" 1,"opsz" 110;
  font-weight:600; line-height:1.08; letter-spacing:-.018em; text-wrap:balance;
}
a{color:var(--laiton)}
a:hover{color:var(--braise)}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2.5px solid var(--foil-2); outline-offset:3px; border-radius:6px;
}

#snow{
  position:fixed; inset:0; z-index:0; width:100%; height:100%; pointer-events:none;
}
.wrap{
  position:relative; z-index:1;
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding-inline:18px; padding-block:0 40px;
  display:flex; flex-direction:column; gap:18px;
}

/* ------------------------------------------------------------- le bandeau */

.hero{
  position:relative; overflow:hidden; isolation:isolate;
  margin-inline:-18px; padding:38px 18px 96px;
  background:
    radial-gradient(120% 80% at 50% -14%, rgba(206,155,54,.26) 0%, rgba(206,155,54,0) 58%),
    linear-gradient(180deg,#0C1F17 0%,#0A1913 100%);
  color:var(--nuit-ink); text-align:center;
}
.hero .skyline{
  position:absolute; left:0; right:0; bottom:-1px; z-index:0;
  width:100%; height:110px; pointer-events:none;
}
.hero > :not(.skyline){position:relative; z-index:1}
.hero h1{
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 144;
  font-weight:700; font-size:clamp(32px,8.5vw,52px); letter-spacing:-.03em;
}
.hero h1 .rouge{color:#E6705F}
.hero p{
  margin:12px auto 0; max-width:36ch;
  color:rgba(241,233,217,.82); font-size:16px;
}
/* l'ancienne guirlande d'ampoules : neutralisée si le gabarit la garde */
.lights{display:none}

/* -------------------------------------------------------------- sections */

.step{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:20px 18px; box-shadow:var(--ombre-s);
  display:flex; flex-direction:column; gap:12px;
}
.step-head{display:flex; align-items:center; gap:11px}
.step-num{
  flex:none; width:36px; height:36px; border-radius:11px; display:grid; place-items:center;
  font-size:18px; line-height:1;
  background:linear-gradient(150deg,var(--foil-1),var(--foil-2));
  box-shadow:0 6px 14px -10px rgba(206,155,54,.9);
}
.step:nth-of-type(2n) .step-num{
  background:linear-gradient(150deg,#E9C6BF,var(--braise));
}
.step-head h2{font-size:21px}
.hint{margin:0; color:var(--ink-2); font-size:15.5px}
.vide{
  margin:0; padding:18px; border-radius:11px; text-align:center;
  border:1px dashed var(--line); color:var(--ink-3); font-size:15px;
}

footer{
  margin-top:8px; padding-top:18px; border-top:1px solid var(--line);
  color:var(--ink-3); font-size:13.5px; text-align:center;
}
footer a{color:var(--ink-3)}

/* ---------------------------------------------------------- formulaires */

label{
  display:block; margin-bottom:5px;
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3);
}
input[type=text],input[type=email],input[type=number],input[type=url],input[type=password],select,textarea{
  width:100%; min-height:46px; padding:10px 13px;
  border:1px solid var(--line); border-radius:11px;
  background:var(--ground); color:var(--ink);
  font:inherit; font-size:16px;
}
textarea{min-height:92px; line-height:1.5; resize:vertical}
input::placeholder,textarea::placeholder{color:var(--ink-3); opacity:.8}
input:focus,select:focus,textarea:focus{border-color:var(--foil-2)}
.row{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px}
.row > *{min-width:0}
form{display:flex; flex-direction:column; gap:12px}

/* --------------------------------------------------------------- boutons */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; padding:0 18px;
  border:1px solid transparent; border-radius:11px; cursor:pointer;
  font:inherit; font-size:15.5px; font-weight:700; text-decoration:none;
  background:linear-gradient(160deg,var(--foil-1),var(--foil-2) 62%,var(--foil-3));
  color:#241503;
  box-shadow:0 8px 18px -12px rgba(206,155,54,.9);
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}
.btn.gold{background:linear-gradient(160deg,var(--foil-1),var(--foil-2) 62%,var(--foil-3)); color:#241503}
.btn.red{background:var(--braise); color:#fff; box-shadow:0 8px 18px -12px rgba(168,44,34,.9)}
.btn.ghost{
  background:transparent; color:var(--ink); border-color:var(--line); box-shadow:none;
}
.btn.ghost:hover{border-color:var(--foil-2); filter:none}
.btn.small{min-height:40px; padding:0 14px; font-size:14.5px}
.btn:disabled{opacity:.45; cursor:not-allowed; box-shadow:none}
.actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center}

/* ------------------------------------------------------------ listes */

.plist,.exlist,.envies{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.exlist{flex-direction:row; flex-wrap:wrap; gap:8px}

.pcard{
  display:flex; align-items:center; gap:12px;
  padding:11px 0; border-bottom:1px solid var(--line);
}
.pcard:last-child{border-bottom:0}
.pava{
  flex:none; width:36px; height:36px; border-radius:11px; display:grid; place-items:center;
  font-family:"Fraunces",Georgia,serif; font-weight:700; font-size:15px;
  background:linear-gradient(150deg,rgba(206,155,54,.34),rgba(168,44,34,.28));
  color:var(--laiton);
}
.pinfo{flex:1; min-width:0}
.pname{font-weight:700; font-size:16px; overflow:hidden; text-overflow:ellipsis}
.pmeta{
  font-size:12.5px; color:var(--ink-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pdel{
  flex:none; min-width:40px; min-height:40px; padding:0 10px;
  border:1px solid var(--line); border-radius:10px; cursor:pointer;
  background:transparent; color:var(--ink-3); font:inherit; font-size:15px;
}
.pdel:hover{border-color:var(--braise); color:var(--braise)}

.exitem{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 12px; border-radius:10px; font-size:14px;
  background:color-mix(in srgb,var(--braise) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--braise) 38%,transparent);
}
.exitem b{font-weight:700}

.opt-toggle{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 12px; align-items:start;
  padding:13px 0; border-bottom:1px solid var(--line); cursor:pointer;
}
.opt-toggle:last-child{border-bottom:0}
.opt-toggle input{
  grid-row:span 2; width:22px; height:22px; margin:2px 0 0; accent-color:var(--houx);
}
.opt-toggle .t{font-weight:700}
.opt-toggle .d{color:var(--ink-2); font-size:14.5px; line-height:1.45}

/* ------------------------------------------------------------- messages */

.alert{
  margin:0; padding:13px 15px; border-radius:11px;
  border:1px solid var(--line); background:var(--surface-2);
  font-size:15.5px; line-height:1.5;
}
.alert.ok{
  background:color-mix(in srgb,var(--houx) 13%,transparent);
  border-color:color-mix(in srgb,var(--houx) 40%,transparent);
}
.alert.err{
  background:color-mix(in srgb,var(--braise) 13%,transparent);
  border-color:color-mix(in srgb,var(--braise) 40%,transparent);
}
.masked{
  padding:13px 15px; border-radius:11px; text-align:center;
  border:1px dashed var(--line); color:var(--ink-3); font-size:15px;
  background:repeating-linear-gradient(135deg,transparent 0 9px,color-mix(in srgb,var(--line) 40%,transparent) 9px 10px);
}

/* ------------------------------------------------------ la guirlande */

.garland{
  display:flex; align-items:flex-end; justify-content:space-between; gap:3px;
  margin:0 0 4px; padding:0 2px;
}
.garland .bulb{
  flex:1 1 0; max-width:13px; height:17px; border-radius:50% 50% 46% 46%;
  background:var(--surface-2); border:1px solid var(--line);
}
.garland .bulb.on{
  background:radial-gradient(circle at 42% 34%,#FFF1C9,#DDAE4E 62%,#B07F22);
  border-color:#E7C87E; box-shadow:0 0 12px rgba(221,174,78,.55);
}
.gauge{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px}
.gauge div{
  padding:14px 12px; border-radius:12px; text-align:center;
  background:var(--ground); border:1px solid var(--line);
  display:flex; flex-direction:column; gap:2px;
}
.gauge b{
  font-family:"Fraunces",Georgia,serif; font-variation-settings:"opsz" 96;
  font-weight:700; font-size:28px; line-height:1.05;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.gauge span{
  font-size:11.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3);
}

/* ------------------------------------------- le cachet et la révélation */

.reveal{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  padding:28px 18px 24px; border-radius:16px; text-align:center;
  background:
    radial-gradient(110% 70% at 50% 0%, rgba(206,155,54,.16) 0%, rgba(206,155,54,0) 62%),
    linear-gradient(170deg,var(--nuit) 0%,#0A1913 100%);
  border:1px solid rgba(206,155,54,.3);
  color:var(--nuit-ink);
}
.reveal .hint{color:rgba(241,233,217,.74)}
.reveal .btn.ghost{color:var(--nuit-ink); border-color:rgba(206,155,54,.42)}
.reveal .btn.ghost:hover{border-color:var(--foil-1)}

.sceau{
  position:relative; width:184px; height:184px; padding:0; border:0; background:none;
  border-radius:50%; cursor:pointer; display:grid; place-items:center;
}
.sceau .anneau{position:absolute; inset:0; width:184px; height:184px; transform:rotate(-90deg)}
.sceau .anneau circle{fill:none; stroke-width:3}
.sceau .anneau .piste{stroke:rgba(246,227,174,.16)}
.sceau .anneau .jauge{
  stroke:#CE9B36; stroke-linecap:round;
  stroke-dasharray:534; stroke-dashoffset:534;
  transition:stroke-dashoffset .09s linear;
}
.moities{position:relative; width:130px; height:130px}
.moitie{
  position:absolute; inset:0;
  transition:transform .62s cubic-bezier(.2,.75,.3,1), opacity .62s ease;
}
.moitie.g{clip-path:inset(0 50% 0 0)}
.moitie.d{clip-path:inset(0 0 0 50%)}
.reveal.ouvert .moitie.g{transform:translate(-64px,34px) rotate(-26deg); opacity:0}
.reveal.ouvert .moitie.d{transform:translate(64px,38px) rotate(24deg); opacity:0}

.revealed{display:none; width:100%}
.revealed.show{display:block; animation:surgir .5s ease both}
@keyframes surgir{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.revealed > p:first-child{
  margin:0 0 4px; font-size:12px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(241,233,217,.6);
}

.big-name{
  position:relative; display:block; margin:6px auto 14px; max-width:420px;
  border-radius:12px; overflow:hidden;
  font-family:"Fraunces",Georgia,serif;
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 144;
  font-weight:700; font-size:clamp(38px,11vw,54px); line-height:1.08; letter-spacing:-.03em;
  padding:12px 8px;
  background:linear-gradient(104deg,var(--foil-3) 4%,var(--foil-1) 28%,#CE9B36 48%,var(--foil-1) 66%,var(--foil-3) 96%);
  -webkit-background-clip:text; background-clip:text; color:#F6E3AE;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .big-name{-webkit-text-fill-color:transparent}
}
.big-name .givre{
  position:absolute; inset:0; width:100%; height:100%;
  touch-action:none; cursor:grab; -webkit-text-fill-color:initial;
}
.big-name .givre.parti{opacity:0; transition:opacity .5s ease; pointer-events:none}
.givre-note{
  display:block; margin:-8px 0 12px;
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(241,233,217,.6);
}
.givre-note.parti{opacity:0; transition:opacity .3s}

.detail-pill{
  display:inline-flex; align-items:center; gap:6px; margin:0 4px 6px 0;
  padding:6px 12px; border-radius:999px; font-size:13.5px; font-weight:600;
  background:rgba(246,227,174,.1); border:1px solid rgba(206,155,54,.34);
  color:var(--nuit-ink); font-variant-numeric:tabular-nums;
}
#confettis{
  position:fixed; inset:0; z-index:80; width:100%; height:100%; pointer-events:none;
}

/* ------------------------------------------------------------- envies */

.envie{
  display:flex; align-items:flex-start; gap:12px;
  padding:13px 0; border-bottom:1px solid var(--line);
}
.envie:last-child{border-bottom:0}
.envie .vignette{
  flex:none; width:58px; height:58px; border-radius:10px; object-fit:cover;
  border:1px solid var(--line); background:var(--surface-2);
}
.envie .corps{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
.envie .titre{font-weight:700; font-size:16px; line-height:1.35}
.envie .titre a{text-decoration:none; color:var(--ink)}
.envie .titre a:hover{color:var(--laiton); text-decoration:underline; text-underline-offset:3px}
.envie .note{color:var(--ink-2); font-size:14.5px; line-height:1.45}
.envie .prix{
  font-size:13.5px; font-weight:700; color:var(--laiton); font-variant-numeric:tabular-nums;
}
.envie.prise{opacity:.62}
.envie.prise .titre{text-decoration:line-through}

.shoplinks{display:flex; flex-wrap:wrap; gap:8px}
.shoplinks a{
  display:inline-flex; align-items:center; min-height:40px; padding:0 14px;
  border-radius:10px; text-decoration:none; font-size:14px; font-weight:700;
  border:1px dashed var(--line); color:var(--ink-2); background:transparent;
}
.shoplinks a:hover{border-color:var(--foil-2); color:var(--laiton)}
.shoplinks a.dg{border-style:solid; border-color:color-mix(in srgb,var(--braise) 45%,transparent)}

/* ------------------------------------------------------ moins d'effets */

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .revealed.show{animation:none}
}

.cachet-zone{display:flex; flex-direction:column; align-items:center; gap:14px}
/* l'attribut hidden doit gagner : sans JavaScript le cachet ne s'affiche jamais,
   et une fois brisé il disparaît pour de bon. */
.cachet-zone[hidden]{display:none}

/* Le gabarit de l'organisateur réutilise .row et .label à l'intérieur des
   lignes de participants et des interrupteurs : on les remet d'aplomb. */
.pinfo{display:flex; flex-direction:column; gap:2px}
.pcard .row{display:flex; flex-direction:row; align-items:center; gap:6px; margin-top:5px}
.pcard .row input{flex:1; min-width:0; min-height:40px; font-size:15px}
.pcard .row .btn{flex:0 0 auto}

.opt-toggle{
  text-transform:none; letter-spacing:normal; font-size:16.5px;
  font-weight:400; color:var(--ink); margin-bottom:0;
}

/* ------------------------------------------- la porte et la page famille */

.porte{text-align:center}
.porte form{text-align:left; width:100%; max-width:380px; margin:0 auto}
.porte-cadenas{font-size:44px; line-height:1; margin:4px 0 10px}

.compte{text-align:center}
.compte-chiffre{
  font-family:"Fraunces",Georgia,serif; font-variation-settings:"opsz" 144,"SOFT" 100;
  font-weight:800; font-size:clamp(64px,18vw,112px); line-height:1;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(160deg,var(--foil-1),var(--foil-2) 55%,var(--foil-3));
  -webkit-background-clip:text; background-clip:text; color:var(--laiton);
}
@supports (-webkit-background-clip:text){ .compte-chiffre{-webkit-text-fill-color:transparent} }
.compte-legende{margin:6px 0 0; font-weight:700; color:var(--ink-2)}

.famille{
  list-style:none; margin:12px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px;
}
.famille li{
  display:flex; align-items:center; gap:6px; min-width:0;
  padding:9px 11px; border-radius:11px;
  background:var(--ground); border:1px solid var(--line);
}
.famille .nom{flex:1; min-width:0; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.famille .marque{flex:none; font-size:15px; opacity:.28; filter:grayscale(1)}
.famille .marque.on{opacity:1; filter:none}

/* Les cases à cocher des réglages : leur label n'est pas une étiquette de
   champ, il ne doit pas passer en petites capitales. */
.opt-toggle label{font-size:inherit; font-weight:inherit; letter-spacing:normal; text-transform:none; color:inherit}
.opt-toggle label .t, .opt-toggle label .d{display:block}