/*
Détails visuels du prototype non exprimables via theme.json seul :
header sticky avec flou, dégradés décoratifs, micro-interactions hover,
mise en page des lignes de fiche commerce et de la carte des boutiques.
Chargé en plus de theme.json (voir functions.php).
*/

/* ===== TOKENS DESIGN SYSTEM =====
   Repris de cdb-child/assets/css/design-system.css pour que carte.css
   (identique à cdb-child) résolve ses var(--…) sous cdb-fse. */
:root {
  --Gold: #c8a45a;
  --gold-soft: #b8924a;
  --gold-bright: #d9b876;
  --bg-darkest: #0a0a0a;
  --bg-dark: #111111;
  --bg-card: #161616;
  --bg-elev: #1d1d1d;
  --text-ivory: #f5f0e6;
  --text-muted: #9a9388;
  --text-dim: #6b6660;
  --border-line: #2a2a2a;
  --border-strong: #3a3a3a;
  --blood: #6b1f1a;
  --copper: #b87333;
  --geo: #3aa0ff;
  --cat-restaurant: #c0392b;
  --cat-boucherie: var(--copper);
  --cat-boutique: #d4730f;
  --serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --display: 'Oswald', 'Helvetica Neue', sans-serif;
  --sans: 'Inter', system-ui, sans-serif;
}

/* ===== CORMORANT GARAMOND ===== */
/* Le Cormorant a une hauteur d'x très basse et paraît petit à taille égale.
   On l'agrandit optiquement partout où la police serif est employée, sans
   modifier les tailles déclarées (font-size-adjust n'agit que sur le rendu). */
.has-serif-font-family {
	font-size-adjust: 0.52;
}

/* ===== HEADER STICKY ===== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(10, 10, 10, 0.95) !important;
	backdrop-filter: blur(10px);
}

.site-header__logo img {
	/* Le logo « fondfoncé » est déjà en ivoire (#f5f0e6) : pas d'inversion,
	   sinon il vire au quasi-noir et disparaît sur le header sombre. */
	filter: none;
}

.site-header__right {
	gap: 20px;
}

/* ===== HOME HERO ===== */
/* Photo de bœuf en fond (reprise du prototype .hero::before), assombrie pour
   garder la lisibilité du titre. */
.home-hero {
	background-image: url('https://cotedeboeuf.org/wp-content/uploads/2026/06/cotedeboeuf_org_cover.jpg');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* Voile dégradé semi-transparent par-dessus la photo (reprise de .hero::after)
   — remplace l'ancien dégradé opaque qui masquait toute image de fond. */
.home-hero .wp-block-cover__background {
	background-image:
		radial-gradient(ellipse at 30% 40%, rgba(10, 10, 10, 0.35) 0%, rgba(10, 10, 10, 0.6) 60%, rgba(10, 10, 10, 0.94) 100%),
		linear-gradient(180deg, rgba(10, 10, 10, 0.45) 0%, rgba(10, 10, 10, 0.85) 100%);
}

.home-hero__title {
	line-height: 1.05;
}

.home-hero .wp-block-buttons {
	margin-top: 34px;
}

.home-cta .wp-block-button__link {
	background: var(--wp--preset--color--gold);
	color: #0a0a0a;
	border-color: var(--wp--preset--color--gold);
}

/* ===== MANIFESTE / CITATION ===== */
.home-manifeste {
	background:
		radial-gradient(ellipse at 50% 50%, rgba(160, 100, 40, 0.10), transparent 70%),
		var(--wp--preset--color--darkest-bg);
	border-top: 1px solid rgba(200, 164, 90, 0.15);
	border-bottom: 1px solid rgba(200, 164, 90, 0.15);
}

.home-manifeste__quote {
	font-style: italic;
	font-size: clamp(26px, 3.4vw, 46px);
	line-height: 1.3;
	max-width: 22ch;
	margin: 0 auto 22px;
}

.home-manifeste__cite {
	margin: 0;
}

/* ===== TUILES « EXPLORER » (liens vers les pages) ===== */
.home-tiles {
	gap: 18px;
}

.home-tile {
	position: relative;
	border: 1px solid rgba(200, 164, 90, 0.18);
	border-radius: 4px;
	overflow: hidden;
	transition: transform 0.35s, border-color 0.35s, box-shadow 0.35s;
}

.home-tile .wp-block-cover__image-background {
	transition: transform 0.6s ease;
}

.home-tile:hover {
	transform: translateY(-4px);
	border-color: rgba(200, 164, 90, 0.55);
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
}

.home-tile:hover .wp-block-cover__image-background {
	transform: scale(1.06);
}

.home-tile__eyebrow {
	margin: 0 0 4px;
	opacity: 0.9;
}

.home-tile__title {
	margin: 0;
}

.home-tile__title a {
	color: var(--wp--preset--color--text-white);
	text-decoration: none;
}

.home-tile:hover .home-tile__title a {
	color: var(--wp--preset--color--gold);
}

/* rend toute la tuile cliquable */
.home-tile__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* ===== PAGE HEADER (pages intérieures / fiches) ===== */
.page-header {
	background:
		radial-gradient(ellipse at 50% 80%, rgba(160, 100, 40, 0.12), transparent 70%),
		var(--wp--preset--color--darkest-bg);
	border-bottom: 1px solid rgba(200, 164, 90, 0.15);
}

/* ===== CARD GRID ===== */
.card {
	border: 1px solid rgba(200, 164, 90, 0.15);
	border-radius: 4px;
	overflow: hidden;
	transition: all 0.3s;
}

.card:hover {
	border-color: rgba(200, 164, 90, 0.3);
	transform: translateY(-3px);
}

.card .card-img,
.card .wp-block-post-featured-image {
	margin: 0;
	background:
		radial-gradient(ellipse at center, rgba(140, 90, 35, 0.15), transparent 70%),
		linear-gradient(135deg, #221a10 0%, #1a1408 100%);
}

.card .card-img img,
.card .wp-block-post-featured-image img {
	height: 180px;
	object-fit: cover;
}

.card-body {
	padding: 25px;
}

/* Titre de carte (loop) : réduit de 30% par rapport au preset "large". */
.card .card-body .wp-block-post-title {
	font-size: calc(var(--wp--preset--font-size--large) * 0.7) !important;
}

/* Ligne meta ACF sur les cartes (spécificités par catégorie) — factorisée
   pour toutes les listes : ville, terroir, difficulté, lieu… */
.card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: 4px 0 10px;
}

.card-meta__item {
	margin: 0;
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

/* Masque un item meta vide (champ ACF non renseigné). */
.card-meta__item:empty {
	display: none;
}

.card-meta__item::before {
	content: attr(data-icon);
	opacity: 0.7;
}

.card-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-size: 12px;
}

.card:hover .card-link {
	color: var(--wp--preset--color--gold-light) !important;
}

/* ===== FICHE / DÉTAIL COMMERCE ===== */
.fiche-grid {
	gap: 40px;
}

.fiche-row {
	padding: 12px 0;
	border-bottom: 1px solid rgba(200, 164, 90, 0.15);
	gap: 20px;
}

.fiche-row__label {
	width: 160px;
	flex-shrink: 0;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0;
}

.fiche-row__value {
	margin: 0;
	text-align: left;
	flex: 1;
}

/* Masque les lignes dont la valeur ACF est vide (ex. responsable non renseigné,
   avis absent sur les boutiques) — la source cdb/acf renvoie '' → <p> vide. */
.fiche-row:has(.fiche-row__value:empty) {
	display: none;
}

.fiche-avis:has(.fiche-avis__text:empty) {
	display: none;
}

/* ===== PAGE CUISSONS : notions, tableau comparatif, filtre ===== */
.cuisson-notions {
	border-top: 1px solid rgba(200, 164, 90, 0.15);
	border-bottom: 1px solid rgba(200, 164, 90, 0.15);
}

.cuisson-notions__label {
	margin: 0 0 14px;
}

.cuisson-notions__links {
	gap: 10px 14px;
}

.cuisson-notion {
	margin: 0;
}

.cuisson-notion a {
	display: inline-block;
	padding: 6px 16px;
	border: 1px solid rgba(200, 164, 90, 0.3);
	border-radius: 999px;
	font-style: italic;
	color: var(--wp--preset--color--text-light);
	text-decoration: none;
	transition: all 0.25s;
}

.cuisson-notion a:hover {
	background: var(--wp--preset--color--gold);
	color: #0a0a0a;
	border-color: var(--wp--preset--color--gold);
}

.cuisson-table {
	overflow-x: auto;
	border: 1px solid rgba(200, 164, 90, 0.15);
	border-radius: 4px;
}

.cuisson-table__head,
.cuisson-table__row {
	display: grid;
	grid-template-columns: minmax(130px, 1.3fr) minmax(150px, 1.9fr) minmax(100px, 1.1fr) minmax(90px, 0.9fr);
	gap: 16px;
	align-items: center;
	min-width: 680px;
	padding: 14px 22px;
}

.cuisson-table__head {
	background: rgba(200, 164, 90, 0.08);
	font-family: var(--wp--preset--font-family--oswald);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 12px;
	color: var(--wp--preset--color--gold);
}

.cuisson-table__body .cuisson-table__row {
	border-top: 1px solid rgba(200, 164, 90, 0.12);
}

.cuisson-table__body .cuisson-table__row:nth-child(even) {
	background: rgba(255, 255, 255, 0.02);
}

.cuisson-table__tech,
.cuisson-table__cell {
	margin: 0;
}

/* Taille de police homogène sur les 4 colonnes (la technique est un titre :
   on neutralise sa taille pour l'aligner sur les autres cellules). */
.cuisson-table .cuisson-table__tech,
.cuisson-table .cuisson-table__tech a,
.cuisson-table .cuisson-table__cell {
	font-size: 15px;
	line-height: 1.4;
}

.cuisson-table__tech a {
	text-decoration: none;
}

.cz-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 30px;
}

.cz-btn {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--wp--preset--color--text-muted);
	background: var(--wp--preset--color--card-bg);
	border: 1px solid rgba(200, 164, 90, 0.2);
	padding: 9px 20px;
	border-radius: 2px;
	cursor: pointer;
	transition: all 0.25s;
}

.cz-btn:hover {
	color: var(--wp--preset--color--text-light);
	border-color: rgba(200, 164, 90, 0.5);
}

.cz-btn.is-active {
	color: #0a0a0a;
	background: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
}

/* Drapeaux ACF int/ext cachés (lus par cuissons-filter.js) */
.cz-flags {
	display: none !important;
}

/* ===== CARTE DES BOUTIQUES ===== */
.map-wrapper #map {
	width: 100%;
	height: 500px;
	border-radius: 4px;
	border: 1px solid rgba(200, 164, 90, 0.15);
	background: var(--wp--preset--color--card-bg);
}

.filter-btn {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--wp--preset--color--text-muted);
	background: var(--wp--preset--color--card-bg);
	border: 1px solid rgba(200, 164, 90, 0.15);
	padding: 10px 20px;
	border-radius: 2px;
	transition: all 0.3s;
}

.filter-btn:hover,
.filter-btn.active {
	color: var(--wp--preset--color--darkest-bg);
	background: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
	.site-header__nav,
	.site-header__socials {
		display: none;
	}

	.fiche-grid {
		grid-template-columns: 1fr !important;
	}

	.fiche-row__value {
		text-align: left;
	}
}