/* ============================================================
   SELF-HOSTED FONTS
============================================================ */
@font-face {
	font-family: 'Doto';
	src: url('../fonts/Doto/Doto-Variable.ttf') format('truetype');
	font-weight: 100 900;
	font-display: swap;
}

@font-face {
	font-family: 'League Gothic';
	src: url('../fonts/League_Gothic/LeagueGothic-Regular-VariableFont_wdth.ttf') format('truetype');
	font-weight: 400;
	font-display: swap;
}

/* ============================================================
   RESET & TOKENS
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root{
	--bg:#0c0c0c;
	--fg: #ffffff;
	--fg-dim:rgba(240,236,228,.45);
	--accent:#c9a961;
	--radius:12px;

	--pad-x: clamp(24px, 8vw, 96px);

	/* ── Card dimensions - Portrait (défaut) ──────────────────
	   clamp(MIN, VALEUR_FLUIDE, MAX)
	   · MIN  = taille plancher — jamais en dessous
	   · VALEUR_FLUIDE = s'adapte au viewport (vw = % largeur écran, vh = % hauteur)
	   · MAX  = taille plafond — jamais au dessus
	   ──────────────────────────────────────────────────────── */
	--card-w: clamp(420px, 42vw, 600px);   /* largeur carte portrait  : 420px → 42% écran → 600px */
	--card-h: clamp(480px, 80vh, 920px);   /* hauteur carte portrait  : 480px → 80% hauteur → 920px */

	/* ── Card dimensions - Landscape (triptyks / format paysage) ──
	   Utilisé automatiquement quand orientation = "landscape" dans le JSON
	   ──────────────────────────────────────────────────────────── */
	--card-w-landscape: clamp(520px, 62vw, 1100px);  /* largeur carte landscape : 520px → 62% écran → 1100px */
	--card-h-landscape: clamp(320px, 50vh, 740px);   /* hauteur carte landscape : 320px → 50% hauteur → 740px */

	--gap:    clamp(80px, 14vw, 260px);  /* espacement entre les cartes : 80px → 14% écran → 260px */

	/* Z-INDEX MAP */
	--z-bg:0;
	--z-bg-overlay:1;
	--z-gallery:2;
	--z-ui:20;
	--z-detail:50;
	--z-menu-wrap:80;
	--z-menu-btn:85;
	--z-menu-overlay:90;
	--z-detail-close:95;
}

/* ── Mobile (≤ 640px) ──────────────────────────────────────
   Sur mobile les clamp() ci-dessus sont écrasés par ces valeurs fixes.
   · --card-w  : largeur de la carte en % de l'écran (ex. 78vw = 78% de la largeur)
   · --card-h  : hauteur de la carte en % de la hauteur écran (ex. 62vh)
   · --pad-x   : marges latérales de la page
   · --gap     : espacement entre les cartes
   ─────────────────────────────────────────────────────────── */
@media (max-width: 640px){
	:root{
		--card-w: 78vw;   /* largeur carte mobile */
		--card-h: 62vh;   /* hauteur carte mobile */
		--pad-x:  20px;
		--gap:    26px;
	}
}

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