:root {
    --wine: #6b2737;
    --wine-dark: #521d2a;
    --wine-deep: #4a1a27;
    --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --bs-link-color: var(--wine);
    --bs-link-hover-color: var(--wine-dark);
}

/* Thème sombre : fond neutre légèrement teinté vin, vin éclairci pour le texte.
   --foil (or pâle) ne sert qu'aux filets et à l'icône, jamais en aplat. */
[data-bs-theme="dark"] {
    --wine-light: #d98a9b;
    --ivory: #f1e8dc;
    --foil: #c9a96e;
    --rule: rgba(201, 169, 110, .22);
    --bs-body-bg: #2a2326;
    --bs-body-bg-rgb: 42, 35, 38;
    --bs-body-color: #e6dcd3;
    --bs-body-color-rgb: 230, 220, 211;
    --bs-secondary-color: rgba(230, 220, 211, .72);
    --bs-heading-color: var(--ivory);
    --bs-tertiary-bg: #342c30;
    --bs-tertiary-bg-rgb: 52, 44, 48;
    --bs-border-color: #4a3f44;
    --bs-link-color-rgb: 217, 138, 155;
    --bs-link-hover-color-rgb: 232, 170, 184;
    accent-color: var(--wine-light);
    scrollbar-color: #5a4a51 var(--bs-body-bg);
}

/* Titres : serif classique, un peu plus grands car Cormorant a une petite hauteur d'x */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .navbar-brand {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: .005em;
}
.display-1 { font-family: var(--font-display); font-weight: 600; }
.h3, h3 { font-size: 2rem; }
.h4, h4 { font-size: 1.75rem; }
.h5, h5 { font-size: 1.45rem; }

/* Ce que le navigateur dessine tout seul : sélection, focus */
::selection { background: var(--wine); color: #fff; }
:focus-visible { outline: 2px solid var(--wine-light); outline-offset: 2px; }
.form-control:focus, .form-select:focus {
    border-color: var(--wine-light);
    box-shadow: 0 0 0 .2rem rgba(217, 138, 155, .22);
}

/* Barre de navigation : bordeaux profond, filet doré */
.navbar-wine {
    background-color: var(--wine-deep);
    border-bottom: 1px solid var(--rule);
}
.navbar-brand {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: 1.7rem;
    color: var(--ivory);
}
.navbar-brand:hover, .navbar-brand:focus { color: #fff; }
.brand-glass { width: 1.35rem; height: 1.35rem; color: var(--foil); flex-shrink: 0; }

.site-footer { --bs-border-color: var(--rule); }
.site-footer .brand-glass { width: 1rem; height: 1rem; margin-right: .35rem; vertical-align: -.15em; }

/* Accueil : la photo de la cave doit se voir, le texte se lit sur le bas */
.hero {
    min-height: 26rem;
    display: flex;
    align-items: flex-end;
    padding: clamp(1.5rem, 5vw, 3.5rem);
    background:
        linear-gradient(to top, rgba(22, 9, 14, .94) 0%, rgba(22, 9, 14, .72) 45%, rgba(22, 9, 14, .2) 100%),
        linear-gradient(90deg, rgba(22, 9, 14, .55), transparent 70%),
        url('/img/backgroundLogin.jpg') center 40% / cover;
}
.hero-inner {
    max-width: 36rem;
    animation: hero-rise .7s cubic-bezier(.16, 1, .3, 1) both;
}
.hero-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2.6rem, 6vw, 4rem);
    line-height: 1.05;
    color: var(--ivory);
    text-wrap: balance;
}
.hero-lead { font-size: 1.15rem; color: rgba(241, 232, 220, .88); }
@keyframes hero-rise {
    from { opacity: 0; transform: translateY(12px); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-inner { animation: none; }
}

/* Accueil : trois colonnes séparées par un filet, sans cartes */
.feature { border-top: 1px solid var(--rule); padding-top: 1.1rem; }
.feature h2 { font-size: 1.6rem; }
.steps {
    --bs-list-group-bg: transparent;
    --bs-list-group-border-color: var(--bs-border-color);
}
.steps > .list-group-item::before {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--wine-light);
    margin-right: .5rem;
}

.bg-wine { background-color: var(--wine); }
.text-wine { color: var(--wine-light, var(--wine)); }

/* Cartes : un contour fin au lieu d'une ombre (une ombre ne se voit pas en sombre) */
.card {
    --bs-card-border-radius: .75rem;
    --bs-card-inner-border-radius: calc(.75rem - 1px);
}
[data-bs-theme="dark"] .card {
    --bs-card-bg: #3a3135;
    --bs-card-border-color: var(--bs-border-color);
}
.wine-card { overflow: hidden; transition: border-color .2s ease-out; }
.wine-card:hover { border-color: rgba(201, 169, 110, .45); }

/* Champ de quantité avec boutons - et + (voir public/js/index.js), sans les flèches natives du navigateur */
.qty-group { max-width: 8.5rem; }
.qty-input { -moz-appearance: textfield; appearance: textfield; }
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-input, .wine-quantity { font-variant-numeric: tabular-nums; }

/* Couleur du vin : un point dans l'étiquette et la teinte de la bouteille dessinée */
.tone-rouge { --tone: #9b2f45; }
.tone-blanc { --tone: #e6d79e; }
.tone-rose { --tone: #e8a0aa; }
.tone-petillant { --tone: #d8c581; }
.tone-autre { --tone: #9d9298; }
.wine-dot {
    display: inline-block;
    width: .55rem;
    height: .55rem;
    margin-right: .45rem;
    border-radius: 50%;
    background: var(--tone);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .28);
    vertical-align: .05em;
}

/* Statistiques de la cave : un seul panneau, des chiffres lisibles sans en faire des affiches */
.stat dt { font-size: .8rem; font-weight: 400; color: var(--bs-secondary-color); }
.stat dd { margin: 0; font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; line-height: 1.2; color: var(--ivory); font-variant-numeric: lining-nums tabular-nums; }
.stat-note { font-family: var(--bs-body-font-family); font-size: .75rem; font-weight: 400; color: var(--bs-secondary-color); }

/* Période "à boire" : trop tôt (neutre), maintenant (or pâle), dépassée (rose) */
.status-keep { color: var(--bs-secondary-color); }
.status-drink { color: var(--foil); border-color: rgba(201, 169, 110, .45) !important; }
.status-past { color: var(--wine-light); border-color: rgba(217, 138, 155, .45) !important; }

/* Page "Mon compte" : la zone de suppression se repère sans crier */
.danger-zone { --bs-card-border-color: #94505b; }
.edit-photo { max-width: 6rem; max-height: 6rem; object-fit: contain; background: #2c2428; padding: .25rem; }

/* Zone photo d'une carte de la cave : la photo entière (une bouteille est souvent en hauteur) sur un fond dégradé,
   ou une bouteille dessinée quand il n'y a pas de photo. Le nombre de bouteilles est posé dans un coin. */
.wine-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    padding: .65rem;
    background: radial-gradient(ellipse at center, #4b3c42 0%, #2c2428 100%);
}
.wine-photo { width: 100%; height: 100%; object-fit: contain; border-radius: .4rem; }
.wine-placeholder { height: 100%; display: flex; align-items: center; justify-content: center; color: var(--tone, var(--wine-light, var(--wine))); opacity: .45; }
.wine-placeholder svg { height: 62%; }
.wine-quantity { position: absolute; top: .75rem; right: .75rem; }

/* Boutons secondaires et de suppression : les valeurs par défaut de Bootstrap sont trop ternes sur le fond sombre */
[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: #d8ccc4;
    --bs-btn-border-color: #75646b;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #4d4146;
    --bs-btn-hover-border-color: #9a8a91;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #4d4146;
    --bs-btn-active-border-color: #9a8a91;
}
[data-bs-theme="dark"] .btn-outline-danger {
    --bs-btn-color: #ec9ba5;
    --bs-btn-border-color: #94505b;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #8a2f3d;
    --bs-btn-hover-border-color: #8a2f3d;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #8a2f3d;
    --bs-btn-active-border-color: #8a2f3d;
}

.btn-wine {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--wine);
    --bs-btn-border-color: var(--wine);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--wine-dark);
    --bs-btn-hover-border-color: var(--wine-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--wine-dark);
    --bs-btn-active-border-color: var(--wine-dark);
    --bs-btn-focus-shadow-rgb: 217, 138, 155;
}
