/* =========================================================
   THEME CHRISTMAS – Frontend public
   ========================================================= */

/* ---------- Fond principal ---------- */
html[data-theme="christmas"] body {
    background:
      url("../../img/christmas/bg.webp") center / cover no-repeat fixed,
      #e9e3da !important;
  }
  
  /* ---------- Carte centrale ---------- */
  html[data-theme="christmas"] .card {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.35);
  }
  
  /* ---------- Question ---------- */
  html[data-theme="christmas"] .question {
    text-align: center;
    font-size: clamp(26px, 4.2vw, 44px);
    font-weight: 700;
    line-height: 1.25;
    margin: 10px 0 28px;
    color: #2b2b2b;
  }
  
  /* ---------- Champ réponse ---------- */
  html[data-theme="christmas"] .input {
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.85);
  }
  
  /* ---------- Actions ---------- */
  html[data-theme="christmas"] .actions {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  
  /* Bouton valider */
  html[data-theme="christmas"] .btn {
    background: #7a0f0f;
    color: #fff;
  }
  
  /* ---------- Lien historique ---------- */
  html[data-theme="christmas"] .actions .link {
    margin-left: auto;
    font-size: 0.95rem;
    white-space: nowrap;
  }
  
  /* ---------- Messages ---------- */
  html[data-theme="christmas"] .notice {
    background: rgba(255, 255, 255, 0.55);
  }
  
  /* ---------- Décor bas (cadeaux) ---------- */
  html[data-theme="christmas"] .decor--bottom{
    background-image: url("../img/christmas/bottom.webp");
    background-repeat: repeat-x;
    background-position: bottom center;
  
    /* ⬇️ 5x plus petit */
    background-size: auto 20%;
  
    /* hauteur du bandeau */
    min-height: 80px;
  
    /* optionnel : léger fondu avec le fond */
    opacity: 0.95;
  }
  
  
  /* ---------- Mobile ---------- */
  @media (max-width: 520px) {
    html[data-theme="christmas"] .question {
      font-size: clamp(22px, 6vw, 32px);
      margin-bottom: 20px;
    }
  
    html[data-theme="christmas"] .actions {
      flex-direction: column;
      align-items: stretch;
    }
  
    html[data-theme="christmas"] .actions .link {
      margin-left: 0;
      text-align: right;
    }
  }
  @media (max-width: 600px){
    html[data-theme="christmas"] .decor--bottom{
      background-size: auto 25%;
      min-height: 60px;
    }
  }