:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --tertiary-color: #408a8b;
  --text-color: #000;
  --background-color: #fff;
  --button-background: #3498db;
  --button-color: #fff;
  --button-hover-background: #2980b9;
  --button-hover-color: #fff;
  --input-focus-color: #2980b9;
  --button-padding: 10px 20px;
  --border-radius: 5px;
  --grid-columns-desktop: 1fr 1fr; /* Définit deux colonnes de taille égale */
  --grid-columns-mobile: 1fr; /* Définit une seule colonne pour les petits écrans */
  --grid-gap: 20px; /* Définit l'espacement entre les éléments de la grille */
  --breakpoint-mobile: 600px; /* Breakpoint pour les petits écrans */
  --breakpoint-desktop: 1024px; /* Breakpoint pour les grands écrans */
  --footer-background: #000; /* Couleur de fond du footer en mode normal */
  --footer-text-color: #fff; /* Couleur de texte du footer en mode normal test */
  --link-text-color: #1a73e8;
  /* --box-shadow: 0 2px 4px #2980b9; */
  /* --box-shadow: 0 -4px 7px #2980b9; */
  --box-shadow: 0 4px 7px #2980b9;
  --header-background-color: var(--tertiary-color);
  --header-background-color: #fff;
  --header-bottom-color:var(--primary-color);
  --border-nav: 3px solid var(--tertiary-color);
  /* --text-shadow: 0 1px 2px rgba(0,0,0,0.25) */
    --text-shadow: 0 0px 1px rgba(0,0,0,0.7)
}

[data-theme="dark"] {
  --text-color: #fff;
  --background-color: #000;
  --button-background: var(--secondary-color);
  --input-focus-color: var(--secondary-color);
  --button-color: #000;
  --button-hover-background: #27ae60;
  --button-hover-color: #000;
  --footer-background: #fff;
  --footer-text-color: #000;
  --link-text-color: var(--secondary-color);
  /* --box-shadow: 0 2px 4px #2ecc71; */
  /* --box-shadow: 0 -4px 7px #2ecc71; */
  --box-shadow: 0 4px 7px #2ecc71;
  --header-background-color: #000;
  --border-nav: 3px solid #000;
  /* --text-shadow: 0 1px 1px rgba(255,255,255,0.1) */
    --text-shadow: 0 0px 1px rgba(255,255,255,0.2);
    --header-bottom-color: var(--secondary-color);
}

* {
  box-sizing: border-box;
  font-family: "Raleway", sans-serif;
  font-weight: 400;
}

html {
  margin: 0;
  padding: 0;
  height: 100%; /* Assure que le html occupe toute la hauteur de la fenêtre */
  overflow-x: hidden; /*Empêche le débordement horizontal */
}
body {
  /* font-size:16px; */
  /* font-family: Arial, sans-serif; */
  /* line-height: 1.6; */
  background-color: var(--background-color);
  color: var(--text-color);
  margin: 0;
  padding: 0;
  min-height: 100dvh; /* Assure que le body occupe au moins 100% de la hauteur de la fenêtre */
  overflow-x: hidden;  /* Empêche le débordement horizontal
  /* overflow-y: hidden; Empêche le débordement vertical */

  /* overflow-x: hidden; */
  width: 100%; /* Assure que le body occupe toute la largeur de la fenêtre */
  /* display: grid; Utilise une grille pour la mise en page */


 
}




[data-aos] {
  overflow-x: hidden; /* Empêche le débordement horizontal pour les éléments animés */
}

a svg {
  /* fill: #000; Couleur de l'icône X */
  fill: #6f42c1;
  /* fill: white; */
  /* fill: var(--text-color); */
  /* color: var(--background-color); */
  width: 20px;
  height: 20px;
  transition: fill 0.3s;
  /* background-color: #fff; */
  display: flex;
}

a:hover svg {
  /* fill: #555; Couleur de l'icône au survol */
  fill: var(--link-text-color);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.social-media {
  background-color: var(--background-color);
  /* background-color: #6f42c1; */
  /* background-color: var(--button-background); */
  /* color : var(--link-text-color); */
  /* background-color: var(--text-color); */
  border-radius: 50%;
  display: flex;
  /* align-items: center; */
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 4px;
}
.social-media:hover {
  /* background-color: var(--button-hover-background); */
  /* background-color:var(--link-text-color); */
}
.media_logo {
  padding: 2px;
  /* background-color: var(--button-background); */
  border-radius: 50%;
}
.social-media:hover {
  /* background-color: var(--button-hover-background); */
  /* background-color:var(--link-text-color); */
}

.github-icon {
  /* background-color: var(--background-color); */
  /* background-color: var(--button-background); */

  border-radius: 50%;
}
/*contement */
.consent-popup {
  display: none;
  position: fixed;
  /* bottom: 20px; */
  left: 20px;
  background-color: white;
  padding: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  color: black;
  width: 300px;
  top: 150px;
  font-size: 0.8rem;
}

.consent-popup.visible {
  display: block;
  /* display: none; */
}
#withdraw-consent {
  font-size: 0.8rem;
  padding: 5px;
  /* display: none; */
}
#accept-consent,
#decline-consent {
  font-size: 0.8rem;
  padding: 8px;
}

#dark-mode-toggle {
  margin-right: auto;
  color: #fff;
  padding: 4px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background-color: var(--button-background);
  color: var(--button-color);
  /* text-shadow: var(--text-shadow); */
  /* provisoirement désactivé rgpd */
  /* display: none; */
}
.button-text {
    position: relative;
    text-shadow: var(--text-shadow); /* léger relief */
}

.button-text::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.25); /* overlay semi-transparent pour contraste */
    border-radius: inherit;
    z-index: -1;
}


/* stylisation svg X */
.svg-link svg {
  background-color: #f0f0f0; /* Changez la couleur de fond selon vos besoins */
  border-radius: 12px; /* Ajustez le rayon de bordure selon vos besoins */
  padding: 4px; /* Ajoutez du padding pour éviter que le contenu touche les bords */
}

/* Ajoutez ceci à votre fichier style.css */
.animate-fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

.animate-fade-up.active {
  opacity: 1;
  transform: translateY(0);
}

main {
  margin-top: 100px;
  /* padding:2px; */
  padding: 10px 5px;
  /* row-gap: 20px; */
  grid-row: 2;
  text-align: left;
  /* padding-left: 4px;
  padding-right: 4px; */
  /* padding: 0px 4px; */
}

@media (min-width: 1024px) {
  main {
    /* padding-bottom: 20px; */
    /* text-align: center;  */
    /* padding-left: 4px;
  padding-right: 4px; */
    padding: 20px;
  }
}
/* style page index */

.sub-title {
  padding: 0px 4px;
  margin-top: auto;
}
.sub-title__content {
  padding: 0px 4px;
}

main.index-page {
  /* padding: 20px; Ajoute de l'espace autour du contenu principal */
  gap: var(--grid-gap); /* Ajoute de l'espace entre les éléments */
  width: 100%; /* Par défaut, la largeur est de 100% pour les petits écrans */
  /* padding: 10px; Ajoute un padding pour un meilleur espacement */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.info-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  box-sizing: border-box; /* Inclut les marges et les paddings dans la largeur totale */
  flex-direction: column;
  /* gap:20px; */
}

/* logique des info-containers */

/* .info-container__box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: 100%;
  box-sizing: border-box; /* Inclut les marges et les paddings dans la largeur totale */
/* }  */
/* 
@media (min-width: 1024px) {
  .info-container__box {
    flex-direction: row;
    justify-content: space-around;
  }
}

.info-container__box:nth-child(even) {
  display: none;
}

@media (min-width: 1024px) {
  .info-container__box:nth-child(even) {
    display: grid;
    grid-template-columns: 500px auto;
    justify-content: center;
    justify-items: center;
  }
}

.info-container__box:nth-child(odd) {
  display: flex;
}
@media (min-width: 1024px) {
  .info-container__box:nth-child(odd) {
    display: none;
  }
} */


/* essai nouvelle logique info-container__box */
.info-container__box {
  /* display: flex;
  flex-direction: column;
  align-items: center; */
    display: grid;
grid-template-columns: 1fr;
  gap: 20px;

}
@media (min-width: 1024px) {
  .info-container__box {
    /* flex-direction: row;
    justify-content: center; */
    align-items: center;
      display: grid;
  grid-template-columns: 1fr 1fr;
  }
  .info-container__box.reverse {
    flex-direction: row-reverse;
  }
}
/* logique des infos images */

.info-img {
  width: 100%;
  z-index: 1000;
  /* border: 2px solid var(--link-text-color);  */
  box-shadow: var(--box-shadow);
  height: auto;
  opacity: 1;
  transform: translateX(0);
  transition: opacity 1.8s ease-out, transform 1.8s ease-out;
}

/* Animation simple pour mobile - optimisée performance */
.anime-img {
  opacity: 0;
  transform: translateX(-30px);
  will-change: opacity, transform;
  transition: opacity 1.8s ease-out, transform 1.8s ease-out;
}

.anime-img.visible {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 1.8s ease-out, transform 1.8s ease-out;
}

/* Animation pour le titre */
.anime-fadein {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}

.anime-fadein.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Optimisations mobile */
@media screen and (max-width: 768px) {
  .anime-img {
    transform: translateX(-15px); /* Mouvement plus subtil sur mobile */
    transition: opacity 1.4s ease-out, transform 1.4s ease-out; /* Très doux */
  }
  
  .anime-img.visible {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 1s ease-out, transform 1s ease-out; /* Très doux */
  }
  
  .anime-fadein {
    transform: translateY(10px); /* Mouvement plus subtil */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Plus doux */
  }
  
  /* Désactiver will-change sur mobile ancien pour éviter les bugs */
  @media (max-width: 480px) {
    .anime-img, .anime-fadein {
      will-change: auto;
    }
  }
}
@media screen and (min-width: 1024px) {
  .info-img {
    width: 500px;
    height: auto;
  }
}

.btn-devis {
  /* margin-left:auto; */
  /* padding:20px 10px; */
    position: relative;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background-color: var(--button-background);
  color: var(--button-color);
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
  margin: auto;
  text-shadow: var(--text-shadow);
}

.btn-devis::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.25); /* overlay semi-transparent pour contraste */
    border-radius: inherit; /* si ton bouton a des coins arrondis */
    z-index: -1;
}

@media screen and (min-width: 768px) {
  .btn-devis {
    position: relative;
    margin: auto;
    background-color: var(--button-background);
    color: var(--button-color);
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
    text-shadow: var(--text-shadow)
  }
}

h1 {
  /* margin-top: 0; */
  text-align: center;
}

.devis-title {
  margin-top: 55px;
}

a:visited {
  text-decoration: none;
  /* color: var(--link-text-color) */
}

header {
  /* background-color: var(--tertiary-color); */
  /* background-color: var(--header-background-color); */
  background-color: var(--background-color);

  /* color: var(--text-color); */
  /* padding: 10px; */
  text-align: center;
  position: fixed;
  width: 100%;
  z-index: 1001;
  /* esssai */
  grid-row: 1;
}
/* message de retour du site */
.message {
  font-weight: 600;
}

/* style du footer */

footer {
  background-color: var(--footer-background);
  color: var(--footer-text-color);
  text-align: center;
  padding: 10px; /* Ajoute un peu de padding pour le footer */
  grid-row: 3;
  display: flex;
}

footer {
  /* display: flex;
  align-items: center; */
  /* justify-content: space-evenly; */
  /* display: grid;
  grid-template-columns: 1fr 1fr; */
  justify-items: center;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
  gap: 20px;
}

footer a {
  color: var(--footer-text-color);
  text-decoration: none;
}
/* Menu */

/* logo */
.navbar-logo {
  height: 80px; /* Ajustez la hauteur selon vos besoins */
  width: auto; /* Maintient le ratio d'aspect de l'image */
  /* margin-right: 10px; Espace entre le logo et le texte */
}

.navbar {
  display: flex;
  justify-items: center;
  align-items: center;
  justify-content: space-evenly;
  /* background-color: var(--tertiary-color); */
  position: relative;
  /* color: white; */
  color: var(--text-color);
  border-bottom: 4px solid var(--header-bottom-color);
  padding-bottom:2px;
  /* padding-bottom: 4px; */
  /* font-size: 24px !important; */
}
/* modif résolution iphone */
/* @media (min-width: 768px) { */
/* @media(min-width: 678px){ */
@media (min-width: 700px) {
  /* @media (min-width: 732px) { */

  #navbar {
    background-color: var(--tertiary-color);
  }
}

/* modif résolution iphone */
/* @media (min-width: 768px) { */
/* @media(min-width: 678px){ */
@media (min-width: 700px) {
  /* @media (min-width: 732px) { */

  #navbar-brand {
    /* color: white; */
    font-size: 24px;
    /* font-size: 30px; */
    /* text-transform: uppercase; */
  }
}

.navbar-brand {
  color: var(--text-color);
  /* color:white; */
  font-size: 24px;
  padding-right: 25px;
  /* text-transform: uppercase; */
}

/* essai navbar-menu
.navbar-menu {
  display: flex;
  flex-direction: column;
  /* transition: max-height 0.5s ease-out; */
  /* transition: max-width 0.5s ease-out; */
  /* height:100%; */
  /* max-height: 0; */
  /* max-width: 0; */
  /* overflow: hidden; */
  /* position: absolute; Positionner le menu en absolu */
  /* top: 100%; Placer le menu en dessous du header */
  /* left: 0; */
  /* right: 0; */
  /* background-color: var(
    --primary-color
  );  */
  /* Assurez-vous que le menu a un fond
  z-index: 1000; /* Assurez-vous que le menu est au-dessus d'autres éléments */
  /* margin-top:10px; */
/* } */
@media (min-width: 768px) {
  .navbar-menu {
 background-color: #fff;
  }
}
  
/* .navbar-menu.active { */
  /* max-height: 500px; */
  /* height: 100vh;
  max-width: 300px;
  background-color: var(--primary-color);
} */

/* @media (min-width: 768px) {
  .navbar-menu.active {
  
    background-color: var(--background-color);
  }
} */

/* .navbar-menu.active {
  display: flex;
  align-items: center;
  height: 100vh; 
} */

/* #navbar-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 250px; /* ou la largeur souhaitée */
  /* height: 100dvh;
  background: #222;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(.77,0,.18,1);
  z-index: 1000;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  
}

#navbar-menu.active {
  transform: translateX(0);
}

.navbar-toggle {
  display: none; */
/* } */ 

/* 

@media (min-width: 768px) {
  #navbar-menu {
    position: static;
    transform: none;
    display: flex;
    flex-direction: row;
    width: auto;
    height: auto;
    background: none;
    box-shadow: none;
    transition: none;
  }
  .navbar-toggle {
    display: none;

  }
} */
  
 #navbar-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  height: 100vh;
  background: var(--button-background);
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(.77,0,.18,1);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 85px;
  height: 100%;
}

#navbar-menu.active {
  transform: translateX(0);
  margin-top: 85px;
  height: 100%;
}

@media (min-width: 768px) {
  #navbar-menu {
    position: static;
    transform: none;
    transition: none;
    width: auto;
    height: auto;
    background: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 0;
  }
  .navbar-toggle {
    display: none;
  }
} 


/* #navbar-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  height: 100vh;
  background: #222;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(.77,0,.18,1);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#navbar-menu.active {
  transform: translateX(0);
}

@media (min-width: 768px) {
  #navbar-menu {
    position: static;
    transform: none;
    transition: none;
    width: auto;
    height: auto;
    background: none;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .navbar-toggle {
    display: none;
  }
} */


  

.navbar-item {
  color: var(--text-color);
  font-size: 1rem;
  /* color: white; */
  text-decoration: none;
  padding: 10px 15px;
  /* background-color: var(--background-color); */
  /* background-color: var(--primary-color); */

  /* border-top: none; */
  /* font-size: 18px !important; Ajustez la taille de la police pour les appareils en mode paysage */
  /* color:red; */
  /* transition: background-color 0.3s; */
  /* display: none; */
  /* display: none; */
  /* font-size: 24px; */
}

/* modif résolution iphone */
@media (min-width: 768px) {
  /* @media(min-width: 678px){ */
  /* @media(min-width: 700px){ */
  /* @media (min-width: 732px) { */

  .navbar-item {
    display: flex;
    /* background-color: var(--tertiary-color); */
    background-color: var(--header-background-color);
    padding: 0px 15px 0px;
  }
}

.navbar-menu.active .navbar-item {
  display: flex;
  font-size: 1rem;
}

.navbar-item {
  align-items: center;
  /* font-size: 16px !important; */
  /* font-size:24px !important; */
  /* color:blue; */
}

/* modif résolution iphone */
@media (min-width: 768px) {
  /* @media(min-width: 678px){ */
  /* @media(min-width: 700px){ */
  /* @media (min-width: 732px) { */

  .navbar-item {
    border: 3px solid var(--background-color);
    /* border: var(--border-nav); */
      /* border: var(--background-color); */
  }
}

.navbar-item:hover {
  border-bottom: 3px solid var(--primary-color);
}

/* modif résolution iphone */
@media (min-width: 768px) {
  /* @media(min-width: 678px){ */
  /* @media(min-width: 700px){ */
  /* @media (min-width: 732px) { */

  .navbar-item:hover {
    /* border-top: 2px solid var(--tertiary-color); */
    /* border-left: 2px solid var(--tertiary-color); */
    /* border-right: 2px solid var(--tertiary-color); */
    /* border-bottom: 2px solid var(--primary-color); */
    /* background-color: var(--tertiary-color); */
    background-color: var(--header-background-color);

    /* margin:auto; */
    /* width:100%; */
  }
}

@media only screen and (width: 393px) and (height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {
  .navbar-item {
    color: red;
  }
}

/* Classe pour les appareils en mode paysage */
/* .landscape-font-size {
  font-size: 16px !important; /* Ajustez la taille de la police pour les appareils en mode paysage */
/* } */

.navbar-toggle {
  position: relative;
  background-color: var(--button-background);
  display: block;
  margin: 5px 0;
}

.navbar-toggle-icon {
  width: 25px;
  height: 3px;
  background-color: #fff;
  display: block;
  margin: 5px 0;
  transition: all 0.3s ease;
}

.navbar-toggle.active .navbar-toggle-icon:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.navbar-toggle.active .navbar-toggle-icon:nth-child(2) {
  opacity: 0;
}

.navbar-toggle.active .navbar-toggle-icon:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* modif résolution iphone */
/*  */
/* @media (min-width: 768px) { */
/* @media (min-width: 678px){ */
/* en production */
/* @media (min-width: 700px){ */
/* essai */
@media (min-width: 768px) {
  /* @media (min-width: 732px) { */

  .navbar-menu {
    position: static; /* Réinitialiser la position pour les écrans de bureau */
    display: flex;
    flex-direction: row;
    width: auto;
    overflow: visible;
    align-items: center;
    /* max-height: none; */
    height: 100%;
    margin-top: 0;
    /* background-color: var(--tertiary-color); */
  }

  .navbar-menu.active {
    display: flex;
    /* max-height: none; */
    height: 100%;
  }

  .navbar-toggle {
    display: none;
  }
}

button {
  background-color: var(--button-background);
  color: var(--button-color);
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
}

button:hover {
  background-color: var(--button-hover-background);
  color: var(--button-hover-color);
}

/* style lié à la page contact */

/* Positionnement de la page contact */
main.contact-page {
  display: grid;
  grid-template-columns: var(--grid-columns-mobile);
  grid-template-rows: auto; /* Une ligne pour chaque élément */
  justify-items: center; /* Centre les éléments horizontalement */
  align-items: start; /* Aligne les éléments en haut */
  /* padding: 20px; Ajoute de l'espace autour du contenu principal */
  gap: var(--grid-gap); /* Ajoute de l'espace entre les éléments */
  width: 100%; /* Par défaut, la largeur est de 100% pour les petits écrans */
  /* padding: 10px; Ajoute un padding pour un meilleur espacement */
}

@media (min-width: 600px) {
  .contact-page__container {
    width: 500px; /* Ajuste la largeur à 500px pour les écrans plus grands
/* width: auto; */
  }
}

.contact-page__container {
  display: grid;
  justify-self: center; /* Centre horizontalement */
  align-self: center; /* Centre verticalement */
  padding: 6px; /* Supprime le padding pour les écrans plus grands */
  justify-items: center; /* Centre les éléments horizontalement */
}

.contact-page__form {
  width: 100%;
  display: grid;
  justify-self: center; /* Centre horizontalement */
  align-self: center; /* Centre verticalement */
}
@media (min-width: 600px) {
  .contact-page__form {
    width: auto;
  }
}

.contact-page__info, .contact-page__title{
text-align: center;
margin: 6px 0;
}

/* message success error formulaire */
.error {
  color: red;
}

.success {
  color: green;
}

/* style page réalisation */
img {
  max-width: 100%;
  height: auto;
  /* display: block; */
}


.realisations-image__bureau {
  width: 500px;
  height: auto;
}



.realisations-image__mobile {
  width: 150px;
  height: auto;
}
@media screen and (min-width: 1024px) {
  .realisations-image__mobile {
    width: 200px;
  }
}

.realisations-page__left-container,
.realisations-page__right-container {
  border-radius: 5px;
  box-shadow: var(--box-shadow);
  padding: 20px;
}

/* style relatif à la page realistations */

main.realisations-page {
  display: grid;
  grid-template-columns: var(--grid-columns-mobile);
  grid-template-rows: auto; /* Une ligne pour chaque élément */
  justify-items: center; /* Centre les éléments horizontalement */
  align-items: start; /* Aligne les éléments en haut */
  /* padding: 20px; Ajoute de l'espace autour du contenu principal */
  gap: var(--grid-gap); /*Ajoute de l'espace entre les éléments */
  width: 100%; /* Par défaut, la largeur est de 100% pour les petits écrans */
  /* padding: 10px; Ajoute un padding pour un meilleur espacement */
}

@media (min-width: 1024px) {
  main.realisations-page {
    display: grid;
    grid-template-columns: 2fr;
    /* gap: 80px; */
  }
}

.realisations-page__left-container,
.realisations-page__right-container {
  display: grid;
  flex-direction: column;
  gap: var(--grid-gap);
  justify-items: center;
  align-items: center;
  box-shadow: var(--box-shadow);
}

@media (min-width: 1024px) {
  .realisations-page__left-container,
  .realisations-page__right-container {
    justify-items: center;
    align-items: start;
    grid-template-columns: 1fr;
    display: grid;
    padding-top: 20px;
    box-shadow: var(--box-shadow);
  }
}

.realisations-page__right-container__title {
  text-align: center;
}

.realisations-page__left-container__aside,
.realisations-page__right-container__aside {
  display: grid;
  gap: var(--grid-gap);
  justify-items: center;
  align-items: center;
}

@media (min-width: 1024px) {
  .realisations-page__left-container__aside,
  .realisations-page__right-container__aside {
    align-items: start;
    grid-template-columns: 1fr 1fr;
    display: grid;
    align-items: center;
    padding-bottom: 20px;
  }
}

a.realisations-page__left-container__title__link {
  text-decoration: none;
  cursor: pointer;
  color: var(--button-color);
  padding: 10px 15px;
  border-radius: 5px;
  background-color: var(--button-background);
  
}

/* style relatif à la page prestations */

main.prestations-page {
  display: grid;
  grid-template-columns: var(--grid-columns-mobile);
  grid-template-rows: auto; /* ajustement pour la page prestations Une ligne pour chaque élément */
  justify-items: center; /* Centre les éléments horizontalement*/
  align-items: start; /*Aligne les éléments en haut*/
  /* gap: var(--grid-gap); Ajoute de l'espace entre les éléments */
  width: 100%; /* Par défaut, la largeur est de 100% pour les petits écrans */
  /* padding: 10px; Ajoute un padding pour un meilleur espacement */
  /* justify-items: end; */
}

.prestations-page__container {
  display: grid;
  justify-items: center; /* Centre les éléments horizontalement */
  row-gap: 10px;
  grid-template-columns: 1fr; /* Une colonne pour les petits écrans */
}
@media (min-width: 1024px) {
  .prestations-page__container {
    grid-template-columns: 1fr 1fr;
    row-gap: 50px;
  }
}

.vitrine-list,
.security-list {
  display: block; /* Réinitialise le display si nécessaire */
  justify-items: initial; /* Réinitialise justify-items */
  /* margin: 0 auto; Centre le contenu de vitrine-list */
  margin-right: auto;
  list-style-type: disc; /* Style des puces de liste */
  padding-left: 20px; /* Ajoute du padding à gauche pour les puces */
  text-align: left; /* Aligne le texte à gauche */
  padding: 20px;
  border-radius: 5px;
  box-shadow: var(--box-shadow);
}
@media (min-width: 1024px) {
  .vitrine-list,
  .security-list {
    max-width: 900px; /* Limite la largeur à 900px */
  }
}

.vitrine-list li {
  margin-bottom: 10px; /* Ajoute de l'espace entre les éléments de la liste */
}

.prestations-page__description {
  /* background-color: var( --background-color); */
  padding: 20px;
  border-radius: 5px;
  box-shadow: var(--box-shadow);
}

.styled-table {
  width: 100%;
  border-collapse: collapse;
  /* margin: 25px 0; */
  margin-bottom: 25px;
  font-size: 18px;
  text-align: left;
}

@media (min-width: 1024px) {
  .styled-table {
    max-width: 900px;
  }
}

.styled-table th,
.styled-table td {
  padding: 12px 15px;
}

.styled-table thead tr {
  background-color: #009879;
  color: #ffffff;
  text-align: left;
}

.styled-table thead tr th:last-child {
  text-align: center;
}

.styled-table tbody tr {
  border-bottom: 1px solid #dddddd;
}

.styled-table tbody tr:nth-of-type(even) {
  /* background-color: #f3f3f3; */
  background-color: var(--button-background);
}

.styled-table tbody tr:last-of-type {
  border-bottom: 2px solid #009879;
}

.styled-table tbody tr:hover {
  background-color: #f1f1f1;
}

.styled-table tbody tr > td:last-child {
  text-align: center;
}

.benchmark-mdn {
  width: 100%;
}

@media (min-width: 1024px) {
  .benchmark-mdn {
    max-width: 900px;
  }
}
/* 
.prestations-page__details{
  display: grid;
  justify-items: center;
} */

.prestations-page__details {
  display: grid; /* ou display: flex; */
  /* justify-items: center; */
  text-align: center; /* Pour centrer le texte à l'intérieur du paragraphe */
  padding: 20px; /* Optionnel : Ajoute du padding pour un meilleur espacement */
}

.prestations-page__details p {
  max-width: 800px; /* Optionnel : Limite la largeur du paragraphe */
  margin: 0 auto; /* Centre le paragraphe horizontalement */
}

/* .prestations-pages > h4{
  color: var(--primary-color);
} */

body > .prestations-page > h4 {
  color: var(--primary-color);
}

body > .prestations-page > h3 {
  color: #2980b9;
  font-size: 1.5rem;
}

/* Code lié au formulaire  */

@media screen and (max-width: 1024px) {
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

#submit-button {
  background-color: var(--button-background);

  color: var(--button-color);
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  justify-self: center;
  align-self: center;
  width: 50%; /* Ajustez cette valeur selon vos besoins */
  max-width: 200px; /* Limite maximale de la largeur */
  margin-top: 10px;
}
input,
textarea {
  outline: 0;
  padding: 10px 0px;
  border-radius: 8px;
  box-shadow: var(--box-shadow);
  display: block;
  width: 100%;
  resize: none;
  font-family: "Merriweather", sans-serif;
  color: var(--text-color);
  border: 1px solid #ccc; /* Bordure */
  border-radius: 5px; /* Bordures arrondies */
  background-color: #f9f9f9; /* Couleur de fond */
  color: #333; /* Couleur du texte */
  font-family: Arial, sans-serif; /* Police */
  font-size: 16px; /* Taille de la police */
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); Ombre */
  resize: vertical; /* Permet de redimensionner verticalement */
}
@media (min-width: 600px) {
  input,
  textarea {
    width: 24rem;
    resize: none; /* Désactive le redimensionnement */
  }
}

#service {
  box-shadow: var(--box-shadow);
}

label {
  padding-bottom: 5px;
  padding-top: 5px;
}

textarea {
  max-width: 600px; /* Limite maximale de la largeur */
  height: 150px; /* Hauteur du textarea */
  border: 1px solid #ccc; /* Bordure */
  font-family: Arial, sans-serif; /* Police */
  resize: vertical; /* Permet de redimensionner verticalement */
  margin-bottom: 10px; /* Espace en bas */
}

input:focus,
textarea:focus {
  border-color: var(--input-focus-color); /* Couleur de la bordure en focus */
  outline: none; /* Supprime le contour par défaut */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Ombre en focus */
}

main.mentions {
  /* justify-items: center; */
  align-items: center;
  /* gap: var(--grid-gap); */
  gap: 30px;
  width: 100%;

  display: grid;
}
.mentions__section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 1024px) {
  .mentions__section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-left: 50px;
  }
}

.mentions__section__aside {
  padding: 20px;
  border-radius: 5px;
  box-shadow: var(--box-shadow);
}

.credit-photo__link {
  text-decoration: none;
  color: var(--link-text-color);
}

.contact-link {
  text-decoration: none;
  color: var(--link-text-color);
}
.contact-link:visited {
  text-decoration: none;
}

strong {
  font-weight: 600;
}

/* error message contact */
.error {
  color: red;
  font-weight: 800;
}

/* success message contact */
.success {
  color: green;
  font-weight: 800;
}

/* honeypot */

/* .extra-info {
  position:absolute;
  left:-9999px;
} */


.hidden-field {
  position: relative;
  height: 0;
  overflow: hidden;
}

.hidden-field label {
  display: none;
}

.hidden-field input {
  position: absolute; /* caché hors flux, mais pas avec left:-9999px */
  left: 0;
  top: 0;
  opacity: 0; /* invisible mais présent */
  pointer-events: none; /* empêche interaction */
  user-select: none;
}

/* testimonial */

.testimonial-slider {
  margin-top: 10px;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 220px;
  /* min-height: 170px; Hauteur minimale */
}

@media screen and (min-width: 1024px) {
  .testimonial-slider {
    height: 140px;
  }
}
.review {
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.5s ease, transform 0.5s ease;
  position: absolute;
  width: 100%;
  color: black;
  color: var(--text-color);
  text-align: center;
}

.review.active {
  opacity: 1;
  transform: translateX(0);
}

.review.previous {
  opacity: 0;
  transform: translateX(-100%);
}

.stars {
  font-size: 20px;
  color: gold;
}

.testimonial-author {
  font-weight: bold;
  margin-top: 10px;
  /* --text-color: #fff; */
}

.testimonial__title {
  margin-bottom: 0;
  /* --text-color: #fff; */
  /* color: black; */
  /* color: blue; */
  color: var(--text-color);
 
}

.testimonial__link {
  text-decoration: none;
  color: var(--link-text-color);
   /* text-shadow: var(--text-shadow); */
   font-weight: 600; /* rend le texte un peu plus lisible */
}

.info-container__box__content, .why-choose, .methodology , .faq-home {
  max-width: 90%; /* Réduit la largeur maximale sur les écrans plus petits */
  margin: 0 auto; /* Centre l'élément horizontalement */
  padding: 20px; /* Ajoute du padding pour éviter que le contenu ne touche les bords */
  box-sizing: border-box; /* Inclut le padding dans la largeur totale */
}

@media (min-width: 1024px) {
  .info-container__box__content {
    max-width: 800px; /* Limite la largeur à 800px */
  }
}

.info-container__box__content > h4 {
  font-weight: 600;
  /* color: #134cff; */
  color: #1a73e8;
}

.github-icon {
  /* fill: white; Couleur de l'icône GitHub */
  background-color: var(--background-color);
  width: 31px;
  height: 31px;
  transition: fill 0.3s;
}
/* .x_logo{
  display: block;
} */

.github-icon:hover {
  fill: gold; /* Couleur de l'icône au survol */
}
.place {
  text-align: center;
}

/* Nouvel essai complet */

/* style tuto */

.tuto-page {
  /* margin-top: 100px; */
  display: flex;
  flex-direction: column;
  padding: 0px 5px;
  box-sizing: border-box; /* Inclut le padding dans la largeur totale */
  width: 100%;
  overflow-x: hidden; /* Cache le débordement horizontal */
}

.tuto-page section {
  width: 100%;
  /* padding: 0px 5px; */
  box-sizing: border-box; /* Inclut le padding dans la largeur totale */
}

@media (min-width: 400px) {
  .tuto-page section {
    max-width: 100%;
    margin: auto;
  }
}

@media (min-width: 1024px) {
  .tuto-page section {
    max-width: 1000px; /* Limite la largeur à 1000px */
  }
}

.tuto-page__title {
  width: auto;
}

.php-code {
  color: var(--button-background)
}

.cdn-links {
  color: blue;
  word-wrap: break-word; /* Casse les mots longs */
  overflow-wrap: break-word; /* Casse les mots longs */
  white-space: normal; /* Permet au texte de passer à la ligne suivante */
  word-break: break-all; /* Casse les mots longs à n'importe quel point */
  overflow: hidden; /* Cache le débordement */
  text-overflow: ellipsis; /* Ajoute des points de suspension pour le texte tronqué */
  max-width: 100%; /* Limite la largeur à 100% du conteneur parent */
}

.nowrap-link {
  white-space: nowrap;
}

.nowrap-link {
  text-decoration: none;
  color: var(--link-text-color);
}
.nowrap-link:visited {
  text-decoration: none;
}

#big-img {
  width: 100%; /* Largeur de 100% sur les appareils mobiles */
  max-width: 100%; /* Largeur maximale de 100% */
}

@media (min-width: 1024px) {
  #big-img {
    max-width: 500px; /* Limite la largeur à 900px sur les appareils de plus grande taille */
    display: block;
    margin: 0 auto;
  }
}

@media (min-width: 1024px) {
  .figcaption-style {
    text-align: center;
  }
}

.tuto-image {
  width: 100%; /* Largeur de 100% sur les appareils mobiles */
  max-width: 100%; /* Largeur maximale de 100% */
}

figure {
  margin: 0; /* Supprime les marges par défaut */
  padding: 0; /* Supprime le padding par défaut */
}

@media (min-width: 1024px) {
  .tuto-image {
    max-width: 900px; /* Limite la largeur à 900px sur les appareils de plus grande taille */
  }

  figure {
    padding: 10px; /* Ajoute du padding pour les appareils de plus grande taille */
  }
}

.final {
  text-align: center;
  font-weight: bold;
}

.mdn-repo-link {
  color: #408a8b;
  font-size: 1.5rem;
  font-weight: bold;
  display: flex;
  justify-content: center;
  padding: 20px;
}

.code-snippet {
  border: 1px solid #ccc;
  padding: 10px;
  background-color: #f9f9f9;
  overflow-x: auto; /* Ajoute un défilement horizontal si nécessaire */
  white-space: pre-wrap; /* Permet de renvoyer à la ligne automatiquement */
  word-wrap: break-word; /* Permet de couper les mots trop longs */
}

.promotion {
  background-color: #f9f9f9;
  border: 2px solid #408a8b;
  padding: 20px;
  margin: 20px 0;
  text-align: center;
}

.hidden {
  display: none;
}

.visits-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 18px;
  text-align: left;
}

.visits-table th,
.visits-table td {
  padding: 12px 15px;
  border: 1px solid gray;
}

.visits-table th {
  background-color: #f4f4f4;
  font-weight: bold;
}

.visits-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.button-container {

  gap: 20px;
}

.styled-button {
  margin-bottom: 20px;
}


.styled-button {
  display: inline-block;
  padding: 40px 70px;
  margin: 10px;
  font-size: 16px;
  color: #fff;
  background-color: var(--button-background);
  border: none;
  border-radius: 5px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

.styled-button:hover {
  background-color: #0056b3;
}

.button-container {
  margin-top: 20px;
  display: flex;
  flex-direction: column;

}








.visits-container {
  padding: 20px; /* Ajoute de l'espace autour du contenu principal */
  gap: var(--grid-gap); /* Ajoute de l'espace entre les éléments */
  width: 100%; /* Par défaut, la largeur est de 100% pour les petits écrans */
  padding: 10px; /* Ajoute un padding pour un meilleur espacement */
}

.visits-table {
  width: 100%;
  border-collapse: collapse;
}

.visits-table th, .visits-table td {
  border: 1px solid #ddd;
  padding: 8px;
}

.visits-table th {
  background-color: #f2f2f2;
  text-align: left;
}

.visits-table tr:nth-child(even) {
  background-color: black;
  color: white;  
}

.visits-table tr:hover {
  background-color: #6f42c1;
}

.visits-table tr.separator td {
  border-top: 2px solid #000;
}

/* Responsive styles */
@media (max-width: 768px) {
  .visits-table, .visits-table thead, .visits-table tbody, .visits-table th, .visits-table td, .visits-table tr {
    display: block;
  }

  .visits-table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }



  /* .visits-table thead tr {
 display:none;
  } */



  .visits-table tr {
    border: 1px solid #ddd;
    margin-bottom: 10px;
  }

  .visits-table td {
    border: none;
    border-bottom: 1px solid #ddd;
    position: relative;
    padding-left: 50%;
    text-align: left;
  }

  .visits-table td:before {
    position: absolute;
    top: 50%;
    left: 10px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    transform: translateY(-50%);
    font-weight: bold;
  }

  .visits-table td:nth-of-type(1):before { content: "Page visitée"; }
  .visits-table td:nth-of-type(2):before { content: "Heure de la visite"; }
  .visits-table td:nth-of-type(3):before { content: "Heure locale"; }
  .visits-table td:nth-of-type(4):before { content: "Type d'appareil"; }
  .visits-table td:nth-of-type(5):before { content: "User Agent"; }
  .visits-table td:nth-of-type(6):before { content: "Réferent"; }
  .visits-table td:nth-of-type(7):before { content: "Agent Provisoire"; }
}



/* style 404 */

.page-404{
  display: grid;
  grid-template-rows: auto 1fr auto; /* Header, Main, Footer */
  grid-template-columns:  auto;
  margin: 0;
}



main.index-404 {
  /* padding: 20px; Ajoute de l'espace autour du contenu principal */
  gap: var(--grid-gap); /*Ajoute de l'espace entre les éléments
  width: 100%; /* Par défaut, la largeur est de 100% pour les petits écrans */
  /* padding: 10px; Ajoute un padding pour un meilleur espacement */
 display: flex;
  
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
}

.index-link{
  color: var(--link-text-color);
}



#benjaminweb-svg{
  margin-left: 80px;
}

#benjaminweb-svg{
width: 400px
}


@media (min-width:768px){
  #benjaminweb-svg{
    width: 500px;
  }
}




.methodology, .why-choose, .faq-home {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 20px;
  box-shadow: var(--box-shadow);
}

.contact-info{
   box-shadow: var(--box-shadow);
   padding:5px;
   text-align: center;
}
  .contact-info a{
    color: var(--link-text-color);
  }