@media (max-width: 767px) {
    @keyframes planning-popup-slide-up-mobile {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }

    @keyframes planning-popup-slide-down-mobile {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(100%);
        }
    }

    .planning-popup-overlay {
        align-items: flex-end;
        justify-content: stretch;
        padding-top: 32px;
        padding-bottom: 0;
    }

    .planning-popup {
        width: 100vw;
        height: 100dvh;
        max-height: none;
        border-radius: 24px 24px 0 0;
        background: #fff;
        box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.22);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        animation: planning-popup-slide-up-mobile 0.28s ease-out;
        will-change: transform;
    }

    .planning-popup-submit-state {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.24);
        backdrop-filter: blur(16px);
        z-index: 30;
        opacity: 0;
        clip-path: circle(0 at 50% 50%);
        pointer-events: none;
        z-index: 10020;
    }

    .planning-popup-submit-loader {
        width: 56px;
        height: 56px;
        border: 3px solid rgba(95, 51, 79, 0.18);
        border-top-color: #5f334f;
        border-radius: 50%;
        animation: planning-popup-submit-spin-mobile 0.85s linear infinite;
        opacity: 0;
    }

    .planning-popup-overlay.is-submitting .planning-popup-submit-state {
        animation: planning-popup-submit-reveal-mobile 0.42s ease-out forwards;
    }

    .planning-popup-overlay.is-submitting .planning-popup-submit-loader {
        animation: planning-popup-submit-spin-mobile 0.85s linear infinite, planning-popup-submit-loader-in-mobile 0.24s ease-out 0.12s forwards;
    }

    @keyframes planning-popup-submit-spin-mobile {
        to {
            transform: rotate(360deg);
        }
    }

    @keyframes planning-popup-submit-reveal-mobile {
        0% {
            opacity: 0;
            clip-path: circle(0 at 50% 50%);
        }
        100% {
            opacity: 1;
            clip-path: circle(150% at 50% 50%);
        }
    }

    @keyframes planning-popup-submit-loader-in-mobile {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    .planning-popup-overlay.is-closing .planning-popup {
        animation: planning-popup-slide-down-mobile 0.24s ease-in forwards;
    }

    .planning-popup-close {
        top: 12px;
        right: 12px;
        width: 38px;
        height: 38px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.92);
        color: #26323a;
        font-size: 24px;
        line-height: 1;
        z-index: 3;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    }

    .planning-popup-inner {
        grid-template-columns: 1fr;
        grid-template-rows: 300px auto;
        min-height: 100%;
    }

    .planning-popup-course {
        grid-template-rows: 190px 110px;
        min-height: 0;
    }

    .planning-popup-photo {
        object-position: center 12%;
    }

    .planning-popup-course-band {
        height: auto;
        gap: 8px;
        padding: 14px 16px 12px;
        justify-items: center;
        align-content: center;
    }

    .planning-popup-title {
        font-size: 23px;
        line-height: 1.05;
        bottom: 1px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: calc(100% - 88px);
        padding: 0;
        text-align: center;
        color: var(--popup-cours, #8a8a6a);
    }

    .planning-popup-discipline {
        font-size: 24px;
        line-height: 0.95;
        text-align: center;
    }

    .planning-popup-row {
        grid-template-columns: 1fr auto 1fr;
        grid-template-areas:
            "day time prof";
        align-items: center;
        column-gap: 10px;
        row-gap: 0;
        width: 100%;
    }

    .planning-popup-time-label {
        grid-area: day;
        font-family: "playfair-display", serif;
        font-size: 20px;
        font-weight: 900;
        letter-spacing: 0;
        text-transform: none;
        text-align: right;
        justify-self: end;
    }

    .planning-popup-time-box {
        grid-area: time;
        width: auto;
        min-width: 46px;
        padding: 6px 8px 7px;
        border-radius: 9px;
        align-self: center;
        justify-self: center;
    }

    .planning-popup-heure-debut {
        right: 0;
        font-size: 18px;
        font-weight: 700;
        line-height: 1;
    }

    .planning-popup-heure-fin {
        margin-top: 2px;
        font-size: 11px;
        line-height: 1.1;
        opacity: 0.8;
    }

    .planning-popup-prof {
        grid-area: prof;
        font-size: 20px;
        line-height: 1;
        text-align: left;
        justify-self: start;
    }

    .planning-popup-salle {
        margin-top: -8px;
        font-size: 15px;
        letter-spacing: 0.15em;
        text-align: center;
        color: rgba(255, 255, 255, 0.92);
    }

    .planning-popup-form {
        display: grid;
        grid-template-columns: 1fr;
        align-content: start;
        gap: 14px;
        min-height: 480px;
        padding: 18px 16px calc(28px + env(safe-area-inset-bottom));
        background: #fff;
        overflow: visible;
    }

    .planning-popup-form label {
        gap: 8px;
        margin-bottom: 0;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.2;
    }

    .planning-popup-form > label:nth-of-type(-n+2) {
        width: 100%;
    }

    .planning-popup-form-row {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 0;
    }

    .planning-popup-form input,
    .planning-popup-form select {
        min-height: 46px;
        padding: 10px 12px;
        border-radius: 12px;
        font-size: 16px;
        background: #fff;
    }

    .planning-popup-form input:focus,
    .planning-popup-form select:focus {
        outline: none;
        border-color: #808c62;
        box-shadow: 0 0 0 4px rgba(128, 140, 98, 0.18);
    }

    .planning-popup-form input.is-complete:not(:focus):not(.is-invalid),
    .planning-popup-form select.is-complete:not(:focus):not(.is-invalid) {
        border-color: #808c62;
        border-width: 2px;
        border-style: solid;
        box-shadow: 0 0 0 2px rgba(128, 140, 98, 0.14);
    }

    @keyframes planning-popup-invalid-pulse-mobile {
        0%, 100% {
            box-shadow: 0 0 0 0 rgba(95, 51, 79, 0.12);
        }
        50% {
            box-shadow: 0 0 0 4px rgba(95, 51, 79, 0.22);
        }
    }

    .planning-popup-form input.is-invalid,
    .planning-popup-form select.is-invalid,
    .planning-popup-birthdate.is-invalid .planning-popup-birth-select,
    .planning-popup-fieldset.is-invalid {
        border-color: #5f334f !important;
        box-shadow: 0 0 0 2px rgba(95, 51, 79, 0.16);
        animation: planning-popup-invalid-pulse-mobile 1.6s ease-in-out infinite;
    }

    .planning-popup-birth-select.is-filled {
        color: #333;
    }

    .planning-popup-birthdate {
        margin-bottom: 22px;
    }

    .planning-popup-birthdate-row {
        gap: 8px;
    }

    .planning-popup-fieldset {
        display: grid;
        gap: 10px;
        margin-top: 2px;
        padding: 14px;
        border-radius: 16px;
        font-size: 14px;
    }

    .planning-popup-fieldset.is-invalid {
        border: 1px solid #5f334f;
    }

    .planning-popup-fieldset legend {
        margin-bottom: 2px;
        font-size: 13px;
    }

    .planning-popup-submit-wrap {
        position: sticky;
        bottom: 0;
        margin-top: 2px;
        padding: 10px 0 calc(18px + env(safe-area-inset-bottom));
        background: #fff;
    }

    .planning-popup-submit {
        width: 100%;
        min-height: 52px;
        margin-bottom: 0;
        border-radius: 999px;
        font-size: 20px;
        letter-spacing: 0.01em;
    }

    .planning-popup-success,
    .planning-popup-error {
        display: none !important;
    }
}