/* The LightMap — feuille unique.
   Base : systeme Organic (rampes OKLCH neutre / terracotta / sauge) en theme nuit.
   Les tokens sont la source de verite : retoucher ici, pas dans les composants. */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
	--color-neutral-100: #f9f4ed; --color-neutral-200: #eee7db; --color-neutral-300: #dcd3c4;
	--color-neutral-400: #c0b6a5; --color-neutral-500: #a19786; --color-neutral-600: #82796a;
	--color-neutral-700: #645c50; --color-neutral-800: #474238; --color-neutral-900: #2e2b25;

	--color-accent-100: #fff2eb; --color-accent-200: #ffe1d0; --color-accent-300: #ffc6a5;
	--color-accent-400: #f6a06b; --color-accent-500: #d67f48; --color-accent-600: #b2622d;
	--color-accent-700: #8c491a; --color-accent-800: #643312; --color-accent-900: #402310;

	--color-accent-2-100: #f0fae1; --color-accent-2-200: #e1eecc; --color-accent-2-300: #ccdbb2;
	--color-accent-2-400: #aebf92; --color-accent-2-500: #8fa073; --color-accent-2-600: #728157;
	--color-accent-2-700: #56633f; --color-accent-2-800: #3d472b; --color-accent-2-900: #272e1b;

	/* Theme nuit (seul theme du site) */
	--color-bg: #171512;
	--color-bg: color-mix(in oklch, var(--color-neutral-900) 52%, black);
	--color-surface: #24211c;
	--color-surface: color-mix(in oklch, var(--color-neutral-900) 78%, black);
	--color-text: var(--color-neutral-100);
	--color-muted: color-mix(in srgb, var(--color-neutral-100) 62%, transparent);
	--color-accent: #c67139;
	--color-accent-2: #7a8a5e;
	--color-divider: color-mix(in srgb, var(--color-neutral-100) 16%, transparent);
	--color-link: var(--color-accent-300);

	--font-heading: "Anton", Impact, "Arial Narrow", sans-serif;
	--font-body: "Archivo", system-ui, sans-serif;

	--space-1: 4.4px; --space-2: 8.8px; --space-3: 13.2px; --space-4: 17.6px;
	--space-6: 26.4px; --space-8: 35.2px; --space-12: 52.8px;
	--radius-sm: 8px; --radius-md: 16px; --radius-lg: 28px; --radius-pill: 999px;

	--shadow-md: 0 0 0 1px var(--color-divider), 0 6px 18px rgb(0 0 0 / .45);
	--shadow-lg: 0 0 0 1px var(--color-divider), 0 16px 40px rgb(0 0 0 / .55);
	--glow: 0 0 0 4px color-mix(in srgb, var(--color-accent-400) 30%, transparent), 0 0 18px 6px var(--color-accent-500);

	--header-h: 64px;
	--gutter: clamp(16px, 4vw, 40px);
	--content-max: 1180px;

	color-scheme: dark;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 8px); }
body {
	margin: 0; min-height: 100vh; display: flex; flex-direction: column;
	background: var(--color-bg); color: var(--color-text);
	font-family: var(--font-body); font-size: 16px; line-height: 1.55;
}
main { flex: 1; }
[hidden] { display: none !important; }
html:not(.js) .js-only { display: none !important; }	/* app.js ajoute .js */	/* un composant en display:flex ne doit jamais l'annuler */
h1, h2, h3, h4 {
	font-family: var(--font-heading); font-weight: 400; line-height: 1.08;
	letter-spacing: .005em; margin: 0 0 var(--space-3);
}
h1 { font-size: clamp(40px, 7vw, 76px); }
h2 { font-size: clamp(28px, 4vw, 40px); }
h3 { font-size: 24px; }
h4 { font-size: 19px; }
p { margin: 0 0 var(--space-4); }
a { color: var(--color-link); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-200); }
img { display: block; max-width: 100%; height: auto; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent-400); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 40%, transparent); }
.text-muted { color: var(--color-muted); }
.lead { font-size: clamp(17px, 2vw, 19px); color: color-mix(in srgb, var(--color-text) 86%, transparent); max-width: 60ch; }
.kicker { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-300); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.icon { display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 2.75; stroke-linecap: round; stroke-linejoin: round; }

.skip-link {
	position: absolute; left: var(--space-3); top: -60px; z-index: 100;
	padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
	background: var(--color-accent); color: var(--color-bg); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--space-3); }

/* ── Composants ─────────────────────────────────────────────────────────── */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 0 20px; border-radius: var(--radius-pill);
	border: 1px solid transparent; background: transparent; color: var(--color-text);
	font-family: var(--font-heading); font-size: 16px; letter-spacing: .01em; line-height: 1;
	text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.btn:hover { color: var(--color-text); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-500); color: var(--color-bg); }
.btn-primary:active { background: var(--color-accent-600); }
.btn-secondary { background: color-mix(in srgb, var(--color-text) 8%, transparent); border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-text); padding: 0 14px; }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 14%, transparent); }
.btn-ghost[aria-current="page"] { color: var(--color-accent-300); }
.btn-sm { min-height: 34px; padding: 0 14px; font-size: 14px; }
.btn-icon { width: 44px; padding: 0; }
.btn-sm.btn-icon, .lang-banner .btn-icon { width: 34px; min-height: 34px; }

.input {
	width: 100%; min-height: 46px; padding: 10px 18px; font: inherit; font-size: 15px;
	color: var(--color-text); caret-color: var(--color-accent-400);
	background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-pill);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 40%, transparent); }
.input:focus-visible { border-color: var(--color-accent-400); outline-offset: 0; }
textarea.input { min-height: 120px; border-radius: var(--radius-md); resize: vertical; }
.field > label { display: block; font-size: 13px; margin-bottom: 6px; color: var(--color-muted); }

.card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-radius: calc(var(--radius-lg) * 1.15); background: var(--color-surface); box-shadow: var(--shadow-md); }

.tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; }
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-outline { border: 1px solid var(--color-divider); color: var(--color-muted); }

/* Point lumineux (logo, arrets du fil, marqueurs) */
.trail-dot {
	display: inline-block; width: 14px; height: 14px; border-radius: 50%;
	background: var(--color-accent-300); box-shadow: var(--glow);
}
.trail-dot-off { background: var(--color-neutral-600); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-neutral-500) 25%, transparent); }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.site-header {
	position: sticky; top: 0; z-index: 40; height: var(--header-h);
	display: flex; align-items: center; gap: 20px; padding: 0 var(--gutter);
	background: color-mix(in srgb, var(--color-bg) 82%, transparent);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--color-text); text-decoration: none; }
.brand:hover { color: var(--color-text); }
.brand-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--color-accent-300); box-shadow: var(--glow); }
.brand-name { font-family: var(--font-heading); font-size: 22px; line-height: 1; }
.site-nav { display: flex; gap: 4px; margin-left: 12px; }
.header-cta { margin-left: auto; }

.lang-banner {
	display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
	margin: var(--space-2) var(--gutter) 0; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
	border-radius: var(--radius-pill); background: var(--color-surface); box-shadow: var(--shadow-md); font-size: 14px;
}
.lang-banner > span { flex: 1; min-width: 12ch; }

.page { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: var(--space-8) var(--gutter) var(--space-12); }
.page-narrow { max-width: 760px; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

.placeholder { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.placeholder .trail-dot { margin-bottom: var(--space-6); }

.site-footer {
	display: grid; grid-template-columns: 1fr auto; gap: var(--space-4) var(--space-8);
	padding: var(--space-8) var(--gutter); border-top: 1px solid var(--color-divider);
	font-size: 14px;
}
.footer-brand p { margin: 4px 0 0; }
.footer-links, .lang-switch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.footer-links a, .lang-switch a { color: var(--color-muted); text-decoration: none; }
.footer-links a:hover, .lang-switch a:hover, .lang-switch a[aria-current] { color: var(--color-text); }
.lang-switch { grid-column: 1 / -1; color: var(--color-muted); }
.footer-legal { grid-column: 1 / -1; margin: 0; font-size: 12px; }

.tabbar { display: none; }

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
	.site-nav, .header-cta { display: none; }
	.site-footer { grid-template-columns: 1fr; padding-bottom: calc(var(--space-8) + 72px); }
	.tabbar {
		position: fixed; inset: auto 0 0; z-index: 50; display: grid; grid-template-columns: repeat(4, 1fr);
		padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
		background: color-mix(in srgb, var(--color-bg) 90%, transparent);
		-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
		border-top: 1px solid var(--color-divider);
	}
	.tabbar a {
		display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0;
		color: var(--color-muted); text-decoration: none; font-size: 11px; font-weight: 600;
	}
	.tabbar a[aria-current="page"] { color: var(--color-accent-300); }
	.tabbar-cta svg { color: var(--color-bg); background: var(--color-accent); border-radius: 50%; padding: 4px; width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ── Formulaires, alertes ───────────────────────────────────────────────── */
.form-stack { display: flex; flex-direction: column; gap: var(--space-4); margin: var(--space-4) 0; }
.form-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: var(--space-4) 0; }
.form-row .input { flex: 1 1 200px; width: auto; }
.btn-block { width: 100%; }
.input-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 20px; letter-spacing: .3em; text-align: center; max-width: 220px; }
.alert { margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: 14px; border: 1px solid var(--color-divider); background: var(--color-surface); }
.alert-error { border-color: color-mix(in srgb, var(--color-accent-400) 60%, transparent); background: color-mix(in srgb, var(--color-accent-700) 30%, var(--color-surface)); color: var(--color-accent-100); }
.alert-success { border-color: color-mix(in srgb, var(--color-accent-2-400) 55%, transparent); background: color-mix(in srgb, var(--color-accent-2-800) 45%, var(--color-surface)); color: var(--color-accent-2-100); }
.alert-info { color: var(--color-text); }
.alert-debug { font-family: ui-monospace, monospace; font-size: 12px; word-break: break-all; }
.h3 { font-size: 24px; }

/* ── Espace artiste ─────────────────────────────────────────────────────── */
.auth-page { min-height: 70vh; display: grid; place-items: center; }
.auth-card { width: min(440px, 100%); padding: var(--space-8) var(--space-6); }
.auth-card .trail-dot { margin-bottom: var(--space-4); }
.auth-title { font-size: clamp(32px, 6vw, 44px); margin-bottom: var(--space-2); }
.auth-link { align-self: center; margin-top: var(--space-2); font-size: 14px; color: var(--color-muted); }
.space-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-8); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-divider); }
.space-logout { margin-left: auto; }
.space-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.space-card { flex-direction: row; align-items: center; gap: var(--space-3); padding: var(--space-6); color: var(--color-text); text-decoration: none; transition: transform .15s, box-shadow .15s; }
.space-card:hover { color: var(--color-text); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.space-card .icon { color: var(--color-accent-300); }
.card-title { font-family: var(--font-heading); font-size: 20px; line-height: 1.1; }
.page-narrow-wide { max-width: 860px; }
.settings-card { margin-top: var(--space-6); padding: var(--space-6); }
.twofa-setup { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center; margin: var(--space-4) 0; }
.twofa-qr { width: 180px; height: 180px; padding: 6px; border-radius: var(--radius-md); background: #fff; }
.twofa-qr svg { display: block; width: 100%; height: 100%; }
.twofa-key { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.twofa-key code { font-size: 16px; letter-spacing: .08em; word-break: break-all; }

/* ── Fiche photo ────────────────────────────────────────────────────────── */
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--space-4); padding: 0; list-style: none; font-size: 14px; }
.breadcrumb li { display: flex; align-items: center; gap: 6px; color: var(--color-muted); }
.breadcrumb li + li::before { content: "›"; color: var(--color-muted); }
.breadcrumb a { color: var(--color-text); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-accent-300); }
.breadcrumb [aria-current] { max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo-hero { margin: 0; border-radius: calc(var(--radius-lg) * 1.15); overflow: hidden; background: #050504; box-shadow: var(--shadow-lg); }
.photo-hero img { width: 100%; max-height: 82vh; object-fit: contain; background: #050504; }
.photo-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); gap: var(--space-8); margin-top: var(--space-8); align-items: start; }
.photo-head h1 { font-size: clamp(36px, 5vw, 60px); margin-bottom: var(--space-2); }
.photo-byline { font-size: 17px; margin-bottom: var(--space-2); }
.photo-byline a { color: var(--color-accent-300); font-weight: 600; text-decoration: none; }
.photo-head .actions { margin-top: var(--space-4); }
.exif { display: grid; gap: 0; margin: 0; padding: var(--space-4) var(--space-6); border-radius: calc(var(--radius-lg) * 1.15); background: var(--color-surface); box-shadow: var(--shadow-md); }
.exif > div { display: grid; grid-template-columns: 110px 1fr; gap: var(--space-3); padding: 10px 0; border-bottom: 1px solid var(--color-divider); }
.exif > div:last-child { border-bottom: 0; }
.exif dt { color: var(--color-muted); font-size: 14px; }
.exif dd { margin: 0; font-weight: 600; }
.photo-section { margin-top: var(--space-12); }
.photo-section h2 { margin-bottom: var(--space-6); }

/* Vignettes 4:5, recadrees (regle de la refonte) */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-6) var(--space-4); }
.photo-grid-large { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.photo-card { display: flex; flex-direction: column; gap: 4px; color: var(--color-text); text-decoration: none; }
.photo-card:hover { color: var(--color-text); }
.photo-card picture { display: block; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-divider); margin-bottom: var(--space-2); }
.photo-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.photo-card:hover img { transform: scale(1.04); }
.photo-card-title { font-family: var(--font-heading); font-size: 20px; line-height: 1.1; }
.photo-card-meta { font-size: 13px; color: var(--color-muted); }

/* ── Fiche artiste ──────────────────────────────────────────────────────── */
.artist-head { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.artist-avatar { width: 160px; height: 160px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 40px 4px color-mix(in srgb, var(--color-accent-500) 45%, transparent);
	background: radial-gradient(circle at 35% 35%, var(--color-accent-300), var(--color-accent-700) 55%, #050504 75%); }
.artist-avatar picture, .artist-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.artist-info h1 { margin-bottom: var(--space-3); }
.artist-bio { max-width: 62ch; font-size: 17px; color: color-mix(in srgb, var(--color-text) 88%, transparent); }
.artist-bio p { margin-bottom: var(--space-3); }
.artist-links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 0; padding: 0; list-style: none; }

@media (max-width: 760px) {
	.photo-body { grid-template-columns: 1fr; gap: var(--space-6); }
	.photo-hero { border-radius: var(--radius-lg); margin-inline: calc(var(--gutter) * -1 + 8px); }
	.photo-grid { grid-template-columns: repeat(2, 1fr); }
	.artist-head { grid-template-columns: 1fr; gap: var(--space-4); }
	.artist-avatar { width: 112px; height: 112px; }
}

/* ── Carte ──────────────────────────────────────────────────────────────── */
.map-layout { position: relative; height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); min-height: 480px; }
.map-stage { position: absolute; inset: 0; }
/* carte embarquee (/embed) : toute la fenetre de l'iframe */
.page-embed .map-layout { height: 100vh; height: 100dvh; min-height: 0; }
.embed-brand { position: absolute; z-index: 5; top: var(--space-3); left: var(--space-3); }
/* taille explicite : maplibre-gl.css (charge apres) impose position: relative au conteneur */
.map-canvas { width: 100%; height: 100%; background: #0d0c0a; }
.map-loading, .map-noscript { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; color: var(--color-muted); }
.map-panel {
	position: absolute; z-index: 5; top: var(--space-4); left: var(--space-4); bottom: var(--space-4);
	width: min(380px, calc(100% - 2 * var(--space-4))); display: flex; flex-direction: column; gap: var(--space-3);
	padding: var(--space-4); border-radius: calc(var(--radius-lg) * 1.15);
	background: color-mix(in srgb, var(--color-bg) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	box-shadow: var(--shadow-lg); overflow: hidden;
}
.map-panel-head { display: flex; flex-direction: column; gap: var(--space-3); }
.map-panel .breadcrumb ol { margin: 0; }
.map-title { font-size: 28px; margin: 0; }
.map-intro { margin: 0; font-size: 14px; color: var(--color-muted); }
.map-search { position: relative; display: flex; gap: 6px; align-items: center; }
.map-search .input { padding-left: 42px; min-height: 46px; }
.map-search-icon { position: absolute; left: 16px; color: var(--color-muted); pointer-events: none; }
.map-search .btn { position: absolute; right: 5px; }
.map-message { margin: 0; font-size: 13px; color: var(--color-accent-200); }
.map-cities ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.map-cities .tag { text-decoration: none; color: var(--color-text); }
.map-cities .tag:hover { border-color: var(--color-accent-400); }
.map-count { margin: 0; font-size: 13px; color: var(--color-muted); }
.map-list { flex: 1; overflow-y: auto; margin: 0 calc(var(--space-4) * -1); padding: 0 var(--space-2); list-style: none; scrollbar-width: thin; }
.map-item { display: flex; gap: var(--space-3); align-items: center; padding: 8px; border-radius: var(--radius-md); color: var(--color-text); text-decoration: none; }
.map-item:hover, .map-item:focus-visible { background: color-mix(in srgb, var(--color-text) 8%, transparent); color: var(--color-text); }
.map-item img { width: 56px; height: 56px; flex: none; border-radius: 14px; object-fit: cover; background: var(--color-surface); }
.map-item-text { display: flex; flex-direction: column; min-width: 0; }
.map-item-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-item-meta { font-size: 13px; color: var(--color-muted); }
.map-list-toggle { display: none; }
.map-highlight { display: block; width: 22px; height: 22px; border-radius: 50%; background: var(--color-accent-300); box-shadow: var(--glow); border: 2px solid #fff; }

/* Popup et controles MapLibre au theme nuit (prefixe .map-canvas : maplibre-gl.css est charge apres) */
.map-canvas .maplibregl-popup-content { padding: 10px; border-radius: 18px; background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-lg); }
.map-canvas .maplibregl-popup-tip { border-top-color: var(--color-surface) !important; border-bottom-color: var(--color-surface) !important; }
.map-canvas .maplibregl-popup-close-button { color: var(--color-text); font-size: 18px; right: 6px; top: 4px; }
.map-popup { display: flex; flex-direction: column; gap: 4px; color: var(--color-text); text-decoration: none; }
.map-popup img { width: 220px; height: 146px; object-fit: cover; border-radius: 12px; margin-bottom: 4px; }
.map-popup-title { font-family: var(--font-heading); font-size: 19px; line-height: 1.1; }
.map-popup-meta { font-size: 12px; color: var(--color-muted); }
.map-popup-cta { font-size: 13px; font-weight: 600; color: var(--color-accent-300); }
.map-canvas .maplibregl-ctrl-group { background: var(--color-surface) !important; border-radius: 14px !important; }
.map-canvas .maplibregl-ctrl-group button + button { border-top-color: var(--color-divider) !important; }
.map-canvas .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1); }
.map-canvas .maplibregl-ctrl-attrib { background: color-mix(in srgb, black 55%, transparent) !important; color: var(--color-neutral-300) !important; }
.map-canvas .maplibregl-ctrl-attrib a { color: var(--color-neutral-200) !important; }

@media (max-width: 760px) {
	.map-layout { height: calc(100dvh - var(--header-h) - 64px); }
	/* panneau en tiroir bas : recherche toujours visible, liste depliable */
	.map-panel { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 45%; padding: var(--space-3); gap: var(--space-2); }
	.map-panel.is-open { max-height: 78%; }
	.map-intro, .map-cities, .map-panel .breadcrumb { display: none; }
	.map-panel.is-open .map-intro, .map-panel.is-open .map-cities { display: block; }
	.map-title { font-size: 22px; }
	.map-list-toggle { display: inline-flex; align-self: flex-start; }
	.map-list-toggle[aria-expanded="true"] .icon { transform: rotate(90deg); }
	.map-list { display: none; }
	.map-panel.is-open .map-list { display: block; }
}
/* Pages carte : le bandeau de langue flotte au-dessus de la carte au lieu de la decaler */
.page-map .lang-banner { position: fixed; z-index: 30; top: calc(var(--header-h) + 8px); right: var(--gutter); left: auto; max-width: 560px; margin: 0; }
@media (max-width: 760px) { .page-map .lang-banner { left: 8px; right: 8px; max-width: none; } }

/* ── Home ───────────────────────────────────────────────────────────────── */
.btn-lg { min-height: 48px; padding: 0 22px; font-size: 16px; }

.hero {
	position: relative; display: flex; align-items: flex-end; overflow: hidden;
	min-height: min(88vh, 880px); margin-top: calc(-1 * var(--header-h));
	background: radial-gradient(60% 50% at 70% 35%, color-mix(in srgb, var(--color-accent-2-500) 30%, transparent), transparent 70%),
		radial-gradient(50% 50% at 25% 70%, color-mix(in srgb, var(--color-accent-500) 40%, transparent), transparent 70%), var(--color-bg);
}
.hero-bg, .hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-bg img { object-fit: cover; }
.hero::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, color-mix(in srgb, var(--color-bg) 60%, transparent) 0%, transparent 28%, color-mix(in srgb, var(--color-bg) 35%, transparent) 55%, var(--color-bg) 100%),
		linear-gradient(90deg, color-mix(in srgb, var(--color-bg) 55%, transparent), transparent 65%);
}
.hero-inner {
	position: relative; z-index: 1; width: 100%; max-width: var(--content-max); margin: 0 auto;
	padding: calc(var(--header-h) + 80px) var(--gutter) 56px;
	display: flex; flex-direction: column; align-items: flex-start; gap: 22px;
}
.hero-title { margin: 0; font-size: clamp(42px, 7.4vw, 92px); line-height: .98; max-width: 12ch; text-wrap: balance; text-shadow: 0 2px 30px rgb(0 0 0 / .5); }
.hero-lead { margin: 0; max-width: 46ch; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.5; color: var(--color-neutral-200); text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-actions .btn-secondary { background: color-mix(in srgb, var(--color-bg) 45%, transparent); }
.hero-chip {
	margin-top: 28px; display: flex; align-items: center; gap: 14px; max-width: 100%;
	padding: 8px 18px 8px 8px; border-radius: var(--radius-pill); text-decoration: none; color: var(--color-text);
	background: color-mix(in srgb, var(--color-bg) 62%, transparent); border: 1px solid var(--color-divider);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.hero-chip:hover { color: var(--color-text); border-color: color-mix(in srgb, var(--color-accent-300) 50%, transparent); }
.hero-chip img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.hero-chip > span { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.hero-chip-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent-300); }
.hero-chip-title { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.home-section { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 72px var(--gutter) 24px; }
.home-head { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.home-head h2 { margin: 0; font-size: clamp(32px, 4vw, 48px); line-height: 1.05; }
.home-head p { margin: 0; }
.home-head-row { max-width: none; flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.home-head-row > div { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }

/* Fil : groupes par mois, cartes a gauche puis a droite, arret lumineux dans la marge */
.feed { position: relative; margin-top: 64px; }
.feed-trail { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 0; }
.feed-trail path { fill: none; stroke-linecap: round; }
.feed-trail-guide { stroke: var(--color-neutral-100); stroke-opacity: .1; stroke-width: 1.5; stroke-dasharray: 2 7; }
.feed-trail-glow { stroke: var(--color-accent-500); stroke-width: 14; filter: blur(9px); opacity: .75; }
.feed-trail-core { stroke: var(--color-accent-200); stroke-width: 2.5; }
.feed-tip {
	position: absolute; left: 0; top: 0; z-index: 2; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
	background: var(--color-accent-100); opacity: 0; pointer-events: none; transition: opacity .3s;
	box-shadow: 0 0 18px 8px var(--color-accent-400), 0 0 60px 22px color-mix(in srgb, var(--color-accent-500) 50%, transparent);
}
.feed-group { position: relative; display: flex; padding-bottom: 120px; }
.feed-group:nth-of-type(even) { flex-direction: row-reverse; }
.feed-cards { position: relative; z-index: 1; flex: none; display: flex; flex-direction: column; gap: 14px; max-width: calc(100% - 200px); }
.feed-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 200px)); gap: 16px; align-items: start; }
.feed-card { display: flex; flex-direction: column; gap: 3px; color: var(--color-text); text-decoration: none; }
/* colonne du milieu (3 colonnes) ou de droite (2 colonnes) decalee, comme les poses empilees */
.feed-cols-2 .feed-card:nth-child(even), .feed-cols-3 .feed-card:nth-child(3n+2) { margin-top: 48px; }
.feed-card:hover { color: var(--color-text); }
.feed-card picture { display: block; aspect-ratio: 4 / 5; margin-bottom: 7px; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-divider), var(--shadow-lg); }
.feed-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.feed-card:hover img { transform: scale(1.04); }
.feed-card-title { padding: 0 4px; font-family: var(--font-heading); font-size: 19px; line-height: 1.15; }
.feed-card-meta { padding: 0 4px; font-size: 13px; color: var(--color-neutral-300); }
.feed-card-pose { padding: 0 4px; font-size: 12px; font-weight: 600; color: var(--color-accent-300); }
.feed-stop { position: relative; flex: 1; min-width: 0; }
.feed-dot {
	position: absolute; top: 30%; left: clamp(28px, 35%, calc(100% - 200px)); z-index: 1;
	width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; transition: background .5s, box-shadow .5s;
	background: var(--color-accent-100); box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-accent-400) 35%, transparent), 0 0 26px 8px var(--color-accent-500);
}
.feed-group:nth-of-type(even) .feed-dot { left: auto; right: clamp(28px, 35%, calc(100% - 200px)); margin: -8px -8px 0 0; }
.feed-month { margin: 0; font-family: var(--font-heading); font-weight: 400; line-height: 1; color: var(--color-accent-200); transition: color .5s; }
.feed-month > span { display: block; margin-top: 4px; font-family: var(--font-body); font-size: 13px; color: var(--color-neutral-400); }
.feed-month-side { position: absolute; top: 30%; left: calc(clamp(28px, 35%, calc(100% - 200px)) + 24px); transform: translateY(-50%); font-size: 34px; white-space: nowrap; }
.feed-group:nth-of-type(even) .feed-month-side { left: auto; right: calc(clamp(28px, 35%, calc(100% - 200px)) + 24px); text-align: right; }
.feed-month-inline { display: none; }
.feed.is-animated .feed-group:not(.is-lit) .feed-dot { background: var(--color-neutral-700); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-neutral-100) 6%, transparent); }
.feed.is-animated .feed-group:not(.is-lit) .feed-month { color: var(--color-neutral-500); }
.feed-more { display: flex; justify-content: center; margin: 0; }

.minimap { position: relative; height: clamp(320px, 48vw, 520px); margin-top: 28px; border-radius: calc(var(--radius-lg) * 1.4); overflow: hidden; background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-divider); }
.minimap .maplibregl-map, .minimap .maplibregl-canvas-container { width: 100%; height: 100%; }
.minimap-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--color-muted); font-family: var(--font-heading); font-size: 18px; text-decoration: none;
	background: radial-gradient(40% 50% at 50% 50%, color-mix(in srgb, var(--color-accent-500) 18%, transparent), transparent 70%); }
.home-countries { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; padding-bottom: 56px; }
.home-countries h3 { margin: 0; font-family: var(--font-body); font-weight: 600; color: var(--color-neutral-400); }
.home-countries ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.home-countries .btn { font-family: var(--font-body); font-weight: 600; font-size: 15px; gap: 10px; }

@media (max-width: 760px) {
	.hero { min-height: min(84vh, 720px); }
	.hero-inner { padding-bottom: 40px; }
	.home-section { padding-top: 56px; }
	.feed { margin-top: 40px; }
	.feed-group, .feed-group:nth-of-type(even) { flex-direction: column; padding: 0 0 56px 40px; }
	.feed-cards { max-width: none; }
	.feed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.feed-cols-2 .feed-card:nth-child(even), .feed-cols-3 .feed-card:nth-child(3n+2) { margin-top: 0; }
	.feed-stop { position: absolute; left: 0; top: 0; width: 40px; height: 100%; }
	.feed-dot, .feed-group:nth-of-type(even) .feed-dot { top: 14px; left: 20px; right: auto; margin: -8px 0 0 -8px; }
	.feed-group:nth-of-type(even) .feed-dot { left: 10px; }
	.feed-month-side { display: none; }
	.feed-month-inline { display: flex; align-items: baseline; gap: 10px; font-size: 28px; }
	.feed-month-inline > span { margin: 0; }
}

/* ── Soumettre ──────────────────────────────────────────────────────────── */
.submit { max-width: 980px; }
.submit-head { max-width: 640px; }
.submit-search { display: flex; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.field-help { margin: 6px 0 0; font-size: 13px; color: var(--color-muted); }

.steps { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--space-6) 0; padding: 0; list-style: none; }
.steps li { display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-text) 6%, transparent); color: var(--color-muted); font-weight: 600; font-size: 15px; }
.steps-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--color-text) 10%, transparent); font-size: 14px; }
.steps-n .icon { display: none; }
.steps li.is-current { background: color-mix(in srgb, var(--color-accent) 22%, transparent); color: var(--color-text); }
.steps li.is-current .steps-n, .steps li.is-done .steps-n { background: var(--color-accent-400); color: var(--color-bg); }
.steps li.is-done { color: var(--color-text); }
.steps li.is-done .steps-n > span { display: none; }
.steps li.is-done .steps-n .icon { display: block; }

.submit-form { display: flex; flex-direction: column; gap: var(--space-8); }
.submit-step { margin: 0; padding: 0; border: 0; min-width: 0; }
.submit-legend { padding: 0; margin-bottom: var(--space-3); font-family: var(--font-heading); font-size: 28px; }
.submit.is-enhanced .submit-legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.submit-hint { font-size: 17px; }

.dropzone {
	position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
	padding: clamp(28px, 5vw, 48px); border-radius: calc(var(--radius-lg) * 1.4); cursor: pointer;
	border: 2px dashed color-mix(in srgb, var(--color-accent-400) 55%, transparent);
	background: radial-gradient(50% 80% at 15% 20%, color-mix(in srgb, var(--color-accent-500) 18%, transparent), transparent 70%), var(--color-surface);
	transition: border-color .2s, background-color .2s;
}
.dropzone:hover, .dropzone.is-over, .dropzone:focus-within { border-color: var(--color-accent-300); }
.submit.is-enhanced .dropzone-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone-icon { color: var(--color-accent-300); }
.dropzone-title { font-family: var(--font-heading); font-size: clamp(24px, 3vw, 30px); line-height: 1.1; }
.dropzone-text { max-width: 52ch; color: var(--color-neutral-300); }
.dropzone .btn { margin-top: 8px; pointer-events: none; }

.submit-preview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.submit-preview-img { width: 100%; max-height: 70vh; object-fit: contain; border-radius: var(--radius-lg); background: #050504; box-shadow: var(--shadow-lg); }
.submit-preview-info { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.exif-list { display: grid; grid-template-columns: auto 1fr; gap: 10px 24px; margin: 0; font-size: 15px; }
.exif-list dt { color: var(--color-muted); }
.exif-list dd { margin: 0; font-weight: 600; }

.submit-search { gap: 10px; margin-bottom: var(--space-3); }
.submit-search .btn { flex: none; }
.submit-search .input { flex: 1; }
.submit-results { display: flex; flex-direction: column; margin: 0 0 var(--space-3); padding: 6px; list-style: none; border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-md); }
.submit-result { width: 100%; padding: 10px 14px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.submit-result:hover, .submit-result:focus-visible { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
.submit-map { height: clamp(320px, 52vh, 520px); border-radius: calc(var(--radius-lg) * 1.4); overflow: hidden; background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-divider); }
.submit-map .maplibregl-map, .submit-map .maplibregl-canvas-container { width: 100%; height: 100%; }
.submit-coords { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-4); max-width: 520px; }
.submit.is-enhanced .submit-coords .input { background: transparent; color: var(--color-muted); }
.submit-step .form-stack { max-width: 560px; }

.submit-done { align-items: flex-start; gap: var(--space-3); margin-top: var(--space-6); padding: var(--space-8); }
.submit-done h2 { margin: var(--space-3) 0 0; }
.submit-history { margin-top: var(--space-12); }
.submit-history h2 { font-size: 24px; }
.submit-history ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.submit-history li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 16px; border-radius: var(--radius-md); background: var(--color-surface); }
.submit-history-title { flex: 1; min-width: 12ch; font-weight: 600; }

@media (max-width: 760px) {
	.submit-preview { grid-template-columns: 1fr; gap: var(--space-4); }
	.submit-coords { grid-template-columns: 1fr 1fr; }
}

/* ── Espace artiste : fiche, photos ─────────────────────────────────────── */
.space-title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.space-title-row h1 { margin: 0; }
.space-photos h2 { margin-top: var(--space-8); }
.space-stats { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0 0 var(--space-6); padding: 0; list-style: none; color: var(--color-muted); }
.space-stats strong { font-family: var(--font-heading); font-weight: 400; font-size: 28px; color: var(--color-text); }
.space-stats a { display: inline-flex; align-items: center; gap: 6px; }
.profile-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.profile-form legend { padding: 0; margin-bottom: 6px; font-family: var(--font-heading); font-size: 22px; }
.profile-map { height: 340px; margin-top: var(--space-2); }
.profile-links-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.input[aria-invalid="true"] { border-color: var(--color-accent-400); }
.space-list { display: flex; flex-direction: column; gap: 10px; margin: 0 0 var(--space-8); padding: 0; list-style: none; }
.space-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; align-items: center; gap: 8px 16px; padding: 10px 14px 10px 10px; border-radius: var(--radius-md); background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-divider); }
.space-item > form { margin: 0; }
.space-thumb { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; background: #050504; }
.space-thumb-empty { display: grid; place-items: center; color: var(--color-muted); }
.space-item-text { display: flex; flex-direction: column; min-width: 0; }
.space-item-title { font-weight: 600; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.space-edit { grid-column: 1 / -1; }
.space-edit:not([open]) { grid-column: auto; }
.space-edit summary { list-style: none; cursor: pointer; }
.space-edit summary::-webkit-details-marker { display: none; }
.space-edit[open] summary { margin-bottom: var(--space-3); }
.space-edit .form-stack { max-width: 560px; }
.space-delete { margin-top: var(--space-2); }
@media (max-width: 760px) {
	.profile-links-grid { grid-template-columns: 1fr; }
	.space-item { grid-template-columns: 56px minmax(0, 1fr) auto; }
	.space-thumb { width: 56px; height: 56px; }
	.space-item > .tag { grid-column: 2; justify-self: start; }
	.space-edit, .space-item > form { grid-column: 1 / -1; }
}

/* ── Application installable ────────────────────────────────────────────── */
.install {
	position: fixed; z-index: 60; left: 50%; bottom: 20px; transform: translateX(-50%);
	display: flex; align-items: center; gap: 14px; width: min(560px, calc(100% - 32px));
	padding: 12px 12px 12px 14px; border-radius: calc(var(--radius-lg) * .9);
	background: color-mix(in srgb, var(--color-surface) 92%, transparent); box-shadow: var(--shadow-lg);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.install img { width: 48px; height: 48px; border-radius: 12px; flex: none; }
.install-text { flex: 1; min-width: 0; }
.install-title { margin: 0; font-weight: 700; }
.install-help { margin: 2px 0 0; font-size: 13px; color: var(--color-muted); }
.install-actions { display: flex; align-items: center; gap: 4px; }
.offline .trail-dot { margin-bottom: var(--space-6); }
@media (max-width: 760px) {
	.install { bottom: calc(76px + env(safe-area-inset-bottom)); }
}