:root {
  --yellow: #FFE685;
  --yellow-light: #FFF8DD;
  --ocre: #A88C3D;
  --ocre-dark: #856c27;
  --rose: #FFD1C1;
  --white: #fff;
  --shadow-main: 0 4px 24px #a88c3d1f;
  --shadow-hover: 0 8px 32px #ffd1c171;
  --radius-section: 2.5rem;
  --gray-soft: #F6F5F2;
  --text-main: #4c3a13;
  --text-light: #beb587;
  --primary-color: var(--ocre); /* CORRECTION: Ajout de la définition de --primary-color pour la cohérence */
}

/* GENERAL RESETS & LAYOUT */
body {
  font-family: 'Nunito', 'Segoe UI', Arial, sans-serif;
  color: var(--text-main);
  background: var(--gray-soft);
  margin: 0; padding: 0;
}

a, a:visited {
  color: var(--ocre);
  transition: color 0.15s;
  text-decoration: none;
}
a:hover, a:active {
  color: var(--ocre-dark);
}

h1, h2, h3, h4 {
  font-weight: 900;
}

img {
  max-width: 100%;
  border-radius: 1.5rem;
  box-shadow: var(--shadow-main);
}

/* BASE HEADER */
header {
  background: var(--yellow);
  box-shadow: 0 2px 14px #fde6ae6a;
  position: sticky; top: 0; z-index: 20;
}
.header-brand {
  text-align: center;
  padding: 1.4rem 0 0.6rem 0;
}
.header-brand h1 {
  color: var(--ocre);
  font-size: 2.5rem;
  letter-spacing: 0.06em;
  margin: 0;
  font-family: 'Prata', serif;
}
.header-brand .slogan {
  font-size: 1.05rem;
  font-style: italic;
  color: var(--ocre-dark);
  opacity: 0.84;
  margin-bottom: 0.8rem;
}

/* LOGO LINK */
.logo-link {
  text-decoration: none;
}
.logo-link h1 {
  transition: transform 0.2s;
}
.logo-link:hover h1 {
  transform: scale(1.05);
}

/* MENU PRINCIPAL CENTRÉ */
.navbar-main {
  background: none;
  display: flex;
  justify-content: center;
  border: none;
  margin-bottom: 0.2em;
}
.navbar-main ul {
  list-style: none;
  display: flex;
  gap: 2.3rem;
  padding: 0;
  margin: 0 auto;
  font-size: 1.09rem;
  /* NOTE: 'Roboto' n'est pas importé dans base.html. Ajoutez <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap" rel="stylesheet"> dans base.html si vous voulez l'utiliser. */
  font-family: 'Roboto', Arial, sans-serif; 
  font-weight: 700;
}
.navbar-main ul li {
  position: relative;
}
.navbar-main ul li > a {
  color: var(--ocre-dark);
  padding: 0.5em 0.9em;
  border-radius: 1em;
  letter-spacing: 0.03em;
  transition: background 0.15s, color 0.14s;
}
.navbar-main ul li > a:hover {
  background: var(--ocre);
  color: var(--white);
}

/* DROPDOWN AMÉLIORÉ AVEC TRANSITIONS */
.navbar-main .dropdown-content {
  display: block;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  min-width: 13rem;
  background: var(--yellow-light);
  border-radius: 1em;
  box-shadow: 0 8px 39px #ffd1c13b;
  margin-top: 0.3rem;
  z-index: 100;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.navbar-main .dropdown:hover .dropdown-content,
.navbar-main .dropdown:focus-within .dropdown-content {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Zone invisible pour maintenir le hover */
.navbar-main .dropdown::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 20px;
}

.navbar-main .dropdown-content li {
  list-style: none;
}

.navbar-main .dropdown-content li a {
  display: block;
  color: var(--ocre-dark);
  padding: 0.7em 1.5em;
  font-weight: 600;
  border-bottom: 1px solid #fff3be56;
  transition: background 0.13s;
}

.navbar-main .dropdown-content li:last-child a {
  border-bottom: none;
}

.navbar-main .dropdown-content li a:hover {
  background: var(--rose);
  color: var(--text-main);
}

/* NAVBAR SUPÉRIEURE - Icons */
.navbar-top {
  background: var(--white);
  text-align: right;
  padding-top: 0.25rem;
  padding-bottom: 0.1rem;
}

.navbar-top-right {
  padding-right: 1rem;
}

.navbar-top-right span {
  color: var(--text-main);
  font-size: 0.95rem;
  margin-right: 1rem;
}

.navbar-top-right a {
  margin: 0 11px;
  font-size: 1.7em; /* Bootstrap Icons (bi-...) s'adapte bien avec em */
  vertical-align: middle;
  color: var(--ocre-dark);
  transition: color 0.16s, filter 0.12s;
}
.navbar-top-right a:hover { 
  color: var(--ocre); 
  filter: brightness(1.13);
}

/* BREADCRUMB */
.breadcrumb-section { /* NOTE: Cette classe n'est plus directement utilisée dans base.html depuis la refonte du fil d'Ariane. Peut être retirée si inutile. */
  background: var(--white);
  padding: 0.8rem 0;
  border-bottom: 1px solid #f0e8d3;
  margin-bottom: 1.5rem;
}

.breadcrumb {
  margin-bottom: 0;
  padding: 0;
  background: none;
  font-size: 0.95rem;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  color: var(--ocre);
  font-weight: bold;
  font-size: 1.2rem;
  padding: 0 0.5rem;
}

.breadcrumb-item a {
  color: var(--ocre);
  text-decoration: none;
  transition: color 0.2s;
}

.breadcrumb-item a:hover {
  color: var(--ocre-dark);
  text-decoration: underline;
}

.breadcrumb-item.active {
  color: var(--text-main);
  font-weight: 600;
}

.breadcrumb-item i {
  font-size: 1.1rem;
  margin-right: 0.3rem;
}

/* HERO */
.hero-section {
  background: linear-gradient(94deg, var(--yellow) 90%, var(--rose) 100%);
  border-radius: 0 0 var(--radius-section) var(--radius-section);
  box-shadow: 0 12px 38px #ffe68564;
  margin-bottom: 2.5rem;
}
.hero-section .display-2,
.hero-section .display-3 { /* NOTE: .display-3 n'est pas utilisé dans index.html. Peut être retiré si inutile. */
  color: var(--ocre);
  text-shadow: 0 3px 18px #ffe18565;
  letter-spacing: 0.01em;
}
.hero-section .lead {
  color: var(--ocre-dark);
}

/* CARROUSEL */
.carousel-inner img {
  border-radius: 1.7rem;
  min-height: 260px;
  max-height: 430px;
  object-fit: cover;
  box-shadow: var(--shadow-main);
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: var(--ocre);
  border-radius: 50%;
  padding: 12px;
  border: 2px solid var(--yellow-light);
  box-shadow: 0 2px 12px #a88c3d2c;
}
.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
  background-color: var(--ocre-dark);
}

/* SECTION "UNIVERS" du menu rapide */
.univers-card {
  background: var(--white);
  border-radius: 2rem;
  box-shadow: 0 4px 24px #ffd1c158;
  padding: 2rem 1rem 1rem 1rem;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.16s;
  min-height: 140px;
}
.univers-card i { 
  font-size: 2.3rem; 
  margin-bottom: 0.45rem;
}
.univers-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-6px) scale(1.04);
  background: var(--yellow-light);
}

/* SECTIONS */
.intro-section {
  background: var(--rose);
  border-radius: var(--radius-section);
  margin-top: 2.5rem;
  margin-bottom: 2.3rem;
  box-shadow: 0 2px 19px #ffd6c151;
}
.intro-section h2, .selection h3, .valeurs h2 { 
  color: var(--ocre);
}
.intro-section p {
  color: var(--ocre-dark);
}
.intro-section img {
  border-radius: 2rem;
  box-shadow: 0 4px 22px #ffd6c15c;
}

.selection {
  background: var(--white);
  border-radius: 2rem;
  box-shadow: var(--shadow-main);
  margin: 2.8rem 0;
  padding: 2rem 1rem 2rem 1rem;
}

.selection h3 {
  color: var(--ocre-dark);
}
.selection .card {
  border-radius: 1.5rem;
  box-shadow: 0 2px 18px #ffe4ab45;
  padding-bottom: 0.8em;
  transition: box-shadow 0.16s, transform 0.10s;
}
.selection .card:hover {
  box-shadow: var(--shadow-hover);
  transform: scale(1.04);
}
.selection .card-title {
  color: var(--text-main);
  font-weight: 700;
}
.selection .btn-outline-ocre {
  border: 1.5px solid var(--ocre);
  color: var(--ocre);
  background: none;
  font-weight: bold;
  border-radius: 1.4em;
  transition: background 0.14s, color 0.11s;
  margin-top: 0.5rem;
}
.selection .btn-outline-ocre:hover, .btn-outline-ocre:focus {
  background: var(--ocre);
  color: #fff;
}

/* BOUTONS */
.btn.btn-ocre {
  background: var(--ocre);
  color: #fff;
  border: none;
  border-radius: 2em;
  font-weight: 700;
  filter: drop-shadow(0 2px 14px #dac98740);
  padding: 0.7em 2.2em; /* CORRECTION: Ajout du padding manquant */
  transition: background 0.15s, filter 0.12s; /* CORRECTION: Ajout de la transition manquante */
}
.btn-ocre:hover,
.btn-ocre:focus {
  background: var(--ocre-dark);
  color: #fff;
}

/* ALERT MESSAGES */
.alert {
  border-radius: 1rem;
  border: none;
}

/* UTILITY CLASSES */
.bg-pastel-yellow { background: var(--yellow) !important;}
.bg-pastel-yellow-subtle { background: var(--yellow-light) !important;}
.text-ocre { color: var(--ocre) !important; }
.text-ocre-dark { color: var(--ocre-dark) !important; }

/* NOTE: Ces classes utilitaires de Bootstrap sont redéfinies ici. 
   Si vous souhaitez modifier leur comportement globalement pour votre projet, 
   c'est correct. Sinon, considérez de créer des classes personnalisées 
   pour éviter des confusions ou des surcharges inutiles. */
.py-5 { padding-top: 3.2rem !important; padding-bottom: 3.2rem !important; }
.mt-3 { margin-top: 1.7rem !important; }
.mt-5 { margin-top: 3.2rem !important; }
.mb-4 { margin-bottom: 2.2rem !important; }

.valeurs {
  background: var(--yellow-light);
  border-radius: 2em;
  padding: 2.2em 0 1.1em;
  box-shadow: 0 2px 18px #ffe28432;
  margin: 2.4rem 0 0.9rem;
}
.valeurs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2.2rem;
  justify-content: center;
  margin-top: 1rem;
}
.valeur {
  flex: 1 1 240px;
  min-width: 160px;
  background: #fff;
  border-radius: 18px;
  padding: 1.2rem;
  text-align: center;
  box-shadow: 0 2px 12px #fff6bd51;
}
.valeur-icn {
  font-size: 1.8rem;
  margin-bottom: 0.4em;
  display: block;
  color: var(--ocre);
}

/* FORMS */
.form-control {
  border: 1.5px solid #e0d4b3;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus {
  border-color: var(--ocre);
  box-shadow: 0 0 0 0.2rem rgba(168, 140, 61, 0.15);
}

.form-label {
  color: var(--text-main);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* CARDS */
.card {
  border: none;
  transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
  transform: translateY(-5px);
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .navbar-main ul { 
    gap: 1.3rem; 
    font-size: 0.95rem;
    flex-wrap: wrap;
  }
  header, .hero-section, .intro-section, .selection, .valeurs { 
    border-radius: 1.1rem; 
  }
  .navbar-top-right span {
    display: none;
  }
}

@media (max-width: 600px) {
  .header-brand h1 { font-size: 1.5rem; }
  .navbar-main { 
    font-size: 0.85rem;
    padding: 0 1rem;
  }
  .navbar-main ul {
    gap: 0.8rem;
  }
  .navbar-main ul li > a {
    padding: 0.3em 0.6em;
  }
  .navbar-top-right a { 
    font-size: 1.35em; 
    margin: 0 6px;
  }
  .univers-card { padding: 1.3rem 0.6rem;}
  .intro-section img { max-height: 230px; }
  .py-5, .mt-5, .mb-4 { padding: 2.1rem !important;}
  .intro-section, .selection, .valeurs { margin-left: 0.4em; margin-right: 0.4em;}
  .carousel-inner img { max-height: 260px; }
  .breadcrumb-section {
    padding: 0.6rem 0;
    font-size: 0.85rem;
  }
  .breadcrumb-item + .breadcrumb-item::before {
    padding: 0 0.3rem;
  }
}
/* Badges de statut personnalisés */
.badge-status {
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
    font-weight: 500;
}

.badge-pending {
    background-color: #fff3cd;
    color: #856404;
}

.badge-processing {
    background-color: #cce5ff;
    color: #004085;
}

.badge-shipped {
    background-color: #e2e3e5;
    color: #383d41;
}

.badge-delivered {
    background-color: #d4edda;
    color: #155724;
}

.badge-cancelled {
    background-color: #f8d7da;
    color: #721c24;
}

/* Animations pour les actions admin */
.admin-action-success {
    animation: pulse-success 0.5s ease-in-out;
}

@keyframes pulse-success {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
    }
}

/* Style pour les tableaux admin */
.admin-table {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0,0,0,0.08);
}

.admin-table thead {
    background-color: var(--primary-color);
}

.admin-table thead th {
    border: none;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        z-index: 100;
        height: 100%;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
    }
    
    .sidebar.show {
        transform: translateX(0);
    }
    
    .admin-header {
        padding: 15px;
    }
    
    .stat-card {
        margin-bottom: 15px;
    }
}
.wishlist-item {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    transition: transform 0.3s;
}

.wishlist-item:hover {
    transform: translateY(-5px);
}

.wishlist-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}