/* Style pour le mode nuit */
:root {
  --bg-section: rgba(40, 40, 40, 1);
}

   
body.night-mode :not(button),
body.night-mode .appointment,
body.night-mode nav, 
body.night-mode nav * :not(button.navbar-toggler):not(button.navbar-toggler *),
body.night-mode .contact .php-email-form {
  background-color: rgb(0, 0, 0);
  color: white; /* */
}


body.night-mode nav,
body.night-mode nav *:not(.dropdown-menu):not(.dropdown-menu *):not(button *) {
  background-color: black !important;
  color: white !important;
} 
 /***********Sous Nav Link *************************/
body.night-mode .dropdown-menu li:hover a {
  background-color: rgba(255, 255, 255, 0.6) !important;
  color: black !important;
}





body.night-mode textarea {
  background-color: white;
  color: black; /* */
}

/* Exclure les icônes des changements */
body.night-mode .service-item .icon,
body.night-mode .service-item h4 a,
body.night-mode .service-item p,
body.night-mode .service-item h4 {
  background-color: transparent !important;
  color: inherit !important;
}

body.night-mode .featured-services .service-item {
  box-shadow: 0px 0 25px 0 rgb(255, 255, 255, 0.5);
}

/* // section  accent-background */
body.night-mode .accent-background div,
body.night-mode .accent-background * {
  background-color: transparent !important;
  color: black !important;
}

/* // section  accent-background */
body.night-mode .accent-background {
  background-image: linear-gradient(150deg, gray, white, gray);
  color: black !important;
}

/* FONCTIONALITE ******************/
body.night-mode .service-item .icon2 {
  box-shadow: 0px 0 25px 0 rgb(255, 255, 255, 0.5);
}

body.night-mode .service-item:hover .icon2 i {
  background-color: transparent;
}
body.night-mode .service-item:hover .icon2 {
  box-shadow: 0px 0 25px 0 rgb(255, 255, 255, 0.5);
  background: var(--accent-color) !important;
}

/******LES QUESTIONS***********************/

body.night-mode .faq-container .faq-item {
  border: 1px solid white;
}

/*******INFORMATION**************************/

body.night-mode .contact .info-item i {
  color: white;
  border-color: white;
}
body.night-mode .contact .info-item h3 {
  color: white;
}

body.night-mode .contact .info-item {
  border-color: white !important;
}

body.night-mode .info-item {
  box-shadow: 0px 0 25px 0 rgb(255, 255, 255, 0.5);
}
body.night-mode .contact .php-email-form {
  box-shadow: 0px 0 25px 0 rgb(255, 255, 255, 0.5);
}

/********** sectopn Appointment   ******/
body.night-mode .appointment {
  background-color: var(--bg-section);
}

body.night-mode .appointment div,
body.night-mode .appointment p,
body.night-mode .appointment h6,
body.night-mode .appointment h5,
body.night-mode .appointment h4,
body.night-mode .appointment h3,
body.night-mode .appointment h2,
body.night-mode .appointment h1,
body.night-mode .appointment label,
body.night-mode .appointment label b,
body.night-mode .appointment form {
  background-color: transparent !important;
}

/************Questions fréquemment posées faq ***************************************/

body.night-mode .faq {
  background-color: var(--bg-section);
}
body.night-mode .faq div,
body.night-mode .faq p,
body.night-mode .faq i,
body.night-mode .faq h6,
body.night-mode .faq h5,
body.night-mode .faq h4,
body.night-mode .faq h3,
body.night-mode .faq h2,
body.night-mode .faq h1,
body.night-mode .faq label,
body.night-mode .faq label b,
body.night-mode .faq form {
  background-color: transparent !important;
}

/************aos-animate Adresse Email Telephone ***************************************/

body.night-mode .aos-animate {
  background-color: var(--bg-section);
}
body.night-mode .aos-init div,
body.night-mode .aos-init p,
body.night-mode .aos-init h6,
body.night-mode .aos-init h5,
body.night-mode .aos-init h4,
body.night-mode .aos-init h3,
body.night-mode .aos-init h2,
body.night-mode .aos-init h1,
body.night-mode .aos-init label,
body.night-mode .aos-init label b,
body.night-mode .aos-init form {
  background-color: transparent !important;
}

/*******Footer Link ********************************/


body.night-mode footer *{ 
  background: transparent !important;
}



body.night-mode footer-about .sitename {
  color: white;
}

body.night-mode footer .footer-links ul a {
  color: rgba(255, 255, 255, 0.7);
}

body.night-mode footer .credits a {
  color: #2d87f0;
}

body.night-mode footer .copyright {
  border-top-color: white;
}

/*******social-links**********************/

body.night-mode footer .social-links i {
  background-color: transparent;
}



/*******Icon Gallery SVG ****************************/
body.night-mode .gnext svg,
body.night-mode .gprev svg {
  background-color: transparent;
}
/**********Nav Bar*********************************/
body.night-mode nav { 
  box-shadow: 0 4px 6px rgba(250, 250,250, 0.5);
}
body  nav { 
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}


/******Button Responcive menu*****************************/

body.night-mode  button.navbar-toggler:focus {
  
  box-shadow:0 0 0 2px;
}

body.night-mode button.navbar-toggler .navbar-toggler-icon {
 
  filter: brightness(1782%) invert(100%); /* transforme les lignes en blanches */
}
/* navbar-toggler   */
body.night-mode .navbar-toggler {
  color: var(--bs-navbar-color);
  background-color: transparent;
  border-color: white;
}


/******Cards Products******************************/

body.night-mode  #formations .card {
  background-color: var(--bs-navbar-color) !important; 
  box-shadow: 0px 0 25px 0 rgb(255, 255, 255, 0.5) !important;
} 
/************Animation **************************/

  #formations .card {
  position: relative;  
  overflow: hidden;  
}

 #formations .card::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  pointer-events: none;  
  transition: transform 0.4s ease-out;
}

  #formations .card:hover::after {
  transform: translate(-50%, -50%) scale(1);
}








 

/* Style pour le bouton mode nuit */
.btn-night {
  background-color: #444;
  color: white;
  border: none;
}

.btn-night:hover {
  background-color: #666;
}


/**************************** Page Contact  */
 

body.night-mode .contact div,
body.night-mode .contact p,
body.night-mode .contact a,
body.night-mode .contact h6,
body.night-mode .contact h5,
body.night-mode .contact h4,
body.night-mode .contact h3, 
body.night-mode .contact h1,
body.night-mode .contact label,
body.night-mode .contact label b,
body.night-mode .contact form {
  background-color: transparent !important;
  color: white  !important;
  
}


body.night-mode .contact .info-item:hover {
  box-shadow: 0 8px 15px rgba(255, 255, 255, 0.7);
}

body.night-mode .contact  form{
  box-shadow:  none !important;;
 }
   
/* Par défaut - Couleurs grises pour les champs input et textarea */
body.night-mode .contact .php-email-form input,
body.night-mode .contact .php-email-form textarea {
  color: black !important; /* Couleur du texte */
  background-color: #86b9fe !important; /* Couleur de fond */
  border-color: #86b7fe !important; /* Bordure */
  outline: 0;
  box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25); /* Ombre autour du champ */
}

/* Style du placeholder par défaut */
body.night-mode .contact .php-email-form input::placeholder,
body.night-mode .contact .php-email-form textarea::placeholder {
  color: white; /* Couleur du placeholder par défaut */
}

/* Lors du focus sur les champs input et textarea */
body.night-mode .contact .php-email-form input:focus,
body.night-mode .contact .php-email-form textarea:focus {
  color: black !important; /* Texte en noir lors du focus */
  background-color: white !important; /* Fond blanc lors du focus */
  border-color: #86b7fe !important; /* Bordure bleue */
  box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25); /* Ombre bleue autour du champ */
}

/* Lors du focus, changer la couleur du placeholder */
body.night-mode .contact .php-email-form input:focus::placeholder,
body.night-mode .contact .php-email-form textarea:focus::placeholder {
  color: black; /* Placeholder devient noir lors du focus */
}