/* Responsive - Media queries et adaptations mobiles */

/* Mobile First - Styles de base pour mobile */

/* Extra small devices (phones, less than 576px) */
@media (max-width: 575.98px) {
    .arkly-container {
        padding: 0 var(--spacing-3);
    }
    
    .arkly-hero {
        min-height: 80vh;
        padding: var(--spacing-16) 0;
    }
    
    .arkly-hero h1 {
        font-size: var(--text-2xl); /* Réduit de text-3xl à text-2xl pour mobile */
        line-height: var(--leading-tight);
    }
    
    .subtitle {
        font-size: var(--text-sm) !important; /* Réduit de text-base à text-sm pour mobile */
        line-height: 1.4;
        margin-bottom: var(--spacing-4);
    }
    
    /* Tailles optimisées sur mobile pour index.html */
    .arkly-logo-img {
        max-height: 14px !important; /* Plus petit sur mobile - réduit de 28px à 16px */
        width: auto;
    }
    
    /* Centrage des headers de contenu sur mobile (pas le logo de navigation) */
    /* Headers de pages comme About, Features, Insights, etc. */
    .arkly-page-header,
    .arkly-hero-content,
    .arkly-features-header,
    .arkly-section-header {
        text-align: center;
    }
    
    /* Titres principaux des pages */
    .arkly-page-header h1,
    .arkly-features-header h2,
    .arkly-section-header h2 {
        text-align: center;
        margin: 0 auto var(--spacing-6); /* Ajout d'espacement en bas */
        font-size: var(--text-2xl) !important; /* Réduit la taille sur mobile */
    }
    
    /* Descriptions sous les titres */
    .arkly-page-header p,
    .arkly-features-header p,
    .arkly-section-header p {
        text-align: center;
        margin: 0 auto;
        max-width: 90%;
        font-size: var(--text-sm) !important; /* Réduit la taille de texte */
        margin-top: var(--spacing-4); /* Ajoute de l'espace au-dessus */
    }
    
    /* Logo principal dans le hero - légèrement plus grand */
    .arkly-hero-content img[alt="arkly.capital"] {
        max-height: 36px !important; /* Légèrement plus grand: 36px au lieu de 32px */
        width: auto;
    }
    
    /* Titres et textes optimisés pour mobile */
    .arkly-features-header h2 {
        font-size: var(--text-2xl) !important; /* Réduit de text-3xl à text-2xl pour mobile */
        line-height: 1.3;
    }
    
    .arkly-features-header p {
        font-size: var(--text-sm) !important; /* Réduit de text-base à text-sm */
    }

    .arkly-features-grid {
        gap: var(--spacing-6);
    }
    
    .arkly-feature-card {
        padding: var(--spacing-6);
    }
    
    .arkly-stats-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-6);
        text-align: center;
    }
    
    .arkly-stat-number {
        font-size: var(--text-3xl);
    }
    
    .arkly-cta-buttons {
        width: 100%;
    }
    
    .arkly-btn {
        width: 100%;
        justify-content: center;
        max-width: 280px; /* Limite la largeur maximale */
        margin: 0 auto; /* Centre le bouton */
    }
    
    /* Taille spécifique pour les boutons de navigation */
    .arkly-nav-cta {
        max-width: 140px;
        font-size: var(--text-sm);
        padding: var(--spacing-2) var(--spacing-3);
        width: auto;
    }
    
    /* Taille spécifique pour les boutons principaux */
    .arkly-btn-primary,
    .arkly-btn-secondary,
    #applyPresaleBtn,
    #joinWaitlistBtn {
        max-width: 200px;
        width: auto;
        margin: var(--spacing-2) auto;
    }
    
    /* Boutons Join Waitlist spécifiques */
    button[onclick*="joinWaitlist"],
    a[href*="waitlist"]:not(.arkly-nav-cta),
    .arkly-hero .arkly-btn {
        max-width: 220px;
        width: auto;
    }
    
    .arkly-footer-content {
        gap: var(--spacing-6);
        text-align: center;
    }
    
    /* Header et navigation mobile */
    .arkly-logo-img {
        height: 18px; /* Augmenté de 10px à 18px pour meilleure visibilité */
    }
    
    /* Navigation mobile */
    .arkly-nav-links {
        display: none;
        position: fixed;
        top: 70px; /* Hauteur du header augmentée */
        left: 0;
        right: 0;
        background: var(--bg-primary);
        border-top: 1px solid var(--border-primary);
        padding: var(--spacing-6);
        z-index: 1000;
        box-shadow: var(--shadow-lg);
    }
    
    .arkly-nav-links--open {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-4);
    }
    
    .arkly-nav-link {
        padding: var(--spacing-3) 0;
        border-bottom: 1px solid var(--border-secondary);
        text-align: center;
        font-size: var(--text-base);
    }
    
    .arkly-nav-link:last-child {
        border-bottom: none;
    }
    
    .arkly-nav-cta {
        margin-top: var(--spacing-4);
        text-align: center;
    }
    
    /* Animation du bouton hamburger */
    .arkly-mobile-menu-toggle--open span:first-child {
        transform: rotate(45deg) translate(5px, 5px);
    }
    
    .arkly-mobile-menu-toggle--open span:nth-child(2) {
        opacity: 0;
    }
    
    .arkly-mobile-menu-toggle--open span:last-child {
        transform: rotate(-45deg) translate(7px, -6px);
    }
    
    /* Réduction générale des tailles de texte sur mobile */
    h1 {
        font-size: var(--text-2xl) !important;
    }
    
    h2 {
        font-size: var(--text-xl) !important;
    }
    
    h3 {
        font-size: var(--text-lg) !important;
    }
    
    p {
        font-size: var(--text-sm) !important;
        line-height: 1.5;
    }
    
    /* Espacement spécifique pour les headers de page */
    .arkly-page-header {
        margin-bottom: var(--spacing-8);
    }
    
    .arkly-page-header h1 {
        margin-bottom: var(--spacing-6) !important;
    }
    
    /* Réduction des padding et margins des blocs sur mobile */
    .arkly-feature-card,
    .arkly-stat-item,
    .arkly-security-pillar,
    .arkly-cert-card,
    .arkly-bounty-tier,
    .arkly-insight-card,
    .arkly-report-card,
    .arkly-media-item,
    .arkly-contact-method,
    .arkly-legal-content,
    .arkly-security-category,
    .arkly-podcast-item,
    div[style*="padding: var(--spacing-8)"],
    div[style*="padding: var(--spacing-10)"] {
        padding: var(--spacing-4) !important;
    }
    
    /* Réduction des gaps dans les grilles */
    .arkly-features-grid,
    .arkly-stats-grid,
    .arkly-security-grid,
    .arkly-certifications-grid,
    .arkly-insights-grid,
    .arkly-reports-grid,
    .arkly-media-grid,
    .arkly-contact-cards,
    div[style*="gap: var(--spacing-8)"],
    div[style*="gap: var(--spacing-10)"],
    div[style*="gap: var(--spacing-12)"] {
        gap: var(--spacing-4) !important;
    }
    
    /* Réduction des marges des sections */
    section {
        padding: var(--spacing-8) 0 !important;
    }
    
    /* Réduction des marges internes des blocs */
    .arkly-feature-icon,
    .arkly-security-icon,
    .arkly-cert-logo {
        width: 32px !important;
        height: 32px !important;
        margin-bottom: var(--spacing-3) !important;
    }
    
    /* Réduction des espacements dans les headers */
    .arkly-page-header,
    .arkly-features-header,
    .arkly-section-header {
        margin-bottom: var(--spacing-6) !important;
    }
    
    /* Réduction des espacements spécifiques aux inline styles */
    div[style*="margin-bottom: var(--spacing-12)"] {
        margin-bottom: var(--spacing-6) !important;
    }
    
    div[style*="margin-bottom: var(--spacing-10)"] {
        margin-bottom: var(--spacing-5) !important;
    }
    
    div[style*="margin-bottom: var(--spacing-8)"] {
        margin-bottom: var(--spacing-4) !important;
    }
    
    /* Ajustements pour les grilles avec minmax */
    div[style*="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))"],
    div[style*="grid-template-columns: repeat(auto-fit, minmax(350px, 1fr))"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Réduction de la hauteur des icônes et éléments décoratifs */
    .arkly-divider {
        margin: var(--spacing-4) 0 !important;
    }
    
    /* Optimisation des cartes avec style inline */
    div[style*="border-radius: 12px"] {
        border-radius: 8px !important;
        padding: var(--spacing-4) !important;
    }

    /* Réduction générale des tailles de texte sur mobile */
    h1 {
        font-size: var(--text-2xl) !important;
    }
    
    h2 {
        font-size: var(--text-xl) !important;
    }
    
    h3 {
        font-size: var(--text-lg) !important;
    }
    
    p {
        font-size: var(--text-sm) !important;
        line-height: 1.5;
    }
    
    /* Espacement spécifique pour les headers de page */
    .arkly-page-header {
        margin-bottom: var(--spacing-8);
    }
    
    .arkly-page-header h1 {
        margin-bottom: var(--spacing-6) !important;
    }
    
    /* Ajustements spécifiques des composants Arkly sur mobile */
    .arkly-feature-card {
        padding: var(--spacing-4) !important;
        border-radius: var(--radius-lg) !important;
    }
    
    .arkly-feature-card h3 {
        font-size: var(--text-base) !important;
        margin-bottom: var(--spacing-2) !important;
    }
    
    .arkly-feature-card p {
        font-size: var(--text-xs) !important;
        line-height: 1.4 !important;
    }
    
    /* Réduction des stats */
    .arkly-stat-item,
    .arkly-stat-card {
        padding: var(--spacing-4) !important;
    }
    
    .arkly-stat-number {
        font-size: var(--text-2xl) !important;
    }
    
    .arkly-stat-label {
        font-size: var(--text-xs) !important;
    }
    
    /* Ajustements pour les sections spéciales */
    .arkly-security-pillar,
    .arkly-insight-card,
    .arkly-report-card {
        padding: var(--spacing-4) !important;
        border-radius: var(--radius-md) !important;
    }
    
    /* Réduction des icônes dans tous les contextes */
    .arkly-feature-icon,
    .arkly-security-icon {
        width: 32px !important;
        height: 32px !important;
        margin-bottom: var(--spacing-3) !important;
    }
    
    /* Optimisation des badges et tags */
    .arkly-badge,
    .arkly-tag,
    .arkly-research-category,
    .arkly-insight-category {
        font-size: var(--text-xs) !important;
        padding: var(--spacing-1) var(--spacing-2) !important;
    }
    
    /* Réduction des dividers et espacements décoratifs */
    .arkly-divider {
        margin: var(--spacing-3) 0 !important;
    }
    
    .arkly-divider-vertical {
        height: 1rem !important;
        margin: 0 var(--spacing-2) !important;
    }

    .arkly-features-grid {
        gap: var(--spacing-6);
    }
    
    .arkly-feature-card {
        padding: var(--spacing-6);
    }
    
    .arkly-stats-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-6);
        text-align: center;
    }
    
    .arkly-stat-number {
        font-size: var(--text-3xl);
    }
    
    .arkly-cta-buttons {
        width: 100%;
    }
    
    .arkly-btn {
        width: 100%;
        justify-content: center;
        max-width: 280px; /* Limite la largeur maximale */
        margin: 0 auto; /* Centre le bouton */
    }
    
    /* Taille spécifique pour les boutons de navigation */
    .arkly-nav-cta {
        max-width: 140px;
        font-size: var(--text-sm);
        padding: var(--spacing-2) var(--spacing-3);
        width: auto;
    }
    
    /* Taille spécifique pour les boutons principaux */
    .arkly-btn-primary,
    .arkly-btn-secondary,
    #applyPresaleBtn,
    #joinWaitlistBtn {
        max-width: 200px;
        width: auto;
        margin: var(--spacing-2) auto;
    }
    
    /* Boutons Join Waitlist spécifiques */
    button[onclick*="joinWaitlist"],
    a[href*="waitlist"]:not(.arkly-nav-cta),
    .arkly-hero .arkly-btn {
        max-width: 220px;
        width: auto;
    }
    
    .arkly-footer-content {
        gap: var(--spacing-6);
        text-align: center;
    }
    
    /* Header et navigation mobile */
    .arkly-logo-img {
        height: 18px; /* Augmenté de 10px à 18px pour meilleure visibilité */
    }
    
    /* Navigation mobile */
    .arkly-nav-links {
        display: none;
        position: fixed;
        top: 70px; /* Hauteur du header augmentée */
        left: 0;
        right: 0;
        background: var(--bg-primary);
        border-top: 1px solid var(--border-primary);
        padding: var(--spacing-6);
        z-index: 1000;
        box-shadow: var(--shadow-lg);
    }
    
    .arkly-nav-links--open {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-4);
    }
    
    .arkly-nav-link {
        padding: var(--spacing-3) 0;
        border-bottom: 1px solid var(--border-secondary);
        text-align: center;
        font-size: var(--text-base);
    }
    
    .arkly-nav-link:last-child {
        border-bottom: none;
    }
    
    .arkly-nav-cta {
        margin-top: var(--spacing-4);
        text-align: center;
    }
    
    /* Animation du bouton hamburger */
    .arkly-mobile-menu-toggle--open span:first-child {
        transform: rotate(45deg) translate(5px, 5px);
    }
    
    .arkly-mobile-menu-toggle--open span:nth-child(2) {
        opacity: 0;
    }
    
    .arkly-mobile-menu-toggle--open span:last-child {
        transform: rotate(-45deg) translate(7px, -6px);
    }
    
    /* Réduction générale des tailles de texte sur mobile */
    h1 {
        font-size: var(--text-2xl) !important;
    }
    
    h2 {
        font-size: var(--text-xl) !important;
    }
    
    h3 {
        font-size: var(--text-lg) !important;
    }
    
    p {
        font-size: var(--text-sm) !important;
        line-height: 1.5;
    }
    
    /* Espacement spécifique pour les headers de page */
    .arkly-page-header {
        margin-bottom: var(--spacing-8);
    }
    
    .arkly-page-header h1 {
        margin-bottom: var(--spacing-6) !important;
    }
    
    /* Réduction des padding et margins des blocs sur mobile */
    .arkly-feature-card,
    .arkly-stat-item,
    .arkly-security-pillar,
    .arkly-cert-card,
    .arkly-bounty-tier,
    .arkly-insight-card,
    .arkly-report-card,
    .arkly-media-item,
    .arkly-contact-method,
    .arkly-legal-content,
    .arkly-security-category,
    .arkly-podcast-item,
    div[style*="padding: var(--spacing-8)"],
    div[style*="padding: var(--spacing-10)"] {
        padding: var(--spacing-4) !important;
    }
    
    /* Réduction des gaps dans les grilles */
    .arkly-features-grid,
    .arkly-stats-grid,
    .arkly-security-grid,
    .arkly-certifications-grid,
    .arkly-insights-grid,
    .arkly-reports-grid,
    .arkly-media-grid,
    .arkly-contact-cards,
    div[style*="gap: var(--spacing-8)"],
    div[style*="gap: var(--spacing-10)"],
    div[style*="gap: var(--spacing-12)"] {
        gap: var(--spacing-4) !important;
    }
    
    /* Réduction des marges des sections */
    section {
        padding: var(--spacing-8) 0 !important;
    }
    
    /* Réduction des marges internes des blocs */
    .arkly-feature-icon,
    .arkly-security-icon,
    .arkly-cert-logo {
        width: 32px !important;
        height: 32px !important;
        margin-bottom: var(--spacing-3) !important;
    }
    
    /* Réduction des espacements dans les headers */
    .arkly-page-header,
    .arkly-features-header,
    .arkly-section-header {
        margin-bottom: var(--spacing-6) !important;
    }
    
    /* Réduction des espacements spécifiques aux inline styles */
    div[style*="margin-bottom: var(--spacing-12)"] {
        margin-bottom: var(--spacing-6) !important;
    }
    
    div[style*="margin-bottom: var(--spacing-10)"] {
        margin-bottom: var(--spacing-5) !important;
    }
    
    div[style*="margin-bottom: var(--spacing-8)"] {
        margin-bottom: var(--spacing-4) !important;
    }
    
    /* Ajustements pour les grilles avec minmax */
    div[style*="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))"],
    div[style*="grid-template-columns: repeat(auto-fit, minmax(350px, 1fr))"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Réduction de la hauteur des icônes et éléments décoratifs */
    .arkly-divider {
        margin: var(--spacing-4) 0 !important;
    }
    
    /* Optimisation des cartes avec style inline */
    div[style*="border-radius: 12px"] {
        border-radius: 8px !important;
        padding: var(--spacing-4) !important;
    }

    /* Réduction générale des tailles de texte sur mobile */
    h1 {
        font-size: var(--text-2xl) !important;
    }
    
    h2 {
        font-size: var(--text-xl) !important;
    }
    
    h3 {
        font-size: var(--text-lg) !important;
    }
    
    p {
        font-size: var(--text-sm) !important;
        line-height: 1.5;
    }
    
    /* Espacement spécifique pour les headers de page */
    .arkly-page-header {
        margin-bottom: var(--spacing-8);
    }
    
    .arkly-page-header h1 {
        margin-bottom: var(--spacing-6) !important;
    }
    
    /* Ajustements spécifiques des composants Arkly sur mobile */
    .arkly-feature-card {
        padding: var(--spacing-4) !important;
        border-radius: var(--radius-lg) !important;
    }
    
    .arkly-feature-card h3 {
        font-size: var(--text-base) !important;
        margin-bottom: var(--spacing-2) !important;
    }
    
    .arkly-feature-card p {
        font-size: var(--text-xs) !important;
        line-height: 1.4 !important;
    }
    
    /* Réduction des stats */
    .arkly-stat-item,
    .arkly-stat-card {
        padding: var(--spacing-4) !important;
    }
    
    .arkly-stat-number {
        font-size: var(--text-2xl) !important;
    }
    
    .arkly-stat-label {
        font-size: var(--text-xs) !important;
    }
    
    /* Ajustements pour les sections spéciales */
    .arkly-security-pillar,
    .arkly-insight-card,
    .arkly-report-card {
        padding: var(--spacing-4) !important;
        border-radius: var(--radius-md) !important;
    }
    
    /* Réduction des icônes dans tous les contextes */
    .arkly-feature-icon,
    .arkly-security-icon {
        width: 32px !important;
        height: 32px !important;
        margin-bottom: var(--spacing-3) !important;
    }
    
    /* Optimisation des badges et tags */
    .arkly-badge,
    .arkly-tag,
    .arkly-research-category,
    .arkly-insight-category {
        font-size: var(--text-xs) !important;
        padding: var(--spacing-1) var(--spacing-2) !important;
    }
    
    /* Réduction des dividers et espacements décoratifs */
    .arkly-divider {
        margin: var(--spacing-3) 0 !important;
    }
    
    .arkly-divider-vertical {
        height: 1rem !important;
        margin: 0 var(--spacing-2) !important;
    }

    /* Ajustements des composants Arkly pour landscape phones */
    .arkly-feature-card {
        padding: var(--spacing-5) !important;
        border-radius: var(--radius-lg) !important;
    }
    
    .arkly-feature-card h3 {
        font-size: var(--text-lg) !important;
        margin-bottom: var(--spacing-3) !important;
    }
    
    .arkly-feature-card p {
        font-size: var(--text-sm) !important;
    }
    
    .arkly-stat-item,
    .arkly-stat-card {
        padding: var(--spacing-5) !important;
    }
    
    .arkly-stat-number {
        font-size: var(--text-3xl) !important;
    }
    
    .arkly-security-pillar,
    .arkly-insight-card,
    .arkly-report-card {
        padding: var(--spacing-5) !important;
    }
    
    .arkly-feature-icon,
    .arkly-security-icon {
        width: 36px !important;
        height: 36px !important;
        margin-bottom: var(--spacing-4) !important;
    }

    /* Animation du bouton hamburger */
    .arkly-mobile-menu-toggle--open span:first-child {
        transform: rotate(45deg) translate(5px, 5px);
    }
    
    .arkly-mobile-menu-toggle--open span:nth-child(2) {
        opacity: 0;
    }
    
    .arkly-mobile-menu-toggle--open span:last-child {
        transform: rotate(-45deg) translate(7px, -6px);
    }
    
    /* Réduction générale des tailles de texte sur mobile */
    h1 {
        font-size: var(--text-2xl) !important;
    }
    
    h2 {
        font-size: var(--text-xl) !important;
    }
    
    h3 {
        font-size: var(--text-lg) !important;
    }
    
    p {
        font-size: var(--text-sm) !important;
        line-height: 1.5;
    }
    
    /* Espacement spécifique pour les headers de page */
    .arkly-page-header {
        margin-bottom: var(--spacing-8);
    }
    
    .arkly-page-header h1 {
        margin-bottom: var(--spacing-6) !important;
    }
    
    /* Réduction des padding et margins des blocs sur mobile */
    .arkly-feature-card,
    .arkly-stat-item,
    .arkly-security-pillar,
    .arkly-cert-card,
    .arkly-bounty-tier,
    .arkly-insight-card,
    .arkly-report-card,
    .arkly-media-item,
    .arkly-contact-method,
    .arkly-legal-content,
    .arkly-security-category,
    .arkly-podcast-item,
    div[style*="padding: var(--spacing-8)"],
    div[style*="padding: var(--spacing-10)"] {
        padding: var(--spacing-4) !important;
    }
    
    /* Réduction des gaps dans les grilles */
    .arkly-features-grid,
    .arkly-stats-grid,
    .arkly-security-grid,
    .arkly-certifications-grid,
    .arkly-insights-grid,
    .arkly-reports-grid,
    .arkly-media-grid,
    .arkly-contact-cards,
    div[style*="gap: var(--spacing-8)"],
    div[style*="gap: var(--spacing-10)"],
    div[style*="gap: var(--spacing-12)"] {
        gap: var(--spacing-4) !important;
    }
    
    /* Réduction des marges des sections */
    section {
        padding: var(--spacing-8) 0 !important;
    }
    
    /* Réduction des marges internes des blocs */
    .arkly-feature-icon,
    .arkly-security-icon,
    .arkly-cert-logo {
        width: 32px !important;
        height: 32px !important;
        margin-bottom: var(--spacing-3) !important;
    }
    
    /* Réduction des espacements dans les headers */
    .arkly-page-header,
    .arkly-features-header,
    .arkly-section-header {
        margin-bottom: var(--spacing-6) !important;
    }
    
    /* Réduction des espacements spécifiques aux inline styles */
    div[style*="margin-bottom: var(--spacing-12)"] {
        margin-bottom: var(--spacing-6) !important;
    }
    
    div[style*="margin-bottom: var(--spacing-10)"] {
        margin-bottom: var(--spacing-5) !important;
    }
    
    div[style*="margin-bottom: var(--spacing-8)"] {
        margin-bottom: var(--spacing-4) !important;
    }
    
    /* Ajustements pour les grilles avec minmax */
    div[style*="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))"],
    div[style*="grid-template-columns: repeat(auto-fit, minmax(350px, 1fr))"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Réduction de la hauteur des icônes et éléments décoratifs */
    .arkly-divider {
        margin: var(--spacing-4) 0 !important;
    }
    
    /* Optimisation des cartes avec style inline */
    div[style*="border-radius: 12px"] {
        border-radius: 8px !important;
        padding: var(--spacing-4) !important;
    }

    /* Réduction générale des tailles de texte sur mobile */
    h1 {
        font-size: var(--text-2xl) !important;
    }
    
    h2 {
        font-size: var(--text-xl) !important;
    }
    
    h3 {
        font-size: var(--text-lg) !important;
    }
    
    p {
        font-size: var(--text-sm) !important;
        line-height: 1.5;
    }
    
    /* Espacement spécifique pour les headers de page */
    .arkly-page-header {
        margin-bottom: var(--spacing-8);
    }
    
    .arkly-page-header h1 {
        margin-bottom: var(--spacing-6) !important;
    }
    
    /* Centrage des boutons sociaux sur mobile */
    .arkly-social-links {
        justify-content: center !important;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .arkly-hero h1 {
        font-size: var(--text-4xl);
    }
    
    .arkly-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .arkly-nav {
        padding: 0 var(--spacing-5);
    }
    
    /* Limitation des boutons pour tablettes aussi */
    .arkly-btn {
        max-width: 300px;
        margin: 0 auto;
    }
    
    .arkly-nav-cta {
        max-width: 140px;
        width: auto;
    }
    
    .arkly-btn-primary,
    .arkly-btn-secondary,
    button[onclick*="joinWaitlist"],
    a[href*="waitlist"]:not(.arkly-nav-cta) {
        max-width: 220px;
        width: auto;
    }
    
    /* Navigation mobile pour cette taille aussi */
    .arkly-nav-links {
        display: none;
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        background: var(--bg-primary);
        border-top: 1px solid var(--border-primary);
        padding: var(--spacing-6);
        z-index: 1000;
        box-shadow: var(--shadow-lg);
    }
    
    .arkly-nav-links--open {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-4);
    }
    
    .arkly-nav-link {
        padding: var(--spacing-3) 0;
        border-bottom: 1px solid var(--border-secondary);
        text-align: center;
        font-size: var(--text-base);
    }
    
    .arkly-nav-link:last-child {
        border-bottom: none;
    }
    
    .arkly-nav-cta {
        margin-top: var(--spacing-4);
        text-align: center;
    }
    
    /* Animation du bouton hamburger */
    .arkly-mobile-menu-toggle--open span:first-child {
        transform: rotate(45deg) translate(5px, 5px);
    }
    
    .arkly-mobile-menu-toggle--open span:nth-child(2) {
        opacity: 0;
    }
    
    .arkly-mobile-menu-toggle--open span:last-child {
        transform: rotate(-45deg) translate(7px, -6px);
    }
    
    /* Réduction générale des tailles de texte sur mobile */
    h1 {
        font-size: var(--text-2xl) !important;
    }
    
    h2 {
        font-size: var(--text-xl) !important;
    }
    
    h3 {
        font-size: var(--text-lg) !important;
    }
    
    p {
        font-size: var(--text-sm) !important;
        line-height: 1.5;
    }
    
    /* Espacement spécifique pour les headers de page */
    .arkly-page-header {
        margin-bottom: var(--spacing-8);
    }
    
    .arkly-page-header h1 {
        margin-bottom: var(--spacing-6) !important;
    }
    
    /* Réduction des padding et margins des blocs sur mobile */
    .arkly-feature-card,
    .arkly-stat-item,
    .arkly-security-pillar,
    .arkly-cert-card,
    .arkly-bounty-tier,
    .arkly-insight-card,
    .arkly-report-card,
    .arkly-media-item,
    .arkly-contact-method,
    .arkly-legal-content,
    .arkly-security-category,
    .arkly-podcast-item,
    div[style*="padding: var(--spacing-8)"],
    div[style*="padding: var(--spacing-10)"] {
        padding: var(--spacing-5) !important;
    }
    
    /* Réduction des gaps dans les grilles */
    .arkly-features-grid,
    .arkly-stats-grid,
    .arkly-security-grid,
    .arkly-certifications-grid,
    .arkly-insights-grid,
    .arkly-reports-grid,
    .arkly-media-grid,
    .arkly-contact-cards,
    div[style*="gap: var(--spacing-8)"],
    div[style*="gap: var(--spacing-10)"],
    div[style*="gap: var(--spacing-12)"] {
        gap: var(--spacing-5) !important;
    }
    
    /* Réduction des marges des sections */
    section {
        padding: var(--spacing-10) 0 !important;
    }
    
    /* Réduction des marges internes des blocs */
    .arkly-feature-icon,
    .arkly-security-icon,
    .arkly-cert-logo {
        width: 36px !important;
        height: 36px !important;
        margin-bottom: var(--spacing-4) !important;
    }
    
    /* Réduction des espacements dans les headers */
    .arkly-page-header,
    .arkly-features-header,
    .arkly-section-header {
        margin-bottom: var(--spacing-6) !important;
    }
    
    /* Réduction des espacements spécifiques aux inline styles */
    div[style*="margin-bottom: var(--spacing-12)"] {
        margin-bottom: var(--spacing-6) !important;
    }
    
    div[style*="margin-bottom: var(--spacing-10)"] {
        margin-bottom: var(--spacing-5) !important;
    }
    
    div[style*="margin-bottom: var(--spacing-8)"] {
        margin-bottom: var(--spacing-4) !important;
    }
    
    /* Ajustements pour les grilles avec minmax */
    div[style*="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))"],
    div[style*="grid-template-columns: repeat(auto-fit, minmax(350px, 1fr))"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Réduction de la hauteur des icônes et éléments décoratifs */
    .arkly-divider {
        margin: var(--spacing-4) 0 !important;
    }
    
    /* Optimisation des cartes avec style inline */
    div[style*="border-radius: 12px"] {
        border-radius: 8px !important;
        padding: var(--spacing-4) !important;
    }

    /* Réduction générale des tailles de texte sur mobile */
    h1 {
        font-size: var(--text-2xl) !important;
    }
    
    h2 {
        font-size: var(--text-xl) !important;
    }
    
    h3 {
        font-size: var(--text-lg) !important;
    }
    
    p {
        font-size: var(--text-sm) !important;
        line-height: 1.5;
    }
    
    /* Espacement spécifique pour les headers de page */
    .arkly-page-header {
        margin-bottom: var(--spacing-8);
    }
    
    .arkly-page-header h1 {
        margin-bottom: var(--spacing-6) !important;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    /* Tailles optimisées pour tablettes */
    .arkly-logo-img {
        max-height: 40px !important; /* Taille intermédiaire légèrement plus grande */
    }
    
    .arkly-hero-content img[alt="arkly.capital"] {
        max-height: 42px !important; /* Taille intermédiaire légèrement plus grande */
    }
    
    .subtitle {
        font-size: var(--text-lg) !important; /* Taille intermédiaire plus grande */
    }
    
    /* Header améliorations */
    .arkly-nav-links {
        display: flex !important;
        position: static;
        background: none;
        border: none;
        padding: 0;
        box-shadow: none;
        flex-direction: row;
        gap: var(--spacing-6);
    }
    
    .arkly-nav-links--open {
        display: flex !important;
    }
    
    .arkly-mobile-menu-toggle {
        display: none;
    }
    
    /* Hero améliorations */
    .arkly-hero h1 {
        font-size: var(--text-5xl);
    }
    
    .arkly-hero-content {
        max-width: 48rem;
    }
    
    /* Features en 2 colonnes */
    .arkly-features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-8);
    }
    
    /* Stats en ligne */
    .arkly-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    /* CTA buttons en ligne */
    .arkly-cta-buttons {
        flex-direction: row;
        justify-content: center;
    }
    
    .arkly-btn {
        width: auto;
    }
    
    /* Footer en 2 colonnes */
    .arkly-footer-content {
        grid-template-columns: repeat(2, 1fr);
        text-align: left;
    }
    
    /* Sections padding */
    section {
        padding: var(--spacing-20) 0;
    }
    
    /* Boutons - tailles optimisées pour tablettes */
    .arkly-nav-cta {
        max-width: 160px !important;
    }
    
    .arkly-btn-primary,
    .arkly-btn-secondary {
        max-width: 250px !important;
    }
    
    .arkly-btn,
    button[class*="waitlist"],
    a[href*="waitlist"],
    .btn-waitlist {
        max-width: 300px !important;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    /* Container plus large */
    .arkly-container {
        padding: 0 var(--spacing-8);
    }
    
    /* Hero plus grand */
    .arkly-hero {
        min-height: 100vh;
    }
    
    .arkly-hero h1 {
        font-size: var(--text-6xl);
    }
    
    .arkly-hero-content {
        max-width: 56rem;
    }
    
    /* Features en 4 colonnes */
    .arkly-features-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--spacing-6);
    }
    
    .arkly-feature-card {
        padding: var(--spacing-8);
    }
    
    /* Footer en 4 colonnes */
    .arkly-footer-content {
        grid-template-columns: 2fr 1fr 1fr 1fr;
        gap: var(--spacing-12);
    }
    
    /* Sections padding plus grand */
    section {
        padding: var(--spacing-24) 0;
    }
    
    /* Logo plus petit sur desktop - 20% de réduction */
    .arkly-logo-img {
        max-height: 14px !important; /* Réduit de ~20% par rapport à la taille standard */
        width: auto;
    }
    
    /* Rétablir l'alignement à gauche sur desktop */
    .arkly-page-header,
    .arkly-hero-content,
    .arkly-features-header,
    .arkly-section-header {
        text-align: left !important;
    }
    
    .arkly-page-header h1,
    .arkly-features-header h2,
    .arkly-section-header h2,
    .arkly-page-header p,
    .arkly-features-header p,
    .arkly-section-header p {
        text-align: left !important;
        margin: initial !important;
        max-width: none !important;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    /* Logo reste à la même taille réduite */
    .arkly-logo-img {
        max-height: 14px !important; /* Maintient la réduction de 20% */
        width: auto;
    }
    
    .arkly-hero-content {
        max-width: 64rem;
    }
    
    .subtitle {
        font-size: var(--text-2xl);
    }
    
    /* Stats plus grands */
    .arkly-stat-number {
        font-size: var(--text-6xl);
    }
    
    /* Feature cards plus grandes */
    .arkly-feature-card {
        padding: var(--spacing-10);
    }
    
    .arkly-feature-icon {
        width: 4rem;
        height: 4rem;
    }
}

/* Extra extra large devices (1400px and up) */
@media (min-width: 1400px) {
    .arkly-container {
        max-width: 1320px;
    }
    
    section {
        padding: var(--spacing-32) 0;
    }
}

/* High DPI screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Ajustements pour écrans haute densité */
    .arkly-feature-icon svg,
    .arkly-social-link svg {
        width: 1.1em;
        height: 1.1em;
    }
}

/* Landscape orientation optimizations */
@media (orientation: landscape) and (max-height: 600px) {
    .arkly-hero {
        min-height: 90vh;
        padding: var(--spacing-12) 0;
    }
    
    .arkly-hero h1 {
        font-size: var(--text-4xl);
    }
    
    .subtitle {
        font-size: var(--text-lg);
        margin-bottom: var(--spacing-6);
    }
    
    section {
        padding: var(--spacing-12) 0;
    }
}

/* Print styles */
@media print {
    * {
        background: transparent !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    .arkly-header,
    .arkly-mobile-menu-toggle,
    .arkly-btn,
    .arkly-social-links {
        display: none !important;
    }
    
    .arkly-hero {
        min-height: auto;
        padding: var(--spacing-8) 0;
    }
    
    .arkly-footer {
        border-top: 1px solid #000;
        padding: var(--spacing-4) 0;
    }
    
    a[href^="http"]:after {
        content: " (" attr(href) ")";
    }
    
    h1, h2, h3 {
        page-break-after: avoid;
    }
    
    .arkly-feature-card {
        break-inside: avoid;
        border: 1px solid #000;
        margin-bottom: var(--spacing-4);
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Ajustements pour appareils tactiles */
    .arkly-btn {
        min-height: 44px; /* Taille minimum recommandée pour le touch */
        padding: var(--spacing-3) var(--spacing-6);
    }
    
    .arkly-nav-link {
        padding: var(--spacing-3) var(--spacing-4);
    }
    
    .arkly-social-link {
        width: 3rem;
        height: 3rem;
    }
    
    /* Suppression des effets hover pour tactile */
    .arkly-feature-card:hover {
        transform: none;
        box-shadow: var(--shadow-base);
    }
    
    .arkly-btn-primary:hover {
        transform: none;
        box-shadow: none;
    }
    
    .hover-lift:hover,
    .hover-scale:hover {
        transform: none;
    }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .arkly-hero-graphic {
        animation: none;
    }
    
    .arkly-feature-card,
    .arkly-btn,
    .arkly-social-link {
        transition: none;
    }
    
    .arkly-feature-card:hover {
        transform: none;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    :root {
        --border-primary: #000000;
        --border-secondary: #000000;
        --text-secondary: #000000;
    }
    
    .arkly-feature-card {
        border: 2px solid var(--border-primary);
    }
    
    .arkly-btn-secondary,
    .arkly-btn-outline {
        border: 2px solid var(--border-primary);
    }
}

/* Dark mode media query (préparation future) */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #000000;
        --bg-secondary: #0a0a0a;
        --bg-tertiary: #111111;
        --text-primary: #ffffff;
        --text-secondary: #a1a1aa;
        --text-tertiary: #71717a;
        --border-primary: #27272a;
        --border-secondary: #3f3f46;
    }
    
    .arkly-header {
        background: rgba(0, 0, 0, 0.95);
        border-bottom-color: var(--border-primary);
    }
    
    .arkly-feature-card {
        background: var(--bg-secondary);
        border-color: var(--border-primary);
    }
}

/* Specific iPhone optimizations */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari specific */
    .arkly-hero {
        min-height: -webkit-fill-available;
    }
    
    /* Fix pour le viewport iOS */
    .arkly-hero {
        height: calc(100vh - var(--header-height));
        min-height: calc(100vh - var(--header-height));
    }
}

/* Android Chrome optimizations */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
    /* Android specific styles si nécessaire */
    .arkly-btn {
        -webkit-appearance: none;
        appearance: none;
    }
}