/* VARIABLES GLOBALES DU PROJET */
:root {
  --sgs-blue: #1a4a8e; /* Bleu logo principal */
  --sgs-blue-dark: #113364; /* Nuance foncée pour contrastes */
  --sgs-orange: #ff5a00; /* Orange d'accentuation */
  --soft-orange: rgba(255, 90, 0, 0.08);
  --light-danger: #fdf3f3;
  --white-10: rgba(255, 255, 255, 0.1);
  --text-white-85: rgba(255, 255, 255, 0.85);
}

/* TYPOGRAPHIES ET BASE */
body {
  font-family:
    "Segoe UI",
    system-ui,
    -apple-system,
    sans-serif;
  background-color: #f8f9fa;
}

.text-blue {
  color: var(--sgs-blue);
}
.text-orange {
  color: var(--sgs-orange);
}
.bg-blue {
  background-color: var(--sgs-blue) !important;
}
.bg-dark-blue {
  background-color: var(--sgs-blue-dark) !important;
}
.bg-orange {
  background-color: var(--sgs-orange) !important;
}
.bg-soft-orange {
  background-color: var(--soft-orange);
}
.bg-light-danger {
  background-color: var(--light-danger);
}
.border-white-10 {
  border-color: var(--white-10) !important;
}

.tracking-wider {
  letter-spacing: 1px;
}
.max-w-700 {
  max-width: 700px;
}
.fs-7 {
  font-size: 0.85rem;
}

/* HERO SECTION AMÉLIORÉE */
.dest-hero {
  height: 60vh;
  min-height: 380px;
  border-bottom: 5px solid var(--sgs-orange);
}

/* CARDS ACTIONS & EFFETS */
.feature-card {
  transition:
    transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
    box-shadow 0.3s ease;
  border-radius: 10px;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08) !important;
}

.icon-box {
  width: 55px;
  height: 55px;
  background-color: var(--soft-orange);
  color: var(--sgs-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 22px;
}

/* LISTES ET ÉLÉMENTS DE DOCUMENTS */
.custom-list .list-group-item {
  border: none;
  padding: 10px 0;
  background: transparent;
}

.doc-item {
  border-left: 3px solid var(--sgs-blue);
  transition: all 0.2s ease;
}
.doc-item:hover {
  background-color: #f0f2f5 !important;
  border-left-color: var(--sgs-orange);
}
.doc-item .badge {
  min-width: 24px;
}

/* BOUTONS ET HOVERS */
.btn-orange {
  background-color: var(--sgs-orange);
  border-color: var(--sgs-orange);
  transition: all 0.2s ease;
}
.btn-orange:hover {
  background-color: #e04f00;
  border-color: #e04f00;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(255, 90, 0, 0.2);
}

.btn-outline-blue {
  color: var(--sgs-blue);
  border-color: var(--sgs-blue);
  transition: all 0.2s ease;
}
.btn-outline-blue:hover {
  background-color: var(--sgs-blue);
  color: #fff;
}