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

#formule {
	margin-top: 67px;
	margin-bottom: 41px;
}

#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;
}

#main {
	padding: 5% 10%;
}

#main-cta {
	background: linear-gradient(258deg, #0B4D5F -15.63%, #238F7F 85.9%);
	position: relative;
	padding: 2% 7.1%;
	gap: 20px;
	margin-bottom: 2%;
}

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

#planete-action-internationale {
	position: absolute;
	left: 5%;
	top: 20%;
	width: 370px;
}

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

#title-outline {
	position: relative;
	width: 77%;
	margin: 0 auto;
	top: -41px;
}

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

.item-group-main-cta:nth-child(2) > img{
	width: 60px;
}

.item-group-main-cta > img {
	width: 80px;
	margin: 0 auto;
	filter: invert(100%) sepia(8%) saturate(0%) hue-rotate(61deg) brightness(106%) contrast(109%);
}

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

.title-categorie > h2 {
	margin-bottom: 0;
}

#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);
}

#details-CP {
	justify-content: space-evenly;
	padding: 2%;
	gap: 20px;
}

.item-details-CP > img {
	filter: invert(46%) sepia(48%) saturate(590%) hue-rotate(122deg) brightness(92%) contrast(90%);
}

.item-details-CP > p {
	margin-bottom: 0;
}

.item-details-CP {
	align-items: center;
	gap: 25px;
}

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

#grid-inclus .carte-inclus:nth-child(1),
#grid-inclus .carte-inclus:nth-child(2),
#grid-inclus .carte-inclus:nth-child(3)  {
	grid-column: span 2;
}


#grid-inclus .carte-inclus:nth-child(4),
#grid-inclus .carte-inclus:nth-child(5) {
	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%;
}
.carte-inclus > img {
	width: 70px;
}

.carte-inclus.carte_blanche > img {
	filter: invert(46%) sepia(48%) saturate(590%) hue-rotate(122deg) brightness(92%) contrast(90%);
}

.carte-inclus.carte_turquoise > img {
	filter: invert(1);
}

.carte-inclus:first-child > a {
	padding: 1% 10%;
}

#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%;
	margin-top: 20px;
}
#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 {
	gap: 20px;
}

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

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

#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;
}

#div-pays {
	gap: 250px;
}

#div-pays > ul > li {
	color: var(--couleur-turquoise);
	font-size: 1em;
	font-weight: 400;
}

#demande-pays {
	margin-top: 10px;
	margin-bottom: 40px;
}