/* Import des polices */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

/*RESET*/

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

/*BASE*/

body {
background-color: whitesmoke;}




/*TYPOGRAPHIE*/

p {
    font: 16px/24px 'IBM Plex Serif', serif;
    text-align: justify;
    margin-bottom: 24px;
    hyphens: auto;
    -webkit-hyphens: auto; /* for older WebKit browsers */
    -ms-hyphens: auto; /* for Internet Explorer */
}


strong {
    font-family: 'IBM Plex Serif', serif;
    font-weight: 700; /* Gras */
    font-style: normal;}

em {
    font-family: 'IBM Plex Serif', serif;
    font-weight: 400;
    font-style: italic;}

h1 {    
    text-transform: uppercase;
    font: 22px/26px 'Inter';
    text-align: left;
    padding-bottom: 24px;
    padding-top: 20px;}

h2 {    
    text-transform: uppercase;
    font: 16px/24px 'Inter';
    text-align: left;}


h2:before{
	content: ">";
	color: black;
	margin-right:10px;
}

nav {
    font: 16px/18px 'Inter';
    text-transform: uppercase;
    text-align: center;}

footer { 
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    text-align: center;}

.temp-text { /*bannière*/
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    color: white;
    line-height: 40px;
}

#text-alternate { /*texte central home*/
    font-family: 'Inter', sans-serif;
    font-size: 4vw;
    line-height: 4.2vw;
    text-align: center;}




/*MISE EN PAGE GÉNÉRALE*/



.logo {
    width: 30vw;
    max-width: 450px;
    min-width: 250px;
    height: auto;
    margin: 30px auto 30px auto;
    display: block;
}

nav {
    width: 50%;
    margin: auto auto;
    text-decoration: none;
    color: black;
    padding-bottom: 30px;
    position: relative;
}

nav::after {
    content: '';
    position: absolute;
    left: 50%; /* Déplacer le point de départ à 50% de la largeur du parent (nav) */
    transform: translateX(-50%); /* Centrer horizontalement */
    bottom: 0;
    width: 100%; /* Largeur de la ligne */
    min-width: 345px;
    max-width: 700px;
    margin: 00px auto 0 auto;
    border-bottom: 1px solid black;
}

nav a, footer a {
    margin: 1vw;
    text-decoration: none;
    color: black;
}


nav a:hover, footer a:hover {
    text-decoration: underline;
        color: grey;
}

a {
    color: black;
    text-decoration: none; /* Supprimer le soulignement par défaut des liens */
}

a:hover {
    color: grey;
}

.active {
    text-decoration: underline;
}

.hidden { display: none;}


/*MISE EN PAGE ACCUEIL*/

.home-content {
    position: absolute;
    top: calc(50% + 70px);
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

#text-alternate {
    color: white;
    margin: auto;
    background-size: 100% 120%;
    background-color: black;
    width: calc(50% - 5px);
    max-width: 700px;
    min-width: 345px;
    padding: 10px;
}




/*MISE EN PAGE DES PAGES*/


.page-content {
    width: 50%;
    max-width: 700px;
    min-width: 250px;
    padding-top: 30px;
    margin: auto;
    padding-bottom: 80px;
}




/*MISE EN PAGE FOOTER*/


/*filet*/

hr {
    border: none;
    border-top: 1px solid black;
    margin-bottom: 12px;
}

/* Styles du pied de page */
footer {
    position: fixed;
    bottom: 0px;
    width: 100%;
    background-color: whitesmoke;
    height: 80px;
    z-index: 1;
}

/* Styles de bannière en bas de la page */
.bottom-banner {
    position: fixed;
    bottom: 0px;
    background-color: black;
    width: 100%;
    height: 40px;
    z-index: 2;
}



/*-------------MEDIA QUERIES---------------*/

/* --------- MOBILE----------*/
@media screen and (max-width: 600px) {
    

    
    /*TYPOGRAPHIE*/

p { font: 14px/20px 'IBM Plex Serif', serif;
   margin-bottom: 20px;
    hyphens: auto;}


h1 {    
    font: 20px/24px 'Inter';
    padding-bottom: 20px;
    padding-top: 15px;}

 h2 {    
        font: 14px/17px 'Inter';  /* Ajustement de la taille de la police et de l'interligne */
    }

nav {
    font: 16px/24px 'Inter';
    padding-bottom: 20px;}

footer { ;
    font-size: 10px;}
    
.temp-text { /*bannière*/
    font-size: 16px;
    line-height: 30px;
}

   
    /* Ajustements pour le logo */
    .logo {
        width: 50vw;
        max-width: 500px;
        min-width: 250px;
        height: auto;
        margin: 20px auto 20px auto;
        display: block;
    }

   /* Ajustements pour le contenu de la page d'accueil */
.home-content {
    position: absolute;
    top: calc(50% + 40px);
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

    /* Ajustements pour l'élément avec l'ID "text-alternate" */
    #text-alternate {
        font-size: 11vw;
        line-height: 13vw;
        width: 90%;
        padding: 10px;
        background-size: 100% 120%;
        background-color: black;
    }
     
/* Ajustements pour les pages*/
    .page-content {
        max-width: auto;
        min-width: auto;
        width: 85vw;
        padding-top: 20px;
    }

}

/* Styles du pied de page */
footer {
    height: 30px;
}

/* Styles de bannière en bas de la page */
.bottom-banner {
    height: 30px;
    z-index: 2;
}

/* --------- NON-MOBILE----------*/  


@media screen and (min-width: 601px) {
  /* Styles du pied de page */
footer {
    position: fixed;
    bottom: 0px;
    width: 100%;
    background-color: whitesmoke;
    height: 80px;
    z-index: 1;
}

/* Styles de bannière en bas de la page */
.bottom-banner {
    position: fixed;
    bottom: 0px;
    background-color: black;
    width: 100%;
    height: 40px;
    z-index: 2;
}