/* ==========================================================================
   Calendrier : coque du chalet (images) + portes (composants HTML)
   ========================================================================== */

.calendar__roof {
  position: relative;
  width: 100%;
  margin-bottom: -0.7%;
  pointer-events: none;
}

/* Corps : montants + planches + socle en 9-slice (hauteur libre) */
.calendar__body {
  position: relative;
  /* Montants et socle à l'échelle de la toiture (maquette : 652 px de large) */
  --post-l: calc(var(--cal-w) * 90 / 652);
  --post-r: calc(var(--cal-w) * 68 / 652);
  --base: calc(var(--cal-w) * 38 / 652);
  border-style: solid;
  border-width: 0 var(--post-r) var(--base) var(--post-l);
  border-image-source: url("../assets/images/calendar/chalet-body@2x.webp");
  border-image-slice: 0 136 76 180 fill;
  border-image-repeat: stretch round;
  padding: 1.2cqw 0.6cqw 1.8cqw;
}

.doors {
  position: relative; z-index: 3;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.7cqw 1.5cqw;
}

.door-slot { position: relative; }

/* ---- Porte ----------------------------------------------------------------- */
.door {
  --top: #c42027; --mid: #9c1219; --bot: #6e0a0f; --edge: #4a0408; --num: var(--cream);
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 74 / 80;
  min-height: 44px;
  border-radius: 26% 26% 14% 14% / 22% 22% 12% 12%;
  color: var(--num);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Intérieur visible quand la porte s'ouvre */
.door::before {
  content: ""; position: absolute; inset: 4%;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 55%, #ffd76a 0, #e2830c 30%, #4b1906 75%);
  box-shadow: inset 0 0 1.2em rgba(0,0,0,.7);
}

.door__panel {
  position: absolute; inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 34%),
    linear-gradient(180deg, var(--top) 0%, var(--mid) 58%, var(--bot) 100%);
  box-shadow:
    inset 0 0.12em 0 rgba(255,255,255,.28),
    inset 0.12em 0 0 rgba(255,255,255,.08),
    inset -0.12em 0 0 rgba(0,0,0,.25),
    inset 0 -0.3em 0.45em rgba(0,0,0,.35),
    0 0.22em 0 var(--edge),
    0 0.35em 0.6em rgba(0,0,0,.5);
  transform-origin: 0% 50%;
  transition: transform .5s var(--ease-out);
}
/* Reflet au survol : opacité d'un calque, jamais de filter (évite les bugs
   de rendu GPU de Chrome/Safari sur les éléments transformés) */
.door__panel::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.04));
  opacity: 0; transition: opacity .2s;
  pointer-events: none;
}

/* Neige sur le haut de la porte */
.door__snow {
  position: absolute; left: -6%; right: -6%; top: -11%; height: 40%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.65' stop-color='%23f2f5ff'/%3E%3Cstop offset='1' stop-color='%23c9d3f2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M2 17C2 6 10 2 20 2h60c10 0 18 4 18 15v2c-2 5-6 5-8 1-3 7-8 6-10 1-3 4-7 4-9 0-3 6-9 6-11 0-3 3-7 3-9-1-3 6-9 6-11 0-3 4-7 3-9 0-3 6-8 6-10 0-2 4-6 4-8 0v-3z' fill='url(%23g)'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  pointer-events: none;
}

.door__num {
  position: absolute; left: 0; right: 0; top: 17%;
  text-align: center;
  font-weight: 700;
  font-size: 2.05em;
  line-height: 1;
  letter-spacing: -.01em;
  text-shadow: 0 0.06em 0 rgba(0,0,0,.35), 0 0 0.25em rgba(0,0,0,.25);
}

.door__icon {
  position: absolute; right: 8%; bottom: 7%;
  width: 29%; height: auto; aspect-ratio: 1;
}
.door__icon img { width: 100%; height: 100%; }

/* ---- États ----------------------------------------------------------------- */
.door--done  { --top: #5c9128; --mid: #3c6a17; --bot: #24470b; --edge: #142c05; }
.door--done .door__icon { color: #fff; }

.door--joker { --top: #5c9128; --mid: #3c6a17; --bot: #24470b; --edge: #142c05; }
.door--joker .door__icon { width: 33%; right: 6%; bottom: 5%; }

.door--today { --top: #ffd04f; --mid: #f0a019; --bot: #c86d06; --edge: #8a4300; --num: #fff; }
.door--today .door__panel {
  box-shadow:
    inset 0 0 0 0.12em #ffe9a0,
    inset 0 0.14em 0 rgba(255,255,255,.55),
    inset 0 -0.3em 0.45em rgba(120,50,0,.35),
    0 0.22em 0 var(--edge),
    0 0 0.35em 0.1em rgba(255,214,90,.95),
    0 0 0.9em 0.2em rgba(255,170,40,.5);
}
.door--today .door__num { text-shadow: 0 0.06em 0 rgba(130,55,0,.6), 0 0 0.3em rgba(150,60,0,.4); }
.door--today .door__icon { width: 34%; right: 33%; bottom: 6%; }

.door--missed { --top: #6e3a3a; --mid: #4f2526; --bot: #351616; --edge: #1f0b0b; --num: rgba(255,240,225,.6); }
.door--missed .door__icon { color: rgba(255,230,220,.55); }

.door--inactive { --top: #6a4a35; --mid: #4d3323; --bot: #352215; --edge: #1f130a; --num: rgba(255,240,225,.5); }

.door--final .door__icon { width: 34%; right: 33%; }

/* Case décorative (25e emplacement en mobile) */
.door--filler { pointer-events: none; }
.door--filler::before { display: none; }

/* ---- Interactions ---------------------------------------------------------- */
@media (hover: hover) {
  .door:not(.door--filler):hover .door__panel { transform: translateY(-3%); }
  .door:not(.door--filler):hover .door__panel::after { opacity: 1; }
}
.door:active .door__panel { transform: translateY(2%) scale(.97); }
.door:focus-visible { box-shadow: var(--focus); }

.door.is-opening .door__panel { transform: perspective(42em) rotateY(-78deg); }
.door.is-locked-shake .door__panel { animation: door-shake .42s; }

/* Taille du texte des portes liée à la largeur de la porte */
.door { font-size: clamp(11px, 2.6cqw, 17px); }