/* ------------------------------- CSS PAGE DE L'EQUIPE --------------------------------- */

/* ------- CONTENEUR PRINCIPAL ------- */

.cartes {
	box-sizing: border-box;	/* Les dimensions de l'élément contiendront la bordure (0px) + le padding (45px de chaque côté) + le contenu */
	width:100%; /* La largeur de l'élément mesure 100% de la hauteur de son parent (main) */
	padding: 45px; /* Le padding de l'élément fait 45px */
	display: flex; /* Les éléments contenus seront structurés suivant le mode flexbox */
	flex-direction: row; /* Mode flexbox : les éléments seront structurés horizontalement */
	justify-content: space-between; /* Mode flexbox : les éléments seront justifés (espaces identiques de part et d'autre de chaque élément) */
}

/* ------- CONTENEUR DES CARTES ------- */

.cartes .carte_conteneur {
	flex-basis: 22%; /* Mode flexbox : le conteneur prendra 22% de la largeur de son parent (cartes) */
	align-items: center; /* Mode flexbox : les éléments seront centrés le long de l'axe principal (défini en axe horizontal); */
	min-height: 450px; /* La hauteur minimum du conteneur doit être de 450px */
}

/* -------------- CARTES -------------- */

.cartes .carte_conteneur .carte {
	width: 100%; /* La largeur de la carte mesure 100% de la largeur de son parent (carte_conteneur) */
	height: 100%; /* La hauteur de la carte mesure 100% de la hauteur de son parent (carte_conteneur) */
	background-color: rgba(0,0,0,0.4); /* La carte a une couleur de fond noire d'une opacité de 40% */
	color: white; /* La couleur du texte à l'intérieur de l'élément est blanc */
	transform-style: preserve-3d; /* Permet de définir qu'un élément est en trois dimensions */
	-webkit-transform-style: preserve-3d; /* Compatibilité avec les navigateurs qui utilisent le moteur de rendu Webkit dont Google Chrome, Safari, Opera (depuis la version 15) */
	-ms-transform-style: preserve-3d; /* Compatibilité avec les navigateurs qui utilisent le moteur de rendu Trident dont Internet Explorer */
	-moz-transform-style: preserve-3d; /* Compatibilité avec les navigateurs qui utilisent le moteur de rendu Gecko (Fondation Mozilla) dont Firefox */
	-o-transform-style: preserve-3d; /* Compatibilité avec les navigateurs qui utilisent le moteur de rendu Presto dont les anciennes versions d'Opera */
	transition: transform 0.5s ease-in-out 0s; /* Si la propriété 'transform' change de valeur, le conteneur du logo effectue une transition (une animation) : celle-ci dure 0.5s ; est lente au début, puis accélère et enfin ralentit (ease-in-out) ; se déclenche immédiatement (0s de délai) */
	-webkit-transition: transform 0.5s ease-in-out 0s; /* Compatibilité idem */
	-ms-transition: transform 0.5s ease-in-out 0s; /* Compatibilité idem */
	-moz-transition: transform 0.5s ease-in-out 0s; /* Compatibilité idem */
	-o-transition: transform 0.5s ease-in-out 0s; /* Compatibilité idem */
	border-radius: 5px; /* La bordure de la carte est arrondie sur 5px */
}

.cartes .carte_conteneur:hover .carte { /* Comportement de la carte au survol de la souris */
  transform: rotateY(180deg); /* transform applique une transformation : rotation de l'élément, définie à 180 degrés par l'axe vertical (Y) */
  -webkit-transform: rotateY(180deg); /* Compatibilité (cf. .cartes .carte_conteneur .carte) */
  -ms-transform: rotateY(180deg); /* Compatibilité (cf. .cartes .carte_conteneur .carte) */
  -moz-transform: rotateY(180deg); /* Compatibilité (cf. .cartes .carte_conteneur .carte) */
  -o-transform: rotateY(180deg); /* Compatibilité (cf. .cartes .carte_conteneur .carte) */
}

.cartes .carte_conteneur .carte .face { /* Style de la carte lorsqu'elle est en face avant */
	backface-visibility: hidden; /* La face arrière est invisible */
	-webkit-backface-visibility: hidden; /* Compatibilité (cf. .cartes .carte_conteneur .carte) */
	-ms-backface-visibility: hidden; /* Compatibilité (cf. .cartes .carte_conteneur .carte) */
	-moz-backface-visibility: hidden; /* Compatibilité (cf. .cartes .carte_conteneur .carte) */
	-o-backface-visibility: hidden; /* Compatibilité (cf. .cartes .carte_conteneur .carte) */
	width: 100%; /* La largeur de la face avant fait 100% de la largeur de son parent (carte) */
	height: 100%; /* La hauteur de la face avant fait 100% de la hauteur de son parent (carte) */
	box-sizing: border-box; /* Les dimensions de l'élément contiendront la bordure (0px) + le padding (15spx de chaque côté) + le contenu */
	padding: 15px; /* Le padding est de 15px */
	display: flex; /* Les éléments à l'intérieur de la face avant seront structurés suivant le mode flexbox */
	flex-direction: column; /* Mode flexbox : Les éléments seront structurés verticalement */
	align-items: center; /* Mode flexbox : Les éléments seront centrés sur l'axe principal (défini en axe vertical); */
	justify-content: space-evenly; /* Mode flexbox : Les éléments seront justifiés (espaces identiques entre les éléments); */
}

.cartes .carte_conteneur .carte .face.avant .photo { /* Style de la photo en face avant */
	width: 150px; /* La largeur de la photo est de 150px */
	height: 150px; /* La hauteur de la photo est de 150px */
	border-radius: 50%; /* Arrondit la bordure de façon à ce que la photo prenne la forme d'un cercle */
	overflow: hidden; /* Ce qui dépasse de la bordure (le reste de la photo) est caché */
}

.cartes .carte_conteneur .carte .face.avant .poste { /* Style de la description de poste en face avant */
	text-align: center; /* Le texte est centré */
}

.cartes .carte_conteneur .carte .face.arriere { /* Style de la carte lorsqu'elle est en face arrière */
	transform: rotateY(180deg); /* Pareil que pour .cartes .carte_conteneur:hover .carte */
	-webkit-transform: rotateY(180deg); /* Pareil que pour .cartes .carte_conteneur:hover .carte */
	-ms-transform: rotateY(180deg); /* Pareil que pour .cartes .carte_conteneur:hover .carte */
	-moz-transform: rotateY(180deg); /* Pareil que pour .cartes .carte_conteneur:hover .carte */
	-o-transform: rotateY(180deg); /* Pareil que pour .cartes .carte_conteneur:hover .carte */
	position: absolute; /* Par défaut les éléments (face avant et face arrière) se positionneraient les uns après les autres : position absolute permet de placer la face arrière au même endroit que la face avant */
	top: 0; /* Cf. position absolute : postionne la face arrière tout en haut */
	left: 0; /* Cf. position absolute : positionne la face arrière tout à gauche */
}

.cartes .carte_conteneur .carte .face.arriere p { /* Style de la biographie en face arrière */
	text-align: justify; /* Le texte est justifié */
}
.en-savoir-plus {
	width: 100%; /* La largeur du conteneur mesure 100% de la largeur de son parent */
	background-color: rgba(0,0,0,0.5); /* Un fond de couleur noir d'opacité 50% est appliqué */
	margin-bottom: 80px;
}

.en-savoir-plus p { /* Définit le style des paragraphes dans ce conteneur */
  font-size: 50px; /* Le texte contenu dans les paragraphes mesure 50px */
  color: white; /* Le texte est blanc */
  text-shadow: #FC0 1px 0 10px; /* Le texte est entouré d'une lumière jaune */
  text-align: center; /* Le texte est centré */
 }

 .en-savoir-plus:hover a {
  color: yellow;
 }