body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #ffffff;
    /*-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;*/
    user-select: none;
    background-color: rgb(225, 225, 225);
}
input, textarea, select {
  user-select: text;
}


.lienbleu
{
  color: #007bff;
}



/*////  Entête    //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* Styles généraux */
/* CSS de base */

.entetepage1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #000000;
  color: #ffffff;
  padding: 20px;
  text-align: center;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  height: 80px;
  position: relative; /* Ajouté */
  box-shadow: 0px 1px 2px rgb(59, 222, 255) ;
}

.logo img {
  height: 60px;
  border-radius: 5px;
  margin-bottom: 30px;
}

.nav-buttons {
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 30px;
  color: #ffffff;
  cursor: pointer;
  height: 44px;
  width: 44px;
  margin-left: 10px;
  margin-top: 19px;
}

.menu-toggle:hover {
  background-color: #0069d9;
}


nav ul {
  list-style: none;
  padding: 0px;
  display: flex;
  justify-content: space-around;

}

nav ul::after {
  content: "";
  display: table;
  clear: both;
}

.navli {
  padding-left: 40px;
  padding-right: 40px;
  display: inline-block; /* Pour aligner les éléments horizontalement */
  position: relative;
}



.navli a {
  text-decoration: none;
  color: #ffffff;
  padding: 10px 0px; /* Espace interne du lien */
  transition: all 0.3s ease; /* Animation de transition */
  position: relative;
}

.navli::after {
  content: '';
  position: absolute;
  top: 50%; /* Alignement vertical au centre */
  width: 1px; /* Largeur du séparateur */
  height: 60%; /* Hauteur du séparateur */
  background-color: #ddd; /* Couleur du séparateur */
  right: -5px; /* Position à droite du lien */
  transform: translateY(-50%); /* Décalage vertical de moitié de la hauteur */
}

.navli:last-child::after {
  display: none; /* Cacher le séparateur pour le premier élément */
}

nav a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  transition: color 0.3s ease-in-out;
  display: block;
  justify-content: center;
}

nav a:hover {
  color: rgb(0, 203, 253);
}

nav ul li {
  position: relative;
  text-align: center; /* Centrer le texte pour l'élément parent */
}

nav > ul li:hover .sous {
  display: block;
}



.sousmenu {
  display: none;
  position: absolute;
  top: calc(100% + 1px); /* Place le menu en dessous du bouton toggle */
  left: 50%; /* Aligne le menu au centre horizontalement */
  transform: translateX(-50%); /* Centrage horizontal */
  min-width: 200px; /* Largeur minimale des sous-menus */
  z-index: 1000;
  background-color: rgb(24, 24, 24);
  border-radius: 5px;
  box-shadow: 0px 1px 2px rgb(0, 203, 253);
}



.sousmenu li {
  text-align: center; /* Centre le texte à l'intérieur du menu */
}

.sousmenu a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #fff;
}

.sousmenu a:hover {
  background-color: rgba(200, 200, 200, 0.2);
  padding-left: 30px;
  transition: padding-left 0.3s ease-in-out, background-position 0.3s ease-in-out;
  border-radius: 3px;
}

li:hover .sousmenu {
  display: block;
}

.menuli:hover
{
  padding-left: 0px;
}




.login-button {
  margin-left: 10px;
}

.login-button a {
  display: inline-block;
  padding: 10px 15px;
  color: white;
  background-color: #007BFF;
  border: none;
  border-radius: 5px;
  text-decoration: none;
  font-size: 16px;
  white-space: nowrap;
}

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




@media only screen and (max-width: 1400px) {
  .menu-toggle {
    display: block;
  }

  .main-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 80px; /* Ajusté pour être sous l'en-tête */
    left: 0; /* Ajusté pour aligner à gauche */
    width: 100%;
    background-color: #000000;
    z-index: 1000;
    border-radius: 5px;
    box-shadow: 0px 1px 2px rgb(0, 203, 253);
    margin-top: 5px;
  }
 
  .main-menu ul {
    padding: 0;
  }

  .main-menu li {
    margin: 0px 0;
    width: 100%;
    text-align: center;
  }

  .main-menu.show {
    display: flex;
    animation: fadeSlideIn 0.4s ease-in-out;
  }

  .sousmenu {
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    min-width: 200px; /* Ajustez la largeur minimale selon vos besoins */
  }

  .sousmenu a:hover {
    background-color: rgba(200, 200, 200, 0.2);
    padding-left: 20px;
    transition: padding-left 0.3s ease-in-out, background-position 0.3s ease-in-out;
    border-radius: 3px;
  }
  
.menuli:hover
{
  padding-left: 0px;
}
  
}


@keyframes fadeSlideIn {
  from {
    opacity: 0.1;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


@media only screen and (max-width: 900px) {
  .menu-toggle {
    display: block;
  }

  .main-menu {
    display: none;
    flex-direction: column;
    align-items: flex-end; /* Aligné à droite */
    position: absolute;
    top: 80px; /* Ajusté pour être sous l'en-tête */
    right: 20px; /* Ajusté pour être à droite */
    width: 160px; /* Largeur du menu toggle réduite */
    background-color: #000000;
    z-index: 1000;
    border-radius: 5px;
    box-shadow: 0px 1px 2px rgb(0, 203, 253);
  }

  .main-menu ul {
    flex-direction: column;
    align-items: center;
    padding: 0;
    width: 100%;
  }

  .main-menu li {
    margin: 10px 0;
    width: 100%;
    text-align: center;
  }

  .main-menu.show {
    display: flex;
    left: auto; /* Réinitialisation de la position à gauche */
    right: 40px; /* Décalage de 20px vers la droite */
    padding-left: 5px;
    padding-right: 5px;
  }
}

@media only screen and (max-width: 1100px) {
  .logo img {
    height: 40px;
  }
}



  /*  Index////////////////////////////////////////////////////////////////////////////////*/
  .presentation {

    background-color: #2c3e50; /* Couleur de fond plus moderne */
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
      opacity: 0.9; /* Augmenter légèrement l'opacité */
    animation: fadeIn 1s ease-in-out forwards, slideIn 0.8s ease-in-out forwards;
    }
    
    .presentation .text {
      font-size: 20px;
      color: #ffffff;
      line-height: 1.6;
    }
    .text {
    font-size: 18px;
    line-height: 1.6;
    text-align: center;
    color: white;
    padding: 20px; /* Ajuster le padding pour la réactivité */
    }
    
    @keyframes fadeIn {
    from {
    opacity: 0.1;
    }
    to {
    opacity: 0.67;
    }
    }
    
    @keyframes slideIn {
    from {
    transform: translateY(-20px);
    }
    to {
    transform: translateY(0);
    }
    }

    .article_index {
      background-color: #ffffff;
      padding: 40px;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      text-align: center;
      margin: 30px auto; /* Centre l'article et ajuste la marge */
    }
    
    .article_index h2 {
      color: #333333; /* Couleur du titre plus foncée */
      font-size: 28px;
      font-weight: 700;
      margin-bottom: 20px;
    }
    
    .article_index .EnSavoirPlus {
      display: inline-block;
      padding: 15px 30px;
      background-color: #262728;
      color: #ffffff;
      font-size: 16px;
      border-radius: 15px;
      text-decoration: none;
      transition: background-color 0.3s ease;
    }
    
    .article_index .EnSavoirPlus:hover {
      background-color: #2793cd;
      box-shadow: 2px 2px#000000; /* Couleur de fond plus foncée au survol */
    }
    
  
  .sectionpage1 {
    background-image: url("/image/fond%201erep.jpg");
    height: 600px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
  
.EnSavoirPlus {
  height: 50px;
  width: 230px;
  margin-top: 20px;
  background-color: #ccc; /* Couleur de fond plus claire */
  border: none; /* Supprimer la bordure */
  font-family: Arial, sans-serif;
  font-size: medium;
  color: #000000; /* Couleur du texte plus foncée */
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

  
  .lienblanc {
    text-decoration: none;
    color: white;
  }
  
  .liennoir {
    text-decoration: none;
    color: black;
  }
  .apropossection {
    background-color: #f5f5f5;
    padding: 60px 0;
    text-align: center;
  }
  
  
  .aproposdiv {
    max-width: 1000px;
    margin: 0 auto;
    font-family: Arial, sans-serif;
    font-size: 18px;
    color: #333;
    line-height: 1.8;
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  .aproposdiv b {
    display: block;
    font-weight: normal;
  }
  
  .aproposdiv a {
    color: #0056b3;
    text-decoration: none;
    font-weight: bold;
  }
  
  .aproposdiv a:hover {
    text-decoration: underline;
  }
  
  .aproposdiv h3 {
    margin-top: 30px;
    font-size: 20px;
    color: #0073e6;
  }
  
  .aproposdiv h5 {
    font-size: 16px;
    color: #666;
    margin-bottom: 30px;
  }
  
  .map-container {
    margin-top: 20px;
    margin-bottom: 40px;
    width: 100%;
    height: 400px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  .map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }
  
  
  .sectionpartenaire {
    background-color: #ffffff;
    padding: 60px 0;
    text-align: center;
  }
  
  .texteMilieu {
    margin-bottom: 50px; /* Réduit l'espace en dessous du texte */
  }
  
  .partenaire {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .partenaire div {
    flex: 0 0 25%; /* Réduit la largeur des éléments partenaires */
    margin: 20px;
  }
  
  .partenaire img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* Centre les images */
  }
  
  @media only screen and (max-width: 768px) {
    .partenaire div {
      flex: 0 0 50%; /* Ajuste la largeur des éléments partenaires pour les petits écrans */
    }
  }
  
  /* Effet de survol pour les images partenaires */
.partenaire div img:hover {
  transform: scale(1.1); /* Agrandissement au survol */
  transition: transform 0.3s ease;
}

  
.map-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 ratio */
  height: 0;
  overflow: hidden;
}

.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* Notre Agence////////////////////////////////////////////////////////////////////////////////*/


.sectionagence
{
width: auto;
height: 1000px;
background-color: #CCC;
text-align: center;
padding-top: 20px;

}

.organigramme {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.case, .case-gauche, .case-droite {
  width: 150px;
  height: 100px;
  border: 1px solid #000;
  text-align: center;
  margin-bottom: 20px;
}

.ligne-connectee {
  width: 2px;
  height: 50px;
  background-color: #000;
}

.ligne-longue {
  width: 100px;
  height: 2px;
  background-color: #000;
}
/* Styles pour la structure globale */
.tecnitub-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

/* Styles pour la section de présentation */
.tecnitub-title {
  font-size: 2.5rem;
  color: #333;
  margin-bottom: 10px;
}

.tecnitub-tagline {
  font-style: italic;
  color: #666;
  margin-bottom: 20px;
}

.tecnitub-description {
  line-height: 1.6;
  color: #333;
}

/* Styles pour la section des prestations */
.tecnitub-services, .tecnitub-products, .tecnitub-activities {
  margin-bottom: 40px;
}

.tecnitub-heading {
  font-size: 1.8rem;
  color: #333;
  margin-bottom: 15px;
}

.tecnitub-list {
  list-style-type: none;
  padding: 0;
}

.tecnitub-list li {
  margin-bottom: 20px;
}

.tecnitub-list li h3 {
  font-size: 1.2rem;
  color: #333;
  margin-bottom: 10px;
}

.tecnitub-list li p {
  line-height: 1.5;
  color: #666;
}

.tecnitub-list li a {
  text-decoration: none;
  color: #007bff;
}

.tecnitub-list li a:hover {
  text-decoration: underline;
  color: #0056b3;
}


/* Services pages 3-4-5///////////////////////////////////////////////////////////////////////*/


.services-container {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 50px;
  min-width: 200px;
}


 .services {
  width: 250px;
  background-color: #f0f0f0; 
  padding: 15px;
  margin: 15px;
  text-align: center;
  border-radius: 10px;
  margin-bottom: 40px;
  min-height: 240px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 
} 

.services-container a {
  text-decoration: none;
  color: inherit;
}

.services:hover h3, .services:hover p {
  color: rgb(0, 203, 253);
}

.services:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}


.nosservices
{
  padding-top: 15px;
text-align: center;
}
.href
{
text-decoration: none;
color: rgb(0, 0, 0);
}

.imagediv
{
  height: 150px;
  width: 190px;
  border-radius: 5px;
}

#description {
  max-width: 800px;
  margin: 0 auto; /* Center the section horizontally */   
  text-align: left;
  font-size: 16px;
  padding: 40px;
  background-color: #ffffff;
  color: #333;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  margin-top: 30px;
}

.prestation-section {
  margin: 0;
}

.prestation-title {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
  color: #444;
}

.prestation-intro {
  font-size: 18px;
  margin-bottom: 30px;
  line-height: 1.6;
  text-align: center;
  color: #555;
}

.prestation-item {
  margin-bottom: 30px;
}

.prestation-item h3 {
  font-size: 24px;
  margin-bottom: 10px;
  color: #333;
}

.prestation-item p {
  margin: 0;
  line-height: 1.6;
  color: #666;
}

.prestation-contact {
  font-size: 18px;
  margin-top: 40px;
  text-align: center;
  color: #555;
}

#diagnostics {
  max-width: 800px;
  margin: 0 auto; /* Center the section horizontally */
  text-align: left;
  font-size: 16px;
  padding: 40px;
  background-color: #ffffff;
  color: #333;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
margin-top: 30px;
margin-bottom: 50px;

}

.diagnostics-section {
  margin: 0;
}

.diagnostics-title {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
  color: #444;
}

.diagnostics-intro {
  font-size: 18px;
  margin-bottom: 30px;
  line-height: 1.6;
  text-align: center;
  color: #555;
}

.diagnostics-item {
  margin-bottom: 30px;
}

.diagnostics-item h3 {
  font-size: 24px;
  margin-bottom: 10px;
  color: #333;
}

.diagnostics-item p {
  margin: 0;
  line-height: 1.6;
  color: #666;
}

.diagnostics-contact {
  font-size: 18px;
  margin-top: 40px;
  text-align: center;
  color: #555;
}
/*Fourniture///////////////////////////////*/
#fourniture {
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
  font-size: 16px;
  padding: 40px;
  background-color: #ffffff;
  color: #333;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  margin-top: 30px;
  margin-bottom: 50px;
}

.fourniture-section {
  margin: 0;
}

.fourniture-title {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
  color: #444;
}

.fourniture-intro {
  font-size: 18px;
  margin-bottom: 30px;
  line-height: 1.6;
  text-align: center;
  color: #555;
}

.fourniture-item {
  margin-bottom: 30px;
}

.fourniture-item h3 {
  font-size: 24px;
  margin-bottom: 10px;
  color: #333;
}

.fourniture-item p {
  margin: 0;
  line-height: 1.6;
  color: #666;
}

.fourniture-contact {
  font-size: 18px;
  margin-top: 40px;
  text-align: center;
  color: #555;
}





/*Formulaire Dimensions/////////////////////*/
/* Container principal avec flex pour aligner schéma à gauche et formulaire à droite */
.container {
  max-width: auto;
  min-height: 550px;
  background: #e6e6e6;
  border-radius: 16px;
  padding: 30px 20px 15px 20px;
  box-shadow: 0 4px 16px #0001, 0 2px 8px #0001;
  display: flex;
  flex-direction: row;
  gap: 26px;
}


.tuyaux:hover, .tuyaux.selected {
  box-shadow: 0 6px 20px #0584c740;
  border-color: #0584c7;
  transform: translateY(-2px) scale(1.045);
}
.tuyaux h3 {
  font-size: 0.98rem;
  color: #0584c7;
  margin-top: 8px;
  margin-bottom: 0;
  font-weight: 600;
  text-align: center;
  letter-spacing: .01em;
}


/* Zone schéma à gauche */
.schema-zone {
  flex: 1;
  max-width: 70%;
  background: rgb(218, 216, 216); /* on veut voir le fond de la page ! */
  min-height: 500px;
  max-height: 777px;
  position: relative;
  border-radius: 5px;

  
  
}

#schema-piece-container {
  position: relative;
  margin: 36px;
  background: #f4f7fb;
  border-radius: 22px;
  box-shadow: 0 10px 34px #a2b7c733, 0 2px 12px #0684c73c;
  padding: 38px;
  min-width: 340px;
  min-height: 480px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: visible;
  height: auto;
}



.schema-image-zone.extra-space {
  padding-bottom:  50px;
}

.schema-zone.tall {
  min-height: 850px; /* ou plus selon besoin réel */
  transition: min-height 0.3s ease;
}





/* Garde l’alignement à gauche du nom de pièce */
#schema-piece-container h2 {
  font-size: 1.18rem;
  font-weight: 700;
  color: #1d3143;
  margin-bottom: 13px;
  margin-left: 3px;
  letter-spacing: .02em;
  text-align: left; /* explicite */
}


/* Bouton retour, inchangé */
.schema-retour {
  margin-bottom: 25px;
  padding: 8px 30px;
  border-radius: 10px;
  border: none;
  background: #888;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  box-shadow: 0 2px 10px #2222;
  transition: background .15s;
  cursor: pointer;
}
.schema


#schema-piece-container h2 {
  font-size: 1.18rem;
  font-weight: 700;
  color: #1d3143;
  margin-bottom: 13px;
  margin-left: 3px;
  letter-spacing: .02em;
  text-align: center;
}

/* Formulaire à droite */
.form-container {
  flex: 0 0 350px; /* largeur fixe ou max */
  background-color: #eee;
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
  min-height: 700px;
  max-width: 30%;
  padding: 20px;
  border: 2px solid ;
  border-radius: 10px;
  border-color: rgb(0, 203, 253);
  margin-top: 40px;
  margin-bottom: 30px;
  transition: height 0.3s ease;
}

/* Styles formulaire */
.form-container form {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}



.form-container label {
  font-size: 16px;
  display: block;
  margin-bottom: 10px;
}



.form-container input[type="text"],
.form-container select {
  margin-bottom: 15px;
  padding: 5px 8px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 3px;
  min-width: 85%;
  display: block;
  margin-bottom: 25px;
  border-radius: 5px;
}


.form-container button {
  background-color: #666;
  color: white;
  padding: 8px 12px;
  margin-top: 10px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 2px 2px 5px #333;
  transition: background-color 0.3s ease;
}

.form-container button:hover {
  background-color: #444;
  box-shadow: 2px 2px 5px rgb(0, 203, 253);
}


.form-buttons {
  display: flex;
  justify-content: space-around;
  margin-top: auto;
  gap: 10px;
  padding-top: 20px;
}



.onglets {
  display: flex;
  width: 100%;            /* Toujours 100% du parent */
  max-width: 100%;        /* Jamais plus large */
  box-sizing: border-box; /* Respecte le padding */
  gap: 5px;               /* Un peu d'espace entre */
  justify-content: space-between;
  margin-bottom: 20px;
  border-bottom: 2px solid #ccc;
  padding-bottom: 5px;
}

@media screen and (max-width: 1740px) {
  .onglets {
flex-wrap: wrap;
  }
}

.onglet-btn {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  font-size: 15px;
  font-weight: 600;
  background-color: #999;
  color: white;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
  transition: border-bottom 0.3s ease, background-color 0.2s ease;
  margin: 0 5px;
}

.onglet-btn:hover {
  background-color: #888;
}

.onglet-btn.active {
  background-color: #444;
  border-bottom: 3px solid rgb(0, 203, 253);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}


.tab {
  display: none;
  transition: opacity 0.3s ease-in-out;
}

.tab.active {
  display: block; 
}

.tab-content {
  flex-grow: 1;
  /* Permet d’occuper l’espace au-dessus des boutons */
}

/* Formulaire inactif */
.form-container.inactive {
  pointer-events: none;
  opacity: 0.6;
  position: relative;
}

/* Overlay de message au centre */
#form-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px 30px;
  border-radius: 10px;
  box-shadow: 0 0 10px #888;
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  z-index: 10;
}

.form-container.active #form-overlay {
  display: none;
}



.tuyaux-container {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 50px;
  min-width: 200px;
}


 .tuyaux {
  width: 250px;
  background-color: #f0f0f0; 
  padding: 15px;
  margin: 15px;
  text-align: center;
  border-radius: 10px;
  margin-bottom: 40px;
  min-height: 240px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 
} 

.tuyaux:hover {
  box-shadow: 0 4px 8px rgb(0, 203, 253);
}




/* Responsive */
@media screen and (max-width: 1000px) {
  .container {
    flex-direction: column;
    padding: 10px;
    align-items: center;
  }

  .schema-zone {
    max-width: 100vw;
    min-width: 0;
    max-height: 80vw;
    position: static !important;
  }

    #schema-piece-container {
    position: static !important;
    inset: unset !important;
    /* Remplace tes deux margin par ça : */
    margin: 16px 15% 0 1% !important; /* Centré horizontalement */
    width: 96vw !important;
    max-width: 99vw !important;
    box-sizing: border-box;
    border-radius: 14px;
  }

  .form-container {
    width: 100%;
    min-width: 1em; /* Taille plus petite */
    max-width: 300px;
    min-height: auto;
    margin: 0 auto; /* Centre horizontalement */
    display: flex;
    flex-direction: column;
    align-items: center;
  
  }

  .form-container input[type="text"],
  .form-container select {
    font-size: 16px;
    padding: 8px 10px;
    max-width: 280px;
  }

  .form-container button {
    width: 100%;
  }

  .onglets {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: stretch;
    max-width: 450px;
  }

  .onglet-btn {
    border-radius: 0;
    border-left: 3px solid transparent;
    border-bottom: none;
    text-align: left;
    padding-left: 12px;
  }

  .onglet-btn.active {
    border-left: 3px solid rgb(0, 203, 253);
    border-bottom: none;
  }

  .fichier-container
  {
      margin: auto;
  }

    .schema-image-zone {
    max-width: 100vw;
    min-width: 140px;
  }

}



#schema-piece-content h2 {
  font-size: 1.18rem;
  font-weight: 700;
  color: #1d3143;
  margin-bottom: 13px;
  margin-left: 3px;
  letter-spacing: .02em;
}

.schema-retour {
  margin-bottom: 25px;
  padding: 8px 30px;
  border-radius: 10px;
  border: none;
  background: #888;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  box-shadow: 0 2px 10px #2222;
  transition: background .15s;
  cursor: pointer;
}

.schema-retour:hover {
   background: #555; 
  }

.schema-pro {
  width: 100%;
  height: 100%;
  min-height: 400px;
}


/* Image centrée horizontalement dans le cadre */
#schema-piece-img {
  max-width: 90%;
  max-height: 520px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* 1) On fait de la zone image un flex qui prend tout l’espace restant */
#schema-piece-container .schema-image-zone {
  flex: 1;                /* prend l’espace sous le titre */
  display: flex;
  justify-content: center;/* centre horizontalement */
  align-items: center;    /* centre verticalement */
}


.schema-cote-btn {
  position: absolute;
  transform: translate(-50%, -50%);
  background-color: #00aaff;
  color: white;
  font-weight: bold;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  border: none;
  cursor: pointer;
  z-index: 10;
}




.schema-cote-btn:active {
  background: #0584c7;
  color: #fff;
}

.schema-cote-btn:hover {
  transform: scale(1.15);
  z-index: 10;
}
.schema-cote-popup {
  position: absolute;
  left: 35px;
  top: -6px;
  background: #fff;
  border: 1px solid #0584c7;
  border-radius: 7px;
  padding: 5px 16px;
  font-size: 15px;
  box-shadow: 0 2px 8px #0003;
  white-space: nowrap;
  z-index: 99;
  display: none;
}
input.focus-cote, select.focus-cote {
  border: 2px solid #0584c7 !important;
  box-shadow: 0 0 8px #0584c76b;
}



/* Code page tuyau-contenu*/

.fichier-container {
  flex: 0 0 350px;
  background-color: #f9f9f9;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
  min-height: 400px;
  max-width: 94%;
  padding: 20px;
  border: 2px solid rgb(0, 203, 253);
  border-radius: 10px;
  margin: 28px 1% 22px 1%;   /* <--- Espace extérieur */
  /* Optionnel : tu peux réduire max-width pour + d’air sur les côtés */
  max-width: 96%;
}

.fichier-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fichier-upload-box {
  margin-top: 10px;
}

.fichier-upload-label {
  display: block;
  font-weight: bold;
  margin-bottom: 6px;
  font-size: 15px;
}

.fichier-input {
  width: 95%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: white;
  font-size: 14px;
  resize: vertical; /* Empêche l'agrandissement horizontal */
}

.fichier-actions {
  display: flex;
  justify-content: flex-end;
}

.fichier-envoyer-btn {
  background-color: #4a90e2;
  color: white;
  padding: 0.6rem 1.5rem;
  font-size: 1rem;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.fichier-envoyer-btn:hover {
  background-color: #357ABD;
}

.fichier-guide-container {
  margin-top: 10px;
  background: #fff;
  padding: 20px;
  border: 1px dashed #ccc;
  border-radius: 10px;
}

.fichier-guide-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #333;
}

.fichier-guide-text {
  font-size: 14px;
  color: #555;
  margin-bottom: 8px;
}

.fichier-guide-important {
  font-size: 15px;
  font-weight: bold;
  color: #333;
  background: #fffbe6;
  padding: 12px;
  border-left: 5px solid #ffcc00;
  border-radius: 6px;
  margin-bottom: 20px;
}

.custom-textarea {
  resize: vertical; /* Autorise l'agrandissement uniquement en hauteur */
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: white;
  font-size: 14px;
}


.custom-label {
  font-weight: bold;
  margin-bottom: 6px;
  font-size: 15px;
  display: block;
}

.custom-input-container {
  display: flex;
  flex-direction: column;
}

.custom-file-input {
  width: 95%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: white;
  font-size: 14px;
}

.fichier-clear-btn {
  margin-top: 8px;
  background-color: #e74c3c;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  width: fit-content;
}

.fichier-clear-btn:hover {
  background-color: #c0392b;
}

.fichier-hint {
  font-size: 13px;
  color: #555;
  margin-top: 4px;
}

button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}



/*Bouton Choix///////////////////*/



button {
  display: inline-block;
  margin-bottom: 20px;
  height: 30px;
  width: 250px;
  font-size: 16px;
  background-color: rgb(130, 130, 130);
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 1s;
  border-radius: 10px;
  text-align: center;
  position: relative;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  margin-right: 20px;
}

button:hover {
  background-color: rgb(0, 203, 253);
}

#button2:hover {
  background-color: rgb(244, 5, 5);
}



/*Page Dimensionnement///////////////////////////////////*/
.section-content {
  max-width: 900px;
  margin: 40px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.section-content p {
  font-size: 1.1em;
  color: #333;
  margin-bottom: 1.5em;
}

.section-content ul {
  margin-bottom: 1.5em;
  padding-left: 20px;
}

.section-content li {
  font-size: 1.1em;
  color: #555;
}

.section-content strong {
  color: #007bff;
}


/*Tuyauterie industrielle////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.section-utilites, .section-vapeur {
  max-width: 1000px;
  margin: 30px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.section-utilites h2, .section-vapeur h2 {
  font-size: 1.5em;
  color: #007bff;
  margin-bottom: 10px;
}

.section-utilites .p-utilites, .section-vapeur .p-vapeur {
  font-size: 1.1em;
  color: #333;
  margin-bottom: 1.5em;
}

.section-utilites strong, .section-vapeur strong {
  color: #007bff;
}




/* Projets*/


.projects-container {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  padding: 20px;
  margin: 40px auto;
  max-width: 1000px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  text-align: center;
}

.projects-title {
  color: #0056b3;
  font-size: 24px;
  margin-bottom: 20px;
}

.projects-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px; /* Espacement entre les images */
}

.project-item {
  width: calc(33.33% - 20px); /* Ajuster ce pourcentage pour contrôler l'espacement */
  max-width: 300px;
  text-align: center;
  margin-bottom: 20px;
}

.project-image {
  width: 100%;
  border-radius: 8px;
  transition: transform 0.3s ease-in-out;
}

.project-image:hover {
  transform: scale(1.05);
}

/*Production froid////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.section-froid {
  max-width: 900px;
  margin: 40px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.section-froid .heading-froid {
  font-size: 1.5em;
  color: #007bff;
  margin-bottom: 10px;
}

.section-froid .p-froid {
  font-size: 1.1em;
  color: #333;
  margin-bottom: 1.5em;
}

.section-froid strong {
  color: #007bff;
}


/*Structure métalique////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.section-metal {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.heading-metal {
  font-size: 2rem;
  color: #007bff;
  margin-bottom: 20px;
  text-align: center;
}

.text-description {
  text-align: justify;
}

.text-description p {
  margin-bottom: 15px;
}

.objective-list {
  margin-bottom: 20px;
}

.objective-list ul {
  padding-left: 20px;
}

.objective-list li {
  margin-bottom: 8px;
}

.objective-list strong {
  font-weight: bold;
  color: #333;
}

.section-metal strong {
  color: #007bff;
}


/*Chaudronnerie////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.section-chaudronnerie {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.heading-chaudronnerie {
  font-size: 2rem;
  color: #007bff;
  margin-bottom: 20px;
  text-align: center;
}

.text-description {
  text-align: justify;
}

.text-description p {
  margin-bottom: 20px;
}



/*Refroidissement Adiabatique////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Styles généraux pour la section de contenu */
.wrappercontentAdia {
  max-width: 1000px;
  margin: 40px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.wrappercontentAdia .titlecontentAdia {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #007bff; /* Couleur bleue pour le titre */
}

.wrappercontentAdia .contentcontentAdia {
  font-size: 14px;
  line-height: 1.5;
}

.wrappercontentAdia .contentcontentAdia ul {
  margin-top: 0;
  padding-left: 20px;
}

.wrappercontentAdia .contentcontentAdia li {
  margin-bottom: 5px;
}

/* Styles spécifiques aux différentes parties du texte */
.adiabatic-wrapper {
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f0f0f0;
}

.adiabatic-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #007bff; /* Couleur bleue pour le titre */
}

.adiabatic-content {
  font-size: 14px;
  line-height: 1.5;
}

.adiabatic-content ul {
  margin-top: 0;
  padding-left: 20px;
}

.adiabatic-content li {
  margin-bottom: 5px;
}






/*Audit Énergétique////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.audit-energetique {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f9f9f9;
  padding: 20px;
  margin: 40px auto;
  max-width: 800px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.audit-energetique h1 {
  color: #0056b3;
  font-size: 24px;
  margin-bottom: 20px;
}

.audit-energetique h2 {
  color: #0073e6;
  font-size: 20px;
  margin-top: 20px;
  margin-bottom: 15px;
}

.audit-energetique h3 {
  color: #0099ff;
  font-size: 18px;
  margin-top: 15px;
  margin-bottom: 10px;
}

.audit-energetique p {
  margin-bottom: 15px;
}

.audit-energetique ul {
  list-style-type: disc;
  margin: 15px 0;
  padding-left: 20px;
}

.audit-energetique ul li {
  margin-bottom: 10px;
}


/*Cahier des charges////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.cahier-des-charges {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f9f9f9;
  padding: 20px;
  margin: 40px auto;
  max-width: 800px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.cahier-des-charges h1 {
  color: #0056b3;
  font-size: 24px;
  margin-bottom: 20px;
}

.cahier-des-charges h2 {
  color: #0073e6;
  font-size: 20px;
  margin-top: 20px;
  margin-bottom: 15px;
}

.cahier-des-charges h3 {
  color: #0099ff;
  font-size: 18px;
  margin-top: 15px;
  margin-bottom: 10px;
}

.cahier-des-charges p {
  margin-bottom: 15px;
}

.cahier-des-charges ul {
  list-style-type: disc;
  margin: 15px 0;
  padding-left: 20px;
}

.cahier-des-charges ul li {
  margin-bottom: 10px;
}


/* Études avant projet////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.etudes-avant-projet {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f9f9f9;
  padding: 20px;
  margin: 40px auto;
  max-width: 800px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.etudes-avant-projet h1 {
  color: #0056b3;
  font-size: 24px;
  margin-bottom: 20px;
  text-align: center;
}

.etudes-avant-projet h2 {
  color: #0073e6;
  font-size: 20px;
  margin-top: 20px;
  margin-bottom: 15px;
}

.etudes-avant-projet h3 {
  color: #0099ff;
  font-size: 18px;
  margin-top: 15px;
  margin-bottom: 10px;
}

.etudes-avant-projet p {
  margin-bottom: 15px;
}

.etudes-avant-projet ul {
  list-style-type: disc;
  margin: 15px 0;
  padding-left: 20px;
}

.etudes-avant-projet ul li {
  margin-bottom: 10px;
}


/* Modélisation 3D////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.modelisation-3d {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f9f9f9;
  padding: 20px;
  margin: 40px auto;
  max-width: 800px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.modelisation-3d h1 {
  color: #0056b3;
  font-size: 24px;
  margin-bottom: 20px;
  text-align: center;
}

.modelisation-3d h2 {
  color: #0073e6;
  font-size: 20px;
  margin-top: 20px;
  margin-bottom: 15px;
}

.modelisation-3d h3 {
  color: #0099ff;
  font-size: 18px;
  margin-top: 15px;
  margin-bottom: 10px;
}

.modelisation-3d h4 {
  color: #00ccff;
  font-size: 16px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.modelisation-3d p {
  margin-bottom: 15px;
}

.modelisation-3d ul {
  list-style-type: disc;
  margin: 15px 0;
  padding-left: 20px;
}

.modelisation-3d ul li {
  margin-bottom: 10px;
}


/* General styles for all sections containing logos and headings */
.section-autocad-pid, .section-autocad-3d, .section-revit {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

/* Specific styles for each logo */
.logo-inventor {
  height: 50px; /* Adjust height as needed */
  width: auto;
  margin-right: 10px;
}

.logo-autocad-pid {
  height: 50px; /* Adjust height as needed */
  width: auto;
  margin-right: 10px;
}

.logo-autocad-3d {
  height: 50px; /* Adjust height as needed */
  width: auto;
  margin-right: 10px;
}

.logo-revit {
  height: 50px; /* Adjust height as needed */
  width: auto;
  margin-right: 10px;
}

/* General styles for all content images */
.content-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 20px auto;
}

/* Specific styles for each content image */
.modelisation-4 {
  float: right;
}

.image-container {
  display: flex; /* Utilisation de flexbox pour aligner les images côte à côte */
}

.modelisation-tuyau1, .modelisation-tuyau2 {
  width: 30%; /* Les deux images occupent 50% de la largeur du conteneur */
  height: auto; /* Ajustement automatique de la hauteur en fonction de la largeur */
  object-fit: cover; /* Assure que l'image couvre la zone de manière proportionnelle */
  margin-right: 10px; /* Espacement entre les images */
}



/* Scan 3D////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

.releves-mod-modelisation {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f9f9f9;
  padding: 20px;
  margin: 40px auto;
  max-width: 800px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.releves-mod-modelisation h2 {
  color: #0056b3;
  font-size: 24px;
  margin-bottom: 20px;
  text-align: center;
}

.releves-mod-modelisation h3 {
  color: #0099ff;
  font-size: 18px;
  margin-top: 25px;
  margin-bottom: 10px;
}

.releves-mod-modelisation p {
  margin-bottom: 15px;
}

.releves-mod-modelisation ul {
  list-style-type: disc;
  margin: 15px 0;
  padding-left: 20px;
}

.releves-mod-modelisation ul li {
  margin-bottom: 10px;
}

.releves-mod-modelisation .centered-image {
  display: block;
  margin: 20px auto; /* Centrage horizontal de l'image */
  max-width: 100%; /* Taille maximale de l'image */
  height: auto; /* Ajustement automatique de la hauteur */
}


/* Logiciel de Dessins////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.integrer-texte {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f9f9f9;
  padding: 20px;
  margin: 40px auto;
  max-width: 800px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.integrer-texte h2 {
  color: #0056b3;
  font-size: 24px;
  margin-bottom: 20px;
  text-align: center;
}

.integrer-texte h3 {
  color: #0099ff;
  font-size: 18px;
  margin-top: 25px;
  margin-bottom: 10px;
}

.integrer-texte p {
  margin-bottom: 15px;
}

.integrer-texte ul {
  list-style-type: disc;
  margin: 15px 0;
  padding-left: 20px;
}

.integrer-texte ul li {
  margin-bottom: 10px;
}

.integrer-texte .centered-image {
  display: block;
  margin: 20px auto; /* Centrage horizontal de l'image */
  max-width: 100%; /* Taille maximale de l'image */
  height: auto; /* Ajustement automatique de la hauteur */
}



/* Traitement Air////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.installation-cta {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f9f9f9;
  padding: 20px;
  margin: 40px auto;
  max-width: 800px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.installation-cta h2 {
  color: #0056b3;
  font-size: 24px;
  margin-bottom: 20px;
  text-align: center;
}

.installation-cta h3 {
  color: #0099ff;
  font-size: 18px;
  margin-top: 15px;
  margin-bottom: 10px;
}

.installation-cta p {
  margin-bottom: 15px;
}

.installation-cta ul {
  list-style-type: disc;
  margin: 15px 0;
  padding-left: 20px;
}

.installation-cta ul li {
  margin-bottom: 10px;
}


/* Cgv /////////////////////////////////////////////////////////////////////////////////*/
.cgv-container {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f9f9f9;
  padding: 20px;
  margin: 40px auto;
  max-width: 800px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.cgv-container h1 {
  color: #0056b3;
  font-size: 24px;
  margin-bottom: 20px;
  text-align: center;
}

.cgv-container h2 {
  color: #0099ff;
  font-size: 18px;
  margin-top: 15px;
  margin-bottom: 10px;
}

.cgv-container p {
  margin-bottom: 15px;
}

.cgv-container ul {
  list-style-type: disc;
  margin: 15px 0;
  padding-left: 20px;
}

.cgv-container ul li {
  margin-bottom: 10px;
}

/* Chauffage /////////////////////////////////////////////////////////////////////////////////////*/

.chauffage-container {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f9f9f9;
  padding: 20px;
  margin: 40px auto;
  max-width: 800px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.chauffage-title {
  color: #0056b3;
  font-size: 24px;
  margin-bottom: 20px;
  text-align: center;
}

.chauffage-heading {
  color: #0099ff;
  font-size: 18px;
  margin-top: 15px;
  margin-bottom: 10px;
}

.chauffage-paragraph {
  margin-bottom: 15px;
}

.chauffage-ul {
  list-style-type: disc;
  margin: 15px 0;
  padding-left: 20px;
}

.chauffage-ul li {
  margin-bottom: 10px;
}


/*Formulaire Contact///////////////////////////////////////////////////////////////////////////////////////////////*/

.form-contact {
  width: 550px;
  margin: 0 auto;
  padding: 20px;
  border: 2px solid #ccc;
  border-radius: 10px;
  border-color: rgb(0, 203, 253);
  margin-top: 110px;
  margin-bottom: 30px;
}

/* INPUTS & TEXTAREAS : en bloc */
.form-contact input,
.form-contact textarea {
  display: block;
  width: 100%;
  margin-bottom: 30px;
  border-color: rgb(0, 203, 253);
  border-radius: 5px;
}

/* TEXTAREA spécifique */
.form-contact textarea {
  height: 100px;
  border-radius: 5px;
  border-color: #000000;
}

/* SUBMIT button */
.form-contact input[type="submit"] {
  background-color: rgb(0, 0, 0);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 30px;    
}

.form-contact input[type="submit"]:hover {
  box-shadow: 0 6px 12px rgb(0, 203, 253);
  transform: translateY(-2px);
}

input[type=submit] {
  font-weight: bold;
}

input[type="email"],
[name="text1"] {
  padding-top: 10px;
  padding-bottom: 10px;
}

.texte {
  text-align: center;
  margin-bottom: 60px;
}

/* LIGNE FLEX pour Entreprise & Poste */
.formulaire {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
  gap: 15px;
}

/* CHAQUE GROUPE = flex */
.form-contact .form-group {
  display: flex;
  align-items: center;
}

/* LABELS dans .form-group : en ligne, pas en bloc */
.form-contact .form-group > label {
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 35px;
  white-space: nowrap;
  font-size: 16px;
}

/* INPUTS dans .form-group : prennent l'espace restant */
.form-contact .form-group input {
  flex: 1;
}

/* FILE upload bouton style */
::-webkit-file-upload-button {
  border-color: rgb(0, 203, 253);
  border-radius: 5px;
}

/* Centrage du titre */
.formcontact {
  text-align: center;
}





/*Bas de page///////////////////////////////////////////////////////////////////////////////////////////////////////////*/
footer {
  background-color: #333;
  color: #fff;
  padding: 20px 0;
}

.footer-conteneur {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.footer-div {
  flex-basis: 30%;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center; /* Centrer le texte */
}

.footer-div h4 {
  color: rgb(0, 203, 253);
  margin-bottom: 5px;
}

.footer-div ul {
  list-style: none;
  padding-left: 0; /* Réinitialiser le padding */
  margin: 0; /* Réinitialiser la marge */
  padding-top: 20px;
}


.footer-div ul li {
  padding-bottom: 25px;
  text-align: center;
}

.footer-div li {
  align-items: center;
}

.footer-div a {
  color: #fff;
  text-decoration: none;
}

.footer-div a:hover {
  text-decoration: underline;
}

.footer-bottom {
  background-color: #333;
  color: #fff;
  text-align: center;
}



/* Media pour rendre le footer responsive */
@media screen and (max-width: 768px) {
  .footer-conteneur {
    flex-direction: column;
    align-items: center;
  }
  .footer-div {
    flex-basis: 30%;
    margin-bottom: 0px;
    margin-top: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center; /* Centrer le texte */
  }
  
  .footer-div h4 {
    margin-bottom: 3px; /* Augmentez l'espacement entre les titres */
    font-size: 16px; /* Réduisez légèrement la taille de la police des titres */
  }

  .footer-div ul {
    padding-left: 0; /* Supprimer le padding gauche */
    padding-top: 0px;
  }

  .footer-div ul li {
    padding-bottom: 3px; /* Réduire l'espacement entre les éléments de la liste */
    font-size: 14px; /* Réduisez légèrement la taille de la police des éléments de la liste */
  }

  .footer-div p {
    margin-bottom: 3px; /* Ajustez l'espacement entre les paragraphes */
    font-size: 14px; /* Réduisez légèrement la taille de la police */
  }

  .footer-bottom {
    margin-top: 0px; /* Réduire l'espace entre la dernière section et le bas de page */
    padding: 10px 0; /* Réduire le padding pour réduire l'espace */
    font-size: 12px; /* Réduire légèrement la taille de la police */
  }

}
/* Conditions d'utilisation/////////////////////*/
/* Mentions Légales */
.mentionslegales {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f9f9f9;
  padding: 20px;
  margin: 40px auto;
  max-width: 800px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.mentionslegales h1 {
  color: #0056b3;
  font-size: 24px;
  margin-bottom: 20px;
  text-align: center;
}

.mentionslegales h3 {
  color: #0099ff;
  font-size: 18px;
  margin-top: 15px;
  margin-bottom: 10px;
}

.mentionslegales p,
.mentionslegales ul,
.mentionslegales br {
  margin-bottom: 15px;
}

.mentionslegales ul {
  list-style-type: disc;
  margin: 15px 0;
  padding-left: 20px;
}

.mentionslegales ul li {
  margin-bottom: 10px;
}

.mentionslegales a.textebleu,
.mentionslegales a.lienbleu {
  color: #0099ff;
  text-decoration: none;
  font-weight: bold;
}

.mentionslegales a.textebleu:hover,
.mentionslegales a.lienbleu:hover {
  text-decoration: underline;
}


.textebleu
{
  color: rgb(0, 203, 253);
}

/* Politique de confidentialité*/
.politique-confidentialite {
  background-color: #f9f9f9;
  padding: 60px 20px;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

.contenu {
  max-width: 800px;
  margin: 0 auto;
  background-color: #ffffff;
  padding: 30px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.politique-confidentialite h1,
.politique-confidentialite h2,
.politique-confidentialite h3 {
  color: #0056b3;
}

.politique-confidentialite h1 {
  font-size: 24px;
  margin-bottom: 20px;
}

.politique-confidentialite h2 {
  font-size: 20px;
  margin-top: 20px;
  margin-bottom: 15px;
}

.politique-confidentialite h3 {
  font-size: 18px;
  margin-top: 15px;
  margin-bottom: 10px;
}

.politique-confidentialite p {
  margin-bottom: 15px;
}

.politique-confidentialite ul {
  list-style-type: disc;
  margin: 15px 0;
  padding-left: 20px;
}

.politique-confidentialite ul li {
  margin-bottom: 10px;
}

.politique-confidentialite address {
  font-style: normal;
  margin-top: 20px;
}









.contact-boutique {
  width: 100%;
  max-width: 600px;
  margin: 40px auto; /* Modifié pour conserver l'espacement */
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
}

.contact-boutique h1 {
  text-align: center;
  margin-bottom: 20px;
}

.contact-boutique form {
  display: flex;
  flex-direction: column;
}

/*.contact-boutique label {
  margin-top: 10px;
}*/

.contact-boutique input,
.contact-boutique select {
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 100%;
}

/*
.contact-boutique button {
  margin-top: 20px;
  padding: 8px 12px; /* Réduit la taille des boutons 
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  height: 50px; /* Ajustement à conserver 
}

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

.item-entry {
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
}

*/



/*Symfony style*/

.user-menu { position: relative; display: inline-block; }

.user-menu__dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 180px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  padding: 8px;
  z-index: 9999;
}

.is-hidden { display: none; }

.user-menu__item { display:block; padding:10px; min-width: 150px !important; margin-bottom: 10px; text-decoration:none; color:inherit; border-radius:8px; }
.user-menu__item:hover { background: rgba(0,0,0,.06); }
.user-menu__sep { height:1px; background: rgba(0,0,0,.10); margin:6px 0; }
.user-menu__item--danger { color:#b00020; padding-bottom: 25px; }


.user-menu__logout { margin: 15px 0 0 0; }
.user-menu__logout .user-menu__item {
  background: none;
  border: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
}


/* Bouton username : annule le style global qui l'étire */
#userMenuBtn{
  width: auto !important;
  min-width: 140px !important;
  max-width: none !important;
  min-height: 40px;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 10px 16px !important;
  margin-top: 20px;     /* ajuste si besoin */
  border-radius: 8px !important;
  border: 0 !important;

  background: #0d6efd !important;    /* même bleu */
  color: #fff !important;

  white-space: nowrap !important;
}



.remember-me {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.remember-me input {
  margin: 0;
}

.remember-me label {
  line-height: 1;
  margin: 0;
  white-space: nowrap;
}

/*bouton demander modification*/

.btn-action {
  display:inline-block;
  padding:6px 12px;
  border-radius:8px;
  font-weight:700;
  font-size:13px;
  text-decoration:none;
  border:2px solid rgb(0,203,253);
  color:#000;
  background:#fff;
  transition:0.2s;
  white-space:nowrap;
  margin: 0 5px;
}

.btn-action:hover {
  background:rgb(0,203,253);
  color:#fff;
}
button.btn-action
{
  min-height: 32px;
}




/* ===== Admin edit pro (clean, sans doublons) ===== */

.admin-wrap{
  width:95vw;
  max-width:1800px;
  margin:110px auto 110px;
  padding:24px;
  border:2px solid rgb(0,203,253);
  border-radius:12px;
  background:#fff;
}

/* Header */
.admin-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  flex-wrap:wrap;
}

.admin-header h1{
  margin:0 0 6px 0;
  font-size:28px;
  font-weight:900;
}

.admin-links{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.admin-links .sep{ opacity:.35; }

.status-pill-wrap{
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
}

/* Flash */
.flash-success{
  margin-top:14px;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(46, 204, 113, .12);
  border:1px solid rgba(46, 204, 113, .35);
  font-weight:800;
}

/* Layout */
.admin-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns: 1fr 380px;
  gap:22px;
}

@media (max-width: 1100px){
  .admin-grid{ grid-template-columns: 1fr; }
  .status-pill-wrap{ justify-content:flex-start; }
}

/* Cards */
.card{
  border:1px solid #e6e6e6;
  border-radius:12px;
  padding:16px 16px 20px; /* + padding bottom pour respirer */
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  background:#fff;
}

.card-title{
  font-weight:900;
  margin-bottom:12px;
  font-size:15px;
}

.sidebar .mt-24{ margin-top:24px; }

/* Status pill */
.status-pill{
  display:inline-block;
  line-height:1;
  padding:8px 14px;
  border-radius:999px;
  font-size:13px;
  font-weight:900;
  color:#fff;
  box-shadow:0 4px 10px rgba(0,0,0,.08);
}

.status-pill.is-waiting{ background:#95a5a6; }
.status-pill.is-progress{ background:#f39c12; }
.status-pill.is-done{ background:#2ecc71; }

/* Form grid (IMPORTANT: spacing pro ici) */
.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  column-gap:16px;
  row-gap:20px;            /* ✅ enlève l’effet “collé/superposé” */
  align-items:start;
}

@media (max-width: 900px){
  .form-grid{ grid-template-columns: 1fr; }
}

/* Section titles (COMMANDE / CONTACT / CONTENU) */
.section-title{
  grid-column: 1 / -1;
  margin-top:14px;
  padding-top:16px;
  font-weight:900;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#111;
  border-top:1px solid #eee;
}

.form-grid .section-title:first-child{
  border-top:0;
  padding-top:0;
  margin-top:0;
}

/* Field */
.field{
  display:flex;
  flex-direction:column;
  gap:8px;                 /* ✅ label -> input plus aéré */
}

.field label{
  display:block;
  font-weight:800;
  margin:0;                /* on utilise gap */
  font-size:13px;
}

.field .hint{
  margin-top:6px;
  opacity:.65;
  font-size:12px;
}

.span-2{ grid-column: 1 / -1; }

.field-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.field-actions{
  display:flex;
  gap:8px;
  align-items:center;
}

/* Inputs */
.input{
  width:100%;
  height:38px;             /* ✅ uniformise et évite “écrasé” */
  padding:0 10px;
  border:1px solid #d0d0d0;
  border-radius:10px;
  outline:none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  background:#fff;
  box-sizing:border-box;
}

.input:focus{
  border-color: rgb(0,203,253);
  box-shadow: 0 0 0 4px rgba(0,203,253,.18);
}

/* Textareas */
.textarea{
  width:100%;
  padding:10px;
  border:1px solid #d0d0d0;
  border-radius:12px;
  resize:vertical;
  outline:none;
  line-height:1.35;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  background:#fff;
  box-sizing:border-box;
}

.textarea:focus{
  border-color: rgb(0,203,253);
  box-shadow: 0 0 0 4px rgba(0,203,253,.18);
}

/* JSON monospace */
.textarea.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12.5px;
  white-space:pre;
  overflow:auto;
}

.textarea.json{
  min-height:220px;
  max-height:340px;
}

/* Form actions */
.form-actions{
  margin-top:16px;
  padding-top:12px;
  border-top:1px solid #eee;
  display:flex;
  justify-content:flex-start;
}

.btn-save{
  min-width:260px;
}

/* Buttons */
.btn-mini{
  padding:4px 10px !important;
  font-size:12px !important;
  border-radius:8px !important;
}

.btn-wide{
  width:100%;
  text-align:center;
}

/* Sidebar client */
.client-name{
  font-weight:900;
  margin-bottom:4px;
}

.muted{
  opacity:.8;
  font-size:13px;
}

/* Symfony errors */
.field ul{
  margin:6px 0 0 0;
  padding-left:18px;
}

.field li{
  color:#c0392b;
  font-weight:800;
  font-size:12px;
}

/* Mobile */
@media (max-width: 600px){
  .admin-wrap{ padding:16px; }
  .admin-header h1{ font-size:22px; }
  .card{ padding:14px 14px 18px; }
  .btn-save{ min-width:180px; width:100%; }
}

.json-actions{
  margin-top:4px;        /* au lieu de 8px */
  margin-bottom:4px;     /* rapproche du textarea */
  display:flex;
  justify-content:flex-end;
  margin-top:-2px;   /* léger overlap visuel propre */
}

.json-footer{
  margin-top:6px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.json-footer .hint{
  margin:0;
  opacity:.65;
  font-size:12px;
  line-height:1.3;
}

.json-buttons{
  display:flex;
  gap:10px;
  align-items:center;
}

.file-name-wrap{
  display:flex;
  align-items:stretch;
}

.file-name-input{
  border-top-right-radius:0;
  border-bottom-right-radius:0;
}

.file-ext{
  display:flex;
  align-items:center;
  padding:0 12px;
  border:1px solid #d0d0d0;
  border-left:0;
  border-top-right-radius:10px;
  border-bottom-right-radius:10px;
  background:#f7f7f7;
  font-weight:900;
  color:#333;
  user-select:none;
}


.json-preview{
  margin:0 0 10px 0;
  padding:10px;
  border:1px solid #e6e6e6;
  border-radius:12px;
  background:#fafafa;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size:12.5px;
  line-height:1.35;
  max-height:220px;
  overflow:auto;
  white-space:pre-wrap;
}

.json-preview .zero{
  background: rgba(241, 196, 15, .18); /* léger */
  border-radius:6px;
  padding:1px 4px;
  font-weight:900;
}

.json-preview .none{
  background: rgba(231, 76, 60, .14); /* léger */
  border-radius:6px;
  padding:1px 4px;
  font-weight:900;
}


.json-block{ 
  margin-top:0;
}

.json-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}

.json-title{
  font-weight:800;
  font-size:13px;
  margin-bottom:8px;
}

.sr-only-select{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* base */
.status-choices{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.status-choices .status-pill{
  cursor:pointer;
  border:2px solid transparent;
  opacity:.60;
  user-select:none;
  transition: .15s ease;
}

/* hover (petit feedback) */
.status-choices .status-pill:hover{
  opacity:.85;
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(0,0,0,.10);
}

/* actif (sélectionné) */
.status-choices .status-pill.is-active{
  opacity:1;
  border-color: rgb(0,203,253);
  box-shadow: 0 10px 22px rgba(0,0,0,.18), 0 0 0 4px rgba(0,203,253,.18);
}