/* ============================================================
   DOMAINE DES 3 CELLIER — CSS GLOBAL
   Palette : crème #F5EFE6, bordeaux #8B1A2F, vert olive #5C6B3A
   Typo : Cormorant Garamond (serif, texte courant) + Playfair Display
          (grands titres h1, plus lisible que l'ancien italique fin)
          + Lato (sans)
   ============================================================ */

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

:root {
  --cream:       #F5EFE6;
  --cream-dark:  #EDE0CE;
  --cream-mid:   #E8D9C5;
  --bordeaux:    #8B1A2F;
  --bordeaux-dk: #6B1324;
  --olive:       #5C6B3A;
  --olive-lt:    #7A8C50;
  --gold:        #C4A86B;
  --text:        #2C2416;
  --text-light:  #6B5D4F;
  --white:       #FFFFFF;
  --font-serif:  'Cormorant Garamond', Georgia, serif;
  /* Police dédiée au h1 "Domaine des 3 Cellier" des heros. Pinyon Script
     est l'alternative gratuite (Google Fonts) la plus proche de
     "Englische Schreibschrift BQ" (police calligraphique payante utilisée
     sur le logo/les documents du domaine) : mêmes courbes et flourishes
     "English Roundhand" classiques, sans le coût de licence webfont.
     Le fallback "cursive" (et non plus "serif") reflète ce changement de
     famille si jamais la police Google ne charge pas. */
  --font-display: 'Pinyon Script', 'Brush Script MT', cursive;
  --font-sans:   'Lato', Arial, sans-serif;
  --radius:      4px;
  --shadow:      0 4px 24px rgba(44, 36, 22, .12);
  --shadow-lg:   0 8px 48px rgba(44, 36, 22, .18);
  --transition:  .28s ease;
  --max-w:       1200px;
  --header-h:    72px;
}

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }

/* ── UTILITAIRES ───────────────────────────────────────────── */
.container    { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.container-sm { max-width: 800px; margin: 0 auto; padding: 0 24px; }
.text-center  { text-align: center; }
.section-sep  { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; }
.section-sep::before,
.section-sep::after { content: ''; flex: 1; height: 1px; background: var(--cream-mid); }

/* Sur un fond .section--alt (--cream-dark), le trait --cream-mid était
   quasiment invisible (deux tons de crème trop proches). On le remplace
   ici par --cream (plus clair) uniquement dans ce contexte, pour qu'il
   se détache correctement du fond. */
.section--alt .section-sep::before,
.section--alt .section-sep::after {
  background: var(--cream);
}

/* ── TYPOGRAPHIE ───────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 400; line-height: 1.25; color: var(--text); }

.section-title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 400;
  text-align: center;
  color: var(--text);
  margin-bottom: 12px;
}

.section-subtitle {
  font-family: var(--font-sans);
  font-size: .95rem;
  color: var(--text-light);
  text-align: center;
  max-width: 670px;
  margin: 0 auto 48px;
  line-height: 1.75;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bordeaux);
  display: block;
  margin-bottom: 10px;
}

/* ── BOUTONS ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.btn:hover { transform: translateY(-1px); }

.btn-primary   { background: var(--bordeaux); color: var(--white); border-color: var(--bordeaux); }
.btn-primary:hover { background: var(--bordeaux-dk); border-color: var(--bordeaux-dk); }

.btn-outline   { background: transparent; color: var(--white); border-color: var(--white); }
.btn-outline:hover { background: var(--white); color: var(--bordeaux); }

.btn-outline-dark { background: transparent; color: var(--bordeaux); border-color: var(--bordeaux); }
.btn-outline-dark:hover { background: var(--bordeaux); color: var(--white); }

.btn-olive     { background: var(--olive); color: var(--white); border-color: var(--olive); }
.btn-olive:hover { background: var(--olive-lt); border-color: var(--olive-lt); }

.btn-sm { padding: 9px 18px; font-size: .78rem; }

/* ── HEADER ────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--header-h);
  background: rgba(245, 239, 230, .96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--cream-mid);
  transition: box-shadow var(--transition);
}
.site-header.scrolled { box-shadow: 0 2px 20px rgba(44,36,22,.12); }

.header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 40px;
}

.header-logo { display: flex; align-items: center; margin-right: auto; }
.logo-text {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--bordeaux);
  line-height: 1;
}
.logo-sub { font-size: 1rem; font-weight: 300; opacity: .85; }

.header-nav { display: flex; align-items: center; gap: 4px; }
.nav-link {
  font-family: var(--font-sans);
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text);
  padding: 8px 12px;
  border-radius: var(--radius);
  transition: color var(--transition), background var(--transition);
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 12px; right: 12px;
  height: 1px;
  background: var(--bordeaux);
  transform: scaleX(0);
  transition: transform var(--transition);
}
.nav-link:hover,
.nav-link.active { color: var(--bordeaux); }
.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(1); }

.header-lang { display: flex; align-items: center; gap: 6px; }
.lang-btn {
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--text-light);
  padding: 4px 8px;
  border-radius: 2px;
  transition: color var(--transition), background var(--transition);
}
.lang-btn.active { color: var(--bordeaux); background: var(--cream-mid); }
.lang-btn:hover  { color: var(--bordeaux); }
.lang-sep { color: var(--cream-mid); font-size: .7rem; }

.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.burger span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: all var(--transition); }

/* ── HERO ──────────────────────────────────────────────────── */
/* Hauteur UNIFIÉE : avant, .hero / .hero--medium / .hero--small avaient
   des hauteurs très différentes (100vh / 60vh / 45vh), ce qui tronquait
   mal certaines photos selon la page. On garde les 3 classes dans le
   HTML (pas besoin de toucher aux vues) mais elles pointent maintenant
   toutes vers la même hauteur -> un seul réglage à changer à l'avenir. */
.hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: 0;
}
.hero--medium { min-height: 90vh; }
.hero--small  { min-height: 90vh; }

.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  transition: transform 8s ease;
}
.hero:hover .hero-bg { transform: scale(1); }

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(44,36,22,.55) 0%, rgba(44,36,22,.3) 60%, rgba(44,36,22,.65) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: calc(var(--header-h) + 40px) 24px 60px;
  max-width: 760px;
}
.hero-content h1 {
  font-family: var(--font-display);
  /* Pinyon Script est une police "script" (calligraphie liée) : ses
     glyphes paraissent visuellement plus petits qu'une serif classique à
     taille égale, on agrandit donc nettement la fourchette (avant :
     2.4rem–4.6rem) pour qu'elle garde de la présence dans le hero. */
  font-size: clamp(2.6rem, 6vw, 4.8rem);
  font-weight: 400;       /* Pinyon Script n'existe qu'en un seul poids (Regular) sur Google Fonts */
  font-style: normal;
  color: var(--white);
  /* Line-height généreux : les flourishes (grandes boucles montantes et
     descendantes propres à l'écriture anglaise) ont besoin de place pour
     ne pas être visuellement "coupés" par la ligne du dessus/dessous. */
  line-height: 1.4;
  /* Deux ombres superposées : une large et diffuse pour le contraste
     général sur la photo, une seconde plus resserrée pour bien détacher
     les traits fins de la police (sinon ils se noient sur les zones
     claires de certaines photos de fond). */
  text-shadow: 0 2px 24px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.55);
  margin-bottom: 4px;
}
.hero-subtitle {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 2vw, 1.2rem);   /* légèrement agrandi (était .9–1.15rem) */
  color: rgba(255,255,255,.92);           /* un peu plus opaque -> meilleur contraste */
  margin-bottom: 8px;
  font-weight: 400;                       /* était 300 : trop fin pour rester lisible en petit corps */
  letter-spacing: .03em;
}
.hero-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;                       /* ajouté : l'italique fin sans poids défini était difficile à lire */
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  color: rgba(255,255,255,.9);
  margin: 20px auto 36px;
  max-width: 600px;
  line-height: 1.6;
}
.hero-quote::before { content: '\201C'; }
.hero-quote::after  { content: '\201D'; }

.hero-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.hero-tag {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  background: rgba(245,239,230,.18);
  border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(6px);
  color: var(--white);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 8px 20px;
  border-radius: 40px;
  white-space: nowrap;
}

/* ── SECTIONS GÉNÉRIQUE ────────────────────────────────────── */
.section { padding: 80px 0; }
.section--alt { background: var(--cream-dark); }
.section--dark { background: var(--text); color: var(--white); }
.section--dark h2, .section--dark h3 { color: var(--white); }
.section--dark .section-subtitle { color: rgba(255,255,255,.7); }

/* ── GRID CARDS ────────────────────────────────────────────── */
.card-grid { display: grid; gap: 28px; }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.card-img { aspect-ratio: 4/3; overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card-img img { transform: scale(1.04); }
.card-body { padding: 24px; }
.card-body h3 { font-family: var(--font-serif); font-size: 1.35rem; margin-bottom: 10px; }
.card-body p  { font-size: .9rem; color: var(--text-light); line-height: 1.65; }

/* ── WINES ─────────────────────────────────────────────────── */

/* Liste des vins */
.wines-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 12px; }
.filter-btn {
  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 8px 20px;
  border-radius: 40px;
  border: 2px solid var(--cream-mid);
  background: transparent;
  color: var(--text-light);
  cursor: pointer;
  transition: all var(--transition);
}
.filter-btn:hover  { border-color: var(--bordeaux); color: var(--bordeaux); }
.filter-btn.active { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--white); }
.filter-btn--appellation { border-radius: 4px; }

.wines-group { margin-bottom: 56px; }
.wines-group-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--bordeaux);
  margin-bottom: 28px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cream-mid);
}

.wine-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
}
.wine-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

.wine-card-badge {
  position: absolute;
  top: 12px; right: 12px;
  background: var(--olive);
  color: var(--white);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 3px;
  z-index: 2;
}

.wine-card-image {
  background: var(--cream);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 32px 40px 0;
  min-height: 260px;
}
.wine-card-image img { max-height: 220px; width: auto; object-fit: contain; filter: drop-shadow(0 8px 20px rgba(44,36,22,.15)); }

.wine-card-body { padding: 20px 20px 24px; flex: 1; display: flex; flex-direction: column; }
.wine-card-name { font-family: var(--font-serif); font-size: 1.35rem; font-style: italic; margin-bottom: 4px; }
.wine-card-tagline { font-size: .82rem; color: var(--text-light); margin-bottom: 16px; font-style: italic; }
.wine-card-actions { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.wine-pdf-link { font-size: .75rem; color: var(--text-light); text-align: center; padding: 4px 0; text-decoration: underline; text-decoration-color: var(--cream-mid); transition: color var(--transition); }
.wine-pdf-link:hover { color: var(--bordeaux); }

/* Fiche vin */
.wine-hero { padding-top: var(--header-h); background: var(--text); }
.wine-hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  /* Correction : le header est fixed et la règle ".wine-hero { margin-top:
     calc(-1 * var(--header-h)) }" (section MAIN CONTENT OFFSET, plus bas
     dans ce fichier) annule le padding-top habituel de #main-content pour
     laisser les grandes photos plein écran (.hero) passer sous le header
     semi-transparent. Mais ça décalait aussi le contenu de la fiche vin,
     dont le haut de la bouteille se retrouvait caché sous la barre de
     navigation. On redonne donc ici un padding-top qui tient compte de
     la hauteur du header, exactement comme .hero-content plus haut. */
  padding: calc(var(--header-h) + 40px) 24px 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.wine-hero-appellation { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.wine-hero h1 { font-size: clamp(2rem, 4vw, 3.2rem); font-style: italic; color: var(--white); margin-bottom: 8px; }
.wine-hero-tagline { font-size: 1.1rem; font-style: italic; color: rgba(255,255,255,.7); }

.wine-vintages-nav { display: flex; gap: 10px; flex-wrap: wrap; margin: 28px 0; }
.wine-vintage-btn {
  padding: 8px 16px;
  border: 1px solid rgba(255,255,255,.3);
  color: rgba(255,255,255,.7);
  border-radius: var(--radius);
  font-size: .82rem;
  font-weight: 700;
  transition: all var(--transition);
}
.wine-vintage-btn:hover,
.wine-vintage-btn.active { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--white); }

.wine-bottle-wrap { text-align: center; }
.wine-bottle-wrap img { max-height: 380px; width: auto; margin: 0 auto; filter: drop-shadow(0 12px 32px rgba(0,0,0,.4)); }

.wine-aromas {
  background: var(--olive);
  color: var(--white);
  text-align: center;
  padding: 18px 24px;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: var(--radius);
  margin-bottom: 28px;
}

.wine-tasting-table { width: 100%; }
.wine-tasting-table tr { border-bottom: 1px solid var(--cream-mid); }
.wine-tasting-table td { padding: 14px 0; font-size: .9rem; line-height: 1.6; }
.wine-tasting-table td:first-child { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .78rem; width: 100px; color: var(--bordeaux); }

.wine-section-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 24px 28px;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}
.wine-section-card h3 { font-family: var(--font-serif); font-size: 1.25rem; margin-bottom: 12px; color: var(--bordeaux); }

.wine-badge-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.wine-badge {
  background: var(--cream);
  color: var(--olive);
  border: 1px solid var(--cream-mid);
  padding: 5px 12px;
  border-radius: var(--radius);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.wine-awards-list { display: flex; flex-wrap: wrap; gap: 12px; }
.wine-award {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--cream);
  padding: 8px 14px;
  border-radius: var(--radius);
  font-size: .82rem;
}
.wine-award-medal { font-size: .9rem; }

.wine-tech-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wine-tech-item { display: flex; gap: 10px; align-items: baseline; font-size: .9rem; }
.wine-tech-label { font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-light); flex-shrink: 0; width: 110px; }

.wine-cta-col { display: flex; flex-direction: column; gap: 12px; }

/* ── HOME SECTIONS ─────────────────────────────────────────── */
.heritage-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.heritage-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.heritage-photos img { border-radius: var(--radius); width: 100%; height: 160px; object-fit: cover; }
/* Légende (prénom + nom) sous chaque photo de famille.
   Le reset global « * { margin:0 } » supprime déjà la marge par défaut du <figure>. */
.heritage-photos figcaption { margin-top: 6px; text-align: center; font-family: var(--font-serif); font-size: .85rem; font-style: italic;}
.heritage-text h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: 20px; }
.heritage-text p  { font-size: .95rem; color: var(--text-light); line-height: 1.8; margin-bottom: 28px; }

.terroir-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  min-height: 380px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.terroir-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.terroir-banner-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(44,36,22,.7) 0%, transparent 60%); }
.terroir-banner-cta { position: relative; z-index: 2; padding: 40px 24px; }

.experience-section {
  position: relative;
  overflow: hidden;
  min-height: 480px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.experience-img { overflow: hidden; }
.experience-img img { width: 100%; height: 100%; object-fit: cover; }
.experience-content {
  background: var(--text);
  color: var(--white);
  padding: 60px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.experience-content h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--white); margin-bottom: 20px; }
.experience-content p  { color: rgba(255,255,255,.75); font-size: .95rem; line-height: 1.75; margin-bottom: 32px; }
.experience-btns { display: flex; gap: 14px; flex-wrap: wrap; }

.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.news-card { border-radius: var(--radius); overflow: hidden; cursor: pointer; }
.news-card img { width: 100%; height: 200px; object-fit: cover; transition: transform .4s ease; }
.news-card:hover img { transform: scale(1.04); }
.news-card-cap { padding: 16px 0; font-size: .88rem; color: var(--text-light); font-style: italic; }
/* Carte sans lien (actualité "à venir" sans destination) : le curseur
   pointer serait trompeur, on le retire via cette classe posée par la vue
   quand la news n'a pas de lien renseigné en admin. */
.news-card--nolink { cursor: default; }

.contact-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.contact-mini-info h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); margin-bottom: 20px; }
.contact-mini-info address { font-style: normal; font-size: .92rem; color: var(--text-light); line-height: 2; margin-bottom: 24px; }
.contact-mini-info address strong { color: var(--text); }
.contact-mini-img { border-radius: var(--radius); overflow: hidden; }
.contact-mini-img img { width: 100%; height: 280px; object-fit: cover; }

/* ── DOMAINE ───────────────────────────────────────────────── */
.domaine-intro { max-width: 760px; margin: 0 auto; }
.domaine-intro p { font-size: 1rem; color: var(--text-light); line-height: 1.85; margin-bottom: 1.2em; }

.quote-banner {
  position: relative;
  /* Hauteur fixée en dur ici (au lieu d'un style inline par page) pour ne
     plus jamais tronquer les photos d'ambiance : 650px = milieu de la
     fourchette 600–700px demandée. Les anciens style="min-height:..."
     posés directement dans les vues Œnotourisme / Instant Gourmand ont
     été retirés (voir ces fichiers) pour que ce réglage central s'applique
     partout, y compris sur la page Domaine qui n'avait pas de valeur. */
  min-height: 650px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}
.quote-banner-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.quote-banner-overlay { position: absolute; inset: 0; background: rgba(44,36,22,.62); }
.quote-banner-content { position: relative; z-index: 2; padding: 48px 24px; max-width: 640px; }
.quote-text { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.2rem, 2.5vw, 1.75rem); color: var(--white); line-height: 1.55; margin-bottom: 14px; }
.quote-text::before { content: '\201C'; }
.quote-text::after  { content: '\201D'; }
.quote-author { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.65); }

.terroirs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.terroir-card { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.terroir-card-img { height: 180px; overflow: hidden; }
.terroir-card-img img { width: 100%; height: 100%; object-fit: cover; }
.terroir-card-body { padding: 20px; }
.terroir-card-body h3 { font-family: var(--font-serif); font-size: 1.2rem; margin-bottom: 10px; }
.terroir-card-body p  { font-size: .85rem; color: var(--text-light); line-height: 1.7; }

.domaine-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.domaine-two-col .text-block h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); margin-bottom: 20px; }
.domaine-two-col .text-block p  { font-size: .95rem; color: var(--text-light); line-height: 1.8; margin-bottom: 1.2em; }
.domaine-bio-logo { background: var(--cream-dark); border-radius: var(--radius); padding: 40px; display: flex; align-items: center; justify-content: center; }
.domaine-bio-logo img { max-width: 160px; }

/* ── OENOTOURISME ──────────────────────────────────────────── */
.formules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.formule-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: var(--shadow);
  border-top: 4px solid var(--bordeaux);
  display: flex;
  flex-direction: column;
}
.formule-card h3 { font-family: var(--font-serif); font-size: 1.3rem; margin-bottom: 12px; }
.formule-card p  { font-size: .88rem; color: var(--text-light); line-height: 1.7; flex: 1; }
.formule-price { font-family: var(--font-serif); font-size: 1.8rem !important; color: var(--bordeaux); margin: 16px 0 4px; }
.formule-price span { font-size: .88rem; font-family: var(--font-sans); color: var(--text-light); font-weight: 400; }
.formule-meta { font-size: .78rem; color: var(--text-light); margin-bottom: 20px; }

.saisonnieres-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.saisonniere-card {
  /* La section parente "#experiences" utilise .section--alt (fond
     --cream-dark) : la carte avait exactement le même fond et disparaissait
     visuellement. Passage à --white pour qu'elle ressorte, comme les
     autres cartes du site (.formule-card, .terroir-card...). */
  background: var(--white);
  border-radius: var(--radius);
  padding: 28px;
  border: 1px solid var(--cream-mid);
  box-shadow: var(--shadow);
}
.saisonniere-card h3 { font-family: var(--font-serif); font-size: 1.25rem; margin-bottom: 10px; }
.saisonniere-card p  { font-size: .88rem; color: var(--text-light); line-height: 1.65; margin-bottom: 6px; }

.libre-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.libre-item { padding: 28px; }
.libre-item h3 { font-size: 1rem; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.libre-icon { font-size: 1.4rem; }

.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--cream-mid); }
.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 18px 0;
  font-family: var(--font-sans);
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-question::after { content: '+'; font-size: 1.3rem; color: var(--bordeaux); transition: transform var(--transition); flex-shrink: 0; }
.faq-item.open .faq-question::after { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .35s ease; }
.faq-answer-inner { padding-bottom: 18px; font-size: .88rem; color: var(--text-light); line-height: 1.75; }
.faq-answer-inner ul { margin-top: 8px; padding-left: 16px; list-style: disc; }
.faq-answer-inner ul li { margin-bottom: 4px; }
.faq-item.open .faq-answer { max-height: 600px; }

.pratique-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.pratique-info h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 16px; }
.pratique-info ul { display: flex; flex-direction: column; gap: 10px; }
.pratique-info li { display: flex; align-items: flex-start; gap: 10px; font-size: .88rem; color: var(--text-light); }
.pratique-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; }

/* ── INSTANT GOURMAND ──────────────────────────────────────── */
.ig-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.ig-feature-icon { margin-bottom: 12px; display: flex; align-items: center; justify-content: center; }
/* Les icônes étaient posées en <span class="ig-features-xxx"> sans image
   associée (classes jamais définies) -> rien ne s'affichait. Remplacées
   par de vraies <img> dans events/index.php ; on dimensionne ici l'image. */
.ig-feature-icon img { width: 42px; height: 42px; object-fit: contain; }
.ig-feature-label { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-light); display: block; margin-bottom: 4px; }
.ig-feature-val { font-family: var(--font-serif); font-size: 1rem; }

.ig-event-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 32px 40px;
  box-shadow: var(--shadow-lg);
  max-width: 680px;
  margin: 0 auto;
}
.ig-event-date { font-family: var(--font-serif); font-size: 1.6rem; color: var(--bordeaux); margin-bottom: 6px; }
.ig-event-price { font-size: .88rem; color: var(--text-light); margin-bottom: 24px; }
.ig-menu { margin: 28px auto; max-width: 460px; }
.ig-menu h4 { font-family: var(--font-serif); font-style: italic; font-size: 1rem; text-align: center; color: var(--text-light); margin-bottom: 22px; font-weight: 400; }
.ig-menu-item { text-align: center; padding: 18px 0; }
.ig-menu-item:not(:last-child) { border-bottom: 1px solid var(--cream-mid); }
.ig-menu-item .course { display: block; font-family: var(--font-serif); font-size: .95rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--bordeaux); margin-bottom: 8px; }
.ig-menu-item .dish { display: block; font-size: 1rem; font-style: italic; color: var(--text); line-height: 1.5; }
/* Séparateur « ou » entre deux plats au choix d'une même étape du menu */
.ig-menu-item .ig-menu-or { display: block; margin: 6px 0; font-family: var(--font-serif); font-size: .8rem; font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--text-light); }

.ig-urgency {
  background: var(--olive);
  color: var(--white);
  border-radius: var(--radius);
  padding: 14px 24px;
  text-align: center;
  font-size: .88rem;
  margin: 20px 0;
}
.ig-urgency strong { font-size: 1rem; }

.ig-next-card {
  background: var(--cream-dark);
  border-radius: var(--radius);
  padding: 28px;
  border: 1px solid var(--cream-mid);
}

/* ── EXPÉRIENCES PROVENCE ──────────────────────────────────── */
.events-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 48px;
}
.events-featured-img img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.events-featured-content { padding: 40px; }
.events-featured-label { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--olive); margin-bottom: 8px; }
.events-featured-date { font-family: var(--font-serif); font-size: 1.7rem; color: var(--bordeaux); font-weight: 600; margin-bottom: 4px; }
.events-featured-time { font-size: .85rem; color: var(--text-light); margin-bottom: 20px; }
.events-featured-desc { font-size: .92rem; color: var(--text-light); line-height: 1.75; margin-bottom: 24px; }
.events-featured-price { background: var(--olive); color: var(--white); display: inline-block; padding: 8px 18px; border-radius: var(--radius); font-size: .88rem; font-weight: 700; margin-bottom: 24px; }

.events-ponctuel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.event-card { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.event-card-img { height: 180px; overflow: hidden; position: relative; }
.event-card-img img { width: 100%; height: 100%; object-fit: cover; }
.event-card-badge { position: absolute; top: 10px; left: 10px; background: var(--olive); color: var(--white); font-size: .65rem; font-weight: 700; letter-spacing: .08em; padding: 3px 8px; border-radius: 3px; }
.event-card-body { padding: 20px; }
.event-card-body h3 { font-family: var(--font-serif); font-size: 1.15rem; margin-bottom: 6px; }
.event-card-date { font-size: .78rem; color: var(--text-light); margin-bottom: 10px; font-style: italic; }
.event-card-body p  { font-size: .85rem; color: var(--text-light); line-height: 1.65; margin-bottom: 14px; }

.newsletter-band {
  background: var(--text);
  color: var(--white);
  border-radius: var(--radius);
  padding: 40px 48px;
  display: flex;
  align-items: center;
  gap: 40px;
  margin-top: 48px;
}
.newsletter-band h3 { font-family: var(--font-serif); font-size: 1.4rem; color: var(--white); flex: 1; }
.newsletter-band p  { font-size: .88rem; color: rgba(255,255,255,.7); margin-top: 6px; }

/* ── CONTACT ───────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.contact-info-block h2 { font-size: clamp(1.4rem, 2.5vw, 2rem); margin-bottom: 28px; }
.contact-row { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.contact-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 2px; color: var(--bordeaux); }
.contact-row p  { font-size: .9rem; color: var(--text-light); line-height: 1.7; margin: 0; }
.contact-row strong { color: var(--text); }
.contact-map { border-radius: var(--radius); overflow: hidden; height: 280px; background: var(--cream-mid); }
.contact-map iframe { width: 100%; height: 100%; border: none; }

.visite-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.visite-features { display: flex; flex-direction: column; gap: 16px; }
.visite-feature { display: flex; align-items: flex-start; gap: 14px; }
.visite-feature-icon { font-size: 1.5rem; flex-shrink: 0; }
.visite-feature p { font-size: .9rem; color: var(--text-light); margin: 0; }
.visite-quote-box { background: var(--olive); color: var(--white); border-radius: var(--radius); padding: 28px 32px; font-family: var(--font-serif); font-style: italic; font-size: 1.1rem; line-height: 1.6; }

/* ── LÉGAL ─────────────────────────────────────────────────── */
.legal-content { max-width: 760px; margin: 0 auto; }
.legal-section { margin-bottom: 40px; }
.legal-section h2 { font-family: var(--font-serif); font-size: 1.4rem; color: var(--bordeaux); margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--cream-mid); }
.legal-section h3 { font-size: 1rem; font-weight: 700; margin-bottom: 10px; margin-top: 20px; }
.legal-section p,
.legal-section li { font-size: .9rem; color: var(--text-light); line-height: 1.8; margin-bottom: .6em; }
.legal-section ul { padding-left: 16px; list-style: disc; }
.legal-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 32px; }

/* ── FOOTER ────────────────────────────────────────────────── */
.site-footer {
  background: var(--text);
  color: rgba(255,255,255,.75);
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 60px 24px 40px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 48px;
}
.footer-name { font-family: var(--font-serif); font-size: 1.3rem; color: var(--white); margin-bottom: 12px; }
.footer-col p { font-size: .85rem; line-height: 1.8; }
.footer-col a { color: rgba(255,255,255,.7); font-size: .85rem; transition: color var(--transition); }
.footer-col a:hover { color: var(--gold); }
.footer-logos { display: flex; gap: 12px; margin-top: 16px; align-items: center; }
.footer-logos img { width: 40px; height: 40px; object-fit: contain; }

/* Logo "Vigneron Indépendant" : silhouette rouge sur fond transparent ->
   l'inversion en blanc semi-transparent fonctionne bien sur le footer sombre. */
.footer-logo-vif { filter: brightness(0) invert(1) opacity(.6); }

/* Logo "Agriculture Biologique" (UE) : feuille verte + étoiles blanches.
   L'ancien filtre commun (brightness(0) invert(1)) transformait TOUTE
   l'image en un seul aplat blanc semi-transparent : sur ce logo, les
   étoiles (déjà blanches) disparaissaient dans le fond (devenu blanc lui
   aussi), d'où le rectangle gris uni signalé. On garde donc ses couleurs
   d'origine, sans filtre, juste une légère opacité pour l'harmoniser avec
   le reste du footer. */
.footer-logo-bio { filter: none; opacity: .9; }

.footer-heading { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.footer-col--nav nav { display: flex; flex-direction: column; gap: 6px; }
.footer-cta-link { color: var(--gold) !important; font-weight: 700; margin-top: 10px; }

.social-links { display: flex; gap: 12px; margin-top: 4px; }
.social-link {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.7);
  transition: all var(--transition);
}
.social-link:hover { border-color: var(--gold); color: var(--gold); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 24px 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.footer-bottom > p { font-family: var(--font-serif); font-style: italic; font-size: .95rem; color: var(--gold); }
.footer-legal { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.footer-legal a { font-size: .75rem; color: rgba(255,255,255,.5); transition: color var(--transition); }
.footer-legal a:hover { color: var(--white); }
.footer-legal span { color: rgba(255,255,255,.2); font-size: .6rem; }
.footer-copyright { font-size: .72rem; color: rgba(255,255,255,.35); }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .heritage-section { gap: 40px; }
  .experience-section { grid-template-columns: 1fr; }
  .experience-img { min-height: 300px; }
  .ig-features { grid-template-columns: repeat(2, 1fr); }
  .formules-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  :root { --header-h: 60px; }

  .header-nav, .header-lang { display: none; }
  .burger { display: flex; }
  
  .header-nav.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--header-h); left: 0; right: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--cream-mid);
    padding: 20px 24px;
    gap: 4px;
    z-index: 999;
  }
  .header-nav.open + .header-lang {
    display: flex;
    position: fixed;
    top: calc(var(--header-h) + 12px);
    right: 24px;
    z-index: 1000;
  }

  .section { padding: 56px 0; }

  .card-grid--2,
  .card-grid--3,
  .card-grid--4 { grid-template-columns: 1fr; }

  .heritage-section,
  .domaine-two-col,
  .contact-grid,
  .visite-grid,
  .contact-mini,
  .events-featured,
  .libre-grid,
  .pratique-grid,
  .wine-hero-inner { grid-template-columns: 1fr; }

  .formules-grid,
  .saisonnieres-grid,
  .terroirs-grid,
  .events-ponctuel-grid,
  .legal-two-col { grid-template-columns: 1fr; }

  .wine-tech-grid { grid-template-columns: 1fr; }

  .footer-inner { grid-template-columns: 1fr; gap: 32px; }

  .newsletter-band { flex-direction: column; padding: 28px; }

  .ig-features { grid-template-columns: 1fr 1fr; }

  .news-grid { grid-template-columns: 1fr 1fr; }

  .hero-btns { flex-direction: column; align-items: center; }
}

@media (max-width: 480px) {
  .news-grid { grid-template-columns: 1fr; }
  .ig-features { grid-template-columns: 1fr; }
  .hero-tag { display: none; }
  .wine-card-image { min-height: 200px; padding: 24px 32px 0; }
}

/* ── BURGER ANIMATION ─────────────────────────────────────── */
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── SCROLL-TO-TOP ────────────────────────────────────────── */
.scroll-top {
  position: fixed;
  bottom: 28px; right: 28px;
  width: 44px; height: 44px;
  background: var(--bordeaux);
  color: var(--white);
  border: none;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--transition), transform var(--transition);
  z-index: 500;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(139,26,47,.35);
}
.scroll-top.visible { opacity: 1; transform: translateY(0); }
.scroll-top:hover { background: var(--bordeaux-dk); }

/* ── MAIN CONTENT OFFSET ──────────────────────────────────── */
#main-content { padding-top: var(--header-h); }
.hero, .wine-hero { margin-top: calc(-1 * var(--header-h)); padding-top: 0; }

/* ── WINE HERO DARK BG ────────────────────────────────────── */
.wine-hero { background: var(--text); }

/* ── COOKIE BANNER ────────────────────────────────────────── */
.cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9000;
  background: var(--text);
  border-top: 2px solid var(--bordeaux);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: cookieSlideUp .35s ease;
}
.cookie-banner--hiding {
  animation: cookieSlideDown .35s ease forwards;
}
@keyframes cookieSlideUp   { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes cookieSlideDown { from { transform: translateY(0); } to { transform: translateY(100%); } }

.cookie-banner-inner {
  max-width: var(--max-w);
  width: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.cookie-banner-text { flex: 1; min-width: 200px; }
.cookie-banner-title {
  font-family: var(--font-sans);
  font-size: .88rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 4px;
}
.cookie-banner-desc {
  font-size: .78rem;
  color: rgba(255,255,255,.65);
  line-height: 1.55;
  margin: 0;
}
.cookie-link {
  color: var(--gold);
  text-decoration: underline;
  margin-left: 4px;
}
.cookie-link:hover { color: var(--white); }

.cookie-banner-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.cookie-close {
  background: none;
  border: none;
  color: rgba(255,255,255,.4);
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 8px;
  transition: color var(--transition);
  flex-shrink: 0;
}
.cookie-close:hover { color: var(--white); }

@media (max-width: 600px) {
  .cookie-banner-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .cookie-banner-actions { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   PATCH v4 — Classes manquantes + Admin + Nettoyage inline
   ═══════════════════════════════════════════════════════════ */

/* ── Logo image header ──────────────────────────────────── */
.logo-img {
  height: 48px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  display: block;
}

/* ── Wine sheet layout ──────────────────────────────────── */
.wine-sheet-container { max-width: 900px; }

.wine-sheet-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 40px;
  align-items: start;
}

.wine-hero-text { display: flex; flex-direction: column; gap: 8px; }

.wine-vintage-label {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2px;
  margin-top: 16px;
}

/* Reviews presse */
.wine-reviews-list { display: flex; flex-direction: column; gap: 14px; }

.wine-review-item {
  background: var(--cream);
  border-radius: var(--radius);
  padding: 12px 16px;
}

.wine-review-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.wine-review-score {
  color: var(--bordeaux);
  font-size: 1.05rem;
  font-family: var(--font-serif);
}

.wine-review-author { font-weight: 700; font-size: .88rem; }
.wine-review-pub    { font-size: .78rem; color: var(--text-light); }
.wine-review-note   { font-style: italic; font-size: .82rem; color: var(--text-light); margin: 0; }

/* Awards extras */
.wine-award-competition { font-weight: 700; font-size: .82rem; }
.wine-award-type        { color: var(--bordeaux); font-size: .82rem; }
.wine-award-year        { font-size: .75rem; color: var(--text-light); margin-left: auto; }

/* ── Background positions hero par page ─────────────────── */
/* Corriger les images coupées selon le point focal */
.hero-home     .hero-bg { background-position: center 30%; }
.hero-domaine  .hero-bg { background-position: center 40%; }
.hero-vins     .hero-bg { background-position: center 60%; }
.hero-oeno     .hero-bg { background-position: center 20%; }
.hero-contact  .hero-bg { background-position: center 35%; }
.hero-expe     .hero-bg { background-position: center 50%; }
.hero-ig       .hero-bg { background-position: center 40%; }
.hero-mentions .hero-bg { background-position: center 25%; }
.hero-privacy  .hero-bg { background-position: center 30%; }

/* ────────────────────────────────────────────────────────────
   ADMIN — Layout complet
   ──────────────────────────────────────────────────────────── */

.admin-body {
  font-family: var(--font-sans);
  background: #F0F2F5;
  color: var(--text);
  min-height: 100vh;
  margin: 0;
}

/* Sidebar */
.admin-sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 240px;
  background: var(--text);
  color: rgba(255,255,255,.85);
  display: flex;
  flex-direction: column;
  z-index: 200;
  overflow-y: auto;
}

.admin-sidebar-logo {
  padding: 24px 20px 20px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.admin-sidebar-logo img {
  height: 36px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: .9;
}

.admin-sidebar-section {
  padding: 20px 0 8px;
}

.admin-sidebar-label {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  padding: 0 20px;
  margin-bottom: 6px;
  display: block;
}

.admin-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  font-size: .85rem;
  color: rgba(255,255,255,.7);
  transition: background var(--transition), color var(--transition);
  border-left: 3px solid transparent;
}

.admin-nav-link:hover,
.admin-nav-link.active {
  background: rgba(255,255,255,.07);
  color: var(--white);
  border-left-color: var(--bordeaux);
}

.admin-nav-link .admin-nav-icon { font-size: 1rem; flex-shrink: 0; width: 18px; text-align: center; }

.admin-sidebar-footer {
  margin-top: auto;
  padding: 16px 20px;
  border-top: 1px solid rgba(255,255,255,.1);
}

/* Topbar */
.admin-topbar {
  position: fixed;
  top: 0;
  left: 240px;
  right: 0;
  height: 60px;
  background: var(--white);
  border-bottom: 1px solid #E5E7EB;
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 16px;
  z-index: 100;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.admin-topbar-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  flex: 1;
}

.admin-topbar-actions { display: flex; align-items: center; gap: 10px; }

/* Breadcrumb */
.admin-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  color: var(--text-light);
  margin-bottom: 20px;
}

.admin-breadcrumb a { color: var(--bordeaux); }
.admin-breadcrumb a:hover { text-decoration: underline; }
.admin-breadcrumb-sep { color: var(--cream-mid); }

/* Main content */
.admin-main {
  margin-left: 240px;
  padding-top: 60px;
  min-height: 100vh;
}

.admin-content {
  padding: 32px 28px;
  max-width: 1100px;
}

/* Cards admin */
.admin-card {
  background: var(--white);
  border-radius: 8px;
  border: 1px solid #E5E7EB;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  overflow: hidden;
  margin-bottom: 24px;
}

.admin-card-header {
  padding: 16px 20px;
  border-bottom: 1px solid #F0F2F5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-card-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.admin-card-body { padding: 20px; }

/* Stats dashboard */
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 28px;
}

.admin-stat {
  background: var(--white);
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #E5E7EB;
  text-align: center;
}

.admin-stat-number {
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--bordeaux);
  line-height: 1;
  margin-bottom: 6px;
}

.admin-stat-label {
  font-size: .78rem;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Table admin */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}

.admin-table thead tr {
  border-bottom: 2px solid #E5E7EB;
}

.admin-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-light);
}

.admin-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #F0F2F5;
  vertical-align: middle;
}

.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: #FAFAFA; }

.admin-table .wine-thumb {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 4px;
}

/* Badges */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 40px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.badge-red   { background: #FEE2E2; color: #991B1B; }
.badge-white { background: #FFFBEB; color: #92400E; }
.badge-rose  { background: #FCE7F3; color: #9D174D; }
.badge-active   { background: #D1FAE5; color: #065F46; }
.badge-inactive { background: #F3F4F6; color: #6B7280; }
.badge-cdp   { background: #EDE0CE; color: var(--bordeaux); }

/* Forms admin */
.admin-form-group { margin-bottom: 20px; }

.admin-label {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: .02em;
}

.admin-label small {
  font-weight: 400;
  color: var(--text-light);
  font-size: .75rem;
  display: block;
  margin-top: 2px;
}

.admin-input,
.admin-select,
.admin-textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: .88rem;
  color: var(--text);
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
  box-sizing: border-box;
}

.admin-input:focus,
.admin-select:focus,
.admin-textarea:focus {
  outline: none;
  border-color: var(--bordeaux);
  box-shadow: 0 0 0 3px rgba(139,26,47,.1);
}

.admin-textarea { resize: vertical; min-height: 100px; }

.admin-error {
  color: #DC2626;
  font-size: .75rem;
  margin-top: 4px;
  display: block;
}

.admin-section-title {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--bordeaux);
  margin: 28px 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cream-mid);
}

.admin-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.admin-three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

/* Boutons admin */
.btn-admin-primary {
  background: var(--bordeaux);
  color: var(--white);
  border: none;
  padding: 10px 22px;
  border-radius: 6px;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition);
}
.btn-admin-primary:hover { background: var(--bordeaux-dk); }

.btn-admin-secondary {
  background: var(--white);
  color: var(--text);
  border: 1px solid #D1D5DB;
  padding: 9px 20px;
  border-radius: 6px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background var(--transition), border-color var(--transition);
}
.btn-admin-secondary:hover { background: #F9FAFB; border-color: #9CA3AF; }

.btn-admin-danger {
  background: #FEE2E2;
  color: #DC2626;
  border: 1px solid #FECACA;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition);
}
.btn-admin-danger:hover { background: #FECACA; }

/* Alerts admin */
.admin-alert {
  padding: 12px 16px;
  border-radius: 6px;
  font-size: .88rem;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-alert-success { background: #D1FAE5; color: #065F46; border: 1px solid #A7F3D0; }
.admin-alert-error   { background: #FEE2E2; color: #991B1B; border: 1px solid #FECACA; }
.admin-alert-info    { background: #DBEAFE; color: #1E40AF; border: 1px solid #BFDBFE; }

/* ── Indice "aperçu public" sous un champ : explique ce que ce champ
   affiche réellement côté site, pour que la personne qui remplit sache
   à quoi s'attendre sans avoir à aller vérifier sur le site. ─────────── */
.admin-preview-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #DBEAFE;
  border: 1px solid #BFDBFE;
  color: #1E40AF;
  font-style: italic;
  font-size: .78rem;
  line-height: 1.45;
  padding: 8px 12px;
  border-radius: 6px;
  margin-top: 8px;
}
.admin-preview-hint .icon { font-style: normal; flex-shrink: 0; line-height: 1.3; }
.admin-preview-hint strong { font-style: normal; }

/* Variante pour un avertissement plutôt qu'une simple info (ex : effet
   en cascade, action irréversible) — même style, teinte ambre. */
.admin-preview-hint.warn {
  background: #FEF3C7;
  border-color: #FDE68A;
  color: #92400E;
}

/* Sous-titre d'un groupe de champs à l'intérieur d'une section, plus
   discret qu'un .admin-section-title (qui, lui, sépare de grandes parties
   du formulaire). */
.admin-subsection-title {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-light);
  margin: 22px 0 10px;
  padding-top: 14px;
  border-top: 1px dashed #E5E7EB;
}
.admin-subsection-title:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* Image preview */
.admin-image-preview {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
}
.admin-image-preview img {
  height: 80px;
  width: auto;
  border-radius: 6px;
  border: 1px solid #E5E7EB;
  object-fit: contain;
  background: var(--cream);
  padding: 4px;
}

/* Responsive admin */
@media (max-width: 900px) {
  .admin-sidebar { transform: translateX(-100%); transition: transform .28s ease; }
  .admin-sidebar.open { transform: translateX(0); }
  .admin-main, .admin-topbar { margin-left: 0; left: 0; }
  .admin-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-two-col, .admin-three-col { grid-template-columns: 1fr; }
}

/* Responsive wine sheet */
@media (max-width: 768px) {
  .wine-sheet-grid { grid-template-columns: 1fr; }
}

/* ── ADMIN ALERTS ─────────────────────────────────────────── */
.admin-alert {
  padding: 12px 16px;
  border-radius: 6px;
  font-size: .88rem;
  font-weight: 600;
  margin-bottom: 20px;
  border: 1px solid transparent;
}
.admin-alert--success { background: #D1FAE5; color: #065F46; border-color: #A7F3D0; }
.admin-alert--error   { background: #FEE2E2; color: #991B1B; border-color: #FECACA; }

/* ── LOGO HEADER ──────────────────────────────────────────── */
.header-logo img {
  height: 44px;
  width: auto;
  display: block;
}
.logo-header-img {
  height: 44px;
  width: auto;
}

/* ── HERO background-position par page ────────────────────── */
.hero-home        .hero-bg { background-position: center 60%; }
.hero-domaine     .hero-bg { background-position: center 30%; }
.hero-vins        .hero-bg { background-position: center 70%; }
.hero-oenotourisme .hero-bg { background-position: center 40%; }
.hero-experiences .hero-bg { background-position: center 50%; }
.hero-contact     .hero-bg { background-position: center 35%; }

/* ── WINE LIST — bug syntaxe PHP correction visuelle ─────── */
.wines-filters { justify-content: flex-start; }

/* ── Admin vintages index ─────────────────────────────────── */
.admin-vintages-actions { display: flex; gap: 8px; }

/* ── NOTIFY FORM (être informé) ───────────────────────────── */
.notify-form-container { max-width: 640px; margin: 0 auto; }

.notify-form-wrap {
  background: var(--white);
  border-radius: var(--radius);
  padding: 36px 40px;
  box-shadow: var(--shadow);
}

.notify-form-intro {
  font-size: .9rem;
  color: var(--text-light);
  margin-bottom: 24px;
  line-height: 1.7;
}

/*
   ── CHAMP "PIÈGE" ANTI-ROBOT (honeypot) ──────────────────────────
   Utilisé par le formulaire newsletter (components/notify-form.php)
   pour repérer les robots qui remplissent automatiquement TOUS les
   champs d'un formulaire, y compris ceux qu'un visiteur humain ne
   voit jamais. Le champ reste dans le HTML (donc "visible" pour un
   robot qui lit le code source) mais disparaît visuellement :

   - position:absolute + left/top:-9999px : sort le champ de l'écran,
     plus fiable que "display:none" ou "visibility:hidden", que
     certains robots plus malins évitent justement de remplir car
     ils savent que ces deux propriétés servent souvent à ce piège.
   - aria-hidden + tabindex="-1" sur le champ (voir le HTML) : un
     visiteur qui navigue au clavier ou avec un lecteur d'écran ne
     tombe jamais dessus par accident.

   Si ce champ arrive rempli côté serveur (NewsletterController),
   c'est qu'un robot l'a rempli à l'aveugle : l'inscription est alors
   silencieusement ignorée (voir le commentaire dans le contrôleur).
*/
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.notify-form-fields {
  display: grid;
  /* 2 champs par ligne (Prénom+Nom, puis Email+Téléphone) au lieu de
     "1fr 1fr auto" qui tassait 4 champs + le bouton sur une seule ligne
     illisible. Le bouton passe sur sa propre ligne juste en dessous
     (voir règle .notify-submit ci-dessous). */
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
}

.notify-form-field { display: flex; flex-direction: column; gap: 6px; }

.notify-label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-light);
}

.notify-input {
  padding: 11px 14px;
  border: 1px solid var(--cream-mid);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: .9rem;
  color: var(--text);
  background: var(--cream);
  transition: border-color var(--transition);
  width: 100%;
}
.notify-input:focus { outline: none; border-color: var(--bordeaux); }

/* Le CTA occupe toute la largeur du formulaire, seul sur sa ligne, sous
   les 4 champs (2x2) — demandé explicitement dans les corrections. */
.notify-submit {
  grid-column: 1 / -1;
  white-space: nowrap;
  justify-content: center;
  margin-top: 4px;
}

/* Cases « activités qui vous intéressent » : occupent toute la largeur,
   entre les 4 champs et le bouton. */
.notify-interests { grid-column: 1 / -1; border: 0; padding: 0; margin: 4px 0 0; min-width: 0; }
.notify-interests legend { padding: 0; margin-bottom: 8px; }
.notify-check { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: .92rem; cursor: pointer; }
.notify-check input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--bordeaux); }

.notify-legal {
  font-size: .75rem;
  color: var(--text-light);
  margin-top: 12px;
  line-height: 1.6;
}
.notify-legal a { color: var(--bordeaux); text-decoration: underline; }

.notify-msg {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: .85rem;
}
.notify-msg--error { background: #FEE2E2; color: #991B1B; }

.notify-success-msg {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  background: #D1FAE5;
  border-radius: var(--radius);
  color: #065F46;
}
.notify-success-icon { font-size: 1.8rem; }
.notify-success-msg p { margin: 0; font-size: .95rem; font-weight: 700; }

@media (max-width: 640px) {
  .notify-form-wrap { padding: 24px 20px; }
  .notify-form-fields { grid-template-columns: 1fr; }
}

/* ── ADMIN manquants ──────────────────────────────────────── */
.btn-admin-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: var(--white);
  border: 1px solid var(--cream-mid);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: .82rem;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition);
}
.btn-admin-secondary:hover { border-color: var(--bordeaux); color: var(--bordeaux); }

.btn-admin-danger {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  background: #FEE2E2;
  border: 1px solid #FECACA;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: .82rem;
  font-weight: 700;
  color: #991B1B;
  cursor: pointer;
  transition: all var(--transition);
}
.btn-admin-danger:hover { background: #991B1B; color: var(--white); border-color: #991B1B; }

.admin-alert {
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  font-size: .88rem;
  font-weight: 700;
}
.admin-alert--success { background: #D1FAE5; color: #065F46; border-left: 4px solid #10B981; }
.admin-alert--error   { background: #FEE2E2; color: #991B1B; border-left: 4px solid #EF4444; }

/* ── ADMIN DEPENDENT SELECT HINT ─────────────────────────── */
.admin-dep-hint {
  font-size: .75rem;
  color: var(--text-light);
  font-style: italic;
  margin-top: 6px;
}

/* ════════════════════════════════════════════════════════════
   MODULE OBSERVABILITÉ — Onglets + cartes de recommandation
   ════════════════════════════════════════════════════════════
   Réutilisé tel quel par les 4 pages du module :
   admin/distinctions/stats.php, export.php, cavistes.php, chr.php
   (voir app/Views/admin/distinctions/_nav.php et
   _recommendation-cards.php, inclus par chacune de ces pages —
   un seul style à maintenir pour les 4 pages). */

/* Onglets de navigation entre les pages du module : mêmes couleurs
   que .filter-btn utilisé côté site public (pilule bordeaux quand
   actif), mais nommé différemment pour ne pas mélanger les deux
   usages (filtre de contenu vs. navigation entre pages admin). */
.distinctions-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.distinctions-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 40px;
  border: 2px solid #E5E7EB;
  background: var(--white);
  color: var(--text-light);
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  transition: all .2s ease;
}
.distinctions-tab:hover {
  border-color: var(--bordeaux);
  color: var(--bordeaux);
}
.distinctions-tab.active {
  background: var(--bordeaux);
  border-color: var(--bordeaux);
  color: var(--white);
}

/* Grille de cartes "recommandation" (une carte = une cuvée/millésime
   recommandé). auto-fill + minmax : le nombre de colonnes s'adapte
   tout seul à la largeur d'écran, sans media query à écrire — 3 ou 4
   cartes par ligne sur grand écran, 1 seule sur mobile. */
.reco-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.reco-card {
  background: var(--white);
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
  /* Couleur neutre par défaut ; remplacée pour les 3 premières cartes
     (voir .reco-card--rank-1/2/3 ci-dessous) pour repérer le podium
     d'un coup d'œil, sans avoir à lire le score de chaque carte. */
  border-top: 4px solid #E5E7EB;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.reco-card--rank-1 { border-top-color: #D4AF37; } /* or */
.reco-card--rank-2 { border-top-color: #A8A8A8; } /* argent */
.reco-card--rank-3 { border-top-color: #B08D57; } /* bronze */

.reco-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.reco-card-cuvee {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  line-height: 1.3;
}
.reco-card-cuvee a {
  color: var(--text);
  text-decoration: none;
}
.reco-card-cuvee a:hover {
  color: var(--bordeaux);
  text-decoration: underline;
}
.reco-card-year {
  display: block;
  font-size: .78rem;
  color: var(--text-light);
  margin-top: 2px;
}

.reco-card-score {
  font-family: var(--font-serif);
  font-size: 1.7rem;
  color: var(--bordeaux);
  line-height: 1;
  text-align: right;
  flex-shrink: 0;
}
.reco-card-score-label {
  display: block;
  font-family: var(--font-sans);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-top: 2px;
}

/* Étiquettes "raisons" (arguments) : on réutilise volontairement
   .wine-badge, déjà défini plus haut dans ce fichier pour le site
   public — même besoin visuel (petite étiquette arrondie), pas la
   peine de dupliquer une règle CSS quasi identique. */
.reco-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto; /* pousse les étiquettes en bas de la carte, même si les cartes voisines ont des hauteurs différentes */
}

.reco-empty {
  color: var(--text-light);
  text-align: center;
  padding: 48px 0;
  grid-column: 1 / -1; /* occupe toute la largeur de la grille si jamais reco-grid contient ce seul message */
}