/*==================================================
                    RESET
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#f5f7fa;
    color:#333;
    overflow-x:hidden;
}

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

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:95px;

    background:rgba(255,255,255,.95);

    backdrop-filter:blur(10px);

    display:grid;

    grid-template-columns:180px 1fr 300px;

    align-items:center;

    padding:0 40px;

    box-shadow:0 3px 15px rgba(0,0,0,.08);

    z-index:1000;

}

/*==================================================
                    LOGO
==================================================*/

.logo{

    display:flex;

    align-items:center;

}

.logo img{

    width:85px;

    height:auto;

    object-fit:contain;

}

/*==================================================
                    NAVBAR
==================================================*/

.navbar{

    display:flex;

    justify-content:center;

    align-items:center;

}

.navbar > ul{

    display:flex;

    align-items:center;

    gap:35px;

    list-style:none;

    margin:0;

    padding:0;

}

.navbar > ul > li{

    position:relative;

}

.navbar a{

    text-decoration:none;

    color:#052F59;

    font-size:16px;

    font-weight:600;

    white-space:nowrap;

    transition:.3s;

    position:relative;

}

.navbar a:hover{

    color:#F59F27;

}

.navbar a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:3px;

    background:#F59F27;

    transition:.3s;

}

.navbar a:hover::after,
.navbar a.active::after{

    width:100%;

}

/*==================================================
                MENU DÉROULANT
==================================================*/

.dropdown-menu{

    position:absolute;

    top:100%;

    left:0;

    min-width:260px;

    background:#fff;

    border-radius:10px;

    box-shadow:0 10px 25px rgba(0,0,0,.12);

    display:none;

    padding:10px 0;

    z-index:1000;

}

.dropdown:hover .dropdown-menu{

    display:block;

}

.dropdown-menu li{

    list-style:none;

    width:100%;

}

.dropdown-menu a{

    display:block;

    width:100%;

    padding:12px 18px;

    color:#052F59;

    text-decoration:none;

}

.dropdown-menu a::after{

    display:none;

}

.dropdown-menu a:hover{

    background:#F59F27;

    color:#fff;

}

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

.buttons{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:15px;

}

.buttons a{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    text-decoration:none;

    padding:12px 18px;

    border-radius:10px;

    transition:.3s;

    font-weight:600;

}

.buttons i{

    font-size:16px;

}

.login{

    border:2px solid #052F59;

    color:#052F59;

    background:#fff;

}

.login:hover{

    background:#052F59;

    color:#fff;

}

.register{

    background:#F59F27;

    color:#fff;

}

.register:hover{

    background:#d98612;

}
/*==================================================
                IMAGE DE FOND
==================================================*/

.background{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100vh;

    background:url("../images/chef.jpg") center center/cover no-repeat;

    transform:scale(1.08);

    filter:blur(5px);

    z-index:-2;

}

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

.overlay{

    width:100%;

    min-height:100vh;

    background:rgba(0,0,0,.45);

    padding:140px 25px 60px;

}

/*==================================================
                CONTENEUR
==================================================*/

.form-container{

    max-width:1200px;

    margin:0 auto;

    background:#ffffff;

    border-radius:20px;

    padding:50px;

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

    animation:fadeUp .8s ease;

}

/*==================================================
                TITRE
==================================================*/

.form-container h1{

    text-align:center;

    color:#052F59;

    font-size:42px;

    font-weight:700;

    margin-bottom:15px;

}

.form-container h1::after{

    content:"";

    display:block;

    width:90px;

    height:4px;

    background:#F59F27;

    margin:15px auto 0;

    border-radius:20px;

}

/*==================================================
                MESSAGE D'INFORMATION
==================================================*/

.alert{

    display:flex;

    align-items:center;

    gap:15px;

    margin:35px 0;

    padding:18px 22px;

    background:#EAF6FF;

    color:#0C4A6E;

    border-left:6px solid #0EA5E9;

    border-radius:10px;

    font-size:16px;

    line-height:1.7;

}

.alert i{

    font-size:24px;

    color:#0EA5E9;

}

/*==================================================
                FIELDSET
==================================================*/

fieldset{

    position:relative;

    overflow:hidden;

    border:2px solid #E5E7EB;

    border-radius:15px;

    padding:35px;

    margin-bottom:35px;

    background:#fff;

    transition:.35s;

}

fieldset:hover{

    border-color:#F59F27;

    box-shadow:0 10px 25px rgba(245,159,39,.12);

}

fieldset::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:6px;

    height:0;

    background:#F59F27;

    transition:.4s;

}

fieldset:hover::before{

    height:100%;

}

/*==================================================
                LEGEND
==================================================*/

legend{

    display:flex;

    align-items:center;

    gap:10px;

    padding:0 15px;

    color:#052F59;

    font-size:24px;

    font-weight:700;

}

legend i{

    color:#F59F27;

}

/*==================================================
                PHOTO
==================================================*/

.civil-grid{

    display:grid;

    grid-template-columns:250px 1fr;

    gap:40px;

    align-items:flex-start;

}

.photo-box{

    text-align:center;

}

.photo-box img{

    width:180px;

    height:180px;

    object-fit:cover;

    border-radius:15px;

    border:3px solid #F59F27;

    margin:0 auto 20px;

    box-shadow:0 10px 25px rgba(0,0,0,.12);

}

/*==================================================
                BOUTON PHOTO
==================================================*/

.upload{

    display:inline-block;

    background:#052F59;

    color:#fff;

    padding:12px 18px;

    border-radius:8px;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    transition:.35s;

}

.upload:hover{

    background:#F59F27;

}

.upload input{

    display:none;

}

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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

.civil-form{

    display:grid;

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

    gap:25px;

}

.form-row{

    display:grid;

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

    gap:25px;

    margin-top:20px;

}

/*==================================================
                GROUPE DE CHAMPS
==================================================*/

.form-group{

    display:flex;

    flex-direction:column;

    margin-bottom:20px;

}

.form-group label{

    font-size:15px;

    font-weight:600;

    color:#052F59;

    margin-bottom:10px;

}

.form-group label span{

    color:#dc2626;

}

/*==================================================
                INPUT
==================================================*/

.form-group input{

    width:100%;

    height:52px;

    padding:0 18px;

    border:1px solid #D1D5DB;

    border-radius:10px;

    outline:none;

    background:#fff;

    font-size:15px;

    font-family:inherit;

    transition:.35s;

}

/*==================================================
                SELECT
==================================================*/

.form-group select{

    width:100%;

    height:52px;

    padding:0 18px;

    border:1px solid #D1D5DB;

    border-radius:10px;

    outline:none;

    background:#fff;

    cursor:pointer;

    font-size:15px;

    font-family:inherit;

    transition:.35s;

}

/*==================================================
                TEXTAREA
==================================================*/

.form-group textarea{

    width:100%;

    min-height:170px;

    padding:18px;

    border:1px solid #D1D5DB;

    border-radius:10px;

    resize:vertical;

    outline:none;

    font-size:15px;

    font-family:inherit;

    line-height:1.7;

    transition:.35s;

}

/*==================================================
                INPUT FILE
==================================================*/

.form-group input[type="file"]{

    height:auto;

    padding:14px;

    border:2px dashed #CBD5E1;

    background:#F8FAFC;

    cursor:pointer;

    border-radius:10px;

}

/*==================================================
                FOCUS
==================================================*/

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{

    border-color:#F59F27;

    box-shadow:0 0 0 4px rgba(245,159,39,.18);

}

/*==================================================
                HOVER
==================================================*/

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover{

    border-color:#F59F27;

}

/*==================================================
                PLACEHOLDER
==================================================*/

::placeholder{

    color:#94A3B8;

}

/*==================================================
                CHECKBOX
==================================================*/

.checkbox-group{

    display:flex;

    align-items:flex-start;

    gap:15px;

    margin-top:20px;

}

.checkbox-group input{

    width:20px;

    height:20px;

    margin-top:4px;

    accent-color:#F59F27;

}

.checkbox-group label{

    color:#555;

    font-size:15px;

    line-height:1.8;

}

/*==================================================
                IMAGES
==================================================*/

img{

    max-width:100%;

    display:block;

}

/*==================================================
                BOUTONS
==================================================*/

button{

    font-family:inherit;

}

/*==================================================
                BOUTONS DU FORMULAIRE
==================================================*/

.form-buttons{

    margin-top:40px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}

.btn-submit,
.btn-reset{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-width:220px;

    padding:16px 35px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    font-size:16px;

    font-weight:600;

    transition:.35s ease;

}

.btn-submit{

    background:#F59F27;

    color:#fff;

}

.btn-submit:hover{

    background:#052F59;

    color:#fff;

    transform:translateY(-4px);

    box-shadow:0 10px 25px rgba(5,47,89,.25);

}

.btn-reset{

    background:#E5E7EB;

    color:#374151;

}

.btn-reset:hover{

    background:#D1D5DB;

    transform:translateY(-4px);

}

.btn-submit i,
.btn-reset i{

    font-size:17px;

}

/*==================================================
                SCROLLBAR
==================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#F3F4F6;

}

::-webkit-scrollbar-thumb{

    background:#F59F27;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#d98410;

}

/*==================================================
                LIENS
==================================================*/

a{

    text-decoration:none;

}

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

@media (max-width:992px){

    .header{

        grid-template-columns:1fr;

        height:auto;

        padding:20px;

        gap:20px;

    }

    .navbar{

        display:none;

    }

    .buttons{

        justify-content:center;

    }

    .civil-grid{

        grid-template-columns:1fr;

    }

    .civil-form{

        grid-template-columns:1fr;

    }

    .form-row{

        grid-template-columns:1fr;

    }

}

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

@media (max-width:768px){

    .overlay{

        padding:120px 15px 40px;

    }

    .form-container{

        padding:25px;

        border-radius:15px;

    }

    .form-container h1{

        font-size:30px;

    }

    legend{

        font-size:20px;

    }

    .photo-box img{

        width:150px;

        height:150px;

    }

    .form-buttons{

        flex-direction:column;

        width:100%;

    }

    .btn-submit,
    .btn-reset{

        width:100%;

    }

}

/*==================================================
            PETITS SMARTPHONES
==================================================*/

@media (max-width:480px){

    .header{

        padding:15px;

    }

    .logo img{

        width:70px;

    }

    .form-container{

        padding:18px;

    }

    .form-container h1{

        font-size:24px;

    }

    .alert{

        font-size:14px;

    }

    legend{

        font-size:18px;

    }

    .form-group label{

        font-size:14px;

    }

    .form-group input,
    .form-group select,
    .form-group textarea{

        font-size:14px;

    }

}