body {
  margin: 0;
  padding: 0;
  //overflow-x: hidden; /* Empêche le défilement horizontal */
  font-size:19px;
  padding-bottom: 50px;
  width:100%;
}
.banner{
  position: relative; /* Pour pouvoir positionner l'élément interne par rapport à la div parent */
  //background-image: url('/files/headers/images/new_main.jpg'); /* L'image de fond */
  background-image: url('/files/headers/images/nv-bandeau-main.png'); /* L'image de fond */
  background-size: cover; /* L'image couvre toute la div */
  background-position: 50% 35%;
  width: 100%; /* La largeur de la div (tu peux aussi utiliser une valeur fixe) */
  height: 300px;
  text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
}
.banner_light{
  position: relative; /* Pour pouvoir positionner l'élément interne par rapport à la div parent */
  background-image: url('/files/headers/images/new_main.jpg'); /* L'image de fond */
  background-size: cover; /* L'image couvre toute la div */
  background-position: 50% 45%;
  width: 100%; /* La largeur de la div (tu peux aussi utiliser une valeur fixe) */
  height: 100px;
  text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
}
.banner_light_pedago{
  position: relative; /* Pour pouvoir positionner l'élément interne par rapport à la div parent */
  background-image: url('/files/headers/images/bandeau-espace-peda.png'); /* L'image de fond */
  background-size: cover; /* L'image couvre toute la div */
  background-position: 50% 84%;
  width: 100%; /* La largeur de la div (tu peux aussi utiliser une valeur fixe) */
  height: 223px;
  text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
}
.banner_light_tools{
  position: relative; /* Pour pouvoir positionner l'élément interne par rapport à la div parent */
  background-image: url('/files/headers/images/bandeau-tools-lab.png'); /* L'image de fond */
  background-size: cover; /* L'image couvre toute la div */
  background-position: 50% 45%;
  width: 100%; /* La largeur de la div (tu peux aussi utiliser une valeur fixe) */
  height: 223px;
  text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
}
.banner_light_data{
  position: relative; /* Pour pouvoir positionner l'élément interne par rapport à la div parent */
  background-image: url('/files/headers/images/bandeau-data-center.png'); /* L'image de fond */
  background-size: cover; /* L'image couvre toute la div */
  background-position: 50% 84%;
  width: 100%; /* La largeur de la div (tu peux aussi utiliser une valeur fixe) */
  height: 223px;
  text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
}
.banner_light_sismo-peda{
  position: relative; /* Pour pouvoir positionner l'élément interne par rapport à la div parent */
  background-image: url('/files/headers/images/bandeau_sismo-peda.png'); /* L'image de fond */
  background-size: cover; /* L'image couvre toute la div */
  background-position: 50% 57%;
  width: 100%; /* La largeur de la div (tu peux aussi utiliser une valeur fixe) */
  height: 223px;
  text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
}
.banner_light_meteo-peda{
  position: relative; /* Pour pouvoir positionner l'élément interne par rapport à la div parent */
  background-image: url('/files/headers/images/bandeau_meteo-peda.png'); /* L'image de fond */
  background-size: cover; /* L'image couvre toute la div */
  background-position: 50% 57%;
  width: 100%; /* La largeur de la div (tu peux aussi utiliser une valeur fixe) */
  height: 223px;
  text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
}
.banner_light_hydro-peda{
  position: relative; /* Pour pouvoir positionner l'élément interne par rapport à la div parent */
  background-image: url('/files/headers/images/bandeau_hydro-peda.png'); /* L'image de fond */
  background-size: cover; /* L'image couvre toute la div */
  background-position: 50% 57%;
  width: 100%; /* La largeur de la div (tu peux aussi utiliser une valeur fixe) */
  height: 223px;
  text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
}
.banner_light_oceano-peda{
  position: relative; /* Pour pouvoir positionner l'élément interne par rapport à la div parent */
  background-image: url('/files/headers/images/bandeau_oceano-peda.png'); /* L'image de fond */
  background-size: cover; /* L'image couvre toute la div */
  background-position: 50% 57%;
  width: 100%; /* La largeur de la div (tu peux aussi utiliser une valeur fixe) */
  height: 223px;
  text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
}
.banner_light_volcano-peda{
  position: relative; /* Pour pouvoir positionner l'élément interne par rapport à la div parent */
  background-image: url('/files/headers/images/bandeau_volcano-peda.png'); /* L'image de fond */
  background-size: cover; /* L'image couvre toute la div */
  background-position: 50% 57%;
  width: 100%; /* La largeur de la div (tu peux aussi utiliser une valeur fixe) */
  height: 223px;
  text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
}
.text-banner{
  position: absolute; /* Permet de positionner le texte librement */
  //top: 95%; /* Positionne le texte au centre verticalement */
  top: 56%; /* Positionne le texte au centre verticalement */
  left: 50%; /* Positionne le texte au centre horizontalement */
  transform: translate(-50%, -50%); /* Centre le texte exactement */
  color: white; /* Couleur du texte */
  font-weight:bold;
  font-size: 40px; /* Taille du texte */
  text-align:center;
  padding: 10px; 
  width:100%;
  text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
}
.banner2 {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.banner2-img {
  width: 100%;       /* occupe toute la largeur */
  height: auto;      /* garde le ratio */
  display: block;    /* enlève l'espace sous l'image */
}
.navbar {
    display: flex;
    background-color: black;
    width: 100%;
    height:50px;
}
.main{
  width:80%;
  margin-left:auto;
  margin-right:auto;
  font-size:19px;
  //margin-left:50px;
}
.main_actus{
  width:90%;
  margin-left:auto;
  margin-right:auto;
  font-size:19px;
  margin-bottom:100px;
}
h1{
  font-size:25px;
  color:#0085A3;
  font-style:italic;
  text-align:center;
  margin-bottom: 50px;
}
a {
  text-decoration: none;
  font-weight: bold;
  color: #0085A3;
}
.titre{
	text-align:center;
	color:#0085A3;
	font-size:20px;
        font-style:italic;
	}
.icon{
width: 50px;
height: 50px;
//border:solid rgb(99,174,237) 1px;
}
.grid_bloc_togo{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  box-sizing:border-box;
  padding:10px;
  width:100%;
  //height:300px;
}
.bloc_togo{
  width: calc((50% - 60px) / 3);  /* 3 cartes par ligne, 2x20px de gap = 40px total */
  height:75%;
  display: flex;
  flex-direction: column; /* organisation verticale */
 // width: 20%;            
  text-decoration: none;  /* supprime le soulignement du lien */
  //border: 1px solid #ccc;
  //border-radius: 8px;
  //background-color: #fff;
  //box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  overflow: hidden;
  box-sizing:border-box;
}
.bloc_togo_link_accueil{
  width: calc((72% - 60px) / 3);  /* 3 cartes par ligne, 2x20px de gap = 40px total */
  height:98%;
  display: flex;
  flex-direction: column; /* organisation verticale */
 // width: 20%;            
  text-decoration: none;  /* supprime le soulignement du lien */
  border: 2px solid  rgb(99, 174,237); 
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  overflow: hidden;
  box-sizing:border-box;
}
.bloc_togo_link{
  width: calc((84% - 60px) / 3);  /* 3 cartes par ligne, 2x20px de gap = 40px total */
  height:190px;
  display: flex;
  flex-direction: column; /* organisation verticale */
 // width: 20%;            
  text-decoration: none;  /* supprime le soulignement du lien */
  border: 2px solid  rgb(99, 174,237); 
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  overflow: hidden;
  box-sizing:border-box;
}
.bloc_togo_link_project{
  width: calc((84% - 60px) / 3);  /* 3 cartes par ligne, 2x20px de gap = 40px total */
  height:215px;
  display: flex;
  flex-direction: column; /* organisation verticale */
 // width: 20%;            
  text-decoration: none;  /* supprime le soulignement du lien */
  border: 2px solid rgb(99, 174,237); 
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  overflow: hidden;
  box-sizing:border-box;
}
.bloc_togo_title_accueil{
  background-color: rgb(99,174,237);
  color:white;
  padding: 10px;
  font-weight: bold;
  text-align: center;
  width: 100%;
}
.bloc_togo_title_sismo{
  background-color: rgb(174, 90, 31);
  color:white;
  padding: 10px;
  font-weight: bold;
  text-align: center;
  //width: 100%;
}
.bloc_togo_title_meteo{
  background-color: rgb(146,208,80);
  color:white;
  padding: 10px;
  font-weight: bold;
  text-align: center;
  //width: 100%;
}
.bloc_togo_title_hydro{
  background-color: rgb(0,176, 240);
  color:white;
  padding: 10px;
  font-weight: bold;
  text-align: center;
  //width: 100%;
}
.bloc_togo_title_oceano{
  background-color: rgb(68, 114, 196);
  color:white;
  padding: 10px;
  font-weight: bold;
  text-align: center;
  //width: 100%;
}
.bloc_togo_title_volcano{
  background-color: rgb(255, 192, 0);
  color:white;
  padding: 10px;
  font-weight: bold;
  text-align: center;
  //width: 100%;
}
.bloc_togo_title_terrain{
  background-color: rgb(160,82,45);
  color:white;
  padding: 10px;
  font-weight: bold;
  text-align: center;
  //width: 100%;
}
.bloc_togo_title_project{
  background-color: rgb(99,174,237);
  color: white;
  padding: 10px;
  font-weight: bold;
  text-align: center;
  width: 100%;
}
.bloc_togo_pict {
  height: 100%;              /* prend toute la hauteur restante */
  display: flex;             /* permet de centrer l'image */
  justify-content: center;  /* centre horizontalement */
  align-items: center;      /* centre verticalement */
  overflow: hidden;
}
.bloc_togo_pict img{
  height: auto;     /* 🔹 image prend toute la hauteur disponible */
  width: 95%;      /* 🔹 conserve les proportions */
  display: block;
}
.title_topic_dcent-global{
  height: 50px;
  width: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  color:rgb(99, 174,237);
  font-weight:bold;
  font-size:21px;
  //border: solid 1px rgb(174, 90, 31);
  //border-radius: 10px;
}
.title_topic_sismo{
  height: 50px;
  width: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  color:rgb(174, 90, 31);
  font-weight:bold;
  font-size:21px;
  //border: solid 1px rgb(174, 90, 31);
  //border-radius: 10px;
}
.title_topic_meteo{
  height: 50px;
  width: auto;
  margin-left: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  color:#16b84e;
  font-weight:bold;
  font-size:21px;
  //border: solid 1px rgb(146,208,80);
  //border-radius: 10px;
}
.title_topic_hydro{
  height: 50px;
  width: auto;
  margin-left: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  color:rgb(0,176, 240);
  font-weight:bold;
  font-size:21px;
  //border: solid 1px rgb(146,208,80);
  //border-radius: 10px;
}
.title_topic_oceano{
  height: 50px;
  width: auto;
  margin-left: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  color:rgb(68, 114, 196);
  font-weight:bold;
  font-size:21px;
  //border: solid 1px rgb(146,208,80);
  //border-radius: 10px;
}
.title_topic_volcano{
  height: 50px;
  width: auto;
  margin-left: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  color:rgb(255, 192, 0);
  font-weight:bold;
  font-size:21px;
  //border: solid 1px rgb(146,208,80);
  //border-radius: 10px;
}
.title_topic_terrain{
  height: 50px;
  width: auto;
  margin-left: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  color:rgb(160,82,45);
  font-weight:bold;
  font-size:21px;
  //border: solid 1px rgb(146,208,80);
  //border-radius: 10px;
}
.tab {
    flex: 1; /* Chaque onglet occupe une largeur égale */
    text-align: center;
    padding: 14px 0;
    color: white;
    text-decoration: none;
    font-size: 19px;
    transition: background-color 0.3s;
}
.tab_active{
    flex: 1; /* Chaque onglet occupe une largeur égale */
    text-align: center;
    padding: 14px 0;
    color: white;
    text-decoration: none;
    font-size: 19px;
    background-color: rgb(43,255,255);
    transition: background-color 0.3s;
}
.tab:hover {
    background-color: #d4e7ff; /* L'effet hover avec un fond plus clair */
    color:black;
}
.navbar-2 {
    display: flex;
    justify-content: center; /* Centrer la barre */
    background-color: white;
    width: 75%;
    margin: 0px auto 20px auto; /* Centrer la barre avec un espace en haut */
}
.navbar-2 .tab,.navbar-2 .tab_active {
    flex: 1;
    text-align: center;
    padding: 14px 0;
    color: black;
    text-decoration: none;
    font-size: 19px;
    border-right: 5px solid #ddd; /* Bordure à droite de chaque onglet */
    transition: background-color 0.3s;
}
/* Retirer la bordure gauche du premier onglet */
.navbar-2 .tab:first-child {
    border-left: none;
}

/* Retirer la bordure à droite du dernier onglet */
.navbar-2 .tab:last-child {
    border-right: none;
}

.navbar-2 .tab:hover {
    background-color: #f4f4f4; /* Effet de survol sur fond blanc */
}
.image-container {
  width: 100%;  /* Image occupe toute la largeur */
  height: auto; /* Laisse l'image s'adapter proportionnellement */
  
}

.image-container img {
  width: 100%;  /* L'image prend toute la largeur du conteneur */
  height: auto; /* L'image garde ses proportions */
  object-fit: cover; /* Pour remplir sans déformer */
}
.half_hr{
width: 25%;
  margin-left: auto;  /* aligne à gauche */
  margin-right: auto; /* pousse le reste à droite */
  color:lightblue;
}
.boldTitle1{
  color: #4682B4;
  font-weight: bold;
  font-size:19px;
  display: block; /* Change inline-block à block */
  width: max-content; /* Largeur du span s'ajuste au texte */
  margin: 0 auto;
  //border: 2px solid #4682B4;
  //border-radius: 10px;
  padding: 5px;
  position: relative;
  margin-bottom:1.05em;
}
.boldTitle2{
  color: #007385;
  font-weight: bold;
  font-size:19px;
  display: block; /* Change inline-block à block */
  width: max-content; /* Largeur du span s'ajuste au texte */
  margin: 0 auto;
  //border: 2px solid #4682B4;
  //border-radius: 10px;
  padding: 5px;
  margin-bottom:1.0em;
}
.squares-container {
  display: flex;
  justify-content: space-between; /* Espacement égal entre les carrés */
  gap: 20px; /* Ajoute un espace de 20px entre les carrés */
  margin-bottom: 2em; /* Espacement après les carrés */
  width: 60%; /* Largeur du conteneur des carrés (75% de la largeur de la page) */
  margin: 0 auto;
  margin-bottom:2.0em;
}

/* Style des carrés */
.square {
  width: 300px; /* Largeur du carré */
  height: 150px; // limitation
  border: solid 5px #4682B4;
  //background-color: #4682B4; /* Couleur de fond des carrés */
  border-radius: 10px; /* Coins arrondis */
  position: relative;
  display: flex;
  flex-direction: column; /* Organise le texte et l'image en colonne */
  justify-content: space-between;
}

.square-text {
  text-align: center; /* Centrer le texte */
  padding: 10px; /* Espacement autour du texte */
  font-weight: bold;
  color: #4682B4;
  flex: 1; /* Permet au texte de prendre de l'espace sans déformer l'image */
}

.square-image {
  width: 90%; /* L'image prend toute la largeur du conteneur */
  height:90%;
  overflow:hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px; /* Espacement autour de l'image */
  border: 2px solid #4682B4; /* Ajout d'une bordure autour de l'image */
  border-radius: 5px;
}
.square-image:hover {
  width: 90%; /* L'image prend toute la largeur du conteneur */
  height:90%;
  overflow:hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px; /* Espacement autour de l'image */
  border: 4px solid #4682B4; /* Ajout d'une bordure autour de l'image */
  border-radius: 5px;
}
.square-image img {
  width: 100%; /* L'image prend toute la largeur du conteneur */
  height: calc(100%-40px); /* L'image occupe toute la hauteur du conteneur */
  border-radius: 5px;
  object-fit:cover;
}
.togo{
text-decoration:none;
font-weight:bold;
color:#0085A3;
font-style: italic;
}
.togo-topic-sismo{
text-decoration:none;
font-weight:bold;
color:rgb(174, 90, 31);
font-style: italic;
}
.togo-topic-meteo{
text-decoration:none;
font-weight:bold;
color:rgb(146,208,80);
font-style: italic;
}
.togo-topic-hydro{
text-decoration:none;
font-weight:bold;
color:rgb(0,176, 240);
font-style: italic;
}
.togo-topic-oceano{
text-decoration:none;
font-weight:bold;
color:rgb(68, 114, 196);
font-style: italic;
}
.togo-topic-volcano{
text-decoration:none;
font-weight:bold;
color:rgb(255, 192, 0);
font-style: italic;
}
.togo-topic-vft{
text-decoration:none;
font-weight:bold;
color:rgb(160,82,45);
font-style: italic;
}
.togo:hover{
    //background-color:white;
    //box-shadow:0 0 5px #0085A3;
    //border:1px white solid;
    //border-radius:10px;
    color:#005C71;
    cursor: pointer; 
}
.back-to-top {
  //display: block;       /* pour que text-align fonctionne */
  text-align: right;    /* alignement à droite */
  //margin-top: 10px;     /* petit espace au-dessus */
  font-size: 0.9em;     /* légèrement plus petit si souhaité */
  text-decoration: none;
  color: #007BFF;       /* couleur personnalisable */
}
.title-tool{
  color: black;
  font-style: normal;
}
.descriptif-tool{
  color: black;
  font-style: normal;
  font-weight: normal;
}
#show-sismo {
  display: flex;
  flex-direction: row;        /* aligne les blocs horizontalement */
  justify-content: center;    /* centre les blocs horizontalement */
  gap: 30px;                  /* espace entre chaque image + texte */
  flex-wrap: wrap;            /* permet de passer à la ligne si écran trop petit */
}

.picture_div-show-sismo {
  display: flex;
  flex-direction: column;     /* empile l'image et le texte */
  margin-right: 10px;
  align-items: center;        /* centre image + texte dans le bloc */
}

.picture_div-show-sismo img {
  max-width: 250px;           /* limite la taille de l'image */
  width: 100%;                /* responsive sur petits écrans */
  height: auto;               /* conserve le ratio */
}
#vie_reseau{
  display:flex;
  flex-direction:row;
  width:100%;
  justify-content:center;
}
#bloc_actu{
  margin:0px;
  width:60%;
  height:420px;
  display:flex;
  flex-direction:column;
  text-align:center;
  vertical-align:middle;
  //margin-left:50px;
  margin-top:25px;
}
.element_actu_index{
	margin-top:0px;
	padding-bottom:5px;
	padding-right:10px;
	padding-top:15px;
	height:130px;
	width:98%;
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	border-bottom:2px #ddd solid;
	//overflow:hidden;
}
.element_actu_index .sous_bloc_image{
        width:150px;
	height:100px;
	position:relative;
	margin-left:5px;
	width:25%;
}
.element_actu_index .sous_bloc_image .image{
	width:120px;
	height:100px;
	object-fit:cover;
	position:absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	margin:auto;
	border:4px solid #FFF;
	box-shadow:0 0 2px #000;
}
.element_actu_index .sous_bloc_texte{
	width:75%;
	height:130px;
	text-align:justify;
	margin-left:auto;
	margin-right:auto;
}
.element_actu_index .sous_bloc_texte .titre_actu{
        font-size:18px;
	color:#333;
}
.element_actu_index .sous_bloc_texte .date_actu{
	margin-top:5px;
	text-align:left;
	font-style:italic;
	font-size:11px;
	color:#777; 
	}
.element_actu_index .sous_bloc_texte .texte_actu{
	margin-top:5px;
	color: #0085A3; 
        font-size:18px;
}
#bloc_newsl{
  margin-top:25px;
  width:40%;
  height:450px;
  margin-left:50px;
}
.all_actus{
	display:block;
	margin-top:25px;
	width:45%;
	background-color:#0085A3;
	border:1px #0085A3 solid;
	border-radius:5px;
	margin-left:50px;
	text-align:center;
	color:white;
        height:35px;
}
.all_actus a{
	height:19px;
	display:block;
	text-decoration:none;
	background-color:#0085A3;
	color:white;
}
.all_actus a:hover,.all_actus:hover {
	background-color:#333;
}
.link_all_actus{
	padding-top:6px;
	
}