:root{
    --bg:#f5e8da;
    --surface:#fffaf2;
    --ink:#4a3428;
    --ink-soft:#8a7161;
    --terracotta:#cd7f57;
    --terracotta-deep:#a35d3c;
    --sage:#7f9471;
    --sage-deep:#5d7050;
    --amber:#eab35e;
    --border:#ecdcc6;
    --muted:#c9bba6;
  }
  .badge-wine{ background:#f0dade; color:#9c3b4f; }
  .badge-blood{ background:#e3cccb; color:#6b1f24; }
.nook-meta{
    display:block;
    font-family:'Inter', sans-serif;
    font-size:0.78rem;
    font-weight:500;
    color:var(--muted);
    margin-top:10px;
    letter-spacing:0.2px;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--bg);
    font-family:'Inter', sans-serif;
    color:var(--ink);
    padding:64px 16px 90px;
    display:flex;
    flex-direction:column;
    align-items:center;
    min-height:100vh;
    position:relative;
    overflow-x:hidden;
  }
  h1,h2{font-family:'Fraunces', serif; margin:0;}
  
  .glow{
    position:absolute;
    top:-140px; left:50%;
    transform:translateX(-50%);
    width:min(520px, 100vw);
    height:420px;
    background:radial-gradient(ellipse at center, rgba(234,179,94,0.45) 0%, rgba(234,179,94,0) 70%);
    pointer-events:none;
  }
  
  .top{ text-align:center; margin-bottom:8px; position:relative; z-index:1; }
  .tag{
    display:inline-block;
    font-family:'Caveat', cursive;
    font-weight:700;
    font-size:1.3rem;
    color:var(--terracotta-deep);
    transform:rotate(-2deg);
    margin-bottom:16px;
  }
  .logo{
    display:block; margin:0 auto;
    /* Sans ça, un appui long sélectionne le SVG comme du texte (surlignage
       bleu façon "copier") au lieu de déclencher juste l'easter egg. */
    -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
  }

  /* ---------- Petites animations d'accueil ---------- */
  @keyframes dice-roll-in{
    0%{ opacity:0; transform:rotate(-50deg) scale(0.5); }
    60%{ opacity:1; transform:rotate(8deg) scale(1.05); }
    100%{ opacity:1; transform:rotate(0deg) scale(1); }
  }
  .logo .die{ transform-origin:center; transform-box:fill-box; animation:dice-roll-in 0.6s cubic-bezier(.34,1.56,.64,1) both; }
  .logo .die-cream{ animation-delay:0.05s; }
  .logo .die-amber{ animation-delay:0.2s; }
  @media (prefers-reduced-motion:reduce){
    .logo .die{ animation:none; }
  }

  @keyframes logo-wiggle{
    0%{ transform:rotate(0deg) scale(1); }
    12%{ transform:rotate(-18deg) scale(1.15); }
    24%{ transform:rotate(14deg) scale(1.15); }
    36%{ transform:rotate(-12deg) scale(1.1); }
    48%{ transform:rotate(10deg) scale(1.1); }
    60%{ transform:rotate(-7deg) scale(1.05); }
    72%{ transform:rotate(5deg) scale(1.05); }
    86%{ transform:rotate(-2deg) scale(1.02); }
    100%{ transform:rotate(0deg) scale(1); }
  }
  #logoDice.is-wiggling{ animation:logo-wiggle 0.9s cubic-bezier(.36,.07,.19,.97); transform-origin:center; }
  .top h1{
    font-size:clamp(2.4rem, 6vw, 3.6rem);
    font-weight:600;
    font-style:italic;
    margin-top:2px;
    letter-spacing:-0.5px;
    color:var(--ink);
  }
  .top p{
    color:var(--ink-soft);
    margin-top:10px;
    font-size:0.98rem;
  }
  
  .wrap{ width:100%; max-width:840px; margin-top:46px; position:relative; z-index:1; }
  
  .nook-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:20px;
  }
  
  .nook{
    background:var(--surface);
    border:1.5px solid var(--border);
    border-radius:26px;
    padding:28px 24px;
    text-align:left;
    cursor:pointer;
    font-family:inherit;
    color:var(--ink);
    box-shadow:0 2px 0 rgba(74,52,40,0.03), 0 18px 32px -14px rgba(74,52,40,0.18);
    transition:transform 0.18s, box-shadow 0.18s, border-color 0.18s;
  }
  .nook:hover{
    transform:translateY(-3px);
    box-shadow:0 2px 0 rgba(74,52,40,0.03), 0 24px 40px -14px rgba(74,52,40,0.24);
    border-color:var(--terracotta);
  }
  .nook:focus-visible{ outline:2.5px solid var(--terracotta); outline-offset:3px; }
  .nook:active{ transform:translateY(-1px) scale(0.98); }
  
  .nook-badge{
    display:flex;
    width:50px; height:50px;
    align-items:center; justify-content:center;
    border-radius:16px;
    margin-bottom:16px;
  }
  .nook-badge svg{ width:24px; height:24px; }
  .badge-terracotta{ background:#f3ded1; color:var(--terracotta-deep); } /* Petit Bac */
.badge-sage{ background:#e3ead9; color:var(--sage-deep); }             /* Loup Garou */
.badge-amber{ background:#faeacb; color:#a3781f; }                     /* Motus */
.badge-clay{ background:#e8d9ce; color:#7a5240; }                      /* Loto */
  
  .nook h2{
    font-size:1.4rem;
    font-weight:600;
    letter-spacing:-0.2px;
  }
  .nook p{
    font-family:'Inter', sans-serif;
    font-size:0.88rem;
    color:var(--ink-soft);
    line-height:1.45;
    margin:8px 0 0;
  }
  .nook-cta{
    display:inline-flex;
    align-items:center;
    gap:4px;
    margin-top:18px;
    font-size:0.85rem;
    font-weight:600;
    color:var(--terracotta-deep);
  }
  .arrow{ transition:transform 0.15s; }
  .nook:hover .arrow{ transform:translateX(3px); }
  
  /* ---------- Carte "événement mystère" (compte à rebours) ---------- */
  .nook-event{
    position:relative;
    overflow:hidden;
    background:linear-gradient(165deg, #2a2432, #1a1520);
    border:1.5px solid #4a3f5c;
    box-shadow:
      0 2px 0 rgba(0,0,0,0.2),
      0 18px 32px -14px rgba(0,0,0,0.5),
      0 0 0 1px rgba(168,132,255,0.08),
      inset 0 0 30px rgba(124,92,255,0.06);
    animation:event-border-glow 3.2s ease-in-out infinite;
  }
  @keyframes event-border-glow{
    0%, 100%{ border-color:#4a3f5c; box-shadow:0 2px 0 rgba(0,0,0,0.2), 0 18px 32px -14px rgba(0,0,0,0.5), 0 0 0 1px rgba(168,132,255,0.08), inset 0 0 30px rgba(124,92,255,0.06); }
    50%{ border-color:#7a5fb8; box-shadow:0 2px 0 rgba(0,0,0,0.2), 0 18px 40px -12px rgba(124,92,255,0.35), 0 0 0 1px rgba(168,132,255,0.25), inset 0 0 40px rgba(124,92,255,0.14); }
  }
  .nook-event:hover{ transform:translateY(-3px); }
  @media (prefers-reduced-motion:reduce){ .nook-event{ animation:none; } }

  /* Balayage lumineux diagonal, façon "carte à gratter" gaming */
  .nook-event::before{
    content:'';
    position:absolute;
    top:0; left:-60%;
    width:40%; height:100%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,0.09), transparent);
    transform:skewX(-18deg);
    animation:event-sheen 4.5s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes event-sheen{
    0%{ left:-60%; }
    35%, 100%{ left:130%; }
  }
  @media (prefers-reduced-motion:reduce){ .nook-event::before{ animation:none; display:none; } }

  .nook-event .nook-badge.badge-muted-dark{
    background:rgba(168,132,255,0.14);
    color:#c9b6ff;
    animation:event-lock-pulse 2.2s ease-in-out infinite;
  }
  @keyframes event-lock-pulse{
    0%, 100%{ box-shadow:0 0 0 0 rgba(168,132,255,0.35); }
    50%{ box-shadow:0 0 0 8px rgba(168,132,255,0); }
  }
  .nook-event h2{ position:relative; z-index:1; color:#f1ecff; }
  .nook-event p{ position:relative; z-index:1; color:#b8adca; }

  .nook-event-decor{
    position:absolute;
    inset:0;
    pointer-events:none;
  }
  .event-spark{
    position:absolute;
    width:5px; height:5px;
    border-radius:50%;
    background:#c9b6ff;
    box-shadow:0 0 6px 1px rgba(201,182,255,0.9);
    opacity:0;
    animation:event-spark-twinkle 3.4s ease-in-out infinite;
  }
  .event-spark-sm{ width:3px; height:3px; }
  @keyframes event-spark-twinkle{
    0%, 100%{ opacity:0; transform:scale(0.6); }
    50%{ opacity:1; transform:scale(1); }
  }
  @media (prefers-reduced-motion:reduce){ .event-spark{ animation:none; opacity:0.6; } }

  .nook-event-countdown{
    position:relative; z-index:1;
    display:inline-flex;
    align-items:baseline;
    gap:6px;
    margin-top:12px;
    padding:7px 12px;
    border-radius:10px;
    background:rgba(168,132,255,0.1);
    border:1px solid rgba(168,132,255,0.28);
    font-family:'Menlo','Courier New',monospace;
    font-weight:700;
    font-size:0.98rem;
    letter-spacing:0.5px;
    color:#d9ccff;
    text-shadow:0 0 12px rgba(168,132,255,0.55);
  }
  .nook-event .nook-cta{ position:relative; z-index:1; color:#c9b6ff; }

  /* ---------- Modale "événement mystère" ---------- */
  .event-modal-body{
    display:flex;
    flex-direction:column;
    gap:16px;
    margin-bottom:8px;
  }
  .event-modal-row{
    display:flex;
    align-items:flex-start;
    gap:14px;
  }
  .event-modal-icon{
    font-size:1.4rem;
    line-height:1;
    flex-shrink:0;
    margin-top:2px;
  }
  .event-modal-row strong{
    display:block;
    font-size:0.96rem;
    margin-bottom:2px;
  }
  .event-modal-row p{
    margin:0;
    font-size:0.86rem;
    color:var(--ink-soft);
    line-height:1.45;
  }
  .event-modal-cta{
    display:block;
    text-align:center;
    text-decoration:none;
  }

  .nook-empty{
    cursor:default;
    border-style:dashed;
    box-shadow:none;
  }
  .nook-empty:hover{
    transform:none;
    box-shadow:none;
    border-color:var(--border);
  }
  .nook-empty h2{ color:var(--ink-soft); opacity:0.8; }
  .handwritten{
    font-family:'Caveat', cursive;
    font-size:1.15rem;
    font-weight:700;
    color:var(--muted);
    margin:6px 0 0 !important;
  }
  
  .hint{
    margin-top:22px;
    min-height:20px;
    font-family:'Caveat', cursive;
    font-size:1.15rem;
    font-weight:700;
    color:var(--terracotta-deep);
    text-align:center;
  }
  
  @media (max-width:620px){
    body{ padding:88px 22px 90px; }
    .top{ margin-bottom:28px; }
    .tag{ margin-bottom:22px; }
    .top p{ margin-top:14px; }
    .wrap{ margin-top:44px; }
    .nook-grid{ grid-template-columns:1fr; gap:32px; }
    .nook{ padding:34px 28px; border-radius:28px; }
    .nook-badge{ margin-bottom:22px; }
    .nook p{ margin-top:12px; line-height:1.6; }
    .nook-cta{ margin-top:26px; }
    .rules-trigger{ margin-top:40px; }
  }
  /* ---------- Bouton déclencheur ---------- */
.rules-trigger{
  display:block;
  margin:28px auto 0;
  background:var(--surface);
  border:1.5px solid var(--border);
  color:var(--ink-soft);
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:0.9rem;
  padding:12px 26px;
  border-radius:20px;
  cursor:pointer;
  transition:0.18s;
}
.rules-trigger:hover{
  color:var(--terracotta-deep);
  border-color:var(--terracotta);
  transform:translateY(-2px);
}

/* ---------- Overlay + modale ---------- */
.rules-overlay{
  position:fixed;
  inset:0;
  background:rgba(74,52,40,0.35);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.2s ease;
  z-index:100;
}
.rules-overlay.is-open{
  opacity:1;
  pointer-events:auto;
}

.rules-modal{
  /* Centrage par position absolue + transform plutôt que par flexbox : plus
     fiable dans un WebView mobile (le centrage flex pouvait, selon le
     contenu, se réduire bien en dessous de la largeur disponible). */
  position:absolute;
  top:50%; left:50%;
  background:var(--bg);
  border-radius:28px;
  max-width:640px;
  width:calc(100% - 48px);
  max-height:85vh;
  overflow-y:auto;
  padding:36px 32px 28px;
  transform:translate(-50%, calc(-50% + 12px));
  transition:transform 0.2s ease;
  box-shadow:0 30px 60px -20px rgba(74,52,40,0.35);
}
.rules-overlay.is-open .rules-modal{
  transform:translate(-50%, -50%);
}

.rules-close{
  position:absolute;
  top:18px; right:20px;
  background:none;
  border:none;
  font-size:1.6rem;
  line-height:1;
  color:var(--ink-soft);
  cursor:pointer;
  padding:4px 8px;
}
.rules-close:hover{ color:var(--terracotta-deep); }

/* ---------- Intro ---------- */
.rules-intro{ margin-bottom:22px; }
.rules-intro h2{
  font-size:1.7rem;
  font-weight:600;
  font-style:italic;
  margin-top:4px;
}
.rules-intro-text{
  color:var(--ink-soft);
  font-size:0.94rem;
  line-height:1.55;
  margin-top:10px;
}

/* ---------- Menu accordéon ---------- */
.rules-menu{ display:flex; flex-direction:column; gap:10px; }

.rules-item{
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:18px;
  overflow:hidden;
}

.rules-item-head{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  background:none;
  border:none;
  padding:14px 16px;
  cursor:pointer;
  font-family:inherit;
  text-align:left;
}
.rules-item-badge{
  width:34px; height:34px;
  min-width:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  font-size:1rem;
}
.rules-item-name{
  flex:1;
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:1.05rem;
  color:var(--ink);
}
.rules-item-chevron{
  color:var(--muted);
  transition:transform 0.2s ease;
}
.rules-item.is-open .rules-item-chevron{
  transform:rotate(180deg);
}

.rules-item-body{
  max-height:0;
  overflow:hidden;
  transition:max-height 0.25s ease, padding 0.25s ease;
  padding:0 18px;
  font-size:0.88rem;
  color:var(--ink-soft);
  line-height:1.55;
}
.rules-item-body p{ margin:0 0 10px; }
.rules-item-body p:last-child{ margin-bottom:0; }
.rules-item.is-open .rules-item-body{
  max-height:500px;
  padding:0 18px 18px;
}

@media (max-width:600px){
  .rules-modal{ padding:28px 20px 22px; }
}
wrap-narrow{ max-width:460px; }
 
.back-link{
  display:block;
  text-align:center;
  margin-top:28px;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.75rem;
  letter-spacing:0.5px;
  color:var(--ink-soft);
  text-decoration:none;
}
.back-link:hover{ color:var(--terracotta); }

/* ---------- badge compte (haut de l'accueil) ---------- */
.account-badge{
  position:absolute;
  top:24px; right:24px;
  z-index:2;
  text-decoration:none;
  transition:transform 0.15s;
}
.account-badge:hover{ transform:scale(1.06); }
.account-badge .avatar-circle{ width:64px; height:64px; }
.account-badge .avatar-circle svg{ width:28px; height:28px; }

/* Petite couronne pour tout utilisateur avec un abonnement actif (VIP,
   Fonction+ ou Premium) — ajoutée dynamiquement par files/accueiln1.js */
.account-badge.is-subscriber .avatar-circle{
  box-shadow:0 0 0 3px var(--amber);
}
.subscriber-crown{
  position:absolute;
  bottom:-2px; right:-2px;
  width:22px; height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--amber);
  color:#fff;
  border-radius:50%;
  border:2px solid var(--surface);
  box-shadow:0 2px 6px rgba(74,52,40,0.3);
}
.subscriber-crown svg{ width:12px; height:12px; }

/* Point rouge : un badge de progression vient d'être débloqué (voir profil). */
.badge-unseen-dot{
  position:absolute;
  top:-2px; right:-2px;
  width:14px; height:14px;
  border-radius:50%;
  background:var(--terracotta-deep, #a3402f);
  border:2px solid var(--surface);
  animation:badge-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes badge-dot-pulse{
  0%, 100%{ transform:scale(1); }
  50%{ transform:scale(1.18); }
}
@media (prefers-reduced-motion:reduce){
  .badge-unseen-dot{ animation:none; }
}

/* Médaille de badge fraîchement débloquée, sur la page profil. */
/* Badge tout juste débloqué, pas encore cliqué : pulse doucement pour
   inviter à taper dessus. */
@keyframes badge-medal-pulse{
  0%, 100%{ transform:scale(1); }
  50%{ transform:scale(1.13); }
}
.badge-medal-new .avatar-circle{
  animation:badge-medal-pulse 1.1s ease-in-out infinite;
  box-shadow:0 0 0 4px rgba(234,179,94,0.35);
}

/* Au clic : tourne plusieurs fois sur lui-même avant de se stabiliser. */
@keyframes badge-medal-spin{
  0%{ transform:scale(1.15) rotate(0deg); }
  88%{ transform:scale(1.15) rotate(2160deg); }
  100%{ transform:scale(1) rotate(2160deg); }
}
.badge-medal-spinning .avatar-circle{
  animation:badge-medal-spin 1.3s cubic-bezier(.34,1.2,.4,1) both;
  box-shadow:0 0 0 4px rgba(234,179,94,0.35);
}

@media (prefers-reduced-motion:reduce){
  .badge-medal-new .avatar-circle,
  .badge-medal-spinning .avatar-circle{ animation:none; }
}

/* Easter egg : clin d'œil de l'avatar (appui long, page profil). */
@keyframes avatar-wink{
  0%{ transform:scale(1) rotate(0deg) translateY(0); }
  15%{ transform:scale(0.8, 1.15) rotate(-12deg) translateY(-4px); }
  30%{ transform:scale(1.15, 0.88) rotate(10deg) translateY(2px); }
  45%{ transform:scale(0.9, 1.1) rotate(-14deg) translateY(-10px); }
  60%{ transform:scale(1.08, 0.95) rotate(8deg) translateY(0); }
  75%{ transform:scale(0.95, 1.05) rotate(-5deg) translateY(-2px); }
  90%{ transform:scale(1.02, 0.99) rotate(2deg) translateY(0); }
  100%{ transform:scale(1) rotate(0deg) translateY(0); }
}
.avatar-winking{ animation:avatar-wink 0.9s cubic-bezier(.36,.07,.19,.97); }
@media (prefers-reduced-motion:reduce){
  .avatar-winking{ animation:none; }
}

/* ---------- badge boutique (haut de l'accueil, symétrique du compte) ---------- */
.shop-badge{
  position:absolute;
  top:24px; left:24px;
  z-index:2;
  text-decoration:none;
  transition:transform 0.15s;
}
.shop-badge:hover{ transform:scale(1.06); }
.shop-badge .avatar-circle{ width:64px; height:64px; }
.shop-badge .avatar-circle svg{ width:28px; height:28px; }
@media (max-width:620px){
  .shop-badge{ top:16px; left:16px; }
  .shop-badge .avatar-circle{ width:52px; height:52px; }
  .shop-badge .avatar-circle svg{ width:23px; height:23px; }
  .account-badge{ top:16px; right:16px; }
  .account-badge .avatar-circle{ width:52px; height:52px; }
  .account-badge .avatar-circle svg{ width:23px; height:23px; }
  .subscriber-crown{ width:18px; height:18px; }
  .subscriber-crown svg{ width:10px; height:10px; }
}


/* ---------- avatars (réutilisés dans le badge compte + l'inscription) ---------- */
.avatar-circle{
  display:flex;
  align-items:center; justify-content:center;
  width:56px; height:56px;
  border-radius:50%;
  flex-shrink:0;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}
.avatar-circle svg{ width:26px; height:26px; }
.avatar-circle img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.badge-gold{ background:#f6e9d0; color:#a17838; }
.badge-muted-dark{ background:#e8e2d5; color:#6b5847; }

/* ---------- formulaire d'inscription ---------- */
.signup-card{
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:26px;
  padding:30px 28px;
  box-shadow:0 2px 0 rgba(74,52,40,0.03), 0 18px 32px -14px rgba(74,52,40,0.18);
}
.field{ margin-bottom:20px; }
.field:last-of-type{ margin-bottom:0; }
.field-label{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.7rem;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--terracotta-deep);
  font-weight:600;
  margin-bottom:8px;
}
.signup-card input{
  width:100%;
  background:var(--bg);
  border:1.5px solid var(--border);
  border-radius:12px;
  padding:12px 14px;
  font-family:'Inter', sans-serif;
  font-size:0.95rem;
  color:var(--ink);
  outline:none;
  transition:border-color 0.15s;
}
.signup-card input:focus{ border-color:var(--terracotta); }

/* ---------- afficher/masquer le mot de passe (injecté par accueiln1.js) ---------- */
.pwd-field{ position:relative; }
.pwd-field input{ padding-right:44px !important; }
.pwd-toggle{
  position:absolute;
  top:50%; right:6px;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px; height:32px;
  background:none;
  border:none;
  color:var(--ink-soft);
  cursor:pointer;
  padding:0;
  border-radius:8px;
  transition:color 0.15s;
}
.pwd-toggle:hover{ color:var(--terracotta-deep); }
.pwd-toggle svg{ width:19px; height:19px; }

.avatar-picker{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
}
.avatar-opt{
  background:transparent;
  border:2px solid transparent;
  border-radius:16px;
  padding:8px 4px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  cursor:pointer;
  transition:0.15s;
}
.avatar-opt:hover{ background:var(--bg); }
.avatar-opt.selected{ border-color:var(--terracotta); background:var(--bg); }
.avatar-opt .avatar-name{
  font-size:0.68rem;
  color:var(--ink-soft);
  font-weight:500;
  text-align:center;
  line-height:1.2;
}

.form-error{
  color:#a3402f;
  font-family:'Inter', sans-serif;
  font-size:0.85rem;
  margin-top:16px;
  font-weight:500;
}
.signup-btn{
  width:100%;
  margin-top:24px;
  background:var(--terracotta);
  color:#fff;
  border:none;
  padding:15px;
  border-radius:12px;
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:1.05rem;
  cursor:pointer;
  transition:0.15s;
}
.signup-btn:hover{ background:var(--terracotta-deep); }
.signup-btn:active{ transform:scale(0.97); }
.form-note{
  text-align:center;
  font-size:0.76rem;
  color:var(--ink-soft);
  margin:14px 0 0;
}

@media (max-width:420px){
  .avatar-picker{ grid-template-columns:repeat(2, 1fr); }
}