:root{
	--blue:#0a80b6;
	--blue-2:#0fb6d9;
	--green:#78c340;
	--dark:#1f2430;
	--mid:#2c3342;
	--light:#f5f7fb;
	--yellow:#e7ff63;
	--muted:#8da0b6;
	--radius:18px;
	--shadow:0 10px 30px rgba(10,128,182,.15);
}

html{scroll-behavior:smooth;}
body{
	font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
	color:var(--mid);
	background:var(--light);
}

/* -------- NAV -------- */
.navbar{
	backdrop-filter:saturate(140%) blur(8px);
	--bs-navbar-padding-y:.65rem;
}
.navbar-brand{
	font-family:'Montserrat',sans-serif;
	font-weight:800;
	letter-spacing:.5px;
}
.badge-slogan{
	background:linear-gradient(135deg,var(--green),#a7e36b);
	color:#0b2a14;
	font-weight:700;
	border-radius:999px;
	padding:.4rem .75rem;
}
.nav-link{font-weight:600;}

/* -------- HERO -------- */
.hero{
	position:relative;
	min-height:88vh;
	display:grid;
	place-items:center;
	overflow:hidden;
	color:#fff;
	background:
		linear-gradient(120deg,rgba(15,182,217,.18),rgba(120,195,64,.18)),
		radial-gradient(1200px 600px at -10% 120%,rgba(120,195,64,.35),transparent 60%),
		radial-gradient(1200px 600px at 120% -10%,rgba(15,182,217,.35),transparent 60%),
		repeating-linear-gradient(125deg,rgba(255,255,255,.04) 0 20px,rgba(255,255,255,.06) 20px 40px),
		linear-gradient(135deg,var(--blue),var(--blue-2));
	margin-top:30px;
}
/* bandes obliques */
.hero::before,
.hero::after{
	content:"";
	position:absolute;
	inset:auto -10% -35% -10%;
	height:55vh;
	transform:skewY(-10deg);
	background:
		linear-gradient(90deg,transparent 0 10%,rgba(255,255,255,.12) 10% 12%,transparent 12% 30%,rgba(120,195,64,.25) 30% 31.5%,transparent 31.5% 60%,rgba(255,255,255,.12) 60% 62%,transparent 62% 100%);
	pointer-events:none;
}
.hero::after{
	inset:-30% -10% auto -10%;
	height:35vh;
	transform:skewY(10deg);
	opacity:.75;
	background:
		linear-gradient(90deg,transparent 0 12%,rgba(255,255,255,.12) 12% 13.5%,transparent 13.5% 40%,rgba(15,182,217,.25) 40% 41.5%,transparent 41.5% 70%,rgba(255,255,255,.12) 70% 72%,transparent 72% 100%);
}

.hero-card{
	background:#0f2b39cc;
	border:1px solid rgba(255,255,255,.12);
	border-radius:var(--radius);
	box-shadow:var(--shadow);
	backdrop-filter:blur(6px);
}
.kicker{
	font-weight:800;
	letter-spacing:.4px;
	color:var(--yellow);
}
.big-title{
	font-family:'Montserrat',sans-serif;
	font-weight:800;
	line-height:1.05;
	letter-spacing:.2px;
}
.hero-list i{color:var(--green);}

.btn-cta{
	--bs-btn-padding-y:.8rem;
	--bs-btn-padding-x:1.3rem;
	--bs-btn-font-weight:800;
	border-radius:12px;
	box-shadow:0 10px 24px rgba(120,195,64,.35);
	background:linear-gradient(135deg,var(--green),#a7e36b);
	border:0;
	color:#0b2a14;
}
.btn-ghost{
	border:1px solid rgba(255,255,255,.35);
	color:#fff;
}

/* -------- SECTIONS -------- */
.section{
	padding:90px 0;
	position:relative;
}
.section-title{
	font-family:'Montserrat',sans-serif;
	font-weight:800;
	letter-spacing:.3px;
}
.lead-muted{color:#64748b;}

/* -------- SERVICES -------- */
.service{
	background:#fff;
	border:1px solid #e9eef5;
	border-radius:var(--radius);
	box-shadow:var(--shadow);
	transition:.25s ease;
	height:100%;
}
.service:hover{transform:translateY(-4px);}
.service .icon{
	width:56px;height:56px;border-radius:14px;
	display:grid;place-items:center;
	background:linear-gradient(135deg,var(--blue-2),var(--blue));
	color:#fff;font-size:24px;box-shadow:0 6px 18px rgba(10,128,182,.3);
}

/* -------- BAND -------- */
.band{
	background:
		linear-gradient(135deg,rgba(10,128,182,.06),rgba(120,195,64,.06)),
		repeating-linear-gradient(125deg,transparent 0 22px,rgba(10,128,182,.05) 22px 44px),
		#fff;
	border-radius:var(--radius);
	border:1px solid #e6eef6;
	box-shadow:var(--shadow);
}

/* -------- AVANT/APRÈS -------- */
.tag{
	position:absolute;top:14px;left:14px;z-index:2;
	font-weight:800;font-size:.85rem;
	padding:.25rem .6rem;border-radius:999px;
	color:#0b2a14;background:linear-gradient(135deg,var(--yellow),#fffde0);
	border:1px solid #00000010;
}
.tag.after{left:auto;right:14px;background:linear-gradient(135deg,#c3f27b,var(--green));color:#0e2b12;}
.card-aa{
	border:1px solid #e9eef5;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);background:#fff;
}
.card-aa img{object-fit:cover;width:100%;height:260px;}

/* -------- CONTACT -------- */
.contact-card{
	background:#fff;border:1px solid #e6eef6;border-radius:var(--radius);box-shadow:var(--shadow);
}
.list-contact i{width:28px}

/* -------- FOOTER -------- */
.footer{background:#0f1b27;color:#c8d6e5;}
.footer a{color:#e8fff1;text-decoration:none}

/* -------- FLOATING PHONE -------- */
.fab-phone{
	position:fixed;bottom:18px;right:18px;z-index:40;
	width:58px;height:58px;border-radius:999px;display:grid;place-items:center;
	background:linear-gradient(135deg,var(--green),#a7e36b);color:#0b2a14;
	box-shadow:0 12px 26px rgba(120,195,64,.45);
}

/* -------- SEPARATOR -------- */
.separator{
	height:80px;background:
		linear-gradient(135deg,rgba(10,128,182,.08),rgba(120,195,64,.08));
	clip-path:polygon(0 0,100% 30%,100% 100%,0 70%);
}

.slider-container {
	position: relative;
	overflow: hidden;
}

.my-slider img {
	width: 100%;
	height: 260px;
	object-fit: cover;
	display: block;
	border-radius: 16px;
}

.tns-controls {
	position: absolute;
	top: 50%;
	width: 100%;
	display: flex;
	justify-content: space-between;
	transform: translateY(-50%);
	padding: 0 10px;
	pointer-events: none;
	z-index: 1000 !important;
}

.tns-controls button {
	background: rgba(0,0,0,0.45);
	color: white;
	border: none;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: all;
	transition: background 0.3s;
}

.tns-controls button:hover {
	background: rgba(0,0,0,0.7);
}

.tag {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 0.25rem 0.6rem;
	font-weight: 800;
	border-radius: 999px;
	z-index: 10;
	display: none;
	white-space: nowrap;
}

.label-avant {
	background: linear-gradient(135deg,#e7ff63,#fffde0);
	color: #212529;
}

.label-apres {
	background: linear-gradient(135deg,#c3f27b,#78c340);
	color: #0e2b12;
}

.aa-controls {
	position: absolute;
	top: 50%;
	width: 100%;
	display: flex;
	justify-content: space-between;
	transform: translateY(-50%);
	padding: 0 10px;
	pointer-events: none;
	z-index: 1000;
}
.aa-controls button {
	background: rgba(0,0,0,0.45);
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: all;
	transition: background .3s;
}
.aa-controls button:hover { background: rgba(0,0,0,0.7); }

/* labels en haut à gauche (identiques pour Avant/Après) */
.tag {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 0.25rem 0.6rem;
	font-weight: 800;
	border-radius: 999px;
	z-index: 10;
	display: none;
	white-space: nowrap;
}
.label-avant { background: linear-gradient(135deg,#e7ff63,#fffde0); color:#212529; }
.label-apres { background: linear-gradient(135deg,#c3f27b,#78c340); color:#0e2b12; }



/* -------- RESPONSIVE -------- */
@media (max-width:992px){
	.hero{min-height:78vh}
	.hero-card{padding:2rem;}
}
@media (max-width:576px){
	.big-title{font-size:1.8rem;}
	.section{padding:60px 0;}
}