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



/* affichage pour chat */
.message {
	width: 350px;
    height: 200px;
    max-height: 200px;
    
    margin-bottom: 10px;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
    overflow-y: auto;
    
}


/* zoom du logo host974 */


.zoom img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.zoom :hover img {
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}



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: 100%;
	border-radius: 6px;  /*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: #000000;   /*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: top;	
}

.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{
	max-width: 350px;
	margin-top : -10px;
	display: flex;
	flex-wrap: wrap;
	text-align: justify;
	
	
}

/* Empeche le passage à la ligne intempestif dans card-body */
.cards .card .card-body p > * {
  display: contents;
}



/* 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;
	
}

/* Affichage de la question du texte pour écran PC normal*/

	 textarea {
		/* Utilisez une valeur appropriée pour cols */
		width:1200px;
	  }




/*  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;
	}
	
	.cards .card .card-body p{
		max-width: 300px;
		margin-top : -10px;
		display: flex;
		flex-wrap: wrap;
		text-align: justify;
		
	
	}
	
	
	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;
	}	
	
	
	/* Affichage question à chatgpt*/
	 textarea {
			/* Utilisez une valeur appropriée pour cols */
			width:320px;
		  }
		  
		  .publicite1 {
		  display : none;
			}
	
	
	
}

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

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

	
	/* Affichage de la question du texte pour écran mobile renversé*/

	 textarea {
		/* Utilisez une valeur appropriée pour cols */
		width:600px;
	  }



	
	
	
}