/* style.css */

/* Style général du corps */
body {
    font-family: Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    background-repeat: no-repeat;
    background : antiquewhite;



    background-attachment: fixed;
text-align: left;
    
}
p{
    line-height: normal;
     margin: 5px;
}
textarea{
    line-height: normal;
}

 .form-control {
        line-height: normal;
    }
/* En-tête de la page */
header {
     
    
    padding: 50px 0;
}

header h1 {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

header p {
    font-size: 1.25rem;
}

h2 {
    color: black;
}

/* Section du contenu principal */
section {
    padding: 50px 0;
}

section h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

section p {
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Formulaire de contact */
form {
    max-width: 100%;
    margin: 0 auto;
}

form .form-label {
    font-weight: bold;
}

form button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

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







footer p {
    margin: 0;
    font-size: 1rem;
}


/*
/////////////
/////////////
/////////////
    PRIX
/////////////
/////////////
/////////////
 */



.note-popover, .note-toolbar {
    z-index: 1050; /* Ajustez selon vos besoins */
}

.table tbody tr {
    display: table-row;
}

.table tbody tr.ui-sortable-helper {
    display: table; /* Permet de garder les colonnes alignées */
    background-color: #f8f9fa; /* Donne un effet visuel à l'élément déplacé */
    border: 2px dashed #007bff; /* Ajoute un contour à l'élément déplacé */
    opacity: 0.8;
}

.table-pr tbody td,
.table-pr tbody th {
    vertical-align: middle;
    text-align: center;
    height: 80px; /* Fixe une hauteur uniforme */
    overflow: hidden;
}
 
.img-serv {
    

         width: 100%;
            height: 150px;

            object-fit: cover; /* Ajuster l'image pour couvrir toute la zone */
            

}




/* Lightbox style */
  .lightbox {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        
        z-index: 1000;


    }

    .lightbox img {
        max-width: 90%;
        max-height: 80vh;
      margin:  auto;

        display: flex;
        align-items: center;
        position: relative;
        justify-content: center;

    }

    .lightbox .close-lightbox {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 30px;
        color: white;
        text-decoration: none;
        cursor: pointer;
    }

.item{
 opacity: 95%;
border-radius: 25px !important;

/* border-radius: 0px 18px 18px 0px; /* Adoucit les coins des éléments */
 width: 100%;
 border:  solid,  0.13em !important;
  

}


.nom_serv{  
max-width: 300px;
word-break: break-all;
 overflow: scroll;
    max-height: 200;
 
}
 
.action{
    align-items: center;
    width: 225px;
}  
    
.image{
    align-items: center;
    max-width: 50px;
}   
     

@media only screen and (max-width: 500px) {
.item{
 opacity: 95%;
 -background: linear-gradient(45deg, rgba(0,12,34,1) 0%, rgba(0,38,140,1) 22%, rgba(1,54,166,1) 47%, rgba(0,68,212,1) 72%, rgba(0,82,255,1) 100%);
 
 width: 100%;
  border:  solid,  0.13em !important;
 

}
.nom-service{
    font-size: 20px;
     font-weight: bold;
     color: white;
     text-overflow: clip;
     overflow: auto;
     align-self: auto;
    position: static;
}







}


 .service{
       height: 100px !important;
    background-color: white;
overflow: scroll;

}

.produit{
    background-color: white;

}


/*
.item:hover  {
 opacity: 95%;
background: linear-gradient(45deg, rgba(0,12,34,1) 0%, rgba(0,38,140,1) 22%, rgba(1,54,166,1) 47%, rgba(0,68,212,1) 72%, rgba(0,82,255,1) 100%);
 border-radius: 0px 18px 18px 0px; 
    width: 970px;
   transition-duration: 0.5s;
}

*/

.srv-prd-cont{
    border: solid  ;
border-collapse: collapse;
    border-radius: 25px;
   flex-flow: nowrap;
   
    padding: 5px ;

     background-color: transparent !important ;
}

.titre-prix{
  text-align: center;
    font-weight: bold;
    margin: 20px;
    color: #055772;
}

/* Liste des prix */
ul.list-group {
    max-width: 950px;
    -margin: 0 auto;
    
/* border-radius: 0px 15px 15px 0px; /* Adoucit les coins des éléments */
 border-radius: 0px 0px 0px 0px; 

}


ul.list-group-item {
    font-size: 1.25rem;
    padding: 15px;
    
    
    background: linear-gradient(45deg, rgba(0,43,129,1) 0%, rgba(98,149,255,1) 31%, rgba(94,138,255,1) 58%, rgba(255,255,255,1) 100%);
    background:  #09A9C8;


}


.list{
    background-color: transparent !important;
    border-left:  #055772 ;
    border-left-width: 15px;
  
    height: 100%;


}

.list-group-item {
    font-size: 1em; /* Agrandit la police pour une meilleure lisibilité */
    padding: 10px ; /* Ajoute de l'espacement pour agrandir visuellement les éléments */
    padding-left: 15px  ; 
    margin-top: 2px; /* Espacement entre les éléments */
    margin-bottom: 2px; /* Espacement entre les éléments */
   
    /*box-shadow: 3px 2px 1px  rgba(0, 0, 0, 0.4); /* Ajoute une légère ombre pour donner du relief */
     
    opacity: 100%;
    word-break: break-word; 
    text-align: justify-all;
}


.list-group-item .badge {
    font-size: 1em; /* Ajuste la taille de la police du badge */
    padding: 10px 15px; /* Augmente la taille du badge */
     border:  solid,  0.13em !important;

}
.img{
    border-radius: 8px;
    height: 76.2px  ;
    width: 100px ;
    border: white, solid;
    cursor: pointer;

}


 
.img-div{
    padding-left: 0px  !important; 
    margin: 0px  !important; 
      margin-right: -5px  !important; 
}


.nom-service{
    font-size: 20px;
     font-weight: bold;
     color: white;
}


@media only screen and (max-width: 600px) {
.list-group-item {
    font-size: 1em; /* Agrandit la police pour une meilleure lisibilité */

    padding: 10px  !important; /* Ajoute de l'espacement pour agrandir visuellement les éléments */
    padding-left: 15px  !important; 
    margin-top: 2px; /* Espacement entre les éléments */

    margin-bottom: 2px; /* Espacement entre les éléments */
   
    /*box-shadow: 3px 2px 1px  rgba(0, 0, 0, 0.4); /* Ajoute une légère ombre pour donner du relief */
 
    opacity: 100%;
      

}

.list-group-item .badge {
   font-size: 15px;
    padding: 10px 15px; /* Augmente la taille du badge */
     border:  solid,  0.13em !important;

}

.img{
    border-radius: 8px;
    height: 50px  ;
    width: 75px ;
    border: white, solid;
    cursor: pointer;
      margin-top: 4px; /* Espacement entre les éléments */

    margin-bottom: 4px; /* Espacement entre les éléments */

}

.nom-service{
    font-size: 15px;
     font-weight: bold;
     color: white;
}


}



.prix-desc{

   /* background: linear-gradient(45deg, rgba(0,39,117,1) 0%, rgba(0,46,140,1) 31%, rgba(0,24,88,1) 58%, rgba(0,34,105,1) 100%);
    background: #055772 ;
     box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.8); /* Ajoute une légère ombre pour donner du relief */
      /* color: white;*/

 
    
   
    border-radius: 15px; /* Adoucit les coins des éléments */
   
    max-width: 100%; /* Augmente la largeur maximale du conteneur */
    overflow-wrap: normal; 
    display: inline-block;
    max-height: fit-content;
   
    text-align: left;
    
}

.text-desc-prix{
     padding: 15px;
     white-space: pre-wrap;
      text-align: center;
     align-content: center;
      font-size: 18px;
    
}



 .titre-container {
        position: relative;
        z-index: 1;


    }


        /* Div colorée avec une transparence */
        .background-div-bando {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 120px;
           opacity: 0.8; /* Rouge avec une transparence de 0.5 */
            z-index: 1; /* Derrière le texte */
        }

        /* Div transparente contenant du texte */
        .text-div-bando {
        text-transform: uppercase;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
             height: 120px;
            background-color: transparent; /* Complètement transparent */
            display: flex;
            align-items: center;
            justify-content: center;
             
            z-index: 2; /* Devant la div colorée */
               color: white;
    font-size: 45px;
    font-weight: bold;
    padding: 15px;
     
        }


 

        /* Div transparente contenant du texte */
        .text-div-bando-sc {
        text-transform: uppercase;
             
            top: 0;
            left: 0;
            width: 100%;
             height: 120px;
            
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 15px !important;
             
             
               color: white;
    font-size: 45px;
    font-weight: bold;
    padding: 15px;
     
        }



div.titre{
    padding: 10px;
    
  opacity: 0.2 !important; 

     position: absolute;
    width: 100%;
    
    background: ;
     z-index: 2;
     height: 120px;

    
backdrop-filter: blur(10px);
    
}



div.titre-sans-car{
      padding: 10px;
    background: linear-gradient(45deg, rgba(0,13,38,1) 0%, rgba(0,13,40,1) 18%, rgba(0,24,88,1) 45%, rgba(0,34,105,1) 100%);
       background:  rgba(5,87,114,0.8);
    width: 100%;
    
       
     height: 220px;

    
backdrop-filter: blur(10px);
    
}

h2.titre-sans-car{
    color: white;
    font-size: 45px;
    font-weight: bold;
    padding-top: 55px;


   
}

h2.titre{
    color: white;
    font-size: 45px;
    font-weight: bold;
    padding: 15px;
     


   
}

@media only screen and (max-width: 600px) {
 form.table {
    overflow: auto;
    align-self: center;
    font-size: 10px;
    
}

.img-serv{
    
       
            object-fit: contain; /* Ajuster l'image pour couvrir toute la zone */
            
}

}

form.table {
    overflow: auto;
    align-self: center;
}


/*
/////////////
/////////////
/////////////
    Modif entreprise
/////////////
/////////////
/////////////
 */

.logo-reseau {
   width: 50px;  /* Ajuste la largeur selon la taille souhaitée */
   height: 52px; /* Maintient les proportions de l'image */
   margin-right: 10px;
   border-radius: 5px; /* Optionnel, pour arrondir les bords */
   object-fit: cover;
}

.list-reseau{

    margin-right: 1px;
}


/*
/////////////
/////////////
/////////////
    NAV BAR
/////////////
/////////////
/////////////
 */

nav {
    background: linear-gradient(55deg, rgba(2,0,36,1) 0%, rgba(4,15,57,1) 27%, rgba(15,102,181,1) 46%, rgba(15,104,185,1) 71%, rgba(0,82,255,1) 100%);
     background:  #001F3D;
    opacity: 100%;

    

}


.nav{
    padding: 35px;

    position: relative;
    z-index: 2;  
}


/* Style pour le conteneur de la div */
.particle-container {
    position: relative;
    width: 100%;
    height: 50%;
    overflow: hidden;
    background-color: #000d26;
    z-index: 1;  

}

/* Style pour chaque particule */
.particle {
    position: absolute;
    width: 9px;
    height: 9px;
    background-color: yellow;
    background-color: #09A9C8;
     background-color: white;
    border-radius: 50%;
    opacity: 0.5;
    animation: moveParticle linear infinite;
    filter: blur(10px);
}

/* Style pour chaque particule */


/* Animation pour le mouvement des particules */
@keyframes moveParticle {
    0% {
        transform: translate(0, 0);
        opacity: 0.8;
    }
    25% {
        transform: translate(-50px, 50px);
        opacity: 0.5;
    }
    50% {
        transform: translate(50px, -50px);
        opacity: 0.3;
    }
    75% {
        transform: translate(-50px, -50px);
        opacity: 0.5;
    }
    100% {
        transform: translate(50px, 50px);
        opacity: 0.8;
    }
}
/* Animation pour le mouvement des particules */


.connex{
    color: #09A9C8  !important;
    border-color:#09A9C8 !important;
}
.connex:hover{
    color: white !important;
    background-color:#09A9C8 !important;
}

.navbar-logo{
    height: 35px;
    width: 35px;
    
}

a.nav-link {
    color: white;
    font-size: 18px ;
    -margin-right: 10px;
}

a.nav-link:hover {
   

}


.navbar-brand{
    color: white;
    -margin-right: 0px;
}
.navbar-brand:hover {
    color: white;
}


/*
/////////////
/////////////
/////////////
    FOOTBAR
/////////////
/////////////
/////////////
 */

.footer {
    background: linear-gradient(55deg, rgba(2,0,36,1) 0%, rgba(4,15,57,1) 27%, rgba(15,102,181,1) 46%, rgba(15,104,185,1) 71%, rgba(0,82,255,1) 100%);
  background:  #001F3D;
    padding: 15px 0;
    position: relative;
    bottom: 0;
    width: 100%;
}

.container-foot {

    min-height: 50px;
}

.social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Permet de passer à la ligne si trop d'icônes */
    gap: 15px; /* Espacement entre les icônes */
}

.social-icons-div {
    width: 40px; /* Taille fixe pour les conteneurs */
    height: 40px;
}
.social-icon-img {
    width: 100%; /* Remplit le conteneur */
    height: 100%; /* Remplit le conteneur */
    object-fit: cover; /* Conserve le ratio des images */
    background-color: white; /* Ajoute un fond blanc si nécessaire */
    padding: 2px; /* Élimine les bordures trop grandes */
    border-radius: 50%; /* Rend les icônes circulaires */
    border: 2px solid #ddd; /* Bordure subtile autour des icônes */
    box-sizing: border-box; /* Inclut le padding dans la taille de l'image */
    transition: transform 0.3s ease; /* Animation au survol */
}

.social-icon-img:hover {
    transform: scale(1.3); /* Agrandit légèrement au survol */
    border-color: #09A9C8; /* Change la couleur de la bordure au survol */

}


/*
/////////////
/////////////
/////////////
    Carrousel
/////////////
/////////////
/////////////
 */

 /* Taille fixe pour le carrousel */
        .carousel {
            width: 100%;
            height: 400px;
            padding-bottom: 15px;
             box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.8); /* Ajoute une légère ombre pour donner du relief */
             /* Centrer le carrousel */
        }
        .carousel img {
            aspect-ratio: 16 / 9;
            width: 100%;
            height: 400px;
            object-fit: cover; /* Ajuster l'image pour couvrir toute la zone */
            

        }

        .card-img-top{
                display: block;
           
            height:250px;
            width: auto;
             
        }

.carousel-container {
        position: relative;
        z-index: 0;
    }

/*
/////////////
/////////////
/////////////
    fleche
/////////////
/////////////
/////////////
 */

  /* Container for the arrow */
        .arrow-container {
            display: flex;
            justify-content: center;
            margin-top: 35px;
            padding-top: 1px;
            position:static;
        }

        /* Styling the arrow */
        .arrow {
            width: 80px;
            height: 80px;
            border-left: 10px solid #067593;
            border-bottom: 10px solid #067593;
            transform: rotate(315deg);
            animation: colorChange 2.5s infinite alternate, moveDown 2.5s infinite;
            cursor: pointer;

        }
         /* Styling the arrow */
        .arrow-2 {
            width: 60px;
            height: 60px;
            border-left: 10px solid #067593;
            border-bottom: 10px solid #067593;
            transform: rotate(315deg);
            animation: colorChange 2.5s infinite alternate, moveDown 2.5s infinite;
            cursor: pointer;

        }

        /* Color change animation */
        @keyframes colorChange {
            0% { border-color: #000000; }
            
            100% { border-color: #FFFFFF; }
        }

       
/*
/////////////
/////////////
/////////////
    Acueil
/////////////
/////////////
/////////////
 */


@media only screen and (max-width: 600px) {
 .heure{
    font-size: 10px;   padding: 2px; margin: 0px;  transform: scale(0.9); 
}
.heure-entete{
    font-size: 9px; overflow: hidden; padding: 2px;
}
.heure-text{
    font-size: 10px; overflow: hidden;   
}
}


.horaires{
    width: 400px;
    background-color: #067593;
    padding: 24px !important;
    border-radius: 15px;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.8); /* Ajoute une légère ombre pour donner du relief */
    font-weight: bold;
      
   align-items: center;
   align-content: center!important;
    margin: 0 auto;
 
    color: black ;



}

.table-container {
  
    max-width: 100%; /* Limite la largeur maximale */
    overflow-x: auto; /* Ajoute un défilement horizontal si nécessaire */

    justify-content: center; 

}


.table{
    border: solid;
color: black;
 
    

  
}
 @media (max-width:500px) {

  /* your conditional / responsive CSS inside this condition */

  .table { font-size: 12px; }

 
 
     
  
}

.image-accueil{
    width: auto;
    max-height: 600px;
    object-fit: cover; 
 border-radius: 15px;

  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.8); /* Ajoute une légère ombre pour donner du relief */
}
.image-accueil-div{
      display: block ;
     -padding-right: 96px;
}

.map {
            
            border: solid, 8px;
           
            height: 400px;
            width: 100%;
             -margin-right: 96px;

            border-radius: 15px;
            box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.8); /* Ajoute une légère ombre pour donner du relief */
        }

 

.bvn{
    font-size: 40px;

}

/*
input[type=time]::-webkit-calendar-picker-indicator {
    /*color: #999;
    background-color: transparent;
    height: 0px;
    position: relative;
    display: none;
    width: 0px;
    z-index: 0;
    padding: 0px; 
    

}



input[type=date]::-webkit-calendar-picker-indicator:before {
   /* background: #eee;
    background: linear-gradient(90deg, #eee, #fff);
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    border-radius: 24px;
    content: '';
    display: block;
    height: 22px;
    left: -2px;
    position: absolute;
    top: -5px;
    width: 22px;
    z-index: -1;  

}

::-webkit-calendar-picker-indicator {
  margin-right: -.35em; // @note Harmonisation avec les icônes remplacées.
  filter: invert(48%) sepia(30%) saturate(0%) hue-rotate(203deg) brightness(90%) contrast(95%); // @note Harmonisation avec les icônes remplacées @see https://stackoverflow.com/a/43960991/4960244
  cursor: pointer;
}

/* Styles pour la bordure */
    .bordered {
        border: solid, 8px;
             
    }
    .no-border {
        border: none;
          box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.8); /* Ajoute une légère ombre pour donner du relief */
    }

.img-demo{
     width: 100%;
    height: 100%;
    object-fit: cover; 
    border: solid, 8px, black;
    margin: 10px;
 
}


.contact{
    background-color: #067593;
    padding: 14px;
    border-radius: 15px;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.8); /* Ajoute une légère ombre pour donner du relief */
    font-weight: bold;
}


.text-2-acc{
    background-color: transparent !important;
    padding: 14px;
    border-radius: 15px;
    border: solid, 8px;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.8); /* Ajoute une légère ombre pour donner du relief */
   
}


.text-desc-accueil{
    
      
      overflow: hidden;
     white-space: pre-wrap;
     text-align: left;

    
}

.accueil-row{
    -flex-flow: nowrap;
    background-color:  ;
    -margin-bottom: 100px;


}

.highlight-2 {
    background-color: yellow;
    transition: background-color 3s ease;
}

.highlight {
    animation: highlight 2s ease-in-out ;
   
}

@keyframes highlight {
    from {
        background-color: #ff0  ;
    }
    to {
        background-color: transparent  ;
    }
}

.reseaux-list{
  
border: solid !important ;
 box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.8); /* Ajoute une légère ombre pour donner du relief */
}

 
/*
/////////////
/////////////
/////////////
    Apropos 
///////////// 
/////////////
/////////////
 */

.faq{
    border-radius: 25px!important ;
    border: solid, 3px !important ;
 
 margin: 10px;
 
}

.faq-titre {
padding: 15px;
font-size: 25px;
font-weight: bold;
}

.faq-quest{
    padding: 15px;

}




.faq-sous-div-qest{
 
}

.faq-sous-div-titre {
   
border-radius: 22px 22px 0px 0px!important ;

background-color: #067593;
}




/* Styles pour la section FAQ */
.faq-question {

    font-weight: bold;
    margin-bottom: 10px;
}

.faq-answer {
    margin-bottom: 30px;
}

/*
/////////////
/////////////
/////////////
    Contacte 
/////////////
/////////////
/////////////
 */
.cont-res{
     overflow-wrap: break-word;
     overflow: unset;
     border-radius: 24px;
     padding: 15px;
      box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.8); /* Ajoute une légère ombre pour donner du relief */
      color: black;
     }

.color-1{
background-color:#067593;
}     
.color-2{
 background-color:  #09A9C8;
}  
.color-3{
 background-color:  #001F3D;
}  
.color-4{
background-color: #000d26;
}  

.mail-form{
    font-size: 20px;
    margin: 16px !important;
}
.color-box {
            width: 100%;
            height: 60px;
            margin: 10px auto;
            border: 5px solid black;
            cursor: pointer;
             transition-duration: 1s;
             border-radius: 5px;


        }
        .active {
            border-color: yellow !important;
            background-image:  url(coche.png) ;
            background-position: center; /* Center the image */
            background-repeat: no-repeat; /* Do not repeat the image */
            background-size: contain; /* Resize the background image to cover the entire container */

        }
        .column {
            text-align: center;
        }

.color-box:hover {
           transform: scale(1.1); /* Agrandit légèrement au survol */
           transition-duration: 500ms;

             z-index: 1;
            }


.active-n {
    border: 10px solid black !important;

            background-image:  url(coche.png) ;
            background-position: center; /* Center the image */
            background-repeat: no-repeat; /* Do not repeat the image */
            background-size: contain; /* Resize the background image to cover the entire container */

}

.active-b {
    border:10px solid white !important;

            background-image:  url(coche-b.png) ;
            background-position: center; /* Center the image */
            background-repeat: no-repeat; /* Do not repeat the image */
             background-size: contain; /* Res*/

}