/* ============================================
   RESPONSIVE DESIGN - MOBILE FIRST
   ============================================ */

/* Très petits écrans (jusqu'à 360px) */
@media (max-width: 360px) {
    .container {
        padding: 0 1rem; /* Ajustement pour un peu plus d'air */
    }

    /* Forcer une seule colonne pour éviter tout débordement */
    .services-grid,
    .products-grid,
    .projects-grid {
        grid-template-columns: 1fr;
    }

    /* Ajouter de l'espace entre les sections */
    .services, .products, .why-us, .team {
        padding-top: var(--spacing-lg);
        padding-bottom: var(--spacing-lg);
    }
    
    h1, .hero-title {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }
    
    h2, .section-title {
        font-size: clamp(1.25rem, 5vw, 1.75rem);
    }
    
    .hero-stats {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
    
    .stat-number {
        font-size: 1.8rem;
    }
    
    .stat-label {
        font-size: 0.7rem;
    }
}

/* Petits écrans (361px à 480px) */
@media (min-width: 361px) and (max-width: 480px) {
    .container {
        padding: 0 var(--spacing-sm);
    }
    
    h1, .hero-title {
        font-size: clamp(1.8rem, 6vw, 2.2rem);
    }
    
    h2, .section-title {
        font-size: clamp(1.5rem, 5vw, 1.8rem);
    }
    
    .hero-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-sm);
    }
}

/* Mobiles moyens (481px à 600px) */
@media (min-width: 481px) and (max-width: 600px) {
    .container {
        padding: 0 var(--spacing-sm);
    }
    
    h1, .hero-title {
        font-size: clamp(2rem, 6vw, 2.5rem);
    }
    
    h2, .section-title {
        font-size: clamp(1.6rem, 5vw, 2rem);
    }
}

/* Grands mobiles et petites tablettes (601px à 767px) */
@media (min-width: 601px) and (max-width: 767px) {
    .container {
        padding: 0 var(--spacing-md);
    }
    
    h1, .hero-title {
        font-size: clamp(2.2rem, 6vw, 2.8rem);
    }
    
    h2, .section-title {
        font-size: clamp(1.8rem, 5vw, 2.2rem);
    }
}

/* Grands écrans (1440px et plus) */
@media (min-width: 1440px) {
    .container {
        max-width: 1400px;
    }
    
    .hero-content {
        gap: var(--spacing-xxl);
    }
    
    .image-shape {
        width: 35vw;
        height: 35vw;
        max-width: 500px;
        max-height: 500px;
    }
}

/* Desktop (1024px à 1439px) */
@media (min-width: 1024px) and (max-width: 1439px) {
    .container {
        max-width: 1200px;
        padding: 0 var(--spacing-lg);
    }
    
    .hero-content {
        gap: var(--spacing-xl);
    }
    
    .image-shape {
        width: 30vw;
        height: 30vw;
        max-width: 400px;
        max-height: 400px;
    }
}

@media (min-width: 768px) {
    .contact-content {
        grid-template-columns: 1fr 1fr;
        display: grid;
    }
}

/* Tablettes (768px à 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .container {
        padding: 0 var(--spacing-md);
    }
    
    h1 {
        font-size: clamp(2.5rem, 4vw, 3.5rem);
    }
    
    h2 {
        font-size: clamp(2rem, 3.5vw, 2.5rem);
    }
    
    .nav-menu {
        gap: var(--spacing-lg);
    }
    
    .nav-list {
        gap: var(--spacing-md);
    }
    
    .hero-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
        text-align: center;
    }
    
    .hero-description {
        margin-left: auto;
        margin-right: auto;
    }
    
    .hero-cta {
        justify-content: center;
    }
    
    .hero-stats {
        justify-content: center;
    }
    
    .hero-visual {
        order: -1;
        display: block; /* S'assurer que l'image est visible sur tablette */
    }
    
    .image-shape {
        width: 40vw;
        height: 40vw;
        max-width: 350px;
        max-height: 350px;
        margin: 0 auto;
    }
}

/* Tablettes grandes (901px à 1023px) */
@media (min-width: 901px) and (max-width: 1023px) {
    .container {
        padding: 0 var(--spacing-md);
    }
    
    h1 {
        font-size: clamp(2.8rem, 5vw, 3.5rem);
    }
    
    h2 {
        font-size: clamp(2.2rem, 4vw, 2.8rem);
    }
    
    /* Navigation tablette */
    .nav-menu {
        gap: var(--spacing-lg);
    }
    
    .nav-list {
        gap: var(--spacing-md);
    }
    
    /* Hero tablette */
    .hero-content {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-xl);
    }
    
    .hero-description {
        margin-left: auto;
        margin-right: auto;
    }
    
    .hero-cta {
        justify-content: flex-start;
    }
    
    .hero-stats {
        justify-content: flex-start;
    }
    
    .hero-visual {
        order: 0;
    }
    
    .image-shape {
        width: 40vw;
        height: 40vw;
        max-width: 400px;
        max-height: 400px;
        margin: 0 auto;
    }
    
    /* Services & Produits tablette */
    .services-grid,
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* About tablette */
    .about-content {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-xl);
    }
    
    .about-visual {
        order: 0;
    }
    
    .image-frame {
        width: 40vw;
        height: 40vw;
        max-width: 400px;
        max-height: 400px;
    }
    
    /* Contact tablette */
    .contact-content {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-xl);
    }
    
    /* Footer tablette */
    .footer-content {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-xl);
    }
    
    .footer-links {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile (jusqu'à 767px) */
@media (max-width: 767px) {
    .container {
        padding: 0 var(--spacing-sm);
    }
    
    .hero-title {
        font-size: clamp(2rem, 8vw, 2.8rem); /* Augmenter la taille relative pour un meilleur impact */
        line-height: 1.3; /* Améliorer l'espacement des lignes */
    }
    
    h2 {
        font-size: clamp(1.75rem, 4vw, 2rem);
    }
    
    h3 {
        font-size: 1.5rem;
    }

    p, .service-description, .product-description {
        font-size: 0.95rem; /* Harmoniser la taille du texte courant */
    }
    
    /* Navigation mobile */
    .nav-menu {
        position: fixed;
        top: 70px; /* Ajusté pour correspondre à la hauteur de la navbar */
        left: 0;
        right: 0;
        bottom: 0; /* Prend toute la hauteur restante */
        background: var(--color-background);
        flex-direction: column;
        padding: var(--spacing-lg);
        box-shadow: var(--shadow-lg);
        transform: translateX(100%); /* Changé pour une animation de droite à gauche */
        opacity: 1; /* Opacité toujours à 1 */
        visibility: hidden;
        transition: transform var(--transition-normal);
        z-index: var(--z-dropdown);
        overflow-y: auto; /* Permet le scroll si le contenu est trop grand */
    }

    .nav-menu.active {
        transform: translateX(0); /* Le menu glisse en place */
        visibility: visible;
    }
    
    .nav-list {
        flex-direction: column;
        width: 100%;
        gap: 0;
    }
    
    .nav-link {
        display: block;
        padding: 1rem 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }
    
    .nav-link:last-child {
        border-bottom: none;
    }
    
    .btn-nav {
        margin-top: var(--spacing-md);
        width: 100%;
        text-align: center;
    }
    
    
    .menu-toggle {
        display: block;
    }
    
    .menu-toggle.active .hamburger {
        background: transparent;
    }
    
    .menu-toggle.active .hamburger::before {
        transform: rotate(45deg) translate(5px, 5px);
    }
    
    .menu-toggle.active .hamburger::after {
        transform: rotate(-45deg) translate(7px, -7px); /* Ajustement pour une croix parfaite */
    }
    
    /* Hero mobile */
    .hero {
        padding-top: 100px;
        padding-bottom: var(--spacing-xl);
    }
    
    .hero-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        text-align: center;
    }
    
    .hero-badge {
        font-size: 0.75rem;
    }
    
    .hero-description {
        font-size: 1rem;
    }
    
    .hero-cta {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .hero-stats {
        display: grid; /* Utiliser grid pour un meilleur contrôle */
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-md);
        justify-items: center;
        margin-top: var(--spacing-lg);
    }
    
    .stat-number {
        font-size: 2.2rem;
    }

    .stat-label {
        font-size: 0.75rem; /* Réduire la taille pour éviter le chevauchement */
    }
    
    .hero-visual {
        display: none; /* Masquer l'image du héros sur mobile */
    }
    
    .image-shape {
        width: 280px;
        height: 280px;
        margin: 0 auto;
    }

    .team-grid {
        grid-template-columns: 1fr;
    }

    .card-image {
        height: 300px; /* Hauteur réduite pour mobile */
    }
    
    .floating-element {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }

    .why-us, .team, .services, .products, .contact {
        padding: var(--spacing-xl) 0;
    }
    
    /* Services & Produits mobile */
    
    .services-grid,
    .products-grid,
    .projects-grid {
        /* Utiliser une valeur minmax plus petite pour éviter les débordements */
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: var(--spacing-md);
    }
    
    .service-card {
        padding: var(--spacing-md);
    }
    
    .service-icon {
        width: 60px;
        height: 60px;
    }
    
    /* Projets mobile */
    .projects {
        padding: var(--spacing-xl) 0;
    }
    
    
    .project-image {
        height: 200px;
    }
    
    /* About mobile */
    .about {
        padding: var(--spacing-xl) 0;
    }
    
    .why-us-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .about-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        text-align: center;
    }
    
    .about-visual {
        order: -1;
    }
    
    .image-frame {
        width: 280px;
        height: 280px;
    }
    
    .why-us-stats {
        flex-direction: row;
        justify-content: space-around;
        gap: var(--spacing-sm);
        margin-top: var(--spacing-xl);
    }

    .why-us-stats .stat-item .stat-number {
        font-size: 2.5rem;
    }

    .why-us-stats .stat-item .stat-label {
        font-size: 0.75rem;
    }

    .team-stats {
        gap: var(--spacing-md);
    }
    
    .team-stat .stat-number {
        font-size: 2rem;
    }

    /* Styles pour les pages de profil sur mobile */
    .profile-card {
        grid-template-columns: 1fr;
        padding: var(--spacing-md);
        text-align: center;
    }

    .profile-image {
        margin-bottom: var(--spacing-md);
    }

    .profile-info h1 {
        font-size: 2.2rem;
    }

    .profile-role {
        font-size: 1.2rem;
    }

    .skills-list {
        justify-content: center;
    }

    .member-social {
        justify-content: center;
        display: flex;
        gap: var(--spacing-lg);
    }
    
    .feature {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--spacing-sm);
    }
    
    /* Contact mobile */
    .contact {
        padding: var(--spacing-xl) 0;
    }
    
    .contact-content {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xl);
        text-align: center; /* Centrer le texte d'information */
    }

    .contact-info {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Forcer deux colonnes */
        gap: var(--spacing-lg);
        align-items: start; /* Aligner les éléments en haut */
    }

    /* Placer le dernier élément sur toute la largeur */
    .contact-info .info-item:last-child {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .contact-form {
        padding: var(--spacing-lg);
        width: 100%;
        margin: 0 auto; /* Centrer le formulaire */
        max-width: 500px; /* Limiter la largeur sur les écrans intermédiaires */
    }
    
    .info-item {
        display: flex;
        flex-direction: column; /* Revenir à une disposition verticale pour chaque item */
        align-items: center;
        text-align: center;
        gap: var(--spacing-sm);
    }
    
    .social-links {
        justify-content: center;
    }
    
    /* Footer mobile */
    .footer {
        padding: var(--spacing-lg) 0 var(--spacing-md);
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        text-align: center;
    }
    
    .footer-links {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .footer-logo {
        justify-content: center;
    }
    
    .footer-description {
        font-size: 0.9rem;
    }
    
    /* Back to Top mobile */
    .back-to-top {
        width: 45px;
        height: 45px;
        bottom: var(--spacing-sm);
        right: var(--spacing-sm);
    }
}

/* Petit mobile (jusqu'à 480px) */
@media (max-width: 480px) {
    :root {
        --spacing-md: 1.25rem; /* Réduction pour les petits écrans */
        --spacing-lg: 1.75rem;
        --spacing-xl: 2.5rem;
    }

    .container {
        padding: 0 1rem; /* Espacement légèrement réduit */
    }

    .image-shape {
        width: 250px;
        height: 250px;
    }
    
    .floating-element {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .btn {
        padding: 0.875rem 1.5rem;
        font-size: 0.95rem;
    }
    
    .wave-divider svg {
        height: 80px;
    }
}

/* Orientation paysage mobile */
@media (max-height: 600px) and (orientation: landscape) {
    .hero {
        padding-top: 80px;
        padding-bottom: var(--spacing-lg);
        min-height: auto;
    }
    
    .hero-content {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-md);
    }
    
    .hero-visual {
        order: 0;
    }
    
    .image-shape {
        width: 200px;
        height: 200px;
    }
    
    .nav-menu.active {
        max-height: 70vh;
        overflow-y: auto;
    }
}

/* Mode sombre via classe (géré par JS) */
:root body.dark-mode {
    /* Variables re-définies au niveau root pour héritage global */
    --color-onyx: #F5F5F5;        /* Devient blanc pour les titres */
    --color-sand: #121212;        /* Devient sombre pour les arrière-plans */
    --color-background: #050505;  /* Fond très sombre */
    --color-surface: #1E1E1E;     /* Surface des cartes */
    --color-text: #E2E8F0;        /* Texte principal clair */
    --color-text-light: #A0AEC0;  /* Texte secondaire */
    --color-gold: #D4AF37;        /* Garde la couleur or */
    --color-primary: #D4AF37;     /* Utilise or comme couleur primaire */
    --color-secondary: #F5F5F5;   /* Blanc comme secondaire */
    
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.8);
}

body.dark-mode {
    background-color: var(--color-background);
    color: var(--color-text);
}

body.dark-mode .navbar, 
body.dark-mode .navbar.scrolled {
    background-color: rgba(10, 10, 10, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .nav-menu {
    background-color: #1a1a1a;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

body.dark-mode .nav-link {
    color: var(--color-text);
}

body.dark-mode .hamburger, 
body.dark-mode .hamburger::before, 
body.dark-mode .hamburger::after {
    background: #FFFFFF;
}

body.dark-mode .services, 
body.dark-mode .products, 
body.dark-mode .team, 
body.dark-mode .why-us, 
body.dark-mode .about, 
body.dark-mode .contact, 
body.dark-mode .projects {
    background-color: var(--color-background);
}

body.dark-mode .why-us, 
body.dark-mode .team {
    background-color: var(--color-sand);
}

body.dark-mode .service-card, 
body.dark-mode .product-card, 
body.dark-mode .team-card, 
body.dark-mode .project-card, 
body.dark-mode .why-us .feature, 
body.dark-mode .modal-content, 
body.dark-mode .profile-card {
    background-color: var(--color-surface);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

body.dark-mode .service-card:hover, 
body.dark-mode .product-card:hover, 
body.dark-mode .team-card:hover, 
body.dark-mode .project-card:hover {
    background-color: #252525;
    border-color: var(--color-gold);
}

body.dark-mode h1, 
body.dark-mode h2, 
body.dark-mode h3, 
body.dark-mode h4, 
body.dark-mode h5, 
body.dark-mode h6,
body.dark-mode .hero-title, 
body.dark-mode .section-title, 
body.dark-mode .product-title, 
body.dark-mode .service-title, 
body.dark-mode .project-title,
body.dark-mode .stat-number, 
body.dark-mode .stat-label,
body.dark-mode .card-name, 
body.dark-mode .modal-name, 
body.dark-mode .feature h4 {
    color: var(--color-onyx);
}

body.dark-mode p,
body.dark-mode .hero-description,
body.dark-mode .service-description,
body.dark-mode .product-description,
body.dark-mode .section-description {
    color: var(--color-text);
}

body.dark-mode .text-gradient {
    text-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
}

body.dark-mode input, 
body.dark-mode textarea, 
body.dark-mode select {
    background-color: #2A2A2A;
    color: white;
    border: 1px solid #444;
}

body.dark-mode input::placeholder, 
body.dark-mode textarea::placeholder {
    color: #888;
}

body.dark-mode .footer {
    background-color: #000000;
    border-top: 1px solid #222;
    color: var(--color-text);
}

body.dark-mode .footer-column h4 {
    color: white;
}

body.dark-mode .contact {
    background-color: #000000;
    color: var(--color-text);
}

body.dark-mode .contact .section-subtitle {
    color: var(--color-gold);
}

body.dark-mode .contact .section-description,
body.dark-mode .contact-info .info-content p {
    color: var(--color-text-light);
}

body.dark-mode .team-modal {
    background: rgba(0, 0, 0, 0.9);
}

body.dark-mode .close-modal {
    color: white;
}

body.dark-mode .btn-primary {
    color: #1A1A1A;
}

body.dark-mode .btn-secondary {
    border-color: white;
    color: white;
}

body.dark-mode .btn-secondary:hover {
    background-color: white;
    color: black;
}

body.dark-mode .btn-outline {
    color: var(--color-text);
    border-color: var(--color-gold);
}

body.dark-mode .btn-outline:hover {
    color: #1A1A1A;
}

body.dark-mode .profile-header, 
body.dark-mode .profile-footer {
    background-color: #000000;
    color: var(--color-text);
}

body.dark-mode .navbar.scrolled .nav-link {
    color: var(--color-text);
}

body.dark-mode .navbar.scrolled .hamburger,
body.dark-mode .navbar.scrolled .hamburger::before,
body.dark-mode .navbar.scrolled .hamburger::after {
    background: #FFFFFF;
}

body.dark-mode .logo-dark {
    display: none !important;
}

body.dark-mode .logo-light {
    display: block !important;
}

body.dark-mode .navbar.scrolled .logo-light {
    display: block !important;
}

body.dark-mode .diagonal-divider polygon {
    fill: #000000 !important;
}

body.dark-mode .diagonal-divider {
    background-color: #000000;
}

body.dark-mode .card-image {
    background-color: #2A2A2A;
}

body.dark-mode .wave-divider {
    color: var(--color-background);
}

body.dark-mode .btn-nav {
    color: #1A1A1A !important;
}

body.dark-mode .loader {
    background-color: #000000;
}

/* Impression */
@media print {
    .loader,
    .navbar,
    .hero-cta,
    .wave-divider,
    .section-footer,
    .social-links,
    .back-to-top,
    .footer-bottom p:last-child {
        display: none;
    }
    
    body {
        color: #000;
        background: #fff;
        font-size: 12pt;
    }
    
    .container {
        max-width: 100%;
    }
    
    a {
        color: #000;
        text-decoration: underline;
    }
    
    .hero {
        padding-top: 0;
    }
    
    section {
        page-break-inside: avoid;
    }
    
    .btn {
        border: 1px solid #000;
        background: none;
        color: #000;
    }
}