@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');





body {
	font-family: 'Open Sans', sans-serif;
	margin: 10px;
	padding: 10px;


}

body .page{
	display: flex;   /* Aligner */
	justify-content: center;
	align-items: center;
	position: sticky; /*Positionnement de la barre */
	top: 0;           /*Ne va pas bouger lorsqu'on fait défiler */
}	


/* le block conteneur */
.marquee-rtl {
  max-width: 600px;                      /* largeur de la fenêtre */
  margin: 1em auto 2em;
  border: 10px solid #F0F0FF;
  overflow: hidden;                     /* masque tout ce qui dépasse */
  box-shadow: 0 .25em .5em #CCC,inset 0 0 1em .25em #CCC;
}

/* le bloc défilant */
.marquee-rtl > :first-child {
  display: inline-block;                /* modèle de boîte en ligne */
  padding-right: 2em;                   /* un peu d'espace pour la transition */
  padding-left: 100%;                   /* placement à droite du conteneur */
  white-space: nowrap;                  /* pas de passage à la ligne */
  animation: defilement-rtl 15s infinite linear;
}

@keyframes defilement-rtl {
  0% {
    transform: translate3d(0,0,0);      /* position initiale à droite */
  }
  100% {
    transform: translate3d(-100%,0,0);  /* position finale à gauche */
  }
}




/* Barre de Navigation */

nav {
	
	max-width: 1200px;   /*Limite la largeur */ 
	width: 90%;
	border-radius: 10px;  /*Arrondir les bords */
	display: flex;   /* Aligner */
	flex-wrap: wrap; /* Empile les éléments si trop petit écran*/
	justify-content: space-between; /* Met un espace */
			
	padding: 0px;   /* Marge de 20 pixels */
	background-color: #9bc;   /*RGB en hexa */

	
}

nav h1{
	font-size: 20px;
  
}

nav .onglets{
	display: flex;   /* Aligner */
	flex-wrap: wrap; /* Empile les éléments si trop petit écran*/
}

nav .onglets p{
	font-size: 17px;
	margin-right: 10px;
	cursor: pointer
}

nav .onglets input{
	margin: 8px 20px;
	padding: 15px;
	border-radius: 30px;  /*Arrondir les bords */
	border: none;         /* Ne pas afficher la bordure */
	outline: none;        /* Ne pas afficher la bordure quand focus */
	background-color: #f2f2f2; 
}

/* Fin Barre Navigation */

/* header */
header{
	max-width: 1200px;   /*Limite la largeur */ 
	width: 90%;
	display: flex;   /* Aligner */
	justify-content: center;
	align-items: center;
	
	
/*	flex-wrap: wrap; /* Empile les éléments si trop petit écran*/
/*	justify-content: space-between; /* Met un espace */

}

header h1{
	font-size: 50px;
	max-width: 1000px;   /*Limite la largeur */
	text-align: center;
}

header button{
	padding: 15px 20px;
	font-size: 20px;
	border: none;
	border-radius: 5px;
	outline: none;
	cursor: pointer;
	
}

.position {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Fin du header */

/* Section principale */

.main {
	max-width: 1200px;   /*Limite la largeur */ 
	margin: 20px;
	margin-right: 10px;
	margin-top: 0px;
	display: flex;

	justify-content: center;
	align-items: center;
	flex-direction: column;
}

/* Toutes les cartes */
.cards {
	max-width: 1200px;   /*Limite la largeur */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;	
}

.cards .card{
	margin-right: 20px;
	cursor: pointer;
}
.cards .card img{
	width: 350px;
	border:none; 
	border-radius: 20px;
}
.cards .card .card-header{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.cards .card .card-body p{
	margin-top : -10px;
}

/* fin de toutes les cartes */

/* Video de présentation */
.main .video{
	max-width: 1200px;   /*Limite la largeur */
	margin-top:40px;
	width: 100%;
	
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.main .video iframe{
	border:none; 
	border-radius: 20px;
	width : 100%;
	height : 400px;
	
}

/* Fin video de présentation */

/* Fin section principale */

/* Footer */
footer{
	max-width: 1200px;   /*Limite la largeur */
	width: 100%;
	
	margin-top: 50px;
	margin: 10px;
	background-color: #000;  /* noir */
	color: #fff;            /* blanc */
	display: flex;   /* Aligner */
	justify-content: space-between;
	border:none; 
	border-radius: 10px;
	
	

}

footer .social-media {
	
	display: flex;   /* Aligner */

}

footer .social-media p{
		
	margin: 10px;
	margin-top: 10px;
	margin-right: 15px;
	cursor: pointer;
	width: 20px;
	height: 20px;
	border: 1px solid #FFF;
	padding: 5px;
	text-align: center;
	border-radius: 100%;

}

footer p{
	margin-left: 10px;
	
}

.bas-page {
	display: flex;   /* Aligner */
	justify-content: center;
	align-items: center;
	
}

/*  Gestion ecran pour un mobile, ca c'est génial ! */

@media screen and (max-width: 640px) {

	nav .onglets .link, .social-media p, .photo {
	  display : none;
	  
	}
	.cards .card img{
		width: 300px;
	}
	
	header h1{
		font-size: 30px;
		max-width: 1000px;   /*Limite la largeur */
		text-align: center;
	}
	
.marquee-rtl {
  max-width: 300px;                      /* largeur de la fenêtre */
  margin: 1em auto 2em;
  border: 10px solid #F0F0FF;
  overflow: hidden;                     /* masque tout ce qui dépasse */
  box-shadow: 0 .25em .5em #CCC,inset 0 0 1em .25em #CCC;
}	
	
	
	
	
	
}

@media screen and (min-width: 641px) and (max-width: 1100px) {

	.cards .card img{
		width: 500px;
	}
	.photo img{
		width: 400px;
	}

	
}