/*font-family: "Great Vibes", cursive;
 font-family: "Oswald", sans-serif; 
 font-family: 'Lato', sans-serif;*/

/*******************************************************
    GENERAL
********************************************************/

 /* Conteneur global centré */
 #global {
     margin: 0 auto;
     width: 1120px; /* Largeur fixe du conteneur */
     align-content: center;
 }

.width-layout{
    width: 1120px;

}


.blue {
    color: #1027BF;
}

.green {
    color: #4A9655;
}

.red {
    color: #BF2A2A;
}

.yellow {
    color: #FFE75C;
}

.body-oswald {
    font-family: "Oswald", sans-serif; 
}

.body-lato {
    font-family: 'Lato', sans-serif;
}


/****************
   NAV
*****************/

 /* Styles généraux pour les liens */
 a {
    text-decoration: none;
}

a:visited{
    text-decoration: none;
}
a:hover{ /*pour le texte lors du survol du lien*/
   color: black;
}

/* couleur de police */
a.couleurs {
   color: plum;
}

a.bleu {
   color: #1027BF; 
}

a.jaune {
   color: #FFE75C;
}

a.rouge {
   color: red;
}

a.vert {
   color: #4A9655;
}

a.current {
   color: black;
}


nav { /* generale */
   position: relative;
   z-index: 3;
   top: -150px;
   left: 500px;

}

nav ul {
   padding-left: 0px; 
}

nav ul li {
   display: inline;
   list-style: none; /* sans puce */
   font-size: 30px;
   padding-right: 65px ;
}

nav a {
   font-size: 25px;
   font-family: "Oswald", sans-serif; 
   text-transform: uppercase; /* lettre majuscule */
   font-weight: 500; /* gras de police */
}

/****************
  LOGO
*****************/
h1 { 
   position: relative ;
   font-family: 'Great Vibes',cursive;
   font-size :75px;
   font-weight: 600;
   letter-spacing: -0.005em;
   margin-top: 10px;

}

h1 a {
   color:#7EBFD9;
}

h2 a {
   color:#048ABF;
}

header h2 {
   font-size: 70px;
   margin-top: -92px;
   letter-spacing: -0.0005em;
   font-family: 'Oswald', sans-serif; 
}

h2 { 
   text-transform: uppercase;
   font-family: 'Lato', sans-serif;
}


/*******************************************************
                     COLONNES
********************************************************/

.col-4-12 {             /* colonne 1/3 */
    width: 360px;
}

.col-8-12 {             /* colonne 2/3 */
    width: 740px;
}

.col-3-12 {             /* colonne 1/4 */
    width: 265px;
}

.col-9-12 {             /* colonne 3/4 */
    width: 835px;
}



.justify {          /*pour le texte qui sera justifié*/
    text-align: justify;
    text-justify: inter-word;
}

.right_align {      /*pour le texte qui sera aligné à droite*/
    text-align:right;
}

.center {           /*pour le texte qui sera centré*/
    text-align: center;
}

/* TEXTES */
.inlay{ /* incrustation */
    float:right;
    margin : 0 0 0 10px;
}


/****************
   Partie centrale
*****************/

/* Style pour la colonne */
 .col {
    float: left;
    margin-bottom: 20px;
    margin-right: 20px;
}
.mx-auto{
    margin-left: auto;
    margin-right: auto;
}
.last{
    margin: 0;
}
/* Style pour la classe col-6-12 */
.col-6-12 {             /* colonne 1/2 */
    width: 550px;
}


/* Style pour toutes les images animées */
.anim {
    max-width: 100%; /* Définit la largeur maximale de l'image */
    max-height: 100%; /* Définit la hauteur maximale de l'image */
    display: block; /* Pour centrer l'image horizontalement */
    margin: 0 auto; /* Pour centrer l'image horizontalement */
}

/* Pour les conteneurs d'image */
.container,
.container-2,
.container-3,
.container-4 {
    max-width: 1120px; /* Définit la largeur maximale du conteneur à 1120px */
    max-height: 100%; /* Ajuste la hauteur en fonction de la largeur */
    display: flex; /* Utilise la disposition flex pour centrer l'image verticalement */
    justify-content: center; /* Centrer horizontalement */
    align-items: center; /* Centrer verticalement */
    position: relative; /* Position relative pour le positionnement de l'overlay */
}

/* Pour les overlays */
.overlay,
.overlay-2,
.overlay-3,
.overlay-4 {
    position: absolute; /* Position absolue par rapport au conteneur parent */
    top: 0; /* Positionnement en haut du conteneur parent */
    left: 0; /* Positionnement à gauche du conteneur parent */
    width: 100%; /* Largeur pleine de l'overlay */
    height: 100%; /* Hauteur pleine de l'overlay */
    opacity: 0; /* Masquer l'overlay par défaut */
    transition: opacity 0.5s ease; /* Animation de transition */
    background-color: rgba(0, 0, 0, 0.5); /* Couleur de fond semi-transparente */
}

/* Pour le texte des overlays */
.text {
    color: white; /* Couleur du texte */
    font-size: 20px; /* Taille de la police */
    position: absolute; /* Position absolue par rapport à l'overlay */
    top: 50%; /* Alignement vertical au centre */
    left: 50%; /* Alignement horizontal au centre */
    transform: translate(-50%, -50%); /* Centrer le texte */
    text-align: center; /* Centrer le texte horizontalement */
}

/* Effet de survol pour les overlays */
.container:hover .overlay,
.container-2:hover .overlay-2,
.container-3:hover .overlay-3,
.container-4:hover .overlay-4 {
    opacity: 1; /* Afficher l'overlay lors du survol */
}


/****************
Tableau de couleurs
*****************/

/* Styles pour le tableau de couleurs */
table {
    border-collapse: collapse;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 560px;
    height: 85px;
    text-align: center;
    margin: auto;
}

/* Styles pour chaque cellule du tableau */
table, td {
    margin-bottom: 30px;
}

/* Styles pour les en-têtes de colonnes */
th, td {
    padding: 10px;
    text-align: center;
    font-size: 12px;
    font-family: 'Lato', sans-serif;
}

/* Styles pour les en-têtes de ligne */
th {
    background-color: #333;
    color: #fff;
    font-size: 20px;

}

/* Styles pour les lignes */
tr {
    color: white;
}

/* Styles pour les couleurs spécifiques */
.Rouge {
    background-color: #BF2A2A;
}

.Vert {
    background-color: #1E593E;
}

.Bleu {
    background-color: #1027BF;
}

.Blanc {
    background-color: white;
    color: #333333;
}


/****************
   Footer
*****************/

.overflow {
    overflow: hidden;
}
.text-center{
	text-align: center;
	font-size: 18px;
	color:#fff;
}

footer{
	height: 45px;
	background: #024059;
	margin: 30px 0;
	padding:10px 0;
}


footer a{
	color: #fff;
	font-weight: 700;
}

footer a:hover{
	color: #fee3ac;
}