/* ===========================
   VARIABLES & BASE
=========================== */
:root{
  --brand:#f97316;      /* Orange principal */
  --brand-600:#ea6a0a;  /* Hover/active */
  --ink:#0f172a;        /* Texte principal */
  --muted:#64748b;      /* Texte secondaire */
  --bg:#f6f8fb;         /* Fond global */
}

html,body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
}
body{
  background:var(--bg);
  margin:0;
  padding:0;
}

/* ===========================
   BOUTONS & LIENS
=========================== */
.btn-brand{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
}
.btn-brand:hover{
  background:var(--brand-600);
  border-color:var(--brand-600);
  color:#fff;
}
.link-brand{
  color:var(--brand);
  text-decoration:none;
}
.link-brand:hover{
  color:var(--brand-600);
  text-decoration:underline;
}
.badge-brand{
  background:var(--brand);
  color:#fff;
}
.navbar.sticky-shadow{
  box-shadow:0 6px 24px rgba(2,8,23,.08);
}

/* ===========================
   NAV PRINCIPALE
=========================== */
.nav-blue{background:var(--brand);}
.nav-blue .navbar-toggler{filter:invert(1);}
.nav-links-white .nav-link{
  color:#fff;
  font-weight:500;
  letter-spacing:.2px;
}
.nav-links-white .nav-link:hover{
  color:#fff;
  opacity:.85;
}

/* ===========================
   BARRE DE RECHERCHE
   (sous la nav, style Ticketmaster)
=========================== */
.nav-search-wrap{
  background:var(--brand);
  padding:30px 0 20px; 
}
.tm-search{
  display:flex;
  align-items:center;
  gap:0;
  background:#fff;
  border-radius:.6rem;
  padding:.35rem;
  border:4px solid rgba(255,255,255,.6);
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.tm-cell{
  display:flex;
  align-items:center;
  padding:.35rem .6rem;
}
.tm-cell-icon{
  color:var(--brand);
  font-size:1.1rem;
}
.tm-label{
  font-size:.7rem;
  color:#64748b;
  display:block;
  margin-bottom:2px;
}
.tm-input{
  border:0;
  box-shadow:none;
  padding:0;
  height:auto;
  background:transparent;
}
.tm-input:focus{box-shadow:none;}
.tm-divider{
  width:1px;
  height:32px;
  background:#e5e7eb;
}
.tm-btn{
  padding:.5rem 1rem;
  border-radius:.5rem;
  font-weight:600;
  color:#000;
  background:#f9fafb;
  transition:.2s ease;
}
.tm-btn:hover{background:#f3f4f6;}

@media (max-width:991.98px){
  .tm-search{flex-wrap:wrap;gap:.5rem;border-width:3px;}
  .tm-divider{display:none;}
  .tm-cell{flex:1 1 100%;}
  .tm-cell-icon{display:none;}
  .tm-cell:last-child{flex:0 0 auto;}
}

/* ===========================
   HERO
=========================== */
.hero{
  position:relative;
  min-height:46vh;
  display:grid;
  place-items:center;
  color:#fff;
  background:#0f172a;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,#111827 0%,#0b1220 100%),
    url('/assets/img/hero-sidiki.png') center/cover;
  opacity:.55;
}
.hero>*{position:relative;z-index:1;}
@media (max-width:575.98px){
  .hero{min-height:40vh;}
}

/* ===========================
   TITRES & TEXTES DE SECTION
=========================== */
.section-title{
  font-weight:800;
  color:var(--ink);
}
.section-sub{
  color:var(--muted);
  font-size:.9rem;
}

/* ===========================
   CARTES (Catégories / Événements / Villes)
=========================== */
.event-card{
  box-shadow:none;
  transition:transform .22s ease, box-shadow .22s ease;
  border-radius:.6rem;
  overflow:hidden;
  background:#fff;
}
.event-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(2,8,23,.12);
}
.thumb{
  display:block;
  width:100%;
  transition:transform .35s ease, filter .35s ease;
}
.event-card:hover .thumb{
  transform:scale(1.03);
  filter:brightness(1.02);
}
.event-card .card-body h3{
  font-size:.95rem;
  font-weight:600;
  color:var(--ink);
}
.event-card .card-body p{
  margin:0;
  color:var(--muted);
}

.event-card:focus-within,
.event-card:focus{
  outline:2px solid rgba(249,115,22,.6);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  .event-card,
  .thumb{
    transition:none !important;
  }
}
/* ===========================
   FOOTER
=========================== */
.footer{
  background:#0f172a;
  color:#cbd5e1;
  font-size:.85rem;
  padding-top:15px !important;
  padding-bottom:10px !important;
}
.footer a{
  color:#cbd5e1;
  text-decoration:none;
}
.footer a:hover{
  color:#fff;
  text-decoration:underline;
}

/* ===========================
   BOUTON BACK TO TOP
=========================== */
#toTop{
  position:fixed;
  right:16px;
  bottom:16px;
  display:none;
  z-index:100;
  background:#0f172a;
  border:none;
  color:#fff;
}
#toTop:hover{opacity:.9;}