.calendar {
    display: grid;
    width: 100%; /* Changé de 500px à 100% pour s'adapter aux mobiles */
    max-width: 500px; /* Limite la largeur maximale */
    margin: auto;

    /* Configuration par défaut pour mobile - 2 colonnes */
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    grid-gap: 10px; /* Espacement réduit pour mobile */
    
    /* Disposition pour mobile en 2 colonnes */
    grid-template-areas:
        "d1 d2"
        "d3 d4"
        "d5 d6"
        "d7 d8"
        "d9 d10"
        "d11 d12"
        "d13 d14"
        "d15 d16"
        "d17 d18"
        "d19 d20"
        "d21 d22"
        "d23 d24";
}

.calendar-mini {
    width: calc(33vw - var(--sidebar-width));
    grid-gap: 10px;
}

/* Tablettes */
@media only screen and (min-width: 500px) and (max-width: 767px) {
    .calendar {
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 15px;
        grid-template-areas:
            "d23 d20 d12"
            "d2 d14 d4"
            "d5 d22 d16"
            "d1 d7 d9"
            "d10 d11 d18"
            "d13 d3 d15"
            "d6 d17 d8"
            "d19 d24 d21";
    }
}

/* Desktop */
@media only screen and (min-width: 768px) {
    .calendar {
        width: 500px; /* Taille fixe pour desktop */
        grid-template-columns: repeat(6, 1fr);
        grid-gap: 20px;
        grid-template-areas:
            "d2 d8 d8 d11 d3 d13"
            "d5 d19 d21 d15 d3 d9"
            "d7 d24 d24 d12 d10 d23"
            "d16 d24 d24 d14 d18 d22"
            "d1 d6 d4 d17 d20 d20";
    }
}

.day-1 {
    grid-area: d1;
}

.day-1 .back {
    background-color: #ff5330;
}

.day-2 {
    grid-area: d2;
}

.day-2 .back {
    background-color: #bfba26;
}

.day-3 {
    grid-area: d3;
}

.day-3 .back {
    background-color: #70ccc2;
}

.day-4 {
    grid-area: d4;
}

.day-4 .back {
    background-color: #b4a439;
}

.day-5 {
    grid-area: d5;
}

.day-5 .back {
    background-color: #ffa33f;
}

.day-6 {
    grid-area: d6;
}

.day-6 .back {
    background-color: #623a3a;
}

.day-7 {
    grid-area: d7;
}

.day-7 .back {
    background-color: #23a38f;
}

.day-8 {
    grid-area: d8;
}

.day-8 .back {
    background-color: #1ec165;
}

.day-9 {
    grid-area: d9;
}

.day-9 .back {
    background-color: #623a3a;
}

.day-10 {
    grid-area: d10;
}

.day-10 .back {
    background-color: #eec2a1;
}

.day-11 {
    grid-area: d11;
}

.day-11 .back {
    background-color: #d45d01;
}

.day-12 {
    grid-area: d12;
}

.day-12 .back {
    background-color: #ffa33f;
}

.day-13 {
    grid-area: d13;
}

.day-13 .back {
    background-color: #ff5330;
}

.day-14 {
    grid-area: d14;
}

.day-14 .back {
    background-color: #1ec165;
}

.day-15 {
    grid-area: d15;
}

.day-15 .back {
    background-color: #ffa33f;
}

.day-16 {
    grid-area: d16;
}

.day-16 .back {
    background-color: #623a3a;
}

.day-17 {
    grid-area: d17;
}

.day-17 .back {
    background-color: #70ccc2;
}

.day-18 {
    grid-area: d18;
}

.day-18 .back {
    background-color: #bfba26;
}

.day-19 {
    grid-area: d19;
}

.day-19 .back {
    background-color: #70ccc2;
}

.day-20 {
    grid-area: d20;
}

.day-20 .back {
    background-color: #1ec165;
}

.day-21 {
    grid-area: d21;
}

.day-21 .back {
    background-color: #23a38f;
}

.day-22 {
    grid-area: d22;
}

.day-22 .back {
    background-color: #eec2a1;
}

.day-23 {
    grid-area: d23;
}

.day-23 .back {
    background-color: #1ec165;
}

.day-24 {
    grid-area: d24;
}

.day-24 .back {
    background-color: #f0563d;
}

.calendar input {
    display: none;
}

.calendar label {
    perspective: 1000px;
    transform-style: preserve-3d;
    cursor: pointer;
    display: flex;
    min-height: 100%;
    width: 100%;
    height: 72px;
}

/* Hauteur réduite sur mobile */
@media only screen and (max-width: 499px) {
    .calendar label {
        height: 60px;
    }
    
    .door .front {
        font-size: 20px !important;
    }
}

.calendar-mini label {
    height: 52px;
}

.calendar-card .card-body {
    background-size: 500px;
    background-repeat: repeat;
    background-position: top right;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.815) 0%,
     rgba(0, 0, 0, 0.781) 100%),
     url("https://i.ibb.co/BVJQgzr/chritsmas2.png");
}

.calendar-card-mini .card-body {
    background-size: 250px;
}

.door {
    width: 100%;
    transform-style: preserve-3d;
    transition: all 300ms;
}

.door .front {
    background-color: var(--color-4);
    font-weight: italic;
    color: var(--text-color-1) !important;
    font-family: 'Kalam', cursive;
    border-radius: 20px;
    font-size: 25px;
}

.calendar-mini .door .front {
    font-size: 15px;
    border-radius: 10px;
}

.door .front:hover {
    cursor: default;
}

.door .front.active {
    background-size: auto 160%;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url('https://img.freepik.com/premium-vector/christmas-illustration-with-circle-frame-white-snowflakes-purple-background_444390-16857.jpg?w=740');
    color: white !important;
    transition: all 1s;
}

.day-8 .door .front.active, .day-20 .door .front.active {
    background-size: 160% auto;
}

.door .front.active:hover {
    background-size: auto 130%;
    transition: all 0.5s;
}

.day-8 .door .front.active:hover, .day-20 .door .front.active:hover {
    background-size: 130% auto;
    transition: all 0.5s;
}

.door .front.disabled {
    background-color: rgba(255, 255, 255, 0.075);
    backdrop-filter: blur(7px);
    transition: all 300ms;
}

.door form button {
    height: 100%;
    width: 100%;
}

.door div, .door form {
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}

.door .back {
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    transform: rotateY(180deg);
    border-radius: 20px;
}

:checked + .door {
    transform: rotateY(180deg);
}

.calendar button {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}