.background {
            width: 100%; /* largeur du conteneur */
        }
        
        button {
            transition: transform 0.2s ease-in-out;
        }
        
        button:hover {
            transform: scale(1.05);
        }

        .close-btn1 {
            margin-top: 15px;
            padding: 10px;
            background: black;	/* couleur du bouton */
            color: white;	/* couleur des lettres du bouton */
            border: none;
            border-radius: 5px;
            cursor: pointer;
			box-shadow: 0 0 10px rgba(0,0,0,0.5);
			font-weight: bold;
        } 
        
        .close-btn2 {
            margin-top: 15px;
            padding: 10px;
            background: green;	/* couleur du bouton */
            color: white;	/* couleur des lettres du bouton */
            border: none;
            border-radius: 5px;
            cursor: pointer;
			box-shadow: 0 0 10px rgba(0,0,0,0.5);
        } 
        
        .close-btn3 {
            margin-top: 15px;
            padding: 10px;
            background: Blue;	/* couleur du bouton */
            color: white;	/* couleur des lettres du bouton */
            border: none;
            border-radius: 5px;
            cursor: pointer;
			box-shadow: 0 0 10px rgba(0,0,0,0.5);
        }   
        
        .container {
            display: flex;
            flex-direction: column;
            text-align: center;
            align-items: center; /* Centre horizontalement */
            }

        .container form {
            margin-bottom: 10px; /* Ajoute un espace uniforme sous chaque formulaire */
        }
		
        .container2 {
            position: relative; /* Définit une référence pour le positionnement */
            width: 50px; /* Ajuste la largeur selon ta photo */
        }

        form {
            margin: 0;
            padding: 0;
        }

		img {
			box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
		    }

        .img-ronde {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
        }

        .img-drapeau {
            width: 60px;  /* adapter la taille */
            height: auto;
        }

        .image-container {
            position: relative;
            display: inline-block;
        }

        .modal {
            display: none; /* Caché par défaut */
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 9999; 
            background: #EFEFEF;	/* couleur de fond gris*/
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.5);
            text-align: center;
            display: none;
        }
        
        .modal h2 {
            color: #0000B7; /* titre en Vert */
            font-weight: bold;
            font-size: 22px;
            font-family: "Comic Sans MS", "Arial", "Helvetica", cursive, sans-serif;
        }
        
        .modal img {
            width: 100px;
            margin-top: 10px;
        }

		.monBouton, .button {
            display: flex;
            align-items: center; /* Centre verticalement */
            justify-content: center; /* Centre horizontalement */
            width: 280px; /* Exemple de largeur */
            height: 28px; /* Exemple de hauteur */
			box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
            font-weight: bold; 
            color: #0000B7; 
            text-shadow:2px 2px 0 #d3d3d3;
            font-family: 'Comic Sans MS', "Arial", "Helvetica", cursive sans-serif; 
            background: linear-gradient(to bottom, #ffffff, #cccccc); 
            border: 2px solid #999999; 
            margin: 10px 0; /* Espacement vertical uniforme */
            padding: 10px; /* Pour une apparence homogène */ 
            border-radius: 5px;
            margin-bottom: 5px;
            cursor: pointer;
		}
            
        .monBouton:active,
        .monBouton.actif {
          background: linear-gradient(to bottom, #cccccc, #888888);
          color: white;
          text-shadow: 2px 2px 0 #333;
          border: 2px solid #000080;
        }

        .no-shadow {
            box-shadow: none !important;
            all: unset;
        }

        .overlay {  /* Crochet vérifié */
            position: absolute; /* Permet le positionnement libre */
            top: 0px; /* Ajuste la position verticale */
            left: 60px; /* Ajuste la position horizontale */
            width: 70px; /* Ajuste la taille si nécessaire */
            opacity: 0.5; /* Rend l'image semi-transparente */
            box-shadow: none !important;
            z-index: 10; /* Valeur élevée pour mettre l'élément au-dessus */
        }

        .overlay2 {  /* Crochet vérifié */
            position: absolute; /* Permet le positionnement libre */
            top: 65px; /* Ajuste la position verticale */
            left: 80px; /* Ajuste la position horizontale */
            width: 70px; /* Ajuste la taille si nécessaire */
            opacity: 0.8; /* Rend l'image semi-transparente */
            box-shadow: none !important;
            z-index: 10; /* Valeur élevée pour mettre l'élément au-dessus */
        }

		p {
            margin-top: 0;
            margin-bottom: 5px; /* ou 0, ou la valeur désirée */
            }

        .rectangle-arrondi {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100px;
          width: 400px;
          padding: 10px 20px;
          background-color: #DFEFFF;
          border: 5px solid #0072A8;
          border-radius: 15px;
          font-family: "Comic Sans MS", "Arial", "Helvetica", cursive, sans-serif;
        }

        .spacer {
            height: 1px; /* Définit une hauteur fixe pour l'espacement */
        }

		#static-image {
			width: 200px;
			height: 200px;
			border: 0px solid #ccc;
			cursor: not-allowed;
		    }

        .styled-text1 { /*"Arial", "Helvetica", sans-serif;*/
            color: #0000B7; /* Couleur du texte */
            font-family: "Comic Sans MS", "Arial", "Helvetica", cursive, sans-serif; /* Police */
            font-size: 14px; /* Taille (équivalent à size=3) */
        }
        
        .styled-text2 {
            color: #0000B7; /* Couleur du texte */
            font-family: "Comic Sans MS", "Arial", "Helvetica", cursive, sans-serif; /* Police */
            font-size: 12px; /* Taille (équivalent à size=3) */
            text-shadow: 2px 2px 0 #d3d3d3; /* Ombre du texte */
        }
        
        .styled-text3 {
            color: #0000B7; /* Couleur du texte */
            font-family: "Comic Sans MS", "Arial", "Helvetica", cursive, sans-serif; /* Police */
            font-size: 14px; /* Taille (équivalent à size=3) */
            text-shadow: 2px 2px 0 #d3d3d3; /* Ombre du texte */
            font-weight: bold;
        }

		td.thumbnail-cell {
    		color: #2B568C;
    		font-family: 'Arial', sans-serif;
    		font-size: 12px;
    		font-weight: bold; /* Optionnel : mise en gras */
		    vertical-align: top;
	    	}

        .texte {
            position: absolute;
            bottom: 10px;
            right: 10px;
            background: rgba(211, 211, 211, 0.7);
            color: white;
            padding: 5px 10px;
            font-size: 16px;
            border-radius: 5px;
            }

        .text-overlay { /* Pour afficher le prix */
            position: absolute;
            bottom: -13px;
            right: -20px;
            background-color: rgba(0, 0, 0, .1); /* Fond semi-transparent */
            color: #0000B7; /* Couleur du texte */
            font-family: "Comic Sans MS", "Arial", "Helvetica", cursive, sans-serif; /* Police */
            font-size: 12px;
            text-shadow: 2px 2px 0 #d3d3d3; /* Ombre du texte */
            font-weight: bold;
            padding: 2px 2px; /*contour boite du prix*/
            border-radius: 0px;
        }
        
        .text-overlay:empty {
            display: none;
        }

		.thumbnail {
		    width: 100px;
		    height: auto;
		    cursor: pointer;
		}
		    
		.zoom-image {
		    vertical-align: middle;
		    width: 100%;
		    height: 100%;
		    background-size: cover;
		    background-position: center;
		    border: 0px solid #ccc;
		    display: none; /* caché par défaut */
		}
		
        .zoomable {
            transition: transform 0.2s ease-in-out;
            cursor: pointer;
            display: inline-block;
        }
        
        .zoomable:hover {
            transform: scale(1.1);
        }