/* ====================================================================
   Cave à Vin — Feuille de style principale
   Palette : bordeaux profond, crème, cuivre, anthracite
   ==================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap');

:root {
  --color-bg: #1a1212;
  --color-bg-soft: #221818;
  --color-bg-card: #2a1e1e;
  --color-burgundy: #722f37;
  --color-burgundy-light: #963a44;
  --color-burgundy-dark: #4a1e24;
  --color-cream: #f5ead7;
  --color-cream-soft: #e8dcc5;
  --color-copper: #c9a37a;
  --color-copper-light: #d9b894;
  --color-text: #e8dcc5;
  --color-text-muted: #a89888;
  --color-border: rgba(201, 163, 122, 0.15);
  --color-border-strong: rgba(201, 163, 122, 0.35);
  --color-shadow: rgba(0, 0, 0, 0.4);

  --font-serif: 'Cormorant Garamond', 'Garamond', serif;
  --font-sans: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;

  --radius: 4px;
  --radius-lg: 8px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--color-bg);
  background-image:
    radial-gradient(circle at 20% 10%, rgba(114, 47, 55, 0.15), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(74, 30, 36, 0.2), transparent 50%);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ====================================================================
   Login Page
   ==================================================================== */

.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem;
}

.login-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 3.5rem 3rem;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 60px var(--color-shadow);
  position: relative;
}

.login-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-copper), transparent);
}

.login-logo {
  text-align: center;
  margin-bottom: 2rem;
}

.login-logo svg {
  width: 56px;
  height: 56px;
  color: var(--color-copper);
}

.login-card h1 {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 400;
  text-align: center;
  color: var(--color-cream);
  margin-bottom: 0.5rem;
  letter-spacing: 0.02em;
}

.login-card .subtitle {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 2.5rem;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.login-form input,
.auth-form input {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  color: var(--color-cream);
  padding: 1rem 1.1rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
  transition: border-color var(--transition), background var(--transition);
  -webkit-appearance: none;
  appearance: none;
  min-height: 52px;
}

.login-form input::placeholder,
.auth-form input::placeholder {
  color: var(--color-text-muted);
  opacity: 0.7;
}

.login-form input:focus,
.auth-form input:focus {
  outline: none;
  border-color: var(--color-copper);
  background: rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 0 3px rgba(201, 163, 122, 0.15);
}

/* Empêche iOS Safari de mettre fond bleu/blanc sur autofill */
.login-form input:-webkit-autofill,
.auth-form input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--color-bg-soft) inset !important;
  -webkit-text-fill-color: var(--color-cream) !important;
  caret-color: var(--color-cream);
  border: 1px solid var(--color-border-strong);
}

.login-form button {
  background: var(--color-burgundy);
  color: var(--color-cream);
  border: none;
  border-radius: var(--radius);
  padding: 1.05rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  width: 100%;
  cursor: pointer;
  margin-top: 0.5rem;
  min-height: 52px;
  cursor: pointer;
  transition: background var(--transition);
}

.login-form button:hover {
  background: var(--color-burgundy-light);
}

.login-error {
  background: rgba(180, 60, 60, 0.15);
  border: 1px solid rgba(180, 60, 60, 0.4);
  color: #f0b0b0;
  padding: 0.7rem 1rem;
  border-radius: var(--radius);
  font-size: 0.85rem;
  text-align: center;
}

/* ====================================================================
   Header / Navigation
   ==================================================================== */

.site-header {
  background: rgba(26, 18, 18, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.25rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: var(--color-cream);
}

.brand svg {
  width: 30px;
  height: 30px;
  color: var(--color-copper);
}

.brand-text {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.brand-text em {
  color: var(--color-copper);
  font-style: italic;
  font-weight: 400;
}

.header-nav {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.header-nav a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color var(--transition);
}

.header-nav a:hover,
.header-nav a.active {
  color: var(--color-copper);
}

.header-nav .btn-logout {
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
}

.header-nav .btn-logout:hover {
  border-color: var(--color-copper);
}

/* ====================================================================
   Hero
   ==================================================================== */

.hero {
  padding: 5rem 2rem 3rem;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.hero-eyebrow {
  display: inline-block;
  color: var(--color-copper);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  position: relative;
  padding: 0 2rem;
}

.hero-eyebrow::before,
.hero-eyebrow::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 1.5rem;
  height: 1px;
  background: var(--color-copper);
}

.hero-eyebrow::before { left: 0; }
.hero-eyebrow::after { right: 0; }

.hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 400;
  color: var(--color-cream);
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin-bottom: 1.25rem;
}

.hero h1 em {
  color: var(--color-copper);
  font-style: italic;
  font-weight: 300;
}

/* Variant : hero avec logo NICOLAS plutôt que texte */
.hero-title-logo {
  margin: 0 auto 2rem auto;
  max-width: 520px;
  width: 80%;
  display: block;
  padding: 0;
}

.hero-title-logo svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.5));
}

@media (max-width: 768px) {
  .hero-title-logo {
    max-width: 340px;
    width: 85%;
    margin-bottom: 1.5rem;
  }
}

.hero p {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  max-width: 580px;
  margin: 0 auto;
  font-weight: 300;
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--color-border);
}

.stat {
  text-align: center;
}

.stat-value {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  color: var(--color-cream);
  font-weight: 500;
  display: block;
}

.stat-label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 0.25rem;
  display: block;
}

/* ====================================================================
   Filtres
   ==================================================================== */

.filters {
  max-width: 1400px;
  margin: 2rem auto 0;
  padding: 0 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.filters-left {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scroll-padding-left: 1rem;
  padding: 0.4rem 1.25rem 0.75rem 0;
  margin-bottom: -0.5rem;
  flex: 1 1 auto;
  min-width: 0;
  /* Fade-out gradient à droite pour suggérer le défilement */
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
          mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
  /* Scrollbar discrète */
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 163, 122, 0.25) transparent;
}

.filters-left::-webkit-scrollbar {
  height: 3px;
}
.filters-left::-webkit-scrollbar-track {
  background: transparent;
}
.filters-left::-webkit-scrollbar-thumb {
  background: rgba(201, 163, 122, 0.25);
  border-radius: 999px;
}

.filters-left .filter-chip {
  flex-shrink: 0;
  white-space: nowrap;
  scroll-snap-align: start;
}

.filter-chip {
  background: transparent;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-muted);
  padding: 0.45rem 1rem;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all var(--transition);
}

.filter-chip:hover {
  color: var(--color-copper);
  border-color: var(--color-copper);
}

.filter-chip.active {
  background: var(--color-burgundy);
  color: var(--color-cream);
  border-color: var(--color-burgundy);
}

.search-box {
  position: relative;
}

.search-box input {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  color: var(--color-cream);
  padding: 0.5rem 1rem 0.5rem 2.5rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  min-width: 240px;
  transition: border-color var(--transition);
}

.search-box input:focus {
  outline: none;
  border-color: var(--color-copper);
}

.search-box svg {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--color-text-muted);
}

/* ====================================================================
   Grille des bouteilles
   ==================================================================== */

.cave-grid {
  max-width: 1400px;
  margin: 2rem auto 4rem;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.75rem;
}

.bottle-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  position: relative;
}

.bottle-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-border-strong);
  box-shadow: 0 20px 40px var(--color-shadow);
}

.bottle-photo {
  height: 280px;
  background: linear-gradient(135deg, var(--color-burgundy-dark), var(--color-bg-soft));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.bottle-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease;
}

.bottle-card:hover .bottle-photo img {
  transform: scale(1.05);
}

.bottle-photo-placeholder {
  width: 80px;
  height: 80px;
  opacity: 0.4;
  color: var(--color-copper);
}

.bottle-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(26, 18, 18, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-copper);
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  font-weight: 500;
  border: 1px solid var(--color-border-strong);
}

.bottle-info {
  padding: 1.5rem 1.5rem 1.75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.bottle-region {
  font-size: 0.7rem;
  color: var(--color-copper);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.bottle-name {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--color-cream);
  line-height: 1.2;
  margin-bottom: 0.4rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bottle-producer {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-style: italic;
  margin-bottom: 1rem;
}

.bottle-meta {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.8rem;
}

.bottle-meta .millesime {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--color-cream);
  font-weight: 500;
}

.bottle-meta .price {
  color: var(--color-copper);
  letter-spacing: 0.05em;
}

/* ====================================================================
   Modal de détail
   ==================================================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(20px);
  transition: transform var(--transition);
  display: grid;
  position: relative;
  grid-template-columns: 1fr 1.4fr;
}

.modal-overlay.active .modal {
  transform: translateY(0);
}

.modal-photo {
  background: linear-gradient(135deg, var(--color-burgundy-dark), var(--color-bg-soft));
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.modal-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-photo svg {
  width: 100px;
  height: 100px;
  color: var(--color-copper);
  opacity: 0.4;
}

.modal-content {
  padding: 2.5rem;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(26, 18, 18, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(245, 234, 215, 0.25);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  color: var(--color-cream);
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  z-index: 10;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}

.modal-close:hover {
  background: var(--color-burgundy);
  border-color: var(--color-burgundy);
}

.modal-region {
  font-size: 0.75rem;
  color: var(--color-copper);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.modal-title {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 500;
  color: var(--color-cream);
  line-height: 1.1;
  margin-bottom: 0.5rem;
}

.modal-producer {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  font-style: italic;
  margin-bottom: 1.75rem;
}

.modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 2rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.modal-info-item .label {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.modal-info-item .value {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--color-cream);
  line-height: 1.3;
}

.modal-info-item.price .value {
  color: var(--color-copper);
}

.modal-info-item.apogee .value {
  color: var(--color-copper-light);
}

.modal-section {
  margin-bottom: 1.5rem;
}

.modal-section h3 {
  font-family: var(--font-serif);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-copper);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.modal-section p {
  color: var(--color-text);
  line-height: 1.7;
  font-size: 0.95rem;
}

.modal-section.note p {
  font-style: italic;
  color: var(--color-text-muted);
}

/* ====================================================================
   Admin
   ==================================================================== */

.admin-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 3rem 2rem 4rem;
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.admin-header h1 {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: 400;
  color: var(--color-cream);
}

.btn-primary {
  background: var(--color-burgundy);
  color: var(--color-cream);
  border: none;
  border-radius: var(--radius);
  padding: 0.75rem 1.5rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.btn-primary:hover {
  background: var(--color-burgundy-light);
}

.btn-secondary {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  padding: 0.6rem 1.2rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all var(--transition);
}

.btn-secondary:hover {
  color: var(--color-copper);
  border-color: var(--color-copper);
}

.btn-danger {
  color: #f0a0a0;
  background: transparent;
  border: 1px solid rgba(180, 60, 60, 0.3);
  border-radius: var(--radius);
  padding: 0.45rem 0.9rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all var(--transition);
}

.btn-danger:hover {
  background: rgba(180, 60, 60, 0.15);
  border-color: rgba(180, 60, 60, 0.6);
}

.admin-table-wrap {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table thead th {
  background: var(--color-bg-soft);
  color: var(--color-copper);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 1rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.admin-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition);
}

.admin-table tbody tr:last-child {
  border-bottom: none;
}

.admin-table tbody tr:hover {
  background: rgba(0, 0, 0, 0.2);
}

.admin-table td {
  padding: 1rem 1.25rem;
  vertical-align: middle;
  font-size: 0.9rem;
}

.admin-thumb {
  width: 45px;
  height: 60px;
  background: var(--color-burgundy-dark);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-thumb svg {
  width: 20px;
  height: 20px;
  color: var(--color-copper);
  opacity: 0.5;
}

.admin-actions {
  display: flex;
  gap: 0.5rem;
}

/* Form */
.form-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 3rem 2rem 4rem;
}

.form-page h1 {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 400;
  color: var(--color-cream);
  margin-bottom: 0.5rem;
}

.form-page .subtitle {
  color: var(--color-text-muted);
  margin-bottom: 2.5rem;
}

.wine-form {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-field label {
  font-size: 0.7rem;
  color: var(--color-copper);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  color: var(--color-cream);
  padding: 0.7rem 0.9rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  transition: border-color var(--transition);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-copper);
}

.form-field textarea {
  min-height: 100px;
  resize: vertical;
  line-height: 1.5;
}

.form-field .helper {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-style: italic;
}

.form-photo-current {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  background: var(--color-bg-soft);
  border-radius: var(--radius);
  border: 1px dashed var(--color-border-strong);
}

.form-photo-current img {
  width: 60px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius);
}

.form-actions {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}

.flash {
  background: rgba(95, 160, 95, 0.15);
  border: 1px solid rgba(95, 160, 95, 0.4);
  color: #b5e0b5;
  padding: 0.9rem 1.2rem;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}

.flash.error {
  background: rgba(180, 60, 60, 0.15);
  border-color: rgba(180, 60, 60, 0.4);
  color: #f0b0b0;
}

/* ====================================================================
   Footer
   ==================================================================== */

.site-footer {
  border-top: 1px solid var(--color-border);
  padding: 2rem;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  margin-top: 4rem;
}

.site-footer em {
  color: var(--color-copper);
  font-family: var(--font-serif);
  font-style: italic;
}

/* Footer sur UNE seule ligne — fit sur iPhone */
.site-footer p,
.site-footer .footer-line {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
  justify-content: center;
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.footer-dot {
  opacity: 0.55;
  flex-shrink: 0;
}

.footer-credit {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.footer-year {
  flex-shrink: 0;
}

/* Cœur dans les tons mauve/violet doux, sans effet de relief */
.footer-heart {
  display: inline-block;
  color: #9d7bbf;
  font-size: 0.85rem;
  line-height: 1;
  margin: 0 0.1rem;
  vertical-align: -1px;
  /* pas de text-shadow, pas de glow : flat color */
}

/* Lien Safemode : reste cuivre dans tous les états (visited inclus) */
.footer-safemode,
.footer-safemode:visited,
.footer-safemode:link,
.footer-safemode:active {
  color: var(--color-copper);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.footer-safemode:hover,
.footer-safemode:focus,
.footer-safemode:focus-visible {
  color: #E9B978;
  border-bottom-color: var(--color-copper);
}

/* Très petit écran : on garde tout sur une ligne en réduisant encore */
@media (max-width: 380px) {
  .site-footer p,
  .site-footer .footer-line {
    font-size: 0.62rem;
    gap: 0.25rem;
  }
  .footer-heart {
    font-size: 0.75rem;
  }
}

/* ====================================================================
   Responsive
   ==================================================================== */

@media (max-width: 768px) {
  .header-inner {
    padding: 1rem 1.25rem;
  }

  .header-nav {
    gap: 0.75rem;
  }

  .header-nav a {
    font-size: 0.75rem;
  }

  .hero {
    padding: 3rem 1.25rem 2rem;
  }

  .hero-stats {
    gap: 1.5rem;
  }

  .cave-grid {
    padding: 0 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.25rem;
  }

  .filters {
    padding: 0 1.25rem;
  }

  .search-box input {
    min-width: 0;
    width: 100%;
  }

  .modal {
    grid-template-columns: 1fr;
    max-height: 95vh;
  }

  .modal-photo {
    min-height: 280px;
    max-height: 320px;
  }

  .modal-content {
    padding: 1.75rem;
  }

  .modal-title {
    font-size: 1.7rem;
  }

  .modal-grid {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }

  .admin-page,
  .form-page {
    padding: 2rem 1.25rem 3rem;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  /* Mobile : padding réduit pour les cartes du Smart Add */
  .smart-add-page {
    padding: 1.5rem 1rem 3rem;
  }

  .smart-add-card {
    padding: 1.2rem;
  }

  .wine-form {
    padding: 1.2rem;
  }

  /* Form actions empilés verticalement sur mobile */
  .form-actions {
    flex-direction: column-reverse;
    gap: 0.75rem;
  }

  .form-actions .btn-primary,
  .form-actions .btn-secondary,
  .form-actions a,
  .form-actions button {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }

  .admin-table thead {
    display: none;
  }

  .admin-table tbody tr {
    display: block;
    padding: 1rem;
  }

  .admin-table td {
    display: block;
    padding: 0.4rem 0;
  }

  .admin-table td:first-child {
    margin-bottom: 0.5rem;
  }

  .admin-actions {
    margin-top: 0.5rem;
  }
}

/* Loader */
.loading {
  display: flex;
  justify-content: center;
  padding: 4rem;
  color: var(--color-text-muted);
  font-family: var(--font-serif);
  font-style: italic;
}

.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--color-text-muted);
}

.empty-state svg {
  width: 60px;
  height: 60px;
  color: var(--color-copper);
  opacity: 0.4;
  margin-bottom: 1rem;
}

.empty-state h2 {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  color: var(--color-cream);
  margin-bottom: 0.5rem;
  font-weight: 400;
}

/* ====================================================================
   Logo NICOLAS
   ==================================================================== */

.brand-nicolas {
  display: inline-block;
  text-decoration: none;
}

.logo-nicolas {
  height: 48px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
  transition: transform 0.3s ease;
}

.brand-nicolas:hover .logo-nicolas {
  transform: scale(1.03);
}

@media (max-width: 768px) {
  .logo-nicolas { height: 38px; }
}

/* ====================================================================
   Badge statut de garde
   ==================================================================== */

.garde-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.garde-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.garde-now {
  background: rgba(95, 160, 95, 0.18);
  color: #b5e0b5;
  border: 1px solid rgba(95, 160, 95, 0.4);
}
.garde-now::before { background: #6ab36a; box-shadow: 0 0 6px rgba(106, 179, 106, 0.7); }

.garde-soon {
  background: rgba(220, 170, 70, 0.18);
  color: #e8c98a;
  border: 1px solid rgba(220, 170, 70, 0.4);
}
.garde-soon::before { background: #e0b65a; box-shadow: 0 0 6px rgba(224, 182, 90, 0.7); }

.garde-urgent {
  background: rgba(200, 70, 70, 0.20);
  color: #f0a8a8;
  border: 1px solid rgba(200, 70, 70, 0.5);
}
.garde-urgent::before { background: #d8554b; box-shadow: 0 0 8px rgba(216, 85, 75, 0.8); }

.garde-keep {
  background: rgba(90, 130, 200, 0.18);
  color: #a8c0e8;
  border: 1px solid rgba(90, 130, 200, 0.4);
}
.garde-keep::before { background: #6a8ad0; box-shadow: 0 0 6px rgba(106, 138, 208, 0.7); }

.bottle-card .garde-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background-color: rgba(26, 18, 18, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2;
}

/* ====================================================================
   Note publique (étoiles)
   ==================================================================== */

.note-stars {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--color-copper);
  font-size: 0.85rem;
}

.note-stars .stars {
  letter-spacing: 0.05em;
}

.note-stars .stars-empty {
  color: var(--color-text-muted);
  opacity: 0.4;
}

.modal-info-item.note-publique .value {
  color: var(--color-copper);
}

/* ====================================================================
   Croix de suppression sur cartes
   ==================================================================== */

.bottle-card { position: relative; }

.bottle-delete {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(26, 18, 18, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-copper);
  border: 1px solid var(--color-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  transition: all var(--transition);
  text-decoration: none;
  font-family: var(--font-sans);
  -webkit-tap-highlight-color: transparent;
}

.bottle-delete:hover {
  background: rgba(168, 60, 60, 0.85);
  color: #f3d8d8;
  border-color: rgba(200, 70, 70, 0.7);
  transform: scale(1.08);
}

.bottle-delete form {
  margin: 0;
  display: contents;
}

.bottle-delete button {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.bottle-delete button svg {
  width: 16px;
  height: 16px;
  color: inherit;
}

/* ====================================================================
   Boutons caméra iPhone / Galerie
   ==================================================================== */

.camera-buttons {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.camera-btn {
  flex: 1;
  min-width: 140px;
  padding: 0.85rem 1rem;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  color: var(--color-cream);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  cursor: pointer;
  text-align: center;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.camera-btn:hover {
  border-color: var(--color-copper);
  color: var(--color-copper);
}

.camera-btn input {
  display: none;
}

/* ====================================================================
   Smart Add (analyse photo IA)
   ==================================================================== */

.smart-add-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 3rem 2rem 4rem;
}

.smart-add-page h1 {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: 400;
  color: var(--color-cream);
  margin-bottom: 0.5rem;
}

.smart-add-page .subtitle {
  color: var(--color-text-muted);
  margin-bottom: 2.5rem;
  font-size: 1.05rem;
}

.smart-add-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
}

.smart-add-drop {
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: 3rem 2rem;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
}

.smart-add-drop:hover, .smart-add-drop.dragover {
  border-color: var(--color-copper);
  background: rgba(0, 0, 0, 0.2);
}

.smart-add-drop svg {
  width: 56px;
  height: 56px;
  color: var(--color-copper);
  opacity: 0.7;
  margin-bottom: 1rem;
}

.smart-add-drop h3 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--color-cream);
  margin-bottom: 0.5rem;
}

.smart-add-drop p {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.smart-add-drop input[type="file"] {
  display: none;
}

.smart-preview {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.25rem;
  background: var(--color-bg-soft);
  border-radius: var(--radius);
}

.smart-preview img {
  width: 100px;
  height: 130px;
  object-fit: cover;
  border-radius: var(--radius);
}

.smart-status {
  flex: 1;
}

.smart-status .step {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-text-muted);
  padding: 0.3rem 0;
  font-size: 0.9rem;
}

.smart-status .step.done { color: #b5e0b5; }
.smart-status .step.active { color: var(--color-copper); }
.smart-status .step .icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

.smart-status .step.active .icon { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.smart-result-form { margin-top: 1.5rem; }

/* Note récupérer bouton */
.btn-fetch-note {
  background: rgba(201, 163, 122, 0.12);
  border: 1px solid var(--color-border-strong);
  color: var(--color-copper);
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius);
  font-size: 0.8rem;
  cursor: pointer;
  margin-top: 0.4rem;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.btn-fetch-note:hover {
  background: rgba(201, 163, 122, 0.2);
  border-color: var(--color-copper);
}

/* ====================================================================
   v3 — Multi-user : signup, badge quantité, polish
   ==================================================================== */

/* --- Auth (signup) page : reprise du look login --- */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: radial-gradient(ellipse at top, rgba(114, 47, 55, 0.18), transparent 60%), var(--color-bg);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: cardFadeIn 0.5s ease-out;
}

@keyframes cardFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.auth-card h1 {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  color: var(--color-cream);
  margin-bottom: 0.3rem;
  text-align: center;
}

.auth-card .subtitle {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
  font-style: italic;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.auth-submit {
  margin-top: 0.5rem;
  width: 100%;
  padding: 0.85rem 1.5rem;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
}

.auth-switch {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.auth-switch a {
  color: var(--color-copper);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition);
}

.auth-switch a:hover { color: var(--color-copper-light); }

/* Lien signup sous formulaire login */
.login-switch {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.login-switch a {
  color: var(--color-copper);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition);
}

.login-switch a:hover { color: var(--color-copper-light); }

/* Logo NICOLAS sur page login (plus grand qu'avant) */
.login-card .login-logo svg {
  width: 200px;
  height: auto;
  display: block;
  margin: 0 auto 1.5rem auto;
}

/* --- Badge nom d'utilisateur dans le header --- */
.nav-user {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--color-copper);
  letter-spacing: 0.05em;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: rgba(201, 163, 122, 0.06);
  margin-right: 0.25rem;
}

@media (max-width: 768px) {
  .nav-user { display: none; }
}

/* --- Badge quantité sur les cartes de bouteilles --- */
.bottle-qty {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  background: rgba(26, 18, 18, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--color-border-strong);
  color: var(--color-cream);
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  z-index: 2;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.bottle-qty-empty {
  background: rgba(150, 60, 60, 0.85);
  color: var(--color-cream);
  border-color: rgba(200, 70, 70, 0.5);
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
}

/* --- Loading IA pendant analyse photo (spinner élégant) --- */
.ai-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  padding: 2rem;
  text-align: center;
}

.ai-loading-spinner {
  position: relative;
  width: 64px;
  height: 64px;
}

.ai-loading-spinner::before,
.ai-loading-spinner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
}

.ai-loading-spinner::before {
  border-top-color: var(--color-copper);
  border-right-color: var(--color-copper);
  animation: spin 1.2s linear infinite;
}

.ai-loading-spinner::after {
  border-bottom-color: var(--color-burgundy);
  border-left-color: var(--color-burgundy);
  animation: spin 1.8s linear infinite reverse;
  inset: 8px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.ai-loading-text {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-copper);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

.ai-loading-substep {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* --- Login : adaptation mobile (tout doit tenir sur iPhone sans scroll) --- */
@media (max-width: 540px) {
  .login-page {
    padding: 0.75rem;
    min-height: 100vh;
    min-height: 100dvh;
    align-items: flex-start;
    padding-top: env(safe-area-inset-top, 0.75rem);
  }
  .login-card {
    padding: 1.25rem 1.1rem;
    max-width: 100%;
    margin: 0;
  }
  .login-card h1 { font-size: 1.6rem; margin-bottom: 0.25rem; }
  .login-card .subtitle { margin-bottom: 0.85rem; font-size: 0.72rem; letter-spacing: 0.08em; }
  .login-card .login-logo svg { width: 110px; margin-bottom: 0.6rem; }
  .login-card .login-logo { margin-bottom: 0.3rem; }
  .login-intro {
    font-size: 0.78rem;
    line-height: 1.45;
    margin: 0.6rem 0 0.9rem;
    padding: 0;
  }
  .login-form input {
    padding: 0.7rem 0.85rem;
    font-size: 0.95rem;
  }
  .login-form button {
    padding: 0.75rem;
    font-size: 0.9rem;
    margin-top: 0.3rem;
  }
  .login-switch { font-size: 0.78rem; margin-top: 0.7rem; }
  .login-langs {
    margin-top: 0.85rem;
    padding-top: 0.7rem;
    gap: 0.3rem;
  }
  .login-lang-pill {
    padding: 0.3rem 0.55rem;
    font-size: 0.7rem;
  }
  .auth-card { padding: 1.5rem 1.25rem; }
}

/* Très petit (iPhone SE) : encore plus serré */
@media (max-width: 380px) {
  .login-card { padding: 1rem 0.85rem; }
  .login-card h1 { font-size: 1.4rem; }
  .login-card .login-logo svg { width: 90px; }
  .login-intro { font-size: 0.74rem; margin: 0.5rem 0 0.75rem; }
  .login-lang-pill { padding: 0.28rem 0.5rem; font-size: 0.68rem; }
}

/* --- Empty state cave (premier vin) --- */
.empty-cave {
  max-width: 560px;
  margin: 3rem auto 5rem;
  padding: 3rem 2rem;
  text-align: center;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  position: relative;
  animation: cardFadeIn 0.5s ease-out;
}

.empty-cave::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 30%;
  right: 30%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-copper), transparent);
}

.empty-cave-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 1.5rem auto;
  color: var(--color-copper);
  opacity: 0.6;
}

.empty-cave h2 {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 400;
  color: var(--color-cream);
  margin-bottom: 0.75rem;
  letter-spacing: 0.01em;
}

.empty-cave h2 em {
  color: var(--color-copper);
  font-style: italic;
}

.empty-cave p {
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.empty-cave-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--color-burgundy);
  color: var(--color-cream);
  border: none;
  border-radius: var(--radius);
  padding: 1.1rem 2rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(114, 47, 55, 0.3);
}

.empty-cave-cta:hover {
  background: var(--color-burgundy-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(114, 47, 55, 0.45);
}

.empty-cave-cta svg {
  width: 22px;
  height: 22px;
}

.empty-cave-hint {
  margin-top: 2rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-style: italic;
}

@media (max-width: 540px) {
  .empty-cave {
    margin: 1.5rem 1rem 3rem;
    padding: 2rem 1.25rem;
  }
  .empty-cave h2 { font-size: 1.7rem; }
  .empty-cave-cta { padding: 1rem 1.5rem; font-size: 0.85rem; }
}

/* --- Polish général : hovers + transitions plus douces --- */
.bottle-card {
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.3s ease;
}

.bottle-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  border-color: var(--color-border-strong);
}

.btn-primary, .btn-secondary, .camera-btn, .auth-submit {
  transition: all 0.25s ease;
}

.btn-primary:hover, .camera-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(114, 47, 55, 0.35);
}

.btn-secondary:hover {
  transform: translateY(-1px);
}

.region-filter button, .filter-pill {
  transition: all 0.25s ease;
}

/* Apparition fluide des cartes au chargement */
@keyframes cardSlideIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.bottle-card {
  animation: cardSlideIn 0.5s ease-out backwards;
}
.bottle-card:nth-child(1) { animation-delay: 0.0s; }
.bottle-card:nth-child(2) { animation-delay: 0.05s; }
.bottle-card:nth-child(3) { animation-delay: 0.1s; }
.bottle-card:nth-child(4) { animation-delay: 0.15s; }
.bottle-card:nth-child(5) { animation-delay: 0.2s; }
.bottle-card:nth-child(6) { animation-delay: 0.25s; }
.bottle-card:nth-child(n+7) { animation-delay: 0.3s; }

/* ====================================================================
   v4 — Polish moderne : glow, shimmer, animations subtiles
   ==================================================================== */

/* Body : background ambient subtil (lueur bordeaux/cuivre derrière) */
body {
  background:
    radial-gradient(ellipse at top, rgba(114, 47, 55, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(201, 163, 122, 0.06) 0%, transparent 50%),
    var(--color-bg);
  background-attachment: fixed;
}

/* Cache le logo NICOLAS du header en mobile (gardé en desktop) */
@media (max-width: 768px) {
  .site-header .brand-nicolas { display: none; }
  .site-header .header-inner { justify-content: center; }
  .site-header .header-nav { gap: 0.6rem; }
}

/* Cartes bouteilles : glow cuivre subtil + lift au hover */
.bottle-card {
  position: relative;
  overflow: hidden;
}

.bottle-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(201, 163, 122, 0);
  transition: box-shadow 0.5s ease, opacity 0.5s ease;
  opacity: 0;
}

.bottle-card:hover::after {
  box-shadow: inset 0 0 0 1px rgba(201, 163, 122, 0.4),
              0 0 32px rgba(201, 163, 122, 0.15);
  opacity: 1;
}

.bottle-card .bottle-photo img {
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s ease;
}

.bottle-card:hover .bottle-photo img {
  transform: scale(1.04);
  filter: saturate(1.1) brightness(1.04);
}

/* Boutons : shimmer (lueur qui passe) au hover */
.btn-primary,
.empty-cave-cta,
.auth-submit,
.login-form button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn-primary::before,
.empty-cave-cta::before,
.auth-submit::before,
.login-form button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 70%
  );
  transition: left 0.7s ease;
  z-index: -1;
}

.btn-primary:hover::before,
.empty-cave-cta:hover::before,
.auth-submit:hover::before,
.login-form button:hover::before {
  left: 130%;
}

/* Filter chips : underline au hover */
.filter-chip {
  position: relative;
  transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.filter-chip:not(.active):hover {
  color: var(--color-cream);
  border-color: var(--color-copper);
  transform: translateY(-2px);
}

.filter-chip.active {
  box-shadow: 0 4px 16px rgba(114, 47, 55, 0.35);
}

/* Empty state : icône qui flotte doucement */
.empty-cave-icon {
  animation: gentleFloat 4s ease-in-out infinite;
}

@keyframes gentleFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Stats : effet "reveal" au chargement, chiffres légèrement animés */
.stat-value {
  display: inline-block;
  animation: statReveal 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.stat:nth-child(1) .stat-value { animation-delay: 0.1s; }
.stat:nth-child(2) .stat-value { animation-delay: 0.2s; }
.stat:nth-child(3) .stat-value { animation-delay: 0.3s; }

@keyframes statReveal {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.85);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Hero NICOLAS logo : animation d'entrée + drop shadow plus riche */
.hero-title-logo svg {
  animation: logoEntrance 1s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: 0.15s;
  filter:
    drop-shadow(0 6px 20px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 40px rgba(201, 163, 122, 0.08));
}

@keyframes logoEntrance {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Hero eyebrow et p : reveal séquentiel */
.hero-eyebrow { animation: fadeUp 0.7s ease-out 0.05s backwards; }
.hero p        { animation: fadeUp 0.7s ease-out 0.4s backwards; }
.hero-stats    { animation: fadeUp 0.7s ease-out 0.55s backwards; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Modal : zoom-in soft */
.modal-overlay.active .modal {
  animation: modalIn 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.92) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-overlay {
  transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
}

/* Navigation : underline animé sur les liens actifs */
.header-nav a {
  position: relative;
  transition: color 0.25s ease;
}

.header-nav a:not(.btn-logout)::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-copper);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.header-nav a.active::after,
.header-nav a:hover::after {
  transform: scaleX(1);
}

/* Garde-badge : pulse léger pour "urgent" (à boire vite) */
.garde-urgent {
  animation: gentlePulse 2.5s ease-in-out infinite;
}

@keyframes gentlePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(216, 85, 75, 0); }
  50%      { box-shadow: 0 0 0 6px rgba(216, 85, 75, 0.15); }
}

/* Champ recherche : focus state plus expressif */
.search-box {
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.search-box:focus-within {
  border-color: var(--color-copper);
  box-shadow: 0 0 0 4px rgba(201, 163, 122, 0.12);
  background: rgba(0, 0, 0, 0.2);
}

/* Loading IA : pulsation du texte */
.ai-loading-text {
  animation: textPulse 2s ease-in-out infinite;
}

@keyframes textPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

/* Logo header : micro hover effect */
.brand-nicolas .logo-nicolas {
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.35s ease;
}

.brand-nicolas:hover .logo-nicolas {
  transform: rotate(-1deg) scale(1.05);
  filter: drop-shadow(0 4px 12px rgba(245, 198, 59, 0.3));
}

/* Décrochage smooth pour entrée sur le site (premier chargement) */
@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

main {
  animation: pageFadeIn 0.5s ease-out;
}

/* Card photo : pseudo-élément vignette en bas pour lisibilité des badges */
.bottle-photo::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(to top, rgba(26, 18, 18, 0.55), transparent);
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.bottle-card:hover .bottle-photo::after {
  opacity: 0.8;
}

.bottle-photo .garde-badge,
.bottle-photo .bottle-badge,
.bottle-photo .bottle-qty {
  z-index: 3;
}

/* Smooth scroll snap pour les filtres en mobile */
@media (max-width: 768px) {
  .filters-left {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
    margin-bottom: -0.5rem;
    scrollbar-width: none;
  }
  .filters-left::-webkit-scrollbar { display: none; }
  .filter-chip { scroll-snap-align: start; flex-shrink: 0; }
}

/* --- Panneau admin (admin_users.php) --- */
.admin-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

.admin-title {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  font-weight: 400;
  color: var(--color-cream);
  margin-bottom: 0.4rem;
  letter-spacing: 0.01em;
}

.admin-subtitle {
  color: var(--color-text-muted);
  font-size: 1rem;
  margin-bottom: 2rem;
  font-style: italic;
}

.admin-section-title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--color-copper);
  margin: 2rem 0 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.admin-stat-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.25rem;
  text-align: center;
  position: relative;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.admin-stat-card:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
}

.admin-stat-card.admin-stat-warn {
  border-color: rgba(224, 182, 90, 0.45);
  background: linear-gradient(180deg, rgba(224, 182, 90, 0.05), transparent);
}

.admin-stat-value {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  color: var(--color-cream);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.admin-stat-warn .admin-stat-value {
  color: #e8c98a;
}

.admin-stat-label {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 0.5rem;
}

/* Table users */
.users-table th, .users-table td {
  padding: 0.85rem 0.9rem;
  vertical-align: middle;
}

.users-table tr.row-blocked {
  opacity: 0.5;
}

.users-table tr.row-blocked strong {
  text-decoration: line-through;
}

/* Petits badges */
.admin-tag {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  background: rgba(201, 163, 122, 0.08);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.admin-tag-admin {
  background: rgba(245, 198, 59, 0.12);
  color: #f5c63b;
  border-color: rgba(245, 198, 59, 0.35);
}
.admin-tag-ok {
  background: rgba(95, 160, 95, 0.12);
  color: #b5e0b5;
  border-color: rgba(95, 160, 95, 0.35);
}
.admin-tag-blocked {
  background: rgba(200, 70, 70, 0.15);
  color: #f0a8a8;
  border-color: rgba(200, 70, 70, 0.45);
}
.admin-tag-me {
  background: var(--color-burgundy);
  color: var(--color-cream);
  border-color: var(--color-burgundy);
  margin-left: 0.4rem;
}

/* Boutons mini-actions */
.btn-tiny {
  background: var(--color-bg-soft);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  padding: 0.45rem 0.75rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 0 0.15rem 0.25rem 0;
  letter-spacing: 0.02em;
}

.btn-tiny:hover {
  background: var(--color-bg-card);
  border-color: var(--color-copper);
  color: var(--color-copper);
}

.btn-tiny-warn {
  border-color: rgba(224, 182, 90, 0.4);
  color: #e8c98a;
}
.btn-tiny-warn:hover {
  background: rgba(224, 182, 90, 0.1);
  border-color: #e8c98a;
  color: #f5d8a3;
}

.btn-tiny-danger {
  border-color: rgba(200, 70, 70, 0.4);
  color: #f0a8a8;
}
.btn-tiny-danger:hover {
  background: rgba(200, 70, 70, 0.15);
  border-color: #f0a8a8;
  color: #ffc0c0;
}

.btn-tiny-ok {
  border-color: rgba(95, 160, 95, 0.4);
  color: #b5e0b5;
}
.btn-tiny-ok:hover {
  background: rgba(95, 160, 95, 0.12);
  border-color: #b5e0b5;
  color: #c8efc8;
}

.admin-user-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  align-items: center;
}

.admin-hint {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-style: italic;
  padding: 1rem 1.25rem;
  background: rgba(201, 163, 122, 0.05);
  border-left: 2px solid var(--color-copper);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* Lien Admin dans la nav */
.nav-admin {
  color: #f5c63b !important;
  font-weight: 500;
}

.nav-admin::after {
  background: #f5c63b !important;
}

@media (max-width: 768px) {
  .admin-page { padding: 1.5rem 0.75rem 3rem; }
  .admin-title { font-size: 1.8rem; }
  .admin-stat-card { padding: 1rem 0.75rem; }
  .admin-stat-value { font-size: 1.8rem; }
  .users-table { font-size: 0.85rem; }
  .users-table th, .users-table td { padding: 0.6rem 0.5rem; }
  .btn-tiny { font-size: 0.72rem; padding: 0.35rem 0.55rem; }
  .admin-user-actions { flex-direction: column; align-items: stretch; }
  .admin-user-actions button { width: 100%; }
}

/* ====================================================================
   v6 — Multi-catégorie (vin / bière / spiritueux)
   ==================================================================== */

/* Filtres catégorie principaux — gros boutons épurés */
.cat-filters {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.6rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cat-filters::-webkit-scrollbar { display: none; }

.cat-chip {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  padding: 0.6rem 1.1rem;
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
  white-space: nowrap;
  position: relative;
}

.cat-chip:hover {
  border-color: var(--color-copper);
  color: var(--color-cream);
  transform: translateY(-2px);
}

.cat-chip.active {
  background: var(--color-burgundy);
  border-color: var(--color-burgundy);
  color: var(--color-cream);
  box-shadow: 0 6px 18px rgba(114, 47, 55, 0.4);
}

.cat-chip-icon {
  font-size: 1.1rem;
  filter: saturate(1.1);
}

.cat-chip-count {
  background: rgba(255, 255, 255, 0.08);
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0;
}

.cat-chip.active .cat-chip-count {
  background: rgba(245, 234, 215, 0.18);
}

/* Petite icône catégorie discrète sur les cartes */
.cat-icon-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(26, 18, 18, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--color-border-strong);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Petits ajustements responsive */
@media (max-width: 768px) {
  .cat-filters {
    padding: 0 1rem;
    margin-top: -0.5rem;
  }
  .cat-chip {
    padding: 0.5rem 0.9rem;
    font-size: 0.8rem;
  }
  .cat-chip-count {
    font-size: 0.68rem;
  }
  .cat-icon-badge {
    width: 28px;
    height: 28px;
    font-size: 0.9rem;
    top: 0.65rem;
    right: 0.65rem;
  }
}

/* Décale le badge couleur/style si l'icône catégorie est en haut à droite */
.bottle-photo .bottle-badge {
  right: 3.5rem;  /* laisse la place à l'icône catégorie */
}

@media (max-width: 768px) {
  .bottle-photo .bottle-badge { right: 3rem; }
}

/* --- Page Bulk Add (galerie multi-photos) --- */
.bulk-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

.bulk-title {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  color: var(--color-cream);
  margin-bottom: 0.4rem;
  font-weight: 400;
}

.bulk-subtitle {
  color: var(--color-text-muted);
  margin-bottom: 2rem;
  font-size: 0.95rem;
}

.bulk-drop-card {
  background: var(--color-bg-card);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: 3rem 2rem;
  text-align: center;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.bulk-drop-card:hover {
  border-color: var(--color-copper);
  background: rgba(201, 163, 122, 0.04);
}

.bulk-drop-card svg {
  width: 64px;
  height: 64px;
  color: var(--color-copper);
  opacity: 0.7;
  margin-bottom: 1rem;
}

.bulk-drop-card h2 {
  font-family: var(--font-serif);
  color: var(--color-cream);
  font-size: 1.6rem;
  margin-bottom: 0.4rem;
  font-weight: 400;
}

.bulk-hint {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
  font-style: italic;
}

.bulk-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--color-burgundy);
  color: var(--color-cream);
  padding: 1rem 2rem;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(114, 47, 55, 0.3);
}

.bulk-cta:hover {
  background: var(--color-burgundy-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(114, 47, 55, 0.45);
}

.bulk-info {
  margin-top: 1.5rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  font-style: italic;
}

/* Process / progress */
.bulk-progress {
  margin-bottom: 1.5rem;
}

.bulk-progress-bar {
  height: 6px;
  background: var(--color-bg-soft);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 0.5rem;
  border: 1px solid var(--color-border);
}

.bulk-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-burgundy), var(--color-copper));
  border-radius: 999px;
  transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 0 16px rgba(201, 163, 122, 0.4);
}

.bulk-progress-text {
  text-align: right;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.bulk-results {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.bulk-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 1rem;
  align-items: center;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.75rem;
  transition: all 0.3s ease;
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

.bulk-item-thumb {
  position: relative;
  width: 64px;
  height: 64px;
  background: var(--color-bg-soft);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.bulk-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bulk-item-cat-icon {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: rgba(26, 18, 18, 0.85);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.bulk-item-body {
  min-width: 0;
}

.bulk-item-status {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

.bulk-status-ok { color: #b5e0b5; }
.bulk-status-err { color: #f0a8a8; }

.bulk-item-name {
  color: var(--color-cream);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bulk-item-sub {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bulk-item-pending {
  opacity: 0.6;
}

.bulk-item-running {
  border-color: var(--color-copper);
  background: linear-gradient(90deg, rgba(201, 163, 122, 0.08), var(--color-bg-card));
}

.bulk-item-ok {
  border-color: rgba(95, 160, 95, 0.35);
}

.bulk-item-err {
  border-color: rgba(200, 70, 70, 0.4);
  opacity: 0.75;
}

.bulk-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid transparent;
  border-top-color: var(--color-copper);
  border-right-color: var(--color-copper);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@media (max-width: 540px) {
  .bulk-page { padding: 1.5rem 1rem 3rem; }
  .bulk-title { font-size: 1.7rem; }
  .bulk-drop-card { padding: 2rem 1.25rem; }
  .bulk-cta { padding: 0.9rem 1.5rem; font-size: 0.85rem; }
  .bulk-item { grid-template-columns: 48px 1fr; gap: 0.75rem; padding: 0.6rem; }
  .bulk-item-thumb { width: 48px; height: 48px; }
}

/* --- Smart Add — UI "QuickConfirm" 1-clic --- */
.quickconfirm {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1.5rem;
  padding: 1.5rem !important;
  animation: cardFadeIn 0.4s ease-out;
}

@media (max-width: 640px) {
  .quickconfirm {
    grid-template-columns: 1fr;
    padding: 1rem !important;
  }
}

.quickconfirm-photo {
  background: var(--color-bg-soft);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
}

.quickconfirm-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quickconfirm-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.quickconfirm-cat {
  font-size: 0.78rem;
  color: var(--color-copper);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.quickconfirm-name {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  color: var(--color-cream);
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
}

.quickconfirm-producer {
  font-style: italic;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin: 0;
}

.quickconfirm-meta {
  font-size: 0.85rem;
  color: var(--color-text);
  opacity: 0.85;
  margin: 0;
}

.quickconfirm-dup {
  background: rgba(224, 182, 90, 0.1);
  border: 1px solid rgba(224, 182, 90, 0.4);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  margin-top: 0.5rem;
}
.quickconfirm-dup strong {
  color: #e8c98a;
  display: block;
  margin-bottom: 0.2rem;
}
.quickconfirm-dup p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.quickconfirm-form {
  margin-top: 0.6rem;
}

.qty-label {
  display: block;
  font-size: 0.75rem;
  color: var(--color-copper);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.qty-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  padding: 0.25rem;
  margin-bottom: 1.2rem;
}

.qty-btn {
  width: 40px;
  height: 40px;
  background: var(--color-bg-card);
  border: none;
  color: var(--color-copper);
  font-size: 1.4rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius);
  transition: all 0.2s ease;
}
.qty-btn:hover {
  background: var(--color-burgundy);
  color: var(--color-cream);
}

#qtyInput {
  width: 70px;
  text-align: center;
  background: transparent;
  border: none;
  color: var(--color-cream);
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  outline: none;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
#qtyInput::-webkit-outer-spin-button,
#qtyInput::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quickconfirm-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.quickconfirm-submit {
  flex: 1;
  min-width: 180px;
}

/* Bulk : style "doublon" pour les items déjà existants */
.bulk-item-dup {
  border-color: rgba(224, 182, 90, 0.45);
  background: linear-gradient(90deg, rgba(224, 182, 90, 0.05), var(--color-bg-card));
}
.bulk-status-dup {
  color: #e8c98a;
}

/* --- Cellarmate Branding v2 (logo BEAUCOUP plus grand + menu dropdown) --- */
.site-header {
  padding: 0.9rem 0;
}

.header-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand-cellarmate {
  display: inline-block;
  text-decoration: none;
  flex: 1;
  min-width: 0;
}

.logo-cellarmate {
  height: 64px !important;
  width: auto !important;
  max-width: none !important;
  min-width: 230px;
  display: block !important;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.brand-cellarmate:hover .logo-cellarmate {
  opacity: 0.92;
}

@media (max-width: 768px) {
  .header-inner { padding: 0 1rem; }
  .logo-cellarmate { height: 52px !important; min-width: 190px; }
}

@media (max-width: 420px) {
  .logo-cellarmate { height: 44px !important; min-width: 160px; }
}

/* --- Menu dropdown (roue crantée + dropdown) --- */
.header-menu-wrap {
  position: relative;
  flex-shrink: 0;
}

.menu-trigger {
  background: rgba(212, 161, 90, 0.08);
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-copper);
  transition: all 0.25s ease;
  padding: 0;
}

.menu-trigger svg {
  width: 22px;
  height: 22px;
}

.menu-trigger:hover {
  background: rgba(212, 161, 90, 0.18);
  border-color: var(--color-copper);
}

.menu-trigger[aria-expanded="true"] {
  background: var(--color-copper);
  color: var(--color-bg);
}

.menu-trigger svg {
  transition: transform 0.3s ease;
}
.menu-trigger[aria-expanded="true"] svg {
  transform: rotate(60deg);
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  min-width: 280px;
  padding: 0.5rem;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(212, 161, 90, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.2s;
  z-index: 100;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

.dropdown-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* User header dans dropdown */
.dropdown-user {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem;
  border-radius: var(--radius);
  margin-bottom: 0.3rem;
  background: linear-gradient(135deg, rgba(212, 161, 90, 0.08), transparent);
}

.dropdown-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-burgundy);
  color: var(--color-cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 500;
  flex-shrink: 0;
}

.dropdown-user-info {
  min-width: 0;
  flex: 1;
}

.dropdown-user-name {
  color: var(--color-cream);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-user-email {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.1rem;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius);
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.92rem;
  transition: background 0.2s ease, color 0.2s ease;
}

.dropdown-item:hover {
  background: rgba(212, 161, 90, 0.08);
  color: var(--color-cream);
}

.dropdown-item.active {
  background: rgba(212, 161, 90, 0.12);
  color: var(--color-copper);
}

.dropdown-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 1.05rem;
  flex-shrink: 0;
  color: var(--color-copper);
  opacity: 0.9;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.dropdown-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.dropdown-item:hover .dropdown-icon {
  opacity: 1;
  transform: scale(1.06);
}

.dropdown-item.active .dropdown-icon {
  color: var(--color-copper);
  opacity: 1;
}

.dropdown-item-logout {
  color: #d49b9b;
}
.dropdown-item-logout .dropdown-icon {
  color: #d49b9b;
}
.dropdown-item-logout:hover {
  background: rgba(200, 70, 70, 0.1);
  color: #f0c0c0;
}
.dropdown-item-logout:hover .dropdown-icon {
  color: #f0c0c0;
}

.dropdown-sep {
  height: 1px;
  background: var(--color-border);
  margin: 0.5rem 0.25rem;
}

.dropdown-section-label {
  padding: 0.5rem 0.85rem 0.25rem;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.dropdown-langs {
  display: flex;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem 0.5rem;
  flex-wrap: wrap;
}

.lang-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  transition: all 0.2s ease;
  flex: 1 1 calc(50% - 0.2rem);
  justify-content: center;
}

.lang-pill:hover {
  border-color: var(--color-copper);
  color: var(--color-cream);
}

.lang-pill-active {
  background: var(--color-copper);
  border-color: var(--color-copper);
  color: var(--color-bg) !important;
}

.lang-pill-flag {
  font-size: 1rem;
}

.lang-pill-code {
  font-variant-numeric: tabular-nums;
}

/* --- Page Mon compte --- */
.account-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

.account-page h1 {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  color: var(--color-cream);
  margin-bottom: 0.3rem;
  font-weight: 400;
}

.account-page .subtitle {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin-bottom: 2rem;
}

.account-section {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
}

.account-section h2 {
  font-family: var(--font-serif);
  color: var(--color-copper);
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
}

.account-hint {
  color: var(--color-text-muted);
  font-size: 0.88rem;
  margin-bottom: 1.25rem;
}

.account-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
}

.lang-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1rem 0.75rem;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  text-decoration: none;
  transition: all 0.25s ease;
}

.lang-card:hover {
  border-color: var(--color-copper);
  transform: translateY(-2px);
}

.lang-card-active {
  background: linear-gradient(135deg, rgba(212, 161, 90, 0.15), rgba(212, 161, 90, 0.05));
  border-color: var(--color-copper);
}

.lang-flag { font-size: 2rem; }
.lang-name { color: var(--color-cream); font-weight: 500; }
.lang-code { font-size: 0.72rem; color: var(--color-text-muted); letter-spacing: 0.15em; }

/* --- Login & Signup : intro text + sélecteur langue --- */
.login-intro,
.signup-intro {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 1.25rem 0 1.75rem;
  text-align: center;
  font-style: italic;
  padding: 0 0.5rem;
}

.signup-intro {
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}

.login-langs {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.login-lang-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  transition: all 0.2s ease;
}

.login-lang-pill:hover {
  border-color: var(--color-copper);
  color: var(--color-cream);
}

.login-lang-pill-active {
  background: var(--color-copper);
  border-color: var(--color-copper);
  color: var(--color-bg) !important;
}

/* Hero icon : grand C carré centré, plus wordmark Cellarmate en serif */
.hero-title-logo {
  margin: 0 auto 0.5rem auto;
  max-width: 200px;
  width: 35%;
  display: block;
  padding: 0;
}

@media (max-width: 540px) {
  .hero-title-logo { max-width: 140px; width: 40%; }
}

.hero-wordmark {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 400;
  color: #D4A15A;
  text-align: center;
  margin: 0 auto 1.5rem auto;
  letter-spacing: -0.01em;
  animation: fadeUp 0.7s ease-out 0.4s backwards;
}

/* Couleurs principales mises à jour pour matcher la brand */
:root {
  --color-brand-gold: #D4A15A;
  --color-brand-black: #0B0B0F;
}

/* --- Popup "Ajouter à l'écran d'accueil" (iOS PWA) --- */
.a2hs-prompt {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(212, 161, 90, 0.2);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 1rem;
  animation: slideUpA2HS 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  max-width: 480px;
  margin: 0 auto;
}

@keyframes slideUpA2HS {
  from { opacity: 0; transform: translateY(60px); }
  to   { opacity: 1; transform: translateY(0); }
}

.a2hs-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  flex-shrink: 0;
}

.a2hs-body {
  flex: 1;
  min-width: 0;
}

.a2hs-title {
  font-family: var(--font-serif);
  color: var(--color-cream);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 0.2rem;
}

.a2hs-text {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.a2hs-text strong {
  color: var(--color-copper);
  font-weight: 500;
}

.a2hs-close {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 1.4rem;
  padding: 0;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  transition: background 0.2s ease;
}

.a2hs-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-cream);
}

/* ====================================================================
   Scenic backgrounds — Modal détail bouteille
   ==================================================================== */

.modal-photo {
  position: relative;
  isolation: isolate;
}

/* Image SVG en arrière-plan (vignes, blé, etc.) générée en CSS via dataURIs */
.modal-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center;
  background-size: cover;
  filter: brightness(0.6) saturate(1.1);
  transition: opacity 0.6s ease;
}

/* Vignette dégradée + bordure douce au-dessus du scenic pour intégrer la photo */
.modal-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse at center,
    transparent 0%,
    transparent 40%,
    rgba(11, 11, 15, 0.45) 70%,
    rgba(11, 11, 15, 0.85) 100%);
  pointer-events: none;
}

/* La photo de la bouteille passe au-dessus, avec un effet de fondu sur les bords */
.modal-photo img {
  position: relative;
  z-index: 2;
  width: 90%;
  height: 90%;
  max-height: 90%;
  margin: auto;
  object-fit: contain;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at center, black 60%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 90% at center, black 60%, transparent 100%);
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.6));
  animation: bottleFloat 6s ease-in-out infinite;
}

@keyframes bottleFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Label scenic en bas du modal photo */
.modal-photo .scenic-label {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  z-index: 3;
  text-align: center;
  color: var(--color-cream);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
  opacity: 0.85;
  pointer-events: none;
}
.scenic-label strong {
  display: block;
  font-style: normal;
  font-size: 1.15rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.15rem;
}

/* ====================================================================
   Thèmes scenic — chaque région a son propre gradient + pattern
   Construits avec des gradients radiaux multicouches qui évoquent
   le terroir sans dépendre de fichiers externes.
   ==================================================================== */

/* BORDEAUX : vignobles dorés à l'automne, ciel pourpre */
.scenic-bordeaux::before {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 200, 130, 0.4), transparent 60%),
    radial-gradient(ellipse at 30% 100%, rgba(180, 50, 60, 0.35), transparent 70%),
    radial-gradient(ellipse at 70% 100%, rgba(120, 30, 40, 0.45), transparent 60%),
    linear-gradient(180deg, #4a2530 0%, #2a1818 50%, #1a0e12 100%);
}

/* BOURGOGNE : terre ocre, vieux clos, lumière dorée */
.scenic-bourgogne::before {
  background:
    radial-gradient(ellipse at 50% 25%, rgba(255, 215, 150, 0.5), transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(140, 70, 50, 0.5), transparent 60%),
    linear-gradient(180deg, #3a2820 0%, #2a1c18 60%, #1a1010 100%);
}

/* CHAMPAGNE : doré pale, bulles, lumière froide */
.scenic-champagne::before {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(245, 220, 160, 0.55), transparent 50%),
    radial-gradient(circle at 30% 50%, rgba(255, 255, 220, 0.25), transparent 30%),
    radial-gradient(circle at 70% 60%, rgba(255, 255, 220, 0.2), transparent 30%),
    linear-gradient(180deg, #3a3220 0%, #2a2418 60%, #181410 100%);
}

/* RHÔNE : coteaux abrupts, soleil cuivré */
.scenic-rhone::before {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 160, 80, 0.45), transparent 55%),
    radial-gradient(ellipse at 30% 100%, rgba(140, 60, 30, 0.55), transparent 60%),
    linear-gradient(180deg, #3e2818 0%, #2a1812 60%, #1a0e0a 100%);
}

/* LOIRE : verdure douce, châteaux */
.scenic-loire::before {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(220, 220, 180, 0.4), transparent 55%),
    radial-gradient(ellipse at 30% 100%, rgba(80, 100, 60, 0.5), transparent 60%),
    linear-gradient(180deg, #2a3028 0%, #1c2018 60%, #121610 100%);
}

/* ALSACE : verdure montagne + maisons à colombages */
.scenic-alsace::before {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 200, 100, 0.4), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(60, 90, 40, 0.55), transparent 60%),
    linear-gradient(180deg, #2c321e 0%, #1a2016 60%, #101610 100%);
}

/* PROVENCE : olive, lavande, soleil */
.scenic-provence::before {
  background:
    radial-gradient(ellipse at 50% 25%, rgba(220, 180, 240, 0.4), transparent 50%),
    radial-gradient(ellipse at 30% 100%, rgba(140, 130, 90, 0.5), transparent 60%),
    linear-gradient(180deg, #353028 0%, #25201a 60%, #181410 100%);
}

/* TOSCANE : terracotta, cyprès, lumière dorée italienne */
.scenic-toscane::before {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 180, 100, 0.55), transparent 55%),
    radial-gradient(ellipse at 30% 100%, rgba(170, 80, 50, 0.6), transparent 60%),
    radial-gradient(circle at 65% 75%, rgba(40, 60, 30, 0.6), transparent 25%),
    linear-gradient(180deg, #3c2818 0%, #2a1c12 60%, #1a100a 100%);
}

/* PIÉMONT : brume matinale sur les collines */
.scenic-piemont::before {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(230, 200, 180, 0.5), transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(100, 60, 50, 0.5), transparent 60%),
    linear-gradient(180deg, #322a26 0%, #221c18 60%, #141010 100%);
}

/* VÉNÉTIE : Verona, Valpolicella */
.scenic-venetie::before {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 200, 150, 0.4), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(150, 60, 60, 0.5), transparent 60%),
    linear-gradient(180deg, #3a2422 0%, #281818 60%, #160e10 100%);
}

/* RIOJA : terres ibériques rouges */
.scenic-rioja::before {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 170, 90, 0.5), transparent 55%),
    radial-gradient(ellipse at 30% 100%, rgba(170, 60, 50, 0.55), transparent 60%),
    linear-gradient(180deg, #3a1e18 0%, #281410 60%, #180a08 100%);
}

/* PORTO / DOURO : terrasses du Douro */
.scenic-porto::before {
  background:
    radial-gradient(ellipse at 50% 25%, rgba(230, 180, 120, 0.5), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(120, 50, 50, 0.55), transparent 60%),
    linear-gradient(180deg, #2e1c14 0%, #1e120e 60%, #100806 100%);
}

/* NAPA / CALIFORNIE */
.scenic-napa::before {
  background:
    radial-gradient(ellipse at 50% 25%, rgba(255, 210, 140, 0.55), transparent 55%),
    radial-gradient(ellipse at 30% 100%, rgba(130, 80, 50, 0.5), transparent 60%),
    linear-gradient(180deg, #322618 0%, #221a12 60%, #14100a 100%);
}

/* ARGENTINE / MENDOZA */
.scenic-argentine::before {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(220, 200, 170, 0.5), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(120, 80, 60, 0.5), transparent 60%),
    linear-gradient(180deg, #2c2a26 0%, #1c1a16 60%, #100e0c 100%);
}

/* SUISSE : vignes en terrasses, Lavaux */
.scenic-suisse::before {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(180, 200, 220, 0.4), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(80, 110, 100, 0.5), transparent 60%),
    linear-gradient(180deg, #2c2c2a 0%, #1c1e1e 60%, #101212 100%);
}

/* PORTUGAL */
.scenic-portugal::before {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(240, 180, 130, 0.45), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(110, 70, 60, 0.5), transparent 60%),
    linear-gradient(180deg, #322218 0%, #221610 60%, #140c08 100%);
}

/* ALLEMAGNE / MOSEL */
.scenic-allemagne::before {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(220, 200, 130, 0.45), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(80, 100, 60, 0.55), transparent 60%),
    linear-gradient(180deg, #2c2e1a 0%, #1c1e12 60%, #10100a 100%);
}

/* VIN DEFAULT : bordeaux discret */
.scenic-vin_default::before {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(212, 161, 90, 0.3), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(114, 47, 55, 0.4), transparent 60%),
    linear-gradient(180deg, #2a1816 0%, #1c1210 60%, #100808 100%);
}

/* BIÈRE : champ de blé doré, houblon */
.scenic-biere::before {
  background:
    radial-gradient(ellipse at 50% 25%, rgba(255, 220, 130, 0.6), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(180, 140, 60, 0.55), transparent 60%),
    radial-gradient(circle at 30% 60%, rgba(120, 160, 80, 0.3), transparent 30%),
    linear-gradient(180deg, #3a3018 0%, #281f10 60%, #181208 100%);
}

/* WHISKY : tourbières + chêne fumé */
.scenic-whisky::before {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(200, 140, 80, 0.55), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(80, 50, 30, 0.6), transparent 60%),
    linear-gradient(180deg, #2e2018 0%, #1c130e 60%, #100806 100%);
}

/* GIN : botaniques, baies, glace */
.scenic-gin::before {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(180, 220, 200, 0.5), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(60, 100, 80, 0.5), transparent 60%),
    linear-gradient(180deg, #1e2a26 0%, #141c18 60%, #0a100e 100%);
}

/* RHUM : canne à sucre tropicale */
.scenic-rhum::before {
  background:
    radial-gradient(ellipse at 50% 25%, rgba(255, 200, 100, 0.55), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(140, 80, 30, 0.6), transparent 60%),
    radial-gradient(circle at 30% 70%, rgba(110, 160, 80, 0.3), transparent 30%),
    linear-gradient(180deg, #322618 0%, #20180e 60%, #100c06 100%);
}

/* COGNAC : vieux chais français */
.scenic-cognac::before {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 180, 100, 0.55), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(120, 70, 30, 0.6), transparent 60%),
    linear-gradient(180deg, #2e1f12 0%, #1c130a 60%, #100806 100%);
}

/* TEQUILA : champs d'agave bleu */
.scenic-tequila::before {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 200, 100, 0.5), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(80, 120, 130, 0.55), transparent 60%),
    linear-gradient(180deg, #2a2c30 0%, #1c1e22 60%, #101214 100%);
}

/* VODKA : pureté glaciaire */
.scenic-vodka::before {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(200, 220, 240, 0.5), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(80, 100, 130, 0.4), transparent 60%),
    linear-gradient(180deg, #1e2630 0%, #141a22 60%, #0a1018 100%);
}

/* SPIRITUEUX DEFAULT : ambre boisé */
.scenic-spiritueux::before {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(200, 140, 60, 0.5), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(110, 60, 30, 0.55), transparent 60%),
    linear-gradient(180deg, #2c1e10 0%, #1c140a 60%, #100806 100%);
}

/* Pattern overlay subtil pour ajouter de la texture (lignes diagonales très discrètes) */
.modal-photo[class*="scenic-"] {
  background-image:
    repeating-linear-gradient(110deg,
      rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px,
      transparent 1px, transparent 80px);
}

/* --- Cat-chip variant icon-only (sans label texte) --- */
.cat-chip-iconly {
  padding: 0.55rem 0.85rem;
  min-width: 64px;
}

.cat-chip-iconly .cat-chip-icon {
  font-size: 1.3rem;
  margin-right: 0.3rem;
}

.cat-chip-iconly .cat-chip-count {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
}

/* --- Badge quantité TOUJOURS visible, gros et lisible --- */
.bottle-qty {
  position: absolute;
  bottom: 0.85rem;
  right: 0.85rem;
  background: linear-gradient(135deg, var(--color-burgundy), var(--color-burgundy-dark));
  color: var(--color-cream);
  padding: 0.5rem 0.95rem;
  min-width: 48px;
  text-align: center;
  border-radius: 999px;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0;
  z-index: 4;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(212, 161, 90, 0.45);
  border: 1px solid rgba(212, 161, 90, 0.5);
  line-height: 1;
}

@media (max-width: 768px) {
  .bottle-qty {
    font-size: 1.35rem;
    min-width: 44px;
    padding: 0.45rem 0.85rem;
  }
}

.bottle-qty-empty {
  background: rgba(80, 30, 30, 0.85);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  min-width: 0;
}

/* --- Repositionnement des badges pour éviter les chevauchements --- */
/* Cat icon badge passe SOUS le bouton supprimer (X), en haut à droite */
.bottle-photo .cat-icon-badge,
.bottle-card.scenic-card .bottle-photo .cat-icon-badge {
  top: 3.1rem;
  right: 0.85rem;
  width: 32px;
  height: 32px;
  font-size: 1rem;
}

/* Le badge style/couleur ("Blonde Belge", "rouge", "Whisky"...) descend en bas à gauche */
.bottle-photo .bottle-badge,
.bottle-card.scenic-card .bottle-photo .bottle-badge {
  top: auto !important;
  bottom: 0.85rem;
  left: 0.85rem;
  right: auto !important;
  max-width: calc(100% - 5.5rem); /* ne mange pas la qté à droite */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Garde-badge reste en haut à gauche, mais on limite sa largeur pour rester propre */
.bottle-card .garde-badge {
  max-width: calc(100% - 4rem); /* laisse la place au X et au cat-icon */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 768px) {
  .bottle-photo .cat-icon-badge,
  .bottle-card.scenic-card .bottle-photo .cat-icon-badge {
    top: 2.75rem;
    right: 0.6rem;
  }
  .bottle-photo .bottle-badge,
  .bottle-card.scenic-card .bottle-photo .bottle-badge {
    bottom: 0.7rem;
    left: 0.7rem;
    font-size: 0.7rem;
  }
}

/* --- Scenic backgrounds appliqués aux cartes de la cave --- */
.bottle-card.scenic-card {
  position: relative;
  overflow: hidden;
}

.bottle-card.scenic-card .bottle-photo {
  position: relative;
  isolation: isolate;
  background: transparent !important;
}

/* Le scenic theme s'applique en pseudo-element ::before de la photo */
.bottle-card.scenic-card .bottle-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center;
  background-size: cover;
  filter: brightness(0.55) saturate(1.05);
}

/* Vignette par-dessus pour intégrer */
.bottle-card.scenic-card .bottle-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse at center,
    transparent 0%,
    transparent 50%,
    rgba(11, 11, 15, 0.35) 80%,
    rgba(11, 11, 15, 0.75) 100%);
  pointer-events: none;
}

/* La photo en overlay avec mask pour effet "détouré" */
.bottle-card.scenic-card .bottle-photo img {
  position: relative;
  z-index: 2;
  width: 92%;
  height: 92%;
  margin: auto;
  object-fit: contain;
  -webkit-mask-image: radial-gradient(ellipse 65% 85% at center, black 55%, transparent 95%);
          mask-image: radial-gradient(ellipse 65% 85% at center, black 55%, transparent 95%);
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.7));
}

/* Placeholder SVG aussi z-index 2 */
.bottle-card.scenic-card .bottle-photo .bottle-photo-placeholder {
  position: relative;
  z-index: 2;
}

/* Badges (couleur, garde, qty, icon catégorie) restent visibles au-dessus */
.bottle-card.scenic-card .bottle-photo .garde-badge,
.bottle-card.scenic-card .bottle-photo .bottle-badge,
.bottle-card.scenic-card .bottle-photo .bottle-qty,
.bottle-card.scenic-card .bottle-photo .cat-icon-badge {
  z-index: 5;
}

/* Effet hover plus prononcé : moins de vignette, photo plus éclatante */
.bottle-card.scenic-card:hover .bottle-photo::after {
  background: radial-gradient(ellipse at center,
    transparent 0%,
    transparent 60%,
    rgba(11, 11, 15, 0.2) 90%,
    rgba(11, 11, 15, 0.5) 100%);
}

.bottle-card.scenic-card:hover .bottle-photo img {
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.8)) saturate(1.15) brightness(1.05);
}

/* Respecte les préférences d'animations réduites */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ====================================================================
   Bouton photo dans le header — assorti à la roue crantée
   Même couleur, même épaisseur de trait, même taille.
   ==================================================================== */

.header-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.header-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--color-border-strong);
  color: var(--color-copper);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

.header-icon-btn svg {
  width: 22px;
  height: 22px;
  display: block;
}

.header-icon-btn:hover,
.header-icon-btn:focus-visible {
  background: rgba(212, 161, 90, 0.08);
  border-color: var(--color-copper);
  transform: scale(1.04);
}

.header-icon-btn:active {
  transform: scale(0.97);
}

@media (max-width: 768px) {
  .header-actions { gap: 0.4rem; }
  .header-icon-btn {
    width: 40px;
    height: 40px;
  }
  .header-icon-btn svg {
    width: 20px;
    height: 20px;
  }
}

/* ====================================================================
   Barre d'actions Admin/Gestion + boutons d'export Excel/PDF
   ==================================================================== */

.admin-actions-bar {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
  align-items: center;
}

.admin-export-sep {
  display: inline-block;
  width: 1px;
  height: 28px;
  background: var(--color-border);
  margin: 0 0.25rem;
}

.btn-export {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.95rem;
  background: transparent;
  color: var(--color-cream);
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: all 0.18s ease;
  cursor: pointer;
}

.btn-export svg {
  width: 18px;
  height: 18px;
  color: var(--color-copper);
  transition: color 0.18s ease, transform 0.18s ease;
}

.btn-export:hover,
.btn-export:focus-visible {
  background: rgba(212, 161, 90, 0.08);
  border-color: var(--color-copper);
  color: var(--color-copper);
}

.btn-export:hover svg,
.btn-export:focus-visible svg {
  color: var(--color-copper);
  transform: scale(1.06);
}

@media (max-width: 768px) {
  .admin-export-sep { display: none; }
  .admin-actions-bar { gap: 0.5rem; }
  .btn-export {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
  }
}