/* ==========================================================================
   Arcanes — Charte « Scène électrique » (dark + néon)
   Thème enfant UnderStrap / Bootstrap 5. Mobile-first.
   On surcharge les variables CSS runtime de Bootstrap 5 (pas de recompilation).
   ========================================================================== */

/* ---------- Polices auto-hébergées --------------------------------------- */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/inter-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/inter-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/space-grotesk-500.woff2') format('woff2');
}
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/space-grotesk-700.woff2') format('woff2');
}

/* ---------- Tokens de la charte ------------------------------------------ */
:root {
	/* UI native du navigateur en sombre (scrollbars, contrôles de formulaire,
	   autofill, poignée de redimensionnement textarea, canvas initial) -> plus
	   de flash blanc ni de widgets clairs sur le site sombre. Statique : le
	   switcher ne change que l'accent, pas le fond. */
	color-scheme: dark;
	accent-color: var(--arc-cyan); /* checkbox/radio natifs suivent l'accent du thème */
	--arc-bg: #0E1018;
	--arc-surface: #171B26;
	--arc-surface-2: #1F2433;
	--arc-cyan: #21E6C1;
	--arc-cyan-rgb: 33, 230, 193;
	--arc-violet: #6C5CE7;
	--arc-violet-rgb: 108, 92, 231;
	--arc-accent-2: #4ff0d6;            /* accent clair (hover boutons) — thématisé */
	--arc-on-accent: #07120F;           /* texte sur fond accent (clair si accent foncé) */
	--arc-text: #F4F6FA;
	--arc-muted: #A7AFBF;
	--arc-danger: #FF6B6B;
	--arc-border: rgba(255, 255, 255, .10);
	--arc-nav-h: 70px;                 /* hauteur de la navbar fixed */
	--arc-gradient: linear-gradient(120deg, var(--arc-cyan), var(--arc-violet));
	--arc-font-title: 'Space Grotesk', system-ui, sans-serif;
	--arc-font-body: 'Inter', system-ui, -apple-system, sans-serif;

	/* ---- Surcharge Bootstrap 5 ---- */
	--bs-body-bg: var(--arc-bg);
	--bs-body-color: var(--arc-text);
	--bs-body-font-family: var(--arc-font-body);
	--bs-emphasis-color: var(--arc-text);
	--bs-heading-color: var(--arc-text);
	--bs-primary: var(--arc-cyan);
	--bs-primary-rgb: var(--arc-cyan-rgb);
	--bs-link-color: var(--arc-cyan);
	--bs-link-color-rgb: var(--arc-cyan-rgb);
	--bs-link-hover-color: #5cf0d6;
	--bs-border-color: var(--arc-border);
	--bs-border-radius: .85rem;
	--bs-secondary-color: var(--arc-muted);
	--bs-body-line-height: 1.7;   /* texte plus aéré (défaut BS = 1.5) */
}

/* ---------- Base --------------------------------------------------------- */
body {
	background-color: var(--arc-bg);
	color: var(--arc-text);
	font-family: var(--arc-font-body);
	-webkit-font-smoothing: antialiased;
	line-height: 1.7;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--arc-font-title);
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--arc-text);
}

h1, .h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1.08; }
h2, .h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.15; }
.lead { font-size: 1.15rem; color: var(--arc-muted); line-height: 1.6; }
p { line-height: 1.75; }
a { text-decoration: none; }
/* WCAG 1.4.1 : les liens dans le texte courant ne doivent pas se distinguer
   par la seule couleur -> soulignement (hors boutons/cartes/nav/galerie). */
.arc-about-text a,
.arc-page-content p a,
.arc-page-content li a,
.arc-faq-a a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
/* <picture> (sources AVIF/WebP) : transparent au layout -> l'<img> se comporte
   comme s'il n'y avait pas de wrapper (aucun impact sur les grilles/cartes). */
picture { display: contents; }
.text-muted, .text-secondary { color: var(--arc-muted) !important; }

/* Espacement de section généreux */
.py-6 { padding-top: 4.5rem; padding-bottom: 4.5rem; }
@media (min-width: 992px) { .py-6 { padding-top: 6rem; padding-bottom: 6rem; } }

.section-surface { background-color: var(--arc-surface); }

/* Titre de section + trait dégradé */
.section-title { margin-bottom: 2.5rem; }
.section-title h2 { margin-bottom: .75rem; }
.section-title .accent-bar {
	width: 64px; height: 4px; border-radius: 4px;
	background: var(--arc-gradient);
}
.section-title.text-center .accent-bar { margin-left: auto; margin-right: auto; }
.eyebrow {
	display: inline-block;
	font-family: var(--arc-font-title);
	font-weight: 500;
	font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
	color: var(--arc-cyan); margin-bottom: .5rem;
}

/* Icônes inline */
.arc-icon { width: 24px; height: 24px; display: inline-block; vertical-align: middle; }
.arc-icon-lg { width: 34px; height: 34px; }

/* ---------- Boutons ------------------------------------------------------ */
.btn-arc, .btn-arc-outline {
	font-family: var(--arc-font-title);
	font-weight: 500;
	border-radius: 999px;
	padding: .7rem 1.5rem;
	display: inline-flex; align-items: center; gap: .5rem;
	transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn-arc {
	background: var(--arc-cyan);
	color: var(--arc-on-accent);
	border: 1px solid var(--arc-cyan);
}
.btn-arc:hover {
	color: var(--arc-on-accent);
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(var(--arc-cyan-rgb), .35);
}
.btn-arc-outline {
	background: transparent;
	color: var(--arc-text);
	border: 1px solid rgba(var(--arc-cyan-rgb), .6);
}
.btn-arc-outline:hover {
	color: var(--arc-cyan);
	border-color: var(--arc-cyan);
	transform: translateY(-2px);
}
.btn-arc .arc-icon, .btn-arc-outline .arc-icon { width: 20px; height: 20px; }

/* ---------- Navbar ------------------------------------------------------- */
#main-nav.navbar {
	position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
	background: rgba(23, 27, 38, .82) !important;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--arc-border);
	padding-top: .65rem; padding-bottom: .65rem;
}
#main-nav .navbar-brand { display: inline-flex; align-items: center; gap: .55rem; padding: 0; }
/* Logo image (custom-logo) sizing — UnderStrap outputs the img with .img-fluid */
#main-nav .navbar-brand.custom-logo-link { display: inline-flex; line-height: 0; }
#main-nav .navbar-brand.custom-logo-link img { height: 44px; width: auto; max-width: none; display: block; }
.arc-footer .custom-logo-link { display: inline-flex; line-height: 0; }
.arc-footer .custom-logo-link img { height: 30px; width: auto; max-width: none; display: block; }
.arc-logotype {
	font-family: var(--arc-font-title);
	font-weight: 700; font-size: 1.4rem; letter-spacing: .04em;
	color: var(--arc-text);
}
.arc-logotype .dot { color: var(--arc-cyan); }
#main-nav .navbar-nav .nav-link {
	font-family: var(--arc-font-title);
	font-weight: 500; color: var(--arc-text);
	padding: .4rem .9rem; position: relative;
}
#main-nav .navbar-nav .nav-link:hover,
#main-nav .navbar-nav .current-menu-item > .nav-link,
#main-nav .navbar-nav .active > .nav-link { color: var(--arc-cyan); }
#main-nav .navbar-nav .nav-link::after {
	content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .15rem;
	height: 2px; background: var(--arc-gradient);
	transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
#main-nav .navbar-nav .nav-link:hover::after,
#main-nav .navbar-nav .current-menu-item > .nav-link::after { transform: scaleX(1); }
#main-nav .navbar-toggler { border-color: var(--arc-border); }
.navbar-cta { margin-left: .5rem; }
@media (max-width: 767.98px) {
	#main-nav .navbar-collapse { padding-top: .75rem; }
	.navbar-cta { margin: .5rem 0 0; }
}

/* ---------- Hero --------------------------------------------------------- */
.arc-hero {
	position: relative;
	min-height: 82vh;
	display: flex; align-items: center;
	/* dégage la navbar fixed + rythme vertical (la flèche occupe le bas) */
	padding-top: calc(var(--arc-nav-h) + 2.5rem);
	padding-bottom: 5rem;
	background-color: var(--arc-surface);
	background-size: cover; background-position: center;
	overflow: hidden;
}
@media (min-width: 992px) {
	.arc-hero { padding-top: calc(var(--arc-nav-h) + 3.5rem); padding-bottom: 6rem; }
}
/* Image de fond = <img> (LCP découvrable par le preload scanner) derrière le voile. */
.arc-hero-bg { position: absolute; inset: 0; z-index: 0; margin: 0; pointer-events: none; }
.arc-hero-bg img, .arc-hero-bg .arc-hero-bg-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arc-hero::before {
	content: ""; position: absolute; inset: 0; z-index: 1;
	/* Voile un peu plus sombre + accents néon renforcés, en laissant l'image
	   transparaître ; lisibilité assurée par le renfort à gauche + text-shadow. */
	background:
		radial-gradient(58% 78% at 82% 8%, rgba(var(--arc-violet-rgb), .40), transparent 62%),
		radial-gradient(50% 60% at 0% 100%, rgba(var(--arc-cyan-rgb), .30), transparent 62%),
		linear-gradient(100deg, rgba(14, 16, 24, .82) 0%, rgba(14, 16, 24, .56) 45%, rgba(14, 16, 24, .4) 100%),
		linear-gradient(180deg, rgba(14, 16, 24, .2), rgba(14, 16, 24, .66));
}
.arc-hero > .container { position: relative; z-index: 2; }
.arc-hero h1 { margin-bottom: 1rem; text-shadow: 0 2px 16px rgba(0, 0, 0, .45); }
.arc-hero .lead, .arc-hero .hero-text { text-shadow: 0 1px 10px rgba(0, 0, 0, .5); }
.arc-hero .hero-kicker {
	font-family: var(--arc-font-title); font-weight: 500;
	letter-spacing: .14em; text-transform: uppercase; color: var(--arc-cyan);
	margin-bottom: 1rem; font-size: .95rem;
}
.arc-hero .hero-text { color: var(--arc-muted); max-width: 46ch; }
.arc-hero .hero-actions { gap: .75rem; }

/* ---------- Grille domaines ---------------------------------------------- */
.arc-domain {
	background: var(--arc-surface); border: 1px solid var(--arc-border);
	border-radius: var(--bs-border-radius); padding: 1.5rem;
	height: 100%; transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}
.arc-domain:hover {
	transform: translateY(-4px); border-color: rgba(var(--arc-cyan-rgb), .5);
	box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}
.arc-domain .arc-ico-badge {
	width: 52px; height: 52px; border-radius: 14px;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(var(--arc-cyan-rgb), .12); color: var(--arc-cyan);
	margin-bottom: 1rem;
}
.arc-domain h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.arc-domain p { color: var(--arc-muted); margin-bottom: 0; font-size: .95rem; }

/* ---------- Cartes (services / news) ------------------------------------- */
.arc-card {
	background: var(--arc-surface); border: 1px solid var(--arc-border);
	border-radius: var(--bs-border-radius); overflow: hidden; height: 100%;
	transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}
.arc-card:hover {
	transform: translateY(-4px); border-color: rgba(var(--arc-cyan-rgb), .5);
	box-shadow: 0 16px 40px rgba(0, 0, 0, .4);
}
.arc-card .arc-card-img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; display: block; }
.arc-card .card-body { padding: 1.35rem; display: flex; flex-direction: column; }
.arc-card h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.arc-card p { color: var(--arc-muted); }

/* ---------- À propos / Pour quels projets -------------------------------- */
.arc-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.arc-checklist li { display: flex; align-items: flex-start; gap: .65rem; }
.arc-checklist .arc-icon { color: var(--arc-cyan); flex: 0 0 auto; margin-top: 1px; }
.arc-about-text { color: var(--arc-muted); }
.arc-about-text p { margin-bottom: 1rem; }

/* ---------- Méthode (étapes) --------------------------------------------- */
.arc-step { position: relative; padding: 1.5rem; height: 100%; }
.arc-step .arc-step-num {
	font-family: var(--arc-font-title); font-weight: 700; font-size: 2.6rem; line-height: 1;
	background: var(--arc-gradient); -webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; margin-bottom: .75rem; display: inline-block;
}
.arc-step h3 { font-size: 1.2rem; margin-bottom: .4rem; }
.arc-step p { color: var(--arc-muted); margin-bottom: 0; }

/* ---------- Galerie ------------------------------------------------------ */
.arc-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 768px) { .arc-gallery { grid-template-columns: repeat(4, 1fr); } }
.arc-gallery a { overflow: hidden; border-radius: .75rem; display: block; }
.arc-gallery img {
	width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
	transition: transform .3s ease, filter .3s ease; filter: saturate(.9);
}
.arc-gallery a:hover img { transform: scale(1.06); filter: saturate(1.15); }
.arc-gallery .gallery-wide { grid-column: span 2; }
.arc-gallery .gallery-wide img { aspect-ratio: 2 / 1; }

/* ---------- Bandeau CTA -------------------------------------------------- */
.arc-cta-band { position: relative; background: var(--arc-surface); overflow: hidden; }
.arc-cta-band::before {
	content: ""; position: absolute; inset: 0;
	background: var(--arc-gradient); opacity: .14;
}
.arc-cta-band .container { position: relative; z-index: 1; }
.arc-cta-band h2 { margin-bottom: 1.25rem; }

/* ---------- Contact (CF7 dark) ------------------------------------------- */
.arc-contact-info { display: grid; gap: 1rem; }
.arc-contact-info .arc-contact-row { display: flex; align-items: flex-start; gap: .75rem; }
.arc-contact-info .arc-icon { color: var(--arc-cyan); flex: 0 0 auto; margin-top: 2px; }
.arc-contact-info address { font-style: normal; margin: 0; color: var(--arc-muted); }
.arc-contact-info a { color: var(--arc-text); }

.arc-contact .wpcf7-form label {
	display: block; font-family: var(--arc-font-title); font-weight: 500;
	font-size: .9rem; color: var(--arc-text); margin-bottom: 1rem;
}
.arc-contact .wpcf7-form input:not([type="submit"]),
.arc-contact .wpcf7-form textarea {
	width: 100%; margin-top: .35rem;
	background: var(--arc-surface-2); color: var(--arc-text);
	border: 1px solid var(--arc-border); border-radius: .6rem;
	padding: .7rem .9rem; transition: border-color .15s ease, box-shadow .15s ease;
}
.arc-contact .wpcf7-form input::placeholder,
.arc-contact .wpcf7-form textarea::placeholder { color: #6d7488; }
.arc-contact .wpcf7-form input:focus,
.arc-contact .wpcf7-form textarea:focus {
	outline: none; border-color: var(--arc-cyan);
	box-shadow: 0 0 0 3px rgba(var(--arc-cyan-rgb), .25);
}
.arc-contact .wpcf7-form input[type="submit"] {
	font-family: var(--arc-font-title); font-weight: 500;
	background: var(--arc-cyan); color: var(--arc-on-accent);
	border: 0; border-radius: 999px; padding: .7rem 1.75rem; cursor: pointer;
	transition: transform .15s ease, box-shadow .2s ease;
}
.arc-contact .wpcf7-form input[type="submit"]:hover {
	transform: translateY(-2px); box-shadow: 0 8px 24px rgba(var(--arc-cyan-rgb), .35);
}
.wpcf7 .wpcf7-response-output { border-radius: .6rem; margin: 1rem 0 0; }

/* ---------- Bannière de page interne ------------------------------------- */
.arc-page-banner {
	position: relative; padding: calc(3.5rem + var(--arc-nav-h)) 0 3.5rem; background: var(--arc-surface);
	overflow: hidden;
}
.arc-page-banner::before {
	content: ""; position: absolute; inset: 0;
	background: radial-gradient(60% 120% at 100% 0%, rgba(var(--arc-violet-rgb), .25), transparent 60%);
}
.arc-page-banner .container { position: relative; z-index: 1; }
.arc-page-banner h1 { margin-bottom: .25rem; }
.arc-page-banner .breadcrumb-arc { color: var(--arc-muted); font-size: .9rem; }
.arc-page-banner .breadcrumb-arc a { color: var(--arc-cyan); }
.arc-page-content { padding: 3.5rem 0; }
.arc-page-content p { color: #cfd4e0; }
.arc-page-content ul { color: #cfd4e0; }

/* ---------- Footer ------------------------------------------------------- */
#wrapper-footer {
	background: var(--arc-surface); border-top: 1px solid var(--arc-border);
	margin-top: 0;
}
.arc-footer { padding-top: 3.5rem; padding-bottom: 1.5rem; }
.arc-footer h4 {
	font-size: 1rem; text-transform: uppercase; letter-spacing: .08em;
	color: var(--arc-text); margin-bottom: 1rem;
}
.arc-footer, .arc-footer address, .arc-footer a, .arc-footer p { color: var(--arc-muted); }
.arc-footer a:hover { color: var(--arc-cyan); }
.arc-footer address { font-style: normal; }
.arc-footer .arc-footer-brand .arc-logotype { font-size: 1.5rem; color: var(--arc-text); }
.arc-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.arc-footer .arc-footer-bottom {
	border-top: 1px solid var(--arc-border); margin-top: 2.5rem; padding-top: 1.25rem;
	font-size: .875rem;
}
.site-info { color: var(--arc-muted); }

/* ---------- Accessibilité / mouvement ------------------------------------ */
a:focus-visible, button:focus-visible,
.btn-arc:focus-visible, .btn-arc-outline:focus-visible,
.nav-link:focus-visible {
	outline: 2px solid var(--arc-cyan); outline-offset: 2px; border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
	.arc-domain:hover, .arc-card:hover, .btn-arc:hover, .arc-gallery a:hover img { transform: none; }
}

/* ============================================================
   Ajouts : smooth scroll + ancres, a11y (WCAG), carte, FAQ
   ============================================================ */

/* Smooth scroll + offset des ancres sous la navbar sticky.
   Demandé explicitement : reste fluide même si prefers-reduced-motion (le JS
   force aussi behavior:'smooth' au clic). */
html {
	scroll-behavior: smooth;
	/* offset des ancres = hauteur navbar fixed + marge ; couvre TOUTES les cibles
	   (sections, divs, titres) via le scrollport, pas seulement les section[id]. */
	scroll-padding-top: var(--arc-nav-h);
}

/* Landmark principal : pas d'outline disgracieux au focus programmatique */
main#content:focus { outline: none; }

/* Cibles tactiles >= 44px (WCAG 2.5.5) */
#main-nav .navbar-nav .nav-link {
	min-height: 44px;
	display: flex;
	align-items: center;
}
@media (max-width: 767.98px) {
	.arc-footer ul li { padding: .15rem 0; }
}

/* Contraste du contour/icone du toggler (WCAG 1.4.11) */
#main-nav .navbar-toggler { border-color: rgba(255, 255, 255, .4); }
#main-nav .navbar-toggler:focus-visible { outline: 2px solid var(--arc-cyan); outline-offset: 2px; }

/* Placeholder lisible (latent — labels visibles conserves) */
.arc-contact .wpcf7-form input::placeholder,
.arc-contact .wpcf7-form textarea::placeholder { color: #97A0B3; }

/* Focus visible garanti sur le bouton d'envoi CF7 */
.arc-contact .wpcf7-form input[type="submit"]:focus-visible {
	outline: 2px solid var(--arc-cyan);
	outline-offset: 2px;
}

/* ---------- Section "Nous trouver" + facade carte ---------- */
.arc-map-facade {
	position: relative;
	min-height: 340px;            /* reserve la hauteur -> zero CLS */
	border: 1px solid var(--arc-border);
	border-radius: var(--bs-border-radius);
	background: var(--arc-surface);
	overflow: hidden;
}
.arc-map-facade::before {
	content: "";
	position: absolute; inset: 0;
	background:
		radial-gradient(50% 60% at 30% 30%, rgba(var(--arc-violet-rgb), .18), transparent 60%),
		radial-gradient(60% 70% at 80% 90%, rgba(var(--arc-cyan-rgb), .14), transparent 60%);
}
.arc-map-facade .arc-map-inner {
	position: relative;
	min-height: 340px;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	gap: .75rem; text-align: center; padding: 1.5rem;
}
.arc-map-facade .arc-map-inner .arc-icon { color: var(--arc-cyan); width: 40px; height: 40px; }
.arc-map-facade .arc-map-addr { color: var(--arc-muted); margin: 0; }
.arc-map-facade button[data-map-embed] { cursor: pointer; }
.arc-map-iframe {
	width: 100%; min-height: 340px; height: 340px; border: 0; display: block;
}
@media (min-width: 992px) {
	.arc-map-facade,
	.arc-map-facade .arc-map-inner,
	.arc-map-iframe { min-height: 420px; }
	.arc-map-iframe { height: 420px; }
}

/* ---------- FAQ (details/summary, sans JS) ---------- */
.arc-faq { max-width: 820px; }
.arc-faq h2 { margin-bottom: 1.5rem; }
.arc-faq-item {
	border: 1px solid var(--arc-border);
	border-radius: .6rem;
	background: var(--arc-surface);
	margin-bottom: .75rem;
	padding: 0 1rem;
}
.arc-faq-item summary {
	cursor: pointer;
	list-style: none;
	font-family: var(--arc-font-title);
	font-weight: 500;
	color: var(--arc-text);
	padding: 1rem 0;
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.arc-faq-item summary::-webkit-details-marker { display: none; }
.arc-faq-item summary::after {
	content: "+"; color: var(--arc-cyan); font-size: 1.4rem; line-height: 1; flex: 0 0 auto;
}
.arc-faq-item[open] summary::after { content: "–"; }
.arc-faq-item summary:focus-visible { outline: 2px solid var(--arc-cyan); outline-offset: 2px; }
.arc-faq-a { padding: 0 0 1rem; color: var(--arc-muted); }
.arc-faq-a p { margin: 0; }

/* Galerie : eviter le CLS via dimensions intrinseques (en plus de aspect-ratio) */
.arc-gallery img { height: auto; }

/* Zone d'intervention (SEO local) dans le footer */
.arc-footer-zone {
	color: var(--arc-muted);
	font-size: .85rem;
	border-top: 1px solid var(--arc-border);
	padding-top: 1.25rem;
	margin-top: 1.5rem !important;
}

/* Footer column titles: h2 (hierarchy) but small uppercase look */
.arc-footer .arc-footer-title {
	font-size: 1rem;
	line-height: 1.2;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--arc-text);
	margin-bottom: 1rem;
}

/* ============================================================
   Hover boutons — révisé (feedback plus net, texte lisible)
   ============================================================ */
.btn-arc {
	--bs-btn-hover-color: var(--arc-on-accent);
	--bs-btn-hover-bg: var(--arc-accent-2);
	--bs-btn-hover-border-color: var(--arc-accent-2);
	/* pas de will-change permanent : le translateY au survol est déjà bon marché
	   (sinon une couche compositeur est maintenue en VRAM sur tous les boutons). */
}
.btn-arc:hover,
.btn-arc:focus-visible {
	background: var(--arc-accent-2);            /* cyan plus clair au survol */
	border-color: var(--arc-accent-2);
	color: var(--arc-on-accent);                /* texte sombre conservé (contraste AA+) */
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(var(--arc-cyan-rgb), .45);
}
.btn-arc:active {
	transform: translateY(0);
	box-shadow: 0 3px 12px rgba(var(--arc-cyan-rgb), .4);
}
.btn-arc-outline:hover,
.btn-arc-outline:focus-visible {
	background: rgba(var(--arc-cyan-rgb), .12);   /* léger remplissage = meilleur feedback */
	color: var(--arc-cyan);
	border-color: var(--arc-cyan);
	transform: translateY(-2px);
}

/* Carte chargée au scroll : la facade n'a plus de bouton, on garde l'aperçu centré */
.arc-map-facade .arc-map-inner .small { max-width: 32ch; }

/* ============================================================
   Formulaire de contact : carte bordée (titre + sous-titre + form) + compact
   ============================================================ */
.arc-form-card {
	background: var(--arc-surface);
	border: 1px solid var(--arc-border);
	border-radius: var(--bs-border-radius);
	padding: 1.5rem 1.5rem 1.25rem;
}
.arc-form-card .arc-form-sub { font-size: .95rem; }
/* la carte est portée par .arc-form-card -> on neutralise l'ancien fond du wpcf7 */
.arc-contact .wpcf7 {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
}
.arc-contact .wpcf7-form label {
	margin-bottom: .6rem;       /* plus compact */
	font-size: .82rem;
}
.arc-contact .wpcf7-form input:not([type="submit"]),
.arc-contact .wpcf7-form textarea {
	margin-top: .25rem;
	padding: .5rem .75rem;      /* plus compact */
	border-radius: .5rem;
}
.arc-contact .wpcf7-form textarea {
	min-height: 110px;          /* zone message moins haute */
	height: 110px;
}
.arc-contact .wpcf7-form input[type="submit"] {
	margin-top: .35rem;
	padding: .6rem 1.6rem;
	width: 100%;                /* bouton pleine largeur dans la carte */
}
.arc-contact .wpcf7 .wpcf7-response-output { margin: .75rem 0 0; font-size: .9rem; }
@media (min-width: 992px) {
	.arc-form-card { padding: 1.75rem; }
}

/* ============================================================
   Indicateur de défilement (flèche) dans le hero
   ============================================================ */
.arc-scroll-down {
	position: absolute;
	left: 50%;
	bottom: 1.5rem;
	z-index: 2;
	width: 46px; height: 46px;
	display: flex; align-items: center; justify-content: center;
	color: var(--arc-text);
	border: 1px solid var(--arc-border);
	border-radius: 999px;
	background: rgba(23, 27, 38, .45);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	animation: arc-bounce 1.8s ease-in-out infinite;
	transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.arc-scroll-down:hover,
.arc-scroll-down:focus-visible {
	color: var(--arc-cyan);
	border-color: var(--arc-cyan);
	background: rgba(23, 27, 38, .7);
}
.arc-scroll-down svg { width: 22px; height: 22px; display: block; }
@keyframes arc-bounce {
	0%, 100% { transform: translate(-50%, 0); }
	50%      { transform: translate(-50%, 7px); }
}
@media (prefers-reduced-motion: reduce) {
	.arc-scroll-down { animation: none; transform: translateX(-50%); }
}

/* ============================================================
   Mobile : pas de débordement horizontal + boutons hero homogènes
   ============================================================ */
/* `clip` plutôt que `hidden` : `overflow-x: hidden` force `overflow-y` à
   calculer `auto` (spec), transformant <body> en conteneur de défilement et
   pouvant perturber `position: sticky` (aside des pages internes). `clip`
   coupe le débordement horizontal sans créer de scroll container ni casser le
   sticky. Baseline (Safari 16+). */
html, body { overflow-x: clip; }

@media (max-width: 575.98px) {
	.arc-hero .hero-actions { flex-direction: column; align-items: stretch; }
	.arc-hero .hero-actions .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   Lien réseau social (Facebook)
   ============================================================ */
.arc-social-link {
	display: inline-flex; align-items: center; gap: .55rem;
	color: var(--arc-muted);
	font-family: var(--arc-font-title); font-weight: 500;
}
.arc-social-link:hover, .arc-social-link:focus-visible { color: var(--arc-cyan); }
.arc-social-link .arc-icon { width: 22px; height: 22px; }

/* ============================================================
   Galerie — lightbox en <dialog> natif (top-layer ; focus trap,
   Échap & retour de focus gérés par le navigateur).
   ============================================================ */
html:has(dialog.arc-lb[open]) { overflow: hidden; }   /* verrou de défilement quand ouvert */
.arc-gallery a.arc-gl { cursor: zoom-in; }

dialog.arc-lb {
	position: fixed; inset: 0;
	width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
	margin: 0; padding: 4.5rem 1rem; border: 0;
	background: rgba(8, 10, 16, .94);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	color: var(--arc-text);
	align-items: center; justify-content: center;
	opacity: 0;
	transition: opacity .25s ease, display .25s allow-discrete, overlay .25s allow-discrete;
}
dialog.arc-lb[open] { display: flex; opacity: 1; }
@starting-style { dialog.arc-lb[open] { opacity: 0; } }
dialog.arc-lb::backdrop { background: transparent; }
@media (prefers-reduced-motion: reduce) { dialog.arc-lb { transition: none; } }
.arc-lb-fig {
	margin: 0; max-width: 92vw; max-height: 82vh;
	display: flex; flex-direction: column; align-items: center; gap: .85rem;
}
.arc-lb-img {
	max-width: 92vw; max-height: 76vh; width: auto; height: auto;
	border-radius: .5rem; box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
	background: var(--arc-surface); transition: opacity .2s ease;
}
.arc-lb.is-loading .arc-lb-img { opacity: .35; }
.arc-lb-cap { color: var(--arc-text); font-size: .95rem; text-align: center; max-width: 70ch; margin: 0; }
.arc-lb-counter {
	position: absolute; top: 1.25rem; left: 50%; transform: translateX(-50%);
	color: var(--arc-muted); font-family: var(--arc-font-title); font-size: .9rem; letter-spacing: .04em;
}
.arc-lb-close, .arc-lb-prev, .arc-lb-next {
	position: absolute; background: rgba(23, 27, 38, .72); color: var(--arc-text);
	border: 1px solid var(--arc-border); border-radius: 999px; cursor: pointer;
	display: flex; align-items: center; justify-content: center; padding: 0;
	transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.arc-lb-close:hover, .arc-lb-prev:hover, .arc-lb-next:hover,
.arc-lb-close:focus-visible, .arc-lb-prev:focus-visible, .arc-lb-next:focus-visible {
	background: var(--arc-cyan); color: var(--arc-on-accent); border-color: var(--arc-cyan); outline: none;
}
.arc-lb-close { top: 1rem; right: 1rem; width: 46px; height: 46px; font-size: 1.05rem; }
.arc-lb-prev, .arc-lb-next { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 2rem; line-height: 1; }
.arc-lb-prev:hover, .arc-lb-next:hover { transform: translateY(-50%) scale(1.06); }
.arc-lb-prev { left: 1rem; }
.arc-lb-next { right: 1rem; }
@media (max-width: 575.98px) {
	.arc-lb { padding: 4rem .5rem; }
	.arc-lb-prev { left: .4rem; } .arc-lb-next { right: .4rem; }
	.arc-lb-prev, .arc-lb-next { width: 44px; height: 44px; font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
	.arc-lb-img, .arc-lb-prev, .arc-lb-next { transition: none; }
}

/* ============================================================
   Effets de lumière — néon/glow (statique, subtil) + spotlight
   ============================================================ */

/* --- Glow néon (statique → non affecté par reduced-motion) --- */
.section-title h2          { text-shadow: 0 0 22px rgba(var(--arc-cyan-rgb), .15); }
.eyebrow                   { text-shadow: 0 0 12px rgba(var(--arc-cyan-rgb), .45); }
.accent-bar                { box-shadow: 0 0 14px rgba(var(--arc-cyan-rgb), .32); }
.arc-logotype .dot         { text-shadow: 0 0 10px var(--arc-cyan); }
.arc-hero h1               { text-shadow: 0 0 26px rgba(var(--arc-cyan-rgb), .20), 0 2px 16px rgba(0, 0, 0, .5); }
.arc-hero .hero-kicker     { text-shadow: 0 0 14px rgba(var(--arc-cyan-rgb), .45); }
.navbar-cta.btn-arc        { box-shadow: 0 0 16px rgba(var(--arc-cyan-rgb), .28); }
.arc-domain .arc-ico-badge { transition: box-shadow .2s ease, background .2s ease; }
.arc-domain:hover .arc-ico-badge { box-shadow: 0 0 20px rgba(var(--arc-cyan-rgb), .35); }
.arc-scroll-down:hover, .arc-scroll-down:focus-visible { box-shadow: 0 0 16px rgba(var(--arc-cyan-rgb), .4); }

/* --- Spotlight au survol (projecteur suivant le curseur) — desktop only --- */
@media (hover: hover) and (pointer: fine) {
	.arc-domain, .arc-card, .arc-gallery a.arc-gl { position: relative; }
	.arc-domain::after,
	.arc-card::after,
	.arc-gallery a.arc-gl::after {
		content: ""; position: absolute; inset: 0; border-radius: inherit;
		pointer-events: none; z-index: 2; opacity: 0; transition: opacity .25s ease;
		background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%),
		            rgba(var(--arc-cyan-rgb), .13), transparent 60%);
	}
	.arc-domain:hover::after,
	.arc-card:hover::after,
	.arc-gallery a.arc-gl:hover::after { opacity: 1; }
}

/* ============================================================
   Égaliseur « console » — fake sound visualization (pur CSS)
   Barres animées en scaleY (GPU), variété via 3 modulos premiers
   entre eux. Animations transform (compositeur) -> coût négligeable.
   ============================================================ */
.arc-eq { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 26px; margin: 0 auto .9rem; }
.arc-eq span {
	display: block; width: 4px; height: 100%;
	border-radius: 3px; transform-origin: bottom center;
	transform: scaleY(var(--max, .5));
	background: linear-gradient(180deg, var(--arc-violet), var(--arc-cyan));
	box-shadow: 0 0 7px rgba(var(--arc-cyan-rgb), .22);
	animation: arc-eq-bounce var(--spd, .85s) ease-in-out var(--dl, 0s) infinite alternate;
}
@keyframes arc-eq-bounce { from { transform: scaleY(.16); } to { transform: scaleY(var(--max, 1)); } }
/* durée (×5) */
.arc-eq span:nth-child(5n+1) { --spd: .72s; }
.arc-eq span:nth-child(5n+2) { --spd: 1.04s; }
.arc-eq span:nth-child(5n+3) { --spd: .88s; }
.arc-eq span:nth-child(5n+4) { --spd: 1.18s; }
.arc-eq span:nth-child(5n+5) { --spd: .80s; }
/* délai négatif = démarrage désynchronisé (×7) */
.arc-eq span:nth-child(7n+1) { --dl: -.05s; }
.arc-eq span:nth-child(7n+2) { --dl: -.45s; }
.arc-eq span:nth-child(7n+3) { --dl: -.80s; }
.arc-eq span:nth-child(7n+4) { --dl: -.25s; }
.arc-eq span:nth-child(7n+5) { --dl: -.62s; }
.arc-eq span:nth-child(7n+6) { --dl: -.12s; }
.arc-eq span:nth-child(7n+7) { --dl: -.95s; }
/* amplitude max (×9) */
.arc-eq span:nth-child(9n+1) { --max: .50; }
.arc-eq span:nth-child(9n+2) { --max: .85; }
.arc-eq span:nth-child(9n+3) { --max: .62; }
.arc-eq span:nth-child(9n+4) { --max: 1; }
.arc-eq span:nth-child(9n+5) { --max: .72; }
.arc-eq span:nth-child(9n+6) { --max: .45; }
.arc-eq span:nth-child(9n+7) { --max: .92; }
.arc-eq span:nth-child(9n+8) { --max: .58; }
.arc-eq span:nth-child(9n+9) { --max: .78; }
@media (max-width: 575.98px) {
	.arc-eq { gap: 3px; height: 22px; margin-bottom: .75rem; }
	.arc-eq span { width: 3px; }
}
/* reduced-motion : la règle globale (* animation:none) fige les barres ;
   le transform de base scaleY(var(--max)) laisse une skyline statique variée. */

/* ============================================================
   Theme switcher — variantes de couleur d'accent
   NB : --arc-cyan / --arc-violet = "accent primaire / secondaire"
   (noms conservés ; ici l'accent devient rouge). Tout le reste
   (--bs-primary, --arc-gradient, glows, égaliseur…) en dérive.
   ============================================================ */
html[data-theme="red-magenta"] {
	--arc-cyan: #FF2D55;   --arc-cyan-rgb: 255, 45, 85;
	--arc-violet: #C81E5B; --arc-violet-rgb: 200, 30, 91;
	--arc-accent-2: #FF5C7A;
	--bs-link-hover-color: #FF6B85;
}
html[data-theme="red-orange"] {
	--arc-cyan: #FF2D55;   --arc-cyan-rgb: 255, 45, 85;
	--arc-violet: #FF7A3D; --arc-violet-rgb: 255, 122, 61;
	--arc-accent-2: #FF5C7A;
	--bs-link-hover-color: #FF6B85;
}
html[data-theme="green-laser"] {
	--arc-cyan: #8DE41C;   --arc-cyan-rgb: 141, 228, 28;
	--arc-violet: #22D3EE; --arc-violet-rgb: 34, 211, 238;
	--arc-accent-2: #A6F03A;
	--bs-link-hover-color: #A6F03A;
}
html[data-theme="pink-tokyo"] {
	--arc-cyan: #FF2D9B;   --arc-cyan-rgb: 255, 45, 155;
	--arc-violet: #C81FE0; --arc-violet-rgb: 200, 31, 224;
	--arc-accent-2: #FF5CB4;
	--bs-link-hover-color: #FF5CB4;
}
html[data-theme="gold-vegas"] {
	--arc-cyan: #FFC400;   --arc-cyan-rgb: 255, 196, 0;
	--arc-violet: #FF6A00; --arc-violet-rgb: 255, 106, 0;
	--arc-accent-2: #FFD23D;
	--bs-link-hover-color: #FFD23D;
}
html[data-theme="violet-uv"] {
	--arc-cyan: #C81FE0;   --arc-cyan-rgb: 200, 31, 224;
	--arc-violet: #FF3FA4; --arc-violet-rgb: 255, 63, 164;
	--arc-accent-2: #D633F0;
	--bs-link-hover-color: #E07AF5;
	--arc-on-accent: #FFFFFF;
}

/* ============================================================
   Theme switcher — popover palette (navbar)
   ============================================================ */
.arc-theme-switch { position: relative; display: inline-flex; align-items: center; margin-left: 1rem; }
.arc-theme-toggle {
	width: 34px; height: 34px; padding: 0; border: 0; background: none; cursor: pointer;
	border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
}
.arc-theme-toggle-dot {
	width: 20px; height: 20px; border-radius: 50%;
	background: linear-gradient(135deg, var(--arc-cyan), var(--arc-violet));
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 0 8px rgba(var(--arc-cyan-rgb), .5);
	transition: transform .15s ease;
}
.arc-theme-toggle:hover .arc-theme-toggle-dot { transform: scale(1.1); }
.arc-theme-toggle:focus-visible { outline: 2px solid var(--arc-cyan); outline-offset: 2px; }
/* Panneau = popover natif (top-layer) sur desktop. Base display:none -> couvre
   aussi le fallback (navigateur sans Popover API : l'attribut popover est ignoré,
   l'élément ne doit pas rester visible). */
.arc-theme-panel {
	margin: 0; padding: .7rem; border-radius: 12px;
	background: rgba(23, 27, 38, .98); border: 1px solid var(--arc-border);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
	/* position quand ouvert en top-layer (le navigateur passe le popover en position:fixed) */
	inset: auto; top: calc(var(--arc-nav-h) + 8px); right: 1rem; left: auto; bottom: auto;
	display: none;
}
/* ouvert : natif (:popover-open) OU fallback (.arc-open) — :where() = parsing tolérant */
.arc-theme-panel:where(:popover-open, .arc-open) {
	display: grid; grid-template-columns: repeat(4, auto); gap: .5rem;
}
/* fallback sans Popover API : ancrage sous le toggle (pas de top-layer) */
.arc-theme-panel.arc-pop-fallback { position: absolute; inset: auto; top: calc(100% + 10px); right: 0; left: auto; z-index: 1050; }
.arc-swatch {
	width: 30px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer;
	border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; line-height: 0;
}
.arc-swatch::before {
	content: ""; width: 20px; height: 20px; border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
	transition: transform .15s ease, box-shadow .15s ease;
}
.arc-swatch--blue::before  { background: linear-gradient(135deg, #21E6C1, #6C5CE7); }
.arc-swatch--rmag::before  { background: linear-gradient(135deg, #FF2D55, #C81E5B); }
.arc-swatch--rorg::before  { background: linear-gradient(135deg, #FF2D55, #FF7A3D); }
.arc-swatch--green::before { background: linear-gradient(135deg, #8DE41C, #22D3EE); }
.arc-swatch--pink::before  { background: linear-gradient(135deg, #FF2D9B, #C81FE0); }
.arc-swatch--gold::before  { background: linear-gradient(135deg, #FFC400, #FF6A00); }
.arc-swatch--uv::before    { background: linear-gradient(135deg, #C81FE0, #FF3FA4); }
.arc-swatch:hover::before { transform: scale(1.12); }
.arc-swatch[aria-pressed="true"]::before {
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 0 10px rgba(var(--arc-cyan-rgb), .55);
}
.arc-swatch:focus-visible { outline: 2px solid var(--arc-cyan); outline-offset: 2px; }
@media (max-width: 767.98px) {
	.arc-theme-switch { margin: .75rem 0 .25rem; display: block; }
	.arc-theme-toggle { display: none; }
	/* inline, toujours visible dans le menu déplié (UX mobile inchangée) ;
	   display:grid !important bat le display:none de base + la règle UA [popover]. */
	.arc-theme-panel {
		position: static; inset: auto; display: grid !important;
		grid-template-columns: repeat(7, auto); justify-content: start; gap: .4rem;
		padding: 0; background: none; border: 0; box-shadow: none;
	}
}

/* ============================================================
   Effets lumineux (toggles) — reprennent les 2 couleurs du thème.
   Overlays ABSOLUS ancrés en haut de page (PAS fixed) : la lumière
   se diffuse puis disparaît au fil du scroll. Pur CSS.
   ============================================================ */

/* --- Faisceaux coniques de scène (toggle data-beams) --- */
.arc-beams {
	position: absolute; top: 0; left: 0; right: 0; height: 180vh;
	overflow: hidden; pointer-events: none; z-index: 5;
	opacity: 0; transition: opacity .5s ease;
}
html[data-beams="on"] .arc-beams { opacity: 1; }
/* halo diffus « dans l'air » au-dessus de la scène (haut de page) */
.arc-beams::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 95vh;
	background:
		radial-gradient(58% 55% at 20% -8%, rgba(var(--arc-cyan-rgb), .16), transparent 72%),
		radial-gradient(58% 55% at 80% -8%, rgba(var(--arc-violet-rgb), .16), transparent 72%),
		radial-gradient(85% 45% at 50% -12%, rgba(var(--arc-cyan-rgb), .08), transparent 70%);
	filter: blur(44px); mix-blend-mode: screen;
}
.arc-beams .beam {
	position: absolute; top: -10vh; width: clamp(320px, 40vw, 660px); height: 160vh;
	transform-origin: top center;
	/* cône doux : source étroite en haut, très large et diffuse en bas */
	clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%);
	filter: blur(42px); mix-blend-mode: screen; opacity: .5;
	animation: arc-beam 8s ease-in-out infinite alternate, arc-beam-flicker 5s ease-in-out infinite;
}
.arc-beams .beam-1 { left: 5%;   background: linear-gradient(to bottom, rgba(var(--arc-cyan-rgb), .88), rgba(var(--arc-cyan-rgb), .28) 18%, rgba(var(--arc-cyan-rgb), .07) 50%, transparent 84%);   --start: 8deg;   --end: 20deg; }
.arc-beams .beam-2 { left: 30%;  background: linear-gradient(to bottom, rgba(var(--arc-violet-rgb), .80), rgba(var(--arc-violet-rgb), .24) 18%, rgba(var(--arc-violet-rgb), .06) 50%, transparent 82%); --start: 2deg;   --end: 11deg;  animation-delay: -2s, -1.3s; }
.arc-beams .beam-3 { right: 30%; background: linear-gradient(to bottom, rgba(var(--arc-cyan-rgb), .88), rgba(var(--arc-cyan-rgb), .28) 18%, rgba(var(--arc-cyan-rgb), .07) 50%, transparent 84%);   --start: -12deg; --end: -2deg;  animation-delay: -4s, -2.6s; }
.arc-beams .beam-4 { right: 5%;  background: linear-gradient(to bottom, rgba(var(--arc-violet-rgb), .80), rgba(var(--arc-violet-rgb), .24) 18%, rgba(var(--arc-violet-rgb), .06) 50%, transparent 82%); --start: -24deg; --end: -12deg; animation-delay: -6s, -3.9s; }
@keyframes arc-beam {
	from { transform: rotate(var(--start, -12deg)); }
	to   { transform: rotate(var(--end, 14deg)); }
}
@keyframes arc-beam-flicker {
	0%, 100% { opacity: .34; }
	40% { opacity: .44; }
	72% { opacity: .28; }
}

/* --- Lasers fins (toggle data-laser) — vifs, sweep rapide --- */
.arc-lasers {
	position: absolute; top: 0; left: 0; right: 0; height: 170vh;
	overflow: hidden; pointer-events: none; z-index: 6;
	opacity: 0; transition: opacity .5s ease;
}
html[data-laser="on"] .arc-lasers { opacity: 1; }
.arc-lasers .laser {
	position: absolute; top: -5vh; width: 2px; height: 150vh;
	--lc: var(--arc-cyan-rgb);
	transform-origin: top center; mix-blend-mode: screen;
	/* cœur net en haut, fondu en dégradé (pas de box-shadow -> pas de coupure) */
	background: linear-gradient(to bottom, rgba(var(--lc), 1), rgba(var(--lc), .55) 22%, rgba(var(--lc), .15) 44%, transparent 66%);
	filter: blur(.6px);
	animation: arc-laser 3.2s ease-in-out infinite alternate;
}
/* bloom serré autour du cœur (le « glow » du laser), fondu en dégradé */
.arc-lasers .laser::before {
	content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
	width: 9px; height: 150vh; pointer-events: none;
	background: linear-gradient(to bottom, rgba(var(--lc), .8), rgba(var(--lc), .3) 22%, rgba(var(--lc), .08) 46%, transparent 64%);
	filter: blur(5px);
}
/* diffusion fine vers le bas (halo conique étroit qui s'évanouit) */
.arc-lasers .laser::after {
	content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
	width: clamp(26px, 3.5vw, 64px); height: 150vh; pointer-events: none;
	clip-path: polygon(48% 0, 52% 0, 100% 100%, 0 100%);
	background: linear-gradient(to bottom, transparent 8%, rgba(var(--lc), .15) 40%, rgba(var(--lc), .05) 64%, transparent 86%);
	filter: blur(16px);
}
.arc-lasers .laser-2, .arc-lasers .laser-4 { --lc: var(--arc-violet-rgb); }
.arc-lasers .laser-1 { left: 22%;  --start: 18deg;  --end: 30deg; }
.arc-lasers .laser-2 { left: 44%;  --start: 4deg;   --end: 16deg;  animation-delay: -.8s; }
.arc-lasers .laser-3 { right: 40%; --start: -16deg; --end: -2deg;  animation-delay: -1.6s; }
.arc-lasers .laser-4 { right: 20%; --start: -30deg; --end: -16deg; animation-delay: -2.4s; }
@keyframes arc-laser {
	from { transform: rotate(var(--start)); }
	to   { transform: rotate(var(--end)); }
}

/* Mobile : profondeur préservée mais effets plus calmes (lasers moins agressifs,
   animations plus lentes sur petit écran). */
@media (max-width: 767.98px) {
	html[data-laser="on"] .arc-lasers { opacity: .5; }
	.arc-lasers .laser { animation-duration: 5s; }
	.arc-beams .beam { animation-duration: 12s, 7.5s; }
}

/* --- Toggles d'effets dans la navbar --- */
.arc-fx-toggle {
	width: 34px; height: 34px; padding: 0; border: 0; background: none; cursor: pointer;
	border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
	color: var(--arc-muted); margin-left: .5rem; transition: color .2s ease, box-shadow .2s ease;
}
.arc-fx-toggle .arc-icon { width: 20px; height: 20px; }
.arc-fx-toggle:hover { color: var(--arc-text); }
.arc-fx-toggle[aria-pressed="true"] {
	color: var(--arc-cyan);
	box-shadow: 0 0 0 1px rgba(var(--arc-cyan-rgb), .4), 0 0 12px rgba(var(--arc-cyan-rgb), .45);
}
.arc-fx-toggle:focus-visible { outline: 2px solid var(--arc-cyan); outline-offset: 2px; }
.navbar-nav + .arc-fx-toggle { margin-left: 1rem; }
.arc-fx-toggle + .arc-theme-switch { margin-left: .35rem; }
@media (max-width: 767.98px) {
	.navbar-nav + .arc-fx-toggle { margin-left: 0; }
	.arc-fx-toggle { margin: .25rem .4rem .25rem 0; }
}

/* ============================================================
   Pages internes (Location / Installation-Vente / Occasions) :
   bannière-image, figures dans le contenu, aside sticky.
   ============================================================ */
/* Bannière en mini-hero (image à la une + voile sombre) */
.arc-page-banner--img { background-size: cover; background-position: center; padding: calc(4.5rem + var(--arc-nav-h)) 0 4.5rem; }
.arc-page-banner--img::before {
	background:
		linear-gradient(180deg, rgba(14, 16, 24, .74), rgba(14, 16, 24, .9)),
		radial-gradient(60% 120% at 100% 0%, rgba(var(--arc-violet-rgb), .28), transparent 60%);
}
.arc-page-banner--img h1 { text-shadow: 0 2px 18px rgba(0, 0, 0, .5); }

/* Figures dans le contenu */
.arc-page-content figure.arc-fig { margin-top: .4rem; margin-bottom: 1.6rem; }
.arc-page-content .arc-fig img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: 12px; border: 1px solid var(--arc-border); box-shadow: 0 8px 26px rgba(0, 0, 0, .35); }
.arc-page-content .arc-fig figcaption { margin-top: .55rem; font-size: .82rem; color: var(--arc-muted); line-height: 1.4; }
@media (min-width: 768px) {
	.arc-page-content .arc-fig { max-width: 320px; }
	.arc-page-content .arc-fig--right { float: right; margin-left: 2.25rem; }
	.arc-page-content .arc-fig--left  { float: left;  margin-right: 2.25rem; }
}
.arc-page-content h2, .arc-page-content h3 { clear: both; }

/* Aside sticky (devis + prestations) */
.arc-page-aside { margin-top: 2.5rem; }
@media (min-width: 992px) { .arc-page-aside { margin-top: 0; } }
.arc-aside-card { position: sticky; top: calc(var(--arc-nav-h) + 1.25rem); background: var(--arc-surface); border: 1px solid var(--arc-border); border-radius: var(--bs-border-radius); padding: 1.4rem; }
.arc-aside-card h2 { margin-bottom: .35rem; }
.arc-aside-card p { color: var(--arc-muted); font-size: .92rem; }
.arc-aside-phone { display: inline-flex; align-items: center; gap: .5rem; color: var(--arc-text); font-family: var(--arc-font-title); font-weight: 700; text-decoration: none; }
.arc-aside-phone .arc-icon { color: var(--arc-cyan); }
.arc-aside-card hr { border-color: var(--arc-border); opacity: 1; margin: 1.1rem 0; }
.arc-aside-label { text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; color: var(--arc-muted); margin-bottom: .5rem; }
.arc-aside-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.arc-aside-links a { display: block; padding: .5rem .7rem; border-radius: 8px; color: var(--arc-text); text-decoration: none; border: 1px solid transparent; transition: background .15s ease, border-color .15s ease; }
.arc-aside-links a:hover { background: rgba(var(--arc-cyan-rgb), .08); }
.arc-aside-links a[aria-current="page"] { background: rgba(var(--arc-cyan-rgb), .12); border-color: rgba(var(--arc-cyan-rgb), .35); color: var(--arc-cyan); font-weight: 600; }

/* Effets lumineux : animations en pause tant que l'effet est OFF (perf — surtout
   sur les pages internes où l'overlay existe mais n'est pas activé). */
.arc-beams .beam, .arc-lasers .laser { animation-play-state: paused; }
/* will-change uniquement quand l'effet est actif -> pas de couche compositeur
   (VRAM) maintenue en permanence sur toutes les pages quand l'effet est OFF. */
html[data-beams="on"] .arc-beams .beam { animation-play-state: running; will-change: transform, opacity; }
html[data-laser="on"] .arc-lasers .laser { animation-play-state: running; will-change: transform; }

/* Lot bascule (23/10/2026) : logo en grand dans le hero, liens légaux du pied de page. */
.arc-hero .hero-logo { display: block; width: min(460px, 82%); height: auto; margin: 0 0 1.25rem; }
.arc-footer-legal { font-size: .875rem; }
.arc-footer-legal a { color: var(--arc-text-muted, #A7AFBF); text-decoration: none; }
.arc-footer-legal a:hover, .arc-footer-legal a:focus-visible { color: var(--arc-cyan); text-decoration: underline; }

/* Crédits photo (23/10/2026) */
.arc-photo-credit { font-size: .75rem; color: var(--arc-muted, #A7AFBF); margin-top: .4rem; }
.arc-photo-credit a { color: inherit; text-decoration: underline; }