/* Global */

* {
	/* font-family: "League Spartan", sans-serif; */
	font-family: "Quicksand", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-weight: 300;
}

html {
	scroll-behavior: smooth;
	font-size: 16px;
	line-height: 30px
}

.section-title {
	font-family: "League Spartan", serif;
	font-size: 2.8rem;
	font-weight: 400;
	margin-top: 0;
	line-height: 3.4375rem;
}

.btn-filled {
	display: inline-block;
	background-color: black;
	color: #fff;
	padding: 10px 19px;
	border-radius: 6px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.4s ease;
	border: 1px solid transparent;
	text-decoration: none;
}

.btn-filled:hover {
	background-color: rgb(153, 110, 0);
	border: 1px solid black;
	color: black;
}

.btn-outline {
	padding: 13px 33px;
	cursor: pointer;
	background-color: #fff;
	border: none;
	border-radius: 6px;
	font-weight: 600;
	transition: background-color 0.4s ease;
	text-decoration: none;
	color: black;
}

.btn-outline:hover {
	background-color: rgba(255, 255, 255, 0.7);
}

.bold-content {
	font-weight: 600!important;
}

.wrapper--narrow {
	width: 76%;
	margin: auto;
}

.wrapper--padded {
	padding: 120px 0;
}

.header__secondary {
	background-color: rgb(255, 215, 239);
    text-align: center;
    padding: 100px 0 50px 0;
}

.header__secondary-title {
	font-size: 2.7rem;
    margin: 0;
	font-weight: 700;
}

.fade-up {
	opacity: 0;
	transform: translateY(50px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-up.visible {
	opacity: 1;
	transform: translateY(0); /* L'élément se déplace à sa position d'origine */
}


/* Header */

header {
	display: flex;
	align-items: center;
	height: 126px;
	justify-content: space-between;
	width: 76%;
	margin: auto;
}

header .logo img {
	width: 220px;
}

nav ul {
	display: flex;
	align-items: center;
}

nav ul li {
	list-style-type: none;
}

nav ul li a {
	text-decoration: none;
	color: rgb(0, 0, 0);
	margin: 0 21px;
	transition: color 0.3s ease;
	white-space: nowrap;
}

nav ul li a:hover {
	color: rgb(110, 110, 110); 
}

nav ul li.contact-item a {
	background-color: rgb(255, 191, 35);
	padding: 7px 15px; 
	border: 1px solid black;
	border-radius: 6px;
	font-weight: 600;
	color: rgb(0, 0, 0);
	display: block;
	text-align: center;
	transition: background-color 0.3s ease, color 0.3s ease;
}

nav ul li.contact-item a:hover {
	background-color: rgba(255, 191, 35, 0.8);
}

nav ul li:last-child a {
  	margin-right: 0;
}


/* Banner */

.banner__wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 100px;
}

.banner__text {
	width: 47%;
	padding-bottom: 150px;
}

.banner__title {
	font-family: "League Spartan", serif;
	font-size: 3.2rem;
	font-weight: 300;
	line-height: 3.4375rem;
}

.banner__description {
	margin-bottom: 48px;
	font-size: 1.1rem;
	font-weight: 300;
}

.banner__btn {
	display: inline-block;
	background-color: #ff6666;
	color: white;
	padding: 10px 20px;
	text-decoration: none;
	font-weight: bold;
	border-radius: 5px;
}

.banner__icons {
	display: flex;
	margin-top: 80px;
}

.banner__icon-wrapper {
	display: flex;
	align-items: center;
	margin-right: 45px;
}

.banner__icon {
	width: 32px;
	padding-right: 13px;
}

.banner__icon-text {
	font-size: 0.9rem;
	min-width: 61px;
	line-height: 1.3;
}

.banner__images {
	position: relative;
	width: 50%;
}

.banner__image {
	width: 120%;
}

.banner__image--support {
	position: absolute;
	bottom: -70px;
	z-index: -1;
	opacity: 0.3;
	left: 13%;
	transform: translateX(-50%);
}

/* About */

.about {
	background-color: rgb(255, 191, 35);
}

.about__wrapper {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.about__left-text {
	width: 45%;
}

.about__right-text {
	width: 45%;
}

.bold-invisible {
	text-transform: uppercase;
	font-weight: bolder;
	font-size: 1.1rem;
}

/* Our offers */

.our-offers__cards-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 2.1875rem;
    margin-top: 90px;
}

.our-offers__card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
}
.our-offers__card-title,
.our-offers__card-tagline,
.our-offers__card-description {
    width: 100%;
    margin-bottom: 10px; 
}

.our-offers__header {
	width: 50%;
}

.our-offers__header p {
	font-size: 1.2rem;
}

.our-offers__header span {
	text-transform: uppercase;
	font-weight: bolder;
	font-size: 1.1rem;
	margin-right: 5px;
}

.our-offers__card-img img {
	border: 2px solid black;
	border-radius: 6px;
	font-weight: 600;
	width: 100%;
}

.our-offers__card-title {
	font-size: 1.5rem;
	font-weight: 600;
}

.our-offers__card-tagline {
	font-weight: 600;
}

/* Challenge Section */

.challenge__wrapper {
	width: 80%;
	display: flex;
	margin: auto;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 120px;
}

.challenge__images {
	width: 40%;
	position: relative;
}

.challenge__image {
	width: 100%;
}

.challenge__text {
	width: 40%;
}

.challenge__text span {
	font-weight: 100;
}

.challenge__images .challenge__image:nth-child(1) {
	position: absolute;
	top: -83px;
	left: 0;
	width: 45%;
	z-index: 0;
}

.challenge__images .challenge__image.main {
	z-index: 1;
	position: relative;
}

.challenge__images .challenge__image:nth-child(3) {
	position: absolute;
	bottom: -20px;
	right: 0;
	width: 35%;
	height: 127px;
	z-index: 0;
}

.challenge__images .challenge__image:nth-child(4) {
	position: absolute;
	bottom: -108px;
	right: 97px;
	width: 46%;
	height: 144px;
	z-index: 1;
}

/* Use Cases Section */

.use-cases {
	background-color: rgb(255, 215, 239);
}

.use-cases__wrapper {
	margin: auto;
	width: 85%;
}

.use-cases__header {
	text-align: center;
}

.use-cases__title {
	font-size: 2rem; 
}

.use-cases__item {
	flex: 1;
}

.use-cases__item-description h3 {
	font-size: 1.3rem;
	font-weight: 400;
}

.use-cases__content {
	display: grid;
  	grid-template-columns: repeat(4, 1fr);
  	gap: 50px; 
}

.use-cases__item-description p {
	margin-bottom: 0;
}

/* Pricing Section */

.pricing {
	background-color: rgba(232, 230, 230, 0.4);
}

.pricing__wrapper {
	margin: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.pricing__intro-left-text {
	width: 40%;
}

.pricing__content-wrapper {
	width: 45%;
	border: 2px solid black;
	border-radius: 6px;
}

.pricing__intro-left-text p:last-of-type {
	margin-bottom: 57px;
}

.pricing__summary {
	padding: 35px 30px;
	background-color: black;
	color: #fff;
}

.offer__summary h3 {
	font-size: 1.6rem;
	font-weight: 300;
}

.pricing__details {
	background-color: rgb(255, 215, 239);
	padding: 10px 32px;
}

.pricing__price-from {
	font-size: 0.8rem;
	padding-right: 5px;
}

.pricing__price {
	font-size: 2rem;
	font-weight: bolder;
	margin-bottom: 5px;
}

.pricing__title {
	font-size: 1.7rem;
    margin: 0;
    font-weight: 500;
    margin-bottom: 30px;
}

.pricing__price-euro {
	font-size: 1.2rem;
	font-weight: 100;
	position: relative;
	top: -19px;
}

.pricing__duration {
	margin-top: 0;
}

.pricing__tagline {
	font-size: 1rem;
    font-weight: 300;
}

.pricing__icon-feature {
	display: flex;
	align-items: center;
}

.pricing__icon-feature i {
	padding-right: 25px;
}

.pricing__contact-button {
	padding: 47px 0 57px 0;
	text-align: center;
}


/* Contact Us Section */

.contact-us__wrapper {
	text-align: center;
	padding: 120px 0 0 0;
}

.contact-us__content .contact-us__image {
	position: relative;
	bottom: -35px;
}

.contact-us__header {
	margin-bottom: 20px; 
}

.contact-us__title {
	margin-bottom: 20px; 
}


/* Footer */

footer {
	text-align: center;
	padding: 150px 0 20px 0;
	background-color: rgb(255, 191, 35);
}

footer a {
	color: black;
	text-decoration: none;
}

.footer__wrapper {
	width: 80%;
	margin: auto;
}

.footer__logo {
	text-align: center;
}

.footer__logo img {
	width: 250px;
}

.footer__content {
}

.footer__content-wrapper {
	display: flex;
    flex-direction: column;
    align-items: center;
}

.footer__content-wrapper p {
	text-align: start;
    margin: 10px 0 0 0;
}

.footer__title-header p {
	font-size: 1.2rem;
    font-weight: 400;
}

.footer__content-legals__links {
	display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer__content-legals__links a {
	text-align: left;
	margin-bottom: 25px;
}

.footer__title-follow-us {
	display: flex;
	flex-direction: column;
}

.footer__title-follow-us a {
	text-align: left;
	margin-bottom: 25px;
}

.footer__content-service__email {
	margin-top: 10px;
}

/* Offers Page */

.offers-page-header-wrapper {
	background-color: rgb(255, 215, 239); 
}

.offers__wrapper {
	display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 45px;
    padding: 85px 0;
    width: 83%;
    margin: auto;
}

.offer__description {
    background-color: rgb(255, 191, 35);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
	padding: 35px 30px;
}

.offer__title {
	font-size: 1.7rem;
    margin: 0;
    font-weight: 500;
    margin-bottom: 30px;
}

.offer__price {
	font-size: 1.2rem;
	font-weight: bold;
	margin-bottom: 10px;
}

.offer__period {
	font-style: italic;
	margin-bottom: 10px;
}

.offer__benefits {
	margin-bottom: 20px;
}

.offer__button {
	text-align: center;
	padding: 20px 0;
}

.offer__tag {
	margin-bottom: 10px;
}

.offer__benefits-content {
	padding: 35px 30px;
	border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
	background-color: rgb(255, 215, 239);
}

.offer__benefit {
	display: flex;
	align-items: center;
	margin: 5px 0;
}

.offer__benefit i {
	color: green; 
	margin-right: 25px;
}

/* Contact Us Page */

.contact-page-header-wrapper {
	background-color: rgb(255, 215, 239); 
}

.contact__wrapper {
	background-color: rgba(232, 230, 230, 0.4);
    padding: 85px;
    display: flex;
    justify-content: center;
}

.form__container {
	background-color: #fff;
	padding: 50px;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	width: 45%;
}

#contactForm {
	display: flex;
    flex-direction: column;
    align-items: center;

}

.form-group {
	margin-bottom: 40px;
	width: 100%;
}

form .btn-filled {
	width: 50%;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea {
	width: 100%;
    border: none;
    border-bottom: 1px solid #8080808a;
    transition: border-color 0.3s;
}

input,
textarea {
    padding: 10px 0; 
}

input:focus,
textarea:focus {
    outline: none;
    box-shadow: none;  
}

input::placeholder,
textarea::placeholder {
    color: #888; 
}

textarea {
    height: 150px; 
}

button {
	width: 100%;
	padding: 12px;
	background-color: black;
	color: #fff;
	border: none;
	border-radius: 4px;
	font-weight: bold;
	cursor: pointer;
	transition: background-color 0.3s;
}

/* Spinner */

#spinner-container {
    justify-content: center;
    align-items: center;
    height: 60px; 
	padding: 40px 0 20px 0;
}

.spinner {
    border: 4px solid #f3f3f3; 
    border-top: 4px solid rgba(255, 191, 35, 0.8); 
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Style du bouton désactivé */
button:disabled {
    background-color: #ddd;
    cursor: not-allowed;
}

/* Style du message de confirmation */
.confirmation-message {
    display: none;
    background-color: #dff0d8;
    padding: 10px;
    border: 1px solid #d0e9c6;
    color: #3c763d;
    margin-top: 20px;
}

/* Legal */

.legal__wrapper {
    padding: 40px 0;
    width: 83%;
    margin: auto;
}

.legal__wrapper h2 {
	font-size: 2.7rem;
}

.mentions-legales__article {
	margin-bottom: 60px;
}

/* RESPONSIVE */ 

/* Burger Button */

.burger {
	display: none;
	flex-direction: column;
	gap: 5px;
	border: none;
	background: none;
	cursor: pointer;
	z-index: 11;
}

.burger span {
	width: 30px;
	height: 3px;
	background-color: #000;
	border-radius: 2px;
	transition: all 0.3s ease;
}

/* Burger Animation */
.burger.open span:nth-child(1) {
	transform: rotate(45deg) translate(5px, 6px);
}

.burger.open span:nth-child(2) {
	opacity: 0; 
}

.burger.open span:nth-child(3) {
	transform: rotate(-45deg) translate(5px, -7px);
}

/* Mobile Menu */
.mobile-menu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.95);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	transform: translateY(-100%); 
	transition: transform 0.4s ease; 
	z-index: 10;
	overflow-y: auto; 
}

.mobile-menu ul {
	list-style-type: none;
	padding: 0;
	text-align: left;
}

.mobile-menu ul li {
	margin: 20px 0;
}

.mobile-menu ul li a {
	font-size: 24px;
	color: #000;
	text-decoration: none;
	transition: color 0.3s ease;
}

.mobile-menu ul li a:hover {
	color: rgb(110, 110, 110);
}

.mobile-menu.show {
	transform: translateY(0); 
}


@media (max-width: 992px) {

	/* Global */

	html {
		font-size: 15px;
	}

	/* Header */

	.burger {
		display: flex;
		width: fit-content;
		order: 2;
	}

	nav ul {
		display: none;
	}

	.logo {
		position: relative;
		top: 7px;
		left: -4px;
	}

	/* Banner */

	.banner__image--support {
		display: none;
	}
}


@media (max-width: 768px) {

	/* Global */

	.wrapper--narrow {
		width: 90%;
	}

	html {
		font-size: 14px;
	}

	.wrapper--padded {
		padding: 70px 0;
	}

	.fade-up {
		opacity: 1;
		transform: translateY(0); /* Pas de décalage en Y */
		transition: none; /* Pas d'animation */
  	}

	/* Header */

	.mobile-menu ul li a {
		font-size: 20px;
	}

	.logo {
		position: relative;
		top: 7px;
		padding: 0 12px;
	}

	nav ul {
		display: none;
	}

	header {
		width: 100%;
	}

	header .logo img {
		width: 210px;
	}

	/* Banner */

	.banner__wrapper {
		padding-top: 70px;
		flex-direction: column-reverse;
	}

	.banner__images {
		width: 100%;
	}

	.banner__image {
		width: 100%;
	}

	.banner__text {
		width: 100%;
		padding-bottom: 70px;
		display: inline-grid;
	}

	.banner__text .btn-filled {
		text-align: center;
	}

	.banner__image--support {
		display: none;
	}

	.banner__icons {
		flex-direction: column;
		margin-top: 40px;
	}

	/* About */

	.about__wrapper {
		flex-direction: column;
	}

	.about__left-text {
		width: 100%;
	}

	.about__right-text {
		width: 100%;
	}

	/* Our offers */

	.our-offers__cards-wrapper {
		grid-template-columns: repeat(1, 1fr);
	}

	.our-offers__header {
		width: 100%;
	}

	.our-offers__card {
		width: 100%;
	}

	.our-offers__card-img {
		text-align: center;
	}

	.our-offers__card-img img {
		width: 50%;
	}

	.our-offers__card-title, .our-offers__card-tagline, .our-offers__card-description {
		height: auto!important;
	}

	/* challenge */

	.challenge__wrapper {
		flex-direction: column;
		padding: 70px 0;
	}

	.challenge__images {
		width: 100%;
		margin-bottom: 70px;
	}

	.challenge__text {
		width: 100%;
	}

	/* Use cases */

	.use-cases__content {
		grid-template-columns: repeat(1, 1fr);
	}

	/* Pricing */

	.header__secondary-title {
    	line-height: 50px;
	}

	.pricing__wrapper {
		flex-direction: column;
	}

	.pricing__intro-left-text {
		width: 100%;
	}

	.pricing__intro-left-text {
		width: 100%;
		margin-bottom: 70px;
	}

	.pricing__content-wrapper {
		width: 100%
	}

	/* Footer */

	.footer__content {
		gap: 0;
		grid-template-columns: repeat(1, 1fr);
	}

	/* Contact page */

	.contact__wrapper {
		padding: 0;
	}

	/* Offers page */

	.offers__wrapper {
    	grid-template-columns: repeat(1, 1fr);
		padding: 50px 0;
    	width: 90%;
	}

	.form__container {
    	width: 100%;
		border-radius: 0;
		padding: 40px 25px
	}
}


@media only screen and (max-width: 992px) and (orientation: landscape) {

	/* Header */

	.burger {
		display: flex;
		width: fit-content;
		order: 2;
	}

	nav ul {
		display: none;
	}

	/* Offers */

	.our-offers__cards-wrapper {
    	gap: 1.5rem;
	}

	.our-offers__cards-wrapper {
    	grid-template-columns: repeat(3, 1fr); 
	}	

	/* Banner */

	.banner__image--support {
		display: none;
	}

	/* Use cases */

	.use-cases__content {
    	grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1920px) {
    html {
		font-size: 30px;
		line-height: 2;
	}

	.wrapper--padded {
    	padding: 220px 0;
	}

	.challenge__wrapper {
		padding-bottom: 220px;
	}
}