@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap');

@font-face {
    font-family: 'Modular';
    src: url('../fonts/Modular.woff2') format('woff2'),
         url('../fonts/Modular.woff') format('woff'),
         url('../fonts/Modular.ttf') format('truetype'),
         url('../fonts/Modular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

*{

margin:0;
padding:0;
box-sizing:border-box;

}


body{

font-family:Poppins,sans-serif;

background:#4C055D;

color:white;

}

h1, h2, h3 {

font-family:'Modular', sans-serif;

}


html{

scroll-behavior:smooth;

}



/* NAV */

header{

position:fixed;

width:100%;

top:0;

z-index:100;

background:#300238;

backdrop-filter:blur(10px);


}


nav{

display:flex;

justify-content:space-between;

align-items:center;

padding:25px 8%;

}






nav ul{

display:flex;

gap:35px;

list-style:none;

}


.logo img{

height:80px;

width:auto;

border-radius:50%;
}

nav a{

color:white;

text-decoration:none;

}




/* BOUTONS */


.btn{

background:#EF36F4;

color:white;

border:none;

padding:14px 30px;

border-radius:30px;

font-weight:bold;

cursor:pointer;

box-shadow:
0 0 15px #EF36F4;

text-decoration:none;

transition:.3s;

}


.btn:hover{

transform:translateY(-5px);

box-shadow:
0 0 30px #EF36F4;

}




/* HERO */


.hero{

height:80vh;

display:flex;

align-items:center;

padding:0% 0% 0% 15%;

background-image: url("../image/video_hero.gif");

background-size:cover;

background-position:center;

margin-top:110px;
}



.hero h1{

font-size:4em;

}


.hero span{
padding-left:20px;
color:#4C055D;
}


.hero p{

margin:30px 0;

max-width:500px;

font-size:20px;

}


.hero .btn:hover{
    background-color:#4C055D;
    box-shadow: 0 0 30px #ffffff;
}


/* SECTIONS */


section{

padding:100px 10%;

}



h2{

text-align:center;

font-size:45px;

margin-bottom:40px;

}




.intro{

text-align:center;

max-width:700px;

margin:auto;

}





/* CARDS */


.cards{

display:flex;

gap:30px;

margin-top:60px;

}



.card{

flex:1;

background:#5E1670;

box-shadow:
2px 5px 0px #EF36F4;

padding:40px;

border-radius:20px;

transition:.3s;

}


.card:hover{

transform:translateY(-10px);

box-shadow:
2px 5px 25px #EF36F4;

}




/* RESERVATION */


.booking-box{

max-width:500px;

margin:auto;

background:#5E1670;

padding:40px;

border-radius:25px;

display:flex;

flex-direction:column;

gap:15px;

}



input,select{

padding:15px;

border-radius:10px;

border:none;

}


/* CALENDRIER */


.calendar-box{

max-width:900px;

margin:auto;

background:#5E1670;

padding:40px;

border-radius:30px;

}



.calendar-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;

}



.calendar-header button{


background:#EF36F4;

color:white;

border:none;

font-size:25px;

width:45px;

height:45px;

border-radius:50%;

cursor:pointer;


}



.days{

display:grid;

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

text-align:center;

margin-bottom:15px;

color:#EF36F4;

font-weight:bold;

}



#calendarDays{


display:grid;

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

gap:10px;

}



.day{


height:50px;

display:flex;

align-items:center;

justify-content:center;

background:#4C055D;

border-radius:10px;

cursor:pointer;

transition:.3s;

}



.day:hover{


background:#EF36F4;

transform:translateY(-3px);

}

.day.active{

background:#EF36F4;

color:white;

box-shadow:
0 0 20px #EF36F4;

transform:translateY(-3px);

}

.day.disabled{


opacity:.3;

cursor:not-allowed;

}



.slots{


margin-top:40px;

display:grid;

grid-template-columns:minmax(250px,1fr) repeat(4,minmax(85px,110px));

gap:15px;

align-items:center;

}

.slots h3{

grid-row:1 / span 2;

margin:0;

}

.slots > p{

grid-column:2 / -1;

}


.slot{


background:#4C055D;

padding:15px 25px;

border-radius:30px;

cursor:pointer;

text-align:center;

}



.slot:hover{


background:#EF36F4;

}



.slot.full{


display:none;

}

/* GALERIE */


.gallery{
	display:flex;
	gap:20px;
	justify-content:center;
	align-items:center;
}

.gallery img{
	height:250px;
	width:100%;
	object-fit:contain;
	border-radius:20px;
	display:block;
}

.gallery div{
	height:250px;
	flex:1;
	background:#5E1670;
	border-radius:20px;
	overflow:hidden;
	display:flex;
	align-items:center;
	justify-content:center;
    padding: 10px;
}

/* CONTACT */


.contact-container{

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

align-items:start;

}




/* FORMULAIRE */


.contact-form{


background:#5E1670;

padding:40px;

border-radius:25px;

display:flex;

flex-direction:column;

gap:15px;

}




.contact-form input,
.contact-form textarea{


padding:15px;

border:none;

border-radius:10px;

font-family:Poppins,sans-serif;

}




.contact-form textarea{

height:160px;

resize:none;

}



.contact-item{
    display:flex;
    align-items:center;
    gap:12px;
    margin:12px 0;
    line-height:1.6;
}


.contact-icon{
    font-size:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:20px;
}

.contact-info a{
    color:white;
    text-decoration:none;
}


/* COLONNE DROITE */


.contact-right{

	display:flex;

	flex-direction:column;
	justify-content:space-between;
	gap:20px;
	height:100%;

}




.contact-info{


background:#5E1670;

padding:35px;

border-radius:25px;


}



.contact-info h3{


color:#EF36F4;

margin-bottom:25px;


}







/* GOOGLE MAP */


.map{


height:350px;

border-radius:25px;

overflow:hidden;


}



.map iframe{


width:100%;

height:100%;

border:0;


}





@media(max-width:900px){


.slots{

grid-template-columns:repeat(4,minmax(70px,1fr));

}


.slots h3,
.slots > p{

grid-column:1 / -1;

grid-row:auto;

}


.contact-container{


grid-template-columns:1fr;


}


}




footer{

text-align:center;

padding:30px;

background:#300238;

box-shadow: 0 0 55px #EF36F4;

}

/* RESEAUX SOCIAUX */

.social-links {

    display: flex;

    justify-content: center;

    gap: 20px;

    margin-bottom: 25px;

}


.social-links a {

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #5E1670;

    color: white;

    font-size: 22px;

    text-decoration: none;

    transition: 0.3s;

}


.social-links a:hover {

    background: #EF36F4;

    color: white;

    transform: translateY(-5px);

    box-shadow: 0 0 20px #EF36F4;

}


/* RESPONSIVE */


@media(max-width:800px){


.cards,
.gallery{

flex-direction:column;

}


.hero h1{

font-size:45px;

}


nav ul{

display:none;

}


}


@media(max-width:500px){


.slots{

grid-template-columns:repeat(2,minmax(90px,1fr));

}


/* CONNEXION */

.auth-body,
.profile-body {
    --ink: #15051b;
    --purple-950: #22022c;
    --purple-900: #300238;
    --purple-800: #4c055d;
    --purple-700: #68197a;
    --pink: #ef36f4;
    --pink-soft: #fa8cff;
    --white: #ffffff;
    --muted: #cdbed2;
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 5%, rgba(239, 54, 244, .18), transparent 26rem),
        linear-gradient(145deg, var(--purple-950), var(--purple-800));
}

.auth-body {
    display: grid;
    place-items: center;
}

.auth-page {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 48px clamp(24px, 6vw, 88px);
    display: grid;
    place-items: center;
}

.auth-home {
    position: absolute;
    top: 34px;
    left: clamp(24px, 6vw, 88px);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--white);
    font-family: 'Modular', sans-serif;
    font-size: 1.2rem;
    letter-spacing: .02em;
    text-decoration: none;
}

.auth-home img,
.profile-brand img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .08);
}

.auth-shell {
    width: min(100%, 1040px);
    min-height: 590px;
    padding: 0;
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 32px;
    background: rgba(255, 255, 255, .07);
    box-shadow: 0 30px 80px rgba(15, 0, 20, .34);
    backdrop-filter: blur(18px);
}

.auth-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 590px;
    padding: 52px;
    overflow: hidden;
    background:
        linear-gradient(160deg, rgba(239, 54, 244, .92), rgba(96, 6, 120, .88)),
        url('../image/piste-futuriste.png') center / cover;
}

.auth-visual::before {
    content: '';
    position: absolute;
    inset: 10% 9%;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 50% 50% 18% 18%;
    transform: perspective(360px) rotateX(58deg);
}

.auth-kicker,
.auth-eyebrow,
.profile-eyebrow,
.profile-card__label {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.auth-kicker {
    position: relative;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, .75);
}

.auth-visual > p {
    position: relative;
    max-width: 310px;
    font-family: 'Modular', sans-serif;
    font-size: clamp(2.1rem, 4vw, 3.4rem);
    line-height: .98;
}

.auth-court-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.auth-court-lines span {
    position: absolute;
    top: 16%;
    right: -20%;
    width: 78%;
    height: 1px;
    background: rgba(255, 255, 255, .25);
    transform: rotate(-42deg);
}

.auth-court-lines span:nth-child(2) {
    top: 30%;
    right: -26%;
}

.auth-court-lines span:nth-child(3) {
    top: 44%;
    right: -32%;
}

.auth-box {
    align-self: center;
    padding: clamp(42px, 6vw, 78px);
}

.auth-eyebrow {
    margin-bottom: 12px;
    color: var(--pink-soft);
}

.auth-box h1 {
    font-size: clamp(2.7rem, 5vw, 4.4rem);
    line-height: 1;
}

.auth-intro {
    margin-top: 14px;
    color: var(--muted);
    line-height: 1.65;
}

.auth-box .error {
    margin-top: 20px;
    padding: 13px 16px;
    border: 1px solid rgba(255, 137, 170, .38);
    border-radius: 12px;
    background: rgba(134, 10, 51, .28);
    color: #ffd6e1;
    font-size: .9rem;
}

.auth-box form {
    margin-top: 32px;
    display: grid;
    gap: 20px;
}

.field-group {
    display: grid;
    gap: 8px;
}

.field-group label {
    font-size: .88rem;
    font-weight: 700;
}

.field-group input {
    width: 100%;
    min-height: 54px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 14px;
    outline: none;
    background: rgba(255, 255, 255, .09);
    color: var(--white);
    font: inherit;
    transition: border-color .2s, box-shadow .2s, background .2s;
}

.field-group input::placeholder {
    color: #a895ae;
}

.field-group input:focus {
    border-color: var(--pink-soft);
    background: rgba(255, 255, 255, .12);
    box-shadow: 0 0 0 4px rgba(239, 54, 244, .14);
}

.auth-box .btn {
    width: 100%;
    min-height: 54px;
    margin-top: 4px;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(239, 54, 244, .24);
}

.auth-box .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(239, 54, 244, .36);
}

.auth-switch {
    margin-top: 28px;
    color: var(--muted);
    text-align: center;
    font-size: .9rem;
}

.auth-switch a {
    color: var(--white);
    font-weight: 700;
    text-decoration-color: var(--pink);
    text-underline-offset: 4px;
}


/* PROFIL */

.profile-body {
    background:
        radial-gradient(circle at 90% 0, rgba(239, 54, 244, .13), transparent 32rem),
        #22022c;
}

.profile-page {
    width: min(100% - 40px, 1240px);
    margin: 0 auto;
    padding: 30px 0 54px;
}

.profile-page section {
    padding: 0;
}

.profile-nav,
.profile-brand,
.profile-heading,
.reservations-heading,
.profile-footer {
    display: flex;
    align-items: center;
}

.profile-nav {
    justify-content: space-between;
    padding-bottom: 48px;
}

.profile-brand {
    gap: 12px;
    color: var(--white);
    font-family: 'Modular', sans-serif;
    font-size: 1.2rem;
    text-decoration: none;
}

.profile-back {
    color: var(--muted);
    font-size: .9rem;
    text-underline-offset: 5px;
}

.profile-heading {
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 32px;
}

.profile-eyebrow {
    margin-bottom: 8px;
    color: var(--pink-soft);
}

.profile-heading h1 {
    font-size: clamp(3rem, 6vw, 5.4rem);
    line-height: .92;
}

.profile-heading h1 + p {
    margin-top: 14px;
    color: var(--muted);
}

.profile-heading .btn {
    flex: 0 0 auto;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(239, 54, 244, .2);
}

.profile-notice {
    margin-bottom: 24px;
    padding: 14px 18px;
    border-radius: 14px;
    font-size: .92rem;
}

.profile-notice--success {
    border: 1px solid rgba(91, 229, 174, .35);
    background: rgba(13, 107, 72, .22);
    color: #b8f7dc;
}

.profile-notice--error {
    border: 1px solid rgba(255, 137, 170, .38);
    background: rgba(134, 10, 51, .28);
    color: #ffd6e1;
}

.profile-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 26px;
    padding: 32px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 24px;
    background: linear-gradient(115deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .05));
    box-shadow: 0 20px 60px rgba(10, 0, 15, .18);
}

.profile-card::after {
    content: '';
    position: absolute;
    right: -65px;
    bottom: -105px;
    width: 240px;
    height: 240px;
    border: 38px solid rgba(239, 54, 244, .09);
    border-radius: 50%;
}

.profile-avatar {
    position: relative;
    z-index: 1;
    width: 86px;
    height: 86px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 22px;
    background: linear-gradient(145deg, var(--pink), var(--purple-700));
    font-family: 'Modular', sans-serif;
    font-size: 2.6rem;
    box-shadow: 0 14px 32px rgba(239, 54, 244, .2);
}

.profile-card__content {
    position: relative;
    z-index: 1;
}

.profile-card__label {
    color: var(--pink-soft);
}

.profile-card h2 {
    margin: 8px 0 20px;
    font-family: Poppins, sans-serif;
    font-size: 1.45rem;
    text-align: left;
}

.profile-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.profile-details div,
.reservation-card__payment {
    display: grid;
    gap: 5px;
}

.profile-details span,
.reservation-card__payment span {
    color: var(--muted);
    font-size: .76rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.profile-details strong {
    overflow-wrap: anywhere;
    font-size: .95rem;
}

.reservations-section {
    margin-top: 64px;
}

.reservations-heading {
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.reservations-heading h2 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.25rem);
    text-align: left;
}

.reservation-count {
    padding: 8px 13px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    color: var(--muted);
    font-size: .8rem;
}

.reservation-list {
    display: grid;
    gap: 12px;
}

.reservation-card {
    display: grid;
    grid-template-columns: 150px minmax(240px, 1fr) 130px auto;
    gap: 26px;
    align-items: center;
    min-height: 134px;
    padding: 24px 26px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 20px;
    background: rgba(255, 255, 255, .055);
    transition: border-color .2s, background .2s, transform .2s;
}

.reservation-card:hover {
    transform: translateY(-2px);
    border-color: rgba(239, 54, 244, .34);
    background: rgba(255, 255, 255, .075);
}

.reservation-card__date {
    display: grid;
    gap: 5px;
}

.reservation-card__date span,
.reservation-card__main p {
    color: var(--muted);
    font-size: .8rem;
}

.reservation-card__date strong {
    font-size: 1.08rem;
}

.reservation-card__main h3 {
    margin: 9px 0 4px;
    font-family: Poppins, sans-serif;
    font-size: 1.05rem;
}

.reservation-card__main p {
    overflow-wrap: anywhere;
}

.status-pill {
    display: inline-flex;
    width: fit-content;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: #e8dfe9;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.status-pill--confirmee {
    background: rgba(58, 210, 151, .14);
    color: #8df0c8;
}

.status-pill--en_attente {
    background: rgba(255, 194, 84, .14);
    color: #ffd585;
}

.status-pill--annulee,
.status-pill--expiree {
    background: rgba(255, 255, 255, .08);
    color: #bbaebf;
}

.reservation-card__payment strong {
    font-size: .87rem;
    text-transform: capitalize;
}

.reservation-card__actions {
    display: grid;
    justify-items: end;
    gap: 10px;
}

.detail-link,
.reservation-cancel,
.logout-button {
    color: var(--white);
    font: inherit;
    font-size: .84rem;
    font-weight: 700;
}

.detail-link {
    text-decoration: none;
}

.detail-link span {
    display: inline-block;
    margin-left: 4px;
    color: var(--pink-soft);
    transition: transform .2s;
}

.detail-link:hover span {
    transform: translateX(4px);
}

.reservation-cancel,
.logout-button {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .35);
    text-underline-offset: 4px;
}

.reservation-cancel {
    color: #d7cad9;
    font-size: .76rem;
}

.reservation-empty {
    padding: 52px 24px;
    border: 1px dashed rgba(255, 255, 255, .18);
    border-radius: 20px;
    text-align: center;
}

.reservation-empty > span {
    width: 46px;
    height: 46px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(239, 54, 244, .13);
    color: var(--pink-soft);
    font-size: 1.35rem;
}

.reservation-empty h3 {
    font-family: Poppins, sans-serif;
    font-size: 1.15rem;
}

.reservation-empty p {
    margin: 7px 0 18px;
    color: var(--muted);
    font-size: .9rem;
}

.profile-footer {
    justify-content: flex-end;
    gap: 12px;
    margin-top: 46px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: var(--muted);
    font-size: .84rem;
}

.logout-button {
    color: var(--white);
}

.auth-home:focus-visible,
.profile-page a:focus-visible,
.profile-page button:focus-visible,
.auth-box button:focus-visible {
    outline: 3px solid var(--pink-soft);
    outline-offset: 4px;
}

@media (max-width: 900px) {
    .auth-shell {
        grid-template-columns: 1fr;
        max-width: 640px;
        min-height: auto;
    }

    .auth-visual {
        min-height: 220px;
        padding: 34px;
    }

    .auth-visual > p {
        max-width: 390px;
        font-size: 2.45rem;
    }

    .auth-visual::before {
        inset: -60% 20% 30%;
    }

    .reservation-card {
        grid-template-columns: 130px minmax(210px, 1fr) auto;
    }

    .reservation-card__payment {
        display: none;
    }
}

@media (max-width: 650px) {
    .auth-page {
        display: block;
        padding: 94px 16px 24px;
    }

    .auth-home {
        top: 24px;
        left: 20px;
    }

    .auth-shell {
        border-radius: 24px;
    }

    .auth-visual {
        min-height: 170px;
        padding: 26px;
    }

    .auth-kicker {
        margin-bottom: 8px;
    }

    .auth-visual > p {
        font-size: 2rem;
    }

    .auth-box {
        padding: 34px 24px;
    }

    .profile-page {
        width: min(100% - 28px, 1240px);
        padding-top: 22px;
    }

    .profile-nav {
        padding-bottom: 38px;
    }

    .profile-back {
        font-size: 0;
    }

    .profile-back::after {
        content: 'Accueil';
        font-size: .85rem;
    }

    .profile-heading {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 26px;
    }

    .profile-heading .btn {
        width: 100%;
        text-align: center;
    }

    .profile-card {
        grid-template-columns: 1fr;
        padding: 24px;
    }

    .profile-avatar {
        width: 68px;
        height: 68px;
        border-radius: 18px;
        font-size: 2rem;
    }

    .profile-details {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .reservations-section {
        margin-top: 48px;
    }

    .reservations-heading {
        align-items: flex-end;
    }

    .reservation-count {
        white-space: nowrap;
    }

    .reservation-card {
        grid-template-columns: 1fr auto;
        gap: 20px 16px;
        padding: 22px;
    }

    .reservation-card__date {
        grid-column: 1 / -1;
        grid-template-columns: 1fr auto;
        align-items: center;
        padding-bottom: 15px;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .reservation-card__actions {
        align-self: end;
    }

    .profile-footer {
        justify-content: space-between;
    }
}

@media (max-width: 420px) {
    .reservations-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .reservation-card {
        grid-template-columns: 1fr;
    }

    .reservation-card__date,
    .reservation-card__actions {
        grid-column: 1;
    }

    .reservation-card__actions {
        justify-items: start;
    }
}


}