/* =================================================
   CORRECTIONS iOS ET COMPATIBILITÉ iPhone
   Spécialement optimisé pour iPhone 15 et autres modèles
   ================================================= */

/* Variables iOS spécifiques */
:root {
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);
  
  /* iPhone 15 Dynamic Island compensation */
  --dynamic-island-offset: max(env(safe-area-inset-top), 47px);
}

/* =================================================
   CORRECTIONS GÉNÉRALES iOS Safari
   ================================================= */

/* Correction du scroll bounce iOS */
body {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
  /* Éviter le zoom accidentel */
  touch-action: manipulation;
}

/* Optimisations de performance pour iOS */
* {
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}

/* Amélioration du tap highlight */
* {
  -webkit-tap-highlight-color: rgba(0, 229, 232, 0.2);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Permettre la sélection de texte pour les contenus */
p, span, div, h1, h2, h3, h4, h5, h6 {
  -webkit-user-select: text;
  user-select: text;
}

/* =================================================
   GESTION DES SAFE AREAS - iPhone avec Dynamic Island/Notch
   ================================================= */

/* Header adapté aux safe areas */
.site-header {
  padding-top: calc(15px + var(--safe-area-inset-top));
  padding-left: var(--safe-area-inset-left);
  padding-right: var(--safe-area-inset-right);
}

/* Container principal avec safe areas */
.container {
  padding-left: max(15px, var(--safe-area-inset-left));
  padding-right: max(15px, var(--safe-area-inset-right));
}

/* Menu mobile avec gestion des safe areas */
.mobile-menu-overlay {
  padding-top: var(--safe-area-inset-top);
  padding-bottom: var(--safe-area-inset-bottom);
  padding-left: var(--safe-area-inset-left);
  padding-right: var(--safe-area-inset-right);
}

.mobile-menu-close {
  top: calc(2rem + var(--safe-area-inset-top));
  right: calc(2rem + var(--safe-area-inset-right));
}

/* Footer avec safe area bottom */
.site-footer {
  padding-bottom: calc(1.5rem + var(--safe-area-inset-bottom));
}

/* =================================================
   MEDIA QUERIES SPÉCIFIQUES iPhone
   ================================================= */

/* iPhone 15 Pro Max (430x932) */
@media only screen 
  and (device-width: 430px) 
  and (device-height: 932px) 
  and (-webkit-device-pixel-ratio: 3) {
  
  :root {
    --mobile-padding: 20px;
    --mobile-title-size: 1.9rem;
  }
  
  .home-banner-title {
    font-size: 2rem;
    margin-top: 1rem;
  }
  
  .expert-card {
    min-height: 200px;
  }
}

/* iPhone 15 Pro (393x852) */
@media only screen 
  and (device-width: 393px) 
  and (device-height: 852px) 
  and (-webkit-device-pixel-ratio: 3) {
  
  :root {
    --mobile-padding: 18px;
    --mobile-title-size: 1.8rem;
  }
  
  .expert-card {
    min-height: 185px;
  }
}

/* iPhone 15 (393x852) */
@media only screen 
  and (device-width: 393px) 
  and (device-height: 852px) 
  and (-webkit-device-pixel-ratio: 2) {
  
  :root {
    --mobile-padding: 18px;
  }
  
  .expert-card {
    min-height: 185px;
  }
}

/* iPhone 14 Pro Max (430x932) */
@media only screen 
  and (device-width: 430px) 
  and (device-height: 932px) 
  and (-webkit-device-pixel-ratio: 3) {
  
  .expert-card {
    min-height: 195px;
  }
}

/* iPhone 13/14 (390x844) */
@media only screen 
  and (device-width: 390px) 
  and (device-height: 844px) 
  and (-webkit-device-pixel-ratio: 3) {
  
  :root {
    --mobile-padding: 16px;
  }
  
  .expert-card {
    min-height: 180px;
  }
}

/* iPhone 12 mini (375x812) */
@media only screen 
  and (device-width: 375px) 
  and (device-height: 812px) 
  and (-webkit-device-pixel-ratio: 3) {
  
  :root {
    --mobile-padding: 15px;
    --mobile-title-size: 1.7rem;
    --mobile-text-size: 0.85rem;
  }
  
  .expert-card {
    min-height: 170px;
  }
  
  .expert-name {
    font-size: 0.9rem;
  }
  
  .expert-title {
    font-size: 0.6rem;
  }
}

/* =================================================
   CORRECTIONS SPÉCIFIQUES Safari iOS
   ================================================= */

/* Position sticky fix pour iOS Safari */
.site-header {
  position: -webkit-sticky;
  position: sticky;
  /* Force hardware acceleration */
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

/* Scrolling amélioré sur iOS */
.mobile-menu-overlay,
.podcasts-grid-container {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Fix pour les boutons iOS */
button, .btn, input[type="submit"] {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  /* Force le style custom */
  background-clip: padding-box;
}

/* Amélioration des zones de touch pour iPhone */
@media (max-width: 767px) {
  .mobile-nav-links a,
  .btn,
  .retry-btn,
  .podcast-actions .btn {
    min-height: 48px; /* Recommandation Apple */
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .mobile-menu-toggle {
    min-height: 48px;
    min-width: 48px;
    padding: 12px;
  }
}

/* =================================================
   OPTIMISATIONS PERFORMANCE iOS
   ================================================= */

/* Accélération matérielle pour les animations */
.podcast-card,
.expert-card,
.mobile-menu-overlay,
.mobile-nav-links a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

/* Optimisation des transitions pour iOS */
.podcast-card:hover,
.expert-card:hover,
.btn:hover {
  -webkit-transform: translate3d(0, -2px, 0);
  transform: translate3d(0, -2px, 0);
}

/* =================================================
   CORRECTIONS LAYOUT SPÉCIFIQUES iOS
   ================================================= */

/* Fix pour le viewport height sur iOS Safari */
@supports (-webkit-touch-callout: none) {
  .mobile-menu-overlay {
    height: -webkit-fill-available;
    min-height: 100vh;
  }
}

/* Correction de la grille des experts pour iPhone */
@media (max-width: 430px) {
  .experts-grid {
    padding: 0.8rem;
    gap: 0.6rem;
    /* Assurer que la grille s'affiche bien sur tous les iPhone */
    display: grid !important;
    grid-template-columns: 1fr 1fr;
  }
  
  .expert-card {
    min-height: 180px;
    max-height: 220px;
  }
  
  .expert-info {
    padding: 0.7rem;
  }
  
  .expert-name {
    font-size: 0.95rem;
  }
  
  .expert-title {
    font-size: 0.6rem;
    line-height: 1.1;
  }
  
  .expert-stats {
    font-size: 0.55rem;
  }
  
  .btn-expert {
    font-size: 0.55rem;
    padding: 0.25rem 0.5rem;
  }
}

/* =================================================
   MODE PAYSAGE OPTIMISÉ iOS
   ================================================= */

/* Landscape mode pour iPhone */
@media (max-width: 932px) and (orientation: landscape) {
  .site-header {
    padding-top: calc(10px + var(--safe-area-inset-top));
  }
  
  .mobile-menu-overlay {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .mobile-menu-content {
    padding: 1rem;
    margin-top: var(--safe-area-inset-top);
  }
  
  .home-banner {
    padding: 1.5rem 0;
  }
  
  .home-banner-title {
    font-size: 1.6rem;
    margin-bottom: 1rem;
  }
  
  .experts-grid {
    min-height: 140px;
    gap: 0.4rem;
  }
  
  .expert-card {
    min-height: 140px;
  }
}

/* =================================================
   DEBUG POUR DÉVELOPPEMENT (à retirer en production)
   ================================================= */

/* Visualiser les safe areas pendant le développement */
/*
.debug-safe-areas::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--safe-area-inset-top);
  background: rgba(255, 0, 0, 0.3);
  z-index: 9999;
  pointer-events: none;
}

.debug-safe-areas::after {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--safe-area-inset-bottom);
  background: rgba(0, 255, 0, 0.3);
  z-index: 9999;
  pointer-events: none;
}
*/

/* =================================================
   CORRECTIONS SPÉCIFIQUES GRILLE PODCASTS iOS
   ================================================= */

/* Amélioration de la grille des podcasts pour iPhone */
@media (max-width: 767px) {
  .podcasts-grid-container {
    /* Force une colonne sur tous les iPhone */
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 1.5rem;
    padding: 2rem max(var(--mobile-padding), var(--safe-area-inset-left));
    padding-bottom: calc(2rem + var(--safe-area-inset-bottom));
  }
  
  /* Optimisation des cards podcasts pour iOS */
  .podcast-card {
    /* Force hardware acceleration */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    will-change: transform;
    /* Amélioration du rendu sur iOS */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  /* Images des podcasts optimisées iOS */
  .podcast-image img {
    /* Amélioration du rendu des images sur iOS */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
  
  /* Boutons podcasts adaptés iOS */
  .podcast-actions .btn {
    /* Zones de touch optimisées iPhone */
    min-height: 48px;
    min-width: 120px;
    -webkit-tap-highlight-color: rgba(0, 229, 232, 0.2);
    /* Correction du style iOS */
    -webkit-appearance: none;
    appearance: none;
  }
  
  /* Status messages adaptés iOS */
  .status-message {
    padding: 3rem max(var(--mobile-padding), var(--safe-area-inset-left));
    padding-bottom: calc(3rem + var(--safe-area-inset-bottom));
  }
}

/* =================================================
   CORRECTIONS SPÉCIFIQUES POUR GRILLE EXPERTS iOS
   ================================================= */

/* Amélioration de la grille des experts pour tous les iPhone */
@media (max-width: 767px) {
  .experts-grid {
    /* Gestion des safe areas */
    margin-left: var(--safe-area-inset-left);
    margin-right: var(--safe-area-inset-right);
    padding: 1rem;
    /* Force la grille 2x2 */
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem;
    /* Optimisations iOS */
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  
  /* Expert cards optimisées pour iPhone */
  .expert-card {
    /* Performance iOS */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    will-change: transform;
  }
  
  /* Images des experts optimisées iOS */
  .expert-image {
    /* Amélioration du rendu des images rondes */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    image-rendering: -webkit-optimize-contrast;
    /* Force l'anti-aliasing pour les bordures rondes */
    -webkit-border-radius: 50%;
    border-radius: 50%;
  }
  
  /* Boutons experts optimisés iOS */
  .btn-expert {
    /* Zone de touch optimisée iPhone */
    min-height: 44px;
    -webkit-tap-highlight-color: rgba(0, 229, 232, 0.2);
    /* Correction du style iOS */
    -webkit-appearance: none;
    appearance: none;
  }
}

/* Adaptations spécifiques pour iPhone mini */
@media only screen 
  and (device-width: 375px) 
  and (device-height: 812px) 
  and (-webkit-device-pixel-ratio: 3) {
  
  .experts-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1rem 0.5rem;
  }
  
  .expert-image {
    width: 70px;
    height: 70px;
    border: 2px solid var(--primary-color);
  }
  
  .expert-name {
    font-size: 0.9rem;
  }
  
  .expert-title {
    font-size: 0.65rem;
  }
  
  .expert-stats {
    font-size: 0.6rem;
  }
  
  .btn-expert {
    font-size: 0.65rem;
    padding: 0.4rem 0.8rem;
    min-width: 70px;
  }
}

/* =================================================
   CORRECTIONS SCROLLING ET NAVIGATION iOS
   ================================================= */

/* Amélioration du scroll général sur iOS */
body, html {
  /* Scroll bounce iOS amélioré */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: none;
  scroll-behavior: smooth;
}

/* Navigation mobile optimisée iOS */
@media (max-width: 767px) {
  .mobile-menu-overlay {
    /* Gestion du viewport iOS Safari */
    height: 100vh;
    height: -webkit-fill-available;
    /* Amélioration du scroll dans le menu */
    overflow: hidden;
  }
  
  .mobile-menu-content {
    /* Scroll interne optimisé */
    max-height: calc(100vh - var(--safe-area-inset-top) - var(--safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* =================================================
   PAGE STARTERPACKS STATIC iOS
   ================================================= */

/* Optimisations pour la page starterpacks-static sur iOS */
@media (max-width: 767px) {
  .starterpacks-static-hero {
    /* Gestion des safe areas */
    padding-top: calc(2rem + var(--safe-area-inset-top));
    padding-left: var(--safe-area-inset-left);
    padding-right: var(--safe-area-inset-right);
  }
  
  .starterpacks-static-hero h1 {
    /* Optimisation du rendu de texte iOS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Éviter les coupures sur iPhone */
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  
  .starterpacks-static-hero .highlight {
    /* Assurer que StarterPacks reste sur une ligne */
    display: inline-block;
    white-space: nowrap;
  }
  
  .coming-soon-content {
    /* Gestion des safe areas laterales */
    padding-left: max(var(--mobile-padding), var(--safe-area-inset-left));
    padding-right: max(var(--mobile-padding), var(--safe-area-inset-right));
  }
  
  .community-button {
    /* Zone de touch optimisée iPhone */
    min-height: 48px;
    min-width: 200px;
    -webkit-tap-highlight-color: rgba(0, 229, 232, 0.2);
    /* Correction du style iOS */
    -webkit-appearance: none;
    appearance: none;
  }
  
  .point-item {
    /* Amélioration de l'alignement sur iOS */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

/* =================================================
   OPTIMISATIONS PERFORMANCE POUR iPhone 15
   ================================================= */

/* Optimisations spécifiques iPhone 15 series */
@media only screen 
  and (device-width: 393px) 
  and (device-height: 852px),
  only screen 
  and (device-width: 430px) 
  and (device-height: 932px) {
  
  /* Réduction des animations pour économiser la batterie */
  .podcast-card:hover,
  .expert-card:hover {
    -webkit-transform: translate3d(0, -1px, 0);
    transform: translate3d(0, -1px, 0);
    transition-duration: 0.2s;
  }
  
  /* Optimisation des images pour les écrans haute résolution */
  .podcast-image img,
  .expert-image {
    image-rendering: -webkit-optimize-contrast;
    -webkit-filter: contrast(1.05);
    filter: contrast(1.05);
  }
}

/* Cache bust iOS - 2025-01-17 */