/* ===============================================
   RESPONSIVE.CSS - Media Queries & Breakpoints

   Auteur: Thomas Kireche
   Version: 1.0.0
   Dernière mise à jour: 2026-01-26

   Description:
   Système de breakpoints complet pour responsive design.
   Approche mobile-first avec 6 breakpoints.

   Breakpoints:
   - Base: 0-479px (Mobile petit)
   - sm: 480px+ (Mobile)
   - md: 768px+ (Tablette)
   - lg: 1024px+ (Laptop)
   - xl: 1400px+ (Desktop)
   - 2xl: 2560px+ (Grand écran 42"+)

   Table des matières:
   1. Variables de référence
   2. Base (Mobile First)
   3. Small (sm: 480px+)
   4. Medium (md: 768px+)
   5. Large (lg: 1024px+)
   6. Extra Large (xl: 1400px+)
   7. 2X Large (2xl: 2560px+)
   8. Utilities responsives
   9. Print styles
   =============================================== */

/* ========== 1. VARIABLES DE RÉFÉRENCE ========== */

/**
 * Note: CSS ne supporte pas les variables dans les media queries.
 * Ces valeurs sont documentées ici pour référence:
 *
 * --bp-sm: 480px
 * --bp-md: 768px
 * --bp-lg: 1024px
 * --bp-xl: 1400px
 * --bp-2xl: 2560px
 */

/* ========== 2. BASE (Mobile First - 0-479px) ========== */

/**
 * Styles de base pour les plus petits écrans
 * Ces styles s'appliquent à tous les écrans et sont
 * progressivement surchargés par les media queries
 */

/* Container mobile */
.container {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Grilles en colonne unique sur mobile */
.grid-mobile-1 {
    grid-template-columns: 1fr;
}

/* Navigation cachée sur mobile (hamburger) */
.nav-desktop {
    display: none;
}

/* Sections avec padding réduit */
.section-responsive {
    padding: 3rem 0;
}

/* Typography mobile */
.title-responsive {
    font-size: clamp(1.5rem, 5vw, 2.5rem);
}

/* Cards pleine largeur */
.card-responsive {
    width: 100%;
}

/* ========== 3. SMALL (sm: 480px+) ========== */

@media (min-width: 480px) {
    /**
     * Breakpoint Small - Mobile large et phablets
     * Légers ajustements de padding et grilles 2 colonnes possibles
     */

    /* Container légèrement plus large */
    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    /* Grilles 2 colonnes sur mobile large */
    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Display utilities */
    .sm\:d-none { display: none; }
    .sm\:d-block { display: block; }
    .sm\:d-flex { display: flex; }
    .sm\:d-grid { display: grid; }

    /* Flex utilities */
    .sm\:flex-row { flex-direction: row; }
    .sm\:flex-col { flex-direction: column; }
    .sm\:flex-wrap { flex-wrap: wrap; }

    /* Text alignment */
    .sm\:text-left { text-align: left; }
    .sm\:text-center { text-align: center; }

    /* Spacing */
    .sm\:gap-2 { gap: 1rem; }
    .sm\:gap-3 { gap: 1.5rem; }
    .sm\:mb-3 { margin-bottom: 1.5rem; }
    .sm\:mb-4 { margin-bottom: 2rem; }
    .sm\:p-3 { padding: 1.5rem; }
    .sm\:p-4 { padding: 2rem; }
}

/* ========== 4. MEDIUM (md: 768px+) ========== */

@media (min-width: 768px) {
    /**
     * Breakpoint Medium - Tablettes
     * Navigation partielle, grilles 2-3 colonnes, sidebar layouts
     */

    /* Container tablette */
    .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    /* Sections padding normal */
    .section-responsive {
        padding: 4rem 0;
    }

    /* Grilles tablette */
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .md\:grid-sidebar {
        grid-template-columns: 300px 1fr;
    }

    .md\:grid-1-2 {
        grid-template-columns: 1fr 2fr;
    }

    /* Display utilities */
    .md\:d-none { display: none; }
    .md\:d-block { display: block; }
    .md\:d-flex { display: flex; }
    .md\:d-grid { display: grid; }

    /* Flex utilities */
    .md\:flex-row { flex-direction: row; }
    .md\:flex-col { flex-direction: column; }
    .md\:flex-nowrap { flex-wrap: nowrap; }
    .md\:items-center { align-items: center; }
    .md\:items-start { align-items: flex-start; }
    .md\:justify-between { justify-content: space-between; }
    .md\:justify-center { justify-content: center; }

    /* Text alignment */
    .md\:text-left { text-align: left; }
    .md\:text-center { text-align: center; }

    /* Spacing */
    .md\:gap-3 { gap: 1.5rem; }
    .md\:gap-4 { gap: 2rem; }
    .md\:gap-5 { gap: 2.5rem; }
    .md\:mb-4 { margin-bottom: 2rem; }
    .md\:mb-5 { margin-bottom: 3rem; }
    .md\:p-4 { padding: 2rem; }
    .md\:p-5 { padding: 2.5rem; }
    .md\:p-6 { padding: 3rem; }

    /* Dimensions */
    .md\:w-auto { width: auto; }
    .md\:w-50 { width: 50%; }
    .md\:max-w-md { max-width: 700px; }

    /* Avatar/sizes */
    .md\:size-48 { width: 200px; height: 200px; }
    .md\:size-55 { width: 220px; height: 220px; }

    /* Typography */
    .md\:text-lg { font-size: 1.25rem; }
    .md\:text-xl { font-size: 1.5rem; }
    .md\:text-2xl { font-size: 2rem; }

    /* Two-column form layouts */
    .md\:form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
        align-items: start;
    }
}

/* ========== 5. LARGE (lg: 1024px+) ========== */

@media (min-width: 1024px) {
    /**
     * Breakpoint Large - Laptops et petits desktops
     * Navigation complète visible, grilles 3-4 colonnes
     */

    /* Container laptop */
    .container {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Sections padding complet */
    .section-responsive {
        padding: 5rem 0;
    }

    /* Navigation desktop visible */
    .nav-desktop {
        display: flex;
    }

    /* Hamburger caché */
    .nav-mobile {
        display: none;
    }

    /* Grilles laptop */
    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .lg\:grid-sidebar {
        grid-template-columns: 300px 1fr;
    }

    .lg\:grid-1-2 {
        grid-template-columns: 1fr 2fr;
    }

    /* Display utilities */
    .lg\:d-none { display: none; }
    .lg\:d-block { display: block; }
    .lg\:d-flex { display: flex; }
    .lg\:d-grid { display: grid; }

    /* Flex utilities */
    .lg\:flex-row { flex-direction: row; }
    .lg\:flex-col { flex-direction: column; }
    .lg\:items-center { align-items: center; }
    .lg\:justify-between { justify-content: space-between; }

    /* Spacing */
    .lg\:gap-4 { gap: 2rem; }
    .lg\:gap-5 { gap: 2.5rem; }
    .lg\:gap-6 { gap: 3rem; }
    .lg\:mb-5 { margin-bottom: 3rem; }
    .lg\:mb-6 { margin-bottom: 4rem; }
    .lg\:p-5 { padding: 2.5rem; }
    .lg\:p-6 { padding: 3rem; }

    /* Typography */
    .lg\:text-xl { font-size: 1.5rem; }
    .lg\:text-2xl { font-size: 2rem; }
    .lg\:text-3xl { font-size: 2.5rem; }
}

/* ========== 6. EXTRA LARGE (xl: 1400px+) ========== */

@media (min-width: 1400px) {
    /**
     * Breakpoint Extra Large - Desktops standards
     * Container max-width, spacing optimal, design complet
     */

    /* Container desktop */
    .container {
        max-width: 1400px;
    }

    /* Sections spacing optimal */
    .section-responsive {
        padding: 6rem 0;
    }

    /* Grilles desktop */
    .xl\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .xl\:grid-cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .xl\:grid-cols-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    /* Display utilities */
    .xl\:d-none { display: none; }
    .xl\:d-block { display: block; }
    .xl\:d-flex { display: flex; }
    .xl\:d-grid { display: grid; }

    /* Spacing */
    .xl\:gap-5 { gap: 2.5rem; }
    .xl\:gap-6 { gap: 3rem; }
    .xl\:mb-6 { margin-bottom: 4rem; }
    .xl\:p-6 { padding: 3rem; }

    /* Typography */
    .xl\:text-2xl { font-size: 2rem; }
    .xl\:text-3xl { font-size: 2.5rem; }
    .xl\:text-4xl { font-size: 3rem; }

    /* Max widths */
    .xl\:max-w-lg { max-width: 800px; }
    .xl\:max-w-xl { max-width: 900px; }
}

/* ========== 7. 2X LARGE (2xl: 2560px+) ========== */

@media (min-width: 2560px) {
    /**
     * Breakpoint 2X Large - Grands écrans (4K, 42"+)
     * Container élargi, spacing généreux, meilleure utilisation de l'espace
     */

    /* Container grand écran */
    .container {
        max-width: 1800px;
    }

    /* Body font-size augmenté pour lisibilité */
    body {
        font-size: 1.125rem; /* 18px base */
    }

    /* Sections spacing généreux */
    .section-responsive {
        padding: 8rem 0;
    }

    /* Grilles grand écran */
    .xxl\:grid-cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .xxl\:grid-cols-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .xxl\:grid-cols-6 {
        grid-template-columns: repeat(6, 1fr);
    }

    /* Display utilities */
    .xxl\:d-none { display: none; }
    .xxl\:d-block { display: block; }
    .xxl\:d-flex { display: flex; }
    .xxl\:d-grid { display: grid; }

    /* Spacing généreux */
    .xxl\:gap-6 { gap: 3rem; }
    .xxl\:gap-8 { gap: 4rem; }
    .xxl\:mb-6 { margin-bottom: 4rem; }
    .xxl\:mb-8 { margin-bottom: 5rem; }
    .xxl\:p-6 { padding: 3rem; }
    .xxl\:p-8 { padding: 4rem; }

    /* Typography grand écran */
    .xxl\:text-lg { font-size: 1.375rem; }
    .xxl\:text-xl { font-size: 1.75rem; }
    .xxl\:text-2xl { font-size: 2.25rem; }
    .xxl\:text-3xl { font-size: 3rem; }
    .xxl\:text-4xl { font-size: 3.5rem; }

    /* Sizes augmentées */
    .xxl\:size-20 { width: 90px; height: 90px; }
    .xxl\:size-55 { width: 250px; height: 250px; }

    /* Max widths élargis */
    .xxl\:max-w-2xl { max-width: 1200px; }
    .xxl\:max-w-3xl { max-width: 1400px; }

    /* Cards plus grandes */
    .card {
        padding: 2.5rem;
    }

    /* Nav links spacing */
    .nav-links {
        gap: 3rem;
    }
}

/* ========== 8. UTILITIES RESPONSIVES ADDITIONNELLES ========== */

/**
 * Hidden utilities par breakpoint
 * @description Cache des éléments à certains breakpoints
 * @example <div class="hidden-mobile">Caché sur mobile</div>
 */

/* Caché jusqu'à md (mobile/petit tablet) */
.hidden-mobile {
    display: none;
}

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

/* Visible uniquement sur mobile */
.visible-mobile {
    display: block;
}

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

/* Caché à partir de lg (laptop+) */
@media (min-width: 1024px) {
    .hidden-desktop {
        display: none;
    }
}

/* Visible uniquement sur desktop */
.visible-desktop {
    display: none;
}

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

/**
 * Stack to Row - Empilé sur mobile, ligne sur desktop
 * @description Layout commun qui s'adapte au viewport
 * @example <div class="stack-to-row">Items</div>
 */
.stack-to-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 768px) {
    .stack-to-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
    }
}

/**
 * Stack to Grid - Empilé sur mobile, grille sur desktop
 * @example <div class="stack-to-grid-3">Items</div>
 */
.stack-to-grid-2,
.stack-to-grid-3,
.stack-to-grid-4 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .stack-to-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .stack-to-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .stack-to-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .stack-to-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .stack-to-grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/**
 * Text responsive - Taille qui s'adapte au viewport
 * @example <h1 class="text-fluid-xl">Titre adaptatif</h1>
 */
.text-fluid-sm {
    font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem);
}

.text-fluid-base {
    font-size: clamp(1rem, 1.5vw + 0.5rem, 1.25rem);
}

.text-fluid-lg {
    font-size: clamp(1.25rem, 2vw + 0.5rem, 1.75rem);
}

.text-fluid-xl {
    font-size: clamp(1.5rem, 3vw + 0.5rem, 2.5rem);
}

.text-fluid-2xl {
    font-size: clamp(2rem, 4vw + 0.5rem, 3.5rem);
}

.text-fluid-3xl {
    font-size: clamp(2.5rem, 5vw + 0.5rem, 4.5rem);
}

/**
 * Padding responsive - S'adapte automatiquement
 * @example <section class="p-responsive">Contenu</section>
 */
.p-responsive {
    padding: 1.5rem;
}

@media (min-width: 768px) {
    .p-responsive {
        padding: 2.5rem;
    }
}

@media (min-width: 1400px) {
    .p-responsive {
        padding: 3rem;
    }
}

@media (min-width: 2560px) {
    .p-responsive {
        padding: 4rem;
    }
}

/**
 * Gap responsive - Espacement qui s'adapte
 * @example <div class="gap-responsive">Items</div>
 */
.gap-responsive {
    gap: 1rem;
}

@media (min-width: 768px) {
    .gap-responsive {
        gap: 1.5rem;
    }
}

@media (min-width: 1400px) {
    .gap-responsive {
        gap: 2rem;
    }
}

@media (min-width: 2560px) {
    .gap-responsive {
        gap: 3rem;
    }
}

/* ========== 9. PRINT STYLES ========== */

@media print {
    /**
     * Styles d'impression
     * Optimisés pour export PDF et impression papier
     */

    /* Cache les éléments non imprimables */
    .no-print,
    nav,
    .hamburger,
    #theme-toggle,
    .particles,
    footer {
        display: none !important;
    }

    /* Reset des couleurs pour impression */
    body {
        background: white !important;
        color: black !important;
        font-size: 12pt;
    }

    /* Container pleine largeur */
    .container {
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* Sections sans padding excessif */
    section {
        padding: 1rem 0 !important;
        page-break-inside: avoid;
    }

    /* Links visibles */
    a {
        color: black !important;
        text-decoration: underline;
    }

    a[href^="http"]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }

    /* Cards sans effets */
    .card,
    .glass {
        background: white !important;
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }

    /* Page breaks */
    h1, h2, h3 {
        page-break-after: avoid;
    }

    .page-break {
        page-break-before: always;
    }

    .avoid-break {
        page-break-inside: avoid;
    }
}

/* ========== ACCESSIBILITÉ ========== */

/**
 * Reduced Motion
 * Désactive les animations pour les utilisateurs sensibles
 */
@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;
    }
}

/**
 * High Contrast Mode
 * Améliore le contraste pour l'accessibilité
 */
@media (prefers-contrast: high) {
    :root {
        --primary: #4338ca;
        --secondary: #d97706;
        --text-primary: #000000;
        --text-secondary: #1f2937;
        --background: #ffffff;
        --surface: #f3f4f6;
        --border: #000000;
    }
}

/**
 * Dark Mode Preference
 * Support automatique du mode sombre système
 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Utilise les variables dark définies dans themes.css */
    }
}