/* =====================================================================
   hero-light.css  —  ANS Agency
   Variante "hero clair" + cluster 3D d'appareils flottants.
   Ce fichier est chargé APRÈS custom.css et n'agit QUE sur le hero
   (classe .hero-light-prime) et le header de la page d'accueil.
   Aucune règle existante n'est modifiée : tout est additif et scopé.
   ===================================================================== */

/* ---------- 1. Header lisible sur fond clair (accueil only) ---------- */
.main-header.header-prime .navbar-brand img{
	/* le logo d'origine est blanc -> on l'assombrit pour le fond clair */
	filter: brightness(0) saturate(100%);
	opacity: 0.9;
}

/* Logo SVG de l'accueil : le fichier ne définit pas de dimensions natives. */
.main-header.header-prime .navbar-brand img[src$="ansAGENCYlogo.svg"]{
	display: block;
	width: 140px;
	height: auto;
	filter: none;
	opacity: 1;
}

/* Test du nouveau logo : dimensions et visibilité garanties dans le header. */
.main-header.header-prime .navbar-brand .header-logo-test{
	display: block !important;
	width: 140px !important;
	min-width: 140px;
	height: 52px !important;
	max-width: none;
	visibility: visible !important;
	opacity: 1 !important;
	filter: none !important;
}

.footer-logo-prime img[src$="anslogowhite.svg"]{
	display: block;
	width: 140px;
	height: auto;
}
.main-header.header-prime .main-menu ul li a{
	color: var(--primary-color);
}
.main-header.header-prime .main-menu ul li a:hover,
.main-header.header-prime .main-menu ul li a:focus{
	color: var(--accent-color);
}
.main-header.header-prime .header-sticky{
	border-bottom-color: var(--divider-color);
}

/* ---------- 1bis. État sticky : la barre repasse sur fond foncé ------
   Au scroll, le JS ajoute .active à .header-sticky (fond = --primary-color).
   On restaure alors un logo et des liens clairs, lisibles sur le foncé. */
.main-header.header-prime .header-sticky.active{
	border-bottom-color: var(--dark-divider-color);
}
.main-header.header-prime .header-sticky.active .navbar-brand img{
	filter: none;
	opacity: 1;
}
.main-header.header-prime .header-sticky.active .main-menu ul li a{
	color: var(--white-color);
}
.main-header.header-prime .header-sticky.active .main-menu ul li a:hover,
.main-header.header-prime .header-sticky.active .main-menu ul li a:focus{
	color: var(--accent-color);
}

/* ---------- 1ter. Header & hero pleine largeur + header plus bas -----
   Le header et le hero utilisent .bg-section (max-width 1880, centré,
   coins arrondis). Ici on les passe en pleine largeur, sans marges
   latérales ni border-radius, et on réduit la hauteur du header. */

/* Header collé en haut, sur toute la largeur, sans arrondi */
.main-header.header-prime{
	top: 0;
}
.main-header.header-prime .header-sticky,
.main-header.header-prime .header-sticky.active{
	width: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
}
/* Hauteur du header réduite */
.main-header.header-prime .navbar{
	padding: 12px 0;
}

/* Hero en pleine largeur, sans arrondi ni marge.
   On réduit aussi l'écart header -> hero (padding haut 240px -> 150px). */
.hero-prime.hero-light-prime{
	width: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
	padding: 180px 0 clamp(28px, 4vh, 42px);
	background: #fafbfe;
}

/* Remonte les logos partenaires dans le premier écran du hero.
   Le template applique 150px de marge, ce qui les repousse sous la ligne
   de flottaison sur les écrans de portable. */
.hero-light-prime .hero-footer-prime{
	margin-top: clamp(12px, 2.5vh, 24px);
	display: block;
}

/* Bandeau de logos sur toute la largeur de la fenêtre. */
.hero-light-prime .hero-company-supports-slider-prime{
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: 0 clamp(24px, 5vw, 80px);
	box-sizing: border-box;
}

/* ---------- 2. Hero : passage en thème clair ------------------------- */
/* Le fond clair vient déjà de .bg-section (#F9F9F9).
   Ici on ne corrige que les éléments forcés en blanc par le thème sombre. */

.hero-light-prime .hero-item-content-prime h3,
.hero-light-prime .hero-footer-content-prime h3{
	color: var(--primary-color);
}

/* Mise en avant d'une partie du titre en bleu (comme la maquette).
   SplitText conserve le span, la couleur est héritée par les caractères. */
.hero-light-prime .section-title h1 .hero-accent-text{
	color: var(--accent-color);
}

/* Titre principal : une police géométrique, élégante et contemporaine. */
.hero-light-prime .section-title h1{
	font-family: "Sora", sans-serif;
	font-size: 72px;
	font-weight: 600;
	letter-spacing: -0.055em;
	line-height: 1.04;
}

/* ----- Verbe animé dans le H1 (rotation + soulignement) -----------------
   Un "sizer" invisible (le mot le plus long) réserve la largeur ; les verbes
   sont superposés en absolu et apparaissent l'un après l'autre en fondu. */
.hero-rotator{
	position: relative;
	display: inline-block;
	text-align: left;
	/* Soulignement bleu fixe (ne bouge pas avec le changement de verbe) */
	border-bottom: 0.06em solid var(--accent-color);
	padding-bottom: 0.06em;
}
.hero-rotator-sizer{
	visibility: hidden;
	white-space: nowrap;
}
.hero-rotator-word{
	position: absolute;
	left: 0;
	top: 0;
	white-space: nowrap;
	color: var(--primary-color);
	opacity: 0;
	animation: heroWordCycle 12s infinite;
}
.hero-rotator-word:nth-child(2){ animation-delay: 0s; }
.hero-rotator-word:nth-child(3){ animation-delay: 3s; }
.hero-rotator-word:nth-child(4){ animation-delay: 6s; }
.hero-rotator-word:nth-child(5){ animation-delay: 9s; }

@keyframes heroWordCycle{
	0%       { opacity: 0; transform: translateY(0.28em); }
	3%, 21%  { opacity: 1; transform: translateY(0); }
	24%      { opacity: 0; transform: translateY(-0.28em); }
	100%     { opacity: 0; }
}

/* Accessibilité : pas d'animation -> on fige le premier verbe */
@media (prefers-reduced-motion: reduce){
	.hero-rotator-word{ animation: none; }
	.hero-rotator-word:nth-child(2){ opacity: 1; }
}

.hero-light-prime .hero-item-list-prime{
	border-top-color: var(--divider-color);
}

.hero-light-prime .hero-footer-content-prime{
	border-right-color: var(--divider-color);
}

/* Bouton secondaire "Voir nos réalisations" : visible sur clair */
.hero-light-prime .btn-default.btn-dark{
	color: var(--primary-color);
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
/* Fond blanc -> flèche sombre (le template utilise arrow-white par défaut) */
.hero-light-prime .btn-default.btn-dark::before{
	background-image: url('../images/arrow-primary.svg');
}
.hero-light-prime .btn-default.btn-dark:hover{
	color: var(--white-color);
}
.hero-light-prime .btn-default.btn-dark:hover::before{
	filter: brightness(0) invert(1);
}

/* Logos clients : conserver leurs couleurs et leur luminosité d'origine */
.hero-light-prime .company-supports-logo-prime img{
	width: 100%;
	max-width: 220px;
	height: 38px;
	filter: none;
	opacity: 1;
	object-fit: contain;
}
.hero-light-prime .company-supports-logo-prime img:hover{
	opacity: 1;
}

/* ---------- 3. Colonne visuelle (remplace .hero-image-prime) --------- */
.hero-visual-prime{
	width: calc(56% - 2.083vw);
	align-self: stretch;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Vidéo du hero (remplace le cluster d'appareils en CSS) */
.hero-video-prime{
	width: 78%;
	margin: 0 auto;
	line-height: 0;
}
.hero-video-prime video{
	display: block;
	width: 100%;
	height: auto;
	/* "Dézoom" : rentre légèrement le contenu pour ne pas voir les rebords */
	transform: scale(0.9);
}

/* Visuel statique du hero : remplace le cluster de devices animé. */
.hero-static-image{
	display: block;
	width: 100%;
	height: auto;
	max-width: 80%;
	object-fit: contain;
}

.hero-devices{
	position: relative;
	width: 100%;
	height: clamp(500px, 48vw, 620px);
	isolation: isolate;
	pointer-events: none;
	user-select: none;
}

.hero-device{
	position: absolute;
	display: block;
	height: auto;
	object-fit: contain;
	pointer-events: none;
	user-select: none;
	will-change: transform;
	filter: drop-shadow(0 18px 25px rgba(0, 0, 0, 0.16));
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

.hero-device--desktop{
	width: clamp(430px, 42vw, 670px);
	top: 2%;
	right: -3%;
	z-index: 1;
	transform: translate3d(0, 0, 0) rotate(-0.3deg);
	animation-name: heroDeviceDesktopFloat;
	animation-duration: 2.4s;
	animation-delay: -0.5s;
}

.hero-device--macbook{
	width: clamp(360px, 36vw, 570px);
	bottom: 1%;
	left: -4%;
	z-index: 2;
	transform: translate3d(0, 0, 0) rotate(0.45deg);
	animation-name: heroDeviceMacbookFloat;
	animation-duration: 3.2s;
	animation-delay: -1.5s;
}

.hero-device--phone{
    width: clamp(140px, 16vw, 220px);
    right: 9%;
    bottom: 6%;
    z-index: 3;
    transform: translate3d(0, 0, 0) rotate(-0.55deg);
    filter: drop-shadow(0 20px 28px rgba(0, 0, 0, 0.18));
    animation-name: heroDevicePhoneFloat;
    animation-duration: 1.1s;
    animation-delay: -0.2s;
}

@keyframes heroDeviceDesktopFloat{
	from{ transform: translate3d(-3px, 5px, 0) rotate(-0.35deg); }
	to{ transform: translate3d(5px, -7px, 0) rotate(0.25deg); }
}

@keyframes heroDeviceMacbookFloat{
	from{ transform: translate3d(6px, -5px, 0) rotate(0.55deg); }
	to{ transform: translate3d(-7px, 10px, 0) rotate(-0.25deg); }
}

@keyframes heroDevicePhoneFloat{
	from{ transform: translate3d(-4px, 8px, 0) rotate(-0.65deg); }
	to{ transform: translate3d(4px, -10px, 0) rotate(0.35deg); }
}

.hero-devices-scene{
	position: relative;
	width: 100%;
	height: 620px;
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 2000px;
	overflow: visible;
}

/* halo cyan derrière le cluster */
.hero-devices-scene .hv-glow{
	position: absolute;
	left: 52%;
	top: 50%;
	width: 660px;
	height: 520px;
	transform: translate(-50%, -50%);
	background: radial-gradient(ellipse at center,
		rgba(11,190,226,0.28) 0%, rgba(11,190,226,0.05) 45%, transparent 68%);
	filter: blur(18px);
	z-index: 0;
	pointer-events: none;
}

.hv-stage{
	position: relative;
	width: 600px;
	height: 520px;
	transform-style: preserve-3d;
	/* cluster agrandi et plus frontal pour coller à la maquette de référence */
	transform: rotateY(-15deg) rotateX(5deg) scale(1.16);
	z-index: 1;
}

.hv-device{
	position: absolute;
	transform-style: preserve-3d;
	will-change: transform;
}

@media (prefers-reduced-motion: no-preference){
	.hv-monitor{ animation: hv-fl1 8s ease-in-out infinite; }
	.hv-laptop { animation: hv-fl2 9s ease-in-out infinite 0.6s; }
	.hv-phone  { animation: hv-fl3 7s ease-in-out infinite 0.3s; }
}

@keyframes hv-fl1{ 0%,100%{ transform: translateZ(-30px) translateY(0); } 50%{ transform: translateZ(-30px) translateY(-16px); } }
@keyframes hv-fl2{ 0%,100%{ transform: translateZ(60px)  translateY(0); } 50%{ transform: translateZ(60px)  translateY(-24px); } }
@keyframes hv-fl3{ 0%,100%{ transform: translateZ(120px) rotateY(8deg) translateY(0); } 50%{ transform: translateZ(120px) rotateY(8deg) translateY(-12px); } }

/* ---- Monitor (éditeur de code) ---- */
.hv-monitor{ left: 92px; top: 40px; transform: translateZ(-30px); }
.hv-monitor .hv-screen{
	width: 470px;
	border-radius: 16px;
	background: #171f22;
	padding: 11px;
	border: 1px solid rgba(255,255,255,0.07);
	box-shadow: 0 50px 90px -30px rgba(3,23,29,0.55);
}
.hv-monitor .hv-stand{ width: 54px; height: 40px; margin: 0 auto; background: linear-gradient(#202a2e,#161d20); }
.hv-monitor .hv-base{ width: 150px; height: 11px; margin: 0 auto; border-radius: 0 0 8px 8px; background: #1b2427; }

.hv-code{
	border-radius: 7px;
	overflow: hidden;
	background: #0a1418;
	aspect-ratio: 16 / 10;
	display: flex;
	flex-direction: column;
}
.hv-code-top{
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 9px 12px;
	background: #0e1c21;
}
.hv-code-top .d{ width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.hv-code-top .d:nth-child(2){ background: #febc2e; }
.hv-code-top .d:nth-child(3){ background: #28c840; }
.hv-code-top .tab{ height: 9px; width: 54px; border-radius: 4px; background: #16282e; margin-left: 6px; }
.hv-code-top .tab.on{ background: rgba(11,190,226,0.22); }
.hv-code-body{ display: flex; flex: 1; }
.hv-gutter{ width: 30px; background: #0c171b; display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 13px 0; }
.hv-gutter i{ width: 8px; height: 5px; border-radius: 2px; background: #1d3036; }
.hv-lines{ flex: 1; padding: 13px 14px; display: flex; flex-direction: column; gap: 9px; }
.hv-lines .ln{ display: flex; gap: 6px; margin: 0; }
.hv-lines .ln span{ height: 5px; border-radius: 3px; display: block; }
.hv-lines .ln.i1{ padding-left: 0; }
.hv-lines .ln.i2{ padding-left: 14px; }
.hv-lines .ln.i3{ padding-left: 28px; }
.tk-key{ width: 42px; background: #0b38e2c2; }
.tk-fn{ width: 60px; background: #7fd6e6; }
.tk-str{ width: 38px; background: #e6c07b; }
.tk-var{ width: 30px; background: #8b9da3; }
.tk-com{ width: 74px; background: #3a5560; }
.tk-pun{ width: 16px; background: #5a7782; }

/* ---- Laptop (site vitrine clair) ---- */
.hv-laptop{ left: -28px; top: 196px; transform: translateZ(60px); }
.hv-laptop .hv-screen{
	width: 388px;
	border-radius: 12px 12px 3px 3px;
	background: #171f22;
	padding: 10px 10px 12px;
	border: 1px solid rgba(255,255,255,0.07);
	box-shadow: 0 40px 70px -28px rgba(3,23,29,0.5);
}
.hv-laptop-base{
	width: 444px;
	margin-left: -38px;
	height: 13px;
	background: linear-gradient(#cfd6d8,#9aa4a7);
	border-radius: 3px 3px 9px 9px;
	box-shadow: 0 18px 30px -12px rgba(3,23,29,0.4);
}
.hv-laptop-base::after{ content:''; display:block; width:60px; height:5px; margin:0 auto; border-radius:0 0 6px 6px; background:#7f8a8d; }

.hv-site{
	border-radius: 5px;
	overflow: hidden;
	background: #f4f6f7;
	aspect-ratio: 16 / 10.4;
	display: flex;
	flex-direction: column;
}
.hv-site-nav{ display:flex; align-items:center; justify-content:space-between; padding:9px 14px; border-bottom:1px solid #dde5e6; }
.hv-site-nav .logo{ width:34px; height:7px; border-radius:3px; background:#16262b; }
.hv-site-nav .navitems{ width:90px; height:6px; border-radius:3px; background:#c4d0d2; }
.hv-site-hero{ padding:14px 16px 0; display:flex; flex-direction:column; gap:7px; }
.hv-site-hero .h{ width:120px; height:9px; border-radius:4px; background:#16262b; }
.hv-site-hero .t{ width:150px; height:6px; border-radius:3px; background:#c4d0d2; }
.hv-site-hero .btn{ width:64px; height:15px; border-radius:5px; background:#0b38e2c2; margin-top:3px; }
.hv-site-cards{ padding:12px 16px 16px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px; flex:1; }
.hv-site-cards .card{ background:#e7edee; border-radius:7px; }
.hv-site-cards .card::before{ content:''; display:block; height:54%; border-radius:7px 7px 0 0; background:repeating-linear-gradient(135deg,#d6e0e2 0 7px,#cdd9db 7px 14px); }

/* ---- Phone (site mobile) ---- */
.hv-phone{ right: 0px; top: 140px; transform: translateZ(120px) rotateY(8deg); }
.hv-phone .hv-screen{
	width: 150px;
	height: 312px;
	border-radius: 30px;
	background: #0c1316;
	padding: 7px;
	border: 1px solid rgba(255,255,255,0.08);
	box-shadow: 0 40px 70px -24px rgba(3,23,29,0.6);
	position: relative;
}
.hv-notch{ position:absolute; top:13px; left:50%; transform:translateX(-50%); width:46px; height:13px; border-radius:99px; background:#0c1316; z-index:2; }
.hv-mobile{
	width: 100%;
	height: 100%;
	border-radius: 24px;
	overflow: hidden;
	background: #f5f7f8;
	display: flex;
	flex-direction: column;
}
.hv-status{ display:flex; align-items:center; justify-content:space-between; padding:8px 16px 3px; }
.hv-status .clk{ width:22px; height:5px; border-radius:2px; background:#16262b; }
.hv-status .sig{ width:26px; height:5px; border-radius:2px; background:#16262b; }
.hv-m-nav{ display:flex; align-items:center; justify-content:space-between; padding:6px 14px 10px; }
.hv-m-nav .logo{ width:42px; height:7px; border-radius:3px; background:#16262b; }
.hv-m-nav .burger{ width:16px; height:13px; border-radius:4px; background:#0b38e2c2; }
.hv-m-hero{ margin:0 14px; height:78px; border-radius:9px; background:repeating-linear-gradient(135deg,#d6e0e2 0 8px,#cdd9db 8px 16px); }
.hv-m-lines{ padding:12px 14px; display:flex; flex-direction:column; gap:6px; }
.hv-m-lines span{ height:6px; border-radius:3px; background:#c4d0d2; }
.hv-m-lines span:nth-child(1){ width:80%; background:#16262b; height:7px; }
.hv-m-lines span:nth-child(2){ width:100%; }
.hv-m-lines span:nth-child(3){ width:62%; }
.hv-m-btns{ margin-top:auto; padding:0 14px 16px; display:flex; gap:8px; }
.hv-m-btns span{ flex:1; height:20px; border-radius:7px; }
.hv-m-btns span:nth-child(1){ background:#0b38e2c2; }
.hv-m-btns span:nth-child(2){ background:#dde6e7; }

/* ---------- 4. Responsive ------------------------------------------- */
/* IMPORTANT : le template fait passer .hero-content-prime à 50% sous 1440px
   mais ne connaît que l'ancienne classe .hero-image-prime pour la colonne
   visuelle. Notre colonne (.hero-visual-prime) doit donc suivre les mêmes
   largeurs, sinon la somme dépasse 100% et le bloc passe à la ligne trop tôt
   (ce qui empilait les devices dès ~1261px). */
@media only screen and (max-width: 1440px){
	.hero-visual-prime{ width: calc(50% - 20px); }
}

/* ----- Correctif "flex-wrap" du hero -------------------------------------
   Cause : .hero-content-box-prime combine un gap en vw (4.167vw) avec des
   largeurs en % et un margin-left calculé. La somme texte + gap + visuel peut
   dépasser 100% -> la colonne visuelle saute à la ligne "toute seule" à des
   largeurs imprévisibles (effet visible au zoom).
   Solution : tant qu'on est en 2 colonnes (>=769px), on interdit le retour à
   la ligne (nowrap), on fige le gap en px et on autorise les colonnes à se
   réduire (min-width:0) pour qu'elles tiennent toujours côte à côte. */
@media only screen and (min-width: 769px){
	.hero-light-prime .hero-content-box-prime{
		flex-wrap: nowrap;
		gap: 30px 40px;
		/* Évite que le contenu soit collé au bord gauche (écrans ~1440-1512) :
		   on garde au moins 40px de marge, et on aligne sur le conteneur au-delà. */
		margin-left: max(40px, calc((100vw - 1500px) / 2 - 5px));
		padding-right: 24px;
	}
	.hero-light-prime .hero-content-prime{
		min-width: 0;
		flex: 1 1 46%;
		transform: translateY(-10%);
	}
	.hero-light-prime .hero-visual-prime{
		min-width: 0;
		flex: 1 1 54%;
	}
	.hero-light-prime .hero-static-image{
		transform: translateY(-35px);
		transform-origin: center;
	}
	/* Cluster de devices 20% plus petit et légèrement remonté. */
	.hero-light-prime .hero-devices{
		transform: translateY(-35px) scale(0.8);
		transform-origin: center;
	}
}
/* On garde les 2 colonnes côte à côte jusqu'à 768px ; en dessous on empile. */
@media only screen and (min-width: 769px) and (max-width: 1024px){
	.hero-content-prime{ width: calc(50% - 20px); }
	.hero-visual-prime{ width: calc(50% - 20px); }
}
@media only screen and (max-width: 768px){
	.hero-prime.hero-light-prime{
		padding-top: 117px;
	}
	.hero-light-prime .hero-content-box-prime{
		flex-direction: column;
		margin-left: 0;
		padding: 0 20px;
		gap: 24px;
	}
	.hero-light-prime .hero-visual-prime{
		order: 1;
		width: 100%;
		margin-bottom: 10%;
	}
	.hero-light-prime .hero-content-prime{
		order: 2;
		width: 100%;
	}
	.hero-light-prime .hero-static-image{
		width: 25%;
		max-width: 140px;
	}
	/* Boutons CTA côte à côte */
	.hero-light-prime .hero-btn-prime{
		flex-wrap: nowrap;
		gap: 10px;
		align-items: center;
	}
	.hero-light-prime .hero-btn-prime .btn-default{
		flex: 1 1 0;
		min-width: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 14px 34px 14px 12px;
		font-size: 14px;
		line-height: 1.2;
	}
	.hero-light-prime .hero-btn-prime .btn-default::before{
		right: 10px;
		width: 18px;
		height: 18px;
	}
}

/* Réduction de 10% du H1 sur les paliers responsive (54->49px, 28->25px) */
@media only screen and (max-width: 991px){
	.hero-light-prime .section-title h1{ font-size: 49px; }
}
@media only screen and (max-width: 767px){
	.hero-light-prime .section-title h1{ font-size: 25px; }
}

@media only screen and (max-width: 1100px){
	.hero-devices{
		height: clamp(430px, 52vw, 540px);
		max-width: 98%;
		margin: 0 auto;
	}
	.hero-device--desktop{
		width: clamp(360px, 48vw, 520px);
		top: 4%;
		right: -1%;
	}
	.hero-device--macbook{
		width: clamp(310px, 42vw, 460px);
		left: 0;
		bottom: 4%;
	}
	.hero-device--phone{
		width: clamp(96px, 17vw, 255px);
        right: 22%;
        bottom: 2%;
	}
}

@media only screen and (max-width: 767px){
	.hero-devices{
		height: clamp(300px, 78vw, 390px);
		max-width: 100%;
		margin-top: 10px;
		overflow: visible;
	}
	.hero-device{
		filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.14));
	}
	.hero-device--desktop{
		width: min(92vw, 420px);
		top: 2%;
		right: 50%;
		transform: translate3d(50%, 0, 0) rotate(-0.2deg);
		animation-name: heroDeviceDesktopFloatMobile;
	}
	.hero-device--macbook{
		width: min(78vw, 350px);
		left: 0;
		bottom: 4%;
		animation-name: heroDeviceMacbookFloatMobile;
	}
	.hero-device--phone{
        width: min(32vw, 125px);
        right: 15%;
        bottom: 1%;
        animation-name: heroDevicePhoneFloatMobile;
	}
}

@keyframes heroDeviceDesktopFloatMobile{
	from{ transform: translate3d(49%, 3px, 0) rotate(-0.25deg); }
	to{ transform: translate3d(51%, -5px, 0) rotate(0.15deg); }
}

@keyframes heroDeviceMacbookFloatMobile{
	from{ transform: translate3d(3px, -3px, 0) rotate(0.35deg); }
	to{ transform: translate3d(-4px, 6px, 0) rotate(-0.15deg); }
}

@keyframes heroDevicePhoneFloatMobile{
	from{ transform: translate3d(-2px, 5px, 0) rotate(-0.45deg); }
	to{ transform: translate3d(3px, -7px, 0) rotate(0.25deg); }
}

@media (prefers-reduced-motion: reduce){
	.hero-device{
		animation: none;
		will-change: auto;
	}
}

/* Échelle du cluster adaptée à la largeur de sa colonne */
@media only screen and (max-width: 1525px){
	.hero-devices-scene{ height: 560px; }
	.hv-stage{ transform: rotateY(-15deg) rotateX(5deg) scale(1.0); }
}
@media only screen and (max-width: 1440px){
	.hero-devices-scene{ height: 520px; }
	.hv-stage{ transform: rotateY(-15deg) rotateX(5deg) scale(0.86); }
}
@media only screen and (max-width: 1199px){
	.hero-devices-scene{ height: 480px; }
	.hv-stage{ transform: rotateY(-14deg) rotateX(5deg) scale(0.76); }
}
/* En dessous de 1024px la colonne visuelle repasse pleine largeur (sous le
   texte) : on a de nouveau de la place, on remonte donc l'échelle. */
@media only screen and (max-width: 1024px){
	.hero-devices-scene{ height: 520px; }
	.hv-stage{ transform: rotateY(-13deg) rotateX(4deg) scale(1.0); }
}
@media only screen and (max-width: 600px){
	.hero-devices-scene{ height: 380px; }
	.hv-stage{ transform: rotateY(-12deg) rotateX(4deg) scale(0.66); }
}
@media only screen and (max-width: 420px){
	.hv-stage{ transform: rotateY(-11deg) rotateX(4deg) scale(0.54); }
}

/* ---------- 5. Section services : 6 cartes en 2 lignes de 3 ----------
   Les cartes sont en col-xl-3 (4 par ligne) -> on obtenait 4 + 2.
   On force 3 par ligne (33,33%) sur grand écran, sans toucher au HTML
   ni aux autres sections (sélecteur scopé à .our-features-prime). */
@media only screen and (min-width: 1200px){
	.our-features-prime .row > .col-xl-3{
		flex: 0 0 auto;
		width: 33.333333%;
		max-width: 33.333333%;
	}
}

/* ---------- 6. Accueil : header transparent + gradient hero ---------- */
header.main-header.header-prime .header-sticky{
	background: transparent !important;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-bottom-color: transparent;
}

header.main-header.header-prime .header-sticky.active{
	background: rgba(249, 251, 254, 0.88) !important;
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border-bottom-color: var(--divider-color);
}

header.main-header.header-prime .header-sticky.active .navbar-brand img{
	filter: brightness(0) saturate(100%);
	opacity: 0.9;
}

header.main-header.header-prime .header-sticky.active .main-menu ul li a{
	color: var(--primary-color);
}

.hero-prime.hero-light-prime{
	background:
		radial-gradient(circle at 12% 12%, rgba(11, 56, 226, 0.14), transparent 32%),
		linear-gradient(135deg, rgba(11, 56, 226, 0.08) 0%, #fafbfe 38%, #ffffff 100%);
}