/* /assets/app.css */
/* =========================================================
   G’WINE — Theme CSS (sobre / épuré / classe)
   - Compatible Bootstrap 5
   - Conserve toutes les classes existantes
   - Fix images “taille réelle” (bottles.php + bottle.php)
========================================================= */

/* =========================
   Base globale
========================= */
html, body{
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body{
  background:#f3f4f6;
  color:#111827;
}

/* Bootstrap rounded cohérent */
.rounded-4{ border-radius:1.2rem !important; }
.card{ border-radius:1.2rem !important; }

/* Sécurité : une image ne doit jamais déborder */
img{ max-width:100%; height:auto; }

/* =========================
   Variables / charte G’WINE
   (bordeaux / or / bleu)
========================= */
:root{
  --radius: 20px;

  /* Brand */
  --wine:   #6d1a31;   /* bordeaux logo */
  --wine2:  #8b2742;   /* bordeaux + clair */
  --gold:   #cfab5b;   /* or feuille/raisins */
  --blue:   #1d77c6;   /* liseré bleu */

  /* Dark theme */
  --bg-a: #0d0f14;
  --bg-b: #0b0d12;
  --bg-c: #07080b;

  /* Glass */
  --glass: rgba(255,255,255,.06);
  --glass2: rgba(255,255,255,.08);
  --glass-border: rgba(255,255,255,.10);

  /* Text (dark theme) */
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --muted2: rgba(255,255,255,.60);

  /* Shadow */
  --shadow-1: 0 16px 45px rgba(0,0,0,.35);
  --shadow-2: 0 28px 80px rgba(0,0,0,.48);
}

/* =========================
   Fond global “app”
========================= */
body.gwine-bg{
  background:
    radial-gradient(900px 520px at 14% -10%, rgba(109,26,49,.42), transparent 60%),
    radial-gradient(900px 520px at 90% 0%, rgba(207,171,91,.16), transparent 58%),
    radial-gradient(700px 420px at 70% 18%, rgba(29,119,198,.10), transparent 60%),
    linear-gradient(180deg, var(--bg-a) 0%, var(--bg-b) 42%, var(--bg-c) 100%);
  color: var(--text);
}

/* =========================
   Containers / Spacing
========================= */
.page-wrap{ padding: 22px 0 60px; }
.page-wrap-lg{ padding: 26px 0 60px; }

/* =========================
   UI blocks: Hero / Glass
========================= */
.hero{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-2);
}
.hero::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(680px 360px at 20% 20%, rgba(109,26,49,.42), transparent 62%),
    radial-gradient(640px 340px at 78% 35%, rgba(207,171,91,.18), transparent 58%),
    radial-gradient(520px 300px at 55% 0%, rgba(29,119,198,.10), transparent 60%);
  filter: blur(2px);
  opacity: .95;
  pointer-events:none;
}
.hero-inner{
  position:relative;
  padding: 26px 22px;
  color: var(--text);
}

.glass{
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  color: var(--text);
}

/* =========================
   Typo (hero)
========================= */
.hero-title{
  color:#fff;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.06;
  font-size: clamp(26px, 3.2vw, 42px);
  margin: 0 0 8px;
}
.hero-sub{
  color: rgba(255,255,255,.78);
  font-size: 15px;
  margin: 0;
  max-width: 62ch;
}
.section-title{
  color:#fff;
  font-weight: 800;
  letter-spacing:-.01em;
  margin: 0 0 10px;
}

/* “chip” */
.chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.86);
  font-size: 13px;
  font-weight: 800;
}

/* =========================
   Buttons / Inputs (sobre + brand)
========================= */
.btn-neo{
  border-radius: 14px;
  font-weight: 900;
  padding: 11px 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: #fff;
  transition: transform .08s ease, background .2s ease, border-color .2s ease;
}
.btn-neo:hover{
  background: rgba(255,255,255,.12);
  transform: translateY(-1px);
  color:#fff;
}

/* CTA principal = bordeaux */
.btn-neo.primary{
  background: linear-gradient(135deg, rgba(109,26,49,.96), rgba(139,39,66,.94));
  border-color: rgba(255,255,255,.20);
}
/* CTA secondaire = or */
.btn-neo.green{
  background: linear-gradient(135deg, rgba(207,171,91,.90), rgba(176,134,66,.92));
  border-color: rgba(255,255,255,.18);
  color: #1a1410;
}
.btn-neo.green:hover{ color:#1a1410; }

/* danger */
.btn-neo.danger{
  background: linear-gradient(135deg, rgba(239,68,68,.92), rgba(244,63,94,.88));
  border-color: rgba(255,255,255,.22);
}

/* petits boutons icône */
.btn-icon{
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color:#fff;
  font-weight: 900;
}
.btn-icon:hover{ background: rgba(255,255,255,.12); color:#fff; }

/* Inputs */
.input-dark,
.gwine-form .form-control,
.gwine-form textarea.form-control,
.gwine-form .form-select{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color:#fff !important;
  border-radius: 16px !important;
  padding: 12px 14px !important;
}
.gwine-form .form-control::placeholder,
.input-dark::placeholder{ color: rgba(255,255,255,.55); }

.gwine-form .form-control:focus,
.gwine-form textarea.form-control:focus,
.gwine-form .form-select:focus,
.input-dark:focus{
  box-shadow: 0 0 0 .2rem rgba(109,26,49,.22) !important;
  border-color: rgba(207,171,91,.40) !important;
  background: rgba(255,255,255,.10) !important;
}

.form-text{ color: var(--muted2) !important; }
.muted{ color: var(--muted) !important; }
.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  letter-spacing: .01em;
}

/* =========================
   Pills / Status
========================= */
.status-pill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 900;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.90);
  white-space: nowrap;
}

/* =========================
   KPI cards (index + bottle)
========================= */
.kpi{
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 14px;
  height: 100%;
  box-shadow: 0 16px 45px rgba(0,0,0,.30);
  color: var(--text);
}
.kpi .label{ color: rgba(255,255,255,.75); font-size: 12.5px; }
.kpi .value{ color:#fff; font-weight: 900; font-size: 22px; letter-spacing:-.01em; }
.kpi .sub{ color: rgba(255,255,255,.70); font-size: 12.5px; }
.kpi .mini{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.86);
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 800;
  font-size: 12px;
  white-space: nowrap;
}

/* =========================
   Bottom nav helper
========================= */
body.has-bottom-nav{ padding-bottom: 100px; }
@media (min-width: 992px){
  body.has-bottom-nav{ padding-bottom: 0; }
}

/* iOS safe areas */
.safe-top{ padding-top: env(safe-area-inset-top); }

/* Utilities */
.fade-in{ animation: f .25s ease-out both; }
@keyframes f{ from{opacity:0; transform: translateY(6px);} to{opacity:1; transform:none;} }

.spin{
  width:18px; height:18px;
  border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff;
  border-radius:50%;
  display:inline-block;
  animation: s .8s linear infinite;
}
@keyframes s{ to{ transform: rotate(360deg); } }

/* =========================
   Top navbar (glass) + Offcanvas
========================= */
.nav-glass{
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255,255,255,.06) !important;
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding-top: env(safe-area-inset-top);
}

.nav-glass .navbar-brand span{
  color:#fff;
  font-weight: 900;
  letter-spacing: -.02em;
}

.brand-logo{
  height: 38px;
  width: auto;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  padding: 4px;
}

.nav-glass .nav-link{
  color: rgba(255,255,255,.82) !important;
  font-weight: 800;
  border-radius: 999px;
  padding: 8px 12px;
  transition: background .2s ease, transform .08s ease;
  white-space: nowrap;
}
.nav-glass .nav-link:hover{
  background: rgba(255,255,255,.10);
  transform: translateY(-1px);
  color:#fff !important;
}
.nav-glass .nav-link.active{
  background: rgba(255,255,255,.12);
  color:#fff !important;
  border: 1px solid rgba(255,255,255,.14);
}

.nav-glass .navbar-toggler{ border-color: rgba(255,255,255,.18); }
.nav-glass .navbar-toggler-icon{ filter: brightness(1.2); }

.nav-pill-danger{
  color: rgba(255,255,255,.92) !important;
  background: rgba(239,68,68,.16);
  border: 1px solid rgba(239,68,68,.22);
}
.nav-pill-danger:hover{ background: rgba(239,68,68,.24) !important; }

/* Offcanvas */
.offcanvas-glass{
  background: rgba(10,12,16,.92);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-left: 1px solid rgba(255,255,255,.10);
  color:#fff;
}

@media (max-width: 991.98px){
  .offcanvas.offcanvas-end{ width: min(86vw, 360px); }
  .top-main-links{ display:none !important; }
}

.offcanvas-glass .offcanvas-header{
  padding-top: calc(env(safe-area-inset-top) + 10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.offcanvas-glass .offcanvas-title{ font-weight: 900; letter-spacing: -.02em; }
.offcanvas-glass .btn-close{ filter: invert(1); opacity: .9; }

/* Menu mobile */
.mobile-menu-list{
  display:flex;
  flex-direction:column;
  gap: 10px;
  padding: 14px;
}
.mobile-menu-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  text-decoration:none;
  color:#fff !important;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
}
.mobile-menu-item .left{ font-weight: 900; letter-spacing: -.01em; }
.mobile-menu-item .right{ color: rgba(255,255,255,.55); font-weight: 800; font-size: 13px; }
.mobile-menu-item:hover{ background: rgba(255,255,255,.08); }
.mobile-menu-item.danger{ background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.18); }
.mobile-menu-item.danger .right{ color: rgba(255,255,255,.70); }

/* =========================
   Bottom nav (mobile)
========================= */
.bottom-nav{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding-top: 12px;
  padding-bottom: calc(env(safe-area-inset-bottom) + 10px);
  height: 86px;
  background: linear-gradient(180deg, rgba(20,22,28,.65), rgba(10,12,16,.96));
  backdrop-filter: blur(28px);
  display: flex;
  border-top: 1px solid rgba(255,255,255,.06);
  z-index: 9999;
}
.bottom-nav a{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 11px;
  letter-spacing: .2px;
  color: rgba(255,255,255,.55);
  text-decoration: none;
}
.bottom-nav a i{
  font-size: 19px;
  margin-bottom: 2px;
  transition: .18s;
}
.bottom-nav a.active{ color:#fff; }
.bottom-nav a.active i{ transform: translateY(-2px); }

/* Bouton “scan” = touche bleue discrète (logo) */
.bottom-nav a.scan{ color: rgba(29,119,198,.95); }
.bottom-nav a.scan i{ font-size:22px; }

.bottom-nav a:active{ background: rgba(255,255,255,.03); }

@media (min-width: 992px){
  .bottom-nav{ display:none; }
}

/* =========================
   Badges / couleurs vin
========================= */
.bg-pink{ background:#f3b4c4 !important; color:#111 !important; }

/* =========================
   HR soft
========================= */
.hr-soft{
  border:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  margin: 16px 0;
}

/* =========================================================
   BOTTLE (bottle.php) — SCOPE STRICT
========================================================= */
body.page-bottle .pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.90);
  white-space: nowrap;
}
body.page-bottle .pill-green{ background: rgba(207,171,91,.14); border-color: rgba(207,171,91,.32); }
body.page-bottle .pill-red{ background: rgba(239,68,68,.16); border-color: rgba(239,68,68,.34); }
body.page-bottle .pill-gray{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }

/* ✅ Image fiche bouteille : jamais en “taille réelle” */
body.page-bottle img.thumb,
body.page-bottle .thumb{
  width: 132px !important;
  height: 176px !important;
  object-fit: cover !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  display:block !important;
}
@media (max-width: 576px){
  body.page-bottle img.thumb,
  body.page-bottle .thumb{
    width: 108px !important;
    height: 148px !important;
  }
}

/* =========================================================
   BOTTLES (bottles.php) — SCOPE STRICT
========================================================= */

/* Cards mobile */
body.page-bottles .card-bottle{
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  box-shadow: var(--shadow-1);
  color: #fff;
  transition: transform .08s ease, box-shadow .08s ease;
}
body.page-bottles .card-bottle:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}

/* ✅ Miniatures liste (desktop table) */
body.page-bottles img.thumb,
body.page-bottles .thumb{
  width: 46px !important;
  height: 62px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  display:block !important;
}

/* ✅ Miniatures liste (mobile cards) */
body.page-bottles img.thumb-lg,
body.page-bottles .thumb-lg{
  width: 86px !important;
  height: 118px !important;
  object-fit: cover !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  display:block !important;
}

/* Mobile : la colonne image ne s’étend jamais + empêche les “photos géantes” */
@media (max-width: 991.98px){
  body.page-bottles .card-bottle .flex-shrink-0{
    width: 86px !important;
    flex: 0 0 86px !important;
  }
  body.page-bottles .card-bottle .fw-semibold{ line-height: 1.15; }
  body.page-bottles .card-bottle .badge{
    border-radius: 999px;
    padding: 6px 10px;
    font-weight: 900;
    white-space: nowrap;
  }
}

/* Table desktop */
body.page-bottles .table-darkish{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-1);
}

body.page-bottles .gwine-table .table{
  --bs-table-bg: transparent;
  --bs-table-color: rgba(255,255,255,.92);
  --bs-table-hover-bg: rgba(255,255,255,.05);
  margin: 0;
}

body.page-bottles .gwine-table thead{
  background: rgba(255,255,255,.08);
  color:#fff;
  position: sticky;
  top: 0;
  z-index: 2;
}
body.page-bottles .gwine-table thead th{
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .02em;
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  white-space: nowrap;
}
body.page-bottles .gwine-table tbody td{
  padding: 14px 14px;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  vertical-align: middle;
}
body.page-bottles .gwine-table tbody tr:hover td{
  background: rgba(255,255,255,.04);
}

/* Ellipsis */
body.page-bottles .td-ellipsis{
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 1199.98px){
  body.page-bottles .td-ellipsis{ max-width: 200px; }
}

/* Colonnes courtes */
body.page-bottles .gwine-table td:nth-child(6),
body.page-bottles .gwine-table td:nth-child(7),
body.page-bottles .gwine-table td:nth-child(8){
  white-space: nowrap;
}

/* btn compact */
body.page-bottles .gwine-table .btn.btn-neo.btn-sm{
  padding: 8px 12px;
  border-radius: 12px;
  font-weight: 900;
}

/* =========================
   Wine cards (index)
========================= */
.card-wine{
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  overflow: hidden;
  height: 100%;
  box-shadow: var(--shadow-1);
}
.card-wine img{
  width:100%;
  height: 185px;
  object-fit: cover;
  background: rgba(255,255,255,.04);
}
.card-wine .meta{
  color: rgba(255,255,255,.78);
  font-size: 12.5px;
}

.badge-soft{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.85);
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  padding: 6px 10px;
  white-space: nowrap;
}

/* Skeleton loader */
.skeleton{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.06),
    rgba(255,255,255,.10),
    rgba(255,255,255,.06)
  );
  background-size: 200% 100%;
  animation: shimmer 1.15s infinite linear;
}
@keyframes shimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}

/* Modals */
.gwine-modal{
  background: rgba(10,12,16,.94);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  color: #fff;
  border-radius: 18px;
}
.gwine-modal .modal-header,
.gwine-modal .modal-footer{
  border-color: rgba(255,255,255,.10);
}
.gwine-modal .btn-close{
  filter: invert(1);
  opacity: .9;
}

/* =========================
   Scanner (scan_gemini.php)
========================= */
.pick-zone{
  border: 1px dashed rgba(255,255,255,.22);
  background: rgba(255,255,255,.05);
  border-radius: 18px;
  padding: 14px;
}
.file-pill{
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255,255,255,.90);
  font-weight: 800;
}
.preview-box{
  width: 110px;
  height: 150px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
}
.preview-box img{ width:100%; height:100%; object-fit: cover; }
@media (max-width: 576px){
  .preview-box{ width: 95px; height: 130px; }
}
.pretty{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 16px;
  color: rgba(255,255,255,.92);
}
.pretty .k{ color: rgba(255,255,255,.70); font-size: 12.5px; }
.pretty .v{ color:#fff; font-weight: 900; }

/* =========================
   Assistant (assistant.php)
========================= */
.kbd-hint{
  color: rgba(255,255,255,.70);
  font-size: 12.5px;
}
.kbd-pill{
  border: 1px solid rgba(255,255,255,.18);
  padding: .15rem .45rem;
  border-radius: .55rem;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  font-weight: 800;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
#prompt{ min-height: 140px; }