/* TerraQuest - Responsive Design Amélioré */
/* Optimisé pour tous les supports : desktop, tablette, mobile */

/* ============================================
   CONFIGURATION GÉNÉRALE MOBILE
   ============================================ */

/* Prévention du défilement horizontal et zoom */
html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    position: relative;
}

/* Support du tactile */
* {
    -webkit-tap-highlight-color: rgba(52, 152, 219, 0.3);
    touch-action: manipulation;
}

/* Container des slides avec support swipe */
.slides-container {
    touch-action: pan-y pinch-zoom;
    position: relative;
    overflow: hidden;
}

/* ============================================
   TABLETTES (max 1024px)
   ============================================ */
@media (max-width: 1024px) {
    .slide-content {
        padding: 2rem;
    }
    
    .slide-content.split {
        flex-direction: column;
    }
    
    .slide-left, .slide-right {
        width: 100%;
        padding: 1rem;
    }
    
    .map-container {
        height: 50vh;
        min-height: 300px;
    }
    
    .two-columns {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .hero-title {
        font-size: 3.5rem;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
}

/* ============================================
   MOBILES (max 768px)
   ============================================ */
@media (max-width: 768px) {
    /* Navigation responsive */
    .navbar {
        padding: 0.5rem;
        font-size: 0.9rem;
        flex-wrap: nowrap;
        height: auto;
    }
    
    .nav-left, .nav-right, .nav-center {
        display: flex;
        align-items: center;
        gap: 0.3rem;
    }
    
    .nav-text {
        display: none;
    }
    
    .nav-btn, .btn-inscription, .btn-app {
        padding: 0.5rem 0.8rem;
        font-size: 0.9rem;
        min-width: 40px;
        min-height: 40px;
    }
    
    .nav-btn-icon {
        padding: 0.5rem;
        font-size: 1.2rem;
    }
    
    .menu-btn {
        padding: 0.5rem 0.8rem;
    }
    
    .slide-indicator {
        font-size: 0.85rem;
        margin: 0 0.2rem;
    }
    
    /* Bouton application mobile */
    .btn-app {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        font-weight: 600;
        white-space: nowrap;
    }
    
    /* Bouton inscription mobile */
    .btn-inscription {
        background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
        font-weight: 600;
        white-space: nowrap;
    }
    
    /* Contenu des slides */
    .slide-content {
        padding: 1rem;
        overflow-y: auto;
        overflow-x: hidden;
        max-height: calc(100vh - 70px);
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
    
    .slide-content::-webkit-scrollbar {
        width: 4px;
    }
    
    .slide-content::-webkit-scrollbar-thumb {
        background: var(--primary-color, #3498db);
        border-radius: 10px;
    }
    
    /* Typographie mobile */
    .hero-title {
        font-size: 2.2rem;
        line-height: 1.2;
    }
    
    .hero-subtitle {
        font-size: 1.3rem;
    }
    
    h1 {
        font-size: 1.6rem;
        line-height: 1.3;
    }
    
    h2 {
        font-size: 1.3rem;
    }
    
    h3 {
        font-size: 1.1rem;
    }
    
    p, li {
        font-size: 0.95rem;
        line-height: 1.5;
    }
    
    /* Grilles responsive */
    .features-grid,
    .stats-grid,
    .teams-grid,
    .workflow {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    /* Éléments de checkpoint */
    .checkpoint-list {
        gap: 1rem;
    }
    
    .checkpoint-item {
        flex-direction: column;
        padding: 1rem;
        text-align: center;
    }
    
    .checkpoint-number {
        position: static;
        margin-bottom: 0.5rem;
    }
    
    /* Sommaire mobile */
    .sommaire-overlay {
        padding: 0.5rem;
    }
    
    .sommaire-container {
        max-width: 95%;
        max-height: 90vh;
        overflow-y: auto;
        padding: 1rem;
        border-radius: 8px;
    }
    
    .sommaire-container h2 {
        font-size: 1.4rem;
        margin-bottom: 1rem;
    }
    
    .sommaire-container h3 {
        font-size: 1.1rem;
    }
    
    .parcours-buttons {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .btn-parcours {
        width: 100%;
        padding: 0.8rem;
        font-size: 0.9rem;
    }
    
    .subsections {
        padding-left: 1rem;
    }
    
    .subsections li {
        margin: 0.5rem 0;
    }
    
    /* Cartes interactives */
    .map-container {
        height: 40vh;
        min-height: 250px;
        border-radius: 8px;
    }
    
    /* Boutons d'action */
    .btn-cta, .btn-primary {
        width: 100%;
        max-width: 100%;
        padding: 1rem;
        font-size: 1rem;
    }
    
    /* Highlight boxes */
    .highlight-box {
        padding: 1rem;
        margin: 1rem 0;
    }
    
    /* Contact boxes */
    .contact-box, .cta-box {
        padding: 1.5rem;
        margin: 1rem 0;
    }
    
    .contact-item {
        flex-direction: column;
        text-align: center;
        padding: 1rem;
    }
    
    .contact-icon {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }
}

/* ============================================
   PETITS MOBILES (max 480px)
   ============================================ */
@media (max-width: 480px) {
    .navbar {
        padding: 0.4rem;
        font-size: 0.85rem;
    }
    
    .nav-btn, .btn-inscription {
        padding: 0.4rem 0.6rem;
        font-size: 0.85rem;
    }
    
    .slide-content {
        padding: 0.8rem;
    }
    
    .hero-title {
        font-size: 1.8rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    h1 {
        font-size: 1.4rem;
    }
    
    h2 {
        font-size: 1.2rem;
    }
    
    p, li {
        font-size: 0.9rem;
    }
    
    .stat-number {
        font-size: 2.5rem;
    }
    
    .workflow-step {
        padding: 0.8rem;
    }
    
    .step-number {
        font-size: 1.5rem;
        width: 40px;
        height: 40px;
    }
    
    .badge {
        font-size: 0.75rem;
        padding: 0.2rem 0.5rem;
    }
}

/* ============================================
   AMÉLIORATIONS TACTILES
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    /* Zones tactiles minimales recommandées */
    button, a, .nav-btn, .btn-parcours, input[type="checkbox"] {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Labels des checkboxes plus faciles à toucher */
    .subsections label {
        padding: 0.5rem;
        display: block;
        cursor: pointer;
    }
    
    /* Feedback tactile */
    button:active,
    .nav-btn:active,
    .btn-parcours:active {
        transform: scale(0.98);
        opacity: 0.8;
        transition: transform 0.1s ease, opacity 0.1s ease;
    }
    
    /* Amélioration des liens */
    a {
        padding: 0.3rem;
    }
    
    /* Espacement pour éviter les clics accidentels */
    .nav-btn + .nav-btn {
        margin-left: 0.3rem;
    }
}

/* ============================================
   ORIENTATION PAYSAGE MOBILE
   ============================================ */
@media (max-width: 768px) and (orientation: landscape) {
    .slide-content {
        max-height: calc(100vh - 60px);
        padding: 0.5rem 1rem;
    }
    
    .navbar {
        padding: 0.3rem 0.5rem;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    h1 {
        font-size: 1.4rem;
    }
    
    .map-container {
        height: 70vh;
    }
}

/* ============================================
   MODE SOMBRE (si activé sur l'appareil)
   ============================================ */
@media (prefers-color-scheme: dark) {
    .slide-content::-webkit-scrollbar-thumb {
        background: #4a90e2;
    }
}

/* ============================================
   ANIMATIONS ET TRANSITIONS RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    /* Réduire les animations pour améliorer les performances */
    * {
        animation-duration: 0.3s !important;
        transition-duration: 0.2s !important;
    }
    
    /* Désactiver certaines animations complexes */
    .slide-content.split::before,
    .slide-content.split::after {
        display: none;
    }
}

/* ============================================
   ACCESSIBILITÉ
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   FIXES SPÉCIFIQUES NAVIGATEURS MOBILES
   ============================================ */

/* iOS Safari */
@supports (-webkit-touch-callout: none) {
    .slide-content {
        min-height: -webkit-fill-available;
    }
    
    /* Prévention du zoom sur focus des inputs */
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* Android Chrome */
@media screen and (max-width: 768px) {
    .slides-container {
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }
}

/* ============================================
   PRINT (pour l'impression)
   ============================================ */
@media print {
    .navbar, .progress-bar, .sommaire-overlay {
        display: none;
    }
    
    .slide {
        page-break-after: always;
        page-break-inside: avoid;
    }
    
    .slide-content {
        padding: 1cm;
        max-height: none;
        overflow: visible;
    }
}