/*
Theme Name:   El Nacional Child
Theme URI:    https://elnacional.fr
Description:  Thème enfant Enfold pour la refonte 2026 d'El Nacional Bordeaux.
              Applique la plateforme de marque "Viandes & Vins" et optimise Core Web Vitals.
Author:       Refonte 2026
Author URI:   https://elnacional.fr
Template:     enfold
Version:      1.0.0
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  elnacional-child
*/

/* =====================================================================
   1. VARIABLES DE MARQUE
   ===================================================================== */
:root {
	--braise: #2C1810;
	--parrilla: #7E4C37;
	--or-pampeen: #C9A84C;
	--sauge-bistrot: #BCD8BD;
	--creme-estancia: #FEEACF;
	--ivoire: #FBF5E9;
	--ink: #1A1A1A;
	--muted: #6B6B6B;
	--line: #E6E0D4;

	--font-title: Georgia, 'Libre Caslon Text', 'Times New Roman', serif;
	--font-body: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, sans-serif;

	--radius: 4px;
	--radius-lg: 12px;
	--shadow-sm: 0 1px 3px rgba(44, 24, 16, 0.08);
	--shadow-md: 0 8px 24px rgba(44, 24, 16, 0.10);

	--content-width: 1180px;
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* =====================================================================
   2. RESET LÉGER + BASE
   ===================================================================== */
body,
.avia-container {
	background: var(--ivoire);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5,
.av-special-heading-tag,
#top .avia-headline-text {
	font-family: var(--font-title) !important;
	color: var(--braise);
	font-weight: 400;
	letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.1; }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.2; }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.3; }

a, a:visited {
	color: var(--parrilla);
	text-decoration: none;
	transition: color 0.2s var(--ease);
}
a:hover, a:focus {
	color: var(--braise);
	text-decoration: underline;
	text-decoration-color: var(--or-pampeen);
	text-underline-offset: 3px;
}

/* =====================================================================
   3. HEADER
   ===================================================================== */
#header,
#header_main {
	background: var(--ivoire) !important;
	border-bottom: 1px solid var(--line);
}
#header .logo a {
	font-family: var(--font-title);
	color: var(--braise);
	letter-spacing: 0.18em;
	font-size: 1.25rem;
	text-transform: uppercase;
}
#header .av-main-nav > li > a {
	font-family: var(--font-body);
	font-size: 14px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink) !important;
}
#header .av-main-nav > li > a:hover,
#header .av-main-nav > li.current-menu-item > a {
	color: var(--parrilla) !important;
	border-bottom: 2px solid var(--or-pampeen);
}

/* =====================================================================
   4. BOUTONS
   ===================================================================== */
.avia-button,
.avia-button.avia-color-theme-color,
.wpcf7 input[type="submit"],
button.btn-primary,
.btn-primary {
	background: var(--braise) !important;
	color: var(--ivoire) !important;
	border: 1px solid var(--braise) !important;
	border-radius: var(--radius) !important;
	padding: 14px 28px !important;
	font-family: var(--font-body) !important;
	font-size: 14px !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	font-weight: 500 !important;
	transition: all 0.25s var(--ease) !important;
}
.avia-button:hover,
.btn-primary:hover {
	background: var(--parrilla) !important;
	border-color: var(--parrilla) !important;
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}
.btn-ghost {
	background: transparent !important;
	color: var(--braise) !important;
	border: 1px solid var(--braise) !important;
}
.btn-ghost:hover {
	background: var(--braise) !important;
	color: var(--ivoire) !important;
}

/* =====================================================================
   5. HERO HOME
   ===================================================================== */
.hero-home {
	background: linear-gradient(135deg, var(--braise) 0%, #1a0f08 100%);
	color: var(--ivoire);
	padding: clamp(80px, 14vw, 160px) 24px;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.hero-home::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at center top, rgba(201, 168, 76, 0.15), transparent 60%);
	pointer-events: none;
}
.hero-home .eyebrow {
	font-size: 12px;
	letter-spacing: 0.3em;
	color: var(--or-pampeen);
	text-transform: uppercase;
	margin-bottom: 24px;
}
.hero-home h1 {
	color: var(--ivoire);
	font-size: clamp(2.4rem, 6vw, 4.5rem);
	line-height: 1.05;
	margin: 0 auto 24px;
	max-width: 16ch;
}
.hero-home h1 em {
	color: var(--or-pampeen);
	font-style: italic;
}
.hero-home .subtitle {
	font-size: clamp(1rem, 1.6vw, 1.2rem);
	color: rgba(251, 245, 233, 0.85);
	max-width: 60ch;
	margin: 0 auto 40px;
}
.hero-home .cta-row {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}

/* =====================================================================
   6. FIGURES BAR (30-45j / 300 vins / 10000+ / 23bis)
   ===================================================================== */
.figures-bar {
	background: var(--creme-estancia);
	padding: 48px 24px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	text-align: center;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.figures-bar .figure {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.figures-bar .figure .num {
	font-family: var(--font-title);
	font-size: clamp(1.6rem, 3vw, 2.6rem);
	color: var(--braise);
}
.figures-bar .figure .label {
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

/* =====================================================================
   7. 3 CARDS ADN (Viande / Cave / Bistrot)
   ===================================================================== */
.adn-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	padding: 96px 24px;
	max-width: var(--content-width);
	margin: 0 auto;
}
.adn-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 40px 32px;
	transition: all 0.3s var(--ease);
}
.adn-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
	border-color: var(--or-pampeen);
}
.adn-card .icon {
	width: 48px;
	height: 48px;
	margin-bottom: 24px;
	color: var(--parrilla);
}
.adn-card h3 {
	margin-bottom: 12px;
}
.adn-card p {
	color: var(--muted);
	font-size: 15px;
	margin-bottom: 24px;
}
.adn-card .link {
	color: var(--parrilla);
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 500;
}

/* =====================================================================
   8. QUOTE (Sud-Ouest)
   ===================================================================== */
.quote-block {
	background: var(--braise);
	color: var(--ivoire);
	padding: 96px 24px;
	text-align: center;
}
.quote-block blockquote {
	font-family: var(--font-title);
	font-size: clamp(1.4rem, 3vw, 2rem);
	font-style: italic;
	max-width: 30ch;
	margin: 0 auto 24px;
	line-height: 1.4;
}
.quote-block cite {
	color: var(--or-pampeen);
	font-style: normal;
	font-size: 13px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* =====================================================================
   9. EVENTS CARDS (Sauge)
   ===================================================================== */
.events-grid {
	background: var(--sauge-bistrot);
	padding: 96px 24px;
}
.events-grid .wrap {
	max-width: var(--content-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.event-card {
	background: var(--ivoire);
	padding: 32px;
	border-radius: var(--radius-lg);
}
.event-card .date {
	font-size: 12px;
	letter-spacing: 0.2em;
	color: var(--parrilla);
	text-transform: uppercase;
	margin-bottom: 12px;
}

/* =====================================================================
   10. FOOTER
   ===================================================================== */
#footer {
	background: var(--braise) !important;
	color: rgba(251, 245, 233, 0.8) !important;
	padding: 64px 24px 32px !important;
}
#footer h3, #footer h4 {
	color: var(--or-pampeen) !important;
	font-size: 14px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
#footer a {
	color: rgba(251, 245, 233, 0.9) !important;
}
#footer a:hover {
	color: var(--or-pampeen) !important;
}
#socket {
	background: #1a0f08 !important;
	color: rgba(251, 245, 233, 0.5) !important;
	border-top: 1px solid rgba(201, 168, 76, 0.15);
}

/* =====================================================================
   11. FORMULAIRES
   ===================================================================== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
textarea,
select {
	background: #fff !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius) !important;
	padding: 12px 14px !important;
	font-family: var(--font-body) !important;
	font-size: 15px !important;
	color: var(--ink) !important;
	transition: border-color 0.2s var(--ease);
}
input:focus, textarea:focus, select:focus {
	border-color: var(--parrilla) !important;
	outline: 2px solid rgba(126, 76, 55, 0.15);
	outline-offset: 2px;
}

/* =====================================================================
   12. TABLE DE CARTE (menu)
   ===================================================================== */
.menu-list {
	max-width: 780px;
	margin: 0 auto;
}
.menu-list .item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px dotted var(--line);
}
.menu-list .item .name {
	font-family: var(--font-title);
	font-size: 18px;
	color: var(--braise);
}
.menu-list .item .desc {
	display: block;
	font-size: 14px;
	color: var(--muted);
	margin-top: 4px;
}
.menu-list .item .price {
	font-family: var(--font-title);
	color: var(--parrilla);
	white-space: nowrap;
}

/* =====================================================================
   13. ACCESSIBILITÉ
   ===================================================================== */
:focus-visible {
	outline: 2px solid var(--or-pampeen);
	outline-offset: 3px;
}
.skip-link {
	position: absolute;
	top: -40px;
	left: 0;
	background: var(--braise);
	color: var(--ivoire);
	padding: 8px 16px;
	z-index: 9999;
}
.skip-link:focus {
	top: 0;
}

/* =====================================================================
   14. RESPONSIVE
   ===================================================================== */
@media (max-width: 900px) {
	.adn-grid,
	.events-grid .wrap {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.figures-bar {
		grid-template-columns: repeat(2, 1fr);
	}
	.hero-home {
		padding: 72px 20px;
	}
}

@media (max-width: 540px) {
	.figures-bar {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	body { font-size: 16px; }
}

/* =====================================================================
   15. PRINT (carte imprimée proprement)
   ===================================================================== */
@media print {
	#header, #footer, .cta-row, .adn-card .link {
		display: none !important;
	}
	body { background: #fff; color: #000; font-size: 12pt; }
	.menu-list .item { page-break-inside: avoid; }
}