*{			
    /* pour resseter les valeurs*/			
    padding:0;			
    margin: 0;			
    box-sizing: border-box;			
    /*background-size: cover; */			
}		


/*.grid-container {			
  display: grid;			
  grid-template-areas:			
    'header header header'			
    'main main main'			
    'footer footer footer';			
  height:auto;			
}			
.grid-container > div {			
  height: auto;			
}	*/		


/* *************************************************************************************  */
/* segment 5 */			
/* *** valeur  écran de 1200px et plus  ***** @media screen and (min-width: 1200px){ 	 */ 	


body {
    background-image: url('/webroot/img/arriere-plan-reverse.png'); /* Replace with your image path */
    /*background-image: url('/webroot/img/ww1.png'); /* Replace with your image path */
    /*background: radial-gradient(circle, #FBFFB7,	#FFC43B);*/
    /*background: radial-gradient(circle, #FBFFB7,	#FDEC7D);   #FFFF66*/
    /*background: linear-gradient(to right, #FFFF66, #FFFFE0);*/
    /*background-color: #FAFAD2;*/

    background-size: cover; /* Scales the image to cover the entire container */
    background-position: center center; /* Centers the image horizontally and vertically */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    background-attachment: fixed; /* Keeps the background fixed when scrolling */
}

/*-------- Les éléments restent sur la même ligne ???? vérifier ou ----communique_clavardage_encours.php-------*/
.item {
    display: inline-block; 
    padding: 10px;
    /*background-color: lightblue;*/
    background-color: transparent;
    margin: 5px;
    vertical-align: middle; /* Alignement vertical */
}

/*-------- item1, item3, et item5 servent pour segmenter les pages web -------*/

.item1 {			
  grid-area: header;			
  background-color: transparent;			
  text-align: center;			
}

.item3 { /* fait partie de la section main */
    grid-area: main; 
    text-align: center;
    
}

.item5 {			
  grid-area: footer;			
  background-color: transparent;			
  color: green;			
  text-align: center;			
		
}

/* pour tester kayser dynamique */
.user-box {
        border: 1px solid #ccc;
        padding: 10px;
        margin: 10px;
        width: 450px;
        display: inline-block;
    }





/* --- ?????  pour Vous n'avez pas rempli le formulaire correctement.dans user_login.php avec class="custom-alert_danger"> -- */  
/* valeur de base pour tout le layout */	
/*.nav {  		
  list-style-type: none;			
  text-align: center;			
  margin: 0;			
}			*/

/* ----------------------------------------- */  
/* icone drapeau du québec ???? */ 			
/*.nav li0 {			
  display: inline-block;			
   width: 2.25rem;			
    height: auto;
}*/

		
/*  icone de parametre.png dans preferences.php  et balance (2b).png de balance.php 
kiosque.png de kiosque.php, pigeon.png de page_menu_actuel.php 
buffet2.png de account.php
Contenu lettre2.png de communique_messagerie.php */			
.nav li1 {			
  display: inline-block;			
  width: 4rem;		
  height: auto;
}	

/* affiche menu_o.png de menu.php */ 			
.nav li1b {			
  display: inline-block;			
  width: 9rem;		
  height: auto;
}
			
/* affiche la $preface de visiteur_layout.php */ 			
.nav li2 {			
  display: inline-block;			
  font-family: "Lucida Sans", sans-serif;			
  font-size: 2.25rem;
  color:	#FF4500;  /* orange  */
}

/* affiche liste $row['sous_categorie'] et texte: Ou bien ajouter un produit de index_cat_produit.php
affiche boucle $valeur(sous-cat) et texte: Ou bien ajouter une recette de recettes/index.php */ 			
.nav li2b {			
  display: inline-block;			
  font-family: "Lucida Sans", sans-serif;			
  font-size: 1.25rem;
  color:	#FF4500;  /* orange  */
}

/* Crée sur une ligne icone du sous-menu(coffre,écrire,efface,disquette,dé) dans menu.php */ 			
.nav li2c {			
  display: inline-block;			
  width: 2.00rem;			
    height: 2.00rem;			
    margin-right: 1.00rem;	
   margin-left: 1.00rem;			
		
}

/* --- kiosque.png, maison3.jpg de visiteur_layout.php et alert.png, login.png de user_login.php et register.php
et kiosque.png, maison3.jpg de des_questions.php et pareil pour preferences.php et balance.php et kiosque.php et maison.php 
icone roi de pique.jpg de kayser_connection.php, reset.png de kayser_connection.php et kayser_connection.php et login.png de forget.php
affiche texte: Ce choix n'est pas disponible en mode visiteur! et icone alert.png de index_cat_produit.php et recettes/index.php 
affiche alert.png de account.php 
affiche les icone:lettre2.png, clavard2.png,  maison3.jpg, roi de coeur_500.jpg, parametre.png, ferme.png, collaboration2.png, administration2.png de account.php 
affiche icon login2.png, de invite_layout.php-- */		
.nav li3 {			
  display: inline-block;			
   width: 2.25rem;			
    /*height: 2.50rem;*/
    height: auto;
    margin-right: 1.00rem;
}

/* parametre.png, balance (2b).png et mode emploi2.png de visiteur_layout.php 
et parametre.png, balance (2b).png", mode emploi2.png de des_questions.php 
et pareil pour preferences.php  et balance.php et kiosque.php et maison.php et kayser_connection.php   
efface1.png et  de index_cat_produit.php  affiche efface1.png de recettes/index.php
utilisé aussi avec index_recette_detail.php 
affiche icons:mode emploi2.png, parametre.png,  balance (2b).png, chapeau2.png, menu_up2.png de invite_layout.php ---*/

.nav li4 {			
  display: inline-block;			
		
    width: 2.00rem;			
    height: 2.00rem;			
    margin-right: 1.00rem;	
  /* margin-left: 1.25rem;			*/
}

/* --- interrogation3.png de visiteur_layout.php et interrogation3.png de des_questions.php et preferences.php
 et balance.php et kiosque.php et maison.php et kayser_connection.php --- */
.nav li4b {			
  display: inline-block;			
		
    width: 2.55rem;			
    height: 2.55rem;			
    margin-right: .25rem;	
   margin-left: .25rem;	
}

/* --- roi de coeur.jpg de visiteur_layout.php et pareil pour preferences.php et balance.php et kiosque.php et maison.php et kayser_connection.php--- */
.nav li4c {			
  display: inline-block;			
    width: 2.00rem;			
    height: 2.00rem;			
    margin-right: .50rem;	
   margin-left: .50rem;	
   margin-bottom: .50rem;	
}

 /* ---??????????????????--- */
.nav li4d {			
  display: inline-block;			
    width: 3.00rem;			
    height: 3.00rem;
		
}

 /* ---??????????????????--- */
.nav li5 {	/* affiche  menu produits recettes achats
affiche $preface de invite_layout.php */		
  display: inline-block;			
  font-family: 'Segoe Print', cursive;	
  font-size: 1.60rem;/*	font-size: 28px;		*/
  /*padding: 0;	*/		
  margin-right: .75rem;	
  text-decoration: none;
  
}

 /* -- pour message d'avertissement en mode visiteur de visiteur_layout.php -- */
.nav li5b {		
  display: inline-block;			
  font-family: 'Segoe Print', cursive;	
  font-size: 1.25rem;/*	font-size: 28px;		*/
  /*padding: 0;	*/		
  margin-right: .75rem;	
  text-decoration: none;
  
}

/* affiche menu produits recettes achats du menu supérieur de visiteur_layout.php */ 			
.nav li6 {			
  display: inline-block;			
  width: 5rem;		
  height: auto;
  margin-right: .70rem;	
}

.nav li6a {			
  display: inline-block;			
  width: 3.5rem;		
  height: auto;
  margin-right: .70rem;	
}

/* affiche menu_o.png de menu.php mais aussi, produits_o.png de produits, recettes achats affiche recettes_o.png de recettes/index.php affiche achats_o.png de achats/index.php */ 			
.nav li6b {			
  display: inline-block;			
  width: 6.00rem;		
  height: auto;
  /*margin-right: 1.00rem;	*/
}

/* affiche menu_o.png de menu.php mais aussi, produits_o.png de produits, recettes achats affiche recettes_o.png de recettes/index.php affiche achats_o.png de achats/index.php */ 			
.nav li6c {			
  display: inline-block;			
  width: 10.00rem;		
  height: auto;
  /*margin-right: 1.00rem;	*/
}

/* affiche logo planibouffe dans visiteur_layout.php 
icon au menu.png de account.php -- */		
.nav li7 {			
  display: inline-block;			
  width: 12rem;		
  height: auto;
  /*margin-right: 1.00rem;*/
}

.nav li7b {			
  display: inline-block;			
  width: 40rem;		
  height: auto;
  /*margin-right: 1.00rem;*/
}

/* affiche logo planibouffe ????????????? */ 			
.nav li8 {			
  /*display: inline-block;	*/		
    width: 2rem;			
    max-height: 1rem;
    /*margin-right:10px;*/

}

/* image des cartes ??????????????????? */ 			
.nav li9 {			
  display: inline-block;			
  width: 3.5rem;		
  height: auto;
  margin-right: .70rem;	

}

/* a {
      text-decoration: none;
    }*/

/* texte Planificateur maison ???????????? */
.nav p1 { 
    /*font-family: 'Segoe Print', cursive;*/
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.75rem;
    color: 	#003399; 
    margin-right: 0.50rem;
}

.nav p1b { 
    /*font-family: 'Segoe Print', cursive;*/
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.00rem;
    /*color: 	#003399; */
    color: purple;
    margin-right: 0.50rem;
}

/*  texte dans kayser_connection.php et texte cout_total_jour de menu.php
affiche liste du csv/semaine de achats/page_menu_actuel.php  ---------- */	
.nav p2 { 
  font-family: "Lucida Sans", sans-serif;			
  font-size: 1.50rem;
  /*color: #55226b;		*/
  color: black;
}

/* -- pour se connecter et s'inscrire et autre texte de: des_questions.php et de Se connecter et S'inscrire et texte Pour la semaine du... de balance.php ----------------- */	
/* -- texte général de preferences.php,  -------------- */
/* texte vendre, donner, échanger et général de kiosque.php  */
/* texte se connecter et s'inscrire et texte général de maison.php  */
/* texte Votre liste initiale d'achats, estimé pour... de page_menu_actuel.php
utilisé aussi avec index_recette_detail.php */
 .nav p3 {			
  font-family: "Lucida Sans", sans-serif;			
  font-size: 1.25rem;
  /*color: #55226b;		*/
  color: black;
}

/*  texte: Connexion de user_login.php  */ 	
/*  texte: Mes préférences de preferences.php et Menu équilibré? de balance.php */ 
/* texte Au kiosque de kiosque.php,  texte Ma maison de maison.php */
/* texte kayser dekayser_connection.php */
/* texte:  Oups! oublié? de forget.php */
.nav p4 {			
  font-family: 'Segoe Print', cursive;			
    /*font-size: 2.00rem;*/
    /*font-size: 30px;*/
    font-size: 2.00rem;
    margin-left: 1.50rem;
  color: black;			
}

.nav p5 {			
  font-family: 'Segoe Print', cursive;			
    /*font-size: 2.00rem;*/
    /*font-size: 30px;*/
    font-size: 1.00rem;
    margin-left: 1.50rem;
  color: black;			
}

.nav p6 {			
  font-family: "Lucida Sans", sans-serif;
    font-size: 1.50rem;
  color: black;			
}

/*pour: le texte du formulaire et de mot de passe oublié et nouvelle inscription dans user_login.php et register.php 
texte: Ou bien une nouvelle inscription, email,  de forget.php
ainsi que texte de users/account.php 
et celui de communique_messagerie.php ---*/
p41 			
    {			
    font-family: "Helvetica"; 			
    font-size: 1.00rem;
    color: green;
    /*drapeau du québec(#003399)autre (#FF8C00)*/
    }
p42 			
    {			
    font-family: "Lucida Sans", sans-serif;
    font-size: 1.00rem;
    color: black;
    /*drapeau du québec(#003399)autre (#FF8C00)*/
    }
/* vous recevrez un lien par email de register.php  
texte: Vous recevrez un nouveau lien par email. de forget.php 
et celui de communique_messagerie.php  */ 			
.nav p7 {			
  /*font-family: 'Segoe Print', cursive;	*/
  /*font-family: Arial, sans-serif;
  /*font-family: 'Dancing Script', cursive;*/
  font-family: "helvetica";
  /*font-family: Arial;*/
  /*font-family: 'Segoe Print', cursive;*/
    font-size: 1.10rem;			
  /*color: #FF4500;	/* orange */	
  color: red;	/* */
}

/* montant du menu pour la journée dans achats.php ATTENTION DOUBLON DE P2 */ 			
.nav p2z {  /* pour le montant en cours */			
  display: inline-block;			
  /*font-size: 14px;	*/
  font-family: Arial, sans-serif;	
  font-size: 1.00rem;
    margin-left: 1.25rem;color: red;	/* */
}

/*-- pour le texte: Mode d'emploi, Nous joindre, visite guidée, Loi -25 de: des_questions.php ----*/
/* pour texte :Le calcul de votre menu pour la semaine... de balance.php  */
 .nav p3b {			
  font-family: "Lucida Sans", sans-serif;			
  font-size: 1.00rem;
  /*color: #55226b;	color: black;	*/
  color: #55226b;
  
}

/*---------------------------- pour le texte de invite_robot.php -------------*/
/*-------------- et juste visiter le site de visiteur_layout.php -------------*/
p3 {
    font-family: "Lucida Sans", sans-serif;
    font-size: 1.25rem;
    color: black;
}

/*-------- animation de juste visiter le site de visiteur_layout.php ---------*/
p5 {
    animation-duration: 3s;
    animation-name: slidein;
    font-family: 'Segoe Print', cursive;
    font-size: 2.75rem;
    cursor: pointer;
    text-decoration: none;
}

p5 span {
    font-family: 'Segoe Print', cursive;
    font-size: 1.75rem;
    display: inline-block;
    animation-duration: 3s;
    animation-name: growshrink; /* fonctionne avec growshrink plus bas */
    animation-iteration-count: infinite;
}


/*-------------- animation de texte de la droite vers la gauche --------------*/
#secretary_text{ 
    font-family: 'Segoe Print', cursive;
    font-size: 40px;
    color: white;
}

/* ??????????????????????????????????????????? */
   .hidden-checkbox {
      display: none;
    }

    .toggle-label {
      cursor: pointer; /* Indique que c'est cliquable */
      background-color: transparent;
      border: none;
      font-size: 2.00rem;
      display: inline-block; /* Pour que le label soit un bouton */
    }

    .panel-content {
      display: none; /* Par défaut, le panneau est caché */
      /*border: 1px solid #eee;*/
      

      
      /*padding: 15px;*/
      /*margin-top: 10px;*/
      
    }

/* Quand la checkbox est cochée, affiche le panneau */
    #panel-toggle:checked ~ .panel-content {
     display: block;
    }
    
#panel, #flip {
    text-align: center;
    /*font-size: 40px;*/
}

#panel {
    display: none;
    /*font-size: 40px;*/
}

#panel2, #flip2 {
    text-align: center;
    /*font-size: 40px;*/
}

#panel2 {
    display: none;
    /*font-size: 40px;*/
}

/* Quand la checkbox est cochée, affiche le panneau */
    #panel2-toggle:checked ~ .panel2-content {
      display: block;
    }
    
/* ----------------------------------------------------------  */

			
/* Resize images, vérifier si ça marche */			
.nav img {			
    width: 100%;			
    height: auto;
    margin: none;
    padding: none;
    display: flex;
  justify-content: left; 
}

/* ----- menu actif ???----- */ 			
.nav1 li0 {			
 display: inline-block;			
  font-size: 1.12rem;
  
  
  /* width: auto;			
    height: auto;		*/	
    /*margin-left: 10px;		*/
}

/* Crée sur une ligne icone du sous-menu(coffre,écrire,efface,disquette,dé) ?? */ 			
.nav1 li2 {			
  display: inline-block;			
  width: 2.00rem;			
    height: 2.00rem;			
    margin-right: 1.00rem;	
   margin-left: 1.00rem;			
		
}		

			

/* Crée sur une ligne icone du sous-menu(coffre,écrire,efface,disquette,dé) ?? */ 			
.nav1 li3 {			
  display: inline-block;			
  width: 2.75rem;			
    height: 2.75rem;			
    margin-right: 1.00rem;	
			
		
}			
.nav1 p1 {	/* text: menu, de la page menu??? */		
    /*font-family: 'Segoe Print', cursive;*/
    font-family: 'Rastanty Cortez';
     
    font-size: 1.50rem;
    margin-right:10px;
    }			
			
/* montant du menu pour la journée???*/ 			
.nav1 p2 {  /* pour le montant en cours */			
  display: inline-block;			
  /*font-size: 14px;	*/
  font-family: Arial, sans-serif;	
  font-size: 0.75rem;
    margin-left: 1.25rem;
}	

.nav1 p3 {	/* pour la semaine du ..???.*/		
    font-family: Arial, sans-serif;			
    font-size: 1.25rem;
    margin-right:10px;
    }
			
/* Resize images */			
.nav1 img {			
    width: 100%;			
    height: auto;
    margin: none;
    padding: none;
    display: flex;
  justify-content: left; 
}			



/*---------------- section container pour le checkbox  -----------------------*/
.container {
    display: block;
    position: relative;
    /*padding-left: 0px;*/
    margin-bottom: 2px;
    cursor: pointer;
    font-size: 1.25rem;
    font-family: "helvetica";
    /*color: #DC143C; /* cramoisi */ 
    color: black;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
     user-select: none;
}
			
/* Hide the browser's default checkbox */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
     width: 0;
}


/* Create a custom checkbox */
.checkmark {
    position: absolute;
    margin-left: 0px;
    top: 0;
    left: auto;
    margin-left: 15px;
    height: 20px;
    width: 20px;

    border: 1px solid black;
}

/* On mouse-over, add a grey background color    background-color: #ccc; */
.container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
    background-color: #2196F3;/*background-color: #2196F3;*/
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
    left: 6px;
    top: 1px;
    width: 5px;
    height: 10px;
     border: solid white;
    border-width: 0 3px 3px 0;
     -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/*.image-gauche {
        float: left;       /* Aligne à gauche */
       /* margin-right: 10px; /* Espace entre l'image et le texte */
  /*  }*/
    
/* -------------------------------------------------------------------------- */


/* ----------------------- verifier a ou ça sert ---------------------------- */	
/* ---------------------------------????-------- */	
.left {			
  margin: auto;			
  width: 35%;			
  padding: 10px;			
  text-align:left;			
}			
			
/* --------------------------- pour des_questions.php et preferences.php et kayser_connection.php------------------------ */			
.left2 {			
  margin: auto;			
  width: 100%;			
  text-align:left;			
  font-family: "Lucida Sans", sans-serif;			
		
}	


	
/* ----------------------------------------- */			
.left3 {        /* pour liste recettes ???????????????  */  			
  margin: auto;			
  width: 35%;			
  text-align:left;			
  font-family: "Lucida Sans", sans-serif;			
  font-size: 30px;			
}			
			
/* ------ pour texte Format csv de page_menu_actuel.php  ---------- */			
.left4 {        			
  margin: auto;			
  width: 35%;			
  text-align:left;			
  font-family: "Lucida Sans", sans-serif;			
  font-size: 30px;			
}

/* -------------------------------------------------------------------------- */


		
/* ..................................... INPUT BOX ...LAYOUT 1 .... */			
/* bouton pour chkbox */			
		
input[type=button], input[type=submit], input[type=reset] {			
  /*background-color: #708090;*/			
  background-color:	transparent;		
 /* border: none;	*/		
  /*color: white;*/			
  color: grey;			
  padding: 6px 30px;			
  text-decoration: none;			
  margin: 8px 0;			
  cursor: pointer;			
  font-size: 1.25rem;			
  /*border-radius: 50px;	*/		
  border: 2px solid 	#006400; /*  vert  */		
  border-radius: 4px;			
  box-sizing: border-box;			
}




.mon-bouton {
  /*background-color: #4CAF50; /* couleur de fond */
  background-color: transparent;
  color: black;              /* couleur du texte */
  padding: 1px 1px;        /* espace autour du texte */
  /*font-size: 4px;            /* taille du texte */
  border: none;               /* suppression de la bordure par défaut */
  border-radius: 1px;         /* coins arrondis */
  cursor: pointer;            /* curseur en forme de main */
  transition: background-color 0.3s; /* transition pour l'effet hover */
}
.mon-bouton:hover {
  background-color: #45a049; /* couleur au survol */
}


/*--------------- a verifier -------------------------------------------------*/			
button {		/* button type="submit" est différent de input-type	*/
  background-color:		transparent;	
  /*border: none;		*/	
  /*color: white;*/			
  color: grey;			
  padding: 6px 30px;			
  text-decoration: none;			
  margin: 8px 0;			
  cursor: pointer;			
  font-size: 1.00rem;			
  /*border-radius: 50px;	*/		
  border: 2px solid 	#006400;		
  border-radius: 4px;			
  box-sizing: border-box;			
        }			
			
/* Change image and add shadow on hover */			
    button:hover {			
    /*background-image: url('https://media.geeksforgeeks.org/wp-content/uploads/20190314004249/sample-image2.png');*/			
    background-size: cover;			
    background-position: center;			
    color: green;			
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.5);			
    }			
			
/* Focus effect for keyboard navigation */			
    button:focus {			
        outline: none;			
        border: 2px solid #2980b9;			
    }			
        
/*------------- pour les input box : la forme et l'aspect --------------------*/				
input[type=text], select {			
  width: 22%;				
  /*padding: 12px 20px;	*/			
  /*margin: 8px 0;	*/			
  display: inline-block;				
  border: 1px solid green;				
  border-radius: 4px;				
  box-sizing: border-box;				
  background-color:rgba(143,188,143,0.35);
 /* font-size: 1.50rem;/* influence la grandeur de la boite */
  text-align: center;
}	


/*---  pour le texte des cases de type input-text formulaire register/login --*/
input[type="text"] {
  width: 225px; /* Définit la largeur à 300 pixels */
  height: 25px; /* Définit la hauteur à 40 pixels */
  padding: 10px; /* Ajoute un espacement interne de 10 pixels */
  border: 1px solid #ccc; /* Ajoute une bordure grise de 1 pixel */
  /*font-size: 16px; /* Définit la taille de la police */
  font-size: 1.00rem;
  text-align: left;
}

/*-------------- pour les input box : la forme et l'aspect -------------------*/	
input[type=password], select {				
  width: 22%;				
  /*padding: 12px 20px;	*/			
  /*margin: 8px 0;	*/			
  display: inline-block;				
  border: 1px solid green;	    			
  border-radius: 4px;				
  box-sizing: border-box;				
  background-color:rgba(143,188,143,0.35);			
  /*font-size: auto;*/
  /*font-size: 1.50rem;*/
  text-align: left;
}

/*--- pour le texte des cases de type input-text formulaire register/login ---*/	
input[type=password] {
  width: 225px; /* Définit la largeur à 300 pixels */
  height: 25px; /* Définit la hauteur à 40 pixels */
  padding: 10px; /* Ajoute un espacement interne de 10 pixels */
  border: 1px solid #ccc; /* Ajoute une bordure grise de 1 pixel */
  font-size: 1.00rem; /* Définit la taille de la police */
  text-align: left;
}

/*-------------------------- pour la date ------------------------------------*/
input[type=date], select {				
  width: 15%;	
  /*padding: 12px 30px;			*/	
 /*margin: 1px ;	*/			
  display: inline-block;				
  border: 1px solid transparent;				
  border-radius: 4px;				
  box-sizing: border-box;				
  background-color:rgba(143,188,143,0.35);			
  font-size: 1.25rem;	
  font-family: Arial, sans-serif;
  text-align: center;

}

/*--------- semble marcher avec la sélection de date dans menu.php -----------------*/	
input[type=custom-select], select {	 		
  width: 100%;				
  /*padding: 10px 26px;		*/		
 /* margin: 8px 18;		*/		
  display: inline-block;				
  border: 3px solid transparent;				
  /*border-radius: 4px;	*/			
  box-sizing: border-box;				
  background-color:rgba(143,188,143,0.35);			
  font-size: 1.25rem;			
}


/*-- pour <div class="alert"> utilisé conjointement avec <div class="center"> ???????????  -*/
.alert {
  padding: 5px;
  /*background-color: #f44336;/*	#F08080*//* background-color: #FF4500;	*/
  /*background-color: orange;/*	*/
  /*background-color: lightpink;*/
  background: linear-gradient(to right, #FF9999, #F9C20F );
  color: white;
  width: auto;
  /*font-family: "helvetica";*//*font-family: "Lucida Sans", sans-serif;	*/
  font-family: 'Dancing Script', cursive;
  font-size: 1.25rem;
}
/* ???????????????????????????????????????????  */
.alert2 {
  padding: 10px;
  /*background-color: #f44336;*/
  background-color: #228B22;
  background: linear-gradient(to right, #FF9999, #F9C20F );
  color: white;
  /*max-width:40rem;*/
  width: auto;
  font-size: 22px;
}


/*--------- pour <div class="center">  utilisé dans user_login.php avec .custom-alert_reussite  ----*/
.center {
  /*width: 525px;*/
  max-width:25rem;
  background-color: rgba(255, 0, 0, 0.6);
/*border-radius: 20px;*/
  padding: 2px;
  margin: 5px;
}

/*------ pour <div class="center2"> utilisé avec ... menu actif ?????????????? --------------*/
.center2 {
  width: auto;
 max-width:35%;
  /*background-color: rgba(255, 0, 0, 0.6);*/

  /*padding: 10px;*/
}

.center2b {
  width: auto;
 max-width:75%;
  /*background-color: rgba(255, 0, 0, 0.6);*/

  /*padding: 10px;*/
}

/*------- pour <div class="center3">  utilisé avec invite_robot.php et preferences.php et balance.php ----------*/
.center3 {
  width: 65%;
align-items: center;
}

.center3b {
  width: 85%;
align-items: center;
}

.center4 {
  /*width: 525px;*/
  max-width:35rem;
  /*background-color: rgba(255, 0, 0, 0.6);*/
text-align: left;
  padding: 10px;
  align-items: left;
}

/*---- pour <div class="center"> utilisé avec <div class="alert"> ???????-------*/
.center5 {
  /*width: 525px;*/
  max-width:25rem;
  /*background-color: rgba(255, 0, 0, 0.6);
/*border-radius: 20px;*/
  padding: 2px;
  
}

/* sert avec communique_messagerie.php */
.center6 {
  /*width: 525px;*/
  max-width:20rem;
  max-height:20rem;
  /*background-color: rgba(255, 0, 0, 0.6);*/
text-align: center;
  /*padding: 10px;*/
  /*align-items: center;*/
  
}

/* sert avec quoi? */
.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 25px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}

/* ...................... CUSTOM SELECT POUR LES LISTE ...................... */
    .custom-select {
        min-width: 150px;
        }

/* ............. CUSTOM SELECT EN VERT FAIRE UN CHOIX  .............. */ 
    .custom-select select {
        appearance: none;
        width: auto;
        font-family: "Lucida Sans", sans-serif;	
        font-size: 1.12rem;
        /*background-color:rgba(192,192,192,0.3);*/
        background-color:rgba(152,251,152,0.2);
        /*padding: 5px 15px 5px 5px;*/
        padding: 1px 5px 1px 7px;
        /*border: 1px solid transparent;*/
        border: 1px solid green;
        border-radius: 0.45rem;
        color: #000;
        cursor: pointer;
        margin-left:5px;
        }  

/* ............. CUSTOM 0 CHOIX DÉJA SÉLECTIONNÉ et modifiable .............. */     
        .custom-select0 {
        min-width: 275px;
        /*max-width: 450px;*/
        }

        .custom-select0 select {
        appearance: none;
        width: auto;
        font-family: "Lucida Sans", sans-serif;
        font-size: 1.12rem;
        background-color:transparent;
        padding: 1px 5px 1px 7px;
        border: 1px solid orange;
        border-radius: 0.45rem;
        color: grey;
        cursor: pointer;
        margin-top:2px;
        /*margin-left:10px;*/
       
        } 
        
/* ............. CUSTOM SELECT1 CHOIX DÉJA SÉLECTIONNÉ .............. */        
        .custom-select1 select {
        appearance: none;
        width: 100%;
        font-family: "Lucida Sans", sans-serif;
        font-size: 1.12rem;
        background-color:transparent;
        padding: 1px 5px 1px 7px;
        border: 1px solid lightgrey;
        border-radius: 0.45rem;
        color: grey;
        cursor: pointer;
        margin-top:2px;
        margin-left:15px;
        } 

/* ............. CUSTOM SELECT2 POUR LES MODIFICATION/ÉCRITURE .............. */
    .custom-select2 {
        min-width: 275px;
        /*max-width: 450px;*/
        }

    .custom-select2 select {
        appearance: none;
        width: auto;
        font-family: "Lucida Sans", sans-serif;	
        font-size: 1.00rem;
        background-color: rgba(255, 165, 0, 0.125);
        padding: 1px 5px 1px 7px;
        border: 1px solid red;
        border-radius: 0.45rem;
        color: #000;
        cursor: pointer;
        float: left;
        margin-right:2px;
        
        }     
    
/* permet a l'icone et au titre de la page de s'ajuster sur une même ligne */  
/* utilisé avec menu.php */  
.flex-container {
  display: flex;
  width: 80%;
  justify-content: center; /* Centre horizontalement les éléments */
  align-items: center; /* Centre verticalement les éléments */
  height: auto; /* Hauteur pour voir l'alignement vertical */
  /*margin-left:20px;*/
}   
        
        
        
/* pour le toggle ??? */
.masquer {
      display: none;
    }

/* sert avec quoi????????????????? */
.div-max-largeur {
            max-width: 40%; /* Ajustez la valeur selon vos besoins 30 */
            /* Vous pouvez ajouter d'autres styles ici */
          margin: 0 auto; /* Exemple: centrer le div */
      }

/*------------ pour encadrer content_for_layout de invite_robot.php et communique_messagerie.php ----------*/       
.div-max-largeur1 {
            max-width: 65%; /* Ajustez la valeur selon vos besoins 30 */
            /* Vous pouvez ajouter d'autres styles ici */
            margin: 0 auto; /* Exemple: centrer le div */
        }


/* ----- pour des_questions.php et preferences.php et balance.php et kayser_connection.php ------------------------ */     
.div-max-largeur2 {
            max-width: 30%; /* Ajustez la valeur selon vos besoins 30 */
            /* Vous pouvez ajouter d'autres styles ici */
            margin: 0 auto; /* Exemple: centrer le div */
        }
 
/* sert avec la messagerie je pense ????? a verfifier  ---*/   
table {
  /*width: auto;*/
  max-width: 30%; /* Ajustez la valeur selon vos besoins */
}

th, td {
  /*text-align: center;*/

}

th, td {
  vertical-align: top;
}

table {
  border-spacing: 20px; /* Espace de 10px entre les cellules */
}

table {
/*border-collapse: collapse;*/
  
}

/*th {
  width: auto;
}*/

th:nth-child(1) {
  width: 14%;
}

th:nth-child(2) {
  width: 20%;

}

th:nth-child(3) {
  max-width: 66%;
  margin-left: 150px;
color: black;
}

td:nth-child(1) {
color: black;
}

td:nth-child(2) {
color: black;
margin-left: 150px;
}

td:nth-child(3) {
color: black;
}

/* word-wrap: break-word ou overflow-wrap: break-word) */

/*table {
  table-layout: auto;
  width: 100%; /* Facultatif : le tableau remplira son conteneur */
/*}*/

td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 200px; /* Ajustez la largeur selon vos besoins */
    color: black;
}


/* sert avec quoi? */
.no-underline {
  text-decoration: none;
}





/* sert avec quoi? */
#bloc-kayser {
  width: 42%;
  height:auto;
  background-color:rgba(184, 198, 246, 0.15);
  border: 1px solid red;
  padding: 1px;
}


/* sert avec quoi? */
.container3 {
  display: grid;
  grid-template-columns: auto auto auto auto auto ;
  background-color: transparent;
  /*padding: 2px;*/
  /*max-width: 60%;*/
  /*margin-left:150px;
  margin-right:150px;*/
  align-items: center; /* Centre verticalement les éléments*/

}

/* sert avec quoi? */
.container3 div {
    /*justify-content: center; /* Centre horizontalement les éléments */
  align-items: center; /* Centre verticalement les éléments 
    background-color: transparent;
  /*background-color: #f1f1f1;*/
  /*border: 1px solid black;*/
  /*padding: 10px;*/
  /*font-size: 30px;*/
  /*text-align: center;*/

}

/* sert avec quoi? */
.pleft { float: left; width: 40%; }
.pright { float: right; text-align: right; width: 40%; }

/* sert avec quoi? */
#map-container {
    /*display: flex;*/
    gap: 20px;
    margin-top: 20px;
    height: auto;
}

/* sert avec quoi? */
.card {
    width: 150px;
    height: 100px;
    background-color: lightblue;
    border: 1px solid blue;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

/* sert avec quoi? */
.card:hover {
    background-color: #a0d2eb;
}

.card.clicked {
    background-color: lightgreen;
    border-color: green;
}

/* sert avec quoi? */
#message {
    margin-top: 30px;
    font-size: 1.1em;
    color: #333;
}

/* sert avec quoi? */
/* pour imiter Jquery ouvre le sous menu avec un click sur la ligne dans la page messagerie*/
/* Masquer tous les sous-menus par défaut */
.has-submenu + ul { /* Le sélecteur '+' cible l'ul directement après l'<a> avec la classe has-submenu */
    display: none;
}

/* Afficher le sous-menu quand il a la classe 'show' */
.has-submenu.show + ul {
    display: block;
}

/* Stylisation de base */
ul { list-style: none; padding: 0; }
.nav li { margin-bottom: 5px; }
/*li { margin-bottom: 5px; }*/
.has-submenu { cursor: pointer; /* Indique que c'est cliquable */ }

ul.sub-menu {
  /* On cache le sous-menu en le positionnant hors du viewport  */
  position: absolute;
  left: -3333rem;
  top: 1.75em;
}

/* sert avec quoi? */
/*
 * Affichage du sous-menu:
 * :hover pour l'affichage à la souris
 * :focus-within pour l'affichage à la tabulation
 */

.menu-item.has-children:hover > ul.sub-menu,
.menu-item.has-children:focus-within > ul.sub-menu {
  left: 0;
}
/* sert avec quoi? */
input:checked + div { display: none; }


/* sert avec quoi????????????????????????????????????  a verifier  */
/* section pour animation en couleur du texte dans kayser_connection */

.animate-charcter
{
   /*text-transform: uppercase;*/
  background-image: linear-gradient(
    -225deg,
    #231557 0%,
    #44107a 29%,
    #ff1361 67%,
    #fff800 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  /*color: #fff;*/
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 6s linear infinite;
  display: inline-block;
      /*font-size: 90px;*/
}

.animate-charcter2
{
   /*text-transform: uppercase;*/
  background-image: linear-gradient(
    -225deg,
    #231557 0%,
    #44107a 29%,
    #ff1361 67%,
    #fff800 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip2 8s linear infinite;
  display: inline-block;
      /*font-size: 90px;*/
}

.animate-charcter3
{
   /*text-transform: uppercase;*/
  background-image: linear-gradient(
    -225deg,
    #231557 0%,
    #44107a 29%,
    #ff1361 67%,
    #fff800 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip3 10s linear infinite;
  display: inline-block;
      /*font-size: 90px;*/
}

.animate-charcter4
{
   /*text-transform: uppercase;*/
  background-image: linear-gradient(
    -225deg,
    #231557 0%,
    #44107a 29%,
    #ff1361 67%,
    #fff800 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip4 12s linear infinite;
  display: inline-block;
      /*font-size: 90px;*/
}

.animate-charcter4
{
   /*text-transform: uppercase;*/
  background-image: linear-gradient(
    -225deg,
    #231557 0%,
    #44107a 29%,
    #ff1361 67%,
    #fff800 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip4 14s linear infinite;
  display: inline-block;
      /*font-size: 90px;*/
}

.animate-charcter4
{
   /*text-transform: uppercase;*/
  background-image: linear-gradient(
    -225deg,
    #231557 0%,
    #44107a 29%,
    #ff1361 67%,
    #fff800 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip4 9s linear infinite;
  display: inline-block;
      /*font-size: 90px;*/
}

/* ------------------------------------------------------------------------- */
/* sert avec les div id= des différentes pages pour ouvrir et fermer les div */
    #d1{background-color: transparent;}
    #d2{background-color: transparent;}
    #d3{background-color: transparent;}
    #d4{background-color: transparent;}
    #d5{background-color: transparent;}
    #d6{background-color: transparent;}
    
    #d1 {display: none;}
    #d2 {display: none;}
    #d3 {display: none;}
    #d4 {display: none;}
    #d5 {display: none;}
    #d6 {display: none;}

/* sert avec quoi???????????? */
div2 {
width: 100px;
height: 100px;
position: relative;
animation: mouvement 5s infinite alternate;
}


/* sert avec quoi????????????????? */
/* Custom Alert Box */
        /* Overlay background */
        #overlay {
            display: none;
            position: fixed;
            top: 0; left: 0;
            width: 100px;; height: 100px;;
            background: rgba(0,0,0,0.5);
            z-index: 999;
        }
        /* Alert box */

    
    /* background: linear-gradient(to right, #7FFF00, 	#32CD32 );
    */

/* sert avec quoi? */    
 .custom-alert2 {
    position: absolute;
    top: 14%; left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(to right, 	#32CD32, 	#F0E68C);
    
    /* Dégradé linéaire avec transparence */
    /*background: linear-gradient(to bottom right, rgba(255, 0, 0, 0.8),   /* Rouge semi-transparent */
    /* rgba(0, 0, 255, 0.2)    /* Bleu très transparent *//* );*/

    color: black;
    padding: 20px;
    border-radius: 8px;
    width: 625px; /* largeur personnalisable */
    height: auto; /* hauteur auto ou fixe */
    /*height: 180px; /* hauteur auto ou fixe */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    text-align: center;
    /*font-family: "Lucida Sans", sans-serif;*/
    font-family: 'Dancing Script', cursive;
        font-size: 1.12rem;
    font-family: 'Segoe Print', cursive;			
  font-size: 17px;  /* nom du visiteur */
  }

    .custom-alert2 button {
        margin-top: 20px;
        padding: 5px 10px;
        /*background-color: #721c24;*/
        background-color: #00BFFF;
        color: white;
        border: 2px solid 	#006400;
        border-radius: 4px;
        cursor: pointer;
    }
        .custom-alert2 button:hover {
            background-color: #501217;
        }
        
/* sert avec quoi? */        
    /* Style pour une alerte personnalisée */
    .custom-alert3 {
    position: absolute;
    top: 14%; left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(to right, #FF9999, 	#FFFFCC );
    color: black;
    padding: 20px;
    border-radius: 8px;
    width: 725px; /* largeur personnalisable */
    height: auto; /* hauteur auto ou fixe */
    /*height: 180px; /* hauteur auto ou fixe */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    text-align: center;
    /*font-family: "Lucida Sans", sans-serif;*/
    font-family: 'Dancing Script', cursive;
    font-size: 1.25rem;
    font-family: 'Segoe Print', cursive;			
  /*font-size: 17px;  /* nom du visiteur */
  }

/* sert avec <div class="custom-alert_danger"> de user_login.php et register.php et recettes/index.php */        
  .custom-alert_danger {
    position: absolute;
    top: 14%; left: 50%;
    transform: translate(-50%, -50%);
    /*background: linear-gradient(to right,#FF2828,#FFB999);#666666;  	#FF6347*/
       background-color: rgba(#FF6347, 1.05);
    background-color: #FFF5EE; /* rouge semi-transparent */

    /*color: white;#ff3838;  #ffba00;*/
    color: red;
    padding: 20px;
    border-radius: 15px;
    border: 1px solid 	red;
    width: 625px; /* largeur personnalisable */
    height: auto; /* hauteur auto ou fixe */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    text-align: center;
    font-family: "Lucida Sans", sans-serif;
    /*font-family: 'Segoe Print', cursive;font-size: 1.12rem;		*/	
    font-size: 18px;  
  }

    .custom-alert_danger button {
        margin-top: 20px;
        padding: 5px 10px;
        /*background-color: #721c24;*/
        background-color: #00BFFF;
        color: white;
        border: 2px solid 	#006400;
        border-radius: 4px;
        cursor: pointer;
    }
        
    .custom-alert_danger button:hover {
        background-color: #501217;
    }

/* utilisé dans user_login.php avec <div class="center">   */    
      .custom-alert_reussite {
    position: absolute;
    top: 14%; left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(to right,#228B22,#32CD32);
    /*color: white;#2ec946;*/
    color: #2ec946;
    padding: 20px;
    border-radius: 8px;
    width: 625px; /* largeur personnalisable */
    height: auto; /* hauteur auto ou fixe */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    text-align: center;
    font-family: "Lucida Sans", sans-serif;
    /*font-family: 'Segoe Print', cursive;font-size: 1.12rem;		*/	
    font-size: 18px;  
  }

    .custom-alert_reussite button {
        margin-top: 20px;
        padding: 5px 10px;
        /*background-color: #721c24;*/
        background-color: #00BFFF;
        color: white;
        border: 2px solid 	#006400;
        border-radius: 4px;
        cursor: pointer;
    }
        
    .custom-alert_reussite button:hover {
        background-color: #501217;
    }

/* sert avec quoi? */    
  /* Fond semi-transparent derrière l'alerte */
  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999; /* Derrière la boîte mais devant le reste */
  }

/* sert avec quoi? */
  /* Boîte d'alerte */
  .alert-box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 1000; /* Plus haut que l'overlay */
    max-width: 300px;
    text-align: center;
    font-family: Arial, sans-serif;
  }

  .alert-box button {
    margin-top: 15px;
    padding: 8px 15px;
    border: none;
    background: #007BFF;
    color: white;
    border-radius: 4px;
    cursor: pointer;
  }

  .alert-box button:hover {
    background: #0056b3;
  }



/* sert avec quoi???????????????????? */
/* pour les messages privés  messagerie */

thead {
/*background-color: #cce;*//*font-weight: bold;*/
/*background-color: #8FBC8F;*/
/*background-color: #04AA6D;*/
background-color: #B0C4DE;
color:white;
}

table, td {
  border: 1px solid lightgrey;
  border-collapse: collapse;
}

table, th {
color:white;
}

th {
  color:white;
}


td {
  padding: 15px;
}


/* sert avec quoi? */
/* pour la zone info */
/* Bouton */
    button {
        padding: 10px 15px;
        cursor: pointer;
        background-color: #3498db;
        color: white;
        border: none;
        border-radius: 4px;
    }
    
    button2 {
        padding: 10px 15px;
        cursor: pointer;
        background-color: red;
        color: white;
        border: none;
        border-radius: 4px;
    }

    /* Conteneur animé */
    .content {
        overflow: hidden; /* Cache le contenu pendant l'animation */
        max-height: 0; /* Fermé par défaut */
        transition: max-height 0.5s ease-out; /* Animation fluide */
        background: #f1f1f1;
        padding: 0 15px;
        border-radius: 4px;
    }

    /* Contenu interne */
    .content p {
        margin: 15px 0;
    }

    /* Classe ouverte */
    .content.open {
        max-height: 500px; /* Hauteur max (assez grande pour tout le contenu) */
        transition: max-height 0.5s ease-in;
    }
    
    /* autre au survol */
    .produit {
        position: relative;
        display: inline-block;
        max-width: 800px; /* largeur max */
    width: 100%;      /* prend toute la largeur dispo jusqu'à 800px */
        /*padding: 15px;
        border: 1px solid #ccc;
        border-radius: 8px;
        text-align: center;
        background: #f9f9f9;*/
        cursor: pointer;
    }

    /* Bloc d'infos supplémentaires caché par défaut */
    .info-supplementaire {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: auto;
        /*background: #fff;*/
        /*background: #FF4500;*/
        background: lightblue;
        
        border: 1px solid #ccc;
        border-radius: 6px;
        padding: 10px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        z-index: 10;
        color:black;
    }

    /* Affichage au survol */
    .produit:hover .info-supplementaire {
        display: block;
    }

/* sert avec quoi???????????????????????????????????????????????????? */ 
/* -----------------------------------------------------------------------*/    
/* pour test de page responsive */ 
/* -----------------------------------------------------------------------*/    
    
    * {
  box-sizing: border-box;
}
.menu {
  float: left;
  width: 20%;
}
.menuitem {
  padding: 8px;
  margin-top: 7px;
  border-bottom: 1px solid #f1f1f1;
}
.main {
  float: left;
  width: 60%;
  padding: 0 20px;
  overflow: hidden;
}
.right { /* boite a droite en bleu pâle */
  background-color: lightblue;
  float: left;
  width: 20%;
  padding: 10px 15px;
  margin-top: 7px;
}
.div {
  background-color: red;
  float: left;
  width: 20%;
  padding: 10px 15px;
  margin-top: 7px;
}

.div2 {
  background-color:#f1f1f1;
  float: left;
  width: 20%;
  padding: 10px 15px;
  margin-top: 7px;
}

.under {
        overflow:auto;
}  



        .box {
            background-color: lightblue;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            font-weight: bold;
        }
        
        .box1 {
            background-color:orange;padding:15px;
        }
        
        .box2 {
            background-color:lightgreen;padding:15px;
        }
        
        
       .over2 {
        overflow:auto;
        } 


        
        
       .over2 {
        overflow:auto;
        } 
        
        .over3 {
        /*width:100%;*/
        max-width:100%;height:auto;
        } 



  .container9 {
    max-width: 600px;
    margin: auto;
    border: 2px solid #ccc;
    padding: 10px;
  }

  /* Image responsive */
  .responsive {
    max-width: 100%; /* Ne dépasse jamais la largeur du conteneur */
    height: auto;    /* Conserve les proportions */
    display: block;  /* Évite les espaces indésirables sous l'image */
  }

  .responsive2 h4 {font-size:2vw;}
  .responsive2 p {font-size:1vw;}
  
  /* text ajuste  <p style="font-size:5vw;"> */

    /*.h4 {font-size:2vw;}
    .p {font-size:1vw;}*/

/* sert avec quoi? */
/* **********************************************  */
/* pour test modal voir w3/school,*/

/* sert avec quoi?????????????????????????????????????6 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* sert avec quoi?????????????????????????? */
h5 {
  text-align: center;
  padding: 20px;
}

/* sert avec quoi??????????????????????????????? */
.galleryz {
    width:100%;
  display: flex;
  flex-wrap: wrap;
  /*justify-content: flex-start;*/
  justify-content: center;

  padding: 0 15px;
}

/* sert avec quoi? */
.gallery {
    width:100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 0 15px;
}

.gallery-item {
  position: relative;
  width: calc(25% - 20px);
  height: auto;
  margin: 10px;
  cursor: pointer;
  transition: transform 0.5s ease;
}

.gallery-item:hover {
  transform: scale(1.1);
}

/* sert avec quoi???????????????????????????????? */
/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease;
}

/* Modal content (image) */
.modal-content {
  position: relative;
  width: 90%;
  height: auto;
  max-width: 90%;
  max-height: 90%;
  border-radius: 5px;
  overflow: hidden;
  animation: zoomIn 0.5s;
}
.modal.show {
  display: flex;
  opacity: 1;
}

/* Close button */
.close {
  position: absolute;
  top: 10px;
  right: 15px;
  color: #ffffff;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.3s;
}

/* Caption of modal image */
.caption {
  position: absolute;
  bottom: 15px;
  width: 100%;
  height: auto;
  text-align: center;
  color: #ffffff;
  font-size: 24px;
}

  .fixed {
    position: fixed;   /* Fixe l'élément par rapport au viewport */
    /*top: 0;            /* Distance depuis le haut */
    bottom: 0;
    left: center;           /* Distance depuis la gauche */
    width: 100%;       /* Largeur totale */
    /*background-color: #333;*/
    color: white;
    /*padding: 10px;*/
    text-align: center;
    z-index: 1000;     /* S'assure que l'élément est au-dessus des autres */
  }
  
/* sert avec quoi? */
/* pour afficher et effacer le message avec temporisation */
/* Style du message */
    #message {
        display: none; /* Caché par défaut */
        padding: 10px;
        background-color: #4CAF50;
        color: black;
        border-radius: 5px;
        width: fit-content;
        margin: 20px auto;
        text-align: center;
        font-family: Arial, sans-serif;
        transition: opacity 0.5s ease; /* Effet fondu */
        opacity: 0;
    }
    #message.visible {
        display: block;
        opacity: 1;
    }
 
    /* Conteneur des onglets de la messagerie de commnunique_messagerie.php
    contient les icons */
    .tabs2 {
        display: flex;
        /*border-bottom: 2px solid #ccc;*/
        max-width:2px;
   max-height:1px;
    }

/* Onglet */
.tab {
  background: #e0e0e0;
  /*padding: 10px 20px;*/
 /*margin-right: 5px;*/
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  cursor: pointer;
  transition: background 0.3s;
  max-height:3rem;
}

.tab:hover {
  background: #d0d0d0;
}

/* Onglet actif */
.tab.active {
  background: white;
  border: 1px solid #ccc;
  border-bottom: none;
  max-height:3rem;
}

/* Contenu de communique_messagerie.php */
.tab-content {
  background: transparent;
  /*border: 1px solid #ccc;*/
  padding: 20px;
  border-top: none;
}


/* Style global */
   /* body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        background: #f4f4f4;
    }*/

    /* Conteneur welcome-message pour le message dans visiteur_layout.php */
    .welcome-message {
        position: fixed;
        top: 180px;
        left: 50%;
        transform: translateX(-50%);
        /*background-color: #4CAF50;*/
        background-color: white;
        color: tomato;
        padding: 15px 25px;
        border-radius: 5px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        opacity: 0;
        animation: fadeInOut 10s ease forwards;
        z-index: 9999;
    }
    
    /*------------------ utilise <div class="marquee-container"> ------------ */
    /*-- permet de faire défiler le texte dans le différentes pages du sou-menu --- */
    /*-- sert pour:des_questions.php, preference.php, balnce.php, kyosque.php --*/
    /*--- ainsi que: maison.php, kayser_connection.php, mode_emploi.php balance.php -- */
    /*----------------------------------------------------------------------- */
    
    /* Conteneur fixe */
    .marquee-container {
        width: 100%;
        overflow: hidden;
        background: transparent;/*background: #222;*/
        color: black; /*color: #fff;*/
        padding: 10px 0;
        box-sizing: border-box;
    }
    
    /* Texte défilant */
    .marquee-text {
        display: inline-block;
        white-space: nowrap;
        padding-left: 100%;
        animation: scroll-left 30s linear infinite;
        font-size: 1.2em;
        font-weight: bold; /* 700 */
    }
    
    /* Animation */
    @keyframes scroll-left {
        0%   { transform: translateX(0); }
        100% { transform: translateX(-100%); }
    }

/* }  fin de @media screen and (min-width: 1200px){ */
 
 
 
 
 
/* sert avec quoi? */
    /* Animation : apparition puis disparition */
    @keyframes fadeInOut {
        0% { opacity: 0; transform: translate(-50%, -20px); }
        10% { opacity: 1; transform: translate(-50%, 0); }
        80% { opacity: 1; transform: translate(-50%, 0); }
        100% { opacity: 0; transform: translate(-50%, -20px); }
    }

/*----------------------------------------------------------------------------*/


/*  pour l'effet de zoom-in zoom-out de visiteur_layout.php et invite_layout_robot.php */

@keyframes growshrink {
    25%,
    75% {
        scale: 100%;
    }

    50% {
        scale: 150%;
        color: red;
    }
}

@keyframes slidein {
  from {
    translate: 150vw 0;
    scale: 200% 1;
    }

  to {
    translate: 0 0;
    scale: 100% 1;
    }
}

@keyframes slidein {
  from {
    margin-left: 60%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

@keyframes growshrink {
  25%,
  75% {
    scale: 100%;
  }

  50% {
    scale: 150%;
    /*color: #e88605;*/
    color: #fa8c05;
  }
  
} /* fin du keyframes */


/* sert avec quoi? */
/*@media only screen and (max-width:800px) {
  /* For tablets: */
  /*.main {
    width: 80%;
    padding: 0;
  }
  .right {
    width: 100%;
  }
}*/

/*@media only screen and (max-width:500px) {
  /* For mobile phones: */
  /*.menu, .main, .right {
    width: 100%;
  }
}*/

/* sert avec quoi? */
/* pour test modal voir w3/school, suite */
/*@keyframes zoomIn {
  from {transform: scale(0.6);}
  to {transform: scale(1);}
}*/

/* sert avec quoi? */
/*@media screen and (max-width: 768px) {
  .gallery-item {
     width: calc(50% - 20px);
  }
}*/

/* sert avec quoi? */
/*@media screen and (max-width: 480px) {
  .gallery-item  {
    width: calc(100% - 20px);
  }
}*/