/* ==============================================
   AGENT #21 — RESPONSIVE FIX — tourakdigital.ma
   Date: 2026-06-06
   Scope: assets/css/ uniquement
   ============================================== */

/* -----------------------------------------------
   1. RTL — Breadcrumb séparateur (BUG CRITIQUE M3)
      margin-left → margin-right en RTL
      Rapport agent #7 ligne 973
   ----------------------------------------------- */
.breadcrumb li + li::before {
  /* RTL: le séparateur doit être à droite du texte précédent */
  margin-left: 0;
  margin-right: 8px;
}

/* -----------------------------------------------
   2. RTL MOBILE — WhatsApp float position (BUG m4)
      left:16px → right:16px en RTL sur mobile
      Rapport agent #7 ligne 1576
   ----------------------------------------------- */
@media (max-width: 768px) {
  .whatsapp-float {
    /* En RTL, les éléments flottants se placent à droite (côté fin) */
    left: auto !important;
    right: 16px !important;
  }
}

/* -----------------------------------------------
   3. TAP TARGETS MOBILE — min 44px (WCAG 2.5.5)
      mobile-nav-item: padding 6px = ~30px de hauteur
   ----------------------------------------------- */
@media (max-width: 768px) {
  /* Bottom nav items */
  .mobile-nav-item {
    min-height: 44px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
  }

  /* Hamburger button */
  .hamburger {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Nav links dans menu mobile */
  .nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Boutons CTA principaux */
  .btn,
  button[type="submit"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Inputs de formulaire */
  .form-control,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  select,
  textarea {
    min-height: 44px;
    padding: 12px 16px;
    box-sizing: border-box;
  }
}

/* -----------------------------------------------
   4. OVERFLOW HORIZONTAL — Protection globale RTL
   ----------------------------------------------- */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Images et médias fluides */
img, video, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

/* -----------------------------------------------
   5. RTL — Propriétés logiques pour meilleur
      support bidirectionnel sur mobile
   ----------------------------------------------- */
@media (max-width: 768px) {
  /* Padding container en RTL */
  .container {
    padding-right: 16px;
    padding-left: 16px;
  }

  /* Hero centré en mobile */
  .hero {
    text-align: center;
  }
  .hero-title,
  .hero-subtitle {
    text-align: center;
  }
  .hero-actions {
    justify-content: center;
  }

  /* Footer cities en RTL */
  .footer-cities {
    direction: rtl;
    text-align: right;
  }

  /* Stats — flex-wrap pour petit écran */
  .hero-stats {
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
  }
  .stat-item {
    text-align: center;
  }

  /* Sections — word-break pour texte arabe long */
  h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  p, li, .service-desc, .service-description {
    overflow-wrap: break-word;
    line-height: 1.9;
  }
}

/* -----------------------------------------------
   6. GRILLES — Sécurisation sur petit écran
      Certaines grilles en 1fr 1fr sans override <480px
   ----------------------------------------------- */
@media (max-width: 480px) {
  /* Zone grid (pays/régions) */
  .zone-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  /* Process grid → 1 colonne sur très petit écran */
  .process-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* About card stack */
  .about-card-stack {
    grid-template-columns: 1fr;
  }

  /* Boutons pleine largeur sur très petit écran */
  .hero-actions .btn,
  .cta-actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Pricing cards padding réduit */
  .pricing-card {
    padding: 1.5rem 1rem;
  }

  /* Footer bottom centré */
  .footer-bottom-content {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }
  .footer-legal {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
  }

  /* Footer cities — 2 colonnes sur 480px */
  .footer-cities {
    column-count: 2;
  }
}

/* -----------------------------------------------
   7. TABLETTE 769-1024px — Ajustements
   ----------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Services grid 2 colonnes tablette */
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* About grid 1 colonne tablette */
  .about-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* Contact grid 1 colonne tablette */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* -----------------------------------------------
   8. LIGHT MODE — Fix hover service-link (BUG M2)
      .service-link:hover { color:white } → invisible
      Rapport agent #7 ligne 605
   ----------------------------------------------- */
[data-theme="light"] .service-link:hover {
  color: var(--primary) !important;
}

/* -----------------------------------------------
   9. SAFE AREA — Notch / iPhone (bottom nav)
   ----------------------------------------------- */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mobile-bottom-nav {
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
  }
  .site-footer {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }
}

/* -----------------------------------------------
   10. AOS FALLBACK RTL — Guard FOUC (BUG CRITIQUE C2)
       Header .ma n'a pas de guard tk-ready
       Ajouté ici en fallback CSS pur
   ----------------------------------------------- */
body:not(.aos-ready) [data-aos] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Timeout CSS 3s — si AOS JS trop lent */
@keyframes aos-reveal {
  to {
    opacity: 1;
    transform: none;
  }
}

[data-aos] {
  animation: aos-reveal 0.01s 3s forwards;
}

body.aos-ready [data-aos] {
  animation: none;
}