/* Mobile menu (CSS-only using :target), responsive utilities and media tweaks */

:root{
	--accent:#0079a8;
	--accent-dark:#006b90;
	--bg-hero-gradient: linear-gradient(90deg, rgb(0,151,197), rgb(0,106,138));
	--text:#222;
	--max-width:1200px;
}

/* utilities */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
img.responsive, .payment-img { max-width: 100%; height: auto; }

/* Menu toggle button (hidden on wide screens) */
.menu-toggle {
	display: none;
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255,255,255,0.06);
	color: #fff;
	padding: 8px 12px;
	border-radius: 8px;
	font-weight: 800;
	text-decoration: none;
	z-index: 5;
}

/* Responsive : breakpoint */
@media (max-width: 900px) {
	/* show toggle, hide nav by default */
	.menu-toggle { display: inline-flex; align-items:center; gap:8px; cursor:pointer; }
	#navbar { display: none; position: fixed; top: 0; right: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); padding-top: 80px; box-sizing: border-box; z-index: 4; overflow-y: auto; }
	#navbar a { display: block; color: #fff; padding: 12px 16px; font-size: 0.98rem; border-bottom: 1px solid rgba(255,255,255,0.03); }

	/* when nav is targeted (clicked via href="#navbar") show it */
	#navbar:target { display: block; }

	/* add a close link style inside nav via pseudo */
	#navbar::before {
		content: "✕ Fermer";
		position: absolute;
		right: 18px;
		top: 18px;
		background: transparent;
		color: #fff;
		padding: 8px 12px;
		font-weight: 800;
		text-decoration: none;
		cursor: pointer;
	}

	/* Make hero padding smaller on mobile but leave enough bottom space so text doesn't sit under the oval */
	#bvn, #srvc, #pay, #con {
		padding: 18px 8px 84px; /* réduire padding latéral, augmenter bottom pour l'oval */
		font-size: 18px;
		margin-bottom: 48px;
		z-index: 1;
	}

	/* titres adaptifs pour les sections hero */
	#bvn h1, #bvn h2,
	#srvc h1, #srvc h2,
	#pay h1, #pay h2,
	#con h1, #con h2 {
		font-size: clamp(1.6rem, 5.2vw, 2.2rem);
		line-height: 1.06;
		margin: 0 4px 8px;
	}

	/* descriptions adaptives */
	#bvn p, #srvc p, #pay p, #con p {
		font-size: clamp(0.98rem, 3.6vw, 1.05rem);
		margin: 0 6px 10px;
		word-break: break-word;
	}

	/* Make the hero oval (::after) smaller/more tucked on mobile so it n'affecte pas le texte */
	#bvn::after, #srvc::after, #pay::after, #con::after {
		bottom: -28px;
		height: 70px;
		width: 140vw;
	}

	/* reduce dot sizes and avoid interaction; hide some on small screens */
	#bvn .dot, #srvc .dot, #pay .dot, #con .dot {
		width: 28px;
		height: 28px;
		pointer-events: none;
		opacity: 0.9;
	}
	#bvn .d3, #bvn .d4, #srvc .d3, #srvc .d4, #pay .d3, #pay .d4, #con .d3, #con .d4 {
		display: none;
	}

	/* content/text sizes */
	.content, .Service .content, .method .content, .contact-info, .contact-form-wrap { font-size: 1rem; padding: 12px; word-break: break-word; } /* léger + */

	/* reduce card text to avoid overflow */
	.card h3 { font-size: 1rem; }
	.card p { font-size: 0.9rem; }

	/* grid -> stack */
	.contact-grid, .blocs-bas, .grid-portfolio { grid-template-columns: 1fr; gap: 16px; }

	/* images */
	.payment-img { width: 70%; height: auto; margin: 0 auto; display:block; }

	/* tighten nav / header spacing */
	.header-logo { width: 140px; left: 14px; }
}

/* Large screens: keep nav inline */
@media (min-width: 901px) {
	#navbar { display: flex !important; gap: 20px; align-items: center; position: static; height: auto; background: none; padding: 0; }
	#navbar a { padding: 6px 10px; }
}

/* small touch improvements */
a, button { -webkit-tap-highlight-color: rgba(0,0,0,0.05); -webkit-touch-callout: none; }

/* additional responsive spacing tweaks */
@media (max-width: 600px) {
	/* make text a bit smaller on very small screens and ensure wrapping */
	html, body { font-size: 13px; overflow-x: hidden; }
	#bvn, #srvc, #pay, #con {
		padding: 14px 6px 64px;
		font-size: 16px;
		margin-bottom: 40px;
	}
	#bvn h1, #bvn h2,
	#srvc h1, #srvc h2,
	#pay h1, #pay h2,
	#con h1, #con h2 {
		font-size: clamp(1.3rem, 6.8vw, 1.8rem);
	}
	#bvn p, #srvc p, #pay p, #con p {
		font-size: clamp(0.92rem, 4.2vw, 1rem);
	}
	.content, .Service .content, .method .content, .contact-info, .contact-form-wrap { font-size: 0.96rem; padding: 10px; word-break: break-word; }
	.card h3 { font-size: 0.98rem; }
	.card p { font-size: 0.86rem; }
	#navbar a { font-size: 0.95rem; padding: 10px 12px; }
	.header-logo { left: 12px; width: 130px; }
	.menu-toggle { right: 12px; padding: 8px; }
}