/* commenaitre multiligne */

/* centrage de tous les textes */
*
{
	text-align: center;
	
}

/* personnalisation de tous les liens */
a 
{
  text-decoration: none; /* retire le soulignement des liens */
  color: gold; 
  transition-duration: 0.4s;
}

a:hover
{
	color: red; 
}

/*couleur du fond du site */
body
{
	background-color: lightgray;
	padding: 0;
	margin: 1px;
}

#bloc_page
{
	max-width: 800px; /* super important ! */
	padding: 0px; /* marge interieure au bloc */
	margin: auto; /* centre lebloc */
	overflow: ; /* contrôle ce qui se passe quand trop de texte dans un bloc de taille fixée :
	visible hidden scroll auto  */
    word-wrap: break-word; /* peremts de casser un mot trop long */
	/* border: 1px black solid; */
	background-color: LightGray;
	border-radius: 10px;
}


/* est-ce utile ?*/
p.justifier
{
	text-align: justify;
}



/* à appliquer à chacun des div qui s'empilent verticalement sur le site */
.flex-container /* à appliquer au bloc contenant, qui englobe les blocs qu'on veut agencer */
{
  /* border: 1px orange solid; */
  display: flex;
  flex-direction: row; /* les objets seront en ligne ou en colonne row/column */
  flex-wrap: wrap;  /* permet un retour à la ligne si nécéssaire (nowrap sinon) */
  justify-content: space-around; /* "justifie" les blocs proprement, space-between; est aussi très utile*/
  align-items: stretch; /* force les div à s'étaler en hauteur pour remplir le conteneur */
}

/* Responsive layout - makes a one column layout instead of a two-column layout */

@media (max-width: 1000px) {
  .flex-container {
    flex-direction: column;
  }
}


/* à appliquer aux bloc qu'on veut voir gris avec des bordures, et qui se réagencent */
.blocstandard
{
	/* border: 3px orange solid; */
	background-color: Gray;
	margin: 10px;
	padding: 5px 30px;
	border-radius: 10px;
	
	flex: 1;
	/* border: 3px green solid; */
	align-items: stretch;
}

/* à appliquer aux div qui doivent se réagencer et qui ne sont pas des blocs standard */
.flex-item /* à appliquer aux boites qui doivent s'empiler ou non suivant le format de l'écran */
{
	flex: 1;
	/* border: 1px green solid; */
	align-items: stretch;
}


/* gestion de listes de chemins et de détails */
nav
{
    display: flex;
	justify-content: space-between;
    align-items: flex-end;
}

nav ul
{
    list-style-type: none;
    display: flex;
}


/* pour que les formulaires soient alignés */
label 
{
	display: block;
	width: 150px;
	float: left;
}



/* gère les bouttons */
.button 
{
  background-color: lightgray;
  border: 1px solid grey;
  color: black;
  padding: 4px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 8px;
}

.button:hover {
  background-color: gold;
  color: white;
}


/* gère le fondu */
.fade-in {
  -webkit-animation-name: fadeInOpacity;
          animation-name: fadeInOpacity;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}

@-webkit-keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* fait s'opacifier tout le texte d'un bloc */
@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


@media (max-width: 640px) {
	* {
		box-sizing: border-box;
	}
	
	/* passer body (et tous les éléments de largeur fixe) en largeur automatique */

	body {
		width: auto;
		margin: 0;
		padding: 0;
	}
	
	/* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

	img,
	table,
	td,
	blockquote,
	code,
	pre,
	textarea,
	input,
	iframe,
	object,
	embed,
	video {
		max-width: 100%;
	}
	
	/* conserver le ratio des images */

	img {
		height: auto;
	}
	
	/* gestion des mots longs */

	textarea,
	table,
	td,
	th,
	code,
	pre,
	samp {
		-webkit-hyphens: auto; /* césure propre */
		-moz-hyphens: auto;
		hyphens: auto;
		word-wrap: break-word; /* passage à la ligne forcé */
	}
	
	code,
	pre,
	samp {
		white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
	}
	
	/* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */

	.element1,
	.element2 {
		float: none;
		width: auto;
	}
	
	/* masquer/afficher les éléments  */

	.u-mobile {          display: block;          display: revert !important; /* affichage des éléments */        }        .u-no-mobile {          display: none !important; /* masquage des éléments */        }
	
	/* Un message personnalisé */
	/*
	body:before {
		content: "Version mobile du site";
		display: block;
		text-align: center;
		font-style: italic;
		color: 
	#777;
	} 
	*/
}