/* ================================================
   FIX.CSS - Correctifs Responsive & Multi-appareils
   iPhone, Samsung, Tecno, Tablette, Desktop
   ================================================ */

/* ===== 1. SAFE AREA (iPhone X+) ===== */
@supports (padding-top: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  header {
    padding-top: env(safe-area-inset-top);
  }
}

/* ===== 2. BOUTON MOBILE TOGGLE TOUJOURS VISIBLE SUR < 992px ===== */
@media (max-width: 992px) {
  .mobile-toggle {
    display: flex !important;
  }
}

/* ===== 3. SCROLL HORIZONTAL FIX ===== */
html, body {
  overflow-x: hidden;
  width: 100%;
  -webkit-overflow-scrolling: touch;
}

img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* ===== 4. TOUCH TARGETS MIN 44px (Apple HIG) ===== */
.nav-item,
.btn-header,
button,
select,
input[type="submit"],
.btn-search,
.btn-primary,
.btn-secondary {
  min-height: 44px;
}

/* ===== 5. NO HOVER ON TOUCH DEVICES ===== */
@media (hover: none) and (pointer: coarse) {
  .card:hover,
  .stat-item:hover,
  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-search:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* ===== 6. FIX SAFARI 100vh ===== */
.hero-slider,
.loading-screen,
.modal {
  height: 100vh;
  height: 100dvh;
}

/* ===== 7. FOCUS VISIBLE ACCESSIBILITY ===== */
:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

/* ===== 8. RESPONSIVE: Petits Samsung / Tecno (360-400px) ===== */
@media (max-width: 400px) {
  .header-content {
    padding: 0 8px;
  }
  .header-main {
    padding: 10px 8px;
    gap: 6px;
  }
  .header-logo {
    gap: 8px;
  }
  .header-logo-text h1 {
    font-size: 1rem;
  }
  .header-logo-icon {
    width: 34px;
    height: 34px;
    font-size: 1rem;
  }
  .logo h1 {
    font-size: 1rem;
  }
  .logo i {
    font-size: 1.3rem;
  }
  .btn-header {
    font-size: 0.7rem;
    padding: 6px 8px;
    min-width: auto;
    flex: 0 1 auto;
  }
  .hero-slider {
    height: 200px;
    height: 40dvh;
  }
  .slide-content h2 {
    font-size: 1.1rem;
  }
  .slide-content p {
    font-size: 0.8rem;
  }
  .slide-content button {
    padding: 8px 16px;
    font-size: 0.8rem;
  }
  .hero-search-box {
    padding: 12px;
    margin-top: -20px;
  }
  .hero-search-box h2 {
    font-size: 0.9rem;
  }
  .stats-bar {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .stat-item {
    padding: 12px 8px;
  }
  .stat-item i {
    font-size: 1.3rem;
  }
  .stat-item span {
    font-size: 1.3rem;
  }
  .search {
    padding: 12px;
  }
  .cards {
    grid-template-columns: 1fr;
  }
  .card-header {
    padding: 12px;
  }
  .card-body {
    padding: 10px 12px;
  }
  .card-actions {
    padding: 8px 12px;
    flex-direction: column;
  }
  .card-actions button {
    width: 100%;
    justify-content: center;
  }
  .card-name {
    font-size: 1rem;
  }
  .card-avatar {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
  }
  .quartier-card {
    padding: 14px;
  }
  .quartiers-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .legend-items {
    gap: 8px;
  }
  .legend-item {
    font-size: 0.75rem;
  }
  .filters-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  select, input[type="text"], input[type="tel"], textarea {
    padding: 10px 12px;
    font-size: 0.85rem;
  }
  .btn-search {
    padding: 10px 16px;
    font-size: 0.85rem;
  }
  .footer-content {
    padding: 24px 12px 16px;
    gap: 16px;
  }
  .footer-section h3 {
    font-size: 0.9rem;
  }
  .whatsapp-float {
    width: 44px;
    height: 44px;
    bottom: 16px;
    right: 16px;
    font-size: 1.3rem;
  }
  .scroll-top {
    width: 38px;
    height: 38px;
    bottom: 16px;
    right: 70px;
    font-size: 0.9rem;
  }
  .testimonial-card {
    padding: 16px;
  }
  .testimonial-avatar {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
  }
}

/* ===== 9. TABLETTE (768-1024px) ===== */
@media (min-width: 768px) and (max-width: 1024px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .hero-slider {
    height: 300px;
  }
  .slide-content h2 {
    font-size: 1.6rem;
  }
  .filters-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stats-bar {
    grid-template-columns: repeat(4, 1fr);
  }
  .footer-content {
    grid-template-columns: repeat(2, 1fr);
  }
  .quartiers-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== 10. SAmsung Galaxy S20/S21/S22/S23+ ===== */
@media (min-width: 401px) and (max-width: 480px) {
  .hero-slider {
    height: 240px;
    height: 45dvh;
  }
  .cards {
    grid-template-columns: 1fr;
  }
  .stats-bar {
    grid-template-columns: repeat(2, 1fr);
  }
  .filters-grid {
    grid-template-columns: 1fr;
  }
  .card-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .btn-view {
    flex: 1;
    min-width: 120px;
  }
}

/* ===== 11. iPhone SE / mini (320-375px) ===== */
@media (max-width: 375px) {
  .btn-header {
    font-size: 0.65rem;
    padding: 5px 6px;
  }
  .header-actions {
    gap: 4px;
  }
  .header-logo-text h1 {
    font-size: 0.9rem;
  }
  .header-logo-icon {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }
  .theme-toggle {
    padding: 8px;
    font-size: 1.2rem;
  }
  .hero-search-box h2 {
    font-size: 0.8rem;
  }
  .card-feature {
    font-size: 0.75rem;
    padding: 4px 8px;
  }
  .stars {
    font-size: 0.9rem;
  }
  .rating-text {
    font-size: 0.75rem;
  }
}

/* ===== 12. PREVENT ZOOM ON INPUT FOCUS (iOS) ===== */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  select,
  input,
  textarea {
    font-size: 16px !important;
  }
}

/* ===== 13. FIX BOOT STRETCHING (Tecno, Infinix) ===== */
@media (max-width: 360px) {
  .header-actions {
    flex-wrap: nowrap;
    gap: 4px;
  }
  .header-main {
    padding: 8px 6px;
    gap: 4px;
  }
  .header-logo {
    gap: 6px;
  }
  .header-logo-text h1 {
    font-size: 0.85rem;
  }
  .header-logo-icon {
    width: 30px;
    height: 30px;
    font-size: 0.85rem;
  }
  .theme-toggle {
    padding: 6px;
    font-size: 1.1rem;
  }
  .btn-header {
    padding: 4px 6px;
    font-size: 0.6rem;
    min-height: 36px;
  }
  .logo h1 {
    font-size: 0.85rem;
  }
  .logo i {
    font-size: 1.1rem;
  }
  .main-nav {
    width: 100% !important;
    padding: 60px 12px 16px !important;
  }
}

/* ===== 14. DESKTOP RESPONSIVE NAV (pas de hamburger) ===== */
@media (min-width: 993px) {
  .hamburger {
    display: none !important;
  }
  .main-nav {
    display: flex !important;
    position: static !important;
    flex-direction: row !important;
    width: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
}

/* ===== 15. LANDSCAPE MODE FIX ===== */
@media (max-height: 480px) and (orientation: landscape) {
  .hero-slider {
    height: 180px;
    height: 60dvh;
  }
  .slide-content h2 {
    font-size: 1.1rem;
  }
  .slide-content p {
    display: none;
  }
  .header-top-bar {
    display: none;
  }
  .stats-bar {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }
  .stat-item {
    padding: 8px;
  }
  .stat-item span {
    font-size: 1rem;
  }
  .stat-item p {
    font-size: 0.65rem;
  }
}

/* ===== 16. SMOOTH TOUCH SCROLLING ===== */
* {
  -webkit-tap-highlight-color: transparent;
}

/* ===== 17. FIX iOS INPUT SHADOWS ===== */
input, textarea {
  -webkit-appearance: none;
  appearance: none;
  border-radius: var(--radius-sm);
}