:root {
	--main-color: #fff;
	--secondary-color: #a29bfe;
	font-family: "telma", sans-serif;
}

html {
	background-color: #000;
	color: var(--main-color);
	text-align: center;
}

.header-title {
	font-weight: bold;
	font-size: 2rem;
	display: flex;
	justify-content: center;
	margin-top: 3rem;
}

.header__menu {
	display: flex;
	visibility: collapse;
	height: 0px;
}

.header-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: url("../ressources/images/hero-banner.png") center / cover
		no-repeat;
	border: 1px solid black;
	border-radius: 20px;
	margin-top: 3rem;
	margin-left: 1rem;
	margin-right: 1rem;
	height: 100vh;
}

.header-container__titre {
	font-size: 2.3rem;
	font-weight: bold;
	margin-bottom: 2rem;
	text-shadow: 1px 1px 2px black;
}

.header-container__para {
	padding: 1.5rem;
	font-size: 1.1rem;
	font-weight: bolder;
	text-align: center;
	line-height: 1.7;
	text-shadow: 1px 1px 2px black;
}

.services {
	display: flex;
	flex-direction: column;
}

.services-title,
.heros-title {
	font-weight: bold;
	font-size: 1.5rem;
	display: flex;
	justify-content: center;
	margin-top: 4.5rem;
	margin-bottom: 1.5rem;
}

.supers {
	color: var(--secondary-color);
	margin-left: 1rem;
	margin-right: 1rem;
	margin-bottom: 1.5rem;
}

.services__articles {
	display: flex;
	border: 1px solid var(--secondary-color);
	border-radius: 20px;
	margin-left: 1rem;
	margin-right: 1rem;
	margin-bottom: 1rem;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.service__title {
	color: var(--secondary-color);
	font-weight: bold;
	font-size: 1.6rem;
	margin-top: 1.7rem;
	margin-bottom: 1rem;
}

.service__para {
	text-transform: uppercase;
	text-align: center;
	margin-bottom: 2rem;
	margin-left: 1rem;
	margin-right: 1rem;
	line-height: 23px;
}

.service__button-heros {
	display: block;
	margin-left: 5rem;
	margin-right: 5rem;
}

.service__button {
	background-color: var(--secondary-color);
	color: var(--main-color);
	font-weight: bold;
	font-size: 1.2rem;
	padding: 0.8rem;
	border-radius: 20px;
	letter-spacing: 0.2rem;
}

.service__notes {
	margin-top: 3.5rem;
	margin-bottom: 1rem;
	font-style: italic;
	font-size: 0.8rem;
	line-height: 1.3rem;
	padding: 2rem;
	text-align: center;
}

.heros {
	display: grid;
	grid-template-columns: 1fr;
}

.heros__container-cat {
	display: flex;
	height: 35vh;
	background: url("../ressources/images/catastrophic.png") center / cover
		no-repeat;
	border-radius: 20px;
	margin-left: 1rem;
	margin-right: 1rem;
	margin-bottom: 1rem;
}

.heros__container-carotte {
	display: flex;
	height: 35vh;
	background: url("../ressources/images/carotte-woman.png") center / cover
		no-repeat;
	border-radius: 20px;
	margin-left: 1rem;
	margin-right: 1rem;
	margin-bottom: 1rem;
}

.heros__container-ultraquenarde {
	display: flex;
	height: 35vh;
	background: url("../ressources/images/ultraquenarde.png") center / cover
		no-repeat;
	border-radius: 20px;
	margin-left: 1rem;
	margin-right: 1rem;
	margin-bottom: 1rem;
}

.heros__container-poulpy {
	display: flex;
	height: 35vh;
	background: url("../ressources/images/poulpy.png") center / cover no-repeat;
	border-radius: 20px;
	margin-left: 1rem;
	margin-right: 1rem;
	margin-bottom: 1rem;
}

.heros__container-orang {
	display: flex;
	height: 35vh;
	background: url("../ressources/images/oran-wu-tang-clan.png") center / cover
		no-repeat;
	border-radius: 20px;
	margin-left: 1rem;
	margin-right: 1rem;
	margin-bottom: 1rem;
}

.heros__container-superime {
	display: flex;
	height: 35vh;
	background: url("../ressources/images/superime.png") center / cover no-repeat;
	border-radius: 20px;
	margin-left: 1rem;
	margin-right: 1rem;
	margin-bottom: 1rem;
}

.heros__presentation {
	background-size: 100%;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.heros__nom {
	font-weight: bold;
	font-size: 1.8rem;
	background-color: #0000006e;
	width: 100%;
	text-align: center;
	padding-top: 1.5rem;
	box-sizing: border-box;
}

.heros__para {
	font-weight: normal;
	font-size: 1rem;
	text-align: center;
	width: 100%;
	margin-top: 0rem;
	word-spacing: 0.25rem;
	line-height: 2rem;
	padding-top: 2rem;
	padding-bottom: 1rem;
	box-sizing: border-box;
}

.heros__cat-text-bonus {
	visibility: hidden;
	font-style: italic;
	font-size: 1rem;
	background-color: #8982ec8a;
	width: 100%;
	text-align: center;
	line-height: 1.3rem;
	padding: 1rem;
	border-radius: 20px 20px 0px 0px;
	box-sizing: border-box;
}

.heros__container-cat:hover {
	.heros__cat-text-bonus {
		visibility: visible;
		animation: param 1s linear;
	}
}

@keyframes param {
	0% {
		transform: translate(0, -100%);
	}
	100% {
		transform: translate(0, 0%);
	}
}

.heros__carotte-text-bonus {
	visibility: hidden;
	font-style: italic;
	font-size: 1rem;
	background-color: #8982ec8a;
	width: 100%;
	text-align: center;
	line-height: 1.3rem;
	padding: 1rem;
	border-radius: 20px 20px 0px 0px;
	box-sizing: border-box;
}

.heros__container-carotte:hover {
	.heros__carotte-text-bonus {
		visibility: visible;
		animation: param 1s linear;
	}
}

.heros__ultraquenarde-text-bonus {
	visibility: hidden;
	font-style: italic;
	font-size: 1rem;
	background-color: #8982ec8a;
	width: 100%;
	text-align: center;
	line-height: 1.3rem;
	padding: 1rem;
	border-radius: 20px 20px 0px 0px;
	box-sizing: border-box;
}

.heros__container-ultraquenarde:hover {
	.heros__ultraquenarde-text-bonus {
		visibility: visible;
		animation: param 1s linear;
	}
}

.heros__poulpy-text-bonus {
	visibility: hidden;
	font-style: italic;
	font-size: 1rem;
	background-color: #8982ec8a;
	width: 100%;
	text-align: center;
	line-height: 1.3rem;
	padding: 1rem;
	border-radius: 20px 20px 0px 0px;
	box-sizing: border-box;
}

.heros__container-poulpy:hover {
	.heros__poulpy-text-bonus {
		visibility: visible;
		animation: param 1s linear;
	}
}

.heros__orang-text-bonus {
	visibility: hidden;
	font-style: italic;
	font-size: 1rem;
	background-color: #8982ec8a;
	width: 100%;
	text-align: center;
	line-height: 1.3rem;
	padding: 1rem;
	border-radius: 20px 20px 0px 0px;
	box-sizing: border-box;
}

.heros__container-orang:hover {
	.heros__orang-text-bonus {
		visibility: visible;
		animation: param 1s linear;
	}
}

.heros__superime-text-bonus {
	visibility: hidden;
	font-style: italic;
	font-size: 1rem;
	background-color: #8982ec8a;
	width: 100%;
	text-align: center;
	line-height: 1.3rem;
	padding: 1rem;
	border-radius: 20px 20px 0px 0px;
	box-sizing: border-box;
}

.heros__container-superime:hover {
	.heros__superime-text-bonus {
		visibility: visible;
		animation: param 1s linear;
	}
}

.service__button-heros {
	text-decoration: none;
	text-transform: uppercase;
	background-color: var(--secondary-color);
	color: var(--main-color);
	font-weight: bold;
	font-size: 1.2rem;
	margin-top: 2rem;
	margin-bottom: 4rem;
	padding: 0.8rem;
	border-radius: 20px;
}

.temoignages {
	font-weight: bold;
	font-size: 2rem;
	line-height: 3rem;
	margin-bottom: 2rem;
}

.box-image-tombedeu {
	height: 22rem;
	border-radius: 20px 20px 50% 50%;
	border: var(--secondary-color) 10px solid;
	background: url(../ressources/images/testimony-1.png) center / cover no-repeat;
	background-color: var(--secondary-color);
}

.box-image-jella {
	height: 22rem;
	border-radius: 20px 20px 50% 50%;
	border: var(--secondary-color) 10px solid;
	background: url(../ressources/images/testimony-2.png) center / cover no-repeat;
	background-color: var(--secondary-color);
}

.box-image-bob {
	height: 22rem;
	border-radius: 20px 20px 50% 50%;
	border: var(--secondary-color) 10px solid;
	background: url(../ressources/images/testimony-3.png) center / cover no-repeat;
	background-color: var(--secondary-color);
}

.box-image-coupehala {
	height: 22rem;
	border-radius: 20px 20px 50% 50%;
	border: var(--secondary-color) 10px solid;
	background: url(../ressources/images/testimony-4.png) center / cover no-repeat;
	background-color: var(--secondary-color);
}

.temoignage__perso {
	background-color: #8982ec;
	margin-left: 1rem;
	margin-right: 1rem;
	border-radius: 20px;
}

.temoignage__nom {
	font-size: 1.5rem;
	font-weight: bold;
	margin-top: 2.5rem;
	margin-bottom: 1.5rem;
}

.temoignage__para {
	line-height: 30px;
	font-style: italic;
	font-size: 0.9rem;
	margin-left: 1rem;
	margin-right: 1rem;
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	word-spacing: 0.1rem;
}

.save-me {
	font-weight: bold;
	font-size: 2rem;
	line-height: 3rem;
	margin-top: 4rem;
	margin-bottom: 2rem;
}

.form__titre {
	font-weight: bold;
	font-size: 1.2rem;
}

.champ {
	padding: 10px;
	width: 80%;
	color: #fff;
	height: 2rem;
	background-color: rgb(94, 94, 94);
	border-radius: 20px;
	margin-top: 1rem;
	margin-bottom: 1.5rem;
	font-size: 1.2rem;
}

input:focus {
	outline: #8982ec 2px solid;
}

input::placeholder {
	font-style: italic;
	color: #a3a3a3;
}

.form__nom-service {
	color: #fff;
	padding: 10px;
	width: 85%;
	height: 3.4rem;
	background-color: rgb(94, 94, 94);
	border-radius: 20px;
	margin-top: 1rem;
	margin-bottom: 1.5rem;
	font-size: 1.2rem;
}

.form__nom-service:focus {
	outline: #8982ec 2px solid;
}

.form__message {
	color: #fff;
	padding: 10px;
	width: 80%;
	height: 15rem;
	background-color: rgb(94, 94, 94);
	border-radius: 20px;
	margin-top: 1rem;
	margin-bottom: 1.5rem;
	font-size: 1.2rem;
}

.form__message:focus {
	outline: #8982ec 2px solid;
}

.envoyer {
	background-color: var(--secondary-color);
	color: var(--main-color);
	font-weight: bold;
	font-size: 1.2rem;
	margin-top: 2rem;
	margin-bottom: 6rem;
	padding: 0.8rem;
	border-radius: 20px;
	text-transform: uppercase;
}

footer {
	border-top-left-radius: 8rem 2rem;
	border-top-right-radius: 17rem 3rem;
	background-color: #8982ec;
}

.footer__menu {
	display: flex;
	flex-direction: column;
	padding: 1px;
	margin-top: 1.5rem;
	margin-left: 1.2rem;
	margin-right: 1.2rem;
}

.footer-lien__heros {
	padding-top: 3rem;
	font-size: 2rem;
	font-weight: bold;
	margin-top: 2.5rem;
	margin-bottom: 2rem;
}

.footer-lien {
	line-height: 2.3rem;
	text-decoration: none;
	color: #fff;
}

.lien-services:hover,
.lien-heros:hover,
.lien-temoignages:hover,
.lien-save-me:hover {
	font-weight: bold;
}

.footer-copyright {
	margin-top: 5rem;
	padding-bottom: 2.5rem;
}

@media screen and (min-width: 501px) and (max-width: 900px) {
	.header-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: url("../ressources/images/hero-banner.png") center / cover
			no-repeat;
		border: 1px solid black;
		border-radius: 20px;
		margin-top: 1.5rem;
		margin-left: 3rem;
		margin-right: 3rem;
		height: 70vh;
	}

	.header-title {
		font-weight: bold;
		font-size: 2rem;
		display: flex;
		justify-content: center;
		margin-top: 2rem;
	}

	.header-container__titre {
		font-size: 3.2rem;
		font-weight: bold;
		margin-bottom: 2rem;
	}

	.header__menu {
		justify-content: center;
		margin-bottom: 6rem;
	}

	.li__header {
		visibility: visible;
		display: inline-block;
		padding: 1px;
		margin-top: 1.5rem;
		margin-left: 1.2rem;
		margin-right: 1.2rem;
	}

	.lien-header-services:hover,
	.lien-header-services:hover,
	.lien-header-temoignages:hover,
	.lien-header-save-me:hover {
		font-weight: bold;
		color: var(--secondary-color);
	}

	.heros-title {
		margin-top: 1rem;
	}

	.services-title {
		margin-bottom: 2.5rem;
	}

	.services {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr;
		gap: 0px;
		height: 100%;
		width: 100%;
		padding-bottom: rem;
	}

	.services__articles {
		margin-left: 1rem;
		margin-right: 1rem;
	}

	.service__notes {
		margin-top: 1rem;
		margin-bottom: 1rem;
	}

	.service-container-demenagement {
		grid-column-start: 1;
		grid-column-end: 2;
		grid-row-start: 1;
		grid-row-end: 2;
		display: flex;
	}

	.service-container-livraison {
		grid-column-start: 2;
		grid-column-end: 3;
		grid-row-start: 1;
		grid-row-end: 2;
		display: flex;
	}

	.service-container-bouchon {
		grid-column-start: 1;
		grid-column-end: 2;
		grid-row-start: 2;
		grid-row-end: 3;
		display: flex;
	}

	.service-container-sauvetage {
		grid-column-start: 2;
		grid-column-end: 3;
		grid-row-start: 2;
		grid-row-end: 3;
		display: flex;
	}

	.service-container-moral {
		grid-column-start: 1;
		grid-column-end: 3;
		grid-row-start: 3;
		grid-row-end: 4;
		display: flex;
	}

	.heros-title {
		content: "-";
		font-size: 2rem;
		margin-top: 0.1rem;
		margin-bottom: 4rem;
	}

	h2 {
		background: rgba(0, 0, 0, 0.8);
		color: white;
		padding: -50px;
		overflow: hidden;
		font-size: 26px;
	}
	h2:before,
	h2:after {
		content: "";
		width: 0.5em;
		border-bottom: var(--secondary-color) solid;
		display: inline-block;
		vertical-align: middle;
	}
	h2:before {
		align-self: start;
		padding-top: 15px;
		margin-left: -100%;
		margin-right: 1em;
	}
	h2:after {
		align-self: start;
		padding-top: 15px;
		margin-right: -100%;
		margin-left: 1em;
	}
	.heros {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr;
		gap: 0.5rem;
		height: 80%;
		width: 100%;
		padding-bottom: 1rem;
	}

	.heros__container-cat,
	.heros__container-carotte,
	.heros__container-ultraquenarde,
	.heros__container-poulpy,
	.heros__container-orang,
	.heros__container-superime {
		height: 30vh;
	}

	.service__button-heros {
		background-color: var(--secondary-color);
		color: var(--main-color);
		font-weight: bold;
		font-size: 1.2rem;
		margin-top: 2rem;
		margin-bottom: 4rem;
		padding: 0.8rem;
		border-radius: 20px;
		width: 190px;
		display: inline-block;
	}

	.temoignage__containers {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		gap: 0.5rem;
		height: 80%;
		width: 100%;
	}

	.box-image-tombedeu {
		height: 22rem;
		border-radius: 50% 50%;
		border: var(--secondary-color) 10px solid;
		background: url(../ressources/images/testimony-1.png) center / cover
			no-repeat;
		background-color: var(--secondary-color);
	}

	.box-image-jella {
		height: 22rem;
		border-radius: 50% 50%;
		border: var(--secondary-color) 10px solid;
		background: url(../ressources/images/testimony-2.png) center / cover
			no-repeat;
		background-color: var(--secondary-color);
	}

	.box-image-bob {
		height: 22rem;
		border-radius: 50% 50%;
		border: var(--secondary-color) 10px solid;
		background: url(../ressources/images/testimony-3.png) center / cover
			no-repeat;
		background-color: var(--secondary-color);
	}

	.box-image-coupehala {
		height: 22rem;
		border-radius: 50% 50%;
		border: var(--secondary-color) 10px solid;
		background: url(../ressources/images/testimony-4.png) center / cover
			no-repeat;
		background-color: var(--secondary-color);
	}

	.temoignage__perso {
		background-color: #8982ec;
		margin-left: 1rem;
		margin-right: 1rem;
		border-radius: 20px;
		border-top-left-radius: 12rem;
		border-top-right-radius: 12rem;
	}

	.form__message {
		color: #fff;
		padding: 10px;
		width: 83%;
		height: 15rem;
		background-color: rgb(94, 94, 94);
		border-radius: 20px;
		margin-top: 1rem;
		margin-bottom: 1.5rem;
		font-size: 1.2rem;
	}

	.envoyer {
		background-color: var(--secondary-color);
		color: var(--main-color);
		font-weight: bold;
		font-size: 1.2rem;
		margin-top: 2rem;
		margin-bottom: 6rem;
		padding: 0.8rem;
		padding-left: 1.5rem;
		padding-right: 1.5rem;
		border-radius: 20px;
		text-transform: uppercase;
		display: flex;
	}

	.formulaire {
		text-align: -webkit-center;
	}

	footer {
		border-top-left-radius: 15rem 2rem;
		border-top-right-radius: 15rem 2rem;
		background-color: #8982ec;
	}
}

@media screen and (min-width: 901px) and (max-width: 2700px) {
	.header__menu-container {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.header-title {
		visibility: visible;
		font-weight: bold;
		font-size: 2rem;
		display: flex;
		justify-content: start;
		margin-top: 1rem;
		margin-left: 2rem;
	}

	.header__menu {
		visibility: visible;
		justify-content: end;
		margin-right: 2rem;
		display: inline-block;
	}

	ul {
		display: flex;
		column-gap: 2rem;
		margin-top: 1rem;
	}

	.header-container {
		margin-top: 2rem;
	}

	.lien-header-services:hover,
	.lien-header-nos-heros:hover,
	.lien-header-temoignages:hover,
	.lien-header-save-me:hover {
		font-weight: bold;
		color: var(--secondary-color);
		font-size: 0.92rem;
	}

	.services {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto auto auto;
		gap: 0.5rem;

		width: 100%; /* prend toute la largeur du parent */
		max-width: 1600px; /* optionnel : limite pour grands écrans */
		margin: 0 auto; /* centre la grille si max-width est utilisé */

		justify-items: stretch; /* chaque item prend toute la largeur de sa cellule */
		align-items: stretch; /* chaque item prend toute la hauteur de sa cellule */
	}

	.service-container-demenagement {
		grid-column-start: 1;
		grid-column-end: 2;
		grid-row-start: 1;
		grid-row-end: 3;
		display: flex;
	}

	.service-container-livraison {
		grid-column-start: 2;
		grid-column-end: 4;
		grid-row-start: 1;
		grid-row-end: 2;
		display: flex;
	}

	.service-container-bouchon {
		grid-column-start: 2;
		grid-column-end: 3;
		grid-row-start: 2;
		grid-row-end: 3;
		display: flex;
	}

	.service-container-sauvetage {
		grid-column-start: 3;
		grid-column-end: 4;
		grid-row-start: 2;
		grid-row-end: 4;
		display: flex;
	}

	.service-container-moral {
		grid-column-start: 1;
		grid-column-end: 3;
		grid-row-start: 3;
		grid-row-end: 4;
		display: flex;
	}

	.heros {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr;
	}

	.service__button-heros {
		background-color: var(--secondary-color);
		color: var(--main-color);
		font-weight: bold;
		font-size: 1.2rem;
		margin-top: 2rem;
		margin-bottom: 4rem;
		padding: 0.8rem;
		border-radius: 20px;
		width: 180px;
		display: inline-block;
	}

	.temoignage__containers {
		margin-top: 7rem;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		height: 80%;
		width: 100%;
	}

	.box-image-tombedeu {
		margin-top: -4rem;
		height: 30rem;
		border-radius: 50% 50%;
		border: var(--secondary-color) 10px solid;
		background: url(../ressources/images/testimony-1.png) center / cover
			no-repeat;
		background-color: var(--secondary-color);
	}

	.box-image-jella {
		margin-top: -4rem;
		height: 30rem;
		border-radius: 50% 50%;
		border: var(--secondary-color) 10px solid;
		background: url(../ressources/images/testimony-2.png) center / cover
			no-repeat;
		background-color: var(--secondary-color);
	}

	.box-image-bob {
		margin-top: -4rem;
		height: 30rem;
		border-radius: 50% 50%;
		border: var(--secondary-color) 10px solid;
		background: url(../ressources/images/testimony-3.png) center / cover
			no-repeat;
		background-color: var(--secondary-color);
	}

	.box-image-coupehala {
		margin-top: -4rem;
		height: 30rem;
		border-radius: 50% 50%;
		border: var(--secondary-color) 10px solid;
		background: url(../ressources/images/testimony-4.png) center / cover
			no-repeat;
		background-color: var(--secondary-color);
	}

	.temoignage__perso {
		background-color: #8982ec;
		margin-left: 1rem;
		margin-right: 1rem;
		border-radius: 20px;
		border-top-left-radius: 12rem;
		border-top-right-radius: 12rem;
	}

	.form__message {
		color: #fff;
		padding: 10px;
		width: 83%;
		height: 15rem;
		background-color: rgb(94, 94, 94);
		border-radius: 20px;
		margin-top: 1rem;
		margin-bottom: 1.5rem;
		font-size: 1.2rem;
	}

	.champ {
		width: 50%;
	}

	.form__nom-service {
		width: 52%;
	}

	.form__message {
		width: 52%;
	}

	.footer__menu {
		display: flex;
		flex-direction: row;
		padding: 1px;
		margin-top: 1.5rem;
		margin-left: 1.2rem;
		margin-right: 1.2rem;
		justify-content: center;
	}
}