/* ============================================
   AMÉLIORATIONS RESPONSIVE - TABLETTES & iOS
   ============================================ */

/* Variables CSS pour une meilleure gestion */
:root {
  --spacing-mobile: 16px;
  --spacing-tablet: 24px;
  --spacing-desktop: 48px;
}

/* ===== TABLETTES (768px - 1024px) ===== */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Layout général */
  .container { 
    padding: 0 var(--spacing-tablet) !important; 
    max-width: 90% !important;
  }
  
  /* Typographie tablette */
  h1 { font-size: 36px !important; line-height: 1.3 !important; }
  h2 { font-size: 28px !important; }
  h3 { font-size: 22px !important; }
  p { font-size: 16px !important; line-height: 1.7 !important; }
  
  /* Grilles tablette */
  .feat-grid { 
    grid-template-columns: repeat(2, 1fr) !important; 
    gap: 24px !important;
  }
  
  /* Hero section tablette */
  .hero { 
    padding: 60px 24px !important; 
    min-height: 60vh !important;
  }
  
  /* Boutons tablette */
  .cta-btn { 
    padding: 14px 32px !important; 
    font-size: 15px !important;
  }
  
  /* Navigation tablette */
  nav { 
    padding: 16px 24px !important;
  }
}

/* ===== iPAD PORTRAIT (768px - 834px) ===== */
@media (min-width: 768px) and (max-width: 834px) and (orientation: portrait) {
  .hero-content { 
    max-width: 85% !important; 
    padding: 40px 20px !important;
  }
  
  .thought-card { 
    padding: 28px !important; 
    margin: 0 20px !important;
  }
  
  /* Player audio adapté iPad */
  .audio-player { 
    width: 90% !important; 
    max-width: 600px !important;
  }
}

/* ===== iPAD LANDSCAPE (1024px+) ===== */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
  .container { 
    max-width: 95% !important;
  }
  
  .hero { 
    padding: 80px 48px !important;
  }
  
  .feat-grid { 
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ===== MOBILE (max 767px) - Améliorations iOS ===== */
@media (max-width: 767px) {
  /* Optimisation tactile iOS */
  button, a, .cta-btn { 
    min-height: 44px !important; /* Apple HIG recommendation */
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
  }
  
  /* Typography mobile optimisée */
  body { 
    font-size: 15px !important; 
    -webkit-text-size-adjust: 100%; /* Empêche le zoom iOS */
  }
  
  h1 { font-size: 28px !important; line-height: 1.2 !important; }
  h2 { font-size: 22px !important; }
  
  /* Container mobile */
  .container { 
    padding: 0 var(--spacing-mobile) !important;
  }
  
  /* Hero mobile */
  .hero { 
    padding: 40px 16px !important; 
    min-height: 70vh !important;
  }
  
  /* Grille mobile (1 colonne) */
  .feat-grid { 
    grid-template-columns: 1fr !important; 
    gap: 16px !important;
  }
  
  /* Boutons mobile iOS */
  .cta-btn { 
    padding: 14px 24px !important; 
    font-size: 16px !important; /* Empêche le zoom iOS sur focus */
    width: 100% !important;
    max-width: 320px !important;
  }
  
  /* Navigation mobile */
  nav { 
    padding: 12px 16px !important;
  }
  
  /* Pensée du jour mobile */
  .thought-card { 
    padding: 20px !important; 
    margin: 0 12px !important;
  }
  
  /* Audio player mobile */
  .audio-player { 
    width: 100% !important; 
    padding: 16px !important;
  }
  
  /* Footer mobile */
  footer { 
    padding: 28px 12px !important; 
    font-size: 12px !important;
  }
}

/* ===== iPHONE STANDARD (375px - 428px) ===== */
@media (min-width: 375px) and (max-width: 428px) {
  .hero-title { 
    font-size: 32px !important;
  }
  
  .thought-text { 
    font-size: 17px !important; /* Taille optimale lecture iOS */
    line-height: 1.6 !important;
  }
}

/* ===== iPHONE MINI & SE (max 375px) ===== */
@media (max-width: 375px) {
  h1 { font-size: 24px !important; }
  h2 { font-size: 20px !important; }
  
  .hero { 
    padding: 32px 12px !important;
  }
  
  .thought-card { 
    padding: 16px !important;
  }
  
  .cta-btn { 
    padding: 12px 20px !important; 
    font-size: 15px !important;
  }
}

/* ===== SAFE AREAS iOS (Notch, Dynamic Island) ===== */
@supports (padding: max(0px)) {
  body {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-top: max(0px, env(safe-area-inset-top));
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
  
  nav {
    padding-top: max(12px, env(safe-area-inset-top)) !important;
  }
  
  footer {
    padding-bottom: max(28px, env(safe-area-inset-bottom)) !important;
  }
}

/* ===== OPTIMISATIONS iOS GÉNÉRALES ===== */
* {
  /* Scroll fluide iOS */
  -webkit-overflow-scrolling: touch;
  
  /* Désactiver la sélection de texte sur les boutons */
  -webkit-touch-callout: none;
}

input, textarea, select {
  /* Empêcher le zoom sur focus iOS */
  font-size: 16px !important;
  
  /* Styles iOS natifs */
  -webkit-appearance: none;
  border-radius: 8px;
}

/* Améliorer les transitions sur iOS */
button, a, .cta-btn {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== DARK MODE iOS ===== */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --text: #FFFFFF;
    --dim: #A0A0A0;
  }
}

/* ===== PRINT (Bonus) ===== */
@media print {
  nav, footer, .cta-btn, .audio-player { 
    display: none !important;
  }
  
  body { 
    color: #000 !important; 
    background: #fff !important;
  }
}