/* =========================================================================
   Snart Industries — version 2
   Couche de modernisation : s'ajoute APRES style.css (aucune page n'est cassee)
   - theme sombre affine + theme clair complet, commutable en direct
   - animations fluides : apparitions au defilement, parallaxe, halos, survols
   - en-tete repense : menu telephone, bouton de theme, barre de progression
   ========================================================================= */

/* ---------- police Inter auto-hebergee (aucun appel externe) ---------- */
@font-face {
	font-family: 'Inter';
	src: url('/assets/fonts/inter-var.woff2') format('woff2-variations');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* ---------- jetons de couleur : theme sombre (par defaut) ---------- */
:root {
	--bg: #070B18;
	--bg-2: #0B1226;
	--bg-3: #101A38;
	--card: rgba(255, 255, 255, .045);
	--card-2: rgba(255, 255, 255, .075);
	--line: rgba(255, 255, 255, .13);
	--line-2: rgba(255, 255, 255, .07);
	--txt: #F2F5FA;
	--head: #FFFFFF;
	--muted: #9AA6BD;
	--accent: #00E5FF;
	--accent-2: #4F7CFF;
	--accent-ink: #04121A;
	--glow: rgba(0, 229, 255, .30);
	--glass: rgba(7, 11, 24, .72);
	--img-bg: #081124;
	--radius: 16px;
	--radius-lg: 22px;
	--wrap: 1180px;
	--ease: cubic-bezier(.22, .61, .36, 1);
	--shadow: 0 18px 50px rgba(0, 0, 0, .38);
	color-scheme: dark;
}

/* ---------- theme clair ---------- */
html[data-theme="light"] {
	--bg: #F5F8FD;
	--bg-2: #EBF1FA;
	--bg-3: #FFFFFF;
	--card: #FFFFFF;
	--card-2: #FFFFFF;
	--line: rgba(12, 22, 48, .12);
	--line-2: rgba(12, 22, 48, .07);
	--txt: #101B36;
	--head: #070F22;
	--muted: #5C6987;
	--accent: #0A93B5;
	--accent-2: #3C63DA;
	--accent-ink: #FFFFFF;
	--glow: rgba(10, 147, 181, .22);
	--glass: rgba(255, 255, 255, .80);
	--img-bg: #E4EBF6;
	--shadow: 0 16px 40px rgba(12, 22, 48, .10);
	color-scheme: light;
}

/* ---------- transition douce lors du changement de theme ---------- */
html.theme-anim body,
html.theme-anim .site-header,
html.theme-anim .site-footer,
html.theme-anim .pillar,
html.theme-anim .exp-card,
html.theme-anim .panel,
html.theme-anim .why,
html.theme-anim .arch-node,
html.theme-anim .arch-branch,
html.theme-anim .contact-band,
html.theme-anim .chat-panneau,
html.theme-anim input,
html.theme-anim textarea {
	transition: background-color .45s var(--ease), color .45s var(--ease),
	            border-color .45s var(--ease), box-shadow .45s var(--ease);
}

/* ---------- base ---------- */
html { scroll-behavior: smooth; }
body {
	font-family: "Inter", "Roboto", "Segoe UI", system-ui, sans-serif;
	background-image:
		radial-gradient(760px 420px at 12% -6%, var(--glow), transparent 70%),
		radial-gradient(820px 460px at 88% 4%, rgba(79, 124, 255, .16), transparent 70%);
	transition: background-color .45s var(--ease), color .45s var(--ease);
}
h1, h2, h3, h4 { color: var(--head); }
.kicker { color: var(--accent); }

/* aurora : deux halos qui derivent lentement en fond de page */
body::before {
	content: "";
	position: fixed;
	inset: -30vh -10vw auto -10vw;
	height: 90vh;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(520px 340px at 22% 30%, var(--glow), transparent 70%),
		radial-gradient(560px 360px at 78% 18%, rgba(79, 124, 255, .20), transparent 70%);
	filter: blur(20px);
	opacity: .85;
	animation: snartDrift 26s ease-in-out infinite alternate;
}
@keyframes snartDrift {
	from { transform: translate3d(-2%, 0, 0) scale(1); }
	to   { transform: translate3d(3%, 4%, 0) scale(1.08); }
}

/* =========================================================================
   EN-TETE
   ========================================================================= */
.site-header {
	background: var(--glass);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
	border-bottom: 1px solid var(--line);
	transition: height .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.compact { box-shadow: 0 10px 30px rgba(0, 0, 0, .22); }
.site-header.compact .nav { height: 62px; }
.nav { height: 80px; transition: height .3s var(--ease); }
.brand .mark {
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	box-shadow: 0 8px 22px var(--glow);
	transition: transform .3s var(--ease);
}
.brand:hover .mark { transform: rotate(-6deg) scale(1.06); }
.brand-txt b { color: var(--head); }
.menu a { position: relative; padding: 6px 2px; white-space: nowrap; transition: color .2s var(--ease); }
.brand-txt b, .brand-txt i { white-space: nowrap; }
.demo-nav { white-space: nowrap; }
.menu a::after {
	content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
	background: linear-gradient(90deg, var(--accent), var(--accent-2));
	border-radius: 2px; transition: right .28s var(--ease);
}
.menu a:hover::after, .menu a[aria-current="page"]::after { right: 0; }
.menu a[aria-current="page"] { color: var(--txt); }

/* bouton de changement de theme */
.theme-btn {
	width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center;
	background: var(--card); border: 1px solid var(--line); border-radius: 11px;
	color: var(--txt); cursor: pointer; padding: 0;
	transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.theme-btn:hover { transform: translateY(-2px); border-color: var(--accent); }
.theme-btn svg { width: 18px; height: 18px; }
.theme-btn .ico-soleil { display: none; }
html[data-theme="light"] .theme-btn .ico-soleil { display: block; }
html[data-theme="light"] .theme-btn .ico-lune { display: none; }

/* bouton menu telephone */
.burger {
	display: none; width: 40px; height: 40px; flex: 0 0 40px;
	background: var(--card); border: 1px solid var(--line); border-radius: 11px;
	cursor: pointer; padding: 0; place-items: center;
}
.burger span {
	display: block; width: 18px; height: 2px; background: var(--txt); border-radius: 2px;
	position: relative; transition: transform .3s var(--ease), background .2s;
}
.burger span::before, .burger span::after {
	content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--txt);
	border-radius: 2px; transition: transform .3s var(--ease), top .3s var(--ease);
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger.ouvert span { background: transparent; }
.burger.ouvert span::before { top: 0; transform: rotate(45deg); }
.burger.ouvert span::after { top: 0; transform: rotate(-45deg); }

/* barre de progression de lecture */
.scroll-progress {
	position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 90;
	background: linear-gradient(90deg, var(--accent), var(--accent-2));
	transition: width .1s linear;
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero h1 {
	background: linear-gradient(100deg, var(--head) 26%, var(--accent) 62%, var(--accent-2) 96%);
	background-size: 220% 100%;
	-webkit-background-clip: text; background-clip: text; color: transparent;
	animation: snartSheen 12s ease-in-out infinite alternate;
}
@keyframes snartSheen {
	from { background-position: 0% 50%; }
	to   { background-position: 100% 50%; }
}
.hero-visual {
	margin-top: 46px; border: 1px solid var(--line); border-radius: var(--radius-lg);
	overflow: hidden; position: relative; background: var(--img-bg);
	box-shadow: var(--shadow);
	transform: translateZ(0);
}
.hero-visual img {
	width: 100%; height: auto; display: block;
	transition: transform 1.2s var(--ease);
	animation: snartKenBurns 24s ease-in-out infinite alternate;
}
@keyframes snartKenBurns {
	from { transform: scale(1) translate3d(0, 0, 0); }
	to   { transform: scale(1.045) translate3d(0, -6px, 0); }
}
.hero-visual::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, transparent 52%, rgba(7, 11, 24, .55));
}
/* balayage lumineux a l'apparition */
.hero-visual::before {
	content: ""; position: absolute; top: 0; bottom: 0; width: 42%; z-index: 2;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16), transparent);
	transform: translateX(-140%); pointer-events: none;
	animation: snartSweep 2.6s var(--ease) .5s 1 both;
}
@keyframes snartSweep {
	to { transform: translateX(320%); }
}
/* halo derriere le visuel */
.hero-glow {
	position: relative;
}
.hero-glow::before {
	content: ""; position: absolute; inset: 8% 6% -6% 6%; z-index: -1;
	background: radial-gradient(60% 60% at 50% 50%, var(--glow), transparent 70%);
	filter: blur(30px); opacity: .9;
}

/* =========================================================================
   CARTES : survols plus vivants
   ========================================================================= */
.pillar, .panel, .why, .arch-branch {
	background: var(--card);
	border-color: var(--line);
	transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.pillar:hover, .arch-branch:hover {
	transform: translateY(-6px);
	border-color: var(--accent);
	box-shadow: 0 16px 40px rgba(0, 0, 0, .28), 0 0 0 1px var(--glow) inset;
}
.pillar h3, .foot-grid h4, .arch-branch b, .arch-branch p { color: var(--head); }
.pillar li { color: var(--muted); }
.pillar li b { color: var(--txt); }

.exp-card {
	background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
	transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.exp-card:hover {
	transform: translateY(-6px);
	border-color: var(--accent);
	box-shadow: 0 20px 46px rgba(0, 0, 0, .32), 0 0 0 1px var(--glow) inset;
}
.exp-media { background: var(--img-bg); }
.exp-media img { transition: transform .7s var(--ease), filter .5s var(--ease); }
.exp-card:hover .exp-media img { transform: scale(1.06); }
.exp-body h3 { color: var(--head); }
.exp-link { display: inline-flex; align-items: center; gap: 6px; }
.exp-link::after { content: "→"; transition: transform .25s var(--ease); }
.exp-card:hover .exp-link::after { transform: translateX(4px); }

.btn { transition: transform .25s var(--ease), filter .25s var(--ease), box-shadow .25s var(--ease); }
.btn-primary { box-shadow: 0 10px 26px var(--glow); }
.btn-primary:hover { box-shadow: 0 14px 34px var(--glow); filter: brightness(1.06); }
.badge, .tag.on { backdrop-filter: blur(6px); }

/* =========================================================================
   APPARITIONS AU DEFILEMENT (le contenu reste visible sans JavaScript)
   ========================================================================= */
.js .reveal {
	opacity: 0; transform: translateY(22px);
	transition: opacity .7s var(--ease), transform .7s var(--ease);
	will-change: opacity, transform;
}
.js .reveal.visible { opacity: 1; transform: none; }
.js .reveal-d1 { transition-delay: .08s; }
.js .reveal-d2 { transition-delay: .16s; }
.js .reveal-d3 { transition-delay: .24s; }
.js .reveal-d4 { transition-delay: .32s; }

/* =========================================================================
   THEME CLAIR : corrections des zones ecrites en clair dans la base
   ========================================================================= */
html[data-theme="light"] body::before { opacity: .5; }
html[data-theme="light"] .site-header { box-shadow: 0 6px 24px rgba(12, 22, 48, .06); }
html[data-theme="light"] .hero-visual::after { background: linear-gradient(180deg, transparent 60%, rgba(7, 15, 34, .28)); }
html[data-theme="light"] .chat { background: var(--bg-3); }
html[data-theme="light"] .av.user { background: rgba(12, 22, 48, .08); color: var(--txt); }
html[data-theme="light"] .bubble { background: var(--bg-2); color: var(--txt); }
html[data-theme="light"] .why .row { border-bottom-color: var(--line-2); }
html[data-theme="light"] .why .v,
html[data-theme="light"] .prose p, html[data-theme="light"] .prose li,
html[data-theme="light"] .checklist li, html[data-theme="light"] .hero .sub { color: #3D4A68; }
html[data-theme="light"] .why .k { background: rgba(10, 147, 181, .07); }
html[data-theme="light"] .site-footer { background: #EDF2FA; }
html[data-theme="light"] .foot-bottom { border-top-color: var(--line-2); }
html[data-theme="light"] .foot-bottom b { color: var(--accent); }
html[data-theme="light"] .reserved { border-color: rgba(12, 22, 48, .18); background: #FFFFFF; }
html[data-theme="light"] input, html[data-theme="light"] textarea, html[data-theme="light"] select { background: #FFFFFF; border-color: var(--line); color: var(--txt); }
html[data-theme="light"] .contact-band { background: linear-gradient(140deg, rgba(10, 147, 181, .10), rgba(60, 99, 218, .12)); }
html[data-theme="light"] .arch-node { background: linear-gradient(140deg, rgba(10, 147, 181, .12), rgba(60, 99, 218, .10)); border-color: rgba(10, 147, 181, .35); }
html[data-theme="light"] .arch-node.tech { background: linear-gradient(140deg, rgba(60, 99, 218, .14), rgba(150, 92, 220, .12)); border-color: rgba(60, 99, 218, .4); }
html[data-theme="light"] .badge,
html[data-theme="light"] .chat-choix-btn,
html[data-theme="light"] .pdg-bouton { color: #0B3D4E; }
html[data-theme="light"] .pdg-etiquette { background: rgba(12, 22, 48, .05); }
html[data-theme="light"] .pdg-message.traite { border-left-color: rgba(92, 105, 135, .5); }
html[data-theme="light"] .chat-panneau { background: #FFFFFF; border-color: var(--line); box-shadow: 0 24px 60px rgba(12, 22, 48, .18); }
html[data-theme="light"] .chat-tete { background: linear-gradient(120deg, rgba(10, 147, 181, .10), rgba(60, 99, 218, .10)); border-bottom-color: var(--line-2); }
html[data-theme="light"] .chat-msg.bot { background: var(--bg-2); }
html[data-theme="light"] .chat-saisie { background: var(--bg-2); border-top-color: var(--line-2); }
html[data-theme="light"] .chat-champ { background: #FFFFFF; color: var(--txt); }
html[data-theme="light"] .chat-fermer:hover { background: rgba(12, 22, 48, .06); }
html[data-theme="light"] .pdg-boite, html[data-theme="light"] .pdg-carte, html[data-theme="light"] .pdg-message { background: #FFFFFF; box-shadow: var(--shadow); }
html[data-theme="light"] .pdg-form input, html[data-theme="light"] .pdg-recherche input { background: #FFFFFF; color: var(--txt); }
html[data-theme="light"] .arch-branch:before, html[data-theme="light"] .arch-stem { background: rgba(10, 147, 181, .3); }
html[data-theme="light"] .arch-branches:before { background: linear-gradient(90deg, transparent, rgba(10, 147, 181, .35), transparent); }
html[data-theme="light"] .step { border-top-color: rgba(10, 147, 181, .45); }
html[data-theme="light"] .chat-bulle { box-shadow: 0 12px 30px rgba(12, 22, 48, .22); }
html[data-theme="light"] .btn-primary { color: #FFFFFF; }
html[data-theme="light"] .brand .mark,
html[data-theme="light"] .av,
html[data-theme="light"] .chat-av,
html[data-theme="light"] .chat-envoyer { color: #FFFFFF; }
html[data-theme="light"] .arch-node b, html[data-theme="light"] .arch-node span { color: #0B1730; }
html[data-theme="light"] .kicker { color: #0A93B5; }
html[data-theme="light"] .menu a { color: #4A5773; }
html[data-theme="light"] .menu a:hover, html[data-theme="light"] .menu a[aria-current="page"] { color: #070F22; }

/* =========================================================================
   TELEPHONE : en-tete propre + panneau de menu
   ========================================================================= */
.menu-panneau {
	position: fixed; inset: 0 0 0 auto; width: min(340px, 86vw); z-index: 95;
	background: var(--glass); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
	border-left: 1px solid var(--line);
	transform: translateX(102%); transition: transform .34s var(--ease);
	display: flex; flex-direction: column; gap: 6px; padding: 86px 22px 26px;
	overflow-y: auto;
}
.menu-panneau.ouvert { transform: none; }
.menu-panneau a {
	font-size: 16px; padding: 13px 14px; border-radius: 12px; color: var(--txt);
	border: 1px solid transparent; transition: background .2s var(--ease), border-color .2s var(--ease);
}
.menu-panneau a:hover, .menu-panneau a[aria-current="page"] {
	background: var(--card); border-color: var(--line);
}
.menu-panneau .btn { margin-top: 10px; text-align: center; }
.voile {
	position: fixed; inset: 0; z-index: 94; background: rgba(4, 8, 18, .55);
	opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s;
	-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.voile.ouvert { opacity: 1; visibility: visible; }

@media (max-width: 1280px) {
	/* ecrans intermediaires : on retire la ligne d'accroche pour que le menu
	   et le bouton respirent, sans rien casser sur une seule ligne */
	.brand-txt i { display: none; }
	.menu { gap: 18px; font-size: 13.5px; }
	.nav { gap: 14px; }
	.nav .btn { padding: 11px 18px; font-size: 13.5px; }
}
@media (max-width: 1000px) {
	.menu { display: none; }
	.burger { display: grid; }
	.nav { gap: 10px; }
	.theme-btn { order: 2; }
	.burger { order: 3; }
}
@media (min-width: 1001px) {
	.menu-panneau, .voile { display: none; }
}
@media (max-width: 620px) {
	.nav { height: 66px; }
	.site-header.compact .nav { height: 58px; }
	.hero { padding: 54px 0 44px; }
	.hero-visual { border-radius: 16px; margin-top: 34px; }
	.logo-texte { display: none; }
	section { padding: 56px 0; }

	/* en-tete telephone : le nom complet tient sur une ligne, le bouton de démo
	   passe dans le menu, et la bulle de discussion devient un simple rond */
	.demo-nav { display: none; }
	.brand { min-width: 0; flex: 1 1 auto; }
	.brand-txt { min-width: 0; }
	.brand-txt b {
		font-size: 13.5px; letter-spacing: .1em;
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	}
	.nav { gap: 8px; }
	.theme-btn, .burger { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; }
	.chat-bulle { padding: 13px 14px; right: 12px; bottom: 12px; }
	.chat-bulle-txt { display: none; }
	.chat-bulle-ico { font-size: 20px; }
	.menu-panneau { padding-top: 78px; }
}

/* =========================================================================
   CONFORT : respect du reglage « moins d'animations »
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001s !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001s !important;
	}
	.js .reveal { opacity: 1; transform: none; }
	body::before { animation: none; }
	.hero-visual img { animation: none; }
}

/* --- Visuels carres en tete des cartes "piliers" ---
   La vignette sombre en bas de l'image calme le halo lumineux des rendus
   et raccorde l'image a la carte. */
.pillar { display: flex; flex-direction: column; }
.pillar-media { position: relative; margin: 0 0 16px; border-radius: 12px; overflow: hidden; background: #070B18; }
.pillar-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7,11,24,0) 48%, rgba(7,11,24,.62) 100%);
}
.pillar-media img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
@media (max-width: 620px) { .pillar-media img { aspect-ratio: 4 / 3; } }
/* --- Cartes "realisations" : visuel en haut, texte dessous --- */
.case-card { padding: 0 0 22px; overflow: hidden; }
.case-media { position: relative; border-radius: 14px 14px 0 0; overflow: hidden; margin-bottom: 16px; }
.case-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7,11,24,0) 55%, rgba(7,11,24,.38) 100%);
}
.case-media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.case-card .case-kicker { padding: 0 22px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.case-card h3 { padding: 0 22px; font-size: 16px; margin: 6px 0 8px; }
.case-card p { padding: 0 22px; font-size: 14px; line-height: 1.6; }

/* --- Page KAMIS : bandeau des cinq domaines --- */
.kamis-bandeau { position: relative; margin-top: 22px; border-radius: 14px; overflow: hidden; background: #070B18; }
.kamis-bandeau::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7,11,24,0) 60%, rgba(7,11,24,.45) 100%);
}
.kamis-bandeau img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
@media (max-width: 620px) { .case-media img, .kamis-bandeau img { aspect-ratio: 16 / 9; } }

/* --- Images servies en WebP avec repli JPEG : le <picture> ne doit pas peser sur la mise en page --- */
picture { display: contents; }