/* Couleurs
#0B87BA; Bleu Light
#014D69; Bleu Foncé
#F3AE5F; Marron Light
#D38F5E; Marron Foncé
*/

/* Import des polices */
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&display=swap');




@font-face {
    font-family: 'CBold';
    src: url(Fonts/);
}

@font-face {
    font-family: 'CItalic';
    src: url(Fonts/cormorant-italic.otf);
}

@font-face {
    font-family: 'CLight';
    src: url(Fonts/cormorant-light.otf);
}

@font-face {
    font-family: 'CRegular';
    src: url(Fonts/cormorant-regular.otf);
}

@font-face {
    font-family: 'PBold';
    src: url(Fonts/Poppins-Bold.otf);
}

@font-face {
    font-family: 'PMedium';
    src: url(Fonts/Poppins-Medium.otf);
}

@font-face {
    font-family: 'PLight';
    src: url(Fonts/Poppins-Light.otf);
}

@font-face {
    font-family: 'Psemi';
    src: url(Fonts/Poppins-SemiBold.otf);
}

@font-face {
    font-family: 'CVariable';
    src: url(Fonts/Cormorant-variable.otf);
}

@font-face {
    font-family: 'CRVariable';
    src: url(Fonts/CormorantR-Variable.otf);
}


/* TEXTES */

 h1 {
    font-family: 'PMedium';
    margin:0;
    font-size:44px;
    text-align: center;

}

h2 {
    font-family: 'CRVariable';
    font-size: 32px;
    font-weight: 800;
    margin:0;
    margin-bottom:12px;
    line-height: 34px;
}

h3 {
    font-family: 'CVariable';
    font-weight: 400;
    font-size: 22px;
    margin:0;
    line-height: 26px;
}

h4 {
    font-family: PLight;

}

ul {
    font-family: 'CVariable';
    font-weight: 500;
    font-size: 22px;
    margin:0;
    line-height: 26px;
    padding-left:30px;
}

.tarifs ul {
    font-family: CVariable;
    font-weight: 100;
}

p {
    font-family:'CLight';
    font-size: 20px;
    line-height: 28px;
}

nav a {
    font-family: 'PMedium';
    font-size:1.5vw;
    text-decoration: none;
    color:white;
    padding:8px;
}


hr {
    color:transparent;
}

/* GLOBAUX */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #163B61;
}

/* HEADER SCREEN */


.main-content {
    background-color: white;
    display: flex;
    flex-direction: row; /* Assure que l'image reste à droite */
    flex-wrap: nowrap; /* Empêche les éléments de se superposer */
    width:calc(100% - 160px);
    margin:0px 80px 0px 80px;
}

header {
    height:80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #163B61;
    color: white;
    padding: 10px 20px;
    margin:0px 75px 0px 25px;
}

.title h1 {
    margin: 0;
}

.title h2 {
    margin: 0;
    font-size: 14px;
}

.logo-title {
    display: flex;
    align-items: center;
}

.logo {
    width: 10vw;
    height: 10vw;
    margin-right: 10px;
}

.site-title h1 {
    margin: 0;
    font-size: 2vw;
}

.site-title h3 {
    margin: 0;
    font-size: 22px;
    margin-top:-5px;
}

nav {
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    padding:5px;
    display: flex;
    gap: 15px;
}

nav a:hover {
    text-decoration: underline;
}

/* HEADER MOBILE */

.header-content {
    height:100px;
    color:white;
    display: none;
    justify-content: space-between; /* Espace entre le titre et le menu burger */
    align-items: center; /* Centrer verticalement */
}

.menu-burger {
    font-size: 30px;
    cursor: pointer;
    margin-right:25px;

}

.title {
    margin-left:50px;
    text-align: center;
    flex-grow: 1; /* Permet à la section titre de prendre de l'espace */
}

.nav-menu {
    display: none; /* Masquer le menu par défaut */
    background-color: #163B61;
    vertical-align: auto;
}

.nav-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-menu li {
    border-bottom: 1px solid #0c2137;
    padding: 10px 20px;
    text-align: center;
    color: white;
    font-size:24px;
  align-items: center;
}

.nav-menu li:hover {
    background-color: #1e5286
}


/* MAIN CONTENT */

.rich-text img {
width:50px;
height:50px;
border:0 0 0 ;
outline: 0 0 0;
}

.rich-text  {
margin-left:20px;
    font-family:'CLight';
    font-size: 20px;
    line-height: 28px;
}

.main-content img{
border:2px solid #163B61;
max-width: 100%;
margin-right:10px;
}

.rich-text img {
    width:25px;
    height:25px;
    border:0px;
    }

.text-content {
    flex: 0 0 60%;
}

.text-content-presentation {
    flex:100%;
    padding:50px 100px 0px 100px;
    text-align:justify;
    text-justify: distribute;
}




.content-text-adjust {
    padding:50px 50px 0px 100px;
    text-align:justify;
}

.content-text-adjust-2 {
    padding:50px 100px 0px 50px;
    text-align:justify;
}

.image-content {
    flex: 0 0 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}


.image-content img {
    max-width: 100%;
    object-fit: cover;
    margin:0;
    padding:0;
}

/* FOOTER SCREEN */

footer {
    background-color: #163B61;
    color: white;
    text-align: center;
}

.footer-title {
    text-align: left;
    padding: 0 10px;
    margin-left:75px;
    margin-bottom: 20px;
    margin-top:25px;
    font-size: 24px;
    font-weight: bold;
}

.footer-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.footer-container img{
    color:white;
    max-width:25px;

}

.logo-mobile {

}

.logo-mobile img{
max-width: 50px;
max-height: 50px;
}


.footer-block {
    border: 1px solid white;
    padding: 20px;
    width: 25%;
    box-sizing: border-box;
    text-align: center;
}

.footer-block a {
    color: #DADADA;
    text-decoration: none;
}

.footer-block a:hover {
    text-decoration: underline;
}

.copyright {
    margin-top: 20px;
    font-size: 14px;
}

.copyright p {
    font-size:'PMedium';
    font-size: 18px;
}


@media only screen and (max-device-width:1024px) {

    h1 {
        font-size:36px;
    }

    .main-content {
    flex-direction: column; /* Sur petit écran, l'image passe sous le texte */
    width:calc(100% - 50px);
    margin:0px 25px 0px 25px;
    }

    header {
    display: none;
    }

    .header-content {
    display: flex;
    }


    .footer-container {
    display:none;
    }

    .footer-title {
        text-align: center;
        margin:0;
        margin-top:25px;
    }

    #header-mobile h1 {
        font-size:24px;
        color:white;
        text-align: center;
        text-justify: center;
        margin-top:25px;
    }

    .text-content, .image-content {
        flex: 0 0 100%;
        padding: 0;
    }

    .text-content-presentation {
        flex:100%;
        padding:50px 20px 0px 20px
    }

    .image-content {
        margin-top: 0px;
    }

    .content-text-adjust {
        padding:20px 20px 0px 20px
    }

    .content-text-adjust-2 {
        padding:20px 20px 0px 20px
    }
}