a:link 
	{ 
	text-decoration: none;
	}
	.hidden {
		display: none;
	}

						/* ------------------------------------------------------ POPUP -------------------------------------------- */

        /* Style pour la pop-up */
        .popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: #556275;
			color: #ccc;
            font-size: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            max-width: 400px;
            max-height: 40%;
            overflow-y: auto;
        }

        /* Style pour le fond grisé */
        .popup-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }

        .mention-legale {
            cursor: pointer;
            text-decoration: underline;
            color: blue;
        }

        .close-btn {
            display: block;
            margin-top: 10px;
            text-align: right;
        }

        .close-btn button {
            background-color: red;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
        }

		.popup1 {
			text-align: center;
			font-family:arial, sans serif, century;
			font-size:14px;
			font-style: normal;
			font-weight: bold;
			color: #FCFD9B;
			text-align:center;
			margin: 0 auto;
			padding:0 auto;
		}
		
		.popup2 {
			text-align: center;
			font-family:arial, sans serif, century;
			font-size:13px;
			font-style: normal;
			font-weight: bold;
			color: #3197FF;
			text-align:center;
			margin: 0 auto;
			padding:0 auto;
		}
		
						/* ------------------------------------------------------ TOUTES PAGES COACH---------------------------------------------------------------------------------------- */

		h2 {
			text-align: center;
			font-family:arial, sans serif, century;
			font-style: normal;
			margin: 0;
			padding:0;
			color: #475161;
			font-size: 6px;
		}
		
		h3 {
			text-align: center;
			font-family:arial, sans serif, century;
			font-style: normal;
			margin: 0;
			padding:0;
			color: #475161;
			font-size: 6px;
		}

		h4 {
			text-align: center;
			font-family:arial, sans serif, century;
			font-style: normal;
			margin: 0;
			padding:0;
			color: #556275;
			font-size: 6px;
		}
		
		h5 {
			text-align: center;
			font-family:arial, sans serif, century;
			font-style: normal;
			margin: 0;
			padding:0;
			color: #556275;
			font-size: 6px;
		}

		h6 {
			text-align: center;
			font-family:arial, sans serif, century;
			font-style: normal;
			margin: 0;
			padding:0;
			color: #475161;
			font-size: 6px;
		}
						/* ------------------------------------------------------ TOUTES PAGES -------------------------------------------- */

	body {
        font-family: Arial, sans-serif;
        background-color: #556275;
        margin: 0;
        padding: 0;
        overflow-x: hidden; /* Empêche le défilement horizontal */
		text-align: center;
    }
	
	.container {
        background-color: #556275;
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
        padding: 20px;
        margin: 0px auto;
        max-width: 800px;
		margin-bottom: 0px;	
		padding-bottom: 10px;				
	}
	
	.logo {
		background-color: #6F98F5;
		margin: 0 auto;
		margin-top: 5px;
    }

    h1 {
        text-align: center;
		font-family:arial, sans serif, century;
		font-size:12px;
		font-style: normal;
		font-weight: bold;
		color: #ccc; /* #ccc;  */
		text-transform:uppercase;
		text-align:center;
		margin: 0 auto;
		padding:0 auto;
    }
	
	.t-jaune {
		color: #FCFD9B;
	}

	.t-gris {
		color: #475161;
		font-size: 6px;
	}

	.t-retour {
		font-size: 10px;
		text-align:left;
		margin: 0 ;
		padding: 0;
	}
	
	.t-pro {
		font-size: 10px;
		text-align:center;
		margin: 0 ;
		padding: 0;
	}
	

	/* Style pour bas de page */
	.entetetitre2 {
		font-family: Georgia, sans-serif, Century;
		font-size: 8px;
		font-style: italic;
		font-weight: bold;
		color: #FCFD9B;
		text-transform: uppercase;
		text-shadow: 4px 4px 8px #000000;
		margin: 0px;
		padding-top: 0px;
		padding-bottom: 5px;
	}

	/* Style pour le bouton envoyer */
	.bouton-envoyer {
		background-color: #515965;   /* Couleur de fond verte */
		padding: 10px 20px; /* Espacement autour du texte */
		border: 2px solid#6F98F5; /* Bordure */
		border-radius: 5px; /* Bordure arrondie */
		cursor: pointer; /* Curseur au survol */
		text-decoration: none; /* Suppression du soulignement */
		font-size:12px;
		font-style: normal;
		font-weight: bold;
		color:#ccc;	
	}
        
	/* Style pour le survol du bouton envoyer */
	.bouton-envoyer:hover {
		background-color:#6F98F5; /* Couleur de fond plus foncée au survol */
	}
	
																	/* Style pour le bouton envoyer dans le menu accueil du modèle restreint*/
	.r-bouton-envoyer {
		background-color: #515965;   /* Couleur de fond verte */
		padding: 10px 5px; /* Espacement autour du texte */
		border: 2px solid#6F98F5; /* Bordure */
		border-radius: 5px; /* Bordure arrondie */
		cursor: pointer; /* Curseur au survol */
		text-decoration: none; /* Suppression du soulignement */
		font-size:12px;
		font-style: normal;
		font-weight: bold;
		color:#ccc;
        width: 20px;		
	}
        
	/* Style pour le survol du bouton envoyer */
	.r-bouton-envoyer:hover {
		background-color:#6F98F5; /* Couleur de fond plus foncée au survol */
	}
	
	.mention {
		font-family:arial, sans serif, century;
		color: #FFFFFF;
		font-size:7pt;
		font-style: normal;
		font-weight: normal ;
		text-align:center;
		background-color:transparent;
		margin: 0 auto;
	}

	/* pour faire clignoter */
	@keyframes blink {
	  0% { opacity: 1; }
	  50% { opacity: 0; }
	  100% { opacity: 1; }
	}

	.blink {
	  animation: blink 2s infinite;
	}
						/* ------------------------------------------------------ PAGE DEMARRAGE -------------------------------------------- */

	.entetetitre1 {
		font-family: Georgia, sans-serif, Century;
		font-size: 12px;
		font-style: normal;
		font-weight: bold;
		color: #FCFD9B;
		text-transform: uppercase;
		text-shadow: 4px 4px 8px #000000;
		margin: 0;
		margin-bottom: 10px;
		margin-top: 15px;
	}

	.entetetitre3 {
		font-family: Georgia, sans-serif, Century;
		font-size: 11px;
		font-style: normal;
		font-weight: normal;
		color: #FCFD9B;
		text-transform: uppercase;
		text-shadow: 4px 4px 8px #000000;
		margin: 0;
		margin-bottom: 10px;
		margin-top: 15px;
	}
	
	.entetetitre4 {
		font-family: Georgia, sans-serif, Century;
		font-size: 11px;
		font-style: italic;
		font-weight: bold;
		color: #6F98F5;
		text-transform: uppercase;
		text-shadow: 4px 4px 8px #000000;
		margin: 0;
		margin-bottom: 10px;
		margin-top: 15px;
	}
						/* -------------------------------------------------EXTRAIT IMAGE------------------------------------------------ */

	.container-image {
        background-color: #4E5764;
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
        padding: 2px;
        margin: 0px auto;
        max-width: 650px; 
	}

						/* ------------------------------------------------- PAIEMENT------------------------------------------------ */
	
	.container-paiement {
        background-color: #5D6571;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
        padding: 2px;
        margin: 0px auto;
        max-width: 650px; 
	}

	.t-jaunespe {
		font-size: 10px;
		font-style: italic;
		font-weight: normal;
		color: #FCFD9B;
	}
	.paiement a {
		text-decoration: none; /* Suppression du soulignement */
		font-size: 12px;
		font-style: normal;
		font-weight: bold;
		color: #ccc;
		display: inline-block;
		margin: 0; /* Réinitialisation des marges */
		padding: 0px 0; /* Ajout d'un espace autour du texte */
	}

	/* Style pour l'image */
	.paiement img {
		display: block;
		margin: 7px auto 0; /* Espace au-dessus de l'image */
	}

	/* Style pour le conteneur du bouton de paiement */
	.bouton-paiement {
		background-color: #515965; /* Couleur de fond verte */
		border: 2px solid#6F98F5; /* Bordure */
		border-radius: 5px; /* Bordure arrondie */
		cursor: pointer; /* Curseur au survol */
		max-width: 200px; 
		margin: 0 auto;
		padding: 0px; /* Espacement intérieur */
		text-align: center; /* Centrage du texte et de l'image */
	}


	/* Style pour le survol du bouton de paiement */
	.bouton-paiement:hover {
		background-color:#6F98F5; /* Couleur de fond plus foncée au survol */
	}

						/* ------------------------------------------------- GENERATION CODE------------------------------------------------ */

	.bouton-code {
		background-color: #515965;   /* Couleur de fond verte */
		padding: 10px 20px; /* Espacement autour du texte */
		border: 2px solid#6F98F5; /* Bordure */
		border-radius: 5px; /* Bordure arrondie */
		cursor: pointer; /* Curseur au survol */
		text-decoration: none; /* Suppression du soulignement */
		font-size: 13px; /* Taille de la police */
		font-style: normal;
		font-weight: bold;
		color:#FCFD9B;	
	}	
	
						/* ------------------------------------------------- MENU - RESULTAT------------------------------------------------ */

	.sous-containerm {
        background-color: #475161;
		border: 3px solid#6F98F5;
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
        padding: 5px;
        max-width: 500px; 
		/* max-width: 100%;*/ /* Limite la largeur à la largeur maximale possible */
        margin: 0 auto; /* Centre le tableau horizontalement */
	}

	/* Style pour l'entête de la page 1 changement de taille */
    .headerm {
		background-color: #6F98F5;
        border: 3px solid#6F98F5;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		border-bottom-left-radius: 0px;
		border-bottom-right-radius: 0px;
		border-bottom: 0px;
        margin: 0 auto;
		padding: 5px;
        max-width: 500px; 
        display: flex; /* Utilisation de flexbox pour placer les éléments sur la même ligne */
        align-items: center; /* Alignement vertical */
        justify-content: center; /* Alignement horizontal */
        flex-wrap: wrap; /* Permettre le retour à la ligne si nécessaire */
    }

	/* Style pour texte contenu menu */
    .text-menu {
        text-align: center;
		font-family:arial, sans serif, century;
		font-size:13px;
		font-style: normal;
		font-weight: normal;
		color:#ccc;
		text-transform:none;
		text-align:center;
		margin-top: 0 ;
		padding-top: 0;
    }

	/* Style pour demande choix options */
	.text-statutm {
		text-align: center;
		font-family:arial, sans serif, century;
		font-size:12px;
		font-style: normal;
		font-weight: bold;
		text-decoration:underline;
		color: #FCFD9B; 
		text-transform:uppercase;
		text-align:center;
		margin: 0 auto;
		padding:0 auto;
		line-height:25pt;
	}
    	
	/* Style pour bouton info statut */
	.info-statutm {
		background-color: #515965;
		max-width: 300px;
		text-align: center;
		margin: 0 auto;
		padding: 10px 0px 10px 0px; /* Espacement autour du texte */
		border-radius: 5px; /* Bordure arrondie */
		text-decoration: none; /* Suppression du soulignement */
		font-size:12px;
		font-style: normal;
		font-weight: bold;
		color: #FCFD9B;
		box-shadow: 0px 0px 10px 0px#6F98F5;  /* Ombre 3D */
	}
	
						/* ----------------------------------------------------- RESULTAT-------------------------------------------------- */

	.sous-containerr {
        background-color: #475161;
		border: 0px solid #black;
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
        padding: 5px;
        max-width: 500px; 
		/* max-width: 100%;*/ /* Limite la largeur à la largeur maximale possible */
        margin: 0 auto; /* Centre le tableau horizontalement */
	}

	/* Tableau-titre-cellule-1 : style orange */
	.cell-oranger {
		background-color: #364050;
		color: #ccc;
		text-align: center;
		font-size: 12.5px;
		padding: 10px;
		border-right: 1px solid#6F98F5;
		border-left: 1px solid#6F98F5;
	}

	/* Tableau-titre-cellule-2 : style bleu */
	.cell-bleur {
		background-color: #364050;
		color: #ccc;
		text-align: center;
		font-size: 12.5px;
		padding: 10px;
		border-right: 1px solid#6F98F5;
	}

/*   Tableau : style cellules Style cellule finale titre (Gris) */
	.gris-cell-f {
		color: #ccc;
		text-align: center;
		font-size: 13px;
		font-weight: bold;
		padding: 10px;
		box-shadow: 5px 5px 15px 0px #C3C5C7; /* Ombre 3D */
	}

/* Style cellule finale titre (couleur) */
	.couleur-cell-f {
		color: #ccc;
		text-align: center;
		font-size: 13px;
		font-weight: bold;
		padding: 10px;
		box-shadow: 5px 5px 15px 0px #29FD4C; /* Ombre 3D */
	}
	
	.bouton-pdf {
		background-color: #515965;   /* Couleur de fond verte */
		padding: 10px 20px; /* Espacement autour du texte */
		border: 2px solid#6F98F5; /* Bordure */
		border-radius: 5px; /* Bordure arrondie */
		cursor: pointer; /* Curseur au survol */
		text-decoration: none; /* Suppression du soulignement */
		font-size:13px;
		font-style: normal;
		color:#ccc;	
	}
        
	/* Style pour le survol du bouton envoyer */
	.bouton-pdf:hover {
		background-color:#6F98F5; /* Couleur de fond plus foncée au survol */
	}
	
	.small-text {
	font-size: 11px; /* Ajustez la taille selon vos besoins */
	font-style: italic;
}
						/* ---------------------------------------------------- FORMULAIRE-------------------------------------------------- */
	.flex-container {
		display: flex;
		flex-wrap: wrap;
	}
	.flex-container label {
		white-space: nowrap;
	}

	/* Style pour le sous-container */
	.sous-container {
        background-color: #475161;
		border: 3px solid#6F98F5;
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
        padding: 0px;
        max-width: 650px; 
        margin: 0 auto; /* Centre le tableau horizontalement */
	}

	/* Style pour lentête */
    .header {
		background-color:#6F98F5;
        border: 3px solid#6F98F5;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		border-bottom-left-radius: 0px;
		border-bottom-right-radius: 0px;
		border-bottom: 0px;
        margin: 0 auto;
        max-width: 650px; 
        display: flex; /* Utilisation de flexbox pour placer les éléments sur la même ligne */
        align-items: center; /* Alignement vertical */
        justify-content: center; /* Alignement horizontal */
        flex-wrap: wrap; /* Permettre le retour à la ligne si nécessaire */
    }
	
	/* Style pour le bouton info statut */
	.info-statut {
		background-color: #515965;
		max-width: 300px;
		text-align: center;
		margin: 0 auto;
		padding: 10px 0px 10px 0px; /* Espacement autour du texte */
		border-radius: 5px; /* Bordure arrondie */
		text-decoration: none; /* Suppression du soulignement */
		font-size:12px;
		font-style: normal;
		font-weight: bold;
		color: #FCFD9B; 
		box-shadow: 0px 5px 10px 0px#6F98F5;  /* Ombre 3D */
	}
	
	/* Styles pour gérer le code d'activation */
	#activationForm {
		display: block;
	}
	/* Style pour l'affichage du message */

	
	#message {
		display: none; /* Masquer la boîte de message par défaut */
		padding: 10px;
		border: 1px solid #475161;
		border-radius: 5px;
		margin-top: 10px;
		text-align: center;
		margin: 0 auto; /* Centre le tableau horizontalement */
		margin-top: 10px;
		margin-bottom: 10px; 
        max-width: 600px; 		
	}
	.success {
		background-color: #475161;
		color: #8CFA8C;
		border-color: #8CFA8C;
		font-size:13px;
	}
	.error {
		background-color: #475161;
		color: #FEAAAA;
		border-color: #FEAAAA;
		font-size:13px;
	}
	
	/* Style pour la boîte d'information */
	#message-box {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #f8d7da;
		border: 1px solid #f5c6cb;
		padding: 15px 20px;
		border-radius: 5px;
		z-index: 9999;
	}

	/* Style pour le contenu de la boîte d'information */
	#message-content {
		color: #721c24;
	}

	
									/* PARTIE DIFFERENTE ENTRE APPLI-1 ET APPLI-2 */
	/* Tableau-table : style */
	table {
		width: 100%;
		border-collapse: collapse;
	}

	/* Tableau-cellules : style  */
	th, td {
		border: 0px solid black;
		padding : 4px;
		text-align: center;
		font-size: 11px; /* Taille de la police */
		border-top: 1px solid#6F98F5;
		border-bottom: 1px solid#6F98F5;
		margin-bottom: 0px; /* Ajouter une marge en bas */
		justify-content: center; /* Alignement horizontal */
	} 
	
	/* Tableau-titre-cellule-1 : style orange */
	.cell-orange {
		background-color: #3D444F;
		color: #FCD2AC;
		text-align: center;
		font-size: 12px;
		padding: 5px;
		border-right: 1px solid#6F98F5;
		border-left: 1px solid#6F98F5;
	}

	/* Tableau-titre-cellule-2 : style bleu */
	.cell-bleu {
		background-color: #3D444F;
		color:#6F98F5;
		text-align: center;
		font-size: 12px;
		padding: 5px;
		border-right: 1px solid#6F98F5;
	}

	/* Tableau-titre-cellule-3 : style jaune */
	.cell-jaune {
		background-color: #3D444F;
		color: #FCFD9B;
		text-align: center;
		font-size: 12px;
		padding: 0px;
		padding-left: 10px;
		padding-right: 10px;
	}

	/* Style pour colonne 1 principal gras */
	.critere-gras {
		font-size: 10.5px;
		font-style: normal;
		font-weight: bold;
		color: #FCD2AC;
		line-height: 10px;
	}
	
	.critere-italique {
		font-size: 10px;
		font-style: italic;
		font-weight: normal;
		color: #FDE8D5;
	}

	.espacement {
		margin-top: 5px;
	}

	/* Tableau-colonne-1 : style orange */
	td:nth-child(1) {
		color: #FDE8D5; /* Texte en orange */
		border-right: 1px solid#6F98F5;
		border-left: 1px solid#6F98F5;
	}

	/* Tableau-colonne-2 : style bleu */
	td:nth-child(2) {
		color:#6F98F5; /* Texte en bleu */
		font-weight: bold;
		border-right: 1px solid#6F98F5;
		padding-bottom: 10px;
		padding-top: 10px;
		font-size:12px;
	}

	/* Tableau-colonne-3 : style jaune */
	td:nth-child(3) {
		color: #FCFD9B; /* Texte en jaune */
		font-weight: bold;
		padding-bottom: 10px;
		padding-top: 10px;
		font-size:12px;
	}

	/* Style pour les boutons radio */
	input[type="radio"] {
		-webkit-appearance: none; /* Désactiver les styles par défaut */
		-moz-appearance: none;
		appearance: none;
		border: 2px solid #A2A4A6; /* Bordure */
		border-radius: 50%; /* Rendre les boutons radio circulaires */
		width: 11px;
		height: 11px;
		outline: none;
		margin-bottom: 4px; /* Ajouter une marge en bas */
		margin-left: 2px; /* Ajouter une marge à gauche */
		margin-right: 3px; /* Ajouter une marge à droite */
		vertical-align: middle; /* Centrer verticalement */
	}

	/* Style pour les boutons radio sélectionnés */
	input[type="radio"]:checked {
		background-color: #ccc; /* Couleur de fond pour les boutons sélectionnés */
	}

	
@media screen and (min-width: 1200px) {
/* Styles spécifiques pour les écrans de grande taille en mode portrait */

	
	/* Tableau-titre-cellule-1 : style orange */
	.cell-orange {
		font-size: 12px;
	}

	/* Tableau-titre-cellule-2 : style bleu */
	.cell-bleu {
		font-size: 12px;
	}

	/* Tableau-titre-cellule-3 : style jaune */
	.cell-jaune {
		font-size: 12px;
	}

	/* Style pour colonne 1 principal gras */
	.critere-gras {
		font-size: 12px;
	}
	
	.critere-italique {
		font-size: 12px;
	}

	/* Tableau-colonne-1 : style orange */
	td:nth-child(1) {
		font-size: 12px;
	}

	/* Tableau-colonne-2 : style bleu */
	td:nth-child(2) {
		font-size: 12px;
		padding-bottom: 10px;
		padding-top: 15px;
	}

	/* Tableau-colonne-3 : style jaune */
	td:nth-child(3) {
		font-size: 12px;
		padding-bottom: 10px;
		padding-top: 15px;
	}
	input[type="radio"] {
	margin-bottom: 7px; /* Ajouter une marge en bas */
	}
}	 


									/* FIN PARTIE DIFFERENTE ENTRE APPLI-1 ET APPLI-2 */



							/* ---------------------------------------------------- A VOIR -------------------------------------------------- */

	/* Style pour les boutons du menu */
	.menu-button {
		display: inline-block;
		padding: 10px 20px;
		background-color: #007bff;
		color: #fff;
		text-decoration: none;
		border-radius: 5px;
		margin: 0 10px; /* Marge entre les boutons */
	}
	
	.t-bleu {
		color:#6F98F5;
	}
							/* ---------------------------------------------------- A SUPPRIMER -------------------------------------------------- */	
		/* Styles pour le bouton de retour */
	#backButton {
		background-color: #007bff; /* Couleur de fond */
		color: white; /* Couleur du texte */
		padding: 10px 20px; /* Espacement à l'intérieur du bouton */
		border: none; /* Suppression de la bordure */
		border-radius: 5px; /* Arrondi des coins */
		cursor: pointer; /* Curseur de la souris */
		font-size: 16px; /* Taille de la police */
		transition: background-color 0.3s; /* Transition de couleur en cas de survol */
	
	/* Centrage horizontal */
		margin: 0 auto;
		display: block;
	}

	/* Style pour le survol du bouton retour */
		#backButton:hover {
		background-color: #0056b3; /* Couleur de fond lors du survol */
	}