/* ==========================================================
   EDID BOOKING CINEMATIC V6
========================================================== */

.edid-cinematic-booking{

    position:relative;
    overflow:hidden;

    max-width:1450px;
    margin:0 auto;

    padding:90px;

    border-radius:42px;

    background:
    url('../images/studio-background.png')
    center center / cover no-repeat;

    box-shadow:
    0 40px 120px rgba(0,0,0,0.65);

    color:#ffffff;

    isolation:isolate;

}

/* ==========================================================
   OVERLAY
========================================================== */

.edid-overlay{

    position:absolute;
    inset:0;

    background:
    linear-gradient(
    180deg,
    rgba(0,0,0,0.78) 0%,
    rgba(0,0,0,0.88) 100%
    );

    backdrop-filter:blur(2px);

    z-index:0;

}

/* ==========================================================
   GOLD LIGHT EFFECT
========================================================== */

.edid-light{

    position:absolute;

    top:-120px;
    right:-120px;

    width:500px;
    height:500px;

    background:
    radial-gradient(
    circle,
    rgba(255,180,0,0.32) 0%,
    transparent 70%
    );

    filter:blur(10px);

    animation:floatLight 10s infinite alternate ease-in-out;

    z-index:1;

}

/* ==========================================================
   CONTENT LAYER
========================================================== */

.edid-top-header,
.edid-highlight-grid,
.edid-cinematic-form{

    position:relative;
    z-index:3;

}

/* ==========================================================
   HEADER
========================================================== */

.edid-top-header{

    text-align:center;
    margin-bottom:70px;

}

.edid-pill{

    display:inline-block;

    padding:12px 24px;

    border-radius:60px;

    background:rgba(255,180,0,0.10);

    border:1px solid rgba(255,180,0,0.28);

    backdrop-filter:blur(14px);

    letter-spacing:4px;

    font-size:12px;
    font-weight:700;

    color:#ffb400;

    margin-bottom:30px;

}

.edid-top-header h2{

    font-size:92px;
    line-height:0.95;

    font-weight:900;

    margin-bottom:28px;

    background:
    linear-gradient(
    180deg,
    #ffd76a 0%,
    #ffae00 100%
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    text-shadow:
    0 0 40px rgba(255,180,0,0.28);

}

.edid-top-header p{

    max-width:820px;
    margin:0 auto;

    font-size:21px;
    line-height:1.9;

    opacity:0.94;

}

/* ==========================================================
   INFO CARDS
========================================================== */

.edid-highlight-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(240px,1fr));

    gap:28px;

    margin-bottom:60px;

}

.edid-highlight-card{

    padding:34px;

    border-radius:28px;

    background:
    linear-gradient(
    180deg,
    rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.03) 100%
    );

    border:1px solid rgba(255,180,0,0.18);

    backdrop-filter:blur(18px);

    transition:0.4s;

    box-shadow:
    0 20px 60px rgba(0,0,0,0.38);

}

.edid-highlight-card:hover{

    transform:
    translateY(-8px)
    scale(1.02);

    border-color:rgba(255,180,0,0.55);

    box-shadow:
    0 25px 80px rgba(255,180,0,0.18);

}

.edid-highlight-card span{

    display:block;

    font-size:14px;

    margin-bottom:18px;

    opacity:0.75;

}

.edid-highlight-card strong{

    font-size:26px;
    font-weight:800;

}

/* ==========================================================
   MESSAGE ERREUR
========================================================== */

.edid-booking-error{

    background:rgba(255,180,0,0.08);

    border:1px solid #f0b000;

    color:#f0b000;

    padding:20px;

    margin:0 auto 30px auto;

    border-radius:15px;

    text-align:center;

    font-weight:700;

    letter-spacing:.5px;

    max-width:900px;

    box-shadow:
    0 0 20px rgba(240,176,0,.15);

}

/* ==========================================================
   FORMULAIRE
========================================================== */

.edid-cinematic-form{

    padding:45px;

    border-radius:32px;

    background:
    linear-gradient(
    180deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.35) 100%
    );

    border:1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(22px);

}

.edid-form-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(300px,1fr));

    gap:28px;

    margin-bottom:40px;

}

.edid-field{

    display:flex;
    flex-direction:column;
    gap:14px;

}

.edid-field label{

    font-size:14px;
    font-weight:700;

    letter-spacing:1px;

    color:#ffb400;

}

.edid-field input,
.edid-field select{

    padding:20px;

    border-radius:20px;

    background:
    rgba(255,255,255,0.06);

    border:1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(12px);

    color:#ffffff;

    font-size:16px;

    transition:0.3s;

}

.edid-field input:focus,
.edid-field select:focus{

    outline:none;

    border-color:#ffb400;

    box-shadow:
    0 0 0 4px rgba(255,180,0,0.14),
    0 0 45px rgba(255,180,0,0.12);

}

/* DATE / TIME ICONS */

.edid-field input[type="date"]::-webkit-calendar-picker-indicator,
.edid-field input[type="time"]::-webkit-calendar-picker-indicator{

    filter:
    invert(76%)
    sepia(63%)
    saturate(834%)
    hue-rotate(357deg);

    cursor:pointer;

}

/* ==========================================================
   BUTTON
========================================================== */

.edid-cinematic-btn{

    width:100%;

    padding:28px;

    border:none;

    border-radius:24px;

    background:
    linear-gradient(
    180deg,
    #ffd76a 0%,
    #ffae00 100%
    );

    font-size:18px;
    font-weight:900;

    letter-spacing:2px;

    cursor:pointer;

    transition:0.4s;

    box-shadow:
    0 25px 70px rgba(255,180,0,0.22);

}

.edid-cinematic-btn:hover{

    transform:
    translateY(-5px)
    scale(1.01);

    box-shadow:
    0 35px 100px rgba(255,180,0,0.42);

}

/* ==========================================================
   ANIMATION
========================================================== */

@keyframes floatLight{

    from{

        transform:translateY(0px);
        opacity:0.7;

    }

    to{

        transform:translateY(45px);
        opacity:1;

    }

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:768px){

    .edid-cinematic-booking{

        padding:28px;

        border-radius:24px;

        background-position:center center;

    }

    .edid-top-header h2{

        font-size:42px;
        line-height:1.05;

    }

    .edid-top-header p{

        font-size:16px;

    }

    .edid-highlight-grid,
    .edid-form-grid{

        grid-template-columns:1fr;

    }

}
/* ==========================================================
   CALENDRIER PREMIUM V5
========================================================== */

#edid-slots-container{

    display:grid;

    grid-template-columns:
    repeat(auto-fill,minmax(120px,1fr));

    gap:12px;

    margin-top:10px;

    min-height:60px;

}

/* Message attente */

.edid-no-slots{

    padding:18px;

    text-align:center;

    border-radius:14px;

    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,255,255,0.08);

    color:#ccc;

}

/* Créneau disponible */

.edid-slot{

    position:relative;

    padding:16px;

    border-radius:16px;

    background:
    linear-gradient(
    180deg,
    rgba(255,180,0,0.08) 0%,
    rgba(255,180,0,0.03) 100%
    );

    border:1px solid rgba(255,180,0,0.25);

    text-align:center;

    font-weight:700;

    color:#ffffff;

    cursor:pointer;

    transition:.3s;

    user-select:none;

}

.edid-slot:hover{

    transform:
    translateY(-3px);

    border-color:#ffb400;

    box-shadow:
    0 10px 30px rgba(255,180,0,.18);

}

/* Créneau sélectionné */

.edid-slot.selected{

    background:
    linear-gradient(
    180deg,
    #ffd76a 0%,
    #ffae00 100%
    );

    color:#000;

    border-color:#ffb400;

    box-shadow:
    0 0 25px rgba(255,180,0,.35);

}

/* Créneau réservé */

.edid-slot.booked{

    background:
    linear-gradient(
    180deg,
    rgba(200,0,0,.25) 0%,
    rgba(120,0,0,.35) 100%
    );

    border-color:#cc0000;

    color:#fff;

    cursor:not-allowed;

    opacity:.85;

}

.edid-slot.booked:hover{

    transform:none;

}

/* Créneau bloqué */

.edid-slot.blocked{

    background:
    linear-gradient(
    180deg,
    rgba(80,80,80,.35) 0%,
    rgba(40,40,40,.55) 100%
    );

    border-color:#777;

    color:#ddd;

    cursor:not-allowed;

}

.edid-slot.blocked:hover{

    transform:none;

}

/* Libellé motif */

.edid-slot-reason{

    display:block;

    margin-top:6px;

    font-size:11px;

    font-weight:600;

    opacity:.8;

}

/* Disponible */

.edid-slot.available::before{

    content:"🟢";

    display:block;

    margin-bottom:4px;

}

/* Réservé */

.edid-slot.booked::before{

    content:"🔴";

    display:block;

    margin-bottom:4px;

}

/* Bloqué */

.edid-slot.blocked::before{

    content:"🔒";

    display:block;

    margin-bottom:4px;

}
@media(max-width:768px){

    .edid-cinematic-btn{

        white-space: nowrap;
        font-size:16px;
        letter-spacing:1px;
        padding:22px 12px;
        min-height:65px;

    }

    .edid-cinematic-form{

        padding:25px;

    }

    .edid-field input,
    .edid-field select{

        padding:16px;

    }

}
.edid-field select{

    background:#0b0b0f !important;
    color:#ffffff !important;

    border:1px solid rgba(255,180,0,0.25);

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

}

.edid-field select option{

    background:#0b0b0f;
    color:#ffffff;

}
.edid-studio-selector{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:12px;

}
@media(max-width:768px){

    .edid-studio-selector{

        grid-template-columns:1fr;

    }

}
.edid-studio-card{

    padding:18px;

    border-radius:18px;

    background:
    linear-gradient(
    180deg,
    rgba(255,180,0,0.08) 0%,
    rgba(255,180,0,0.03) 100%
    );

    border:1px solid rgba(255,180,0,0.25);

    color:#fff;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

.edid-studio-card:hover{

    transform:translateY(-2px);

    border-color:#ffb400;

}

.edid-studio-card.active{

    background:
    linear-gradient(
    180deg,
    #ffd76a 0%,
    #ffae00 100%
    );

    color:#000;

    border-color:#ffb400;

    box-shadow:
    0 0 20px rgba(255,180,0,.35);

}