/* ══════════════════════════════════════════════════════════════════════════
   Grafne — Design System
   Palette: #4D0011 · #6F4E37 · #F9F7F5 · #2C2926
   Typo: EB Garamond (titres) · Hanken Grotesk (corps)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Variables — thème clair ────────────────────────────────────────────── */
/* Naming rules (read before editing):
   --cv-bordeaux / --cv-gold       = accent COLORS (usable as text, border, gradient stop).
   --cv-on-bordeaux / --cv-on-gold = TEXT color guaranteed readable on top of the matching accent
                                     used as solid background. ALWAYS pair them.
   --cv-text / --cv-text2 / --cv-muted = text colors on neutral surface (--cv-surface*).
   --cv-dark / --cv-dark2          = dark neutral, mainly for legacy ".bg-dark" overrides.
   Rule of thumb: if you set "background: var(--cv-gold)", set "color: var(--cv-on-gold)".
                  Never reuse --cv-text or --cv-dark as text on a colored background. */
:root {
  --cv-bordeaux:    #7a0020;
  --cv-bordeaux2:   #9b1a36;
  --cv-bordeaux3:   #4D0011;
  --cv-on-bordeaux: #ffffff;
  --cv-gold:        #6F4E37;
  --cv-gold-light:  #9a7358;
  --cv-gold-dim:    rgba(111,78,55,.12);
  --cv-on-gold:     #ffffff;
  --cv-dark:        #2C2926;
  --cv-dark2:       #1a1715;
  --cv-on-dark:     #ffffff;
  --cv-surface:     #F7F4F0;
  --cv-surface2:    #ffffff;
  --cv-surface3:    #EDE7DF;
  --cv-border:      #D0C8BE;
  --cv-border2:     #B8AFA5;
  --cv-text:        #1e1b18;
  --cv-text2:       #3d332c;
  --cv-muted:       #7a6e66;
  --cv-muted2:      #a89e96;
  --cv-radius:     14px;
  --cv-radius-sm:  8px;
  --cv-radius-xs:  5px;
  --cv-shadow:     0 4px 16px rgba(44,41,38,.12), 0 1px 4px rgba(44,41,38,.08);
  --cv-shadow-md:  0 8px 32px rgba(44,41,38,.16), 0 2px 8px rgba(44,41,38,.10);
  --cv-shadow-lg:  0 20px 64px rgba(44,41,38,.22);
  --cv-ease:       cubic-bezier(.4,0,.2,1);
  --cv-t:          .22s var(--cv-ease);
}

/* ── Reset & base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--cv-surface);
  color: var(--cv-text);
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  min-height: 100vh;
  /* Sticky footer: the body is a vertical flex column, so the main
     .container-fluid gets a flex:1 and pushes .app-footer to the
     bottom of the viewport when content is short. */
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
body > .container-fluid { flex: 1 0 auto; }
.app-footer { flex-shrink: 0; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'EB Garamond', Georgia, serif;
  font-weight: 700;
  color: var(--cv-text);
  letter-spacing: .01em;
  line-height: 1.2;
}

a {
  color: var(--cv-bordeaux);
  text-decoration: none;
  transition: color var(--cv-t);
}
a:hover { color: var(--cv-bordeaux2); }

/* ── Navbar ─────────────────────────────────────────────────────────────── */
.navbar {
  background: #1a1210 !important;
  border-bottom: 2px solid var(--cv-bordeaux);
  /* iOS safe-area: extend the bordeaux band under the notch/status bar
     so the navbar visually starts at the very top in standalone PWA mode,
     while the actual content pads down by the inset to stay legible. */
  padding: calc(.55rem + env(safe-area-inset-top, 0px)) calc(1.5rem + env(safe-area-inset-right, 0px)) .55rem calc(1.5rem + env(safe-area-inset-left, 0px));
  box-shadow: 0 2px 20px rgba(0,0,0,.35);
}

.navbar-brand {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: #fff !important;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.navbar-brand .bi,
.navbar-brand .cv-wine-glass {
  color: rgba(255,255,255,.7) !important;
  font-size: 1.1em;
}

.navbar .nav-link {
  color: rgba(255,255,255,.55) !important;
  font-size: .83rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .4rem .8rem;
  border-radius: var(--cv-radius-xs);
  transition: color var(--cv-t), background var(--cv-t);
  position: relative;
}
.navbar .nav-link:hover {
  color: rgba(255,255,255,.9) !important;
  background: rgba(255,255,255,.07);
}
.navbar .nav-link.active {
  color: #fff !important;
  font-weight: 600;
  background: rgba(255,255,255,.10);
}
.navbar .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--cv-bordeaux);
}

.navbar-toggler {
  border-color: rgba(111,78,55,.35);
  padding: .3rem .5rem;
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(184,144,110,.85)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Nav search */
#nav-search-input {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  border-right: none;
  color: #fff;
  border-radius: var(--cv-radius-xs) 0 0 var(--cv-radius-xs);
  font-size: .85rem;
  transition: background var(--cv-t), border-color var(--cv-t);
}
#nav-search-input::placeholder { color: rgba(255,255,255,.35); }
#nav-search-input:focus {
  background: rgba(255,255,255,.11);
  border-color: rgba(111,78,55,.45);
  box-shadow: none;
  color: #fff;
}

.navbar .input-group-text {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.10) !important;
  border-left: none !important;
  color: rgba(255,255,255,.45) !important;
  border-radius: 0 var(--cv-radius-xs) var(--cv-radius-xs) 0 !important;
}

#nav-search-results {
  background: #fff;
  border: 1px solid var(--cv-border);
  border-radius: var(--cv-radius);
  box-shadow: var(--cv-shadow-md);
  overflow: hidden;
}
#nav-search-results .list-group-item {
  border-color: var(--cv-border);
  font-size: .91rem;
  padding: .65rem 1rem;
  color: var(--cv-text);
  transition: background var(--cv-t);
}
#nav-search-results .list-group-item:hover { background: var(--cv-surface2); }

/* Cave switcher badge */
.navbar .dropdown-toggle.text-warning {
  color: var(--cv-gold) !important;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */
.container-fluid {
  max-width: 1320px;
  padding: 2rem 1.75rem;
}
@media (max-width: 575px) {
  .container-fluid { padding: 1rem .85rem; }
}

/* ── Page title area ─────────────────────────────────────────────────────── */
.cv-page-header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.75rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--cv-border);
  position: relative;
}
.cv-page-header::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 2.5rem; height: 2px;
  background: linear-gradient(90deg, var(--cv-bordeaux), var(--cv-gold));
}
.cv-page-header h1,
.cv-page-header h2 {
  font-size: 1.9rem;
  margin: 0;
  font-weight: 700;
}
.cv-page-header .cv-sub {
  color: var(--cv-muted);
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 500;
}

/* ── Section titles ──────────────────────────────────────────────────────── */
.cv-section-title {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cv-text);
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.1rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--cv-border);
  position: relative;
}
.cv-section-title::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 2.5rem; height: 2px;
  background: linear-gradient(90deg, var(--cv-bordeaux), var(--cv-gold));
}
.cv-section-title .bi {
  color: var(--cv-bordeaux);
  font-size: 1.1em;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
  border: 1px solid var(--cv-border);
  border-radius: var(--cv-radius);
  box-shadow: var(--cv-shadow);
  background: #fff;
  overflow: visible;
  position: relative;
  transition: box-shadow var(--cv-t), transform var(--cv-t);
}

/* gold top line appears on hover */
.card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--cv-radius) var(--cv-radius) 0 0;
  background: linear-gradient(90deg, var(--cv-bordeaux), var(--cv-gold));
  opacity: 0;
  transition: opacity var(--cv-t);
  pointer-events: none;
  z-index: 2;
}
.card:hover {
  box-shadow: var(--cv-shadow-md);
  transform: translateY(-2px);
}
.card:hover::after { opacity: 1; }

/* Cards with overflow:hidden can't show the ::after radius trick cleanly */
.card.overflow-hidden { overflow: hidden; }

.card-header {
  background: var(--cv-surface2);
  border-bottom: 1px solid var(--cv-border);
  padding: .8rem 1.25rem;
  font-size: .83rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--cv-muted);
  font-family: 'Hanken Grotesk', sans-serif;
}
.card-header.bg-dark {
  background: var(--cv-dark2) !important;
  color: var(--cv-on-dark) !important;
  border-bottom-color: rgba(111,78,55,.2);
}
.card-header.bg-dark strong { color: var(--cv-on-dark); }

.card-body { padding: 1.35rem 1.25rem; }

.card-footer {
  background: var(--cv-surface2);
  border-top: 1px solid var(--cv-border);
  padding: .8rem 1.25rem;
}

/* ── Stat cards ──────────────────────────────────────────────────────────── */
.cv-stat-card {
  background: #fff;
  border: 1px solid var(--cv-border);
  border-radius: var(--cv-radius);
  box-shadow: var(--cv-shadow);
  padding: 1.4rem 1.5rem 1.2rem;
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--cv-t), transform var(--cv-t);
}
.cv-stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cv-bordeaux), var(--cv-gold));
}
.cv-stat-card:hover {
  box-shadow: var(--cv-shadow-md);
  transform: translateY(-2px);
}
.cv-stat-card .cv-stat-num {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--cv-text);
  line-height: 1;
  margin-bottom: .2rem;
}
.cv-stat-card .cv-stat-label {
  font-size: .77rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--cv-muted);
}
.cv-stat-card .cv-stat-icon {
  position: absolute;
  right: 1rem; bottom: .8rem;
  font-size: 2rem;
  /* Use a saturated bordeaux directly (not the theme variable, which
     becomes pale pink in dark mode) and a higher opacity so the icon
     reads at a glance instead of vanishing. */
  color: #9b1a36;
  opacity: .55;
}

/* Stat cards wrapped in <a> on the dashboard — strip default link styles
   so the card visual is identical whether or not it links somewhere, and
   propagate the cursor + accessible focus ring to the card. */
.cv-stat-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.cv-stat-link:hover,
.cv-stat-link:focus { text-decoration: none; color: inherit; }
.cv-stat-link:focus-visible .cv-stat-card {
  outline: 2px solid var(--cv-bordeaux);
  outline-offset: 2px;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  border-radius: var(--cv-radius-sm);
  font-weight: 500;
  font-size: .88rem;
  letter-spacing: .025em;
  transition: background var(--cv-t), border-color var(--cv-t),
              color var(--cv-t), box-shadow var(--cv-t), transform var(--cv-t);
}
.btn:active { transform: scale(.97); }

.btn-dark, .btn-dark:focus {
  background: var(--cv-dark2);
  border-color: var(--cv-dark2);
  color: var(--cv-on-dark);
}
.btn-dark:hover {
  background: var(--cv-bordeaux);
  border-color: var(--cv-bordeaux);
  box-shadow: 0 4px 18px rgba(77,0,17,.28);
  color: var(--cv-on-bordeaux);
}

.btn-primary, .btn-primary:focus {
  background: var(--cv-bordeaux);
  border-color: var(--cv-bordeaux);
  color: var(--cv-on-bordeaux);
}
.btn-primary:hover {
  background: var(--cv-bordeaux2);
  border-color: var(--cv-bordeaux2);
  box-shadow: 0 4px 18px rgba(77,0,17,.32);
  color: var(--cv-on-bordeaux);
}

.btn-outline-primary {
  color: var(--cv-bordeaux);
  border-color: var(--cv-bordeaux);
  background: transparent;
}
.btn-outline-primary:hover {
  background: var(--cv-bordeaux);
  border-color: var(--cv-bordeaux);
  box-shadow: 0 4px 18px rgba(77,0,17,.25);
  color: var(--cv-on-bordeaux);
}

.btn-secondary, .btn-secondary:focus {
  background: var(--cv-surface3);
  border-color: var(--cv-border2);
  color: var(--cv-text2);
}
.btn-secondary:hover {
  background: var(--cv-border);
  border-color: var(--cv-border2);
  color: var(--cv-text);
}

.btn-outline-secondary {
  color: var(--cv-muted);
  border-color: var(--cv-border);
  background: transparent;
}
.btn-outline-secondary:hover {
  background: var(--cv-surface2);
  border-color: var(--cv-border2);
  color: var(--cv-text);
}

.btn-warning, .btn-warning:focus {
  background: var(--cv-gold);
  border-color: var(--cv-gold);
  color: var(--cv-on-gold);
}
.btn-warning:hover {
  background: var(--cv-gold-light);
  border-color: var(--cv-gold-light);
  color: var(--cv-on-gold);
  box-shadow: 0 4px 18px rgba(111,78,55,.32);
}

.btn-outline-dark {
  color: var(--cv-dark);
  border-color: var(--cv-dark2);
}
.btn-outline-dark:hover {
  background: var(--cv-dark2);
  border-color: var(--cv-dark2);
  color: var(--cv-on-dark);
  box-shadow: 0 4px 18px rgba(28,28,30,.22);
}

.btn-outline-danger:hover {
  box-shadow: 0 4px 18px rgba(77,0,17,.2);
}

.btn-share-wa {
  background: transparent;
  border: 1px solid var(--cv-border2);
  color: var(--cv-text2);
}
.btn-share-wa .bi-whatsapp { color: #25D366; }
.btn-share-wa:hover {
  background: var(--cv-surface3);
  border-color: var(--cv-border2);
  color: var(--cv-text);
}

.btn-link {
  color: var(--cv-bordeaux);
}
.btn-link:hover { color: var(--cv-bordeaux2); }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form-control,
.form-select {
  border: 1px solid var(--cv-border);
  border-radius: var(--cv-radius-sm);
  font-size: .925rem;
  color: var(--cv-text);
  background: #fff;
  padding: .5rem .85rem;
  transition: border-color var(--cv-t), box-shadow var(--cv-t);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--cv-gold);
  box-shadow: 0 0 0 3px rgba(111,78,55,.18);
  outline: none;
  background: #fff;
}
.form-control::placeholder { color: var(--cv-muted2); }

.form-control-sm, .form-select-sm {
  font-size: .87rem;
  padding: .35rem .7rem;
}

.form-label {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cv-muted);
  margin-bottom: .3rem;
  font-family: 'Hanken Grotesk', sans-serif;
}

.input-group-text {
  background: var(--cv-surface2);
  border-color: var(--cv-border);
  color: var(--cv-muted);
  font-size: .925rem;
}

.form-check-input:checked {
  background-color: var(--cv-bordeaux);
  border-color: var(--cv-bordeaux);
}
.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(77,0,17,.15);
}

/* Checkboxes in dark thead */
.table thead .form-check-input {
  border-color: rgba(255,255,255,.5);
  background-color: transparent;
}
.table thead .form-check-input:checked {
  background-color: var(--cv-gold);
  border-color: var(--cv-gold);
}

/* ── Tables ──────────────────────────────────────────────────────────────── */
.table {
  color: var(--cv-text);
  font-size: .925rem;
}

.table thead th {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cv-muted);
  border-bottom: 2px solid var(--cv-border);
  padding: .65rem .8rem;
  background: var(--cv-surface2);
  white-space: nowrap;
}
.table thead tr:first-child th:first-child {
  border-radius: var(--cv-radius-sm) 0 0 0;
}
.table thead tr:first-child th:last-child {
  border-radius: 0 var(--cv-radius-sm) 0 0;
}

.table tbody td {
  padding: .65rem .8rem;
  border-color: var(--cv-border);
  vertical-align: middle;
}

.table-hover tbody tr {
  transition: background var(--cv-t);
}
.table-hover tbody tr:hover {
  background: rgba(111,78,55,.07);
}

.table-striped tbody tr:nth-of-type(odd) {
  background: rgba(243,237,229,.4);
}

/* bordered table variant */
.table-bordered td,
.table-bordered th {
  border-color: var(--cv-border);
}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge {
  border-radius: 20px;
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .04em;
  padding: .3em .75em;
}
.badge.bg-dark { background: var(--cv-dark2) !important; }

/* ── Alerts ──────────────────────────────────────────────────────────────── */
.alert {
  border: none;
  border-left: 3px solid;
  border-radius: var(--cv-radius-sm);
  font-size: .925rem;
  padding: .75rem 1rem;
}
.alert-success {
  background: #f0faf1;
  border-left-color: #2e7d32;
  color: #1b5e20;
}
.alert-danger {
  background: #fdf2f2;
  border-left-color: var(--cv-bordeaux);
  color: var(--cv-bordeaux3);
}
.alert-info {
  background: #f2f4fb;
  border-left-color: #3f51b5;
  color: #283593;
}
.alert-warning {
  background: #fffbee;
  border-left-color: var(--cv-gold);
  color: #6b4c00;
}

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.nav-tabs {
  border-bottom: 1px solid var(--cv-border);
  gap: .2rem;
  background: var(--cv-surface2);
  padding: .5rem .75rem 0;
}
.nav-tabs .nav-link {
  border: none;
  border-radius: var(--cv-radius-sm) var(--cv-radius-sm) 0 0;
  font-size: .81rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cv-muted);
  padding: .45rem .9rem;
  margin-bottom: -1px;
  transition: color var(--cv-t), background var(--cv-t);
}
.nav-tabs .nav-link:hover {
  color: var(--cv-text);
  background: rgba(0,0,0,.03);
}
.nav-tabs .nav-link.active {
  color: var(--cv-bordeaux);
  background: #fff;
  border-bottom: 2px solid var(--cv-bordeaux);
  font-weight: 700;
}

/* ── List group ──────────────────────────────────────────────────────────── */
.list-group-item {
  border-color: var(--cv-border);
  padding: .75rem 1.1rem;
  font-size: .925rem;
  transition: background var(--cv-t);
}
.list-group-item:hover { background: var(--cv-surface); }

/* ── Accordion ───────────────────────────────────────────────────────────── */
.accordion-item {
  border: 1px solid var(--cv-border);
  border-radius: var(--cv-radius) !important;
  margin-bottom: .5rem;
  overflow: hidden;
  transition: box-shadow var(--cv-t);
}
.accordion-item:hover { box-shadow: var(--cv-shadow); }

.accordion-button {
  font-weight: 600;
  font-size: .9rem;
  background: var(--cv-surface2);
  color: var(--cv-text);
  border-radius: 0 !important;
  transition: background var(--cv-t), color var(--cv-t);
}
.accordion-button:not(.collapsed) {
  background: var(--cv-surface2);
  color: var(--cv-bordeaux);
  box-shadow: none;
  border-bottom: 1px solid var(--cv-border);
}
.accordion-button:focus { box-shadow: none; }
.accordion-button::after {
  filter: sepia(1) hue-rotate(310deg) saturate(.55);
}
.accordion-button:not(.collapsed)::after {
  filter: sepia(1) hue-rotate(310deg) saturate(.7);
}

/* ── Dropdown ────────────────────────────────────────────────────────────── */
.dropdown-menu {
  border: 1px solid var(--cv-border);
  border-radius: var(--cv-radius);
  box-shadow: var(--cv-shadow-md);
  font-size: .925rem;
  padding: .3rem;
}
.dropdown-item {
  border-radius: var(--cv-radius-xs);
  padding: .45rem .85rem;
  color: var(--cv-text);
  transition: background var(--cv-t), color var(--cv-t);
}
.dropdown-item:hover { background: var(--cv-surface2); color: var(--cv-text); }
.dropdown-item.active,
.dropdown-item:active {
  background: var(--cv-bordeaux);
  color: var(--cv-on-bordeaux);
}
.dropdown-divider { border-color: var(--cv-border); }

/* ── Modals ──────────────────────────────────────────────────────────────── */
.modal-content {
  border: 1px solid var(--cv-border);
  border-radius: var(--cv-radius);
  box-shadow: var(--cv-shadow-lg);
}
.modal-header {
  background: var(--cv-surface2);
  border-bottom-color: var(--cv-border);
  padding: 1rem 1.25rem;
}
.modal-header .modal-title {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
}
.modal-footer {
  background: var(--cv-surface2);
  border-top-color: var(--cv-border);
}

/* ── Login page ──────────────────────────────────────────────────────────── */
body.login-page {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(14,10,8,.92) 65%, #0e0e0f 100%),
    url('https://images.unsplash.com/photo-1510812431401-41d2bd2722f3?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat fixed;
}
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

/* Bouton primaire login — bordeaux fixe (indépendant du thème), lisible sur la carte sombre */
.login-card .btn-login {
  background: #6b1a1a;
  border: none;
  color: #fff;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .85rem;
  transition: background .2s, box-shadow .2s, transform .15s;
}
.login-card .btn-login:hover,
.login-card .btn-login:focus {
  background: #8b2222;
  color: #fff;
  box-shadow: 0 6px 18px rgba(107,26,26,.4);
  transform: translateY(-1px);
}
.login-card .btn-login:active { transform: translateY(0); }

/* Lien "Créer un compte" lisible sur fond sombre */
.login-card .login-register-link { color: #d9a8c5; font-weight: 600; text-decoration: none; }
.login-card .login-register-link:hover { color: #f1c4dc; text-decoration: underline; }

/* Input lisible sur la carte sombre du login */
.login-card .form-control {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.18);
  color: #f0ebe4;
}
.login-card .form-control::placeholder { color: rgba(240,235,228,.45); }
.login-card .form-control:focus {
  background: rgba(255,255,255,.06);
  border-color: #c4516a;
  box-shadow: 0 0 0 3px rgba(196,81,106,.18);
  color: #f0ebe4;
}
.login-card .form-label { color: rgba(240,235,228,.85); font-weight: 600; letter-spacing: .04em; }
.login-card hr { border-color: rgba(255,255,255,.12); }
.login-card .text-muted { color: rgba(240,235,228,.55) !important; }
.login-card {
  background: rgba(30,27,24,.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 20px;
  box-shadow: 0 32px 80px rgba(0,0,0,.5);
  padding: 2.5rem 2.25rem;
  width: 100%;
  max-width: 420px;
  position: relative;
  color: #f0ebe4;
}
.login-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cv-bordeaux), var(--cv-gold));
  border-radius: 20px 20px 0 0;
}
.login-logo {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: #e06080;
  text-align: center;
  letter-spacing: .04em;
  margin-bottom: .2rem;
}
.login-logo .bi,
.login-logo .cv-wine-glass { color: #c9a84c; margin-right: .3rem; }
.login-subtitle {
  text-align: center;
  color: rgba(240,235,228,.5);
  font-size: .83rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

/* OTP input */
#code {
  font-size: 2rem;
  letter-spacing: .5em;
  font-weight: 700;
  text-align: center;
  background: var(--cv-surface);
  border: 2px solid var(--cv-border);
}
#code:focus {
  border-color: var(--cv-bordeaux);
  box-shadow: 0 0 0 3px rgba(77,0,17,.12);
}

/* ── Cave grid ───────────────────────────────────────────────────────────── */
.cave-grid-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}
#cave-grid {
  display: inline-grid;
  touch-action: none;
  gap: 2px;
}
.cave-cell {
  width: 38px;
  height: 38px;
  border: 1px solid var(--cv-border);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  transition: opacity .1s, transform .08s;
  user-select: none;
}
.cave-cell:hover { opacity: .78; transform: scale(.93); }

/* ── FAB scan button ─────────────────────────────────────────────────────── */
#fab-scan {
  position: fixed;
  /* iOS safe-area: keep the FAB above the home indicator and clear of
     the right notch in landscape. */
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  right:  calc(1.5rem + env(safe-area-inset-right,  0px));
  z-index: 1040;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cv-bordeaux);
  border-color: var(--cv-bordeaux);
  box-shadow: 0 6px 24px rgba(77,0,17,.38);
  transition: transform var(--cv-t), box-shadow var(--cv-t);
}
#fab-scan:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 32px rgba(77,0,17,.45);
}
@media (min-width: 768px) { #fab-scan { display: none !important; } }

/* ── QR scanner ──────────────────────────────────────────────────────────── */
#qr-preview {
  width: 100%;
  max-width: 320px;
  border-radius: var(--cv-radius);
}

/* ── Photo thumbs ────────────────────────────────────────────────────────── */
.photo-thumb-wrap img {
  border-radius: var(--cv-radius-sm);
  transition: transform var(--cv-t), box-shadow var(--cv-t);
}
.photo-thumb-wrap img:hover {
  transform: scale(1.05);
  box-shadow: var(--cv-shadow-md);
}

/* ── Qty buttons ─────────────────────────────────────────────────────────── */
.btn-qty {
  border-radius: 50% !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  line-height: 1 !important;
  border: 1px solid var(--cv-border) !important;
  background: #fff !important;
  color: var(--cv-text) !important;
  font-size: .9rem !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--cv-t), border-color var(--cv-t), color var(--cv-t);
}
.btn-qty:hover {
  /* Bump opacity from --cv-gold-dim (rgba .12, too faint) to .22 so the
     hover state actually reads against a white card background while
     keeping the bordeaux text legible. */
  background: rgba(111,78,55,.22) !important;
  border-color: var(--cv-gold) !important;
  color: var(--cv-bordeaux) !important;
}

/* ── Wine type dots ──────────────────────────────────────────────────────── */
.type-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
  flex-shrink: 0;
}
.type-dot-lg { width: 12px; height: 12px; margin-right: .5rem; }

/* ── Wine glass icon ─────────────────────────────────────────────────────── */
.cv-wine-glass {
  display: inline-block;
  width: 1em; height: 1em;
  vertical-align: -.125em;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 0h10l-1.5 6a4 4 0 0 1-3 2.83V12h2.5v1.5h-6V12H7.5V8.83A4 4 0 0 1 4.5 6L3 0zm1.2 1L5.6 6a2.5 2.5 0 0 0 4.8 0L11.8 1H4.2z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 0h10l-1.5 6a4 4 0 0 1-3 2.83V12h2.5v1.5h-6V12H7.5V8.83A4 4 0 0 1 4.5 6L3 0zm1.2 1L5.6 6a2.5 2.5 0 0 0 4.8 0L11.8 1H4.2z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;   mask-size: 100% 100%;
}

/* ── Divider ─────────────────────────────────────────────────────────────── */
hr {
  border-color: var(--cv-border);
  opacity: 1;
  margin: 1.25rem 0;
}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--cv-border2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--cv-muted); }

/* ── Responsive utilities ────────────────────────────────────────────────── */
/* The full wine table is reserved for screens >= 992px (iPad portrait/
   landscape fall back to cards — see pages/wines.php).
   The wine-col-* hide classes used to drop individual columns on
   intermediate widths; kept as no-ops in case a future variant needs them. */
#wine-table { table-layout: auto; width: 100%; }
#wine-table td, #wine-table th {
  /* overflow-wrap:anywhere only breaks long unbroken strings as a last
     resort, instead of cutting in the middle of normal words like
     "Gewurztraminer". */
  overflow-wrap: anywhere;
  word-break: normal;
}

/* ── PWA safe area ───────────────────────────────────────────────────────── */
@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top); }
}

/* Transitions globales pour les changements d'état (hover, focus, active) */
body, .card, .card-header, .card-body, .card-footer,
.table, .table thead th, .table tbody td, .table tbody tr,
.form-control, .form-select, .input-group-text,
.nav-tabs, .nav-tabs .nav-link,
.accordion-button, .accordion-body, .accordion-item,
.dropdown-menu, .dropdown-item,
.modal-content, .modal-header, .modal-footer,
.list-group-item, .alert, .badge {
  transition: background-color var(--cv-t), border-color var(--cv-t), color var(--cv-t), box-shadow var(--cv-t);
}

/* Dropdown submenu (language picker) */
.dropdown-submenu { position: relative; }
.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -4px;
  margin-left: 0;
}
@media (max-width: 991px) {
  .dropdown-submenu > .dropdown-menu {
    position: static;
    left: auto;
    top: auto;
    margin: 0 0 0 1rem;
    box-shadow: none;
    border: none;
  }
}

/* Country locator mini-map (Wikimedia Commons SVG, CC BY-SA) */
.country-locator {
  margin: 0;
  padding: .5rem;
  background: #f5f3ef;
  border: 1px solid #e7e3d8;
  border-radius: .375rem;
  max-width: 240px;
}
.country-locator img,
.country-locator-svg svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 180px;
  object-fit: contain;
}
.country-locator figcaption {
  margin-top: .25rem;
  text-align: center;
  font-size: .75rem;
  line-height: 1.2;
}

/* Footer present on every logged-in page (legal links convention) */
.app-footer {
  margin-top: 3rem;
  /* iOS safe-area: pad the bottom by the home-indicator inset so the
     legal links stay above iOS's gesture bar in standalone PWA mode. */
  padding: 1.25rem calc(1rem + env(safe-area-inset-right, 0px)) calc(1.25rem + env(safe-area-inset-bottom, 0px)) calc(1rem + env(safe-area-inset-left, 0px));
  border-top: 1px solid var(--cv-border);
  line-height: 1.8;
}
.app-footer a {
  color: var(--cv-muted);
  text-decoration: none;
}
.app-footer a:hover { color: var(--cv-bordeaux); }

/* Legal pages have their own self-contained landing-style theme — see
   templates/legal_header.php. Nothing for them in grafne.css. */

/* ── Cave designer toolbar (Vide / Mur / Étagère) ─────────────────────
   Identical look in light and dark themes. Three buttons share the
   same neutral style; the active one stands out with the bordeaux
   accent so it's unmistakable in both modes. */
.cave-tool-btn {
  background: var(--cv-surface);
  border: 1px solid var(--cv-border);
  color: var(--cv-text);
  transition: background .15s, color .15s, border-color .15s;
}
.cave-tool-btn:hover {
  background: var(--cv-surface3);
  border-color: var(--cv-border2);
  color: var(--cv-text);
}
.cave-tool-btn.active,
.cave-tool-btn.active:hover,
.cave-tool-btn.active:focus {
  background: var(--cv-bordeaux);
  border-color: var(--cv-bordeaux);
  color: var(--cv-on-bordeaux);
  box-shadow: 0 1px 4px rgba(77,0,17,.2);
}
/* ── App tabs (Settings, Références) ─────────────────────────────────
   Bootstrap nav-tabs go horizontal by default. Only collapse to a
   vertical pill list on phones (< 576px). iPad mini portrait (~768px)
   keeps the horizontal row, which feels closer to a desktop product. */
@media (max-width: 575px) {
  .app-tabs {
    flex-direction: column;
    border-bottom: none;
    gap: .25rem;
  }
  .app-tabs .nav-link {
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-radius-sm);
    margin: 0;
    padding: .55rem .85rem;
    text-align: left;
    background: var(--cv-surface2);
  }
  .app-tabs .nav-link.active {
    background: var(--cv-bordeaux);
    border-color: var(--cv-bordeaux);
    color: var(--cv-on-bordeaux);
  }
  .app-tabs .nav-link.active:hover { color: var(--cv-on-bordeaux); }
}

/* ── Floating dismissible toast ──────────────────────────────────────
   Reusable info banner that slides in from the top, can be closed
   with × and auto-hides after a delay. The dismissal is remembered
   in localStorage by the JS in the page (data-store-key). */
.grafne-toast {
  position: fixed;
  /* Sit just below the dark navbar (≈60px). On scroll the toast stays
     pinned, so it's always reachable even on long pages. */
  top: 76px;
  left: 50%;
  transform: translate(-50%, -14px);
  opacity: 0;
  pointer-events: none;
  max-width: min(92vw, 640px);
  z-index: 1080;
  /* Wine-white palette: cream background, gold accent stripe. Matches
     the Grafne identity better than the previous indigo. */
  background: #fbf6e9;
  border: 1px solid #ead9a6;
  border-left: 4px solid var(--cv-gold);
  color: #4a3a1c;
  padding: .7rem 2.5rem .7rem 1rem;
  border-radius: var(--cv-radius-sm);
  box-shadow: var(--cv-shadow-md);
  transition: transform .25s var(--cv-ease), opacity .25s var(--cv-ease);
  font-size: .9rem;
  line-height: 1.4;
}
.grafne-toast.is-open {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.grafne-toast-body { display: flex; align-items: flex-start; gap: .25rem; }
.grafne-toast-close {
  position: absolute;
  top: .35rem;
  right: .4rem;
  background: transparent;
  border: none;
  color: inherit;
  opacity: .6;
  padding: .25rem .45rem;
  border-radius: var(--cv-radius-xs);
  cursor: pointer;
  font-size: .85rem;
}
.grafne-toast-close:hover { opacity: 1; background: rgba(0,0,0,.06); }
@media (max-width: 575px) {
  .grafne-toast {
    top: 64px;
    max-width: calc(100vw - 1rem);
    font-size: .85rem;
  }
}

/* ── CSV import preview ─────────────────────────────────────────────────── */
.wines-import-table-scroll { max-height: 320px; overflow-y: auto; }
.wines-import-table-scroll th.col-line  { width: 60px; }
.wines-import-table-scroll th.col-state { width: 80px; }

/* ── CSV import mapping (Phase 5b) ──────────────────────────────────────
   Drag-connect UI between CSV source columns (left) and Grafne canonical
   fields (right), with an SVG canvas in the middle for the lines.
   Mobile (<768px) shows a blocking message instead — drag UX doesn't work
   well on small touch screens and the import is rarely done from a phone.
*/

.csv-mapping-mobile-block { display: none; }
@media (max-width: 767.98px) {
  .csv-mapping-mobile-block { display: block; }
  .csv-mapping-desktop      { display: none; }
}

.csv-mapping-grid {
  position: relative;
  display: grid;
  /* Each side has a generous minimum (260px) so canonical names like
     "Classification" or "Producteur" never get truncated. Both sides
     grow equally beyond that. Middle 120px gives the SVG lines a clear
     track. minmax() is what saves us from the "min-content collapses
     to 30px" behaviour the browser does by default in a grid cell. */
  grid-template-columns: minmax(260px, 1fr) 120px minmax(260px, 1fr);
  gap: .75rem;
  min-height: 400px;
}

.csv-mapping-col {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
/* Pin each column to its grid track. The middle column hosts the
   absolutely-positioned SVG; without explicit grid-column the target
   column would slide into the middle 120px track and shrink. */
.csv-mapping-col-source { grid-column: 1; }
.csv-mapping-col-target { grid-column: 3; }
.csv-mapping-svg        { grid-column: 1 / -1; grid-row: 1; }
.csv-mapping-col-title {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cv-muted);
  margin-bottom: .15rem;
  padding: 0 .25rem;
}
.csv-mapping-col-hint {
  font-size: .72rem;
  color: var(--cv-muted2);
  margin-bottom: .6rem;
  padding: 0 .25rem;
  font-style: italic;
}

.csv-mapping-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .75rem;
  background: var(--cv-surface2);
  border: 1px solid var(--cv-border);
  border-radius: var(--cv-radius-sm);
  transition: border-color var(--cv-t), background var(--cv-t);
  /* Force a real usable width even if the grid cell tries to shrink. */
  min-width: 240px;
}
.csv-mapping-item:hover { border-color: var(--cv-border2); }
.csv-mapping-item[data-side="source"],
.csv-mapping-item[data-side="target"] { justify-content: space-between; }

/* Sink for explicitly-ignored CSV columns. Subtler styling — it's a
   "trash" destination, not a real field. */
.csv-mapping-item-ignore {
  background: transparent;
  border-style: dashed;
  color: var(--cv-muted);
  margin-top: .25rem;
}

.csv-mapping-label {
  min-width: 0;   /* critical: lets ellipsis kick in inside a flex child */
  flex: 1;
  overflow: hidden;
}
.csv-mapping-name {
  font-size: .9rem;
  font-weight: 600;
  color: var(--cv-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Break only between words, never mid-syllable like "Ap/pell/lat/ion". */
  word-break: keep-all;
  overflow-wrap: normal;
}
.csv-mapping-sample {
  font-size: .72rem;
  color: var(--cv-muted2);
  font-style: italic;
  margin-top: .15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.csv-mapping-canonical {
  font-size: .68rem;
  color: var(--cv-muted2);
  background: transparent;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  word-break: keep-all;
}

/* Connection point: clickable disc. Three visual states:
   default = empty bordeaux ring · hover = filled bordeaux · linked = filled gold */
.csv-mapping-point {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cv-surface);
  border: 2px solid var(--cv-bordeaux);
  cursor: grab;
  transition: background var(--cv-t), transform var(--cv-t);
}
.csv-mapping-point:hover {
  background: var(--cv-bordeaux);
  transform: scale(1.15);
}
.csv-mapping-item.is-linked .csv-mapping-point {
  background: var(--cv-gold);
  border-color: var(--cv-gold);
}
.csv-mapping-point[data-dragging="true"] { cursor: grabbing; }

/* SVG canvas — positioned absolutely so its coordinate system matches
   the grid container. The JS draws paths and one floating "drag" line. */
.csv-mapping-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.csv-mapping-svg .csv-mapping-link {
  stroke: var(--cv-gold);
  stroke-width: 2;
  fill: none;
  opacity: .8;
}
.csv-mapping-svg .csv-mapping-link-drag {
  stroke: var(--cv-bordeaux);
  stroke-width: 2;
  stroke-dasharray: 6 4;
  fill: none;
  opacity: .9;
}