@tailwind base;
@tailwind components;
@tailwind utilities;

/* ===== BASE ===== */
* { box-sizing: border-box; }

html {
  overflow-x: hidden;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: #1e293b;
  overflow-x: hidden;
  max-width: 100vw;
}

/* Ensure all sections are truly full-width */
section, header, footer {
  max-width: 100vw;
  overflow-x: hidden;
}

/* ===== HEADER ===== */
.nav-link {
  @apply text-sm font-medium transition-all duration-200;
  color: #475569; /* slate-600 */
}

.nav-link:hover {
  color: #0ea5e9; /* sky-500 */
  background: rgba(241, 245, 249, 0.8); /* slate-50 */
}

.nav-link.active {
  color: #0ea5e9; /* sky-500 */
  background: rgba(14, 165, 233, 0.08);
}

/* ===== HERO ===== */
.hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, #0284c7 50%, var(--color-primary-dark) 100%);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

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

/* ===== CARDS ===== */
.card {
  @apply bg-white rounded-2xl shadow-md hover:shadow-xl transition-shadow duration-300 overflow-hidden;
}

.card-blue { border-top: 4px solid var(--color-primary); }
.card-green { border-top: 4px solid var(--color-green); }
.card-orange { border-top: 4px solid var(--color-orange); }

/* ===== PROJECT GRID ===== */
.project-card {
  @apply card card-green p-6 text-center hover:-translate-y-1 transition-transform duration-300;
}

.project-card .project-icon {
  @apply text-5xl mb-4;
}

.project-card h3 {
  @apply text-lg font-bold text-slate-800 mb-2;
}

.project-card p {
  @apply text-slate-600 text-sm;
}

/* ===== PARTNER LOGOS ===== */
.partner-logo {
  @apply bg-white rounded-xl p-4 flex items-center justify-center border-2 border-slate-100 hover:border-sky-200 hover:shadow-md transition-all duration-200 h-24;
}

.partner-logo img {
  max-height: 60px;
  object-fit: contain;
}

/* ===== TAXI FORM ===== */
.taxi-form {
  @apply bg-white rounded-2xl shadow-lg p-8;
}

.form-group {
  @apply mb-5;
}

.form-label {
  @apply block text-sm font-semibold text-slate-700 mb-2;
}

.form-input, .form-select {
  @apply w-full border border-slate-200 rounded-lg px-4 py-3 text-slate-800 focus:border-sky-400 focus:ring-2 focus:ring-sky-100 outline-none transition-all;
}

.form-input:focus, .form-select:focus {
  @apply border-sky-400 ring-2 ring-sky-100;
}

/* ===== BUTTONS ===== */
.btn {
  @apply inline-flex items-center gap-2 px-6 py-3 rounded-xl font-semibold transition-all duration-200;
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  @apply text-white hover:shadow-lg hover:-translate-y-0.5;
}

.btn-green {
  background: linear-gradient(135deg, var(--color-green), var(--color-green-dark));
  @apply text-white hover:shadow-lg hover:-translate-y-0.5;
}

.btn-orange {
  background: linear-gradient(135deg, var(--color-orange), #ea580c);
  @apply text-white hover:shadow-lg hover:-translate-y-0.5;
}

.btn-outline {
  @apply border-2 border-white/50 text-white hover:bg-white/10 rounded-xl px-6 py-3 font-semibold transition-all duration-200;
}

/* ===== ANNOUNCEMENT MARQUEE ===== */
.marquee-container {
  background: linear-gradient(90deg, var(--color-orange), #ea580c);
  overflow: hidden;
  white-space: nowrap;
}

.marquee-text {
  display: inline-block;
  animation: marquee 25s linear infinite;
  @apply text-white font-medium;
}

@keyframes marquee {
  0% { transform: translateX(100vw); }
  100% { transform: translateX(-100%); }
}

/* ===== LANGUAGE SWITCHER ===== */
.lang-btn {
  @apply text-sm rounded-md font-medium transition-all duration-200;
  color: #64748b; /* slate-500 */
}

.lang-btn:hover {
  color: #0ea5e9; /* sky-500 */
  background: rgba(14, 165, 233, 0.08);
}

.lang-btn.active {
  color: #0ea5e9; /* sky-500 */
  background: rgba(14, 165, 233, 0.12);
}

/* ===== EDITABLE ORANGE BOX ===== */
.editable-box {
  border: 2px dashed var(--color-orange);
  @apply bg-orange-50 rounded-xl p-6;
  position: relative;
}

.editable-box::before {
  content: '✏️ Zone éditable';
  @apply absolute -top-3 right-3 text-xs bg-orange-500 text-white px-2 py-1 rounded-full;
}

/* ===== FOOTER ===== */
.site-footer {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  @apply text-slate-300;
}

.site-footer a {
  @apply hover:text-white transition-colors;
}

/* ===== STATS ===== */
.stat-item {
  @apply text-center;
}

.stat-number {
  @apply text-4xl font-bold text-white mb-1;
}

.stat-label {
  @apply text-sky-200 text-sm font-medium uppercase tracking-wide;
}

/* ===== SECTION STYLES ===== */
.section-title {
  @apply text-3xl font-bold text-slate-800 mb-4;
}

.section-subtitle {
  @apply text-slate-600 text-lg mb-12 max-w-2xl mx-auto;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .nav-link {
    @apply px-3 py-2 text-sm;
  }
  
  .hero h1 {
    @apply text-3xl;
  }
}

/* ===== BLOG CARD ===== */
.blog-card {
  @apply card p-0 overflow-hidden;
}

.blog-card img {
  @apply w-full h-48 object-cover;
}

.blog-card-body {
  @apply p-5;
}

.blog-card-title {
  @apply font-bold text-lg text-slate-800 mb-2;
}

.blog-card-excerpt {
  @apply text-slate-600 text-sm line-clamp-3;
}

/* ===== MEMBERSHIP BENEFITS ===== */
.benefit-item {
  @apply flex items-start gap-4 mb-5;
}

.benefit-icon {
  @apply w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-2xl flex-shrink-0;
}

/* ===== DISCOUNT BADGE ===== */
.discount-badge {
  background: linear-gradient(135deg, var(--color-orange), #ea580c);
  @apply text-white rounded-full px-6 py-3 font-semibold text-center;
}

/* ===== MOBILE MENU ===== */
.mobile-menu {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.98);
  z-index: 9999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  display: none;
  overflow: hidden;
}

.mobile-menu.open {
  display: flex;
}

/* ===== PAGE TRANSITIONS ===== */
.page-section {
  animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== ANT DESIGN SVG ICONS ===== */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: middle;
  flex-shrink: 0;
}
.icon-lg {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  fill: currentColor;
  vertical-align: middle;
}
.icon-xl {
  display: inline-block;
  width: 2em;
  height: 2em;
  fill: currentColor;
  vertical-align: middle;
}
.icon-2xl {
  display: inline-block;
  width: 2.5em;
  height: 2.5em;
  fill: currentColor;
  vertical-align: middle;
}
.icon-3xl {
  display: inline-block;
  width: 3em;
  height: 3em;
  fill: currentColor;
  vertical-align: middle;
}
.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  flex-shrink: 0;
}
.icon-box-lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
  flex-shrink: 0;
}