<?php session_start();
?>
/*============================================*/
/*======== CSS ecran 43" =====================*/
/*============================================*/
/*--------------------------------------------------------------------------------------------*/

/* on definit un container avec une grille */
/* 3840X2160 */
@charset "utf-8";
/* CSS du code HTML page Index */
/* classe image responsive */
	.img-responsive{max-width:100%;
		    height:auto;}
	.img-responsive2{max-height:100%;
		    width:auto;
			 animation-name: spinner; 
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
  animation-duration: 4s; /* temps d'une revolution pour le logo */
  transform-style: preserve-3d;}
  
  @keyframes spinner { 
   0% {transform: rotateY(0deg) rotateX(0deg);}
    12.5% {transform: rotateY(-45deg) rotateX(0deg);} 
   25% {transform: rotateY(-90deg) rotateX(0deg);} 
  50% {transform: rotateY(-180deg) rotateX(0deg);}
    62,5% {transform: rotateY(-270deg) rotateX(0deg);} 
  75% {transform: rotateY(-315deg) rotateX(0deg);}
  100% {transform: rotateY(-360deg) rotateX(0deg);}
                   }
/* on fait un reset des margin et padding */
*{
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}


html{font-size:0.6vw;}
/*=============== CSS page Index ===============================*/
body{
 background:#630; /* marrron */
  background:url(../img/bg_index_big.gif) no-repeat center fixed; 
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
  width:100vw; /* on utilise la totalite */
  min-height:100vh;/* de la hauteur et de la largeur du screen */
  margin:0;
  /* on masque les ascenseurs */
  overflow-x:hidden;
   overflow-y:hidden;
  }
a{color:navy;text-decoration-line:none; }
a:hover{color:greenyellow;}

/* on definit un container avec une grille */

.container{
	/*fond*/
/*background:#F06; /* fuschia */
    display: grid;
    grid-template-columns: 100vw;
    grid-template-rows: repeat(4, auto);
    grid-template-areas :   "main main main main"
						    "footer footer footer footer";
	/*pas de gouttiere entre les blocs */
   	grid-gap:0px;						
  	/*hauteur*/
	max-height:100%; /* du body */
 	min-height:100%;
	/*Largeur*/
	width:100%; /* on prend toute la largeur disponible du body */
	/* En cas de dépassement du contenu, on le masque */
    overflow:hidden;
	}
	
.fixed {
  position: fixed;
  top: 0;
  width: 100%; /* Assurez-vous que div C reste de la même largeur */
  z-index: 10; /* Assurez-vous que div C reste au-dessus des autres éléments lors du défilement */
}
 /* dernier élément du conteneur : Footer */

.footer{
	grid-area:footer;
	/*fond*/
	background: #69c; /* bleu identique au nav*/
	/*couleur texte*/
	color:#FFF; /*blanc*/
	/*Hauteur*/
	min-height:5vh; 
	text-align:center; 
	width:100%;    
	overflow:hidden;  
	padding-right:0%;
	z-index:999;
	height:auto;
	font-size:1.2vw;
	      }
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
     /* 2eme élément du conteneur : la NAV */

nav {
    grid-area: nav;
    background: #204B57; /* bleu */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    height: 7vh;
    padding: 0 2px;
    overflow: visible;
	font-size:1vw;
	z-index:25;
}

nav a {
    float: left;
    display: block;
    color: #FFFDD0;
    text-align: center;
    padding: 0.5vw 0.5vw;
    text-decoration: none;
    box-sizing: border-box; /* Assure que le padding et les bordures sont inclus dans la taille de l'élément */
}

nav a:hover, .dropdown:hover .dropbtn {
    text-decoration: none;
    border-bottom: 2px solid #fff; /* Ligne blanche élégante sous l'élément */
    margin-bottom: -2px; /* Compense l'ajout de la bordure */
}

/* Effacer le float */
nav:after {
    content: "";
    display: table;
    clear: both;
}

/* Menu déroulant */
.dropdown {
    float: left;
    position: relative; /* Ajouté pour positionner correctement le sous-menu */
    overflow: visible;
}

.dropdown .dropdown-content {
    display: none;
    position: absolute;
    top: 100%; /* Positionne le sous-menu juste en dessous de l'élément .dropdown */
    left: 0; /* Alignement gauche avec l'élément parent */
    background-color: #3C6E71;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown .dropdown-content a {
    float: none;
    color: #FAFAD2;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    box-sizing: border-box; /* Assure que le padding et les bordures sont inclus dans la taille de l'élément */
}

.dropdown-content a:hover {
    text-decoration: none;
    border-bottom: 1px solid #444; /* Ligne pour les éléments de sous-menu */
    margin-bottom: -1px; /* Compense l'ajout de la bordure */
	background:#1B4B52;
}

.dropdown:hover .dropdown-content {
    display: block;
}


.hidden {display:none;}
/*==================================== FIN DU NAV ============================================================*/
/* Styles de base pour .C */
.C {
  position: relative;
  z-index: 5; /* Doit être inférieur à .sticky-c pour la visibilité des pseudo-éléments */
}

/* Styles quand .C devient sticky */
.sticky-c {
  position: sticky;
  position: -webkit-sticky; /* Pour le support Safari */
  top: 0;
  z-index: 10; /* Plus élevé que .C pour rester au-dessus */
  background-color: white;
}

/* Barres noires pour .sticky-c */
.sticky-c::before, .sticky-c::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: black;
}

.sticky-c::before {
  top: -5px; /* Au-dessus de .sticky-c */
  z-index: -1; /* Sous .sticky-c mais au-dessus du contenu en dessous grâce à position relative de .C */
}

.sticky-c::after {
  bottom: -5px; /* En dessous de .sticky-c */
}

.main {
	grid-area:main;
	/*fond*/
	
	  display: grid;
	  grid-template-columns: 12.5vw 12.5vw 12.5vw 12.5vw 12.5vw 12.5vw 12.5vw 12.5vw;
	  grid-template-rows: repeat(6, auto);
	  grid-template-areas : 
	  						"B B B B B B B B"
	  					    "C C C C C C C C"
							"D D D D D D D D"
							"E E E E E E E E"
							"F F F F F F F F";
									
		/*goutiere de 2px entre les elements */
 		 grid-gap: 1px;
		/*hauteur */
  		height:95vh;
		/*largeur */
		width:100vw;
		/* En cas de depassement, on masque le contenu */
		overflow:scroll;
		-ms-overflow-style: none;  /* IE and Edge */
    	scrollbar-width: none;  /* Firefox */
  background-color:white;
  color:#000;
	 }
	 .main::-webkit-scrollbar {
    display: none;  /* Chrome, Safari and Opera */
}
	 h2{text-align:center;padding-top:15px;color:black;}
	  h3{text-align:right;padding-top:15px;padding-right:15px;}
	  p{ 
  font-family:Arial, Helvetica, sans-serif;
  
  text-indent:40px;
  }
  
 .highlighted-word {
    font-family: "Helvetica Neue", sans-serif; /* Choisissez une police élégante */
    font-weight: bold; /* Choisissez la graisse de la police */
    color: #FF5733; /* Choisissez une couleur élégante */
    /* Vous pouvez également ajouter d'autres styles tels que la taille de la police, l'espacement des caractères, etc. */
  } 
 
	 		/* ++++++++++++++++++++++++++ 1er element du main */

	
.main .B {grid-area:B;min-width:100vw;max-width:100vw;min-height:15vh;max-height:15vh;background: white;}
	.main .B img{height:15vh;width:100vw;}
	

.main .C {grid-area:C;min-width:100vw;max-width:100vw;min-height:8vh;max-height:8vh;background:white;z-index:15;
		  display:grid;
          grid-template-columns: 18vw 61vw 21vw; 
	      grid-template-areas : "C1 C2 C3";}
	.main .C .C1{grid-area:C1;min-width:18vw;max-width:18vw;min-height:8vh;max-height:8vh;background:white;
				 display:grid;
          		 grid-template-columns: 9vw 9vw; 
	      		 grid-template-areas : "p4 p5";}
		
		.main .C .C1 .p4{grid-area:p4;min-width:8vw;max-width:8vw;height:auto;display:grid; justify-items: center;align-items: center;margin-top:0.5vh; }
		.main .C .C1 .p4 a {text-decoration: none;}
		.main .C .C1 .p4 a:hover{transform: scale(1.2); /* Grossissement de 20% */}
		.main .C .C1 .p4 a img{height:auto;width:5vw;transition: transform 0.8s ease; /* Transition fluide */}

		.main .C .C1 .p5{grid-area:p5;min-width:8vw;max-width:8vw;height:auto;display:grid; justify-items: center;align-items: center;margin-top:0.5vh; }
		.main .C .C1 .p5 a {text-decoration: none;}
		.main .C .C1 .p5 a:hover{transform: scale(1.2); /* Grossissement de 20% */}
		.main .C .C1 .p5 a img{height:auto;width:5vw;transition: transform 0.8s ease; /* Transition fluide */}
		
		
		.main .C .C2 {
		  background: white;
		  display: grid;
		  grid-template-columns: 0.3vw auto 0.3vw;
		  grid-template-areas: "M0 nav M1";
		  min-height:7vh;
		  max-height:7vh;
		}
			.main .C .C2 .hamburger-menu{display:none;/* masqué, uniquement actif pour les smartphones*/}
			.main .C .C2 .nav {
			  grid-area: nav;
			  display: flex;
			  flex-direction: row;
			  align-items: center;
			  justify-content: space-between;
			  height: 6vh;
			  background: white;
			  padding: 0 20px; /* Ajustez la padding pour s'adapter à votre conception */
			
			}

				.main .C .C2 .nav .nav-items {
				  display: flex;
				  flex-direction: row;
				  padding: 0;
				  margin: 0;
				  list-style: none;
				  height: 100%;
				  white-space: nowrap; /* Empêche les éléments de menu de passer à la ligne suivante */
				}

					.main .C .C2 .nav .nav-items > li {
					  padding: 0 10px;/*espacement entre les items du menu*/
					  position: relative; /* Pour le positionnement absolu du sous-menu */
					}

						.main .C .C2 .nav .nav-items > li > a {
						  color: #00008b; /* Bleu foncé pour le texte */
						
						  text-decoration: none;
						  display: flex;
						  align-items: center;
						  height: 100%;
						  padding: 0 10px; /*espacement entre les items du menu*/
						  transition: border-bottom 0.3s, background-color 0.3s; /* Ajouté background-color à l'animation */
						}

							.main .C .C2 .nav .nav-items > li:hover > a {
							  border-bottom: 2px solid #00008b; /* Ajuster la taille du trait selon les besoins */
							  background-color: #ddd; /* Couleur de fond gris clair lors du survol */
							  padding-bottom: 3px; /* Réduit l'espacement entre le texte et le trait */
							}
								/* Sous-menu */
								.main .C .C2 .nav .dropdown-content {
								  display: none;
								  position: absolute;
								  background-color: white;
								  min-width: 200px;
								  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
								  z-index: 1;
								  left: 0; /* Aligner avec l'élément parent */
								  top: 100%; /* Sous l'élément parent */
								  list-style: none; /* Supprime les marqueurs de liste */
								}
								
								/* Pour l'affichage du sous-menu */
								.main .C .C2 .nav .nav-items > li.dropdown:hover .dropdown-content {
								  display: block;
								}
								
								.main .C .C2 .nav .dropdown-content li {
								  display: block;
								  list-style: none; /* Supprime les marqueurs de liste pour les éléments de sous-menu */
								}
								
								.main .C .C2 .nav .dropdown-content li a {
								  color: #00008b;
								  padding: 12px 16px;
								  text-decoration: none;
								  display: block; /* Assure que les liens sont affichés en bloc, un par ligne */
								}
								
								/* Ajustements pour le sous-menu lors du survol */
								.main .C .C2 .nav .dropdown-content li a:hover {
								  background-color: #bbb; /* Gris plus foncé pour correspondre au menu vertical */
								  color: black;
								}

					.main .C .C3 {
							  width: 17.5vw;
							  margin-right: 0.5vw;
							  margin-top: 0.5vh;
							  margin-bottom: 0.5vh; /* Ajoutez cette ligne pour la marge en bas */
							  height:auto;
							  max-height: 6.0vh;
							  display: flex;
							  align-items: center;
							  justify-content: center;
							  background: rgba(0, 0, 0, 0.35);
							  border-radius: 1vh;
							  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
							  box-sizing: border-box;
							  padding: 0 1vw;
							  overflow: hidden;
							}
								
							.main .C 	.C3 .login-container {
								width: 100%; /* Prend la largeur totale de C3 */
								height: 100%; /* Prend la hauteur totale de C3 */
								
								display: flex;
								justify-content: space-between; /* Espacement égal entre les éléments */
								align-items: center;
								padding: 0; /* Pas de padding ici, contrôlé par C3 */
								box-sizing: border-box;
							}
							
							.main .C 	.C3 .login-container .form-group input {
								width: 5vw; /* Réduisez la largeur si nécessaire */
								padding: 0.4vh 0.5vw;
								margin: 0 0.5vw; /* Espacement horizontal entre les éléments */
								border: 1px solid #ccc;
								
								border-radius: 5px;
								font-size: 1rem;
								text-align: center;
								box-sizing: border-box;
							}
							
							.main .C 	.C3 .login-container .form-actions button {
								padding: 0.4vh 0.8vw; /* Ajustez le padding horizontal pour réduire la largeur */
								margin-right: 1vw; /* Marge à droite pour empêcher le bouton de toucher le bord */
							 	font-size: 1rem;
								border: none;
								border-radius: 5px;
								text-align: center;
								cursor: pointer;
								background: #6c757d; /* Couleur de fond gris */
								color: white; /* Couleur du texte */
								box-sizing: border-box;
								transition: background-color 0.3s ease; /* Transition douce pour l'effet de survol */
							}
							
							.main .C 	.C3 .login-container .form-actions button:hover {
								background-color:#09F; /* Couleur de fond pourpre au survol */
							}
							/* Styles pour les transitions et focus */
							.main .C 	.C3 .login-container  .form-group input, button {
								transition: all 0.3s ease-in-out;
							}
							
							.main .C 	.C3 .login-container  .form-group input:focus, button:hover {
								border-color: #555;
								box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
							}


						.main .D {min-width:100vw;max-width:100vw;height:auto;
    display: grid;
    grid-template-columns: 12vw 14vw 15vw 15vw 15vw 14vw 12vw;
   
    grid-template-areas: 
        "D2 D1 D1 D1 D1 D1 D3"
        "D2 D4 D5 D6 D7 D8 D3";
    padding: 1vw;
    background: white;
							margin-bottom: 10vh;
}
	.main .D .D1 {grid-area:D1;font-size:1.2rem;
   min-width: 73vw;
    max-width: 73vw;
   height:auto;
    background: white;
   display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
	 padding-top: 0vw;
	 padding-left:15vw;
	 padding-right:15vw;
}
.main .D .D1 img{width:60%;height:auto;}
.main .D .D1 p{ font-size:1.1vw;}

						.main .D .D2{grid-area:D2;min-width:12vw;max-width:12vw;height:auto;background:white;display:flex;justify-items: center;align-items: center;flex-direction:column; }
							.main .D .D2 img{width:75%;height:auto;}
						.main .D .D3{grid-area:D3;min-width:12vw;max-width:12vw;height:auto;background:white;display:flex;justify-items: center;align-items: center;flex-direction:column;}/*card 01 - abonnement à la formation*/
						.main .D .D4{grid-area:D4;min-width:15vw;max-width:15vw;height:auto;background:white;display:flex;justify-items: center;align-items: center;flex-direction:column;padding:0.5vw;}
							.main .D .D4 img{width:7vw;height:auto;}
							.main .D .D4 .titreD{text-align:center;font-size:1.5rem;color:#009;margin-top:5px;}
						
						.main .D .D5{grid-area:D5;min-width:15vw;max-width:15vw;height:auto;background:white;display:flex;justify-items: center;align-items: center;flex-direction:column;padding:0.5vw;}
							.main .D .D5 img{width:7vw;height:auto;}
							.main .D .D5 .titreD{text-align:center;font-size:1.5rem;color:#009;margin-top:5px;}
						
						.main .D .D6{grid-area:D6;min-width:15vw;max-width:15vw;height:auto;background:white;display:flex;justify-items: center;align-items: center;flex-direction:column;padding:0.5vw;}
							.main .D .D6 img{width:7vw;height:auto;}
							.main .D .D6 .titreD{text-align:center;font-size:1.5rem;color:#009;margin-top:5px;}
						
						.main .D .D7{grid-area:D7;min-width:15vw;max-width:15vw;height:auto;background:white;display:flex;justify-items: center;align-items: center;flex-direction:column;padding:0.5vw;}
							.main .D .D7 img{width:7vw;height:auto;}
							.main .D .D7 .titreD{text-align:center;font-size:1.5rem;color:#009;margin-top:5px;}
						
						.main .D .D8{grid-area:D8;min-width:15vw;max-width:15vw;height:auto;background:white;display:flex;justify-items: center;align-items: center;flex-direction:column;padding:0.5vw;}
							.main .D .D8 img{width:7vw;height:auto;}
							.main .D .D8 .titreD{text-align:center;font-size:1.5rem;color:#009;margin-top:5px;}
						
						.main .E {grid-area:E;min-width:100vw;max-width:100vw;min-height:6vh;max-height:6vh;display:flex;justify-content: center; /* Modifié pour centrer horizontalement */
 								 align-items: center; /* Pour centrer verticalement */  flex-direction: row;;}
						.main .E .text-content{background:#09C;color:white;font-size: 2.5rem; width: 100%; /* Ajout pour prendre toute la largeur du parent */    height: 100%; /* Ajout pour prendre toute la hauteur du parent */display: flex;    justify-content: center; /* Centrer le contenu horizontalement */
    					align-items: center; /* Centrer le contenu verticalement */}
							
					
						.main .F {
    grid-area: F;
    min-width: 100vw;
    max-width: 100vw;
    height: auto;
    background: white;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "FV1 FT1";
    padding: 1vw;
}

.main .F .FV1, .main .F .FT1 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto; /* Première ligne pour le header, suivantes pour le contenu */
    gap: 1vw;
    padding: 1vw;
}

.main .F .FV1 {
    grid-area: FV1;
    min-width: 50vw;
    max-width: 50vw;
    background: white;
}

.main .F .FT1 {
    grid-area: FT1;
    min-width: 50vw;
    max-width: 50vw;
    background: white;
}

.main .F .FV1 > .header-image, .main .F .FT1 > .header-image {
    grid-column: span 3; /* Prend toute la ligne */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1vw;
}

.main .F .FV1 > div, .main .F .FT1 > div {
    background: white;
    min-width: 15vw;
    max-width: 15vw;
    height: 12vw; /* Assurez-vous que les hauteurs des lignes sont cohérentes */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.main .F .FV1 > div video, .main .F .FT1 > div img {
    width: 100%;
    height: auto;
}

.main .F .FT1 .fiche-info {
    background-color: white;
    color: crimson;
    text-align: center;
    padding: 0px;
    margin-top: -2px;
    border-radius: 5px;
    font-size: 1.2vw;
    font-weight: 700;
}

								
							/* Style pour le Pop-up */
.pdf-popup {
    display: none; /* Masqué par défaut */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
	visibility: hidden; /* cette ligne pour initialement cacher complètement le popup */
}

.pdf-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    position: fixed;
    top: 50%; /* pour centrer le pdf */
    left: 50%; /* pour centrer le pdf */
    transform: translate(-50%, -50%);
    width: 70%;
    height: 80%;
    max-width: 100%; /* ne depassera jamais la taille de l'ecran */
    min-height: 80%;
    max-height: 100%; /* ne depassera jamais la taille de l'ecran */
    overflow: hidden;
}

.close-popup {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-popup:hover,
.close-popup:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.pdf-content h2 {
    color: #333; /* Couleur du texte */
    margin-top: 0; /* Supprime la marge par défaut du haut */
    padding-bottom: 10px; /* Espace sous le titre */
    border-bottom: 1px solid #ddd; /* Ligne séparatrice sous le titre */
    text-align: center; /* Centrer le titre */
}

/* Classe hidden pour masquer le popup */
.hidden {
    display: none;
	visibility: hidden; /*  cette ligne pour initialement cacher complètement le popup */
}		
								
.fiche-blurred .fiche-content {
    filter: blur(5px); /* Ajustez la valeur pour contrôler l'intensité du flou */
    pointer-events: none; /* Désactive les événements de pointage sur cet élément */
}
.bonus-video {
    position: relative;
    display: inline-block;
	 border: 3px solid crimson; 
}
.fiche-bonus {
    border: 3px solid crimson; /* Bordure dorée pour un aspect bonus */
    position: relative; /* Important pour positionner le label "bonus" */
}

.bonus-label {
    position: absolute; /* Positionnement absolu par rapport à son parent */
    top: 10px; /* Ajustez ces valeurs selon vos besoins */
    right: 10px; /* Ajustez ces valeurs selon vos besoins */
    background-color: crimson; /* Couleur de fond */
    color: white; /* Couleur du texte */
    padding: 5px; /* Espace intérieur */
    border-radius: 5px; /* Coins arrondis */
    font-weight: bold; /* Texte en gras */
    pointer-events: auto; /* Active les événements de pointage pour le label */
}
.fiche-bonus:hover {
    animation: pulse 2.7s 2;/*battement en 2.7s répété 2 fois*/}	
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

								
.main .D .D3 .planv:hover .card-body{background:#FC6;}
/*-------- CSS pour les pricing cards --------------------*/
@import url('https://fonts.googleapis.com/css?family=Tangerine');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
/* Ici, vous définissez vos couleurs de thème pour chaque plan */
:root {
  --card-01-color-01: #FFD700; /* Jaune */
  --card-01-color-02: #FFA500; /* Or */
  --card-02-color-01: #90EE90; /* Vert clair */
  --card-02-color-02: #008000; /* Vert */
  --card-03-color-01: #ADD8E6; /* Bleu clair */
  --card-03-color-02: #0000FF; /* Bleu */
  --card-04-color-01: #FC949E; /* Rouge clair */
  --card-04-color-02: #FF3333; /* Rouge */
  --card-05-color-01: #CCCCCC; /* Noir clair */
  --card-05-color-02: #333333; /* Noir */
  /* Ajoutez d'autres variables de couleur pour les autres plans */
  
  --bebas-font: 'Bebas Neue', cursive;
  --poppins-font: 'Poppins', sans-serif;
  --card-body-bg-color: #FFFFFF;
  --text-disabled-color: #BDBDBD;
  --icon-disabled-color:  #E0E0E0;
}
/*---------------- le design des pricing cards  */
.disabled {
  opacity: 0.5; /* Rend le contenu évanescents pour les cartes non cliquables pour le client*/
  pointer-events: none; /* Désactive les interactions de la souris comme les clics */
}
.disabled .ribbon:before {/*texte de la petite banniere diagonale*/
  content: 'Non Eligible';font-size:19px;
}
.pricing-card{
 position: relative;
  background: var(--card-body-bg-color);
  border-radius: 20px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-right: 20px;
  width: 90%; /* Ajuster la largeur des cartes */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.card-body{
  position: relative;
  width:100%;
  background: var(--card-body-bg-color);
  
  box-shadow: 0 5px 25px rgb(0 0 0 / 20%);
  margin-top: 0px;
  height:auto;
	display:flex;
	justify-content: center; align-items: top;
	font-size:2vw;
}
.card-body .top-shape{
  content: '';
  position: absolute;
  clip-path: polygon(0 0, 100% 0%, 100% 25%, 50% 50%, 0 25%);
  width: 100%;
  height: 25vh;

 }
.card-01 .card-body .top-shape{
  background: var(--card-01-color-01);
}
.card-02 .card-body .top-shape{
  background: var(--card-02-color-01);
}
.card-03 .card-body .top-shape{
  background: var(--card-03-color-01);
}
.card-04 .card-body .top-shape{
  background: var(--card-04-color-01);
}
.card-05 .card-body .top-shape{
  background: var(--card-05-color-01);
}
.card-body .top-shape:before{
  content: '';
  position: absolute;
  clip-path: polygon(0 0, 100% 0%, 100% 25%, 50% 50%, 0 25%);
  width: 100%;
  height: 15vh;
}
.card-01 .card-body .top-shape:before{
  background: var(--card-01-color-02);
}
.card-02 .card-body .top-shape:before{
  background: var(--card-02-color-02);
}
.card-03 .card-body .top-shape:before{
  background: var(--card-03-color-02);
}
.card-04 .card-body .top-shape:before{
  background: var(--card-04-color-02);
}
.card-05 .card-body .top-shape:before{
  background: var(--card-05-color-02);
}
.pricing{
  z-index: 10;
  font-family: var(--bebas-font);
  text-align: center;
  position: absolute;
  width: 100%;
  margin-top : 0px;
 
  height:30%;
}
.price {
  position: absolute;
  top: 2vh;
  left: 0;
  right: 0;
  margin-top: 0vh;
  color: #000;
  
  z-index: 10;
}

.price sup {
  font-size: 4rem;
  vertical-align: top;
	
}

/* Type de grade */
.type {
  font-family: var(--bebas-font);
  font-size: 5rem;
  text-transform: uppercase;
  margin-top: 15vh;
  color: #000;
}

.price span{
  font-size: 8rem;
  line-height: 100px;
}

.pricing p{
  font-family: var(--poppins-font);
  font-weight: 500;
  margin-bottom: 0;
	margin-top:0;
}

.card-body .card-content{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transform: translateY(-30px);
 
  margin-top:30vh;
}
.card-body .card-content ul{
  width: 100%;
  justify-content: center; /* Centre verticalement */
    align-items: center;     /* Centre horizontalement */
  font-family: var(--poppins-font);
  text-align: center;
  margin-bottom: 20px;
  padding: 0 20px;
}
.card-body .card-content ul li{
  list-style: none;
  font-size: 0.9vw;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
}

.pedagogic-content1 {
  background-color: yellow; /* Couleur de fond jaune */
  
  width: 100%; /* Largeur totale du conteneur */
  display: block; /* Affichage en bloc pour prendre toute la largeur */
  text-align: center; /* Alignement du texte à gauche */
}

.pedagogic-content1 span {
  width: 100%; /* Largeur totale pour l'élément span */
  display: inline-block; /* Affichage en ligne mais se comporte comme un bloc */
font-weight:700;
}
.pedagogic-content2 {
  background-color: lightgreen; /* Couleur de fond vert clair */
  
  width: 100%; /* Largeur totale du conteneur */
  display: block; /* Affichage en bloc pour prendre toute la largeur */
  text-align: center; /* Alignement du texte à gauche */
}

.pedagogic-content2 span {
  width: 100%; /* Largeur totale pour l'élément span */
  display: inline-block; /* Affichage en ligne mais se comporte comme un bloc */
font-weight:700;
}
.pedagogic-content3 {
  background-color: lightblue; /* Couleur de fond bleu clair */
  
  width: 100%; /* Largeur totale du conteneur */
  display: block; /* Affichage en bloc pour prendre toute la largeur */
  text-align: center; /* Alignement du texte à gauche */
}

.pedagogic-content3 span {
  width: 100%; /* Largeur totale pour l'élément span */
  display: inline-block; /* Affichage en ligne mais se comporte comme un bloc */
font-weight:700;
}
.pedagogic-content4 {
  background-color:#F36; /* Couleur de fond parme */
  
  width: 100%; /* Largeur totale du conteneur */
  display: block; /* Affichage en bloc pour prendre toute la largeur */
  text-align: center; /* Alignement du texte à gauche */
}

.pedagogic-content4 span {
  width: 100%; /* Largeur totale pour l'élément span */
  display: inline-block; /* Affichage en ligne mais se comporte comme un bloc */
font-weight:700;
}
.pedagogic-content5 {
  background-color:lightgray; /* Couleur de fond grise */
  
  width: 100%; /* Largeur totale du conteneur */
  display: block; /* Affichage en bloc pour prendre toute la largeur */
  text-align: center; /* Alignement du texte à gauche */
}

.pedagogic-content5 span {
  width: 100%; /* Largeur totale pour l'élément span */
  display: inline-block; /* Affichage en ligne mais se comporte comme un bloc */
font-weight:700;
}
.bonus span {
  width: 100%; /* Largeur totale pour l'élément span */
  display: inline-block; /* Affichage en ligne mais se comporte comme un bloc */
  color:#F90;
font-weight:800;
}
.card-body .card-content ul li i{
  font-size: 1.0rem;
  margin-left: 0;
}

.card-01 .card-body .card-content ul .active i{
  color: var(--card-01-color-01);
}
.card-02 .card-body .card-content ul .active i{
  color: var(--card-02-color-01);
}
.card-03 .card-body .card-content ul .active i{
  color: var(--card-03-color-01);
}
.card-04 .card-body .card-content ul .active i{
  color: var(--card-03-color-01);
}
.card-05 .card-body .card-content ul .active i{
  color: var(--card-05-color-01);
}
.card-body .card-content ul .disabled{
  color: var(--text-disabled-color);
}
.card-body .card-content ul .disabled i{
  color: var(--icon-disabled-color);
}
.card-content .buy-btn{
  font-family: var(--bebas-font);
  border: none;
  outline: none;
  padding: 0 28px;
  border-radius: 15px;
  text-transform: uppercase;
  font-size: 2rem;
  cursor: pointer;
  margin-bottom: 40px;
}
.card-01 .card-content .buy-btn{
  background: linear-gradient(var(--card-01-color-01) 50%, var(--card-01-color-02) 50%);
}
.card-02 .card-content .buy-btn{
  background: linear-gradient(var(--card-02-color-01) 50%, var(--card-02-color-02) 50%);
}
.card-03 .card-content .buy-btn{
  background: linear-gradient(var(--card-03-color-01) 50%, var(--card-03-color-02) 50%);
}
.card-04 .card-content .buy-btn{
  background: linear-gradient(var(--card-04-color-01) 50%, var(--card-04-color-02) 50%);
}
.card-05 .card-content .buy-btn{
  background: linear-gradient(var(--card-05-color-01) 50%, var(--card-05-color-02) 50%);
}
.card-01 .card-content .buy-btn:hover{
  background: linear-gradient(var(--card-01-color-02) 50%, var(--card-01-color-01) 50%);
}
.card-02 .card-content .buy-btn:hover{
  background: linear-gradient(var(--card-02-color-02) 50%, var(--card-02-color-01) 50%);
}
.card-03 .card-content .buy-btn:hover{
  background: linear-gradient(var(--card-03-color-02) 50%, var(--card-03-color-01) 50%);
}
.card-04 .card-content .buy-btn:hover{
  background: linear-gradient(var(--card-04-color-02) 50%, var(--card-04-color-01) 50%);
}
.card-05 .card-content .buy-btn:hover{
  background: linear-gradient(var(--card-05-color-02) 50%, var(--card-05-color-01) 50%);
}
.ribbon{
  width: 110px;
  height: 110px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.ribbon:before{
  content: 'Eligible';
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--poppins-font);
  font-size: 21px;
  font-weight: 600;
  position: absolute;
  width: 150%;
  height: 30px;
  transform: rotate(45deg) translateY(15px);
}
.card-01 .ribbon:before{
  background: var(--card-01-color-01);
}
.card-02 .ribbon:before{
  background: var(--card-02-color-01);
}
.card-03 .ribbon:before{
  background: var(--card-03-color-01);
}
.card-04 .ribbon:before{
  background: var(--card-04-color-01);
}
.card-05 .ribbon:before{
  background: var(--card-05-color-01);
}
.ribbon:after{
  z-index: -1;
  content: '';
  position: absolute;
  width: 150%;
  height: 30px;
  transform: rotate(225deg) translateY(15px);
}
.card-01 .ribbon:after{
  background: var(--card-01-color-02);
}
.card-02 .ribbon:after{
  background: var(--card-02-color-02);
}
.card-03 .ribbon:after{
  background: var(--card-03-color-02);
}
.card-04 .ribbon:after{
  background: var(--card-04-color-02);
}
.card-05 .ribbon:after{
  background: var(--card-05-color-02);
}
========================================================= fin du design des cards ====================================*/


.image-align-left{
  float : left;
}
.image-align-right{
  float : right;
}
/* A mettre sur le parent pour éviter tout débordement de l'effet float */
.float-content:before,
.float-content:after{content:""; display:block; clear:both;}


/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

		  
/* Styles de base pour .C */
.C {
  position: relative;
  z-index: 5; /* Doit être inférieur à .sticky-c pour la visibilité des pseudo-éléments */
}

/* Styles quand .C devient sticky */
.sticky-c {
  position: sticky;
  position: -webkit-sticky; /* Pour le support Safari */
  top: 0;
  z-index: 10; /* Plus élevé que .C pour rester au-dessus */
  background-color: white;
}

/* Barres noires pour .sticky-c */
.sticky-c::before, .sticky-c::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: lightgray;
}

.sticky-c::before {
  top: -5px; /* Au-dessus de .sticky-c */
  z-index: -1; /* Sous .sticky-c mais au-dessus du contenu en dessous grâce à position relative de .C */
}


.sticky-c::after {
  bottom: -5px; /* En dessous de .sticky-c */
}
/*======================*/
/* Styles de base pour .E */
.E {
  position: relative;
  z-index: 5; /* Doit être inférieur à .sticky-c pour la visibilité des pseudo-éléments */
}

/* Styles quand .E devient sticky */
.sticky-e {
  position: sticky;
  position: -webkit-sticky; /* Pour le support Safari */
  top: 8vh; /* Hauteur de la div C */
  z-index: 10; /* Plus élevé que .C pour rester au-dessus */
}


/* Barres noires pour .sticky-e */
.sticky-e::before, .sticky-e::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: lightgray;
}

.sticky-e::before {
  top: -5px; /* Au-dessus de .sticky-c */
  z-index: -1; /* Sous .sticky-c mais au-dessus du contenu en dessous grâce à position relative de .C */
}

.sticky-e::after {
  bottom: -5px; /* En dessous de .sticky-c */
}


 @media screen and (max-width: 820px) {
body, html, container, main, footer {
margin : 0;
padding : 0;
border : 0;
background : white;
}
html {
font-size : 16px;
}
.container {
display : grid;
grid-template-columns : 100vw;
grid-template-rows : repeat(4,auto);
grid-template-areas : "main main main main" "footer footer footer footer";
gap : 0;
height : auto;
width : 100%;
overflow : hidden;
}
.footer {
background : #69c;
color : #FFF;
min-height : 5vh;
text-align : center;
width : 100%;
overflow : hidden;
padding-right : 0%;
z-index : 999;
height : auto;
font-size : 2.2vw;
}
.C {
position : relative;
z-index : 5;
}
.sticky-c {
position : sticky;
top : 0;
z-index : 10;
background-color : orange;
}
.sticky-c::before, .sticky-c::after {
content : '';
display : block;
position : absolute;
left : 0;
width : 100%;
height : 5px;
background-color : cadetblue;
z-index : 15;
}
.sticky-c::before {
top : -5px;
z-index : -1;
}
.sticky-c::after {
bottom : -5px;
}
.E {
position : relative;
z-index : 5;
}
.sticky-e {
position : sticky;
top : 12vh;
z-index : 10;
}
.sticky-e::before, .sticky-e::after {
content : '';
display : block;
position : absolute;
left : 0;
width : 100%;
height : 5px;
background-color : lightgray;
}
.sticky-e::before {
top : -5px;
z-index : -1;
}
.sticky-e::after {
bottom : -5px;
}
.main {
grid-area : main;
display : grid;
background : white;
grid-template-columns : 100vw;
grid-template-columns : repeat(5,1fr);
grid-template-areas : "B " "C " "D " "E " "F ";
gap : 1px;
min-height : 95vh;
max-height : 95vh;
min-width : 100%;
max-width : 100%;
overflow : scroll;
scrollbar-width : none;
color : #000;
}
.main .B {
grid-area : B;
min-height : 12vh;
max-height : 12vh;
	
}
	 
.main .C {
grid-area : C;
min-height : 12vh;
max-height : 12vh;
background : white;
z-index : 15;
min-width : 100vw;
max-width : 100vw;
padding-top : 2vh;
display : grid;
grid-template-columns : 30vw 58vw 12vw;
grid-template-areas : "C1 C3 C2";
}
.main .C .C1 {
grid-area : C1;
min-width : 30vw;
max-width : 30vw;
display : grid;
grid-template-columns : 15vw 15vw;
grid-template-areas : "p4 p5";
}
.main .C .C1 .p4 {
grid-area : p4;
min-width : 15vw;
max-width : 15vw;
height : 8vh;
display : grid;
justify-items : center;
align-items : center;
margin-top : 0.5vh;
}
.main .C .C1 .p4 a {
text-decoration : none;
}
.main .C .C1 .p4 a:hover {
transform : scale(1.2);
}
.main .C .C1 .p4 a img {
height : 4vh;
width : 10vw;
transition : transform 0.8s ease;
}
.main .C .C1 .p5 {
grid-area : p5;
min-width : 15vw;
max-width : 15vw;
height : 8vh;
display : grid;
justify-items : center;
align-items : center;
margin-top : 0.5vh;
}
.main .C .C1 .p5 a {
text-decoration : none;
}
.main .C .C1 .p5 a:hover {
transform : scale(1.2);
}
.main .C .C1 .p5 a img {
height : 4vh;
width : 10vw;
transition : transform 0.8s ease;
}
.main .C .C3 {
grid-area : C3;
min-width : 58vw;
max-width : 58vw;
min-height : 7vh;
max-height : 8vh;
margin-right : 0.5vw;
margin-top : 0.5vh;
margin-bottom : 0.5vh;
background : rgb(0, 0, 0, 0.35);
border-radius : 1vh;
box-shadow : 0 4px 8px rgb(0, 0, 0, 0.2);
box-sizing : border-box;
padding : 0 1vw;
overflow : hidden;
background : lightgray;
}
.main .C .C3 .login-container {
width : 100%;
height : 100%;
display : flex;
flex-wrap : wrap;
}
.main .C .C3 .login-container .form-group {
display : flex;
flex-direction : column;
flex-grow : 1;
}
.main .C .C3 .login-container .form-group input {
min-width : 35vw;
max-width : 35vw;
padding : 0.3vh 0.4vw;
margin : 0 0.4vw;
border : #ccc solid 1px;
border-radius : 5px;
font-size : 0.8rem;
text-align : center;
box-sizing : border-box;
margin-bottom : 0.5vh;
}
.main .C .C3 .login-container .form-actions {
display : flex;
align-items : center;
justify-content : center;
flex-grow : 0;
}
.main .C .C3 .login-container .form-actions button {
font-size : 1rem;
min-width : 15vw;
max-width : 15vw;
border : none;
border-radius : 5px;
text-align : center;
cursor : pointer;
background : #6c757d;
color : white;
box-sizing : border-box;
transition : background-color 0.3s ease;
margin-bottom : 1.0vh;
}
.main .C .C3 .login-container .form-actions button:hover {
background-color : #09F;
}
.main .C .C3 .login-container .form-group input, button {
transition : all 0.3s ease-in-out;
}
.main .C .C3 .login-container .form-group input:focus, button:hover {
border-color : #555;
box-shadow : 0 2px 4px rgb(0, 0, 0, 0.15);
}
.main .C .C2 {
grid-area : C2;
min-width : 10vw;
max-width : 10vw;
min-height : 7vh;
max-height : 7vh;
margin-right : 0.5vw;
margin-top : 0.5vh;
margin-bottom : 0.5vh;
}
.main .C .C2 .hamburger-menu {
color : steelblue;
padding-left : 2vw;
display : block;
cursor : pointer;
font-size : 30px;
user-select : none;
text-align : center;
z-index : 26;
}
.main .C .C2 nav {
background : white;
max-height : 6vh;
}
.main .C .C2 nav .menu {
display : flex;
opacity : 0;
visibility : hidden;
flex-direction : column;
align-items : center;
z-index : 300;
min-width : 100vw;
max-width : 100vw;
min-height : 100%;
max-height : 100%;
background : #E6E5E5;
position : fixed;
top : 12vh;
left : 100%;
width : 100vw;
height : 100%;
transition : left 1.5s ease, opacity 1.5s ease, visibility 1.5s ease;
}
.main .C .C2 nav .menu.active {
display : flex;
flex-direction : column;
align-items : center;
z-index : 300;
min-width : 100vw;
max-width : 100vw;
background : #E6E5E5;
position : fixed;
top : 12vh;
left : 100%;
width : 100vw;
height : 100%;
}
.main .C .C2 nav .menu.active a {
font-size : 1.4rem;
text-align : center;
color : darkslateblue;
margin-top : 0;
margin-bottom : 2px;
padding-top : 3%;
}
.main .C .C2 nav .menu.active.slide-in {
left : 0;
opacity : 1;
visibility : visible;
}
.main .C .C2 nav .menu.active .dropdown {
position : relative;
padding-top : 3%;
}
.main .C .C2 nav .menu.active .dropdown:hover {
position : relative;
}
.main .C .C2 nav .menu.active .dropdown .dropdown-content {
display : none;
background : white;
color : cornflowerblue;
position : absolute;
}
.main .C .C2 nav .menu.active .dropdown .dropdown-content a {
font-size : 1rem;
}
.main .C .C2 nav .menu.active .dropdown:hover .dropdown-content {
display : block;
}
.main .C .C2 nav .menu.active .dropdown:hover .dropdown-content a:hover {
text-decoration : none;
border-bottom : 1px solid #444;
margin-bottom : -1px;
background : #F0ECEC;
}
.main .D {
grid-area : D;
min-width : 100vw;
max-width : 100vw;
display : grid;
grid-template-columns : 74vw 26vw;
grid-template-areas : "D1 D1" "D3 D4" "D3 D5" "D3 D6" "D3 D7" "D3 D8";
padding : 1vw;
padding-bottom : 0;
gap : 1vw;
}
.main .D .D1 {
grid-area : D1;
min-width : 100vw;
max-width : 100vw;
height : auto;
background : white;
display : flex;
flex-direction : column;
align-items : center;
text-align : center;
padding-top : 0;
padding-left : 5vw;
padding-right : 5vw;
}
.main .D .D1 img {
width : 60%;
height : auto;
}
.main .D .D1 p {
font-size : 2.3vw;
margin-top : 1vh;
}
	 .main .D .D2 {display:none;}	 
.main .D .D3 {
grid-area : D3;
min-width : 100%;
max-width : 100%;
min-height : 70vh;
max-height : 70vh;
background : white;
display : inline;
justify-items : center;
align-items : center;
}
	 /*  ajustement cards */
	 .price span{font-size:4rem;}
	 .price sup{font-size:3rem;}
	 .type{margin-top:15vh;font-size:4rem;} /* Grade Jaune*/
	 .card-body .card-content{margin-top:50vh;}
	 .card-body .card-content ul li{font-size:3vw;}
	 
.main .D .D4 {
grid-area : D4;
min-width : 24vw;
max-width : 24vw;
height:auto;
background : white;
display : grid;
justify-items : center;
align-items : center;
flex-direction : row;
padding : 0.5vw;
flex-wrap : wrap;
}
.main .D .D4 img {
width : 17vw;
height : auto;
}
.main .D .D4 .titreD {
text-align : center;
font-size : 0.9rem;
color : #009;
margin-top : 2px;
	margin-right:5px;
}
.main .D .DZ1 {
grid-area : DZ1;
min-width : 0.1vw;
max-width : 0.1vw;
min-height : 17vh;
max-height : 17vh;
background : lightgray;
display : flex;
justify-items : center;
align-items : center;
display : none;
}
.main .D .D5 {
grid-area : D5;
min-width : 24vw;
max-width : 24vw;
height:auto;
background : white;
display : grid;
justify-items : center;
align-items : center;
flex-direction : row;
padding : 0.5vw;
margin-top : 1vh;
flex-wrap : wrap;
}
.main .D .D5 img {
width : 17vw;
height : auto;
}
.main .D .D5 .titreD {
text-align : center;
font-size : 0.9rem;
color : #009;
margin-top : 2px;
	margin-right:5px;
}
.main .D .DZ2 {
grid-area : DZ2;
min-width : 0.1vw;
max-width : 0.1vw;
min-height : 17vh;
max-height : 17vh;
background : lightgray;
display : flex;
justify-items : center;
align-items : center;
display : none;
}
.main .D .D6 {
grid-area : D6;
min-width : 24vw;
max-width : 24vw;
height:auto;
background : white;
display : grid;
justify-items : center;
align-items : center;
flex-direction : row;
padding : 0.5vw;
margin-top : 1vh;
flex-wrap : wrap;
}
.main .D .D6 img {
width : 17vw;
height : auto;
}
.main .D .D6 .titreD {
text-align : center;
font-size : 0.9rem;
color : #009;
margin-top : 2px;
	margin-right:5px;
}
.main .D .DZ3 {
grid-area : DZ3;
min-width : 0.1vw;
max-width : 0.1vw;
min-height : 17vh;
max-height : 17vh;
background : lightgray;
display : flex;
justify-items : center;
align-items : center;
display : none;
}
.main .D .D7 {
grid-area : D7;
min-width : 24vw;
max-width : 24vw;
height:auto;
background : white;
display : grid;
justify-items : center;
align-items : center;
flex-direction : row;
padding : 0.5vw;
margin-top : 1vh;
flex-wrap : wrap;
}
.main .D .D7 img {
width : 17vw;
height : auto;
}
.main .D .D7 .titreD {
text-align : center;
font-size : 0.9rem;
color : #009;
margin-top : 2px;
	margin-right:5px;
}
.main .D .DZ4 {
grid-area : DZ4;
min-width : 0.1vw;
max-width : 0.1vw;
min-height : 10vh;
max-height : 17vh;
background : lightgray;
display : flex;
justify-items : center;
align-items : center;
display : none;
}
.main .D .D8 {
grid-area : D8;
min-width : 24vw;
max-width : 24vw;
height:auto;
background : white;
display : grid;
justify-items : center;
align-items : center;
flex-direction : row;
padding : 0.5vw;
margin-top : 1vh;
margin-bottom : 2vh;
flex-wrap : wrap;
}
.main .D .D8 img {
width : 17vw;
height : auto;
}
.main .D .D8 .titreD {
text-align : center;
font-size : 0.9rem;
color : #009;
margin-top : 2px;
	margin-right:5px;
}
.main .E {
grid-area : E;
min-width : 100vw;
max-width : 100vw;
min-height : 6vh;
max-height : 6vh;
display : flex;
justify-content : center;
align-items : center;
flex-direction : row;
}
.main .E .text-content {
background : #09C;
color : white;
font-size : 6vw;
width : 100%;
height : 100%;
display : flex;
justify-content : center;
align-items : center;
}
.main .F {
display : grid;
grid-template-columns : 1fr;
grid-template-areas : "FV1" "FT1";
grid-auto-rows : auto;
gap : 1vw;
padding : 1vw;
background : white;
}
.main .F .FV1, .main .F .FT1 {
display : contents;
}
.main .F .FV1 > div, .main .F .FT1 > div {
background : white;
min-width : 100%;
max-width : 100%;
height : auto;
display : flex;
align-items : center;
justify-content : center;
flex-direction : column;
margin-bottom : 1vw;
}
.main .F .FV1 > div video, .main .F .FT1 > div img {
width : 100%;
height : auto;
}
.main .F .FT1 .fiche-info {
background-color : white;
color : crimson;
text-align : center;
padding : 0;
margin-top : -2px;
border-radius : 5px;
font-size : 3vw;
font-weight : 700;
}
.main .F .FV1 .L1 {
order : 1;
}
.main .F .FT1 .T1 {
order : 2;
}
.main .F .FT1 .T1 {
margin-bottom : 10vh;
}
.main .F .FV1 .L2 {
order : 3;
}
.main .F .FT1 .T2 {
order : 4;
}
.main .F .FT1 .T2 {
margin-bottom : 10vh;
}
.main .F .FV1 .L3 {
order : 5;
}
.main .F .FT1 .T3 {
order : 6;
}
.main .F .FT1 .T3 {
margin-bottom : 10vh;
}
.main .F .FV1 .L4 {
order : 7;
}
.main .F .FT1 .T4 {
order : 8;
}
.main .F .FT1 .T4 {
margin-bottom : 10vh;
}
.main .F .FV1 .L5 {
order : 9;
}
.main .F .FT1 .T5 {
order : 10;
}
.main .F .FT1 .T5 {
margin-bottom : 10vh;
}
.main .F .FV1 .L6 {
order : 11;
}
.main .F .FT1 .T6 {
order : 12;
}
.main .F .FT1 .T6 {
margin-bottom : 10vh;
}
.main .F .FV1 .L7 {
order : 13;
}
.main .F .FT1 .T7 {
order : 14;
}
.main .F .FT1 .T7 {
margin-bottom : 10vh;
}
.main .F .FV1 .L8 {
order : 15;
}
.main .F .FT1 .T8 {
order : 16;
}
.main .F .FT1 .T8 {
margin-bottom : 10vh;
}
.main .F .FV1 .L9 {
order : 17;
}
.main .F .FT1 .T9 {
order : 18;
}
.main .F .FT1 .T9 {
margin-bottom : 10vh;
}
.main .F .FV1 .L10 {
order : 19;
}
.main .F .FT1 .T10 {
order : 20;
}
.main .F .FT1 .T10 {
margin-bottom : 10vh;
}
.main .F .FV1 .L11 {
order : 21;
}
.main .F .FT1 .T11 {
order : 22;
}
.main .F .FT1 .T11 {
margin-bottom : 10vh;
}
.main .F .FV1 .L12 {
order : 23;
}
.main .F .FT1 .T12 {
order : 24;
}
.main .F .FT1 .T12 {
margin-bottom : 10vh;
}
.main .F .FV1 .L13 {
order : 25;
}
.main .F .FT1 .T13 {
order : 26;
}
.main .F .FT1 .T13 {
margin-bottom : 10vh;
}
.main .F .FV1 .L14 {
order : 27;
}
.main .F .FT1 .T14 {
order : 28;
}
.main .F .FT1 .T14 {
margin-bottom : 10vh;
}
.main .F .FV1 .L15 {
order : 29;
}
.main .F .FT1 .T15 {
order : 30;
}
.main .F .FT1 .T15 {
margin-bottom : 10vh;
}
.main .F .FV1 .L16 {
order : 31;
}
.main .F .FT1 .T16 {
order : 32;
}
.main .F .FT1 .T16 {
margin-bottom : 10vh;
}
.main .F .FV1 .L17 {
order : 33;
}
.main .F .FT1 .T17 {
order : 34;
}
.main .F .FT1 .T17 {
margin-bottom : 10vh;
}
.main .F .FV1 .L18 {
order : 35;
}
.main .F .FT1 .T18 {
order : 36;
}
.main .F .FT1 .T18 {
margin-bottom : 10vh;
}
.main .F .FV1 .L19 {
order : 37;
}
.main .F .FT1 .T19 {
order : 38;
}
.main .F .FT1 .T19 {
margin-bottom : 10vh;
}
.main .F .FV1 .L20 {
order : 39;
}
.main .F .FT1 .T20 {
order : 40;
}
.main .F .FT1 .T20 {
margin-bottom : 10vh;
}
.main .F .FV1 .L21 {
order : 41;
}
.main .F .FT1 .T21 {
order : 42;
}
.main .F .FT1 .T21 {
margin-bottom : 10vh;
}
.main .F .FV1 .L22 {
order : 43;
}
.main .F .FT1 .T22 {
order : 44;
}
.main .F .FT1 .T22 {
margin-bottom : 10vh;
}
.main .F .FV1 .L23 {
order : 45;
}
.main .F .FT1 .T23 {
order : 46;
}
.main .F .FT1 .T23 {
margin-bottom : 10vh;
}
.main .F .FV1 .L24 {
order : 47;
}
.main .F .FT1 .T24 {
order : 48;
}
.main .F .FT1 .T24 {
margin-bottom : 10vh;
}
.main .F .FV1 .L25 {
order : 49;
}
.main .F .FT1 .T25 {
order : 50;
}
.main .F .FT1 .T25 {
margin-bottom : 10vh;
}
.main .F .FV1 .L26 {
order : 51;
}
.main .F .FT1 .T26 {
order : 52;
}
.main .F .FT1 .T26 {
margin-bottom : 10vh;
}
.main .F .FV1 .L27 {
order : 53;
}
.main .F .FT1 .T27 {
order : 54;
}
.main .F .FT1 .T27 {
margin-bottom : 10vh;
}
.main .F .FV1 .L28 {
order : 55;
}
.main .F .FT1 .T28 {
order : 56;
}
.main .F .FT1 .T28 {
margin-bottom : 10vh;
}
.main .F .FV1 .L29 {
order : 57;
}
.main .F .FT1 .T29 {
order : 58;
}
.main .F .FT1 .T29 {
margin-bottom : 10vh;
}
.main .F .FV1 .L30 {
order : 59;
}
.main .F .FT1 .T30 {
order : 60;
}
.main .F .FT1 .T30 {
margin-bottom : 10vh;
}
.main .F .FV1 .L31 {
order : 61;
}
.main .F .FT1 .T31 {
order : 62;
}
.main .F .FT1 .T31 {
margin-bottom : 10vh;
}
.main .F .FV1 .L32 {
order : 63;
}
.main .F .FT1 .T32 {
order : 64;
}
.main .F .FT1 .T32 {
margin-bottom : 10vh;
}
.main .F .FV1 .L33 {
order : 65;
}
.main .F .FT1 .T33 {
order : 66;
}
.main .F .FT1 .T33 {
margin-bottom : 10vh;
}
.main .F .FV1 .L34 {
order : 67;
}
.main .F .FT1 .T34 {
order : 68;
}
.main .F .FT1 .T34 {
margin-bottom : 10vh;
}
.main .F .FV1 .L35 {
order : 69;
}
.main .F .FT1 .T35 {
order : 70;
}
.main .F .FT1 .T35 {
margin-bottom : 10vh;
}
.main .F .FV1 .L36 {
order : 71;
}
.main .F .FT1 .T36 {
order : 72;
}
.main .F .FT1 .T36 {
margin-bottom : 10vh;
}
	 .main .F .FV1 .L37 {
order : 73;
}
.main .F .FT1 .T37 {
order : 74;
}
.main .F .FT1 .T37 {
margin-bottom : 10vh;
}
	 .main .F .FV1 .L38 {
order : 75;
}
.main .F .FT1 .T38 {
order : 76;
}
.main .F .FT1 .T38 {
margin-bottom : 10vh;
}
 .main .F .FV1 .L39 {
order : 77;
}
.main .F .FT1 .T39 {
order : 78;
}
.main .F .FT1 .T39 {
margin-bottom : 10vh;
}	 
.fiche-blurred .fiche-content {
filter : blur(5px);
pointer-events : none;
}
.bonus-video {
position : relative;
display : inline-block;
border : crimson solid 3px;
}
.fiche-bonus {
border : crimson solid 3px;
position : relative;
}
.bonus-label {
position : absolute;
top : 0;
right : 10px;
background-color : crimson;
color : white;
padding : 5px;
border-radius : 5px;
font-weight : bold;
pointer-events : auto;
}
.fiche-bonus:hover {
animation : pulse 2.7s 2;
}
}
@keyframes pulse {
0% {
transform : scale(1);
}
50% {
transform : scale(1.05);
}
100% {
transform : scale(1);
}
} 


/* petits ecrans en mode paysage */
@media only screen and (max-width: 820px) and (orientation: landscape) {
  /* Vos styles CSS ici */
	
	.main .C{grid-area:C;min-height:20vh;max-height:20vh;}	

/*login*/
 .main .C .C3 {
    grid-area: C3;
    min-height: 15vh;
	 max-height: 15vh;}


/* drapeaux */
.main .C .C1 .p4 a img {
    height: 8vh;
	width: 10vw;}
.main .C .C1 .p5 a img {
    height: 8vh;
	width: 10vw;}
	
/*menu hamburger*/	
	
	
	.main .C .C2 nav .menu.active {
    display: flex;
    flex-direction: column;
    justify-content: top;
    / align-items: center;
    z-index: 300;
    min-width: 100vw;
    max-width: 100vw;
    background: #E6E5E5;
    position: fixed;
    top: 0;
    left: 100%;
    width: 100vw;
    height: 100%;
    line-height: 1vh;
  }
	.main .C .C2 nav .menu.active.slide-in {
    left: 0;
    opacity: 1;
    visibility: visible;
    margin-top: 0;
		line-height: 0.3rem;}
	
	/* les maitres */
	 .main .C .C2 nav .menu.active .dropdown .dropdown-content {
    display: none;
    background: white;
    color: cornflowerblue;
    position: absolute;
    font-size: 0.7rem;
		 width: 30vw;}
	 .main .C .C2 nav .menu.active .dropdown .dropdown-content a {
    font-size: 0.7rem;
    width: 30vw;
		 text-align: left;}
	
	
	/*  ajustement cards */
	 .type{margin-top:30vh;font-size:3rem;} /* Grade Jaune*/
	 .card-body .card-content{margin-top:50vh;}
	 .card-body .card-content ul li{font-size:0.8rem}
	
	
	/*espace formation */
	.main .E .text-content{font-size:1.5rem;}
	
	
}


/*############################################################################################################################*/
/*############################################################################################################################*/
/*############################################           Fin de ma page                #######################################*/
/*############################################################################################################################*/
/*############################################################################################################################*/