@import url('https://fonts.googleapis.com/css2?family=TASA+Orbiter:wght@400..800&display=swap');
@import url(sib-styles.css);

/*===========================================
  CSS VARIABLES
===========================================*/
:root {
	/* Couleurs principales */
	--color-primary: #1E0A52;
	--color-secondary: #38BDF8;
	--color-accent: #7E9673;
	--color-white: #fff;
	--color-black: #000;

	/* Couleurs de texte */
	--text-dark: #131313;
	--text-medium: #444468;
	--text-light: #E1E2E5;
	--text-gray: #676767;
	--text-muted: #5D5D5D;

	/* Couleurs de fond */
	--bg-light: #F4F7F9;
	--bg-white: #fff;
	--bg-purple: #1E0A52;
	--bg-gradient-text: rgba(255, 255, 255, 0.7);

	/* Espacements */
	--spacing-xs: 10px;
	--spacing-sm: 20px;
	--spacing-md: 30px;
	--spacing-lg: 40px;
	--spacing-xl: 60px;
	--spacing-xxl: 85px;

	/* Border radius */
	--radius-sm: 8px;
	--radius-md: 10px;
	--radius-lg: 20px;
	--radius-xl: 24px;
	--radius-full: 50px;

	/* Transitions */
	--transition-fast: 0.3s ease;
	--transition-base: 0.4s ease;
	--transition-smooth: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
	--transition-spring: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);

	/* Typographie */
	--font-family: "TASA Orbiter", sans-serif;
	--font-size-xs: 14px;
	--font-size-sm: 18px;
	--font-size-base: 18px;
	--font-size-lg: 20px;
	--font-size-md: 32px;
	--font-size-xl: 24px;
	--font-size-2xl: 32px;
	--font-size-3xl: 42px;
	--font-size-4xl: 52px;
	--font-size-5xl: 64px;

	/* Shadows */
	--shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.1);
	--shadow-md: 0 10px 30px rgba(0, 0, 0, 0.15);
	--shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.08);
	--shadow-glow: 0 0 20px rgba(0, 212, 255, 0.3);
}

/*===========================================
  RESET & BASE
===========================================*/
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

img {
	max-width: 100%;
}

body {
	font-family: var(--font-family);
	overflow-x: hidden;
}

.container {
	display: flex;
	flex-wrap: inherit;
	justify-content: space-between;
	max-width: 1420px;
	margin-left: auto;
	margin-right: auto;
}

p {
	font-size: var(--font-size-base);
}

/*===========================================
  ANIMATIONS & TRANSITIONS
===========================================*/
.scroll {
	opacity: 0;
	transition: all 1s ease-out;
	transform: translate3d(0, 2rem, 0);
}

.scrolled-in {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: scale(1.05);
		filter: blur(4px);
	}

	to {
		opacity: 1;
		transform: scale(1);
		filter: blur(0);
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeInLeft {
	from {
		opacity: 0;
		transform: translateX(-30px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes scaleIn {
	from {
		opacity: 0;
		transform: scale(0.9);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes float {

	0%,
	100% {
		transform: translateY(0px) scale(1);
		opacity: 0.3;
	}

	50% {
		transform: translateY(-20px) scale(1.2);
		opacity: 0.8;
	}
}

@keyframes float-icon {

	0%,
	100% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(-5px);
	}
}

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

@keyframes rotate-gear {

	0%,
	100% {
		transform: rotate(0deg);
	}

	50% {
		transform: rotate(180deg);
	}
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@keyframes wave-pulse {

	0%,
	100% {
		opacity: 0.3;
		transform: scale(0.95);
	}

	50% {
		opacity: 0.8;
		transform: scale(1);
	}
}

@keyframes wave-expand {
	0% {
		transform: scale(1);
	}

	100% {
		transform: scale(1.15);
		opacity: 0;
	}
}

@keyframes rotate-gradient {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@keyframes vibrate {
	0% {
		transform: rotate(0deg);
	}

	25% {
		transform: rotate(-5deg);
	}

	50% {
		transform: rotate(5deg);
	}

	75% {
		transform: rotate(-5deg);
	}

	100% {
		transform: rotate(5deg);
	}
}

.animate-scale-in {
	animation: scaleIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-fade-in-left {
	animation: fadeInLeft 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-fade-in-up {
	animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.delay-100 {
	animation-delay: 0.1s;
}

.delay-200 {
	animation-delay: 0.2s;
}

.delay-300 {
	animation-delay: 0.3s;
}

.delay-400 {
	animation-delay: 0.4s;
}

.rotate-picto {
	animation: spin 8s linear infinite;
	will-change: transform;
}

/*===========================================
  NAVIGATION
===========================================*/
.navbar {
	transition: all var(--transition-base);
	background: transparent;
}

.navbar .nav-link {
	color: var(--color-black);
	transition: color var(--transition-base);
	font-weight: 500;
}

.nav-link.active::after {
	display: none;
}

.nav-link.active {
	position: relative;
}

.scrolled .nav-link.active::after {
	position: absolute;
	content: "";
	left: 0;
	right: 0;
	margin: 0 auto;
	bottom: 0;
	width: 50px;
	height: 2px;
	background: var(--color-white);
	display: block;
}

.navbar.scrolled {
	background: var(--color-accent) !important;
	box-shadow: var(--shadow-sm);
}

.navbar.scrolled .nav-link {
	color: var(--color-white) !important;
}

.navbar.scrolled .numForCTA span,
.navbar.scrolled .num {
	color: var(--color-white);
}

.navbar-toggler {
	background: var(--color-white) !important;
}

.navbar-expand-lg .navbar-nav .nav-link.active {
	position: relative;
}

.navbar-expand-lg .navbar-nav .nav-link.active::after {
	position: absolute;
	content: "";
	left: 0;
	right: 0;
	margin: 0 auto;
	bottom: 0;
	width: 50px;
	height: 2px;
	background: var(--color-white);
}

li.language-selector {
	margin-left: 10px;
}

.lang-btn-single {
	padding: 12px 24px;
	background: rgba(56, 189, 248, 0.28);
	backdrop-filter: blur(10px);
	border: none;
	border-radius: 25px;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	min-width: 70px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.lang-btn-single:hover {
	background: rgb(56 189 248);
	border-color: rgb(56 189 248);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.lang-btn-single:active {
	transform: translateY(0);
}

@media (min-width: 992px) {
	.navbar-expand-lg .navbar-collapse {
		justify-content: right;
	}

	.navbar-expand-lg .navbar-nav .nav-link {
		padding-left: var(--spacing-sm);
		padding-right: var(--spacing-sm);
	}
}

/*===========================================
  HERO SECTIONS
===========================================*/
#bannerLP {
	background: url("../img/Hero.jpg") top left no-repeat;
	background-size: cover;
	width: 100vw;
	height: inherit;
	position: relative;
	padding-bottom: 50px;
}

#bannerLP .container {
	align-items: center;
	padding: 35vh var(--spacing-xs) 20vh var(--spacing-xs);
	display: flex;
	text-align: center;
	justify-content: center;
}

#bannerLP h1 {
	font-size: 3.5rem;
	color: var(--color-white);
	position: relative;
	font-weight: 600;
	font-family: var(--font-family);
}

#bannerLPInterne {
	background: url("../img/Hero_about.webp") top center no-repeat;
	background-size: cover;
	width: 100vw;
	height: inherit;
	position: relative;
	padding-bottom: 50px;
}

#bannerLPInterne .container {
	align-items: center;
	padding: 20vh var(--spacing-xs);
	display: flex;
}

#bannerLPInterne h1 {
	font-size: var(--font-size-4xl);
	color: var(--color-white);
	position: relative;
	font-weight: 600;
	font-family: var(--font-family);
	text-align: left;
}

#bannerLPInterne h1 span {
	color: var(--color-secondary);
	font-weight: 700;
}

#bannerLPInterne .descriptionClient p {
	font-size: var(--font-size-base);
	color: var(--color-white);
	line-height: 28px;
	text-align: justify;
}

#bannerCroissance {
	background: url(../img/bg_blue.png) top center no-repeat;
	padding: 150px 0 0 0;
	background-size: cover;
}

#bannerCroissance .descriptionClient {
	text-align: left;
	color: var(--color-white);
}

#bannerCroissance .descriptionClient h2 {
	font-size: var(--font-size-3xl);
	color: #fff;
	font-weight: 500;
}

#bannerCroissance .descriptionClient h2 span {
	color: var(--color-secondary);
}

#bannerCroissance .descriptionClient p {
	font-size: var(--font-size-base);
	text-align: left;
	line-height: 24px;
}

#bannerPerformance,
#bannerContact {
	background: url(../img/bg_blue.png) top center no-repeat;
	padding: 150px 0 var(--spacing-xxl) 0;
	background-size: cover;
}

#bannerPerformance .descriptionClient {
	text-align: left;
	color: var(--color-white);
}

#bannerPerformance .descriptionClient h2 {
	font-size: var(--font-size-3xl);
	color: #fff;
	font-weight: 500;
}

#bannerPerformance .descriptionClient h2 span {
	color: var(--color-secondary);
}

#bannerPerformance .descriptionClient p {
	font-size: var(--font-size-base);
	text-align: left;
	line-height: 24px;
}

#bannerPurple {
	padding: 150px 0 80px 0;
	background: var(--bg-purple);
}

#bannerPurple2 {
	padding: 150px 0 80px 0;
	background: var(--bg-purple);
}

#bannerPurple h1,
#bannerPurple2 h1 {
	color: var(--color-white);
}

#bannerPurple p {
	color: var(--color-white);
	font-weight: 600;
}

#bannerPurple2 p {
	color: var(--color-white);
	font-weight: 500;
}

#bannerPurple .container,
#contentLoi .container,
#contentConditions .container {
	flex-direction: column;
}

#bannerPurple2 .container {
	align-items: center;
}

#bannerContact .container {
	gap: 50px;
	align-items: center;
}

#bannerContact h1 {
	font-size: var(--font-size-4xl);
	color: var(--color-white);
	font-weight: 600;
	position: relative;
	padding-bottom: var(--spacing-md);
	margin-bottom: var(--spacing-md);
}

#bannerContact h1::after {
	position: absolute;
	content: "";
	width: 100px;
	height: 3px;
	background: #A095BD;
	bottom: 0;
	left: 0;
}

#bannerContact h2 {
	color: var(--color-white);
	font-size: var(--font-size-2xl);
}

#bannerContact {
	color: var(--color-white);
}

#bannerContact .twoBts {
	display: flex;
	gap: var(--spacing-md);
}

/*===========================================
  DESCRIPTION CLIENT
===========================================*/
.descriptionClient {
	text-align: left;
}

.descriptionClient p,
section#bannerLP .descriptionClient h2 {
	color: var(--text-light);
	font-size: 24px;
	text-align: left;
	line-height: 42px;
	max-width: 700px;
}

.descriptionClient a.btContactUS {
	margin: var(--spacing-lg) 0 0;
}

/*===========================================
  BUTTONS
===========================================*/
a.btContactUS {
	background: #F1F2FF;
	color: var(--color-primary);
	font-weight: 500;
	border-radius: 4px;
	text-decoration: none;
	padding: var(--spacing-xs) var(--spacing-sm);
	font-size: var(--font-size-lg);
	margin-top: var(--spacing-xs);
	display: block;
	text-align: center;
	max-width: max-content;
	margin: var(--spacing-sm) 0;
	position: relative;
	border: solid 1px #CCCCE9;
	border-radius: var(--radius-full);
}

a.btContactUS svg {
	stroke: var(--color-white);
	transition: transform var(--transition-fast);
}

a.btContactUS span {
	width: 32px;
	height: 32px;
	background: var(--color-secondary);
	border-radius: var(--radius-full);
	display: inline-block;
	margin-left: 5px;
	transition: transform var(--transition-fast);
	text-align: center;
	line-height: 29px;
	min-width: 32px;
}

a.btContactUS:hover {
	background: var(--color-secondary);
	color: var(--color-white);
	border: solid 1px var(--color-secondary);
}

a.btContactUS:hover span {
	background: var(--color-white);
	transform: translateX(5px);
}

a.btContactUS:hover svg {
	stroke: var(--color-secondary);
}

a.btSecondary {
	color: var(--color-white);
	background: var(--color-primary);
	border-color: var(--color-primary);
}

a.btSecondary:hover svg {
	stroke: var(--color-white);
}

a.btWhite {
	margin: var(--spacing-lg) auto 0;
}

a.btWhite:hover {
	background: var(--color-white);
	color: var(--color-primary);
}

a.btWhite:hover svg {
	stroke: var(--color-primary);
}

/* CTA Buttons spécifiques */
#bannerLPInterne .descriptionClient a.btContactUS,
#ficheTeam .descriptionClient a.btContactUS,
#bannerContact a.btContactUS {
	float: left;
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 28px;
	background: var(--color-secondary);
	color: var(--color-white);
	border-radius: var(--radius-full);
	border: none;
	outline: 2px solid rgba(0, 212, 255, 0.5);
	outline-offset: 6px;
	box-shadow: var(--shadow-glow), 0 0 40px rgba(0, 212, 255, 0.15);
	font-size: var(--font-size-sm);
	font-weight: 600;
	text-decoration: none;
	transition: all var(--transition-fast);
	cursor: pointer;
}

#bannerLPInterne .descriptionClient a.btContactUS .arrowGo,
#ficheTeam .descriptionClient a.btContactUS .arrowGo,
#bannerContact a.btContactUS .arrowGo {
	display: flex;
	align-items: center;
	transition: transform var(--transition-fast);
	background: transparent;
	width: inherit;
	height: inherit;
}

#bannerLPInterne .descriptionClient a.btContactUS:hover,
#ficheTeam .descriptionClient a.btContactUS:hover,
#bannerContact a.btContactUS:hover {
	background: linear-gradient(135deg, #00E5FF 0%, var(--color-secondary) 100%);
	outline-color: rgba(0, 229, 255, 0.7);
	box-shadow: 0 0 30px rgba(0, 212, 255, 0.5), 0 0 60px rgba(0, 212, 255, 0.3);
	transform: translateY(-2px);
}

#bannerLPInterne .descriptionClient a.btContactUS:hover .arrowGo,
#ficheTeam .descriptionClient a.btContactUS:hover .arrowGo,
#bannerContact a.btContactUS:hover .arrowGo {
	transform: translateX(4px);
}

#bannerLPInterne .descriptionClient a.btContactUS:active,
#ficheTeam .descriptionClient a.btContactUS:active,
#bannerContact a.btContactUS:active {
	transform: translateY(0);
}

#bannerLPInterne .descriptionClient a.btContactUS:hover .arrowGo svg,
#ficheTeam .descriptionClient a.btContactUS:hover .arrowGo svg,
#bannerContact a.btContactUS:hover .arrowGo svg {
	stroke: var(--color-white);
}

.bloTopFooter a.btSecondary {
	float: right;
}

.bloTopFooter a.btSecondary:hover {
	background: var(--color-white);
	color: var(--color-primary);
}

.bloTopFooter a.btSecondary:hover svg {
	stroke: var(--color-primary);
}

/*===========================================
  SECTIONS COMMUNES
===========================================*/
section#performance {
	padding: var(--spacing-xxl) 0;
	background: url(../img/Pricing_Plan_Section.png) top center no-repeat;
	background-size: cover;
	text-align: center;
}

section#performance h2 {
	color: var(--color-white);
	font-size: 68px;
	font-weight: 600;
	text-align: center;
	width: 100%;
	margin-bottom: var(--spacing-md);
}

section#performance p {
	color: var(--text-light);
	font-size: var(--font-size-base);
	max-width: 1050px;
	margin: 0 auto;
}

.blocCounter {
	display: flex;
	gap: 50px;
}

.onePerformance font {
	font-size: var(--font-size-base);
}

.onePerformance .counter,
.onePerformance font.forspan {
	font-size: var(--font-size-5xl);
	font-weight: 700;
	color: var(--color-white);
}

.onePerformance .counter {
	min-width: 81px;
	display: inline-block;
}

.onePerformance font.forspan {
	color: var(--color-secondary);
}

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

#solutions_performance {
	padding: var(--spacing-xxl) 0 0 0;
}

#solutions_performance .container {
	flex-direction: column;
	text-align: center;
	align-items: center;
}

#solutions_performance h1,
#marketing_numerique h1 {
	color: var(--color-black);
	font-size: var(--font-size-4xl);
}

#solutions_performance p {
	font-size: var(--font-size-base);
	color: var(--text-medium);
	max-width: 800px;
}

#marketing_numerique {
	padding: var(--spacing-xxl) 0 0 0;
	background: linear-gradient(180deg, #F3F4FF 0%, #FFFFFF 100%);
}

#marketing_numerique .container {
	flex-direction: column;
	align-items: center;
}

#marketing_numerique .container p {
	font-size: var(--font-size-base);
	color: var(--text-medium);
	max-width: 1000px;
	text-align: center;
	margin-bottom: -50px;
}

/*===========================================
  BLUEPRINT, PROJET, FORMATION
===========================================*/
#blueprint,
#projet,
#formation_IA,
#referencement_organique,
#service_design,
#Campagnes_publicitaires,
#solutions_affaires {
	padding: var(--spacing-xxl) 0;
}

#Campagnes_publicitaires .container {
	gap: 20px;
}

#formation_IA {
	background: var(--bg-light);
}

#solutions_affaires {
	background: var(--bg-light);
}

#solutions_affaires .container {
	flex-direction: column;
}

#referencement_organique {
	background: var(--color-white);
}

#service_design {
	background: var(--bg-light);
}

#Campagnes_publicitaires {
	background: var(--bg-light);
}

.numberSolution {
	background: #584881;
	width: 42px;
	height: 42px;
	text-align: center;
	color: var(--color-white);
	line-height: 42px;
	border-radius: var(--radius-full);
	display: block;
	font-size: var(--font-size-base);
	margin-bottom: var(--spacing-xs);
}

#blueprint h2,
#projet h2,
#formation_IA h2,
#solutions_affaires h2,
#Campagnes_publicitaires h2,
#referencement_organique h2,
#service_design h2 {
	color: var(--color-black);
	font-size: var(--font-size-2xl);
	font-weight: 500;
}

#blueprint h3,
#projet h3,
#formation_IA h3,
#referencement_organique h3 {
	font-size: var(--font-size-md);
	color: var(--text-medium);
	font-weight: 500;
	margin-bottom: var(--spacing-sm);
}

#referencement_organique ul {
	list-style: none;
	font-size: var(--font-size-sm);
	padding: 0;
}

#referencement_organique ul li {
	margin: 5px 0;
	display: flex;
	gap: var(--spacing-xs);
	align-items: start;
}

#referencement_organique ul li img {
	margin-top: 5px;
}

#referencement_organique .container {
	gap: 50px;
	align-items: center;
}

#blueprint p,
#projet p,
#formation_IA p {
	text-align: justify;
	color: var(--text-medium);
	font-size: var(--font-size-base);
}

#blueprint .container,
#projet .container,
#formation_IA .container {
	align-items: center;
	gap: 50px;
}

#service_design h3.content-title {
	font-weight: 600;
	font-size: 36px;
}

#service_design .accordion-nav h3 {
	margin-bottom: var(--spacing-xs);
}

#service_design .accordion-nav-item {
	font-size: var(--font-size-lg);
}

#service_design .custom-accordion {
	padding: var(--spacing-md) 0 0 0;
}

.blocTabs {
	display: flex;
	gap: 50px;
}

.right-panel {
	text-align: left;
}

#solutions_affaires .left-panel h3 {
	font-size: var(--font-size-xl);
	color: #5C4D84;
	font-weight: 500;
	margin-bottom: var(--spacing-xs);
}

.left-panel {
	padding-top: 50px;
}

.left-panel p {
	margin: 0;
}

/*===========================================
  ACCORDION CAMPAGNES
===========================================*/
#Campagnes_publicitaires .accordion-custom .accordion-button {
	position: relative !important;
	padding-right: 60px !important;
}

#Campagnes_publicitaires .accordion-custom .accordion-button::before,
#Campagnes_publicitaires .accordion-custom .accordion-button::after {
	display: none !important;
}

#Campagnes_publicitaires .accordion-custom .accordion-button::after {
	content: '›' !important;
	display: block !important;
	position: absolute !important;
	right: var(--spacing-sm) !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	font-size: 55px !important;
	font-weight: 100 !important;
	color: #5A5A59 !important;
	line-height: 1 !important;
	font-family: system-ui;
}

#Campagnes_publicitaires .accordion-custom .accordion-button:not(.collapsed)::after {
	content: '‹' !important;
	transform: translateY(-50%) rotate(-90deg) !important;
	color: var(--color-secondary) !important;
}

#Campagnes_publicitaires .accordion-body {
	padding: 0;
	color: var(--text-gray);
	font-size: var(--font-size-sm);
	line-height: 1.6;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--spacing-md);
	text-align: justify;
}

#Campagnes_publicitaires .accordion-body img {
	max-width: 170px;
}

#Campagnes_publicitaires .accordion-custom h3 .accordion-button {
	padding-left: 0;
	font-size: 36px;
	color: var(--color-secondary);
}

#Campagnes_publicitaires .accordion-custom h3 .accordion-button.collapsed {
	font-size: 36px;
	color: var(--color-primary);
}

/*===========================================
  DIAGNOSTIC
===========================================*/
#diagnostic {
	background: url(../img/bg_diagnostic.png) top center no-repeat;
	padding: 0 0 60px 0;
	background-size: cover;
}

#diagnostic .container {
	flex-direction: column;
	align-items: center;
}

#diagnostic h2 {
	color: var(--color-white);
	font-size: var(--font-size-4xl);
	margin-top: -50px;
}

#diagnostic p {
	color: var(--color-primary);
	font-size: var(--font-size-lg);
	max-width: 700px;
	text-align: center;
}

/*===========================================
  CARDS
===========================================*/
.card {
	position: relative;
	background: rgba(3, 2, 11, 0.5);
	border-radius: var(--radius-xl);
	padding: var(--spacing-md);
	overflow: hidden;
	cursor: pointer;
	transition: all var(--transition-smooth);
	border: 1px solid #595959;
	text-align: left;
	display: block;
	text-decoration: none;
	flex: 1;
}

.card:hover::before {
	opacity: 1;
}

.card:hover::after {
	transform: translateX(100%) translateY(100%) rotate(45deg);
}

.card:hover {
	transform: translateY(-8px) scale(1.02);
	border-color: rgba(100, 200, 255, 0.4);
	box-shadow: 0 20px 100px rgba(0, 150, 255, 0.2), 0 0 20px rgba(0, 150, 255, 0.1), inset 0 0 20px rgba(100, 200, 255, 0.05);
}

.particles {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	pointer-events: none;
}

.particle {
	position: absolute;
	width: 3px;
	height: 3px;
	background: rgba(100, 200, 255, 0.4);
	border-radius: var(--radius-full);
	animation: float 8s infinite ease-in-out;
	box-shadow: 0 0 10px rgba(100, 200, 255, 0.6);
}

.particle:nth-child(1) {
	top: 20%;
	left: 30%;
	animation-delay: 0s;
}

.particle:nth-child(2) {
	top: 60%;
	left: 70%;
	animation-delay: 2s;
}

.particle:nth-child(3) {
	top: 40%;
	left: 15%;
	animation-delay: 4s;
}

.particle:nth-child(4) {
	top: 80%;
	left: 50%;
	animation-delay: 1s;
}

.particle:nth-child(5) {
	top: 15%;
	left: 80%;
	animation-delay: 3s;
}

.particle:nth-child(6) {
	top: 70%;
	left: 25%;
	animation-delay: 5s;
}

.card:hover .particle {
	animation-duration: 4s;
}

.card-content {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.icon-container {
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 32px;
	transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
	position: relative;
}

.card:hover .icon-container {
	transform: scale(1.1) rotate(5deg);
}

.icon {
	position: relative;
	z-index: 2;
	width: 80px;
	height: 80px;
	transition: all 0.5s ease;
}

.card:hover .icon {
	animation: float-icon 2s ease-in-out infinite;
}

.ai-text {
	fill: var(--color-secondary);
	font-weight: 700;
	font-size: var(--font-size-xs);
	transition: all 0.5s ease;
}

.card:hover .ai-text {
	fill: #90e0ff;
	filter: drop-shadow(0 0 8px rgba(100, 200, 255, 0.8));
}

.title {
	font-size: 28px;
	font-weight: 600;
	color: var(--color-secondary);
	margin-bottom: var(--spacing-xs);
	transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
	text-shadow: var(--shadow-glow);
	text-align: left;
}

.card:hover .title {
	color: #90e0ff;
	text-shadow: 0 0 30px rgba(100, 200, 255, 0.6), 0 0 60px rgba(100, 200, 255, 0.3);
	transform: translateX(4px);
}

.description {
	font-size: var(--font-size-sm);
	line-height: 1.7;
	color: var(--bg-gradient-text);
	transition: all 0.5s ease;
}

.card:hover .description {
	color: rgba(255, 255, 255, 0.9);
}

.arrow {
	position: absolute;
	top: 32px;
	right: 32px;
	width: 24px;
	height: 24px;
	transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.arrow svg {
	width: 100%;
	height: 100%;
}

.arrow-path {
	stroke: #777984;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
	transition: all 0.5s ease;
	filter: drop-shadow(0 0 5px rgba(100, 200, 255, 0.4));
}

.card:hover .arrow {
	transform: translate(6px, -6px) scale(1.1);
	opacity: 1;
}

.card:hover .arrow-path {
	stroke: var(--color-secondary);
	filter: drop-shadow(0 0 12px rgba(100, 200, 255, 0.8));
}

.glow {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, rgba(100, 200, 255, 0.15) 0%, transparent 70%);
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: opacity 0.6s ease;
	pointer-events: none;
}

.card:hover .glow {
	opacity: 1;
}

.encratsPerformance {
	display: flex;
	flex-direction: row;
	gap: var(--spacing-sm);
	margin: var(--spacing-lg) 0;
}

/*===========================================
  CARD SERVICE
===========================================*/
.card-service {
	position: relative;
	padding: 20px;
	background: #FFFEFD;
	border-radius: var(--radius-lg);
	min-height: 360px;
	transition: all var(--transition-base);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	cursor: pointer;
	flex: 1;
}

.card-number {
	position: absolute;
	bottom: var(--spacing-sm);
	right: var(--spacing-md);
	font-size: var(--font-size-3xl);
	font-weight: 700;
	color: rgba(0, 0, 0, 0.1);
	line-height: 1;
	transition: all var(--transition-base);
}

.card-icon {
	position: absolute;
	bottom: 15px;
	left: var(--spacing-md);
	width: 60px;
	height: 60px;
	background: #E6E1F2;
	border-radius: var(--radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #4A4A68;
	transition: all var(--transition-base);
}

.card-title {
	font-size: var(--font-size-xl);
	font-weight: 700;
	color: #1A1A40;
	margin: 0 0 10px 0;
	transition: all var(--transition-base);
}

.card-description {
	font-size: 17px;
	color: #666;
	margin: 0;
	max-width: 280px;
	transition: all var(--transition-base);
	line-height: 24px;
}

.card-service:hover {
	background: linear-gradient(135deg, #1A1A40 0%, #0D0D2B 100%);
	transform: translateY(-5px);
	box-shadow: 0 10px 40px rgba(0, 212, 255, 0.3);
}

.card-service:hover .card-content {
	margin-top: 80px;
}

.card-service:hover .card-number {
	top: var(--spacing-sm);
	left: var(--spacing-md);
	bottom: auto;
	right: auto;
	color: var(--color-secondary);
}

.card-service:hover .card-icon {
	top: var(--spacing-md);
	right: var(--spacing-md);
	bottom: auto;
	left: auto;
	background: var(--color-secondary);
	color: var(--color-white);
	box-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
}

.card-service:hover .card-title {
	color: var(--color-white);
}

.card-service:hover .card-description {
	color: var(--bg-gradient-text);
}

.card-service .card-icon {
	stroke: var(--text-dark);
}

.card-service:hover .card-icon {
	stroke: var(--color-white);
}

.cards {
	display: flex;
	gap: var(--spacing-sm);
	margin-top: -150px;
}

/*===========================================
  SOLUTIONS
===========================================*/
section#solutions {
	padding: var(--spacing-xxl) 0;
	background: var(--color-white);
	text-align: left;
}

section#solutions h2 {
	color: var(--color-primary);
	font-size: 62px;
	margin-bottom: var(--spacing-md);
	font-weight: 500;
}

section#solutions .btSecondary:hover svg {
	stroke: var(--color-secondary);
}


.oneEncartsolution {
	background: var(--color-primary);
	border-radius: var(--spacing-lg);
	text-align: center;
	padding: var(--spacing-md) var(--spacing-sm) 0 var(--spacing-sm);
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: transform 0.3s ease-out,
		box-shadow 0.3s ease-out,
		border-color 0.3s ease-out;
}

.oneEncartsolution:hover {
	transform: translateY(-4px) scale(1.03);
	box-shadow:
		0 10px 30px rgba(0, 150, 255, 0.12),
		0 0 15px rgba(0, 150, 255, 0.08),
		inset 0 0 15px rgba(100, 200, 255, 0.04);
}

.encartLight {
	background: #F5F7FF;
}

.oneEncartsolution:nth-child(2) {
	justify-content: inherit;
}

section#solutions .oneEncartsolution h3 {
	font-size: var(--font-size-base);
	color: #CCCCE9;
	font-weight: 100;
	text-align: left;
	margin-bottom: var(--spacing-sm);
}

section#solutions .oneEncartsolution h4 {
	color: var(--color-white);
	font-size: var(--font-size-md);
	text-align: left;
	letter-spacing: -2px;
}

section#solutions .oneEncartsolution p {
	color: #CCCCE9;
	font-size: var(--font-size-base);
	text-align: left;
}

section#solutions .encartLight h3,
section#solutions .encartLight h4 {
	color: var(--color-primary);
}

section#solutions .encartLight p {
	color: var(--text-medium);
}

.blocSolutions {
	display: flex;
	gap: var(--spacing-sm);
}

.partTexte {
	flex: 1;
}

section h2 {
	font-size: var(--font-size-xl);
	color: var(--color-primary);
	width: fit-content;
	font-weight: 400;
}

section h3 {
	font-size: 72px;
	margin-bottom: var(--spacing-md);
	font-weight: 700;
	position: relative;
	color: var(--color-primary);
	font-family: var(--font-family);
}

/*===========================================
  FAQ
===========================================*/
section#FAQ {
	background: var(--bg-light);
	padding: var(--spacing-xxl) 0;
}

section#FAQ .p-4 {
	padding: 0 !important;
}

.faq-container {
	max-width: 100%;
	margin: 0 auto;
	overflow: hidden;
}

section h2.accordion-header {
	width: auto;
}

.accordion-item {
	border: none;
	border-bottom: 1px solid #AAAAAA;
	background: transparent;
	padding: 10px 0;
}

.accordion-item:last-child {
	border-bottom: none;
}

.accordion-button {
	background-color: transparent;
	color: #222;
	font-size: var(--font-size-lg);
	font-weight: 500;
	padding: var(--spacing-sm) var(--spacing-md);
	border: none;
	box-shadow: none;
	position: relative;
}

.accordion-button:not(.collapsed) {
	background-color: transparent;
	color: #1a1a1a;
	box-shadow: none;
}

.accordion-button:focus {
	border: none;
	box-shadow: none;
}

.accordion-button::after {
	content: '+';
	background-image: none !important;
	width: auto;
	height: auto;
	font-size: var(--font-size-2xl);
	font-weight: 300;
	line-height: 1;
	color: #1a1a1a;
	flex-shrink: 0;
	transform: none !important;
}

.accordion-button:not(.collapsed)::after {
	content: '−';
	transform: none !important;
	color: var(--color-secondary);
}

.accordion-body {
	padding: 0 var(--spacing-md) var(--spacing-md) var(--spacing-md);
	color: var(--text-gray);
	font-size: var(--font-size-sm);
	line-height: 1.6;
}

.accordion-button:hover {
	background-color: transparent;
	color: var(--color-secondary);
}

section#FAQ.FAQInterne {
	background: var(--color-primary);
}

section#FAQ.FAQInterne h3,
section#FAQ.FAQInterne h2,
section#FAQ.FAQInterne .accordion-button::after {
	color: var(--color-white);
}

section#FAQ.FAQInterne p {
	color: #DACFF9;
}

section#FAQ.FAQInterne .accordion-button {
	color: var(--color-white);
}

section#FAQ.FAQInterne .accordion-body {
	color: #eee;
}

section#FAQ h3 {
	color: var(--color-primary);
	font-weight: 600;
}

/*===========================================
  TESTIMONIALS
===========================================*/
#testimonial {
	padding: var(--spacing-xxl) 0;
	background: var(--color-white) url(../img/bg_temoiganges.png) top center no-repeat;
}

.carousel-container {
	max-width: 1400px;
	width: 100%;
	background: var(--color-white);
	border-radius: 32px;
	box-shadow: var(--shadow-lg);
	padding: 4rem;
	position: relative;
	overflow: hidden;
}

.carousel-grid {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 4rem;
	align-items: center;
}

.photo-section {
	position: relative;
	display: flex;
	justify-content: center;
}

.photo-wrapper {
	position: relative;
	display: inline-block;
}

.photo {
	opacity: 0;
}

.rating-badge {
	position: absolute;
	bottom: 3rem;
	left: -6rem;
	background: var(--color-white);
	border-radius: var(--radius-xl);
	padding: var(--spacing-sm);
	text-align: left;
	opacity: 0;
}

.rating-number {
	font-size: 3.75rem;
	font-weight: bold;
	color: #111827;
	line-height: 1;
	margin-bottom: 0.5rem;
}

.stars {
	display: flex;
	gap: 0.25rem;
	justify-content: center;
	margin-bottom: 0.75rem;
}

.star {
	width: 1.5rem;
	height: 1.5rem;
}

.star-filled {
	fill: #fbbf24;
}

.star-empty {
	fill: #d1d5db;
}

.star-half {
	fill: #FFD700;
	opacity: 0.5;
}

.rating-text {
	font-size: 0.875rem;
	color: #6b7280;
	font-weight: 500;
}

.content-section {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

.icon-wrapper {
	position: absolute;
	top: -40px;
	right: -50px;
}

.titleTestimonial {
	font-size: 3.75rem;
	font-weight: bold;
	color: var(--color-primary);
	line-height: 1.1;
}

.testimonial-text {
	font-size: 1.125rem;
	color: #374151;
	line-height: 1.75;
	opacity: 0;
}

.testimonial-text strong {
	font-weight: bold;
	color: #111827;
}

.author-section {
	opacity: 0;
}

.author-name-wrapper {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 0.5rem;
}

.author-line {
	width: 3.5rem;
	height: 2px;
	background: var(--color-primary);
}

.author-name {
	font-size: var(--font-size-xl);
	font-weight: bold;
	color: var(--color-primary);
}

.author-company {
	font-size: 1rem;
	color: #6b7280;
	margin-left: 4.5rem;
}

.navigation-dots {
	display: flex;
	gap: 0.625rem;
	padding-top: 1.5rem;
	opacity: 0;
}

.dot {
	height: 0.625rem;
	border-radius: 9999px;
	border: none;
	cursor: pointer;
	transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
	background: #d1d5db;
}

.dot:not(.active) {
	width: 0.625rem;
}

.dot:not(.active):hover {
	background: #9ca3af;
	width: 1.5rem;
}

.dot.active {
	width: 2.5rem;
	background: #60a5fa;
	box-shadow: 0 4px 12px rgba(96, 165, 250, 0.4);
}

/*===========================================
  FOOTER
===========================================*/
.bloTopFooter {
	background: var(--color-secondary);
	padding: var(--spacing-lg) 60px;
	border-radius: var(--radius-lg);
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: space-between;
	margin-bottom: var(--spacing-lg);
}

footer h2 {
	color: var(--color-white);
	font-size: var(--spacing-lg);
	font-weight: 600;
}

footer p {
	font-size: var(--font-size-lg);
	color: var(--color-primary);
	margin: 0;
	line-height: 24px;
}

.forContact {
	text-align: right;
}

.blocBottomFooter {
	background: url(../img/bg_footer.png) top center no-repeat;
	background-size: cover;
	padding: 150px 0 100px 0;
}

.linkedin-icon {
	width: 40px;
	height: 40px;
	border: 1px solid rgba(225, 226, 229, 0.3);
	border-radius: var(--radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-white);
	font-weight: bold;
	font-size: var(--font-size-lg);
	transition: all var(--transition-fast);
	cursor: pointer;
}

.linkedin-icon:hover {
	background-color: var(--color-secondary);
	border-color: var(--color-secondary);
}

.phone-section {
	display: flex;
	align-items: center;
	gap: 15px;
	color: var(--color-white);
}

.phone-icon {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s ease-in-out;
}

.phone-icon svg {
	width: 100%;
	height: 100%;
	fill: var(--text-light);
}

.phone-number {
	font-size: var(--font-size-lg);
	font-weight: 500;
	letter-spacing: 0.5px;
}

.phone-number a {
	color: var(--text-light);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.phone-number a:hover {
	color: var(--color-secondary);
}

.blocOne {
	display: flex;
	gap: 25px;
	flex-direction: column;
	align-items: flex-start;
}

.blocBottomFooter h3 {
	color: var(--color-white);
	font-size: var(--font-size-lg);
	margin-bottom: var(--spacing-sm);
}

.blocBottomFooter .containerTop {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.5fr 3fr;
	gap: var(--spacing-sm);
}

.blocBottomFooter .container {
	display: flex;
	flex-direction: column;
}

.copyright {
	border-top: solid 1px #e1e2e557;
	font-size: var(--font-size-sm);
	color: var(--text-light);
	padding: var(--spacing-md) 0;
	text-align: center;
	margin-top: 60px;
}

.blocBottomFooter h4 {
	color: var(--color-white);
	font-size: 22px;
	margin-bottom: var(--spacing-sm);
}

.blocBottomFooter ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.blocBottomFooter ul li a {
	color: #c7c9cf;
	font-size: var(--font-size-sm);
}

.blocBottomFooter ul li {
	margin-top: var(--spacing-xs);
}

.blocBottomFooter ul li a:hover {
	color: var(--color-white);
}

footer .numForCTA {
	max-width: 290px;
	color: var(--color-white);
	margin-top: var(--spacing-lg);
}

footer .numForCTA strong,
footer .numForCTA span {
	color: var(--color-black);
}

.numForCTA {
	display: flex;
	align-items: center;
	gap: 5px;
	text-decoration: none;
	color: var(--color-white);
	font-size: var(--font-size-sm);
}

.numForCTA:hover .phone-icon {
	animation: vibrate var(--transition-fast) infinite alternate;
}

.num {
	font-size: var(--font-size-lg);
	font-weight: bold;
	color: var(--color-black);
}

/*===========================================
  VISION & MISSION
===========================================*/
section#encartsAvantage {
	background: var(--color-primary);
}

section#calendly {
	background: var(--color-primary);
}

section#calendly .container {
	align-items: center;
	padding: 20vh var(--spacing-xs) 10vh;
	display: flex;
	flex-direction: column;
}

section#calendly .container h1 {
	color: #fff;
	text-align: center;
}

section#vision {
	background: var(--color-primary);
	padding: 300px 0 var(--spacing-xxl) 0;
	margin-top: -210px;
}

section#vision .container {
	gap: 50px;
}

#vision h2 {
	font-size: var(--font-size-xl);
	color: var(--color-white);
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	text-transform: capitalize;
}

section#vision .container .col-md-5,
#mission .container .col-md-4 {
	text-align: center;
}

#vision h3 {
	font-size: var(--font-size-3xl);
	color: var(--color-white);
	font-weight: 500;
}

#vision p {
	color: var(--color-white);
}

#vision h3 span {
	color: var(--color-secondary);
}

section#mission {
	padding: var(--spacing-xxl) 0;
	background: var(--bg-light);
}

.custom-accordion {
	padding: var(--spacing-xs) 0 0 0;
}

.accordion-nav {
	background: var(--color-white);
	border-radius: 15px;
	padding: var(--spacing-sm);
}

.accordion-nav-item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 16px var(--spacing-sm);
	background: transparent;
	border: none;
	border-radius: var(--radius-full);
	font-size: 22px;
	font-weight: 500;
	color: #1A1A40;
	text-align: left;
	cursor: pointer;
	transition: all var(--transition-fast);
	margin-bottom: var(--spacing-xs);
}

.accordion-nav-item:last-child {
	margin-bottom: 0;
}

.accordion-nav-item .dot {
	width: 14px;
	height: 14px;
	border-radius: var(--radius-full);
	background: #F1F2FF;
	flex-shrink: 0;
	transition: all var(--transition-fast);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.accordion-nav-item .dot::after {
	content: '';
	width: 5px;
	height: 5px;
	border-radius: var(--radius-full);
	background: #1A1A40;
	transition: all var(--transition-fast);
}

.accordion-nav-item.active {
	background: #1A1A40;
	color: var(--color-white);
}

.accordion-nav-item.active .dot {
	background: var(--color-white);
}

.accordion-nav-item.active .dot::after {
	background: #1A1A40;
}

.accordion-nav-item:hover:not(.active) {
	background: rgba(26, 26, 64, 0.05);
}

.accordion-content {
	padding-left: var(--spacing-lg);
	position: relative;
}

.content-item {
	display: none;
	opacity: 0;
}

.content-item.active {
	display: block;
	opacity: 1;
	animation: fadeIn 0.4s ease;
}

.content-title {
	font-size: var(--font-size-3xl);
	font-weight: 700;
	color: var(--color-primary);
	margin-bottom: var(--spacing-sm);
	position: relative;
	padding-bottom: 15px;
}

.content-title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 60px;
	height: 3px;
	background: var(--color-primary);
}

.content-text {
	font-size: var(--font-size-sm);
	color: var(--text-medium);
	margin-bottom: 15px;
}

.content-text:last-child {
	margin-bottom: 0;
}

.content-text strong {
	color: #1A1A40;
	font-weight: 600;
}

/*===========================================
  TEAM
===========================================*/
#team {
	padding: var(--spacing-xxl) 0;
}

#team h2 {
	display: flex;
	gap: var(--spacing-xs);
	align-items: center;
}

#team h3 {
	font-size: var(--font-size-4xl);
	font-weight: 500;
}

#team h4 {
	font-size: 34px;
	font-weight: 500;
}

.team-row {
	display: flex;
	gap: var(--spacing-sm);
}

.team-card {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	height: 500px;
	cursor: pointer;
	transition: all var(--transition-smooth);
}

.team-card.large {
	flex: 0 0 calc(75% - 10px);
}

.team-card.small {
	flex: 0 0 calc(25% - 10px);
}

.team-card-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.team-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.team-card.large:hover .team-card-image img {
	transform: scale(1.1);
}

.team-card-overlay {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: var(--spacing-md);
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.7) 100%);
	z-index: 1;
	transition: all 0.6s ease;
}

.team-card-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	opacity: 1;
	transition: opacity var(--transition-base);
}

.team-card.small .team-card-header {
	opacity: 0;
	pointer-events: none;
}

.team-name {
	font-size: 28px;
	font-weight: 700;
	color: var(--color-white);
	margin: 0 0 8px 0;
	transition: all 0.6s ease;
}

.team-card.small .team-name {
	font-size: var(--font-size-lg);
}

.team-badge {
	display: inline-block;
	padding: 6px 16px;
	background: #1A1A40;
	color: var(--color-white);
	border-radius: var(--radius-full);
	font-size: 13px;
	font-weight: 500;
	transition: all var(--transition-base);
}

.btn-voir-plus {
	padding: 8px var(--spacing-sm);
	background: var(--color-white);
	color: #1A1A40;
	border: none;
	border-radius: var(--radius-full);
	font-size: var(--font-size-xs);
	font-weight: 600;
	cursor: pointer;
	transition: all var(--transition-fast);
}

.btn-voir-plus:hover {
	background: #00D4FF;
	color: var(--color-white);
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(0, 212, 255, 0.4);
}

.team-card-footer {
	margin-top: auto;
}

.team-description {
	color: var(--color-white);
	font-size: var(--font-size-base);
	line-height: 1.6;
	text-align: justify;
	margin: 0;
	opacity: 1;
	transition: opacity var(--transition-base);
}

.team-card.small .team-description {
	opacity: 0;
}

.team-card.small .team-card-image img {
	filter: grayscale(100%);
}

.team-card.large .team-card-image img {
	filter: grayscale(0%);
}

/*===========================================
  FICHE TEAM
===========================================*/
#ficheTeam {
	background: var(--color-primary);
	padding: 150px 0 var(--spacing-xxl) 0;
}

#ficheTeam h1 {
	font-size: var(--font-size-4xl);
	color: var(--color-white);
	text-align: left;
}

#ficheTeam h2 {
	color: var(--color-white);
	background: #7360A2;
	border-radius: var(--radius-full);
	padding: 8px 25px;
	margin-bottom: var(--spacing-lg);
}

#ficheTeam .descriptionClient p {
	color: var(--color-white);
	text-align: justify;
	font-size: var(--font-size-base);
	line-height: 26px;
	margin-bottom: var(--spacing-sm);
}

#ficheTeam .descriptionClient {
	text-align: left;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

#ficheTeam .descriptionClient a.btContactUS {
	margin: var(--spacing-md) 0 50px 0;
	font-size: var(--font-size-xl);
}

#ficheTeam ul {
	padding: 0;
	margin: 0;
	list-style: none;
	color: var(--color-white);
	font-size: var(--font-size-base);
}

#ficheTeam .container {
	gap: var(--spacing-md);
}

.linkstoContact {
	display: flex;
	gap: var(--spacing-lg);
}

.fiche-wrapper {
	position: relative;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	text-align: left;
	gap: var(--spacing-xs);
}

.detailsNum {
	color: var(--color-white);
	font-size: var(--font-size-base);
}

.detailsNum strong {
	font-size: var(--font-size-xl);
	font-weight: 600;
}

.fiche-card {
	width: 62px;
	height: 62px;
	background: #f8f9fa;
	border-radius: 18px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	transition: all var(--transition-spring);
	box-shadow: var(--shadow-md);
}

.fiche-card::before {
	content: '';
	position: absolute;
	inset: -2px;
	border-radius: 18px;
	background: linear-gradient(45deg, #00d4ff, #0099ff, #00d4ff);
	opacity: 0;
	transition: opacity var(--transition-base);
	z-index: -1;
}

.fiche-icon {
	width: 28px;
	height: 28px;
	position: relative;
	z-index: 2;
}

.fiche-svg {
	width: 28px;
	height: 28px;
	transition: all var(--transition-base);
	fill: var(--color-secondary);
}

.fiche-path {
	fill: none;
	stroke: var(--color-secondary);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: all var(--transition-base);
}

.wave {
	fill: none;
	stroke: var(--color-secondary);
	stroke-width: 2;
	stroke-linecap: round;
	opacity: 0.6;
	transition: all var(--transition-base);
}

.wave-1 {
	animation: wave-pulse 2s ease-in-out infinite;
}

.wave-2 {
	animation: wave-pulse 2s ease-in-out 0.3s infinite;
}

.fiche-wrapper:hover .fiche-card {
	transform: translateY(-3px) scale(1.05);
	box-shadow: 0 20px 50px rgba(0, 188, 212, 0.4);
}

.fiche-wrapper:hover svg {
	fill: var(--color-white);
}

.fiche-icon.LinkedIn {
	font-size: 28px;
	line-height: 28px;
	text-align: center;
	color: var(--color-secondary);
}

.fiche-wrapper:hover .fiche-icon.LinkedIn {
	color: var(--color-white);
}

.fiche-wrapper:hover .fiche-card::before {
	opacity: 1;
	animation: rotate-gradient 3s linear infinite;
}

.fiche-wrapper:hover .fiche-path {
	stroke: #00e5ff;
	filter: drop-shadow(0 0 8px var(--color-secondary));
}

.fiche-wrapper:hover .wave {
	opacity: 1;
	stroke: #00e5ff;
}

.fiche-wrapper:hover .wave-1 {
	animation: wave-pulse 1s ease-in-out infinite, wave-expand 1s ease-out infinite;
}

.fiche-wrapper:hover .wave-2 {
	animation: wave-pulse 1s ease-in-out 0.2s infinite, wave-expand 1s ease-out 0.2s infinite;
}

/*===========================================
  BIOGRAPHIE
===========================================*/
section#biographie {
	padding: var(--spacing-xxl) 0;
}

section#biographie .container {
	gap: 80px;
}

section#biographie h2 {
	font-size: var(--spacing-lg);
	color: var(--color-primary);
	font-weight: 600;
	margin-bottom: var(--spacing-sm);
}

section#biographie p {
	color: var(--text-muted);
	text-align: justify;
}

.tags-container {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: flex-start;
}

.tag {
	padding: 12px var(--font-size-xl);
	border-radius: var(--radius-full);
	font-size: 15px;
	font-weight: 500;
	border: 2px solid #e0e0e0;
	background: var(--color-white);
	color: var(--text-dark);
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	user-select: none;
}

.tag::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-radius: var(--radius-full);
	background: rgb(55 180 239 / 8%);
	transform: translate(-50%, -50%);
	transition: width 0.5s ease, height 0.5s ease;
	z-index: 0;
}

.tag span {
	position: relative;
	z-index: 1;
}

.tag:not(.active):hover {
	border-color: var(--color-secondary);
	color: var(--text-dark);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.tag:not(.active):hover::before {
	width: 100%;
	height: 300px;
}

.tag.active:hover {
	transform: translateY(-2px) scale(1.02);
	box-shadow: 0 8px 20px rgba(23, 162, 184, 0.25);
}

.tag:active {
	transform: translateY(0) scale(0.98);
}

.tag {
	animation: fadeInUp 0.5s ease backwards;
}

.tag:nth-child(1) {
	animation-delay: 0.05s;
}

.tag:nth-child(2) {
	animation-delay: 0.1s;
}

.tag:nth-child(3) {
	animation-delay: 0.15s;
}

.tag:nth-child(4) {
	animation-delay: 0.2s;
}

.tag:nth-child(5) {
	animation-delay: 0.25s;
}

.tag:nth-child(6) {
	animation-delay: 0.3s;
}

.tag:nth-child(7) {
	animation-delay: 0.35s;
}

.tag::after {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%);
	transform: translateX(-100%) translateY(-100%) rotate(45deg);
	transition: transform 0.6s ease;
}

.tag:hover::after {
	transform: translateX(100%) translateY(100%) rotate(45deg);
}

/*===========================================
  ABOUT US & FEATURES
===========================================*/
section#aboutUS {
	padding: var(--spacing-xxl) 0;
	background: var(--bg-light) url(../img/bg_repeat.png) repeat;
}

section#aboutUS .container {
	align-items: center;
	gap: var(--spacing-md);
}

section#aboutUS p {
	color: var(--text-medium);
	font-size: var(--font-size-base);
}

.about-encart {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--spacing-md);
}

.oneAboutE {
	padding: var(--spacing-md);
	border-radius: var(--radius-lg);
	min-height: 288px;
}

.oneLight font {
	font-size: var(--font-size-2xl);
	font-weight: 600;
	line-height: 50px;
}

.oneLight span {
	font-size: var(--font-size-2xl);
	display: block;
	font-weight: 800;
}

.oneBlue font {
	color: var(--color-primary);
	font-size: var(--font-size-2xl);
	font-weight: 600;
	line-height: 32px;
}

.onePurple font {
	color: var(--color-white);
	font-size: var(--font-size-2xl);
	font-weight: 600;
	line-height: 36px;
}

.oneBlue font.forspan {
	color: var(--color-white);
	font-size: var(--font-size-5xl);
	font-weight: 600;
	display: block;
	margin-bottom: var(--spacing-sm);
}

.oneLight {
	background: var(--color-white);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
}

.oneLight:last-child {
	text-align: center;
	align-items: center;
}

.oneLight:last-child font {
	font-size: var(--font-size-xl);
	font-weight: 600;
	line-height: 30px;
}

.oneLight:last-child span {
	font-size: var(--font-size-xl);
	font-weight: 600;
	line-height: 30px;
	color: var(--color-secondary);
	display: initial;
}

.oneBlue {
	background: var(--color-secondary);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.onePurple {
	background: var(--color-primary);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
}

.feature-wrapper {
	margin: 0 auto;
	background: var(--color-accent);
	background: linear-gradient(90deg, rgba(220, 77, 88, 1) 50%, rgba(255, 255, 255, 0) 50%);
	margin-bottom: -80px;
	position: relative;
}

.features-section {
	background-color: var(--color-accent);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 60px 80px 60px 0px;
	border-top-right-radius: 100px;
	border-bottom-right-radius: 100px;
	color: var(--color-white);
	width: 100%;
}

.feature {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	font-weight: 600;
	font-size: var(--font-size-lg);
	line-height: 24px;
}

.forMob {
	display: none;
}

/*===========================================
  CONTACT FORM
===========================================*/
#contactForm div {
	margin-bottom: 15px;
}

.encartFormulaireMailgun {
	padding: var(--spacing-md);
	border-radius: var(--radius-md);
	background: var(--color-white);
}

#bannerContact .encartFormulaireMailgun h2 {
	font-size: var(--font-size-2xl);
	color: var(--color-primary);
	font-weight: 600;
	margin-bottom: var(--spacing-sm);
}

#contactForm label {
	display: block;
	margin-bottom: 0;
	color: #161519;
	font-size: var(--font-size-base);
	text-align: left;
}

#contactForm input,
#contactForm textarea {
	width: 100%;
	padding: var(--spacing-xs);
	border: 1px solid #ddd;
	border-radius: 4px;
	font-family: inherit;
}

#contactForm button {
	background: var(--color-primary);
	color: var(--color-white);
	border-radius: var(--radius-full);
	padding: 12px 15px 12px var(--spacing-md);
	border: none;
	cursor: pointer;
	font-size: 22px;
	display: flex;
	justify-content: flex-start;
	gap: var(--spacing-sm);
}

#contactForm button:hover {
	background: #0e0624;
}

#contactForm button:disabled {
	background: #ccc;
	cursor: not-allowed;
}

#formMessage {
	margin-top: 15px;
	padding: var(--spacing-xs);
	border-radius: 4px;
	text-align: center;
}

#formMessage.success {
	background: #d4edda;
	color: #155724;
	border: 1px solid #c3e6cb;
}

#formMessage.error {
	background: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
}

.contact-info {
	background-color: #1a1a3e;
	color: var(--color-white);
	padding: var(--spacing-sm);
	border-radius: var(--radius-md);
	margin: var(--spacing-sm) 0;
}

.contact-info .info-row {
	display: flex;
	align-items: flex-start;
	margin-bottom: 15px;
	font-size: var(--font-size-base);
	text-align: left;
	justify-content: flex-start;
}

.contact-info .info-row .icon {
	width: 35px;
	height: 35px;
	min-width: 35px;
}

.contact-info .label {
	font-weight: bold;
}

.contact-info .value {
	margin-left: var(--spacing-xs);
}

.oneLigneH {
	display: flex;
}

.zoneImgBanner {
	position: relative;
	opacity: 0;
	animation: fadeIn 0.8s ease-out forwards;
}

#zoneMap {
	background: url(../img/bg_carte-map.png) bottom left no-repeat;
	background-size: cover;
	padding: 100px 0;
}

#zoneMap iframe {
	border-radius: var(--radius-md);
}

.blocReseauxsociaux {
	display: flex;
	gap: var(--spacing-xs);
	align-items: center;
}

.blocReseauxsociaux span {
	font-size: var(--font-size-lg);
}

.blocReseauxsociaux .linkedin-icon {
	background: #F1F2FF;
	color: #1e0d58;
}

.blocReseauxsociaux .linkedin-icon:hover {
	color: var(--color-white);
	background: var(--color-secondary);
	border-color: var(--color-secondary);
}

/*===========================================
  LEGAL PAGES
===========================================*/
#contentLoi,
#contentConditions {
	padding: 60px 0;
}

#contentLoi a,
#contentConditions a {
	color: var(--color-primary);
}

#contentLoi h2 {
	font-size: var(--font-size-2xl);
	font-weight: 600;
}

#contentConditions h2 {
	font-size: var(--font-size-xl);
	font-weight: 600;
	margin: var(--spacing-sm) 0 5px 0;
}

#contentLoi h3,
#contentConditions h3 {
	font-size: 22px;
	font-weight: 500;
	margin: 0 0 5px 0;
}

.service-item {
	border-left: solid 4px #DEE2F2;
	padding: 10px 0 10px 25px;
	margin-bottom: 20px;
	color: #444468;
	cursor: pointer;
}

.service-item:hover {
	transform: translateX(5px);
	color: #444468;
	border-left: solid 4px #38BDF8;
}

.service-item:hover h3,
.service-item:hover p {
	color: #444468;
}

.service-item.active {
	color: #444468;
	border-left: solid 4px #38BDF8;
}

.service-item.active p {
	color: #444468;
	margin: 0;
}


.service-item h3 {
	display: flex;
	align-items: center;
	gap: 15px;
}

section .service-item h3::after {
	display: none
}

.service-item.active h3 {
	color: #fff;
}

.service-content {
	display: none;
}

.service-content.active {
	display: block;
	animation: fadeIn 0.5s;
}


/*===========================================
  LIENS DISCRETS
===========================================*/
.link-discret {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(0,0,0,0.2);
    text-underline-offset: 3px;
}

.link-discret:hover {
    text-decoration-color: rgba(0,0,0,0.5);
}


/*===========================================
  RESPONSIVE
===========================================*/
@media (min-width: 992px) and (max-width: 1480px) {
	.rating-badge {
		position: absolute;
		bottom: 1rem;
		left: 1rem;
	}
}

@media (max-width: 1326px) {
	.card-service {
		min-height: 430px;
	}
}

@media (max-width: 1208px) {
	#bannerContact .twoBts {
		flex-direction: column;
		gap: 0;
	}

	.oneLigneH {
		flex-direction: column;
	}

	.contact-info .value {
		margin-left: 0;
	}
}

@media (max-width: 1200px) {
	.card-service {
		min-height: 420px;
	}
}

@media (max-width: 1144px) {
	.card-service {
		min-height: 460px;
	}
}

@media (max-width: 1190px) {
	.onePurple font br {
		display: none;
	}

	section h3 {
		font-size: 62px;
	}

	.oneAboutE {
		padding: var(--spacing-md) var(--spacing-xs);
	}
}

@media (max-width: 1080px) {
	.features-section {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--spacing-md);
		padding: 60px 80px 60px 0px;
	}
}

@media (max-width: 991px) {
	#bannerLPInterne .descriptionClient p {
		text-align: left;
	}

	#bannerLPInterne h1,
	#vision h3,
	#bannerPerformance .descriptionClient h2,
	#solutions_performance h1,
	#marketing_numerique h1,
	#blueprint h2,
	#projet h2,
	#formation_IA h2,
	#solutions_affaires h2,
	#Campagnes_publicitaires h2,
	#referencement_organique h2,
	#service_design h2,
	#bannerCroissance .descriptionClient h2 {
		font-size: 34px !important;
	}

	.descriptionClient h2 br {
		display: none;
	}

	#blueprint h3,
	#projet h3,
	#formation_IA h3,
	#referencement_organique h3 {
		font-size: 26px;
	}

	.zoneImgBanner {
		margin-top: 20px;
	}

	#diagnostic h2 {
		text-align: center;
		font-size: 32px;
	}

	section#FAQ {
		padding: 60px 0;
	}

	#Campagnes_publicitaires .accordion-custom h3 .accordion-button.collapsed,
	#Campagnes_publicitaires .accordion-custom h3 .accordion-button,
	#service_design h3.content-title {
		font-size: 32px;
	}

	#bannerLPInterne h1 br {
		display: none;
	}

	#ficheTeam .descriptionClient p {
		text-align: left !important;
	}

	#ficheTeam h2 {
		font-size: 20px;
		margin-bottom: 20px;
		padding: 8px 10px;
	}

	#ficheTeam h1 {
		font-size: 36px;
	}

	.team-row {
		flex-direction: column;
	}

	.team-card.small {
		flex: inherit;
	}

	.team-card.small .team-card-image img {
		filter: grayscale(0);
	}

	.team-card.small .team-card-header {
		opacity: 1;
		pointer-events: auto;
	}

	.team-card.large {
		flex: inherit;
	}

	section#vision .container {
		gap: 20px;
		flex-direction: column-reverse;
	}

	.accordion-content {
		padding-left: 0;
		margin-top: 30px;
	}

	#team h3 {
		font-size: 36px;
	}

	.language-selector select {
		padding-top: 0;
	}

	#bannerLP .container {
		padding: 20vh var(--spacing-xs) 20vh var(--spacing-xs);
	}

	#FAQ .p-4 {
		padding: 0 !important;
	}

	#FAQ .gap-5 {
		gap: 1rem !important;
	}

	.titleTestimonial {
		font-size: 2.5rem;
	}

	#testimonial .carousel-grid {
		display: flex;
		grid-template-columns: 1fr 1fr;
		gap: 3rem;
		flex-direction: column-reverse;
	}

	.rating-badge {
		position: absolute;
		bottom: 1rem;
		left: 1rem;
	}

	.rotate-picto {
		max-width: 70px;
	}

	#testimonial .icon-wrapper {
		position: absolute;
		top: 0px;
		right: 6px;
		z-index: 1;
	}

	.language-selector {
		border-left: none;
		margin-left: 0;
		padding: 0 var(--spacing-sm) var(--spacing-xs) var(--spacing-sm);
	}

	.forMob {
		display: block;
	}

	#bannerLPInterne {
		background-position: top left;
	}

	#aboutUS .container,
	section#FAQ .container,
	.blocSolutions,
	.bloTopFooter,
	#bannerLPInterne .container,
	#vision .container,
	#mission .container,
	#ficheTeam .container,
	#biographie .container,
	#blueprint .container,
	#solutions_affaires .container,
	.blocTabs,
	#formation_IA .container,
	#Campagnes_publicitaires .accordion-body,
	#bannerPerformance .container,
	#bannerCroissance .container,
	#bannerPurple2 .container,
	#bannerContact .container {
		flex-direction: column;
	}

	#bannerContact h1 {
		font-size: 36px;
	}

	#bannerContact h2 {
		font-size: var(--font-size-xl);
	}

	#bannerContact .twoBts .btContactUS {
		width: 280px !important;
		min-width: 240px !important;
		max-width: 240px !important;
		height: 60px !important;
		min-height: 60px !important;
		padding: 15px var(--spacing-sm) !important;
		font-size: var(--font-size-lg);
		justify-content: left;
	}

	#bannerContact .twoBts .btContactUS span {
		display: none;
	}

	#ficheTeam .container,
	#projet .container,
	#blueprint .container {
		flex-direction: column-reverse;
	}

	.blocCounter {
		flex-direction: column;
		gap: var(--spacing-sm);
	}

	.encratsPerformance {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}

	.bloTopFooter {
		padding: var(--spacing-md);
	}

	.blocBottomFooter {
		padding: 80px 0 var(--spacing-lg) 0;
	}

	.blocBottomFooter .containerTop {
		grid-template-columns: repeat(2, 1fr);
	}

	#blueprint,
	#solutions_affaires,
	#projet,
	#formation_IA,
	#referencement_organique,
	#service_design,
	#Campagnes_publicitaires,
	section#biographie,
	section#mission,
	#team,
	#solutions_performance,
	#marketing_numerique {
		padding: var(--spacing-lg) 0;
	}

	#ficheTeam,
	#bannerPerformance,
	#bannerCroissance {
		padding: 110px 0 var(--spacing-lg) 0;
	}

	.cards {
		grid-template-columns: repeat(2, 1fr);
		margin-top: -80px;
		display: grid;
	}

	.accordion-button {
		padding: var(--spacing-sm) 0;
	}

	#bannerLP h1 {
		font-size: 36px;
	}

	.descriptionClient p,
	section#bannerLP .descriptionClient h2 {
		font-size: 20px;
		line-height: 28px;
	}
}

@media (max-width: 787px) {
	.descriptionClient {
			text-align: center;
		}

.descriptionClient p,
section#bannerLP .descriptionClient h2 {
	text-align: center;
	max-width: 100%;
}
.descriptionClient a.btContactUS {
	margin: var(--spacing-md) auto;
}
	.col-12 {
		width: 100%;
	}

	section h3 {
		font-size: 36px;
	}

	#blueprint h2,
	#projet h2,
	#formation_IA h2,
	#solutions_affaires h2,
	#Campagnes_publicitaires h2,
	#referencement_organique h2,
	#service_design h2 {
		font-size: var(--font-size-3xl);
	}
}

@media (max-width: 674px) {
	.team-card-header {
		flex-direction: column;
		gap: var(--spacing-xs);
	}

	.team-card-footer {
		display: none;
	}

	.btn-voir-plus {
		position: absolute;
		bottom: 25px;
	}

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

	.card-service {
		min-height: 260px;
		padding: var(--spacing-sm);
	}

	.card-service:nth-child(2),
	.card-service:last-child {
		min-height: 320px;
	}
}

@media (max-width: 500px) {
	.about-encart {
		grid-template-columns: repeat(1, 1fr);
	}

	section#performance h2 {
		font-size: var(--font-size-3xl);
	}

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

	section#solutions h2 {
		font-size: var(--font-size-3xl);
		text-align: center;
	}

	section#solutions,
	#testimonial,
	section#performance {
		padding: var(--spacing-lg) 0;
	}

	#bannerLP {
		padding-bottom: 0;
	}

	a.btContactUS {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		text-align: left;
		line-height: normal;
	}

	footer h2 {
		font-size: 34px;
	}

	.blocBottomFooter .containerTop {
		grid-template-columns: repeat(1, 1fr);
	}
}

@media (max-width: 373px) {
	.card-service:nth-child(2) {
		min-height: 350px;
	}

	.card-service:nth-child(3) {
		min-height: 330px;
	}


	#ficheTeam .descriptionClient a.btContactUS {
		margin: var(--spacing-md) 0 var(--spacing-lg) 0;
		font-size: var(--font-size-lg);
		padding: 14px var(--spacing-sm);
	}

	#ficheTeam .descriptionClient a.btContactUS .arrowGo {
		display: none;
	}
}

@media (max-width: 340px) {
	.card-service:nth-child(2) {
		min-height: 380px;
	}

	.card-service:last-child {
		min-height: 350px;
	}

	.linkstoContact {
		flex-direction: column;
		gap: 15px;
	}
}

@media (max-width: 330px) {
	.card-service:first-child {
		min-height: 300px;
	}

	.card-title {
		font-size: var(--font-size-xl) !important;
		margin: 0 0 var(--spacing-xs) 0;
	}
}