/***************Main***************/

main {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: white;
	font-size: 1.3em;
}

main section + section p {
	text-indent: 10px;
	text-align: justify;
}

main section + section {
	padding: 4vh 0;
}

/***************Titre***************/

#BUT {
	width: 100%;
}

#BUT > div {
	margin: calc(var(--header) + 15vh) 0 15vh;
	padding: 0, 7%;
	box-sizing: border-box;
	display : flex;
	justify-content: center;
	align-items: center;
	position: relative;
	background-color:hsl(229, 100%, 97%);
	width: 100%;
	scroll-margin-top: calc(var(--header) + 15vh);
}

#BUT h3 {
	margin: 0 5vw 0 0;
	font-size:5em;
	font-weight: normal;
	text-align:center;
}

#BUT h3:last-child {
	margin: 0 0 0 5vw;
}

#BUT h2 {
	color : hsl(0, 0%, 50%);
	font-size: 1em;
	padding: 0 2em;
}

#BUT h1 {
	text-align: center;
}

#BUT h1+h2 {
	text-align: right;
}

/***************Cercle de matière***************/

#Matières {
	--largeur : 7em;
	width: 100%;
	height: max(100vh, 10%);
	background-color:hsl(229, 100%, 97%);
	box-sizing: border-box;
	padding: 6vh 5vw;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#Matières > h2 {
	text-align: center;
}

#Matières .wrapper{
	--largeur : 7em;
	display: flex;
	justify-content: space-around;
	align-items: center;
	position: relative;
	gap: 20px;
}

#Matières article {
	width: min(50ch,90%)
}

.conteneur {
	height: 20em;
	aspect-ratio: 1/1;
	position: relative;
	margin: calc(var(--largeur) / 2);
	right: calc(var(--largeur) / 2);
	bottom: calc(var(--largeur) / 2);
}

.conteneur .matiere {
	opacity: 0;
	visibility: hidden;
	display: flex;
	text-align: center;
	align-items: center;
	width: var(--largeur);
	height: var(--largeur);
	box-shadow: hsla(240, 30%, 28%, 0.25) 0px 30px 60px -12px,
				hsla(0, 0%, 0%, 0.3) 0px 18px 36px -18px;
	position: absolute;
	border-top: 10px solid var(--rouge-op);
	background-color: white;
	border-radius: 5px;
}

.conteneur.is-visible .matiere
{
	opacity: 1;
	visibility: visible;
}


.conteneur .matiere:hover {
	border-color: var(--rouge);
	transform: scale(1.05);
}

/***************Description***************/

#Description {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 50px;
}

#Description h3 {
	margin: 0;
	font-size: 1.4em;
}

#Description h4 {
	font-size: 1.15em;
	text-align: center;
}

#Description hr {
	background-color: hsl(347, 84%, 50%) ;
	border: 0;
	height: 5px;
	width: 80px;
	border-radius: 5px;
	margin-block-end: 2em;
}

#Description img {
	width: min(50em,80%);
	box-shadow: hsla(240, 30%, 28%, 0.25) 0px 30px 60px -12px,
				hsla(0, 0%, 0%, 0.3) 0px 18px 36px -18px;
	border-radius: 20px;
}

#Description div {
	padding: 0 5%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	gap: 5%;
}

#Description article {
	width: min(100%, 50ch);
}

/***************Caroussel***************/

#Atouts {
	width: 80%;
}

.caroussel {
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
	gap: 50px 10px;
}

/***************Carte***************/

.card {
	color: var(--blanc);
	padding: 10rem 0 0;
	max-width: 30ch;
	height: 17em;
	border-radius: 1rem;
	overflow: hidden;
	transition: all .5s ease;
	box-shadow: hsla(240, 30%, 28%, 0.25) 0px 30px 60px -12px,
				hsla(0, 0%, 0%, 0.3) 0px 18px 36px -18px;
}

#Atouts .caroussel .card:nth-child(1) {
	background: url(../Images/maquette.jpg) no-repeat 25%;
	background-size: cover;
}
#Atouts .caroussel .card:nth-child(2) {
	background: url(../Images/dev_logiciel.jpg);
	background-size: cover;
}
#Atouts .caroussel .card:nth-child(3) {
	background: url(../Images/polyvalence.jpg);
	background-size: cover;
}
#Atouts .caroussel .card:nth-child(4) {
	background: url(../Images/administration.jpg);
	background-size: cover;
}

.card:hover {
	transform: scale(1.1);
}

/***************Contenu des cartes***************/

.card-content {
	--padding: 3.5rem;
	display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
	padding: var(--padding);
	background: linear-gradient(
		hsla(0, 0%, 0%, 0) 0%,
		hsl(20, 0%, 0%, .3) 20%,
		hsl(0, 0%, 0%, 1) 100%
	);
	transform: translateY(45%);
	transition: all .5s ease;
	height: 17em;
	font-size: .8em;
}

.card:hover .card-content {
	transform: translateY(-10%);
	transition-delay: .5s;
}

.card-content > *:not(.card-title) {
	opacity: 0;
	transition: all .5s ease;
}

.card:hover .card-content > *:not(.card-title) {
	opacity: 1;
	transition-delay: .5s;
}

/***************Titre des cartes***************/

.card-title {
	position: relative;
	width: max-content;
}

.card-title::after {
	content: "";
	position: absolute;
	height: 4px;
	left: calc(var(--padding) * -1);
	top: 100%;
	width: calc(100% + var(--padding));
	background: var(--rouge);
	transform: scaleX(0);
	transform-origin: left;
	transition: all .5s ease;
}

.card:hover .card-title::after {
	transform: scaleX(1);
}

.card-body {
	color: hsl(0, 0%, 100%);
}

/***************Bouton des cartes***************/

.button {
	cursor: pointer;
	display: inline;
	text-decoration: none;
	color: var(--noir);
	background-color: var(--rouge);
	padding: 0.5em 1.25em;
	border-radius: 0.25em;
}

.button:hover,
.button:focus {
	background-color: var(--blanc);
}

/***************Media queries***************/

@media (orientation : portrait), (max-width: 1050px) {
	#BUT > div {
		margin: calc(var(--header) + 10vh) 0 10vh;
	}
	
	main section + section {
		padding: 3vh 0;
	}

	#Matières .wrapper{
		flex-direction: column;
	}

	#Matières .conteneur{
		width: 90%;
		height: min(20em,80%);
	}
}

@media (max-width: 560px){
	#BUT h3{
		display: none;
	}

	main .caroussel .card-title{
		font-size: 1.2em;
	}

	.conteneur{
		left: 0;
		top: 0;
		margin: 0;
		width: 80%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap:10px;
	}
	.conteneur .matiere {
		position: static;
	}
}