/* ==========================================================================
   SCANVAX — Design system global (Noir + Or Luxe)
   Ces variables pilotent header, footer, formulaire et pages projet.
   Pour la page d'accueil Elementor, synchronise avec les Couleurs Globales
   Elementor (voir README).
   ========================================================================== */

:root {
	--scanvax-black: #0a0a0a;
	--scanvax-charcoal: #141414;
	--scanvax-charcoal-2: #1c1c1c;
	--scanvax-gold: #C9A961; /* écrasé dynamiquement via Réglages > Scanvax */
	--scanvax-gold-light: #E4C888;
	--scanvax-white: #F7F3EC; /* blanc chaud */
	--scanvax-muted: #8A8580;
	--scanvax-border: rgba(201, 169, 97, 0.25);
	--scanvax-radius: 18px;
	--scanvax-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
	--scanvax-font-display: 'Playfair Display', Georgia, serif;
	--scanvax-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.scanvax-btn {
	display: inline-block;
	font-family: var(--scanvax-font-body);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.8rem;
	padding: 16px 32px;
	border-radius: 999px;
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
	cursor: pointer;
	border: 1px solid transparent;
}
.scanvax-btn:hover { transform: translateY(-2px); }

.scanvax-btn-gold {
	background: linear-gradient(135deg, var(--scanvax-gold-light), var(--scanvax-gold));
	color: var(--scanvax-black);
	box-shadow: 0 10px 30px rgba(201, 169, 97, 0.25);
}
.scanvax-btn-gold:hover { box-shadow: 0 14px 40px rgba(201, 169, 97, 0.4); }

.scanvax-btn-outline {
	background: transparent;
	color: var(--scanvax-gold);
	border: 1px solid var(--scanvax-border);
}
.scanvax-btn-outline:hover { border-color: var(--scanvax-gold); }

/* ---------- Formulaire "Créer mon QR Menu" ---------- */
.scanvax-form-wrapper {
	max-width: 480px;
	margin: 0 auto;
	background: var(--scanvax-charcoal);
	border: 1px solid var(--scanvax-border);
	border-radius: var(--scanvax-radius);
	padding: 40px;
	box-shadow: var(--scanvax-shadow);
}
.scanvax-field { margin-bottom: 20px; }
.scanvax-field label {
	display: block;
	color: var(--scanvax-muted);
	font-family: var(--scanvax-font-body);
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-bottom: 8px;
}
.scanvax-field input {
	width: 100%;
	background: var(--scanvax-black);
	border: 1px solid var(--scanvax-border);
	border-radius: 10px;
	padding: 14px 16px;
	color: var(--scanvax-white);
	font-family: var(--scanvax-font-body);
	font-size: 1rem;
	box-sizing: border-box;
}
.scanvax-field input:focus {
	outline: none;
	border-color: var(--scanvax-gold);
}
.scanvax-form .scanvax-btn { width: 100%; text-align: center; margin-top: 8px; }
.scanvax-form-success {
	text-align: center;
	color: var(--scanvax-gold-light);
	font-family: var(--scanvax-font-body);
	padding: 20px 0;
}

/* ---------- Grille "Exemples" ---------- */
.scanvax-examples-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 28px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}
.scanvax-example-card {
	background: var(--scanvax-charcoal);
	border: 1px solid var(--scanvax-border);
	border-radius: var(--scanvax-radius);
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.scanvax-example-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--scanvax-shadow);
}
.scanvax-example-image img { width: 100%; display: block; aspect-ratio: 4/3; object-fit: cover; }
.scanvax-example-body { padding: 24px; }
.scanvax-example-type {
	color: var(--scanvax-gold);
	font-family: var(--scanvax-font-body);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.scanvax-example-body h3 {
	font-family: var(--scanvax-font-display);
	color: var(--scanvax-white);
	margin: 8px 0;
	font-size: 1.4rem;
}
.scanvax-example-body p {
	color: var(--scanvax-muted);
	font-family: var(--scanvax-font-body);
	margin-bottom: 20px;
}