/* =====================
   VARIABLES GLOBALES
===================== */
:root {
  --color-primary: #3A3F54;
  --gap: 16px;
  --card-bg: #f7f7f7;
}

/* =====================
   RESET & TYPO
===================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Nunito', sans-serif;
  background-color: #f7f7f7;
  color: #333;
  line-height: 1.5;
}
a {
  text-decoration: none;
  color: inherit;
}
ul { list-style: none; }

/* =====================
   HEADER FIXE + NAV
===================== */
header.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: #3A3F54;
  display: flex;
  align-items: center;
  justify-content: space-between; /* espace entre nav-left et user-area */
  padding: 0 16px;
  height: 60px;
  z-index: 1000;
}

/* Logo (image + texte) */
header.header .logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
header.header .logo img {
  height: 40px;
  width: auto;
  margin-right: 12px;
}

/* Nav collée juste à droite du logo et élastique */
header.header nav {
  margin-left: 16px;
  margin-right: flex;    /* c’est lui qui “pousse” la zone utilisateur */
}
header.header nav ul {
  display: flex;
  gap: 16px;
}
header.header nav ul li a {
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background 0.2s;
}
header.header nav ul li a:hover,
header.header nav ul li a.active {
  background: rgba(255,255,255,0.2);
}

/* Zone utilisateur toujours tout à droite */
header.header .user-area {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Limiter la taille de l’avatar à 40×40 */
header.header .user-area img {
  width: 40px;
  height: 40px;
  object-fit: cover; /* pour garder le recadrage carré */
}
/* … le reste de ta CSS pour .user-area reste inchangé … */

/* Bouton Déconnexion visible dans le header */
header.header .btn-logout {
  background: #fff;
  color: #3A3F54;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 600;
  line-height: 1;
  border: none;
}
header.header .btn-logout:hover {
  opacity: .9;
}

/* Bouton hamburger — masqué par défaut (desktop) */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  cursor: pointer;
  border-radius: 6px;
  box-sizing: border-box;
}
.nav-burger span {
  display: block;
  height: 3px;
  width: 100%;
  background: #fff;
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.nav-burger:hover { background: rgba(255,255,255,0.12); }

/* Badge "messages non lus" sur le lien Mon compte */
header.header nav .nav-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #ff6b6b;
  color: #fff;
  border-radius: 9px;
  font-size: 0.72rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
@media (max-width: 768px) {
  /* En menu vertical, on colle le badge juste après le texte */
  header.header nav .nav-badge { position: static; margin-left: 8px; }
}

/* =====================
   RÉSPONSIVE HEADER (menu hamburger)
===================== */
@media (max-width: 768px) {
  header.header {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    min-height: 60px;
    height: auto;
    padding: 8px 12px;
  }
  header.header .logo { order: 1; }
  .nav-burger { display: flex; order: 2; }

  /* Nav et zone utilisateur : repliés par défaut, dépliés au clic */
  header.header nav {
    order: 3;
    width: 100%;
    margin: 0;
    display: none;
  }
  header.header .user-area {
    order: 4;
    width: 100%;
    justify-content: flex-start;
    margin: 0;
    display: none;
    padding: 8px 0 4px;
    border-top: 1px solid rgba(255,255,255,0.12);
  }
  #nav-toggle:checked ~ nav { display: block; }
  #nav-toggle:checked ~ .user-area { display: flex; }

  /* Menu vertical pleine largeur */
  header.header nav ul {
    flex-direction: column;
    gap: 2px;
    padding: 8px 0;
  }
  header.header nav ul li { width: 100%; }
  header.header nav ul li a {
    display: block;
    width: 100%;
    padding: 12px 10px;
    border-radius: 6px;
    font-size: 1rem;
  }

  /* Animation du burger en croix quand ouvert */
  #nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  #nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
  #nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}


/* =====================
   CONTENEUR PRINCIPAL
===================== */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--header-offset, 100px) 24px 24px; /* espace sous header dynamique */
}

/* Conteneur imbriqué : les pages utilisent <main class="site-main container">
   À L'INTÉRIEUR du <div class="container"> du header → sans ce reset, le padding
   (offset header + 24px latéraux) serait appliqué DEUX fois, d'où les grosses
   marges « imposées ». On neutralise le conteneur interne. */
.container .container {
  max-width: none;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}


/* ===== Global responsive helpers ===== */
img { max-width:100%; height:auto; }

@media (max-width: 768px) {
  .container { padding-left: 12px; padding-right: 12px; }
  /* Les grilles de statistiques admin (inline repeat(4,1fr)/repeat(3,1fr))
     passent à 2 colonnes sur mobile pour rester lisibles. */
  .container [style*="grid-template-columns: repeat(4, 1fr)"],
  .container [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Tout tableau large devient défilable horizontalement sans casser la page */
  .card table, table { max-width: 100%; }

  /* Modales : marges latérales et hauteur adaptée sur petit écran */
  .modal__dialog { margin: 4vh 12px; max-width: none; }
  .modal__body { max-height: 70vh; }
}

/* Wine cards: ensure overlay and clicks work */
.wine-card__img { position: relative; }
.wine-card__color-dot { position:absolute; top:6px; right:6px; z-index:1; width:14px; height:14px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.12); }
.wine-card__flags { position:absolute; top:6px; left:6px; right:auto; display:flex; gap:8px; align-items:center; z-index:2; pointer-events:auto; }
.wine-card__flags--inline { position: static; margin-bottom: 4px; }
.flag { cursor:pointer; user-select:none; font-size:0; color:#9ca3af; text-shadow:0 1px 0 rgba(255,255,255,.6); display:inline-block; width:24px; height:24px; line-height:24px; position:relative; z-index:2; }
.flag.icon-heart::before { content:'\2665'; font-size:18px; }
.flag.icon-star::before { content:'\2605'; font-size:18px; }
.flag.icon-heart.active { color:#dc2626; }
.flag.icon-star.active { color:#f59e0b; }
/* Cart flag (uses emoji char inside span for broader support) */
.flag.icon-cart { font-size:18px; }
.flag.icon-cart::before { content:'\1F6D2'; font-size:18px; }
.flag.icon-cart.added { color:#16a34a; }

/* Dashboard charts generic sizing */
.card.chart { overflow:hidden; }
.card.chart canvas { max-width:100%; width:100% !important; display:block; }
.chart-box { position:relative; height:320px; }
@media (max-width:1024px){ .chart-box { height:280px; } }
@media (max-width:768px){ .chart-box { height:260px; } }
@media (max-width:480px){ .chart-box { height:220px; } }
.chart-split { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:1024px){ .chart-split { grid-template-columns:1fr; } }

/* Filters toolbar (Mes Vins) */
form.toolbar.filter-bar { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:flex-end; margin-bottom:16px; }
form.toolbar.filter-bar .filter-group { flex:0 1 160px; min-width:0; margin:0; display:flex; flex-direction:column; }
form.toolbar.filter-bar .filter-group label { margin:0 0 4px 0; font-size:0.9rem; }
form.toolbar.filter-bar .filter-group--actions { flex:0 0 auto; margin-left:auto; }
form.toolbar.filter-bar .filter-group--actions .btn--small { align-self:center; margin-top:4px; }

/* Bouton bascule + bloc des filtres avancés */
form.toolbar.filter-bar .filter-group--toggle { flex:0 0 auto; justify-content:flex-end; }
form.toolbar.filter-bar .filter-adv-toggle { white-space:nowrap; }
form.toolbar.filter-bar .filter-adv-caret { display:inline-block; margin-left:2px; }
form.toolbar.filter-bar .filter-advanced {
  flex:1 1 100%;
  display:none;            /* masqué par défaut */
  flex-wrap:wrap;
  gap:8px 12px;
  align-items:flex-end;
  margin-top:4px;
  padding-top:10px;
  border-top:1px dashed #d9d9d9;
}
form.toolbar.filter-bar.show-advanced .filter-advanced { display:flex; }
.form__input--small { width:100%; max-width:none; }
.filter-bar input[type='text'], .filter-bar input[type='number'], .filter-bar select { width:100%; }
@media (max-width:768px){
  form.toolbar.filter-bar { flex-direction:column; align-items:stretch; gap:10px; }
  /* En colonne, flex-basis s'applique à la HAUTEUR : on repasse en auto
     pour que chaque filtre fasse la hauteur de son contenu (sinon ~160px
     de haut chacun → grands espaces verticaux). */
  form.toolbar.filter-bar .filter-group,
  form.toolbar.filter-bar .filter-group--toggle,
  form.toolbar.filter-bar .filter-group--actions { width:100%; margin-left:0; flex:0 0 auto; }
  form.toolbar.filter-bar .filter-advanced { flex-direction:column; gap:10px; }
}

/* Wine actions buttons wrap nicely */
.wine-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; justify-content: space-between; }
.wine-actions .btn { flex: 1 1 0; min-width: 140px; }
@media (max-width:768px){ .wine-actions { justify-content:stretch; } .wine-actions .btn { flex:1 1 calc(50% - 10px); } }
@media (max-width:480px){ .wine-actions .btn { flex:1 1 100%; } }

/* Tables scroll on small screens */
.card table { width:100%; border-collapse:collapse; }
@media (max-width:768px){ .card table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; } }
/* =====================
   DASHBOARD
===================== */
.dash-header {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 16px;
}
.dash-header .dash-banner {
  width: 100%; height: 200px;
  object-fit: cover;
}
.dash-header h1 {
  position: absolute;
  bottom: 16px; left: 24px;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
  font-size: 1.75rem;
}
/* grille 1 colonnes */

.card.phases a.phase-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  padding: 12px;
}
.card.phases a.phase-link {
  display: flex;
  flex: 1;
  text-align: center;
  color: inherit;
  text-decoration: none;
}
.card.phases a.phase-link div {
  flex: 1;
}
.card.phases a.phase-link:hover {
  background: rgba(58,63,84,0.1);
}

/* grille 3 colonnes */
.cols {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
}
@media(max-width: 1024px) { .cols { grid-template-columns: 1fr 1fr; } }
@media(max-width: 480px) { .cols { grid-template-columns: 1fr; } }

/* carte générique */
.card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  padding: 16px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Vignettes vins */
.wine-card__img { position: relative; }
.wine-card__color-dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.12);
}

.color-dot-inline {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.12);
}

/* ====== Wine view ====== */
.wine-view { gap: 18px; }
.wine-hero { display: grid; grid-template-columns: 320px 1fr; gap: 20px; align-items: start; }
.wine-image { position: relative; background:#f4f4f4; border-radius: 8px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.wine-image img { max-width: 100%; height: auto; display:block; }
.wine-color-dot { position:absolute; top:8px; right:8px; width:14px; height:14px; border-radius:50%; border:2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.wine-head { display:flex; flex-direction:column; gap:10px; }
.wine-title { font-size: 1.6rem; line-height:1.2; }
.wine-sub { color:#666; }
.wine-badges { display:flex; gap:8px; flex-wrap:wrap; }
.pill { display:inline-flex; align-items:center; gap:6px; background:#eef2f7; color:#334155; border-radius:999px; padding:4px 10px; font-size:.85rem; }
.pill-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.stat-strip { display:flex; gap:16px; margin-top:8px; flex-wrap:wrap; }
.stat { background:#fafafa; border:1px solid #eee; border-radius:8px; padding:10px 12px; min-width:110px; text-align:center; }
.stat-label { color:#666; font-size:.8rem; }
.stat-value { font-size:1.3rem; font-weight:700; }

.wine-details { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.card.subtle { background:#fcfcfc; border:1px solid #eee; }
.kv { display:grid; grid-template-columns: 160px 1fr; row-gap:6px; column-gap:12px; align-items:start; }
.kv dt { color:#555; font-weight:600; }
.kv dd { margin:0; }

.stock-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; align-items:center; }
.stock-big { font-size:1.8rem; font-weight:800; }
.stack { display:flex; gap:8px; align-items:center; margin:6px 0; }

@media(max-width: 1024px){
  .wine-hero { grid-template-columns: 1fr; }
  .wine-details { grid-template-columns: 1fr; }
  .stock-grid { grid-template-columns: 1fr; }
}

/* ====== Bookmarks ====== */
.bookmark-list { list-style: none; padding:0; margin:0; }
.bookmark-list li { display:flex; gap:12px; align-items:flex-start; justify-content:space-between; padding:12px; border:1px solid #eee; border-radius:8px; background:#fcfcfc; margin-bottom:8px; }
.bookmark-list a { color:#1f2937; font-weight:600; }
.bookmark-list small { color:#4b5563; display:block; margin-top:4px; }
.bookmark-list em { color:#6b7280; font-size:.85rem; }
.bookmark-list form { margin-left:12px; }

/* ====== Profile ====== */
.profile-hero { display:flex; gap:16px; align-items:center; margin-bottom:12px; }
.profile-hero .avatar { width:96px; height:96px; border-radius:50%; object-fit:cover; border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.1); background:#f3f4f6; }
.profile-hero .ph-text { display:flex; flex-direction:column; }
.profile-hero .ph-title { font-size:1.4rem; font-weight:700; }
.profile-hero .ph-sub { color:#6b7280; }

/* résumé global */
.summary {
  justify-content: space-between;
}
.summary h2 {
  font-size: 2rem; line-height: 1;
}
.summary p {
  color: #555;
}
.summary a {
  color: #3A3F54;
  font-size: .9rem;
  margin-top: auto;
}

/* barre de recherche */
.search form {
  display: flex;
}
.search input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
}
.search button {
  padding: 0 12px;
  border: 1px solid #ddd;
  border-left: none;
  background: #fff;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

/* actions rapides */
.actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.btn {
  flex: 1;
  text-align: center;
  padding: 6px 0; /* hauteur réduite */
  border-radius: 6px;
  font-size: .95rem;
  transition: opacity .2s;
}
.btn.primary {
  background: #3A3F54; color: #fff; border: none;
}
.btn.secondary {
  background: #fff; color: #3A3F54;
  border: 1px solid #3A3F54;
}
.btn:hover { opacity: .8; }

/* grille 2×2 phases */
.phases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.phases div {
  text-align: center;
  padding: 12px 0;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.phases strong {
  display: block; font-size: 1.5rem; margin-bottom: 4px;
}

/* graphiques */

/* =====================
   Admin users table
===================== */
.user-table td.user-actions { white-space: nowrap; }
.user-table .btn { flex: 0 0 auto; padding: 4px 10px; }
.user-table .btn.btn--small { font-size: 0.9rem; }

/* Make admin users table adaptive without forcing horizontal scroll */
.table-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.user-table { width: 100%; border-collapse: collapse; table-layout: auto; }
.user-table th, .user-table td { padding: 8px 10px; vertical-align: middle; }
/* Ne pas casser les mots en colonnes pour éviter l’empilement vertical */
.user-table th, .user-table td { white-space: nowrap; word-break: normal; overflow-wrap: normal; }
/* E-mail: ellipsis si trop long */
.user-table th:nth-child(3), .user-table td:nth-child(3) { max-width: 360px; overflow: hidden; text-overflow: ellipsis; }
/* Garder les actions compactes sur une ligne */
.user-table td.user-actions { white-space: nowrap; }

@media (max-width: 1024px) {
  .user-table th, .user-table td { padding: 6px 8px; }
  .user-table .btn.btn--small { font-size: 0.85rem; padding: 4px 8px; }
}

/* =====================
   Form create wine layout
===================== */
.form-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 16px; }
@media (max-width: 1024px){ .form-grid { grid-template-columns: 1fr; } }
/* Ensure inputs stretch inside grid */
.form-grid .form__group { min-width: 0; }
/* Place actions on full row, aligned right */
.form-grid .form__actions { grid-column: 1 / -1; display:flex; justify-content:flex-end; align-items:center; }

/* Accordion sections (collapsed by default via <details>) */
.form-section {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  margin-bottom: 12px;
  overflow: hidden;
}
.form-section__header {
  cursor: pointer;
  list-style: none;
  padding: 12px 16px;
  font-weight: 700;
  color: var(--color-primary);
  background: var(--card-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.form-section__header::-webkit-details-marker { display: none; }
.form-section__header::after {
  content: "+";
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1;
  margin-left: 8px;
}
.form-section[open] > .form-section__header::after { content: "\2212"; }
.form-section__header:hover { background: #eef0f4; }
.form-section__body { padding: 16px; }

/* =====================
   Bookmarks list styling
===================== */
.bookmark-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.bookmark-list .bookmark-item { display:flex; flex-direction:column; gap:6px; padding:10px 12px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; }
.bookmark-list .bm-title { font-weight:700; color:#111827; text-decoration:none; }
.bookmark-list .bm-title:hover { text-decoration:underline; }
.bookmark-list .bm-desc { color:#4b5563; }
.bookmark-list .bm-meta { display:flex; justify-content:space-between; align-items:center; gap:10px; color:#6b7280; }
.bookmark-list .bm-actions .btn { flex:0 0 auto; }
@media (max-width: 768px){ .bookmark-list .bm-meta { flex-direction:column; align-items:flex-start; gap:6px; } }

/* =====================
   Cart (shopping list)
===================== */
.cart-card h2 { margin-bottom: .5rem; }
.cart-empty { color:#6b7280; }
.checklist { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.checklist li { display:flex; align-items:center; justify-content:space-between; gap:10px; background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:10px 12px; }
.checklist .label { display:flex; align-items:center; gap:10px; color:#111827; text-decoration:none; }
.checklist .label input[type="checkbox"] { transform: translateY(1px); }
.checklist .remove { background:none; border:none; color:#b91c1c; cursor:pointer; padding:4px 8px; border-radius:6px; }
.checklist .remove:hover { background:#fee2e2; }

/* Cart table */
.cart-table { width:100%; border-collapse: collapse; }
.cart-table th, .cart-table td { padding:8px 10px; border-bottom:1px solid #e5e7eb; vertical-align: middle; }
.cart-table thead th { background:#f9fafb; text-align:left; }
.cart-table .btn { padding:4px 10px; }


/* =====================
   MODAL (overlay CGU)
===================== */
.modal[hidden] { display: none !important; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
}
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
}
.modal__dialog {
  position: relative;
  max-width: 720px;
  margin: 6vh auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal__header { display:flex; align-items:center; justify-content:space-between; padding: 12px 16px; border-bottom: 1px solid #eee; }
.modal__body { padding: 16px; max-height: 60vh; overflow: auto; }
.modal__footer { display:flex; gap:8px; justify-content:flex-end; padding: 12px 16px; border-top: 1px solid #eee; }
.modal__close { background: transparent; border: none; font-size: 24px; line-height: 1; cursor: pointer; color: #333; }

/* =====================
   Public Header (login/register)
===================== */
.site-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 0 4px;
}
.site-header .logo img {
  width: 256px;
  height: 256px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.chart { display: flex; flex-direction: column; }
.chart h3 { margin-bottom: 8px; }
.chart canvas { flex: 1; height: 200px !important; }

/* historique */
.history ul {
  list-style: disc inside;
  font-size: .95rem;
}

/* info boxes */
.info p {
  color: #555;
  font-size: .95rem;
}

/* dashboard: liste "a boire avant" */
.apogee-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .95rem;
}
.apogee-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid #eee;
}
.apogee-list li:last-child { border-bottom: none; }
.apogee-list .apogee-year {
  color: #999;
  font-size: .85rem;
  white-space: nowrap;
}

/* =====================
   PAGE “MES VINS”
===================== */
/* toolbar (recherche + boutons) */
.toolbar {
  display: flex;
  flex-direction: row; /* override .card column layout */
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  background: #fff;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
/* Ensure action buttons stay on one line when space allows */
.toolbar .toolbar__btn { flex: 0 0 auto; }
/* Dedicated layout for the action buttons bar */
.toolbar.toolbar--actions { display:flex; flex-wrap: nowrap; justify-content:flex-start; align-items:center; gap:12px; }
@media (max-width: 768px) {
  /* On mobile, stack buttons full width for easy tap */
  .toolbar.toolbar--actions { flex-wrap: wrap; flex-direction: column; align-items: stretch; }
  .toolbar.toolbar--actions .toolbar__btn { width: 100%; }
}
.toolbar__search {
  flex: 1;
  display: flex;
}
.toolbar__search input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
}
.toolbar__search button {
  padding: 0 12px;
  border: 1px solid #ddd;
  border-left: none;
  background: #fff;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}
.toolbar__btn {
  white-space: nowrap;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: .95rem;
  transition: opacity .2s;
}
.btn--primary.toolbar__btn {
  background: #3A3F54; color: #fff; border: none;
}
.btn--secondary.toolbar__btn {
  background: #fff; color: #3A3F54; border: 1px solid #3A3F54;
}
.btn--primary.toolbar__btn:hover,
.btn--secondary.toolbar__btn:hover {
  opacity: .8;
}
.wine-thumb {
  max-width: 200px;
  max-height: 150px;
  object-fit: cover;
}



/* grille compacte */
.wine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap: 16px;
}
.wine-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.wine-card__img img {
  width: 100%; height: 140px;
  object-fit: cover;
}
.wine-card__noimg {
  width: 100%; height: 140px;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
}
.wine-card__body {
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.wine-card__body h3 {
  margin-bottom: 4px;
  font-size: 1.1rem;
}
.wine-card__meta {
  color: #555;
  font-size: .9rem;
  margin-bottom: 8px;
}
.wine-card__stock {
  font-weight: bold;
  font-size: .95rem;
  margin-top: auto; /* pousse le bloc stock en bas du corps */
}
.stock-quick { margin-top: 6px; }
.wine-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px;
  border-top: 1px solid #f0f0f0;
}
.btn--small {
  padding: 6px 12px;
  font-size: .85rem;
  border-radius: 4px;
  transition: opacity .2s;
}
.btn--small.btn--primary {
  background: #3A3F54; color: #fff; border: none;
}
.btn--small.btn--secondary {
  background: #fff; color: #3A3F54; border: 1px solid #3A3F54;
}
.btn--danger {
  background: #e74c3c;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  transition: opacity .2s;
}
.btn--danger:hover {
  opacity: .8;
}


/* =====================
   FICHE DÉTAIL (table-confirm)
===================== */
.table-confirm {
  width: 100%;
  border-collapse: collapse;
}
.table-confirm th,
.table-confirm td {
  text-align: left;
  padding: 0.75rem 1rem;
  vertical-align: top;
}
.table-confirm th {
  font-weight: 600;
  background: #f0f0f0;
}
#stock-comments {
  list-style: none;
  padding-left: 0;
  margin-top: 8px;
}
#stock-comments li {
  margin-bottom: 6px;
}
#stock-comments li a {
  color: #3A3F54;
  text-decoration: none;
  transition: background .2s;
  display: inline-block;
  padding: 2px 4px;
  border-radius: 4px;
}
#stock-comments li a:hover {
  background: rgba(58,63,84,0.1);
}
.wine-image img {
  transition: transform .2s ease;
}
.wine-image img:hover {
  transform: scale(1.05);
}


/* ====================================
   Actions-card : espacer les boutons
==================================== */
.actions-card {
  display: flex;
  flex-wrap: wrap;    /* passe à la ligne si besoin */
  gap: 8px;           /* espace entre chaque bouton */
  margin-top: 16px;   /* déjà en inline, mais mieux ici */
}
.actions-card {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;    /* espace de 5px entre chaque bouton */
  margin-top: 16px;
}

/* =====================
   Login card”
===================== */
.login-card {
  max-width: 400px;
  margin: 3rem auto;
  padding: 2rem;
}
.login-card .card__title {
  margin-bottom: 1rem;
  font-size: 1.5rem;
}
.alert {
  margin-bottom: 1rem;
  padding: .75rem 1rem;
  border-radius: 4px;
}
.alert--error {
  background: #fdecea;
  color: #b71c1c;
}
.form__group {
  margin-bottom: 1rem;
}
.form__input {
  width: 100%;
  padding: .6rem 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
}
.form__actions {
  margin-top: 1.5rem;
}
.btn--full {
  width: 100%;
}
.login-card__footer {
  text-align: center;
  margin-top: 1.5rem;
}
.login-card__footer .link {
  color: var(--color-primary);
  text-decoration: none;
}
.login-card__footer .link:hover {
  text-decoration: underline;
}
/* Ajustements pages publiques (login/register) */
.login-page .site-main { padding-top: 4px !important; }
.login-page .container { --header-offset: 0px; padding-top: 0; }
.login-page .login-card { margin: 1.25rem auto; }
/* =====================
   Scan QR”
===================== */

.qr-reader {
  width: 100%;
  max-width: 320px;
  height: 320px;
  margin: 0 auto 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.text-center {
  text-align: center;
}
/* =====================
   Historique des mouvements”
===================== */

.history-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--gap);
}
.history-table th,
.history-table td {
  padding: .75rem 1rem;
  border-bottom: 1px solid #eee;
  vertical-align: top;
}
.history-table th {
  text-align: left;
  font-weight: 600;
  background: var(--card-bg);
}
.text-right {
  text-align: right;
}
/* =====================
   ÉTIQUETTE VIN (45 × 25 mm)
===================== */
/* étiquette 45×25 mm */
.label {
  width: 45mm;
  height: 25mm;
  display: flex;
  flex-direction: row;

  /* centre verticalement QR et texte */
  align-items: center;

  /* ajoute un petit padding pour ne pas coller les bords */
  padding: 1mm;
  box-sizing: border-box;
}

/* colonne QR */
.label .qr {
  /* occupe 40% de la largeur, on gagne un peu d’espace pour le texte */
  flex: 0 0 40%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.label .qr img {
  /* on réduit légèrement pour laisser le padding */
  width: 18mm;
  height: 18mm;
  object-fit: contain;
}

/* colonne texte */
.label .info {
  /* occupe le reste */
  flex: 0 0 60%;
  display: flex;
  flex-direction: column;

  /* centre verticalement le bloc texte */
  justify-content: center;

  /* aligne le texte à gauche et ajoute un petit indent */
  align-items: flex-start;
  padding-left: 1mm;
}
.label .info .apogee {
  font-size: 12pt;
  font-weight: bold;
  margin-bottom: 0.5mm;
}
.label .info .appel {
  font-size: 8pt;
  text-align: left;
  line-height: 1.1;
}


/* Messages d’alerte */
.alert {
  padding: .75rem 1rem;
  border-radius: 4px;
  margin-bottom: 1rem;
  font-size: .95rem;
}

/* Erreur existant */
.alert--error {
  background: #fdecea;
  color: #b71c1c;
  border: 1px solid #f5c6cb;
}

/* Succès */
.alert--success {
  background: #e6ffed;
  color: #155724;
  border: 1px solid #c3e6cb;
}


/* ===== Responsive enhancements ===== */
@media(max-width: 768px){ .bookmark-list li { flex-direction: column; gap:8px; } .profile-hero { flex-direction: column; align-items: flex-start; } .profile-hero .avatar { width:108px; height:108px; } }
@media(max-width: 768px){ .form-grid-2 { display:grid; grid-template-columns: 1fr !important; } }


/* ===== Global responsive + layout fixes ===== */

/* Wine card grid */
.wine-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap:12px; }
@media (max-width:480px){ .wine-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }

/* Forms fit container on mobile */
@media (max-width:768px){
  .form .form__input,
  .form input[type=text], .form input[type=number], .form input[type=email], .form input[type=url], .form input[type=date],
  .form select, .form textarea { width:100%; }
}


/* Header nav tighter on mobile */
/* (ancien override du menu remplacé par le menu hamburger plus haut) */

/* Override: avatar rond dans le header */
header.header .user-area img { border-radius:50%; }
.card.chart canvas { cursor: pointer; }
/* Wine card image overlay for recolte/apogee */
.wine-card__img-overlay { position:absolute; left:0; right:0; bottom:0; background: rgba(0,0,0,0.7); color:#fff; padding: 3px 6px; font-size: 0.80rem; display:flex; justify-content:center; align-items:center; gap:10px; z-index:1; font-weight: 500; }
.wine-card__img-overlay span { line-height: 1.2; color: inherit !important; }
.wine-card__img-overlay .phase-jeunesse { color: #1d4ed8 !important; /* bleu */ }
.wine-card__img-overlay .phase-apogee   { color: #16a34a !important; /* vert */ }
.wine-card__img-overlay .phase-declin   { color: #dc2626 !important; /* rouge */ }
.wine-card__img-overlay .phase-autres   { color: #9e9e9e !important; }

/* =====================
   Vue "carte" empilée pour tableaux denses sur mobile (<640px)
   Concerne .history-table (historique.php, admin_manage_users.php)
===================== */
@media (max-width: 640px) {
  .history-table thead { display: none; }
  .history-table,
  .history-table tbody,
  .history-table tr,
  .history-table th,
  .history-table td {
    display: block;
    width: 100%;
  }
  .history-table tr {
    margin-bottom: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 4px 10px;
    background: #fff;
  }
  .history-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
    text-align: right;
    white-space: normal;
    max-width: none;
    overflow: visible;
    text-overflow: initial;
  }
  .history-table td:last-child { border-bottom: none; }
  .history-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #555;
    text-align: left;
    margin-right: 8px;
    flex-shrink: 0;
  }
  .history-table td.user-actions {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
  .history-table td.user-actions::before { margin-bottom: 4px; }
}

/* =====================
   HUB de cartes (Mon compte, etc.) — réutilisable
===================== */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 6px;
}
.hub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  background: #fff;
  transition: box-shadow .15s, transform .15s;
}
.hub-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); transform: translateY(-2px); }
.hub-card__icon { font-size: 1.6rem; }
.hub-card__label { font-weight: 700; }
.hub-card__desc { font-size: .85rem; color: #777; }
.hub-card__badge {
  position: absolute;
  top: 10px;
  right: 12px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: #ff6b6b;
  color: #fff;
  border-radius: 10px;
  font-size: .75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* =====================
   Pages de contenu (Assistance, pages légales)
===================== */
.doc-page .card { line-height: 1.6; }
.doc-page h1 { margin: 0 0 4px; }
.doc-page .doc-updated { color: #888; font-size: .85rem; margin: 0 0 18px; }
.doc-page h2 { margin: 22px 0 8px; font-size: 1.25rem; }
.doc-page h3 { margin: 16px 0 6px; font-size: 1.05rem; }
.doc-page p, .doc-page li { color: #333; }
.doc-page details {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 10px 0;
  background: #fff;
}
.doc-page details[open] { box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.doc-page summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.02rem;
  list-style: none;
}
.doc-page summary::-webkit-details-marker { display: none; }
.doc-page summary::before { content: "▸ "; color: #8a6d3b; }
.doc-page details[open] summary::before { content: "▾ "; }
.doc-page ol, .doc-page ul { margin: 6px 0 6px 4px; padding-left: 20px; }
.doc-page .doc-toc { background: #f7f7f7; border-radius: 8px; padding: 12px 16px; margin: 10px 0 20px; }
.doc-page .doc-toc a { color: #5a3e2b; }

/* =====================
   Pied de page enrichi
===================== */
.site-footer {
  margin-top: 32px;
  padding: 22px 16px;
  background: #2f3346;
  color: #cfd2dc;
  text-align: center;
  font-size: .9rem;
}
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin-bottom: 10px;
}
.site-footer__copy { color: #9aa0b4; margin: 0; }

/* =====================
   Options avancées (fiche vin)
===================== */
.adv-options {
  margin-top: 14px;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  background: #fafafa;
}
.adv-options > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 10px 14px;
  list-style: none;
  user-select: none;
}
.adv-options > summary::-webkit-details-marker { display: none; }
.adv-options > summary::before { content: "▸ "; color: #8a6d3b; }
.adv-options[open] > summary::before { content: "▾ "; }
.adv-options__body { padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 14px; }
.adv-card { background: #fff; border: 1px solid #ececec; border-radius: 8px; padding: 12px 14px; }
.adv-card h4 { margin: 0 0 8px; font-size: 1rem; }
.adv-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.adv-hint { font-size: .82rem; color: #777; margin: 8px 0 0; line-height: 1.45; }