@charset "UTF-8";
/* CSS Document */

body, html {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  text-decoration: none;
  list-style: none;
  background-color: #000000;
}

img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

a,
a:visited {
    color: inherit;
}


main {
    margin-bottom: 3px;
    padding: 0 0 6px 0;
    background-color: #000;
        }

footer{
	border-top: 3px solid #FFF; /* Bordure blanche en haut */
	padding-top: 5px;
	padding-left: 10px;
}



/* titre */
h1 {
  color: #FFFFFF;
  text-transform: none;
  letter-spacing: 0.13em;
  font-size: 24px;
  font-weight: 200;
}

/* Nav Light blanche et rouge */
h2 {
    color: #FFFFFF;
    font-size: 24px;
    font-weight: 200;
	letter-spacing: 0.13em;
    text-transform: uppercase;
}

h10 {
    color: #00000;
    font-size: 24px;
    font-weight: 200;
    text-transform: uppercase;
}

/* Nav Bold blanche et rouge*/
h3 {
    color: #FFFFFF;
    font-size: 24px;
    font-weight: 900;
    text-transform: uppercase;
}
h8 {
    color: #B70003;
    font-size: 24px;
    font-weight: 900;
    text-transform: uppercase;
}

/* Texte Footer*/
h5 {
  color: #FFF;
  text-transform: none;
  font-size: 8px;
  font-weight: 200;
  letter-spacing: 0.05em;
}

/* Texte générale présentation qui s'efface*/
h4{
	color:#000;
	font-size: 20px;
	font-weight: 600;
}

/* Sous- Nav. blanche et rouge*/
h6 {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 200;
}

h7 {
    color: #00000;
    font-size: 16px;
    font-weight: 200;
	text-transform: uppercase;
}

/* texte de présentation de projets */
h9 {
    color: #B70003;
    font-size: 16px;
    font-weight: 900;
    text-transform: uppercase;
}

/* texte de description de projets */
h11 {
    color: #7D7D7D;
    font-size: 22px;
    font-weight: 900;
    text-transform: uppercase;
}

h12 {
    color: #B70003;
    text-transform: none;
    font-size: 22px;
    font-weight: 200;
}

h13 {
    color: #FFF;
    text-transform: none;
	font-size: 22px;
    letter-spacing: 0.05em;
    font-weight: 200;
}

.header {
  position: relative;
  z-index: 100;
  background-color: #000000; /* Fond noir */
  /* border-bottom: 1px solid #FFFFFF;  Bord blanc en bas du header */
}

/*-------------------- menu principale ---------------------*/


.menus{
	padding-left: 0px;
	
}

.column {
    background-color: #000;
    padding: 7px; /*marge box images */
    box-sizing: border-box;
    text-align: left;
	grid-column: span 5;
	border-bottom: 2px solid #FFF; /* Bordure blanche en bas */
}


/* ------------------ positionnement logo et titre ---------------*/
.logo-site img{
	width: 106px;
	margin-left: 10px;
}

.titre {
	margin :-17px 0 -15px 10px;
}


/*------------------ Mise en page ---------------------*/
.grille {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 10px; /* gouttière*/
    width: 100%;
    margin: 0 auto;
    padding: 5px; /* Marges*/
}

.column {
    background-color: #000;
    padding: 0px; /*marge box images */
    box-sizing: border-box;
    text-align: left;
	grid-column: span 5;
}

    /* span = colonne, le chiffre avant span défini l'emplacement. 1 pour première colonne, 2 pour deuxième, ect. */
/*--- sur 1 colonne -------*/
.single-column{
	grid-column: span 1;
}
/*--- sur 2 colonne -------*/
.double-column {
    grid-column: span 2;
}
/*--- sur 3 colonne -------*/
.triple-column {
    grid-column: span 3;
}
.quadruple-column{
	grid-column: span 4;
}
.quintuple-column{
	grid-column: span 5;
}



/*---------- position menu hamburger --------------*/

.header .menu-hamburger{
	display: none;
	position: absolute;
	top: 42px;
	right: 10px;
	width: 22px;
}


/*---------- Menus --------------*/

.nav-links{
border-top: 3px solid #FFF; /* Bordure blanche en haut */
border-bottom: 3px solid #FFF; /* Bordure blanche en bas */
}

.nav-links ul{
	margin: 5px;
}

.nav-links ul li {
    text-transform: uppercase;
    display: inline;
    word-spacing: 10px;  
    list-style: none;
}

.nav-links ul li a {
    text-decoration: none;
    outline: none;
    display: inline;
    text-align: left;
	
}

.nav-links ul li a h3{
    text-decoration: none;
    display: inline;
    text-align: left;
    padding: 0 0.7em 0 0;

}

.nav-links ul li a h3:hover {
    outline: none;
    color:#B70003;
    display: inline;

}

.nav-links ul li a h2 {
    display: inline;
    text-align: left;
    padding: 0 0.7em 0 0;
}

.nav-links ul li a h2:hover {
    outline: none;
    color:#B70003;
    display: inline;
}


.footer-logo img {
	display: inline-flex;
	width: 22px;
}
.footer-text{
	margin-top: -10px;
}


/*--------- Sous Nav ---------------*/
.sousnav {
margin-top: -3px;
border-top: 3px solid #FFF; /* Bordure blanche en haut */
border-bottom: 3px solid #FFF; /* Bordure blanche en bas */
background-color:#B70003;
}

.sousnav-links {
 margin: 0 0 0 -33px;
}

.sousnav ul li {
    text-transform: uppercase;
    display: inline;
    list-style: none;
}

.sousnav ul li h6{
    text-decoration: none;
	color: #FFF;
	text-align: left;
	display: inline;
	margin-right: 10px;
}

.sousnav ul li a{
    text-decoration: none;
}

.sousnav ul li a:hover {
    text-decoration: none;
	color: #000;
	text-align: left;
	display: inline;
    font-weight: 200;
}


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

.liens {
 text-decoration: none;
}

.texteintro {
    padding: 1em;
}

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

/* Media queries pour adapter le nombre de colonnes selon la taille de l'écran */

/* Pour les écrans de taille inférieure ou égale à 768px (par exemple, smartphones en mode portrait) */
@media screen and (max-width: 768px) {

.grille {
        grid-template-columns: repeat(1, 1fr); /* le premiere : 1 correpond au nombre de colonne par ligne pour les écrans plus petits */
    }
.double-column {
        grid-column: span 1; /* Ajuster pour occuper une seule colonne */
    }
	
.container1 div {
    flex: 50%;
  }

}


/* Pour les écrans de taille inférieure ou égale à 865px (par exemple, smartphones en mode portrait) */

@media screen and (max-width : 865px ){
	
  .header {
   width:100%;
  }	
	.logo-site,
	.logo-site h1 {
    position: relative;
  }


  .header .menu-hamburger {
    display: block;
  }
	
	
  .nav-links {
    left: 0;
    position: absolute;
    background-color: #000000;
    width: 100%;
    height: auto; /* Ajustez la hauteur en conséquence */
    margin-top: -200%;
    padding: 0px;
    transition: all 0.7s ease;
  }

  .nav-links.mobile-menu {
    margin-top: -3.1px;
    display: block; 
	/* Ajoutez ceci pour que le menu soit visible */
  }

  .nav-links .mobile-menu {
    margin-top: 0;
  }

  .nav-links ul {
    display: block; /* Utilisez block pour afficher les éléments en colonne */
  }

  .nav-links ul li {
    display: block; /* Afficher chaque élément sur une nouvelle ligne */
    list-style: none;
    margin: 2px 0 0 0;
  }
}







/* Pour les écrans de taille supérieure à 768px mais inférieure ou égale à 1024px (par exemple, tablettes en mode portrait) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
 .grille {
        grid-template-columns: repeat(2, 1fr); /* le premeier : 1 correpond au nombre de colonne par ligne pour les écrans plus petits */
    }

	.container1 div {
    flex: 33.33%;
  }
}

/* Pour les écrans de taille supérieure à 1024px mais inférieure ou égale à 1200px (par exemple, tablettes en mode paysage) */
@media screen and (min-width: 1025px) and (max-width: 1200px) {
.grille {
        grid-template-columns: repeat(3, 1fr); /* le premeier : 1 correpond au nombre de colonne par ligne pour les écrans plus petits */
    }

  .container1 div {
    flex: 25%;
  }
}

/* Pour les écrans de taille supérieure à 1200px (par exemple, écrans d'ordinateur de bureau) */
@media screen and (min-width: 1201px) and (max-width: 1600px){
	.grille {
        grid-template-columns: repeat(4, 1fr); /* le premeier : 1 correpond au nombre de colonne par ligne pour les écrans plus petits */
    }
	
	.container1 div {
    flex: 20%;
  }

}
	

@media screen and (min-width : 1601px){
  	.grille {
        grid-template-columns: repeat(5, 1fr); /* le premeier : 1 correpond au nombre de colonne par ligne pour les écrans plus petits */
    }

	
	.container1 div {
    flex: 20%;
  }
	
}