/*
 * MC GO — identite "Bogolan Sud" : palette terre du Sahel (indigo profond,
 * ocre brule, argile) et motifs geometriques inspires du bogolan malien,
 * en surcouche du theme "Soft UI Dashboard" (Creative Tim, MIT). Ce fichier
 * est charge APRES soft-ui-dashboard.min.css.
 *
 * Note de nommage : les variables --mcgo-green / --mcgo-gold / --mcgo-dark
 * sont un heritage de la premiere identite (vert/or) ; leur NOM n'a pas ete
 * change pour ne pas casser les styles inline qui les referencent un peu
 * partout, mais leurs VALEURS pointent desormais vers la palette Bogolan Sud
 * (indigo / ocre / indigo profond). Utilisez les alias ci-dessous dans ce
 * fichier pour que l'intention reste claire.
 */

:root {
  /* Palette Bogolan Sud */
  --mcgo-indigo: #1E3A5F;
  --mcgo-indigo-deep: #142942;
  --mcgo-ocre: #C98A2C;
  --mcgo-ocre-dark: #A86F1E;
  --mcgo-argile: #A8512E;
  --mcgo-sable: #EFE6D8;
  --mcgo-sable-deep: #E4D7C2;
  --mcgo-ink: #231F18;

  /* Alias herites (voir note ci-dessus) */
  --mcgo-green: var(--mcgo-indigo);
  --mcgo-green-dark: var(--mcgo-indigo-deep);
  --mcgo-dark: var(--mcgo-indigo-deep);
  --mcgo-gold: var(--mcgo-ocre);
}

body {
  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--mcgo-ink);
}
h1, h2, h3, h4, h5, h6,
.font-display {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Bouton de marque MC GO (utilise avec la classe .btn du theme : "btn btn-mcgo") */
.btn-mcgo {
  background-color: var(--mcgo-ocre);
  border-color: var(--mcgo-ocre);
  color: #fff;
  font-weight: 600;
}
.btn-check:focus + .btn-mcgo,
.btn-mcgo:focus,
.btn-mcgo:hover {
  background-color: var(--mcgo-ocre-dark);
  border-color: var(--mcgo-ocre-dark);
  color: #fff;
}
.btn-check:focus + .btn-mcgo,
.btn-mcgo:focus {
  box-shadow: 0 0 0 .2rem rgba(201, 138, 44, .4);
}
.btn-check:active + .btn-mcgo,
.btn-check:checked + .btn-mcgo,
.btn-mcgo.active,
.btn-mcgo:active {
  background-color: var(--mcgo-argile);
  border-color: var(--mcgo-argile);
  color: #fff;
}

/* Frise bogolan : motif geometrique en losanges, utilise en diviseur fin
   entre des sections (hero/contenu, bandeaux). Purement decoratif (CSS,
   aucune image), evoque les bandes tissees du bogolan malien. */
.bogolan-frise {
  height: 10px;
  background-image:
    linear-gradient(45deg, var(--mcgo-ocre) 25%, transparent 25%, transparent 75%, var(--mcgo-ocre) 75%),
    linear-gradient(45deg, var(--mcgo-ocre) 25%, transparent 25%, transparent 75%, var(--mcgo-ocre) 75%);
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
  background-color: var(--mcgo-argile);
  opacity: 0.9;
}

/* Bandeau hero de la page d'accueil : degrade de marque par defaut, ou
   photo reelle choisie par l'admin (admin/settings.php -> parametre
   "hero_image"). Quand une image est utilisee, .has-image l'affiche en
   arriere-plan avec un voile sombre superpose (::before) pour garder le
   texte blanc lisible, sans toucher au balisage du contenu. */
.hero-mcgo {
  background: linear-gradient(155deg, var(--mcgo-indigo-deep) 0%, var(--mcgo-indigo) 62%, var(--mcgo-argile) 130%);
  color: #fff;
  font-family: 'Work Sans', sans-serif;
  border-radius: 0.25rem 1.5rem 0.25rem 1.5rem;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-bottom: 10px solid var(--mcgo-ocre);
}
.hero-mcgo h1 { color: #fff; }
.hero-mcgo > .row {
  width: 100%;
  position: relative;
  z-index: 1;
}
/* Photo de l'aeroport (ou autre) dans le hero : panneau a droite plutot que
   plein fond, avec un fondu qui la fait se fondre dans le degrade indigo du
   hero cote gauche. Coin superieur gauche "entaille" en echo aux contreforts
   de l'architecture en banco (mosquee de Djenne) plutot qu'un rectangle net. */
.hero-image-wrap {
  position: relative;
  height: 420px;
  border-radius: 2.5rem 1rem 1rem 1rem;
  overflow: hidden;
}
.hero-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-image-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--mcgo-indigo-deep) 0%, rgba(20,41,66,.35) 35%, rgba(20,41,66,0) 65%);
}

/* Bandeau secondaire (ex. "Vous gerez un hotel...") integre dans le hero,
   sous le contenu principal : memes couleurs que le hero (fond fonce
   translucide, texte blanc, boutons clairs) au lieu d'une alerte grise
   separee. */
.hero-secondary-band {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 0.25rem 0.75rem 0.25rem 0.75rem;
  padding: 1rem 1.25rem;
}
.hero-secondary-icon {
  font-size: 1.6rem;
  color: var(--mcgo-ocre);
}

/* Bandeau "vehicules" sous le hero : fond ocre, icones des categories
   de vehicule, chacune menant vers la reservation. */
.search-band {
  background: linear-gradient(135deg, var(--mcgo-ocre), var(--mcgo-ocre-dark));
  border-radius: 0.25rem 1.5rem 0.25rem 1.5rem;
  overflow: hidden;
}
.search-band-vehicle img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 0.75rem;
}
.search-band-vehicle i {
  font-size: 2.4rem;
  color: var(--mcgo-indigo-deep);
}
.search-band-vehicle .small {
  color: var(--mcgo-indigo-deep);
}

/* Bandeau promo "devenir chauffeur" sur la page d'accueil */
.driver-promo-band {
  background: var(--mcgo-sable);
  border-radius: 0.25rem 1.5rem 0.25rem 1.5rem;
  border: 1px solid var(--mcgo-sable-deep);
}
.driver-benefits li {
  margin-bottom: 0.5rem;
  font-weight: 500;
}
.driver-benefits i {
  color: var(--mcgo-green);
  margin-right: 0.5rem;
}

/* Cartes cliquables (vitrine des espaces, page d'accueil).
   Pas de height:100% ici : certaines pages empilent plusieurs .space-card
   dans une colonne a cote d'une autre colonne plus haute (ex. detail d'une
   reservation), et .row{display:flex} etirerait alors chaque carte sur
   toute la hauteur de la ligne, creant un grand vide sous le contenu.
   Quand une hauteur egale est voulue (cartes cote a cote), on ajoute la
   classe utilitaire Bootstrap "h-100" directement sur la carte concernee. */
.space-card {
  transition: transform .15s ease, box-shadow .15s ease;
  border-radius: 0.25rem 1.25rem 0.25rem 1.25rem;
  border: 1px solid var(--mcgo-sable-deep);
}
.space-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(35, 31, 24, .1);
}

/* Tuiles de statistiques des tableaux de bord */
.card-stat {
  height: 100%;
}
.card-stat .stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--mcgo-dark);
}

/* En-tete de tableau legerement teinte */
.table thead th {
  background-color: var(--mcgo-sable);
}

/* Fil d'Ariane de suivi d'une reservation */
.timeline {
  list-style: none;
  padding-left: 0;
}
.timeline li {
  position: relative;
  padding-left: 28px;
  padding-bottom: 18px;
  border-left: 2px solid #d7ded9;
  margin-left: 8px;
}
.timeline li:last-child {
  border-left: 2px solid transparent;
}
.timeline li::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--mcgo-green);
}

/* ===================== Assistant de reservation (wizard) ===================== */
.wizard-steps {
  gap: 0.5rem;
}
.wizard-step {
  flex: 1;
  text-align: center;
  padding: 0.6rem 0.25rem;
  border-radius: 0.5rem;
  background: #fff;
  color: #8898aa;
  font-weight: 600;
  font-size: 0.85rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.wizard-step .wizard-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e9ecef;
  color: #8898aa;
  font-size: 0.8rem;
}
.wizard-step.active {
  color: var(--mcgo-dark);
}
.wizard-step.active .wizard-step-num {
  background: var(--mcgo-green);
  color: #fff;
}
.wizard-step.done .wizard-step-num {
  background: var(--mcgo-gold);
  color: #fff;
}

/* Cartes de selection (type de service, vehicule) */
.service-card, .vehicle-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
  border: 2px solid #e9ecef;
  border-radius: 0.75rem;
  padding: 1rem 0.5rem;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
  height: 100%;
}
.service-card i, .vehicle-card i {
  font-size: 1.8rem;
  color: var(--mcgo-green);
}
/* Photo reelle du vehicule (admin/vehicle_categories.php), a la place de
   l'icone quand l'admin en a envoye une. */
.vehicle-card-photo {
  width: 100%;
  max-width: 140px;
  height: 70px;
  object-fit: cover;
  border-radius: 0.5rem;
}
.service-card input, .vehicle-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.service-card:has(input:checked), .vehicle-card:has(input:checked),
.service-card.selected, .vehicle-card.selected {
  border-color: var(--mcgo-ocre);
  background-color: var(--mcgo-sable);
}
.service-card.disabled, .vehicle-card.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
#destinationSuggestions:empty {
  display: none;
}

/* FAQ (page Assistance) : le theme fournit l'accordeon Bootstrap mais sans
   grand relief visuel (pas de cadre, pas de contraste question/reponse).
   On ajoute juste un cadre arrondi par question pour qu'elles se lisent
   comme des cartes cliquables separees, dans le meme esprit que .space-card. */
.accordion-item {
  border: 1px solid #e9ecef !important;
  border-radius: 0.75rem !important;
  overflow: hidden;
  margin-bottom: 0.6rem;
}
.accordion-button {
  font-weight: 600;
}
.accordion-button:not(.collapsed) {
  color: var(--mcgo-indigo-deep) !important;
  background-color: var(--mcgo-sable) !important;
  box-shadow: none !important;
}