/* Le Showroom de Mél : habillage de Noël (version alpha)
   Se charge après style.css. Rouge de Noël, vert sapin, or, et la neige qui s'accumule au bas du héros. */

:root {
  --citrouille: #b4202a;        /* l'accent de saison devient le rouge de Noël */
  --citrouille-fonce: #8a1420;
  --sapin: #1b4636;
  --sapin-clair: #2c6650;
  --or: #dcae52;
  --dragee: #efe1cd;            /* les surfaces roses deviennent biscuit */
  --dragee-pale: #f8f1e6;
  --trait: #e8dccb;
}

/* ---------- Héros ---------- */
.heros { color: var(--sucre); overflow: hidden; }
.heros .enveloppe { padding-bottom: 124px; }
.heros__texte p { color: #fde9e4; }
.heros .lien { color: var(--sucre); }
.heros .lien:hover { text-decoration-color: var(--or); }
.heros__pastille { background: var(--or); color: var(--reglisse); width: 29%; font-size: clamp(12px, 1.3vw, 18px); }
.heros__pastille strong { display: block; font-weight: 400; font-size: 2.1em; line-height: .95; }

/* La neige s'accumule : des congères blanches remplacent le lambrequin */
.heros.lambrequin::after { display: none; }
.heros::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 30px; z-index: 1;
  background:
    radial-gradient(ellipse 34px 30px at 34px 30px, var(--sucre) 99%, transparent 100%) 0 0 / 68px 30px repeat-x,
    radial-gradient(ellipse 52px 22px at 52px 30px, var(--sucre) 99%, transparent 100%) 26px 0 / 104px 30px repeat-x;
}

/* ---------- Zone sapin (collection de Noël) ---------- */
.nuit { --lambrequin: var(--sapin); background: var(--sapin); }
.nuit .zone__tete h2 { color: var(--or); }
.nuit .zone__tete p { color: #dfeae3; }
.nuit .carte__photo { background: var(--sapin-clair); }
.nuit .carte__detail { color: #c5d8cd; }
.nuit .carte__ajout:hover { background: var(--or); border-color: var(--or); color: var(--reglisse); }
.nuit h3.sous-titre { color: var(--or); }
.lettre .bouton { color: #fff; }

/* ---------- Calendrier de l'avent ---------- */
.avent { padding-block: 84px 92px; }
.avent__grille { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 8px; }
.case { position: relative; aspect-ratio: 1 / 1.12; perspective: 900px; }
.case__dedans {
  position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; padding: 0; text-align: left;
  border: 0; border-radius: 16px; background: var(--dragee-pale); color: var(--reglisse); text-decoration: none;
}
.case__dedans img { width: 100%; flex: 1; min-height: 0; object-fit: cover; }
.case__texte { padding: 9px 12px 11px; line-height: 1.2; }
.case__nom { display: block; font-family: var(--titre); font-size: 16px; }
.case__prix { display: block; margin-top: 3px; font-size: 13.5px; color: var(--reglisse-doux); }
.case__prix b { color: var(--reglisse); font-weight: 600; }
.case__dedans:hover .case__nom { text-decoration: underline; text-underline-offset: 3px; }

.case__porte {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 16px; background: var(--citrouille); color: var(--sucre);
  font-family: var(--titre); font-size: clamp(34px, 4.4vw, 62px); line-height: 1;
  transform-origin: left center; transition: transform .7s cubic-bezier(.3,.8,.3,1), opacity .5s .2s, visibility 0s .7s;
  backface-visibility: hidden;
}
.case__porte::after { content: ""; position: absolute; inset: 7px; border: 1.5px dashed currentColor; border-radius: 11px; opacity: .45; }
.case:nth-child(4n+2) .case__porte { background: var(--sapin); }
.case:nth-child(4n+3) .case__porte { background: var(--or); color: var(--reglisse); }
.case:nth-child(4n+4) .case__porte { background: var(--dragee); color: var(--citrouille); }
.case__porte:hover { filter: brightness(1.07); }
.case.case--finale .case__porte { background: var(--reglisse); color: var(--or); }
.case.ouverte .case__porte { transform: rotateY(-108deg); opacity: 0; visibility: hidden; }
.avent__note { margin-top: 22px; font-size: 14.5px; color: var(--reglisse-doux); }
.avent__note button { border: 0; background: none; padding: 0; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Idées cadeaux par budget ---------- */
.budget__puces { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.delais { margin-top: 44px; padding: 22px 26px; border-radius: 20px; background: var(--dragee-pale); max-width: 760px; }
.delais strong { font-family: var(--titre); font-weight: 400; font-size: 21px; display: block; margin-bottom: 4px; }

/* ---------- Neige ---------- */
.neige { position: fixed; inset: 0; z-index: 35; width: 100%; height: 100%; pointer-events: none; }
.neige-bouton {
  position: fixed; left: 16px; bottom: 16px; z-index: 36; min-height: 40px; padding: 0 16px;
  border: 1.5px solid var(--trait); border-radius: 999px; background: var(--sucre); color: var(--reglisse);
  font-size: 13.5px; font-weight: 600; box-shadow: 0 4px 14px rgba(42, 27, 22, .12);
}
.neige-bouton:hover { border-color: var(--reglisse); }

@media (max-width: 1100px) {
  .avent__grille { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 860px) {
  .heros .enveloppe { padding-bottom: 76px; }
  .avent { padding-block: 56px 60px; }
  .avent__grille { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .case__porte, .case__dedans { border-radius: 12px; }
  .case__porte::after { inset: 5px; border-radius: 8px; }
  .case__texte { padding: 6px 8px 8px; }
  .case__nom { font-size: 13px; }
  .case__prix { font-size: 12px; }
  .neige-bouton { left: 10px; bottom: 10px; font-size: 12.5px; min-height: 36px; padding: 0 12px; }
  body:has(.barre-achat.visible) .neige-bouton { bottom: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .case__porte { transition: none; }
}