/* ==========================================================================
   SAFE Website - Responsive Design
   Mode responsive complet pour tous les appareils
   ========================================================================== */

/* Tablettes et petits écrans (max-width: 1024px) */
@media (max-width: 1024px) {
    :root {
        --navbar-height: 70px;
    }
    
    .container {
        padding: 0 30px;
    }
    
    .nav-logo {
        padding-left: 30px;
    }
    
    .nav-right {
        padding-right: 30px;
    }
    
    .nav-logo img {
        width: 140px;
    }
    
    /* Hero section - Vidéo responsive */
    .hero {
        min-height: 100vh;
    }
    
    .hero video {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        width: auto !important;
        height: auto !important;
        transform: translate(-50%, -50%) !important;
        object-fit: cover !important;
    }
    
    .stat-number {
        font-size: 12rem;
    }
    
    .stat-label {
        font-size: var(--font-size-lg);
        max-width: 300px;
    }
    
    /* Grilles */
    .missions-grid,
    .resources-grid {
        padding-left: 30px;
        padding-right: 30px;
        gap: var(--space-6);
    }
    
    .events-carousel {
        padding-left: 30px;
        padding-right: 30px;
    }
}

/* Tablettes (max-width: 768px) */
@media (max-width: 768px) {
    :root {
        --navbar-height: 70px;
        --font-size-5xl: 2.5rem;
        --font-size-4xl: 2rem;
        --font-size-3xl: 1.5rem;
    }
    
    /* Container */
    .container {
        padding: 0 20px;
    }
    
    /* Vidéo Hero Responsive */
    .hero {
        min-height: 100vh !important;
        height: 100vh !important;
    }
    
    .hero video {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        width: auto !important;
        height: auto !important;
        transform: translate(-50%, -50%) !important;
        object-fit: cover !important;
    }
    
    /* Overlay et contenu hero */
    .hero > div[style*="position: absolute"][style*="inset: 0"] {
        position: absolute !important;
        inset: 0 !important;
    }
    
    /* Navigation */
    .nav-container {
        justify-content: space-between;
        padding: 0 20px;
    }
    
    .nav-logo {
        padding-left: 0;
        padding-top: 5px;
    }
    
    .nav-logo img {
        width: 120px;
        height: auto;
    }
    
    .nav-right {
        padding-right: 0;
    }
    
    .nav-menu {
        display: none;
        position: absolute;
        top: var(--navbar-height);
        left: 0;
        right: 0;
        background-color: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        flex-direction: column;
        align-items: center;
        padding: var(--space-6) 0;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        z-index: 999;
        gap: 0;
    }
    
    .nav-menu.active {
        display: flex;
    }
    
    .nav-menu li {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid var(--color-neutral-100);
    }
    
    .nav-menu li:last-child {
        border-bottom: none;
    }
    
    .nav-menu a {
        display: block;
        padding: var(--space-4) var(--space-6);
        width: 100%;
    }
    
    .nav-toggle {
        display: flex;
        margin-left: 0;
    }
    
    .nav-cta {
        margin-left: 0;
        margin-top: var(--space-4);
        width: 90%;
        text-align: center;
    }
    
    .nav-cta .btn-primary {
        width: 100%;
        justify-content: center;
    }
    
    /* Hero Section */
    .hero {
        min-height: 100vh;
    }
    
    .hero video {
        object-position: center;
    }
    
    /* Masquer les stats sur mobile */
    .stat-item {
        display: none !important;
    }
    
    /* Description hero */
    .hero > div[style*="bottom: 100px"] {
        bottom: 120px !important;
        padding: 0 20px !important;
    }
    
    .hero > div[style*="bottom: 100px"] p {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }
    
    /* Boutons hero */
    .hero-actions {
        flex-direction: column;
        gap: var(--space-3);
        width: 90%;
        max-width: 400px;
    }
    
    .hero-actions .btn-primary,
    .hero-actions .btn-secondary {
        width: 100%;
        padding: var(--space-3) var(--space-6);
        font-size: var(--font-size-base);
    }
    
    /* Scroll indicator */
    .hero > div[style*="bottom: 40px"] {
        bottom: 30px !important;
    }
    
    /* Section Stats */
    section[style*="padding: 60px 0"] {
        padding: 50px 0 !important;
    }
    
    section[style*="padding: 60px 0"] > .container > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        padding: 0 20px !important;
        max-width: 100% !important;
    }
    
    section[style*="padding: 60px 0"] > .container > div > div {
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    
    /* Stats cards - réduire la taille des chiffres */
    section[style*="padding: 60px 0"] div[style*="font-size: 5rem"] {
        font-size: 4rem !important;
    }
    
    section[style*="padding: 60px 0"] div[style*="font-size: 0.9rem"] {
        font-size: 0.85rem !important;
    }
    
    /* Missions */
    .missions-grid {
        grid-template-columns: 1fr;
        padding-left: 20px;
        padding-right: 20px;
        gap: var(--space-6);
    }
    
    .mission-card {
        max-width: 100%;
    }
    
    /* Events */
    .events-carousel {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .carousel-track {
        flex-direction: column;
        align-items: center;
    }
    
    .event-card {
        flex: 0 0 auto;
        width: 100%;
        max-width: 500px;
    }
    
    /* Resources */
    .resources-grid {
        grid-template-columns: 1fr;
        padding-left: 20px;
        padding-right: 20px;
        gap: var(--space-6);
    }
    
    .resource-card {
        max-width: 100%;
    }
    
    /* Actualités */
    .news-section {
        padding: 60px 0 !important;
    }
    
    .news-section a[style*="width: 320px"] {
        width: 100% !important;
        max-width: 320px;
        margin: 0 auto !important;
    }
    
    .news-section > div > div {
        padding: 0 20px !important;
    }
    
    /* Section Instagram */
    .news-section iframe {
        max-width: 100% !important;
        height: 500px !important;
    }
    
    /* Partenaires */
    .partners {
        padding: 60px 0 !important;
    }
    
    .partners-section h3 {
        font-size: 1.5rem !important;
        padding: 0 20px;
    }
    
    .partners-section p {
        font-size: 1rem !important;
        padding: 0 20px;
    }
    
    .partners-section > div[style*="display: flex"] {
        flex-wrap: wrap !important;
        gap: 30px !important;
        justify-content: center !important;
        padding: 20px !important;
    }
    
    .partners-section a[style*="width: 150px"] {
        display: inline-block !important;
    }
    
    .partners-section a[style*="width: 150px"] img {
        width: 100px !important;
        height: 100px !important;
    }
    
    /* Footer */
    .footer-content {
        flex-direction: column;
        gap: var(--space-8);
    }
    
    .footer-section:first-child,
    .footer-section:not(:first-child) {
        flex: 1 0 100%;
        margin: 0;
    }
    
    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--space-4);
    }
    
    .footer-bottom p {
        margin: 0;
    }
    
    .footer-links {
        margin: 0;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    /* Contact grid */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    
    /* Content grid */
    .content-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    
    /* Timeline */
    .timeline::before {
        left: 20px;
    }
    
    .timeline-item {
        flex-direction: row !important;
        padding-left: 60px;
    }
    
    .timeline-date {
        position: absolute;
        left: 0;
    }
    
    .timeline-content {
        margin: 0;
    }
}

/* Mobile (max-width: 480px) */
@media (max-width: 480px) {
    :root {
        --navbar-height: 60px;
        --font-size-5xl: 2rem;
        --font-size-4xl: 1.75rem;
        --font-size-3xl: 1.35rem;
        --font-size-2xl: 1.25rem;
    }
    
    /* Container */
    .container {
        padding: 0 15px;
    }
    
    /* Navigation */
    .nav-container {
        padding: 0 15px;
    }
    
    .nav-logo img {
        width: 100px;
    }
    
    /* Hero */
    .hero {
        min-height: 100vh;
    }
    
    .hero video {
        min-height: 100vh !important;
    }
    
    .hero > div[style*="bottom: 100px"] {
        bottom: 100px !important;
        padding: 0 15px !important;
        max-width: 100% !important;
    }
    
    .hero > div[style*="bottom: 100px"] p {
        font-size: 0.95rem !important;
    }
    
    .hero-actions {
        width: 100%;
    }
    
    /* Pages spécifiques */
    .page-header h1 {
        font-size: 1.75rem;
    }
    
    .benefit-card {
        padding: 30px 20px;
    }
    
    .benefit-icon {
        width: 70px;
        height: 70px;
        font-size: 1.8rem;
    }
    
    .option-card {
        padding: 30px 20px;
    }
    
    .form-container {
        padding: 30px 15px;
    }
    
    .contact-method {
        padding: 15px;
    }
    
    .pole-header {
        padding: 20px 15px;
    }
    
    .pole-header h3 {
        font-size: 1.2rem;
    }
    
    /* Sections */
    section {
        padding: var(--space-16) 0;
    }
    
    .section-header h2 {
        font-size: var(--font-size-3xl);
    }
    
    .section-header p {
        font-size: var(--font-size-base);
    }
    
    /* Stats cards */
    section[style*="padding: 60px 0"] {
        padding: 40px 0 !important;
    }
    
    section[style*="padding: 60px 0"] > .container > div > div {
        padding: 30px 20px !important;
    }
    
    section[style*="padding: 60px 0"] > .container > div > div > div:first-child {
        font-size: 4rem !important;
    }
    
    /* Missions */
    .missions-grid {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .mission-icon {
        width: 70px;
        height: 70px;
    }
    
    .mission-icon i {
        font-size: var(--font-size-xl);
    }
    
    /* Events */
    .events-carousel {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .event-card {
        flex-direction: column;
        text-align: center;
        padding: var(--space-4);
    }
    
    .event-date {
        width: 100%;
        max-width: 80px;
        margin: 0 auto var(--space-3);
    }
    
    /* Resources */
    .resources-grid {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Actualités */
    .news-section {
        padding: 60px 0 !important;
    }
    
    /* Partenaires */
    .partners-section h3 {
        font-size: 1.5rem !important;
    }
    
    .partners-section p {
        font-size: 1rem !important;
    }
    
    .partners-section > div[style*="display: flex"] {
        gap: 30px !important;
    }
    
    .partners-section a[style*="width: 150px"] img {
        width: 100px !important;
        height: 100px !important;
    }
    
    /* Footer */
    .footer {
        padding: var(--space-16) 0 var(--space-6);
    }
    
    .footer-logo {
        width: 120px !important;
    }
    
    .social-links a {
        width: 36px;
        height: 36px;
    }
    
    /* Buttons */
    .btn-primary,
    .btn-secondary {
        padding: var(--space-3) var(--space-5);
        font-size: var(--font-size-sm);
    }
    
    .btn-large {
        padding: var(--space-3) var(--space-6);
        font-size: var(--font-size-base);
    }
}

/* Très petits écrans (max-width: 360px) */
@media (max-width: 360px) {
    .nav-logo img {
        width: 90px;
    }
    
    .hero > div[style*="bottom: 100px"] p {
        font-size: 0.9rem !important;
    }
    
    section[style*="padding: 60px 0"] > .container > div > div > div:first-child {
        font-size: 3.5rem !important;
    }
    
    .mission-icon {
        width: 60px;
        height: 60px;
    }
    
    .partners-section a[style*="width: 150px"] img {
        width: 80px !important;
        height: 80px !important;
    }
}

/* Landscape mobile */
@media (max-height: 600px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: 100px 0 80px;
    }
    
    .hero > div[style*="bottom: 100px"] {
        position: static !important;
        transform: none !important;
        margin-top: 40px;
    }
    
    .hero > div[style*="bottom: 40px"] {
        display: none;
    }
    
    .stat-item {
        display: none !important;
    }
}

/* Amélioration de l'accessibilité tactile */
@media (hover: none) and (pointer: coarse) {
    .nav-menu a,
    .btn-primary,
    .btn-secondary,
    .carousel-btn,
    .resource-link {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .social-links a {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ========================================================================
   RESPONSIVE POUR TOUTES LES PAGES
   ======================================================================== */

/* Page À Propos - Responsive */
@media (max-width: 768px) {
    .page-header {
        padding: calc(var(--navbar-height) + var(--space-8)) 0 var(--space-8);
    }
    
    .page-header h1 {
        font-size: var(--font-size-3xl);
    }
    
    .content-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    
    .content-image img {
        height: 300px;
    }
    
    .mission-stats {
        flex-direction: column;
        gap: var(--space-4);
    }
    
    .values-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    
    .team-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    
    .poles-organigramme {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    
    .pole-header {
        padding: 25px 20px;
    }
    
    .pole-header i {
        font-size: 2.5rem;
    }
    
    .pole-header h3 {
        font-size: 1.4rem;
    }
    
    .member-card-flip {
        height: auto;
        min-height: 100px;
    }
}

/* Page Contact - Responsive */
@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    
    .contact-form {
        padding: var(--space-6);
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .contact-method {
        flex-direction: column;
        gap: 20px;
        padding: 20px;
        text-align: center;
    }
    
    .contact-icon {
        width: 50px;
        height: 50px;
    }
    
    .contact-details h3 {
        font-size: 1.3rem;
    }
    
    .emergency-numbers {
        flex-direction: column;
        gap: var(--space-4);
    }
    
    .map-container iframe {
        height: 300px;
    }
}

/* Page Événements - Responsive */
@media (max-width: 768px) {
    .event-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-6) !important;
    }
    
    .event-card {
        flex-direction: column;
        text-align: center;
    }
    
    .event-date {
        width: 100%;
        max-width: 80px;
        margin: 0 auto var(--space-3);
    }
    
    .event-filters {
        flex-direction: column;
        gap: var(--space-3);
    }
    
    .filter-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Page Rejoindre - Responsive */
@media (max-width: 768px) {
    .why-join-section {
        padding: 60px 0;
    }
    
    .why-join-section .section-header h2 {
        font-size: 2rem;
    }
    
    .benefits-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    
    .benefit-card {
        padding: 40px 25px;
    }
    
    .benefit-icon {
        width: 80px;
        height: 80px;
        font-size: 2rem;
    }
    
    .options-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    
    .option-card.featured {
        transform: none;
    }
    
    .form-container {
        padding: 40px 20px;
        margin: 0 15px;
    }
    
    .form-container h2 {
        font-size: 2rem;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .form-navigation {
        flex-direction: column;
        gap: var(--space-3);
    }
    
    .form-navigation button {
        width: 100%;
    }
    
    .steps-timeline {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    
    .timeline-step {
        flex-direction: column;
        text-align: center;
    }
    
    .contact-divider::before,
    .contact-divider::after {
        width: 30%;
    }
    
    .social-links-inline {
        flex-direction: column;
        gap: var(--space-3);
    }
    
    .social-links-inline .btn-secondary {
        width: 100%;
        justify-content: center;
    }
}

/* Page Documents/RSE - Responsive */
@media (max-width: 768px) {
    .documents-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .document-card {
        flex-direction: column;
        text-align: center;
    }
    
    .document-icon {
        font-size: 3rem;
    }
}

/* Mode sombre (si le système le préfère) */
@media (prefers-color-scheme: dark) {
    /* Optionnel: ajuster les couleurs pour le mode sombre */
}

/* Impression */
@media print {
    .navbar,
    .nav-toggle,
    .carousel-controls,
    .hero-actions,
    .footer-map,
    .social-links {
        display: none !important;
    }
    
    .hero {
        min-height: auto;
        padding: var(--space-8) 0;
    }
    
    section {
        padding: var(--space-8) 0;
        page-break-inside: avoid;
    }
    
    .stat-item {
        display: none !important;
    }
}