:root {
  /* --- Couleurs principales --- */
  --bg-color: #e2e2e2;          /* gris très clair pour le fond général */
  --text-color: #2C2C2C;        /* texte principal, gris foncé doux */
  --accent-color: #7B9ACC;      /* bleu-gris doux, accent élégant */
  --accent-hover: #5C7BB3;      /* accent un peu plus soutenu pour hover */
  --header-background: #408360;
  --form-background: #5dad84;
  --form-text-background: #6fcd9d;
  --header-text: #ededed;

  /* --- Couleurs secondaires --- */
  --secondary-bg: #FFFFFF;      /* fond des sections / cartes */
  --secondary-text: #555555;    /* texte secondaire, plus léger */
  --border-color: #c7c7c7;      /* bordures légères */

  /* --- Éléments interactifs --- */
--btn-bg: #408360;
--btn-text: #FFFFFF;
--btn-hover-bg: #2f6147;
--btn-current-bg: #1f4431;

  /* --- Autres tons utiles --- */
  --success-color: #88B788;     /* vert doux */
  --warning-color: #E3B23C;     /* doré élégant */
  --error-color: #C65D5D;       /* rouge désaturé */
  /* palette de couleur powered by ChatGPT */
}

*{
  margin: 0;
  font-family: 'Times New Roman', Times, serif;
}
a{
  text-decoration: none;
}
html,body{
  background-color: var(--bg-color);
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  height: 100%;
}



header {
  background-color: var(--header-background);
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto auto;
  align-items: center;
  padding: 10px;
}
header h1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  color: var(--header-text);
  padding: 5px 5px;
}
header ul {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 0px 10px;
}
header h2 {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
  text-align: center;
  color: var(--header-text);
  font-size: 1.8rem;
  font-size: large;
}
header a {
  color: var(--header-text);
  padding: 5px 10px;
  background-color: var(--btn-bg);
  border-radius: 35px;
  transition: 0.4s ease;
}
header a:hover {
  background-color: var(--btn-hover-bg);
}
.current{
  background-color: var(--btn-current-bg);
}



main{
  flex: 1;
}
span{
  font-weight: bold;
}
article{
  font-size: large;
}



#idnex_rooms,#index_hall,#index_view{
  height: 400px;
}
.index_main{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.index_main article{
  display: flex;
  padding: 10px;
  gap: 20px;
}
#index_responsive{
  display: none;
}


#mur_room,#mur_window{
  height: 400px;
}
.mur_main{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.mur_main article{
  display: flex;
  padding: 10px;
  gap: 20px;
}


#air_room,#air_window{
  height: 400px;
}
.air_main{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.air_main article{
  display: flex;
  padding: 10px;
  gap: 20px;
}


#goutte_room,#goutte_sink{
  height: 400px;
}
.goutte_main{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.goutte_main article{
  display: flex;
  padding: 10px;
  gap: 20px;
}


.contact_main{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  height: 100%;
}
#contact_image{
  height: 500px;
}
.contact_form{
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 5px;
  box-shadow: 2px 4px 20px black;
  border-radius: 5px;
  background-color: var(--form-background);
}

.contact_form input{
  border-radius: 5px;
  background-color: var(--bg-color);
  border: 1px solid black;
}
.contact_form textarea{
  border-radius: 5px;
  background-color: var(--bg-color);
  height: 60px;
  border: 1px solid black;
}
#btn_send{
  height: 40px;
  background-color: var(--btn-bg);
  color: var(--header-text);
}
#btn_send:hover{
  background-color: var(--btn-hover-bg);
}



footer{
  background-color: var(--header-background);
  display: flex;
  align-items: center;
  justify-content: end;
  padding: 10px;
}
footer a {
  color: var(--header-text);
  padding: 3px 30px;
  background-color: var(--btn-bg);
  border-radius: 35px;
  transition: 0.4s ease;
}
footer a:hover {
  background-color: var(--btn-hover-bg);
}