@charset "UTF-8";
/* VARIABLES*/
:root {
  /* ORANGES */
  --orange-100: #FED7AA;
  --orange-500: #F97316;
  --orange-600: #EA580C;
  --orange-700: #C2410C;
  /* TEXT */
  --gray-900: #111827;
  --gray-700: #374151;
  --gray-600: #4B5563;
  --gray-500: #6B7280;
  /* REDS */
  --red-700: #DC2626;
  --red-800: #9B1C1C;
  /* BACKGROUNDS */
  --white: #FFFFFF;
  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --header-bg: #FAFAFA;
  /* BORDERS */
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  /* SPECIAL */
  --overlay-light: rgba(255, 255, 255, 0.85);
  --overlay-dark: rgba(0, 0, 0, 0.4);
  /* CUSTOM MAQUETTE TOKENS */
  --vg-primary: var(--orange-600);
  --vg-primary-hover: var(--orange-700);
  --vg-text: var(--gray-600);
  /*DANGER */
  --vg-danger: var(--red-700);
  --vg-danger-hover: var(--red-800);
}

/* ============================
  GLOBAL
============================ */
body {
  color: var(--vg-text);
  background: var(--white);
}

/* =========================
   REMPLACER LE BLEU BOOTSTRAP
   ========================= */
/* Boutons primary */
.btn-primary {
  background-color: var(--vg-primary) !important;
  border-color: var(--vg-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--vg-primary-hover) !important;
  border-color: var(--vg-primary-hover) !important;
}

/* Nav pills (Employés / Statistiques) */
.nav-pills .nav-link {
  color: var(--vg-primary);
  border-radius: 12px;
  font-weight: 600;
}

.nav-pills .nav-link.active {
  background-color: var(--vg-primary) !important;
  color: #fff !important;
}

/* Icônes dans les onglets */
.nav-pills .nav-link i {
  color: inherit;
}

.btn-outline-primary {
  --bs-btn-color: var(--vg-primary);
  --bs-btn-border-color: var(--vg-primary);
  --bs-btn-hover-bg: var(--vg-primary);
  --bs-btn-hover-border-color: var(--vg-primary);
  --bs-btn-hover-color: #fff;
}

.btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* =========================
   BOUTON DÉCONNEXION (ROUGE)
   ========================= */
.btn-logout {
  background-color: var(--vg-danger) !important;
  border-color: var(--vg-danger) !important;
  color: #fff !important;
  --bs-btn-bg: var(--vg-danger);
  --bs-btn-border-color: var(--vg-danger);
  --bs-btn-hover-bg: var(--vg-danger-hover);
  --bs-btn-hover-border-color: var(--vg-danger-hover);
  --bs-btn-hover-color: #fff;
}

.btn-logout:hover {
  background-color: var(--vg-danger-hover) !important;
  border-color: var(--vg-danger-hover) !important;
}

/*HERO*/
.hero {
  min-height: 62vh;
  display: grid;
  place-items: center;
  position: relative;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  filter: brightness(0.6);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.55));
}

.hero-content {
  z-index: 1;
}

/* ============================
  CHECKLIST
============================ */
.accent-dots {
  list-style: none;
  padding-left: 0;
}

.accent-dots li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.my-icon {
  font-size: 18px;
  color: var(--orange-600);
}

/* ============================
  BG SECTIONS
============================ */
.bg-soft {
  background: var(--gray-50);
}

/* ============================
  FOOTER
============================ */
footer {
  background: var(--gray-100);
  color: var(--gray-600);
}

.text-primary {
  color: var(--vg-primary) !important;
}

.menu-card {
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.menu-card .card-img-top {
  height: 175px;
  -o-object-fit: cover;
     object-fit: cover;
}

.menu-card .card-title {
  font-weight: 600;
  color: var(--gray-900);
}

.menu-card .card-text {
  color: var(--gray-600);
}

.menu-price {
  font-size: 0.95rem;
  color: var(--orange-600);
}

#filters .form-label {
  font-weight: 600;
  color: var(--gray-700);
}

#filters input, #filters select {
  border-radius: 10px;
  border: 1px solid var(--gray-300);
  min-height: 45px;
}

.footer-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; /* Taille du cercle */
  height: 42px;
  border-radius: 50%; /* Cercle parfait */
  background: var(--orange-100); /* Fond orange doux */
  color: var(--orange-600); /* Icône orange foncé */
  text-decoration: none;
  font-size: 22px; /* Taille de l'icône */
  transition: 0.25s ease-in-out;
}

/* Effet au survol */
.footer-socials a:hover {
  background: var(--orange-600); /* Fond orange fort */
  color: white; /* Icône blanche */
  transform: scale(1.08); /* Zoom léger */
}

/* ============================================
   MON ESPACE — STYLE COMPATIBLE MAQUETTE
============================================ */
.mon-espace-container {
  max-width: 900px;
  margin: 40px auto;
  padding: 20px;
  background: var(--overlay-light);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border-radius: 20px;
  border: 1px solid var(--gray-200);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
}

.mon-espace-container h1,
.mon-espace-container h2 {
  color: var(--gray-900);
  font-weight: 600;
  text-align: center;
}

/* ==== SECTIONS ==== */
.mon-espace-container section {
  margin-top: 25px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  border: 1px solid var(--gray-200);
}

/* ==== LISTE DES COMMANDES ==== */
.liste-commandes .commande {
  background: var(--white);
  padding: 18px;
  border-radius: 14px;
  border: 1px solid var(--gray-200);
  margin-bottom: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.liste-commandes .commande h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--gray-900);
}

.cmd-actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ==== BOUTONS COMMANDES ==== */
.btn-modifier,
.btn-annuler,
.btn-suivi,
.btn-avis {
  padding: 8px 14px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: 0.25s;
}

.btn-modifier {
  background: var(--orange-500);
  color: white;
}

.btn-annuler {
  background: #e53935;
  color: white;
}

.btn-suivi {
  background: var(--orange-600);
  color: white;
}

.btn-avis {
  background: var(--orange-700);
  color: white;
}

.btn-modifier:hover,
.btn-annuler:hover,
.btn-suivi:hover,
.btn-avis:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* ==== ALERTES ==== */
.alert {
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 15px;
  font-weight: 600;
  text-align: center;
}

.alert-danger {
  background: #ffdfdf;
  color: #a20000;
  border: 1px solid #ffb9b9;
}

.alert-success {
  background: #d9ffd9;
  color: #007a0a;
  border: 1px solid #baffba;
}

.d-none {
  display: none !important;
}

/* ==== FORMULAIRE AVIS ==== */
.donner-avis input,
.donner-avis textarea {
  width: 100%;
  margin-top: 6px;
  margin-bottom: 15px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--gray-300);
  background: var(--white);
  color: var(--gray-700);
}

.donner-avis button {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  background: var(--orange-600);
  color: white;
}

.donner-avis button:hover {
  background: var(--orange-700);
  transform: translateY(-1px);
}

/* ==== RESPONSIVE ==== */
@media (max-width: 700px) {
  .mon-espace-container {
    padding: 15px;
    margin: 15px;
  }
  .cmd-actions {
    flex-direction: column;
  }
  .bouton {
    width: 100%;
  }
}
/* =========================
   BOUTONS AVIS À MODÉRER
   ========================= */
.review-actions {
  min-width: 260px;
}

.review-actions .btn {
  width: 100%;
  padding: 6px 12px; /* 🔽 plus fin */
  font-size: 0.9rem; /* 🔽 texte plus discret */
  font-weight: 500;
  border-radius: 6px; /* 🔽 plus élégant */
}

.review-actions textarea {
  width: 100%;
  font-size: 0.85rem;
  padding: 6px 8px;
  margin-bottom: 6px;
}

/* =========================
   AVIS À MODÉRER (EMPLOYÉ)
   ========================= */
.reviews-section {
  max-width: 1100px; /* même largeur que Commandes */
  margin: 0 auto;
}

.reviews-list .card {
  border-radius: 12px;
}

@media (max-width: 768px) {
  .reviews-section {
    padding: 0 10px;
  }
}
/* Même style que commandes */
.employee-card {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  padding: 16px;
  background: #fff;
}

/* Boutons fins comme "Mettre à jour" */
.btn-thin {
  padding: 0.35rem 0.75rem;
  font-size: 0.9rem;
  border-radius: 0.4rem;
}

.team-image-wrapper {
  position: relative;
  height: 400px; /* desktop */
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.team-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

/* Overlay sombre */
.team-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.15), transparent);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
  color: #fff;
}

.team-overlay h2 {
  font-size: 1.8rem;
  margin-bottom: 8px;
}

.team-overlay p {
  max-width: 520px;
  font-size: 1rem;
  color: #e5e5e5;
}

/* 📱 Mobile */
@media (max-width: 768px) {
  .team-image-wrapper {
    height: 240px;
  }
  .team-overlay {
    padding: 20px;
  }
  .team-overlay h2 {
    font-size: 1.4rem;
  }
}/*# sourceMappingURL=css.css.map */