/* =====================================================
        UMSE - STYLE.CSS
        RESET + HEADER + NAVBAR
===================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial,Helvetica,sans-serif;
}

body{
    background:#e5e5e5;
}

/*==========================
CONTAINER RESPONSIVE UMSE
==========================*/

.page-container{

    width:100%;

    max-width:1500px;

    margin:auto;

    background:#fff;

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

    overflow:hidden;

}

/*==========================
SOCIAL
==========================*/

.social-top{
    background:#f7f7f7;
    padding:12px 20px;
    text-align:right;
    border-bottom:1px solid #ddd;
}

.social-top a{

    display:inline-block;

    width:38px;
    height:38px;
    line-height:38px;

    margin-left:8px;

    text-align:center;

    color:#fff;

    border-radius:50%;

    background:#0b5fa5;

    transition:.35s;

}

.social-top a:hover{

    background:#ffd700;

    color:#003366;

    transform:translateY(-3px);

}

/*==========================
TOP BAR
==========================*/

.top-bar{

    background:#00264d;

    color:#fff;

    padding:8px 15px;

    font-size:14px;

    font-weight:bold;

}

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

.header{

    background:linear-gradient(135deg,#003366,#0b5fa5,#1179c8);

    box-shadow:0 8px 25px rgba(0,0,0,.20);

}

.header-top{

    width:96%;

    margin:auto;

    min-height:95px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

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

.logo-zone{

    display:flex;

    align-items:center;

}

.logo-zone img{

    width:80px;

    height:80px;

    border-radius:50%;

    border:4px solid white;

    background:#fff;

    transition:.5s;

}

.logo-zone img:hover{

    transform:rotate(360deg);

}

.logo-text{

    margin-left:18px;

}

.logo-text h1{

    color:#FFD700;

    font-size:34px;

    margin:0;

    text-shadow:2px 2px 5px rgba(0,0,0,.35);

}

.logo-text span{

    color:#fff;

    font-size:14px;

    display:block;

    margin-top:5px;

    font-weight:bold;

}
/* =====================================================
        PARTIE 2
        NAVBAR PREMIUM UMSE
        MENU + SOUS-MENUS
=====================================================*/


/*==========================
NAVIGATION PRINCIPALE
==========================*/

.navbar{

    display:flex;

    align-items:center;

}


.menu{

    display:flex;

    align-items:center;

    gap:10px;

    list-style:none;

    margin:0;

    padding:0;

}


.menu > li{

    position:relative;

}


/*==========================
BOUTONS DU MENU
==========================*/


.menu > li > a{

    display:flex;

    align-items:center;

    gap:6px;

    padding:12px 16px;

    color:white;

    text-decoration:none;

    font-size:14px;

    font-weight:bold;

    border-radius:30px;

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

    border:1px solid rgba(255,255,255,.20);

    transition:.35s;

    white-space:nowrap;

}


.menu > li > a i{

    font-size:15px;

}


/* Effet passage souris */

.menu > li > a:hover{

    background:#FFD700;

    color:#003366;

    transform:translateY(-4px);

    box-shadow:0 8px 20px rgba(0,0,0,.25);

}


/* Petite ligne dorée */

.menu > li > a::after{

    content:"";

    width:0;

    height:3px;

    background:#FFD700;

    display:block;

    margin:5px auto 0;

    border-radius:5px;

    transition:.3s;

}


.menu > li > a:hover::after{

    width:80%;

}


/*==========================
SOUS MENU
FACULTÉS / CONTACTS
==========================*/


.submenu{

    position:absolute;

    top:55px;

    left:0;


    width:330px;


    background:white;


    border-radius:12px;


    padding:10px 0;


    list-style:none;


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


    opacity:0;


    visibility:hidden;


    transform:translateY(20px);


    transition:.35s;


    z-index:99999;

}



/* apparition */

.dropdown:hover .submenu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}



/* éléments sous menu */

.submenu li{

    width:100%;

}



.submenu li a{

    display:block;

    padding:13px 20px;


    text-decoration:none;


    color:#003366;


    font-size:14px;


    font-weight:600;


    transition:.3s;


    border-left:4px solid transparent;

}



.submenu li a:hover{


    background:#f0f7ff;


    color:#0b5fa5;


    border-left:4px solid #FFD700;


    padding-left:30px;


}



/*==========================
FLÈCHE MENU
==========================*/


.dropdown > a .fa-chevron-down{


    font-size:11px;

    transition:.3s;

}



.dropdown:hover > a .fa-chevron-down{


    transform:rotate(180deg);


}



/*==========================
SLOGAN SOUS HEADER
==========================*/


.slogan{


    background:#00264d;


    color:white;


    text-align:center;


    padding:12px;


    font-size:14px;


    font-weight:bold;


    letter-spacing:3px;


    border-top:1px solid rgba(255,255,255,.2);


}
/* =====================================================
        PARTIE 3
        SLIDER / CARROUSEL UMSE
=====================================================*/


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

.slider{

    position:relative;

    width:100%;

    height:500px;

    overflow:hidden;

}


/*==========================
ZONE DES IMAGES
==========================*/

.slides{

    position:relative;

    width:100%;

    height:500px;

}



.slide{

    position:absolute;

    top:0;

    left:0;


    width:100%;


    height:500px;


    object-fit:cover;


    opacity:0;


    transition:opacity 1s ease;


}


/* IMAGE ACTIVE */

.slide.active{

    opacity:1;

}



/*==========================
BOUTONS PRECEDENT / SUIVANT
==========================*/


.prev,
.next{


    position:absolute;


    top:50%;


    transform:translateY(-50%);



    width:50px;


    height:50px;


    border:none;


    border-radius:50%;


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


    color:white;


    font-size:30px;


    cursor:pointer;


    z-index:10;


    transition:.3s;


}



.prev{

    left:20px;

}



.next{

    right:20px;

}




.prev:hover,
.next:hover{


    background:#FFD700;


    color:#003366;


    transform:translateY(-50%) scale(1.1);


}



/*==========================
POINTS DU CARROUSEL
==========================*/


.dots{


    position:absolute;


    bottom:20px;


    width:100%;


    text-align:center;


    z-index:20;


}



.dot{


    display:inline-block;


    width:13px;


    height:13px;


    margin:0 5px;


    border-radius:50%;


    background:white;


    opacity:.7;


    cursor:pointer;


    transition:.3s;


}


.dot:hover{


    transform:scale(1.3);


    opacity:1;


}




.dot.active{


    background:#FFD700;


    transform:scale(1.4);


    border:2px solid white;


}

/*==========================
EFFET IMAGE PREMIUM
==========================*/


.slider img{


    filter:brightness(90%);


}



.slider img:hover{


    filter:brightness(100%);


}
/* =====================================================
        PARTIE 4
        HISTORIQUE + ACTUALITÉS UMSE
=====================================================*/


/*==========================
BANNIERE BIENVENUE
==========================*/

.banniere-umse{

    width:100%;

    margin:30px 0;

}


.banniere-umse img{

    width:100%;

    height:auto;

    display:block;

    border-radius:10px;

}

/*==========================
SECTION HISTORIQUE
==========================*/


.historique-section{


    width:90%;


    margin:50px auto;


    display:flex;


    gap:30px;


    align-items:stretch;


}

/*==========================
IMAGE HISTORIQUE / ACTUALITE
==========================*/


.historique-image{


    width:50%;


}

.historique-image img{


    width:100%;


    height:350px;


    object-fit:cover;


    border-radius:15px;


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


}

/*==========================
TEXTE HISTORIQUE / ACTUALITE
==========================*/


.historique-texte{


    width:50%;


    background:#fff;


    padding:30px;


    border-radius:15px;


    box-shadow:0 8px 20px rgba(0,0,0,.12);


    display:flex;


    flex-direction:column;


    justify-content:center;


}




.historique-texte h2{


    color:#003366;


    font-size:26px;


    margin-bottom:20px;


}




.historique-texte p{


    color:#555;


    line-height:1.8;


    text-align:justify;


    font-size:15px;


}



/*==========================
BOUTON VOIR PLUS
==========================*/


.btn-voir-plus{


    display:inline-block;


    margin-top:25px;


    width:max-content;


    padding:12px 28px;


    background:#003366;


    color:white;


    text-decoration:none;


    border-radius:30px;


    font-weight:bold;


    transition:.3s;


}



.btn-voir-plus:hover{


    background:#FFD700;


    color:#003366;


    transform:translateY(-3px);


}



/*==========================
ACTUALITES HOME
==========================*/


.actualites-section{


    width:90%;


    margin:50px auto;


}



.actualites-section h2{


    text-align:center;


    color:#003366;


    margin-bottom:30px;


}



/* carte actualité */


.actualite-card{


    display:flex;


    gap:30px;


    background:white;


    border-radius:15px;


    overflow:hidden;


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


}



.actualite-card img{


    width:50%;


    height:350px;


    object-fit:cover;


}



.actualite-contenu{


    width:50%;


    padding:30px;


    display:flex;


    flex-direction:column;


    justify-content:center;


}



.actualite-contenu h3{


    color:#003366;


    font-size:25px;


    margin-bottom:15px;


}


.actualite-contenu p{


    color:#555;


    line-height:1.7;


}



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


@media(max-width:800px){


    .historique-section,
    .actualite-card{


        flex-direction:column;


    }



    .historique-image,
    .historique-texte,
    .actualite-card img,
    .actualite-contenu{


        width:100%;


    }


    .historique-image img,
    .actualite-card img{


        height:300px;


    }


}


/* =====================================================
        PAGE LOGIN UMSE
=====================================================*/



.login-page{


    min-height:100vh;


    display:flex;


    justify-content:center;


    align-items:center;


    background:linear-gradient(135deg,#003366,#0b5fa5);


}



.login-container{


    width:90%;


    max-width:1100px;


    display:flex;


    background:white;


    border-radius:20px;


    overflow:hidden;


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


}





.login-left{


    flex:1;


    background:linear-gradient(135deg,#003366,#1179c8);


    color:white;


    padding:40px;


    display:flex;


    flex-direction:column;


    justify-content:center;


}





.login-left h1{


    font-size:40px;


    margin-bottom:15px;


}



.login-right{


    flex:1;


    padding:40px;


    display:flex;


    justify-content:center;


    align-items:center;


}




.login-card{


    width:100%;


    max-width:380px;


}



.login-card h2{


    color:#003366;


    margin-bottom:20px;


}




.input-box{


    margin-bottom:15px;


}



.input-box input{


    width:100%;


    padding:13px;


    border:1px solid #ddd;


    border-radius:10px;


    outline:none;


}



.input-box input:focus{


    border-color:#0b5fa5;


}





.btn-login{


    width:100%;


    padding:13px;


    border:none;


    border-radius:30px;


    background:#003366;


    color:white;


    font-weight:bold;


    cursor:pointer;


    transition:.3s;


}



.btn-login:hover{


    background:#FFD700;


    color:#003366;


}




.footer-login{


    text-align:center;


    margin-top:20px;


    color:#777;


    font-size:13px;


}



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


@media(max-width:1100px){


    .page-container{


        width:100%;


    }



    .header-top{


        flex-direction:column;


        padding:20px;


    }



    .navbar{


        margin-top:20px;


    }



    .menu{


        flex-wrap:wrap;


        justify-content:center;


    }


}




@media(max-width:768px){



    .logo-zone{


        flex-direction:column;


        text-align:center;


    }



    .logo-text{


        margin:10px 0;


    }




    .menu{


        flex-direction:column;


        width:100%;


    }



    .menu>li{


        width:100%;


    }



    .menu>li>a{


        justify-content:center;


    }




    .submenu{


        position:relative;


        width:100%;


    }




    .footer-box{


        width:100%;


    }



    .login-container{


        flex-direction:column;


    }
	}
/*==========================================================
=
=           FOOTER PREMIUM UMSE
=           PARTIE 1 : STRUCTURE GÉNÉRALE
=
==========================================================*/

/* FOOTER */

.footer{

    width:100%;

    margin-top:60px;

    font-family:Arial, Helvetica, sans-serif;

}

/*==========================
NEWSLETTER
==========================*/

.footer-newsletter{

    background:#0b5d91;

    padding:60px 40px;

    text-align:center;

}

/* TITRE */

.footer-newsletter h2{

    color:#ffffff;

    font-size:48px;

    font-family:"Times New Roman", serif;

    font-weight:bold;

    letter-spacing:2px;

    margin-bottom:25px;

}

/* PARAGRAPHE */

.footer-newsletter p{

    color:#ffffff;

    font-size:22px;

    margin-bottom:40px;

}

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

.newsletter-form{

    width:100%;

    max-width:1200px;

    margin:auto;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:15px;

    flex-wrap:wrap;

}

/* CHAMPS */

.newsletter-form input{

    flex:1;

    min-width:280px;

    height:58px;

    padding:0 18px;

    border:none;

    outline:none;

    background:#ffffff;

    font-size:20px;

    color:#333;

}

/* PLACEHOLDER */

.newsletter-form input::placeholder{

    color:#777;

}

/* BOUTON */

.newsletter-form button{

    width:220px;

    height:58px;

    background:#c7ab57;

    color:#ffffff;

    font-size:20px;

    border:none;

    cursor:pointer;

    transition:.35s;

    letter-spacing:1px;

    font-weight:bold;

}

.newsletter-form button:hover{

    background:#b3933d;

}

/*==========================
NOUS SUIVRE
==========================*/

.suivre{

    margin-top:45px;

}

}
/*==========================================================
        FOOTER BAS PREMIUM UMSE
==========================================================*/

.footer-bottom{

    background:#ffffff;

    padding:45px 30px;

    text-align:center;

}

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

.footer-title{

    text-align:center;

    margin-bottom:35px;

}

.footer-title h2{

    color:#0b2e59;

    font-size:32px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:8px;

}

.footer-title span{

    display:block;

    color:#b89128;

    font-size:16px;

    font-weight:600;

}

/*==========================
LES 3 BLOCS
==========================*/

.footer-infos{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:stretch;

    gap:20px;

    flex-wrap:wrap;

    margin:35px auto;

}

.footer-box{

    flex:1;

    min-width:280px;

    max-width:360px;

    background:#fafafa;

    border-radius:12px;

    padding:22px;

    box-shadow:0 5px 18px rgba(0,0,0,.08);

    transition:.3s;

    border-top:4px solid #d4af37;

}

.footer-box:hover{

    transform:translateY(-5px);

}

.footer-box h3{

    color:#0b2e59;

    font-size:21px;

    margin-bottom:15px;

}

.footer-box p{

    margin:6px 0;

    color:#555;

    font-size:15px;

    line-height:1.6;

}

.footer-box i{

    color:#d4af37;

    width:20px;

}

.footer-box a{

    color:#0056b3;

    text-decoration:none;

    font-weight:600;

}

.footer-box a:hover{

    color:#d4af37;

    text-decoration:underline;

}

/*==========================
MENU BAS
==========================*/

.footer-links{

    margin-top:30px;

    margin-bottom:25px;

    text-align:center;

}

.footer-links a{

    display:inline-block;

    margin:6px 10px;

    color:#0b2e59;

    text-decoration:none;

    font-size:15px;

    font-weight:bold;

    transition:.3s;

}

.footer-links a:hover{

    color:#d4af37;

}

/*==========================
BOUTON ADMIN
==========================*/

.footer-admin{

    text-align:center;

    margin-bottom:25px;

}

.btn-admin{

    display:inline-block;

    padding:13px 28px;

    background:#0b2e59;

    color:white;

    text-decoration:none;

    border-radius:35px;

    font-size:15px;

    font-weight:bold;

    transition:.3s;

}

.btn-admin:hover{

    background:#d4af37;

    color:#0b2e59;

}

/*==========================
COPYRIGHT
==========================*/

.copyright{

    text-align:center;

    border-top:1px solid #ddd;

    padding-top:18px;

    font-size:14px;

    color:#777;

}

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

@media(max-width:992px){

.footer-infos{

    flex-direction:column;

    align-items:center;

}

.footer-box{

    width:95%;

    max-width:600px;

}

}

@media(max-width:768px){

.footer-title h2{

    font-size:24px;

}

.footer-title span{

    font-size:14px;

}

.footer-links a{

    display:block;

    margin:10px 0;

}

.btn-admin{

    width:100%;

    max-width:320px;

}

}
/* =========================================
   BARRE SOCIALE + COMPTES
========================================= */

.social-top {

    display: flex;

    justify-content: space-between;

    align-items: center;

}


/* ICONES SOCIALES */

.social-icons {

    display: flex;

    align-items: center;

    gap: 15px;

}


/* BOUTONS COMPTES */

.account-buttons {

    display: flex;

    align-items: center;

    gap: 35px;

}


/* ================================
   BARRE DU HAUT
================================ */

.social-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* ================================
   ICONES SOCIALES
================================ */

.social-icons {
    display: flex;
    align-items: center;
    gap: 15px;
}


/* ================================
   BOUTONS DES COMPTES
================================ */

.account-buttons {
    display: flex;
    align-items: center;
    gap: 20px;
}


/* ================================
   STYLE COMMUN DES DEUX BOUTONS
================================ */

.account-buttons a.btn-register,
.account-buttons a.btn-login {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    height: 38px;

    min-width: 155px;

    padding: 0 16px;

    border-radius: 6px;

    color: #ffffff !important;

    text-decoration: none !important;

    font-family: Arial, sans-serif;

    font-size: 14px;

    font-weight: 600;

    line-height: 1;

    white-space: nowrap;

    box-sizing: border-box;

    transition: 0.3s ease;

}


/* ================================
   CREER UN COMPTE
================================ */

.account-buttons a.btn-register {

    background: #dc3545 !important;

}


/* ================================
   SE CONNECTER
================================ */

.account-buttons a.btn-login {

    background: #0d6efd !important;

}


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

.account-buttons a.btn-register:hover {

    background: #b02a37 !important;

    transform: translateY(-2px);

}


.account-buttons a.btn-login:hover {

    background: #084298 !important;

    transform: translateY(-2px);

}