/* Version: 1.0 */
/* Auteurs: Sandra et Guillaume */
/* Description: CSS de la Page de Mecenat du Site des Roses */

html
{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

body
{
	/* height: 100%; */
	width: 100%;
	margin: 0;
	padding: 0;

	background-color: white;

	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	
	font-family: Arial, Helvetica, sans-serif;
}

::selection
{
	background: #64B4F6;
	color: #5AF7B8;
}

* {
	margin: 0;
	padding: 0;

	box-sizing: border-box;

	outline: none;
	text-decoration: none;
}
	
	
/*******************************************************/
/*******************************************************/
/*******************************************************/


	/*********************************/
/*********************************/
/*
/* Coeur de la Page Partenaires */
/*
/********************************/
	/*********************************/

.CoeurMecenat
{
	width: 80%;
	height: auto;
	min-height: 80vh;


	background-color:#C8C7FD ;
	background: linear-gradient(45DEG,#C8C7FD,#C2E2FD);
	background: linear-gradient(45DEG,#9997FA, #C2E2FD);

	border-radius: 10px;

	/* padding: 1.5rem 1.2rem; */

	display: flex;
	flex-direction: row;
	justify-content: start;
	align-items: flex-start;

	flex-wrap: wrap;
}


	/********************************************/
/********************************************/
/*
/* Creation des Cartes pour les partenaires */
/*
/********************************************/
	/********************************************/

  .Card 
  {
    width: 200px;
    height: 300px;

	position: relative;

    margin: 1.5em;

    overflow: hidden;

    box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.3);
   
	border-radius: 15px;
    
	display: flex;
	flex-direction: column;
    justify-content: center;
    align-items: center;
  }
	.Card a
	{
		height: 100%;

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
		.Card-Color
		{
			background-color: antiquewhite;
		}
			.ImgCard
			{
				width: 100%;
				height: 100%;

				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;

				cursor: pointer;
			}
			.CardLogo
			{
				width: 100%;
				/* height: 100%; */

				/* border-radius: 15px; */
			}

  .ContentCard
  {
    width: 100%;
    height: 160px;

	position: absolute;
    bottom: -160px;

    display: flex;
	flex-direction: column;
    justify-content: start;
    align-items: center;

    z-index: 10;

	/* background-color: red; */

    
    backdrop-filter: blur(15px);
    box-shadow: 0 -10px 10px rgba(0,0,0,0.1);

    border: 1px solid rgba(255,255,255,0.2);

    transition: bottom 0.5s;
    transition-delay: 0.8s;
  }
	.Card:hover .ContentCard
	{
		bottom: 0px;
		
		transition-delay: 0s;
	}


.TitleCard
{
	width: 100%;
	height: 60%;

	opacity: 0;

	/* background-color: blue; */

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

	transition: 0.5s;
	transform: translateY(-20px);
	transition-delay: 0.6s;
}
	.Card:hover .TitleCard
	{
		opacity: 1;
		transform: translateY(0px);
	}

/* Titre de la Carte : */
/* Cad Nom du Partenaire */
	.TitleCard h1
	{
		color: white;
		font-weight: 500;
		font-size: 1em;

		/* text-transform: uppercase; */

		text-align: center;
	}
/* span de la Carte : */
/* Cad Description succinte du Partenaire */
	.TitleCard span
	{
		color: white;
		font-weight: 300;
		font-size: 0.8em;
	}

/* Reglage des Social Media que l'on peut associer aux Partenaires */
  .Sci
  {
    position: relative;
    bottom: 10px;

    display: flex;
  }

	.Sci a 
	{
		margin: 10px;

		opacity: 0;

		color: white;

		transform: translateY(40px);
		transition: 0.5s;
		transition-delay: 0.3s;
	}
		.Card:hover .Sci a
		{
			transform: translateY(0px);
			opacity: 1;
		} 
		.Sci .fa
		{
			padding: 5px 20px;
		} 


/*******************************************************/
/*******************************************************/
/*******************************************************/

@media screen and (max-width: 600px) {
	.CoeurMecenat
	{   
		width: 90%;
		height: auto;
		/* flex-direction: column; */
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}

	/* Carte de Mécène sur Téléphone */
	.Card
	{
		justify-content: start;
		/* position: inherit; */
	}
		.Card a
		{
			height: 50%;
		}
			.ImgCard
			{
				height: 50%;
			}
	.ContentCard
	{
		height: 50%;
		/* position: inherit; */
		transition: none;
		bottom: 0;
		background-color: transparent;
	}
		.TitleCard
		{
			opacity: 1;
			transition: none;
			transform: none;
		}
		.Sci
		{
			position: inherit;
			bottom: 0;
		}
			.Sci a
			{
				opacity: 1;
				transition: none;
				transform: none;
			}
			.Sci .fa
			{
				padding: 20px;
			} 

}