/*--Général-------------------------------------------------------------------------------------*/

body {
    margin: 0;
    padding: 0;
    font-family: system-ui, -appe-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background: linear-gradient(180deg, rgb(240, 240, 240), rgb(230, 230, 230));
    min-height: 100vh;
}

a {
    text-decoration: none;
}

h1 {
    text-align: center;
    color: #2f4956;
}

.gras {
    font-weight: bold;
}

.validation {
    display: block;
    padding: 1em 2em;
    border: 1px solid green;
    color: green;
    background-color: #5fa559;
    margin: 1em auto;
    text-align: center;
}

.error {
    padding: 1em 0;
    display: block;
    width: 100%;
    border: 1px solid red;
    color: red;
    margin: 1em auto;
    background-color: #f8aaae;
    text-align: center;
}

/*--Menu----------------------------------------------------------------------------------------*/

.menu {
    display: flex;
    width: 100%;
    background-color: white;
    padding: 2em 1em 1em 1em;
    justify-items: center;
    justify-content: space-around;
}

.menu a {
    color: darkslategray;
    text-transform: uppercase;
    border-bottom: 1px solid white;
    margin: 0 3em;
    line-height: 50px;
    transition: all 200ms;
    transition: border 0;
}

.menu a:hover {
    margin: 0;
    padding: 0 3em;
    border-bottom: 1px solid darkslategray;
    letter-spacing: 0.3em;
}

.menu a > img {
    height: 30px;
    margin-right: 1em;
}

.menu > a:first-child > img {
    height: 50px;
    margin: 0;
}

/*--Header Home-------------------------------------------------------------------------------------*/

.header_index {
    background-image: url("../media/header-home.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: block;
    width: 100%;
    height: 80vh;
    min-height: 500px;
    position: relative;
}

.header_index>a {
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.2em;
    padding: 1.5em;
    margin: 0 auto;
    border: 2px solid white;
    color: white;
    letter-spacing: 0.1em;
    box-shadow: 0 0 50px rgb(0, 0, 0, 0.5);
    background-color: rgb(255, 255, 255, 0.1);
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 0);
    backdrop-filter: blur(0);
    transition: all 200ms;
}

.header_index>a:hover {
    letter-spacing: 0.4em;
    backdrop-filter: blur(5px);
    padding: 1.5em 5em;
}

/*----------------------------------------------------*/

article {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 1em;
    column-gap: 5em;
    width: 70vw;
    margin: 5em auto;
}

article>p {
    margin: 0;
    padding: 0;
    text-align: justify;
}

article>p:first-child,
article>p:last-child {
    grid-column: 1 / 3;
}

.btn_resa {
    display: block;
    text-decoration: none;
    width: fit-content;
    padding: 0.5em 1em;
    margin: 1em auto;
    color: white;
    background-color: #d8753c;
    border-radius: 5px;
    border: 0;
    transition: all 200ms;
}

.btn_resa:hover {
    background-color: rgb(240, 240, 240);
    color: #d8753c;
    border-left: 25px solid #d8753c;
    border-right: 25px solid #d8753c;
    transition: all 200ms;
}

/*--Formulaire de réservation-------------------------------------------------------------------------------------*/

.resa {
    width: 70vw;
    margin: 2em auto;
    padding: 4em;
    background-color: rgb(240, 240, 240);
    box-shadow: 0 0 30px rgb(0, 0, 0, 0.1);
    border-radius: 15px;
    text-align: center;
    display: grid;
    grid-template-columns: 2fr 1fr;
    column-gap: 4em;
    color: #2f4956;

    >h1 {
        text-transform: uppercase;
        font-size: 2em;
    }

    >div:first-child {
        height: 100%;
        width: 100%;
        background-image: url("../media/header-home.jpg");
        background-position: bottom right;
    }

    >div:last-child {
        >a {
            padding: 0.5em 1em;
            background-color: #42a994;
            border-radius: 5px;
            text-decoration: none;
            color: #2f4956;
        }

        a:hover {
            opacity: 0.7;
        }

        >form {
            display: grid;
            grid-template-columns: 1fr;

            >label {
                font-size: 0.8em;
                color: grey;
                text-align: left;
            }

            >input,
            >select,
            >textarea {
                padding: 1em;
                font-size: 1.05em;
                color: #2f4956;
                border-radius: 5px;
                border: 0;
                box-shadow: inset 0 0 100px rgb(0, 0, 0, 0.15);
                margin-bottom: 1em;
            }

            >input:hover,
            >select:hover,
            >textarea:hover {
                opacity: 0.7;
            }

            select>option {
                color: #2f4956;
            }

            >button {
                padding: 1em;
                text-transform: uppercase;
                background-color: #d8753c;
                transition: all 200ms;
                border-radius: 5px;
                letter-spacing: 0.1em;
                border: 0;
            }

            >button:hover {
                letter-spacing: 0.4em;
                background-color: #da8e62;
            }
        }
    }
}

/*--Home-------------------------------------------------------------------------------------*/

article {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 1em;
    column-gap: 5em;
    width: 70vw;
    margin: 5em auto;
}

article>p {
    margin: 0;
    padding: 0;
    text-align: justify;
}

article>p:first-child,
article>p:last-child {
    grid-column: 1 / 3;
}

/*--connexion / inscription-------------------------------------------------------------------------------------*/
.co {
    width: 50vw;
    margin: 2em auto;
    padding: 4em;
    background-color: rgb(240, 240, 240);
    box-shadow: 0 0 30px rgb(0, 0, 0, 0.1);
    border-radius: 15px;
    text-align: center;
    color: #2f4956;
    form {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 1em;
        
        >label {
            font-size: 0.8em;
            color: grey;
            text-align: left;
        }
        
        input {
            padding: 1em;
            font-size: 1.05em;
            color: #2f4956;
            border-radius: 5px;
            border: 0;
            box-shadow: inset 0 0 100px rgb(0, 0, 0, 0.15);
            overflow: hidden;
        }
        
        >input:hover {
            opacity: 0.7;
        }
        
        button {
            font-size: 1.05em;
            padding: 1em;
            background-color: #42a994;
            border-radius: 5px;
            color: #2f4956;
            border: 0;
        }
        
        button:hover {
            opacity: 0.5;
        }
    }
    
    form:last-child div {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 1em;
    }
}

/*--Mon Profil-------------------------------------------------------------------------------------*/

.profil {
    width: 70vw;
    margin: 2em auto;
    padding: 4em;
    background-color: rgb(240, 240, 240);
    box-shadow: 0 0 30px rgb(0, 0, 0, 0.1);
    border-radius: 15px;
    text-align: center;
    color: #2f4956;
    display: grid;
    grid-template-columns: 1fr 3fr;
    column-gap: 4em;

    h2 {
        text-transform: uppercase;
        font-weight: bold;
        margin: 0 0 1em 0;
        font-size: 1.2em;
    }

    >div:first-child {
        >h1 {
            text-transform: uppercase;
            margin: 0;
            padding: 0;
            line-height: 1.2em;
        }

        button,
        a {
            display: block;
            padding: 1em 0;
            font-size: 1em;
            text-transform: uppercase;
            background-color: #d8753c;
            transition: all 200ms;
            border-radius: 5px;
            letter-spacing: 0.1em;
            border: 0;
            margin: 0;
            width: 100%;
        }

        >a {
            background-color: #42a994;
            color: #2f4956;
            margin: 1em 0;
        }

        a:hover {
            opacity: 0.7;
        }

        >form>button:hover {
            letter-spacing: 0.4em;
            background-color: #da8e62;
        }
    }

    > div:nth-child(2) {

        > form {
            display: grid;
            grid-template-columns: 2fr 12fr 1fr;
            margin-bottom: 1em;

            >label {
                font-size: 0.8em;
                color: grey;
                text-align: left;
            }

            input {
                padding: 1em;
                font-size: 1.05em;
                color: #2f4956;
                border-radius: 5px;
                border: 0;
                box-shadow: inset 0 0 100px rgb(0, 0, 0, 0.15);
                overflow: hidden;
            }

            >input:hover {
                opacity: 0.7;
            }

            > button {
                margin-left: 1em;
            }

            > button {
                margin-left: 1em;
                background-color: #42a994;
                border-radius: 5px;
                color: #2f4956;
                border: 0;
            }

            > button:hover {
                opacity: 0.5;
            }
        }

        form:last-child div {
            display: grid;
            grid-template-columns: 1fr 1fr;
            column-gap: 1em;
        }
    }

    >div:last-child {
        grid-column: 1 / 3;
        margin-top: 1em;
        width: 100%;
        border-top: 1px solid rgb(200,200,200);
        padding-top: 1em;
        >div{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            column-gap: 3em;
            row-gap: 1em;

        }
    }
    .reservationp {
        margin: 0;
        padding: 0 2em;
        color: #2f4956;
        align-items: stretch;
        position: relative;
        padding: 0 0 40px 0;
        border-top: 3px dotted rgb(0, 0, 0, 0.2);

        
        >div:first-child {
            color: #2f4956;
            text-transform: uppercase;
            font-weight: bold;
            margin: 1em auto 0 auto;
        }
        
        >div:last-child {
            display: flex;
            justify-content: space-around;
            margin-top: 0.5em;
            position: absolute;
            width: 100%;
            bottom: 0;
        }
        
        > div:nth-child(4){
            color: red;
            line-height: 3em;
        }
        >div>.rond {
            width: 50px;
            height: 25px;
            background-color: white;
            border-radius: 50px 50px 0 0;
        }
        
        button {
            display: block ;
            width: auto ;
            padding: 0.5em 1em ;
            text-transform: uppercase ;
            background-color: #e0c1ae ;
            border: 1px solid #d8753c ;
            transition: all 200ms ;
            border-radius: 5px ;
            margin: 1em auto 0 auto ;
        }
        button:hover{
            background-color: #d8753c;
        }
        p {
            word-wrap: break-word;
            width: 80%;
            margin: 0 auto;
            padding: 0.5em;
            border-bottom: 2px dotted white;
            
            span {
                font-weight: bold;
                word-wrap: break-word;
            }
        }
    }
    .perim{
        background-color: #e0c1ae;
    }
    .pasperim{
        background-color: #b1dad1;
    }
}

/*--Apeçu de la reservation-------------------------------------------------------------------------------------*/

.reservation {
    width: fit-content;
    margin: 5em auto;
    padding: 2em 4em 0 4em;
    color: #462613;
    background-color: #d8753c;
    
    >h1 {
        color: #462613;
        text-transform: uppercase;
    }

    >div {
        display: flex;
        justify-content: space-between;
        margin-top: 3em;
    }

    >div>.rond {
        width: 50px;
        height: 25px;
        background-color: rgb(230, 230, 230);
        border-radius: 50px 50px 0 0;
    }

    >p {
        margin: 0;
        padding: 2em;
        border-bottom: 2px dotted #da8e62;

        span {
            font-weight: bold;
        }
    }
}

/*--Planning-------------------------------------------------------------------------------------*/

.btn_resa {
    display: block;
    text-decoration: none;
    width: fit-content;
    padding: 0.5em 1em;
    margin: 1em auto;
    color: white;
    background-color: #d8753c;
    border-radius: 5px;
    border: 0;
    transition: all 200ms;
}

.btn_resa:hover {
    background-color: rgb(240, 240, 240);
    color: #d8753c;
    border-left: 25px solid #d8753c;
    border-right: 25px solid #d8753c;
    transition: all 200ms;
}

.plan {
    display: grid;
    grid-template-columns: 0.5fr repeat(7, 1fr);
    width: 80vw;
    height: 60em;
    margin: 0 auto;
    border: 20px solid white;
    border-radius: 30px;
    overflow: hidden;
}

.planc {
    display: block;
    height: 5em;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.planc:nth-child(even) {
    opacity: 0.6;
}

.planjour {
    background-color: rgb(230, 230, 230);
}

.planheure {
    background-color: rgb(240, 240, 240);
    text-align: right;
    box-shadow: inset -1px 0 rgb(0, 0, 0, 0.5);
}

.planheure1 {
    height: 2.5em;
    background-color: rgb(240, 240, 240);
    text-align: right;
    box-shadow: inset -1px 0 rgb(0, 0, 0, 0.5);
    padding-right: 0.8em;
}

.plandate {
    background-color: white;
    box-shadow: inset -1px 0 rgb(0, 0, 0, 0.1);
}

.planresa {
    background-color: #42a994;
    box-shadow: inset 0 5px rgb(0, 0, 0, 0.2);
    text-align: center;
    transition: all 200ms;

    >h2 {
        font-size: 1em;
        font-weight: 400;
        margin: 0 auto;
        background-color: rgb(255, 255, 255, 0.5);
        width: fit-content;
        padding: 0.2em 0.5em;
        border-radius: 5px;

    }

    >span {
        font-size: 0.8em;
        font-style: italic;
        color: rgb(255, 255, 255, 0.5);
        border: 1px dashed rgb(255, 255, 255, 0.5);
        border-top: 0;
        width: fit-content;
        padding: 0 0.5em 0.2em 0.5em;
        border-radius: 0 0 5px 5px;
        margin: 0 auto;
    }
}

.planresa:hover {
    opacity: 50%;
}

.planc2 {
    background-color: #2f4956;
    height: 10em;
}

.planc3 {
    background-color: #d8753c;
    height: 15em;
}

.planc4 {
    background-color: #e93552;
    height: 20em;
}

.planc5 {
    background-color: #e93552;
    height: 25em;
}

.planc6 {
    background-color: #e93552;
    height: 30em;
}

.planc7 {
    background-color: #e93552;
    height: 35em;
}

.planc8 {
    background-color: #e93552;
    height: 40em;
}

.planc9 {
    background-color: #e93552;
    height: 45em;
}

.planc10 {
    background-color: #e93552;
    height: 50em;
}

.planc11 {
    background-color: #e93552;
    height: 55em;
}

.planc12 {
    background-color: #e93552;
    height: 60em;
}

.planvide {
    background-color: rgb(220, 220, 220);
    color: rgb(200, 200, 200);
}

.planweekend {
    background-color: rgb(240, 240, 240);
}

.linkplan {
    color: black;
}

.invisible {
    display: none;
}

/*--Footer-------------------------------------------------------------------------------------*/
 footer {
    background-color: #2f4956;
    color: white;
    padding: 2em 10em;
    text-align: right;
    margin-top: 5em;
 }