/* ============================================
   RESPONSIVE CSS - MOBILE UNIQUEMENT
   N'affecte PAS l'affichage PC/Desktop
   ============================================ */

/* Applique UNIQUEMENT sur écrans <= 768px (téléphones et tablettes) */
@media (max-width: 768px) {

    /* ==========================================
       GLOBAL - Empêcher le scroll horizontal
       ========================================== */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Tous les conteneurs doivent être centrés */
    * {
        box-sizing: border-box !important;
    }

    /* Reset des marges et padding pour mobile */
    body > * {
        max-width: 100vw;
    }

    /* Canvas et backgrounds ne doivent pas dépasser */
    #neural-bg,
    #particles-container,
    canvas {
        max-width: 100vw !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    /* Forcer tous les éléments principaux à rester dans la viewport */
    main,
    section,
    article,
    nav,
    header,
    footer {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* ==========================================
       IMAGES RESPONSIVE - URGENT
       ========================================== */
    img {
        max-width: 100% !important;
        height: auto !important;
        display: block;
    }

    /* Images dans les cartes */
    .category-icon img,
    .tool-logo img,
    .logo-image,
    .hero-logo-image {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    /* Logos spécifiques */
    .logo-image {
        height: 40px !important;
        width: auto !important;
    }

    .footer-logo-image {
        height: 60px !important;
        width: auto !important;
    }

    /* Hero logo adapté mobile */
    .hero-logo-image {
        height: 200px !important;
        max-width: 80%;
        margin: 0 auto;
    }

    /* ==========================================
       NAVBAR MOBILE - TOUS SUR UNE LIGNE
       ========================================== */
    .navbar {
        padding: 0.5rem 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        height: auto !important;
    }

    .nav-container {
        padding: 0 0.75rem !important;
        position: relative;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 0.5rem !important;
        flex-wrap: nowrap !important;
    }

    /* Logo à gauche, compact */
    .logo {
        flex-shrink: 0;
        margin-right: auto !important;
    }

    .logo img {
        height: 30px !important;
        width: auto !important;
    }

    /* Actions à droite sur UNE ligne */
    .nav-actions {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.5rem !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0;
    }

    /* Language selector COMPACT */
    .language-selector {
        width: auto !important;
        min-width: 60px !important;
        max-width: 70px !important;
    }

    .lang-btn {
        width: 60px !important;
        min-width: 60px !important;
        padding: 0.5rem 0.5rem !important;
        font-size: 0.75rem !important;
        justify-content: center !important;
        gap: 0.25rem !important;
    }

    .lang-current {
        font-size: 0.75rem !important;
    }

    .lang-btn .chevron {
        width: 12px !important;
        height: 12px !important;
    }

    /* Cacher l'icône globe pour gagner de la place */
    .lang-btn svg:first-child,
    .lang-btn .lang-icon {
        display: none !important;
    }

    /* Garder seulement la flèche */
    .lang-btn .chevron {
        display: block !important;
    }

    /* Search button compact */
    .search-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        padding: 0.5rem !important;
        flex-shrink: 0;
    }

    .search-btn svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* Menu hamburger compact */
    .menu-toggle {
        display: flex !important;
        z-index: 1000;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        padding: 0.5rem !important;
        flex-shrink: 0;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
    }

    .menu-toggle span {
        width: 20px !important;
        height: 2px !important;
    }

    /* Reset de tous les styles desktop pour nav-menu */
    .nav-menu:not(.active) {
        transform: translateX(100%) !important;
        pointer-events: none;
    }

    .nav-menu.active {
        transform: translateX(0) !important;
        pointer-events: auto;
    }

    /* Menu de navigation - CACHÉ par défaut sur mobile */
    .nav-menu {
        position: fixed !important;
        top: 70px;
        right: -100% !important;
        width: 80%;
        max-width: 300px;
        height: calc(100vh - 70px);
        background: rgba(10, 10, 15, 0.98);
        backdrop-filter: blur(10px);
        flex-direction: column;
        padding: 2rem 1rem;
        transition: right 0.3s ease;
        overflow-y: auto;
        border-left: 1px solid rgba(255, 255, 255, 0.1);
        z-index: 999;
        display: flex !important;
        visibility: hidden;
        opacity: 0;
    }

    /* Menu ouvert */
    .nav-menu.active {
        right: 0 !important;
        visibility: visible;
        opacity: 1;
    }

    .nav-item {
        width: 100%;
        margin: 0.5rem 0;
    }

    .nav-link {
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }

    /* ==========================================
       LANGUAGE SELECTOR MOBILE - Dans le menu hamburger
       ========================================== */
    /* Nav-actions dans le menu hamburger (vertical) */
    .nav-menu .nav-actions {
        flex-direction: column !important;
        width: 100% !important;
        gap: 1rem;
        margin-top: 1rem;
    }

    .nav-menu .language-selector {
        width: 100% !important;
        max-width: 100% !important;
    }

    .nav-menu .lang-btn {
        width: 100% !important;
        justify-content: space-between !important;
        padding: 0.875rem 1rem !important;
        font-size: 1rem !important;
    }

    /* Dropdown language sur mobile - Dans le menu hamburger */
    .lang-dropdown {
        position: relative !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        margin-top: 0.5rem;
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.3s ease;
        visibility: hidden;
        opacity: 0;
        display: none !important;
    }

    .language-selector.active .lang-dropdown {
        max-height: 500px !important;
        visibility: visible;
        opacity: 1;
        display: block !important;
    }

    .lang-option {
        padding: 0.875rem 1rem;
        font-size: 1rem;
    }

    /* ==========================================
       HERO SECTION MOBILE
       ========================================== */
    .hero {
        padding: 5rem 0 3rem !important;
        padding-top: calc(60px + 2rem) !important;
        min-height: auto;
        width: 100% !important;
        margin: 0 auto;
        text-align: center;
    }

    .hero-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 1rem !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    .hero-title {
        font-size: 2rem !important;
        line-height: 1.2;
        text-align: center !important;
        width: 100% !important;
        margin: 0 auto 1rem !important;
        padding: 0 1rem !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Chaque span du titre doit être centré */
    .hero-title span {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }

    /* Gradient text sur mobile */
    .gradient-text {
        display: inline-block;
        width: auto !important;
        margin: 0 auto;
    }

    .hero-subtitle {
        font-size: 1rem;
        padding: 0 1rem;
        text-align: center !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    /* Hero logo centré */
    .hero-logo {
        text-align: center !important;
        width: 100% !important;
        margin: 0 auto 2rem !important;
    }

    /* Stats hero mobile - CENTRÉS */
    .hero-stats,
    .hero-stats-enhanced {
        flex-direction: column;
        gap: 1rem;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 1rem !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .stat-card {
        width: 100%;
        max-width: 320px;
        margin: 0 auto !important;
        text-align: center !important;
    }

    .stat {
        text-align: center !important;
    }

    /* CTA buttons mobile - CENTRÉS */
    .hero-cta,
    .hero-cta-enhanced {
        flex-direction: column;
        gap: 0.75rem;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 1rem !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .btn,
    .btn-futuristic {
        width: 100%;
        max-width: 320px;
        margin: 0 auto !important;
        text-align: center !important;
    }

    /* ==========================================
       GRIDS MOBILE - CENTRÉS
       ========================================== */
    .categories-grid,
    .featured-grid,
    .tool-grid,
    .value-grid,
    .why-grid,
    .blog-grid,
    .guides-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    /* ==========================================
       CARDS MOBILE - CENTRÉES
       ========================================== */
    .category-card,
    .tool-card,
    .value-card,
    .guide-card,
    .blog-card {
        padding: 1.25rem;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    /* Contenu des cards centré */
    .category-card > *,
    .tool-card > *,
    .blog-card > * {
        width: 100%;
        text-align: center;
    }

    /* ==========================================
       DROPDOWN MENUS MOBILE
       ========================================== */
    /* Sur mobile, les liens de dropdown fonctionnent normalement */
    /* Les dropdowns (sous-menus) sont cachés */
    .dropdown-toggle {
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    /* Cacher tous les dropdowns desktop par défaut sur mobile */
    .dropdown-menu,
    .mega-menu {
        position: relative !important;
        width: 100%;
        margin-top: 0.5rem;
        opacity: 0 !important;
        visibility: hidden !important;
        max-height: 0 !important;
        overflow: hidden !important;
        display: none !important;
    }

    /* Sur mobile, on cache complètement les mega-menus */
    /* Le lien "Categories" navigue directement vers la page */
    .nav-item.dropdown .dropdown-menu,
    .nav-item.dropdown .mega-menu {
        display: none !important;
    }

    /* Mega menu grid - si jamais affiché */
    .mega-menu-grid {
        grid-template-columns: 1fr !important;
        gap: 0.5rem;
    }

    /* S'assurer que les éléments de navigation restent dans le conteneur */
    .nav-item {
        position: relative;
    }

    /* Mega menu doit rester à l'intérieur du menu mobile */
    .nav-item .mega-menu {
        position: static !important;
        transform: none !important;
    }

    /* Les liens de navigation doivent être cliquables */
    .nav-link,
    .dropdown-toggle {
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    /* ==========================================
       FOOTER MOBILE - CENTRÉ
       ========================================== */
    .footer {
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 auto !important;
        overflow-x: hidden !important;
    }

    .footer-grid,
    .footer-content {
        grid-template-columns: 1fr !important;
        gap: 2rem;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        width: 100% !important;
        margin: 0 auto !important;
    }

    /* Footer links centrés */
    .footer-links {
        text-align: center !important;
    }

    .footer-links ul {
        text-align: center !important;
    }

    /* ==========================================
       SECTIONS MOBILE - TOUS CENTRÉS
       ========================================== */
    .section {
        padding: 2.5rem 0;
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 auto !important;
        overflow-x: hidden !important;
    }

    .container {
        padding: 0 1rem;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    .section-title {
        font-size: 1.75rem !important;
        text-align: center !important;
        width: 100% !important;
        margin: 0 auto 1rem !important;
        padding: 0 1rem !important;
    }

    .section-header {
        text-align: center !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 1rem !important;
    }

    .section-subtitle {
        text-align: center !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    /* ==========================================
       SPOTLIGHT SECTION MOBILE - LOGOS REDIMENSIONNÉS
       ========================================== */
    .spotlight-content {
        grid-template-columns: 1fr !important;
        text-align: center;
        gap: 2rem;
        padding: 0 1rem !important;
    }

    .spotlight-logo-wrapper {
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 150px !important;
        height: auto !important;
        padding: 1rem !important;
    }

    /* Logos des outils dans spotlight - PETIT */
    .spotlight-logo,
    .tool-logo-large,
    .featured-logo {
        width: 100% !important;
        max-width: 120px !important;
        height: auto !important;
        max-height: 120px !important;
        object-fit: contain !important;
        margin: 0 auto !important;
    }

    /* Placeholder logos dans featured section */
    .logo-placeholder,
    .tool-logo img,
    .spotlight-logo img {
        width: 100% !important;
        max-width: 120px !important;
        height: auto !important;
        max-height: 120px !important;
        object-fit: contain !important;
        margin: 0 auto !important;
    }

    .spotlight-stats-mini {
        flex-direction: column;
        gap: 1rem;
    }

    .spotlight-cta {
        flex-direction: column;
        gap: 0.75rem;
    }

    /* Section "FEATURING TOOLS FROM" - LOGOS COMPACTS */
    .featuring-section,
    .featured-tools-section {
        padding: 2rem 1rem !important;
    }

    .featuring-grid,
    .featured-tools-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1rem !important;
        max-width: 100% !important;
    }

    .featuring-item,
    .featured-tool-item {
        width: 100% !important;
        max-width: 100px !important;
        margin: 0 auto !important;
    }

    .featuring-item img,
    .featured-tool-item img {
        width: 100% !important;
        max-width: 80px !important;
        height: auto !important;
        max-height: 80px !important;
        object-fit: contain !important;
        margin: 0 auto !important;
    }

    /* TRUSTED LOGOS - ChatGPT, Claude, etc. - PETITS */
    .trusted-logos-scroll,
    .logos-track {
        height: auto !important;
        max-height: 60px !important;
        padding: 0.5rem 0 !important;
    }

    .trusted-logo {
        width: auto !important;
        max-width: 60px !important;
        height: 40px !important;
        max-height: 40px !important;
        object-fit: contain !important;
        margin: 0 0.5rem !important;
        padding: 0 !important;
    }

    /* Label "FEATURING TOOLS FROM" */
    .trusted-label {
        font-size: 0.75rem !important;
        margin-bottom: 0.5rem !important;
        text-align: center !important;
    }

    /* ==========================================
       TABLES MOBILE - AMÉLIORATION
       ========================================== */
    /* Tables en mode responsive card */
    table {
        display: block;
        width: 100%;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        overflow: hidden;
    }

    thead {
        display: none; /* Cache les en-têtes sur mobile */
    }

    tbody {
        display: block;
        width: 100%;
    }

    tr {
        display: block;
        margin-bottom: 1rem;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 1rem;
    }

    td {
        display: block;
        text-align: left;
        padding: 0.5rem 0;
        border: none;
        position: relative;
        padding-left: 50%;
    }

    /* Ajoute les labels avant chaque cellule */
    td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 45%;
        padding-right: 10px;
        font-weight: 600;
        color: var(--text-secondary);
    }

    /* Si les tables ont besoin de scroll horizontal (fallback) */
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-responsive table {
        min-width: 100%;
    }

    /* ==========================================
       SEARCH MODAL MOBILE
       ========================================== */
    .search-modal-content {
        margin: 0 1rem;
        max-width: calc(100% - 2rem);
    }

    /* ==========================================
       TOUCH TARGETS - Minimum 44x44px
       Optimisation pour interaction tactile
       ========================================== */
    /* Tous les boutons et liens cliquables */
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-outline {
        min-height: 44px;
        min-width: 44px;
        padding: 0.75rem 1.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Liens de navigation */
    .nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Menu hamburger */
    .menu-toggle {
        min-width: 44px;
        min-height: 44px;
        padding: 0.5rem;
    }

    /* Bouton de recherche */
    .search-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* Language selector button */
    .lang-btn {
        min-height: 44px;
    }

    /* Options de langue */
    .lang-option {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Social links */
    .social-link {
        min-width: 44px;
        min-height: 44px;
    }

    /* Category arrow */
    .category-arrow {
        min-width: 44px;
        min-height: 44px;
    }

    /* Tool badges cliquables */
    a.tool-badge {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        padding: 0.5rem 0.75rem;
    }

    /* Links dans footer */
    .footer-links a {
        min-height: 36px;
        display: inline-block;
        line-height: 36px;
    }

    /* Dropdown toggles */
    .dropdown-toggle {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Form inputs */
    input[type="text"],
    input[type="email"],
    input[type="search"],
    textarea,
    select {
        min-height: 44px;
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }

    /* Checkbox et radio plus grands */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 24px;
        min-height: 24px;
        cursor: pointer;
    }

    /* Espacement entre éléments tactiles */
    .btn + .btn {
        margin-top: 0.5rem;
    }

    .nav-item + .nav-item {
        margin-top: 0.25rem;
    }
}

/* ============================================
   TRÈS PETITS ÉCRANS (< 480px)
   iPhones SE, anciens Android
   ============================================ */
@media (max-width: 480px) {

    /* Tailles de police optimisées pour lisibilité */
    .hero-title {
        font-size: 1.75rem !important; /* Augmenté de 1.65 à 1.75 */
        line-height: 1.25;
        padding: 0 0.5rem;
    }

    .section-title {
        font-size: 1.5rem !important;
        line-height: 1.3;
    }

    .hero-subtitle {
        font-size: 0.9375rem; /* 15px */
        line-height: 1.6;
    }

    /* Card padding plus généreux */
    .stat-card,
    .category-card,
    .tool-card {
        padding: 1.25rem; /* Augmenté de 1rem à 1.25rem */
    }

    /* Textes des cartes */
    .category-title,
    .tool-name {
        font-size: 1.0625rem; /* 17px */
    }

    .category-desc,
    .tool-desc {
        font-size: 0.875rem; /* 14px */
        line-height: 1.5;
    }

    /* Boutons plus grands pour le touch */
    .btn {
        padding: 0.875rem 1.5rem;
        font-size: 0.9375rem; /* 15px */
        min-height: 44px; /* Touch target minimum */
    }

    /* Nav links plus espacés */
    .nav-link {
        padding: 0.875rem 1rem;
        font-size: 1rem;
        min-height: 44px;
    }

    /* Container avec plus de padding */
    .container {
        padding: 0 1.25rem;
    }

    /* Section padding réduit */
    .section {
        padding: 2rem 0;
    }

    /* Footer text */
    .footer-desc {
        font-size: 0.875rem;
    }

    /* Blog/Guide cards */
    .blog-title,
    .guide-title {
        font-size: 1rem;
        line-height: 1.4;
    }

    .blog-excerpt,
    .guide-excerpt {
        font-size: 0.875rem;
        line-height: 1.5;
    }

    /* Meta text légèrement plus grand */
    .blog-meta,
    .guide-meta {
        font-size: 0.75rem;
    }
}

/* ============================================
   TABLETTES EN PORTRAIT (768px - 1024px)
   Optimisation complète pour tablettes
   ============================================ */
@media (min-width: 769px) and (max-width: 1024px) {

    /* Grids - 2 colonnes pour tablettes */
    .categories-grid,
    .featured-grid,
    .blog-grid,
    .guides-grid,
    .tool-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem;
    }

    .mega-menu-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem;
    }

    /* Hero section tablette */
    .hero {
        padding: 5rem 0 4rem;
    }

    .hero-title {
        font-size: 2.5rem !important;
    }

    .hero-subtitle {
        font-size: 1.125rem;
    }

    .hero-stats {
        gap: 2rem;
    }

    /* Navigation tablette */
    .nav-menu {
        gap: 2rem;
    }

    .mega-menu {
        max-width: 700px;
    }

    /* Cards - espacement optimisé */
    .category-card,
    .tool-card,
    .blog-card,
    .guide-card {
        padding: 1.5rem;
    }

    /* Footer tablette - 2 colonnes */
    .footer-grid,
    .footer-content {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2.5rem;
    }

    /* Section titles */
    .section-title {
        font-size: 2.25rem !important;
    }

    /* Buttons - taille intermédiaire */
    .btn {
        padding: 0.875rem 1.75rem;
        font-size: 0.9375rem;
    }

    /* Container avec padding optimisé */
    .container {
        padding: 0 2rem;
    }

    /* Newsletter sur tablette */
    .newsletter-card {
        grid-template-columns: 1fr;
        padding: 2.5rem;
    }

    /* Blog featured card */
    .blog-card.blog-featured {
        grid-column: span 2;
    }

    /* Spotlight section */
    .spotlight-content {
        grid-template-columns: 1fr 1fr !important;
        gap: 2.5rem;
    }

    /* Tables sur tablette - garder le layout normal */
    table {
        display: table;
    }

    thead {
        display: table-header-group;
    }

    tbody {
        display: table-row-group;
    }

    tr {
        display: table-row;
    }

    td {
        display: table-cell;
        padding: 0.75rem;
    }

    td::before {
        content: none;
    }
}