/* 
 * RESPONSIVE DESIGN - Diol Assistenz
 * Styles responsive avancés pour une expérience mobile optimale
 */

/* Variables CSS pour la cohérence */
:root {
  --primary-color: #FF6B00;
  --primary-hover: #e55a00;
  --text-dark: #1f2937;
  --text-light: #6b7280;
  --border-color: #d1d5db;
  --bg-light: #f9fafb;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --transition: all 0.3s ease;
}

/* Reset et base responsive */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Montserrat', sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

/* Container responsive amélioré */
.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Breakpoints personnalisés */
@media (min-width: 640px) {
  .container { padding: 0 1.5rem; }
}

@media (min-width: 768px) {
  .container { padding: 0 2rem; }
}

@media (min-width: 1024px) {
  .container { 
    max-width: 1200px;
    padding: 0 2rem;
  }
}

@media (min-width: 1280px) {
  .container { 
    max-width: 1400px;
    padding: 0 2rem;
  }
}

/* MOBILE FIRST DESIGN - Écrans très petits (jusqu'à 480px) */
@media (max-width: 480px) {
  .container {
    padding: 0 0.75rem;
  }
  
  /* Typographie mobile très petit */
  h1, .text-4xl, .text-5xl {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }
  
  h2, .text-3xl {
    font-size: 1.25rem !important;
    line-height: 1.4 !important;
  }
  
  h3, .text-2xl {
    font-size: 1.125rem !important;
  }
  
  h4, .text-xl {
    font-size: 1rem !important;
  }
  
  p, .text-base {
    font-size: 0.875rem !important;
  }
  
  /* Header ultra compact */
  header .container {
    padding: 0.5rem 0.75rem;
  }
  
  .font-\[\'Pacifico\'\] {
    font-size: 1.25rem !important;
  }
  
  #openAppointmentModal {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.75rem !important;
  }
  
  /* Modals plein écran sur très petits écrans */
  .modal-content {
    margin: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    height: 100vh;
    overflow-y: auto;
  }
  
  /* Formulaires optimisés */
  input, select, textarea, button {
    min-height: 48px; /* Meilleure accessibilité tactile */
    font-size: 16px !important; /* Évite le zoom automatique */
  }
  
  
  
}

/* MOBILE STANDARD - 481px à 767px */
@media (min-width: 481px) and (max-width: 767px) {
  /* Améliorations pour mobiles standards */
  .hero-section {
    min-height: 60vh;
    padding: 3rem 0;
  }
  
  .hero-section h1 {
    font-size: 2rem !important;
  }
  
  
  /* Cards responsive */
  .card, .service-card {
    margin-bottom: 1rem;
  }
  
  /* Navigation améliorée */
  .hidden.md\:flex.mobile-menu-open {
    padding-top: 4rem;
  }
  
  .hidden.md\:flex.mobile-menu-open a {
    padding: 1.25rem 0;
    font-size: 1.1rem;
  }
}

/* TABLETTE PORTRAIT - 768px à 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  
  /* Chatbot tablette */
  #chatWindow {
    width: 400px !important;
    height: 500px !important;
  }
}

/* DESKTOP - 1024px et plus */
@media (min-width: 1024px) {
  /* Navigation desktop */
  .hidden.md\:flex {
    display: flex !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    flex-direction: row !important;
  }
  
  /* Menu hamburger caché sur desktop */
  .md\:hidden {
    display: none !important;
  }
  
  /* Modals desktop */
  .modal-content {
    max-width: 800px;
    margin: 5% auto;
  }
}

/* ÉCRANS LARGES - 1440px et plus */
@media (min-width: 1440px) {
  .container {
    max-width: 1400px;
  }
  
  /* Espacement amélioré */
  .hero-section {
    padding: 5rem 0;
  }
  
  /* Typographie grande taille */
  .hero-section h1 {
    font-size: 3.5rem !important;
  }
}

/* ORIENTATIONS SPÉCIFIQUES */

/* Paysage mobile */
@media (max-width: 767px) and (orientation: landscape) {
  .hero-section {
    min-height: 80vh !important;
  }
  
  .modal-content {
    margin: 1% auto !important;
    max-height: 98vh !important;
  }
  
  /* Header plus compact en paysage */
  header .container {
    padding: 0.5rem 1rem;
  }
  
  #openAppointmentModal {
    padding: 0.375rem 0.875rem !important;
  }
}

/* Portrait tablette */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  .hero-section {
    min-height: 80vh;
  }
  
  .modal-content {
    max-width: 85% !important;
  }
}

/* Focus visible amélioré */
@media (max-width: 767px) {
  *:focus {
    outline: 2px solid var(--primary-color) !important;
    outline-offset: 2px !important;
  }
  
  /* Zones de toucher minimales */
  button, .cursor-pointer, a, input, select {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  
  /* Espacement tactile */
  .space-y-2 > * + * {
    margin-top: 0.75rem !important;
  }
  
  .space-y-3 > * + * {
    margin-top: 1rem !important;
  }
  
  .space-y-4 > * + * {
    margin-top: 1.25rem !important;
  }
}

/* Animations respectant les préférences utilisateur */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Mode sombre system */
@media (prefers-color-scheme: dark) {
  :root {
    --text-dark: #f9fafb;
    --text-light: #d1d5db;
    --bg-light: #1f2937;
    --border-color: #4b5563;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  :root {
    --primary-color: #000;
    --text-dark: #000;
    --text-light: #000;
    --border-color: #000;
  }
  
  button, .btn {
    border: 2px solid #000 !important;
  }
}

/* Print optimisé */
@media print {
  * {
    color: #000 !important;
    background: #fff !important;
  }
  
  .container {
    max-width: none !important;
    padding: 0 !important;
  }
  
  .grid {
    display: block !important;
  }
  
  .grid > * {
    display: block !important;
    margin-bottom: 1rem !important;
    break-inside: avoid !important;
  }
  
  h1, h2, h3 {
    break-after: avoid !important;
  }
  
  /* Masquer les éléments non imprimables */
  header, footer, .modal, button, .btn, 
  #chatbot, nav, .ri-menu-line {
    display: none !important;
  }
}

/* UTILITAIRES RESPONSIVE */

/* Classes helper pour le responsive */
.mobile-only {
  display: block;
}

.tablet-only,
.desktop-only {
  display: none;
}

@media (min-width: 768px) {
  .mobile-only {
    display: none;
  }
  
  .tablet-only {
    display: block;
  }
}

@media (min-width: 1024px) {
  .tablet-only {
    display: none;
  }
  
  .desktop-only {
    display: block;
  }
}

/* Responsive text sizing */
.responsive-text {
  font-size: clamp(0.875rem, 2.5vw, 1.125rem);
}

.responsive-title {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

.responsive-subtitle {
  font-size: clamp(1.125rem, 3vw, 1.5rem);
}

/* Responsive spacing */
.responsive-padding {
  padding: clamp(1rem, 4vw, 3rem);
}

.responsive-margin {
  margin: clamp(0.5rem, 2vw, 2rem);
}

/* Safe area pour les mobiles avec notch */
@supports (padding-top: env(safe-area-inset-top)) {
  .safe-area-top {
    padding-top: calc(1rem + env(safe-area-inset-top));
  }
  
  .safe-area-bottom {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }
}