@import "/composants/style/base.css";

#formule {
	margin-top: 40px;
	margin-bottom: 80px;
}

#conditions {
	margin-top: 20px;
}

#content {
	width: auto;
	padding: 0;
}

a.link.texte_blanc:visited, a.link.texte_blanc:link, a.link.texte_blanc:active, a.link.texte_blanc {
	color: var(--couleur-blanc) !important;
}
a.link.texte_bleu:visited, a.link.texte_bleu,a.link.texte_bleu:active, a.link.texte_bleu:link {
	color: var(--couleur-bleu) !important;
}

#bandeau-info {
	background: var(--Linear, linear-gradient(90deg, #0B4D5F 9.06%, #238F7F 83.82%));
	position: relative;
	justify-content: center;
	width: 100%;
	position: relative;
	top: -7px;
}

#content-info {
	margin: 0 auto;
	align-items: center;
	position: relative;
}

#text-content-info {
	justify-content: space-evenly;
	height: 100%;
}

#text-content-info > .texte_jaune {
	font-size: 0.75em;
}

#text-content-info > a {
	padding: 2%;
	background: linear-gradient(180deg, #0B4D5F 0%, #094657 100%);
	box-shadow: 0px 4px 4px 0px rgba(11, 77, 95, 0.25);
	border-radius: 20px;
}

#media-gauche, #media-droite{
	position: absolute;
	z-index: 1;
}

#elise, #oceane {
	position: absolute;
	z-index: 2;
}

#mathilde {
	position: relative;
	left: -5%;
}

#celine {
	position: relative;
	right: -5%;
}

#elise {
	left: -15%;
	top: -4px;
}

#oceane {
	right: -15%;
	top: -8px;
}

#media-gauche {
	left: 10%;
}
#media-droite {
	right: 10%;
}

#main {
	padding: 5% 10%;
	margin-bottom: 250px;
}

#main-cta {
	background: linear-gradient(180deg, #061A20 0%, #08262E 100%);
	position: relative;
	padding: 2% 14%;
	gap: 20px;
	margin-bottom: 2%;
}

#main-cta > .carte_jaune {
	width: fit-content;
	border-radius: 20px;
	padding: 10px 5%;
	margin: 0 auto;
}

#title-full {
	font-size: 5em;
	position: relative;
	top: 55px;
}

#title-outline {
	position: relative;
	width: 96%;
	margin: 0 auto;
}

#bottom-main-cta {
	justify-content: space-evenly;
	align-items: center;
}
.item-group-main-cta {
	gap: 20px;
	width: 28%;
}

.item-group-main-cta:first-child > img{
	width: 60px;
}

.item-group-main-cta > img {
	width: 80px;
	margin: 0 auto;
	filter: invert(68%) sepia(92%) saturate(471%) hue-rotate(4deg) brightness(97%) contrast(87%);
}

#no-filter {
	filter: none
}

.title-categorie {
	margin: 2% 0;
	margin-top: 100px;
}

#accompagnement-personnalise {
	padding: 2% 5%;
	gap: 100px;
}

#accompagnement-personnalise > .flex_colonne {
	gap: 20px;
}

#tarif-container {
	justify-content: space-evenly;
	margin-bottom: 4%;
}

.item-tarif {
	align-items: center;
	gap: 20px;
	width: 100%;
	padding: 2% 0;
}

.nb-campagne {
	border-radius: 100px;
	padding: 1% 10%;
}

.title-tarif {
	gap: 20px;
}

.texte-promo {
	border-radius: 12px;
	padding: 3%;
	white-space: nowrap;
	align-items: center;
}

.tarif-prix {
	font-size: 3.125em;
}

.tarif-boutons-div {
	width: 100%;
	gap: 10px;
	align-items: center;
}

.bouton-commander {
	padding: 1%;
	width: fit-content;
	width: 286px;
}

#main-tarif {
	background: var(--Linear, linear-gradient(288deg, #02404F 5.2%, #061E24 94.33%));
	border-radius: 10px;
	box-shadow: 0px 4px 15px 0px rgba(184, 184, 184, 0.20);
	transform: scale(1.1);
}

#grid-inclus {
	display: grid;
	grid-template-columns: repeat(6 auto);
	column-gap: 20px;
	row-gap: 20px;
}

#full-row {
	grid-column: span 6;
	padding: 2%;
}

.carte-inclus.half-row {
	grid-column: span 3;
}

.carte-inclus {
	box-shadow: 0px 4px 15px 0px rgba(184, 184, 184, 0.20);
	align-items: center;
	gap: 20px;
	padding: 5%;
	grid-column: span 2;
}

.carte-inclus > img {
	width: 70px;
	filter: invert(68%) sepia(92%) saturate(471%) hue-rotate(4deg) brightness(97%) contrast(87%);
}

.carte-inclus > a , .carte-inclus > .border_jaune{
	padding: 1% 5%;
}

.carte-inclus > .border_jaune {
	border-radius: 80px;
}

#references-client > img {
	width: 100%;
}

#references-client > a, #exemple-mis-en-page > a, #bottom-cta-bottom > a {
	padding: .5% 5%;
}

#references-client {
	align-items: center;
	margin-bottom: 4%;
}

#exemple-mis-en-page {
	align-items: center;
	gap: 20px;
	margin-bottom: 5%;
}
#exemple-mis-en-page > div {
	gap: 50px;
}

#bottom-cta {
	padding: 0 5%;
	gap: 100px;
}

#bottom-cta-right {
	padding: 2%;
	gap: 20px;
	width: 55%;
}

#bottom-cta-right > div{
	width: 110%;
}

#bottom-cta-bottom > a {
    display: flex;
    align-items: center;
    height: 30px;
}

#bottom-cta-bottom {
	gap: 20px;
}

#bottom-cta-bottom > div > img {
	width: 26px;
	filter: invert(1);
}

#bottom-cta-bottom > div {
	align-items: center;
	gap: 10px;
}

#bottom-cta-bottom > div > p {
	margin-bottom: 0;
}

p.texte_blanc,
p.texte_bleu {
	margin-bottom: 0;
}

h1#title-outline,
h1#title-full {
	margin-bottom: 0;
}

.moitie {
	grid-column: span 3;
}

#inter {
	margin-top: 50px;
}

#inter > img {
	filter: invert(1);
	width: 70px;
}

#inter > a {
	padding: 10px 50px;
}