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

						/* ------------------------------------------------------ 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-retour {
		font-size: 10px;
		text-align:left;
		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: italic;
		font-weight: bold;
		color: #FCFD9B;
		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: #4E5764;
		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; 
	}

	.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;
    }

	/* 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: #FCD2AC;
		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: #6F98F5;
		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 : 2px;
		text-align: center;
		border-top: 1px solid #6F98F5;
		border-bottom: 1px solid #6F98F5;
		padding-top: 5px; /* Ajouter une marge en bas */
		padding-bottom: 20px; /* Ajouter une marge en bas */
		justify-content: center; /* Alignement horizontal */
	} 
	
   .question-container {
		display: none;
	}
	.question-container.active {
		display: block;
	}
	.nav-buttons {
		margin-top: 20px;
		margin-bottom: 10px;
		text-align: center;
	}
	.counter {
		font-weight: bold;
		text-align: left;
		margin-bottom: 20px;
		color: #ccc;
		font-size: 14px;
		padding: 0px;
	}

	.radio-label {
		color: #6F98F5;
		margin-right: 4px;
		white-space: nowrap;
		font-weight: bold;
	}
	.radio-label-importance {
		color: #FCFD9B;
		margin-right: 4px;
		white-space: nowrap;
		font-weight: bold;
	}
	
	/* Tableau-titre-cellule-1 : style orange */
	.cell-orange {
		color: #FCD2AC;
		text-align: center;
		font-size: 14px;
		padding: 5px;
	}

	/* Tableau-titre-cellule-2 : style bleu */
	.cell-bleu {
		color: #6F98F5;
		text-align: center;
		font-size: 12px;
		padding: 5px;
		font-weight: bold;
	}

	/* Tableau-titre-cellule-3 : style jaune */
	.cell-jaune {
		color: #FCFD9B;
		text-align: center;
		font-size: 12px;
		padding: 5px;
		font-weight: bold;
	}

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

	.espacement {
		margin-top: 5px;
	}

	/* 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: 12px;
		height: 12px;
		outline: none;
		margin-bottom: 3px; /* Ajouter une marge en bas */
		margin-left: 1px; /* 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 (orientation: portrait) {
/* Styles spécifiques à l'orientation portrait */
/* Styles spécifiques à l'orientation paysage */

	.counter {
		font-size: 11px	}

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

	/* 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: 14px;
		font-style: normal;
		font-weight: bold;
		color: #FCD2AC;
		line-height: 10px;
	}
	
	.critere-italique {
		font-size: 13px;
	}
        .radio-label {
					font-size: 12px;
            color: #6F98F5;
            margin-right: 4px;
            white-space: nowrap;
			font-weight: bold;
        }
        .radio-label-importance {
					font-size: 12px;
            color: #FCFD9B;
            margin-right: 4px;
            white-space: nowrap;
					font-weight: bold;
        }
	input[type="radio"] {
	margin-bottom: 6px; /* Ajouter une marge en bas */
	}
}

@media screen and (orientation: landscape) {
/* Styles spécifiques à l'orientation paysage */
	/* Tableau-titre-cellule-1 : style orange */
	.cell-orange {
		font-size: 14px;
	}

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

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

	/* Style pour colonne 1 principal gras */
	.critere-gras {
		font-size: 16px;
		font-style: normal;
		font-weight: bold;
		color: #FCD2AC;
		line-height: 10px;
	}
	
	.critere-italique {
		font-size: 15px;
	}
	input[type="radio"] {
	margin-bottom: 6.5px; /* Ajouter une marge en bas */
	}	

}

@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: 14px;
	}

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

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

	/* Style pour colonne 1 principal gras */
	.critere-gras {
		font-size: 16px;
	}
	
	.critere-italique {
		font-size: 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 */
	}