html {
	--text: #FFF;
	scroll-behavior: smooth;
  margin: 0;
  padding: 0;
  overflow-x: hidden; /
}

body {
  margin: 0;
	font-family: Poppins, sans-serif;
  font-size: 16px;
  padding: 0;
  gap: 91px;
  overflow-x: hidden;
}

header {
	top: 0;
	left: 0;
	z-index: 1;
	display: flex;
	gap: 90px;
	align-items: center;
	justify-content: center;
}


.first-container {
  background-image: url(../images/carte.svg);
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 1100px;
  width: 100%;
  height: 855px;
  display: flex;
  flex-direction: column;

}

h1{
	font-weight: bold;
	line-height: 113%;
  margin: 0;
}

span
{
	color: #FF5733;
}
nav {
	width:739px;
	background-color: #030027;
	height: 56px;
	text-align: center;
	display: flex;
	justify-content: space-around;
	border-radius: 5rem;
	backdrop-filter: blur(4px);
  align-items: center;
  gap: 120px;
}

nav ul {
	list-style: none;
	display: flex;
	justify-content: space-around;
	width: 80%;
	padding: 0;
	margin: 0;
  align-items: center;
 
}

nav ul li {
	font-weight: bold;
}

.logotexte {
  height: 140px;
  width: auto;
}

.button {
  background-color: #FF5733;
  color: white;
  padding: 16px 34px;
  border: none;
  border-radius: 5rem;
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
 display: flex;
 gap: 11px ;
  height: 25px;
  width: 222px;
  margin: 0 auto; 
  justify-content: center;
  margin-right: 20px;
}

.button2 {
  background-color: #FFD0BC;
  color: #FF5733;
  padding: 6px 32px;
  border: none;
  border-radius: 5rem;
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
  width: 331px;
  height: 47px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 11px;
}

.button3 {
  background-color: #FF5733;
  color: white;
  padding: 16px 34px;
  border: none;
  border-radius: 5rem;
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
  display: flex;
  gap: 11px ;
  height: 25px;
  width: 222px;
  margin: 0 auto; 
  justify-content: center;
  margin: 40px auto 0; 
}

a {
	text-decoration: none;
	color: var(--text);
}


.center {
	display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 26px;

}

.center > div:first-child {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.un{
  gap:22px;
}
.deux
{
  gap: 47px;
}

.titre{
	text-align: center;
	font-size: 2rem;
}

.first-container {
   position: relative;
  z-index: 1;
  background-color: #FFF1EB;
}

.box
{
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  height: 200px;
  display: flex;
  flex-direction:row;
  width: 80%;
  align-items: center;
  justify-content: center;
  border-radius: 77px;
  margin: 0 auto;
  padding: 70px 74px;
   position: relative;
  top: -150px;
  background-color: #FFF;
  z-index: 2;
  gap: 50px;
}


.second img
{
  height: 50px;
}
.second
{
  display: flex;
  flex-direction: row;
 gap: 90px;
}

.right {
  text-align: right;
  justify-content: center;
  display: flex;
  align-items: center;
  width: 100%;
  gap: 250px;
}

.right img {
  height: 700px;
}
.center-icons {
  display: flex;
  flex-direction: column; /* image au-dessus du texte */
  align-items: center;    /* centre horizontalement */
  text-align: center;
}

.train {
  height: 340px;
}

.milieu {
  text-align: center;
}

footer {
  background-color: #030027;
  height: 80px;
}



/* _____________________________________________________graphiques*/


/* === GRAPHIQUES ACCUEIL === */
#blocGraphiques .carte-graphique {
  background: var(--blanc);
  border-radius: 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  padding: 20px;
  width: 300px;
  text-align: center;
  margin-right: 10px;
}

#blocGraphiques {
  display: flex;
 justify-content: center;
}
.titre-graphique {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}

.sous-titre {
  font-size: 13px;
  color: #666;
  margin-bottom: 10px;
}

.graphique-svg {
  width: 260px; /* ou 100%, selon ton design */
  height: 150px;
  margin: 0 auto;
  display: block;
}




/* === AUTOCOMPLÉTION === */
/* .suggestions {
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  max-height: 200px;
  overflow-y: auto;
  width: 100%;
  z-index: 1000;
  border-radius: 6px;
} */